Optimize semantic view editor scrolling event handler

Author: lierdakil

dist/main.js

@@ -2,6 +2,18 @@ import {isEqual} from "lodash"
 import {NavigationTree} from "typescript/lib/protocol"
 import {NavigationTreeViewModel} from "./semanticViewModel"
 
+function getElStartLine(elem: HTMLElement): number {
+  // tslint:disable-next-line: no-string-literal
+  const v = elem.dataset["startLine"]
+  return v !== undefined ? parseInt(v, 10) - 1 : 0
+}
+
+function getElEndLine(elem: HTMLElement): number {
+  // tslint:disable-next-line: no-string-literal
+  const v = elem.dataset["endLine"]
+  return v !== undefined ? parseInt(v, 10) - 1 : 0
+}
+
 /**
  * HELPER find the node that is "furthest down" the
  *        node hiearchy, i.e. which's start-, end-position contains the
@@ -17,15 +29,16 @@ import {NavigationTreeViewModel} from "./semanticViewModel"
 export function findNodeAt(
   startLine: number,
   endLine: number,
-  node: NavigationTreeViewModel,
-): NavigationTreeViewModel | undefined {
-  if (!node.childItems) {
+  node: HTMLLIElement,
+): HTMLLIElement | undefined {
+  const children = node.querySelectorAll<HTMLLIElement>(":scope > ol > li.node")
+  if (children.length === 0) {
     return undefined
   }
 
-  for (const elem of node.childItems) {
-    const start: number = getNodeStartLine(elem)
-    const end: number = getNodeEndLine(elem)
+  for (const elem of Array.from(children)) {
+    const start: number = getElStartLine(elem)
+    const end: number = getElEndLine(elem)
     if (isFinite(start) && isFinite(end)) {
       if (startLine >= start && endLine <= end) {
         const selected = findNodeAt(startLine, endLine, elem)
@@ -46,8 +59,8 @@ export function findNodeAt(
     }
   }
 
-  const nstart: number = getNodeStartLine(node)
-  const nend: number = getNodeEndLine(node)
+  const nstart: number = getElStartLine(node)
+  const nend: number = getElEndLine(node)
   if (isFinite(nstart) && isFinite(nend) && startLine >= nstart && endLine <= nend) {
     return node
   }
@@ -182,10 +195,10 @@ export function prepareNavTree(navTree: NavigationTreeViewModel | null): void {
  *            the cursor (line) position in the editor
  * @return {Boolean} true, if the node's HTML representation should be selected
  */
-export function isSelected(node: NavigationTreeViewModel, pos: number): boolean {
-  if (getNodeStartLine(node) <= pos && getNodeEndLine(node) >= pos) {
-    const start: number = getNodeStartLine(node)
-    const end: number = getNodeEndLine(node)
+export function isSelected(node: HTMLLIElement, pos: number): boolean {
+  const start: number = getElStartLine(node)
+  const end: number = getElEndLine(node)
+  if (start <= pos && end >= pos) {
     if (findNodeAt(start, end, node)) {
       // -> there is a node "further down" that should get selected
       return false

dist/main.js.map

@@ -1,6 +1,6 @@
 import * as etch from "etch"
 import {handlePromise} from "../../../../utils"
-import {isSameNode, isToggleEntry} from "./navTreeUtils"
+import {isToggleEntry} from "./navTreeUtils"
 import {NavigationTreeViewModel, SelectableNode, ToNodeScrollableEditor} from "./semanticViewModel"
 
 export interface Props extends JSX.Props {
@@ -25,18 +25,18 @@ export class NavigationNodeComponent implements JSX.ElementClass {
   public render(): JSX.Element {
     const node = this.props.navTree
     const {ctrl} = this.props
-    const selectedNode = ctrl.getSelectedNode()
-    const selected = selectedNode && isSameNode(node, selectedNode)
     const classes =
-      (node.childItems ? "nested-" : "") +
-      "item" +
-      (node.collapsed ? " collapsed" : " expanded") +
-      (selected ? " selected" : "")
+      (node.childItems ? "nested-" : "") + "item" + (node.collapsed ? " collapsed" : " expanded")
     const styleClasses = this.getStyles()
 
     return (
-      <li className={"node entry exanded list-" + classes}>
-        <div className="header list-item" on={{click: (event) => this.entryClicked(event, node)}}>
+      <li
+        className={"node entry exanded list-" + classes}
+        dataset={{
+          startLine: this.props.navTree.spans[0]?.start?.line,
+          endLine: this.props.navTree.spans[0]?.end?.line,
+        }}>
+        <div className={`header list-item`} on={{click: (event) => this.entryClicked(event, node)}}>
           <span className={styleClasses}>{node.text}</span>
         </div>
         <ol className="entries list-tree">

lib/main/atom/views/outline/navTreeUtils.ts

@@ -3,7 +3,6 @@ import * as etch from "etch"
 import {isEqual} from "lodash"
 import {NavigationTree} from "typescript/lib/protocol"
 import {GetClientFunction} from "../../../../client"
-import {handlePromise} from "../../../../utils"
 import * as atomUtils from "../../utils"
 import {NavigationNodeComponent} from "./navigationNodeComponent"
 import {
@@ -25,7 +24,6 @@ export class NavigationTreeComponent
   private editor?: TextEditor
   private editorScrolling?: Disposable
   private editorChanging?: Disposable
-  private selectedNode?: NavigationTreeViewModel
   private getClient?: GetClientFunction
   private subscriptions = new CompositeDisposable()
 
@@ -48,7 +46,6 @@ export class NavigationTreeComponent
     if (this.editorChanging) this.editorChanging.dispose()
     this.editorScrolling = undefined
     this.editorChanging = undefined
-    this.selectedNode = undefined
     this.subscriptions.dispose()
     await etch.destroy(this)
   }
@@ -59,7 +56,25 @@ export class NavigationTreeComponent
   }
 
   public getSelectedNode() {
-    return this.selectedNode
+    return this.element.querySelector<HTMLElement>(".header.selected") ?? undefined
+  }
+
+  public clearSelection() {
+    const elems = this.element.querySelectorAll<HTMLElement>(".header.selected")
+    for (let i = 0; i < elems.length; i += 1) {
+      elems.item(i).classList.remove("selected")
+    }
+  }
+
+  public markSelection(node?: HTMLLIElement) {
+    this.clearSelection()
+    if (!node) return
+    const h = node.querySelector<HTMLElement>(".header")
+    if (h) h.classList.add("selected")
+  }
+
+  public firstNode() {
+    return this.element.querySelector<HTMLLIElement>("li.node") ?? undefined
   }
 
   public render() {
@@ -106,14 +121,13 @@ export class NavigationTreeComponent
     restoreCollapsed(navTree, this.props.navTree)
     this.props.navTree = navTree
 
-    let selectedNode: NavigationTreeViewModel | undefined
-    if (navTree) {
+    const node = this.firstNode()
+    if (node) {
       const cursorLine = this.getCursorLine()
       if (cursorLine !== undefined) {
-        selectedNode = findNodeAt(cursorLine, cursorLine, navTree)
+        this.markSelection(findNodeAt(cursorLine, cursorLine, node))
       }
     }
-    this.selectedNode = selectedNode
   }
 
   private loadNavTree = async () => {
@@ -139,15 +153,18 @@ export class NavigationTreeComponent
    *        current cursor position
    */
   private selectAtCursorLine = ({newBufferPosition}: CursorPositionChangedEvent) => {
-    if (!this.props.navTree) {
+    const firstNodeElem = this.firstNode()
+    if (!firstNodeElem) {
       return
     }
     const cursorLine = newBufferPosition.row
 
-    const selectedChild = findNodeAt(cursorLine, cursorLine, this.props.navTree)
-    if (selectedChild !== this.selectedNode) {
-      this.selectedNode = selectedChild
-      handlePromise(etch.update(this))
+    const selectedChild =
+      findNodeAt(cursorLine, cursorLine, firstNodeElem)?.querySelector(".header") ?? undefined
+    const currentSelection = this.getSelectedNode()
+    if (selectedChild !== currentSelection) {
+      if (currentSelection) currentSelection.classList.remove("selected")
+      if (selectedChild) selectedChild.classList.add("selected")
     }
   }
 

lib/main/atom/views/outline/navigationNodeComponent.tsx

@@ -25,5 +25,5 @@ export interface ToNodeScrollableEditor {
 }
 
 export interface SelectableNode {
-  getSelectedNode(): NavigationTreeViewModel | undefined
+  getSelectedNode(): HTMLElement | undefined
 }

lib/main/atom/views/outline/navigationTreeComponent.tsx

@@ -36,6 +36,30 @@
 .atomts-semantic-view {
   overflow-y: auto;
 
+  div.header {
+    position: initial;
+  }
+
+  div.header.selected {
+    color: @text-color-selected;
+    & > span {
+      z-index: 1;
+    }
+    &::before {
+      z-index: 1;
+    }
+    &::after {
+      position: absolute;
+      left: 0;
+      right: 0;
+      padding-top: 2em;
+      margin-top: -2em;
+      background-color: @background-color-selected;
+      display: block;
+      content: "";
+    }
+  }
+
   // @syntax-color-variable
   // @syntax-color-constant
   // @syntax-color-property