tree-element 0.1.1 → 0.3.0

package/src/keyHandler.ts

@@ -1,139 +1,203 @@
 import type {
-    CloseNode,
-    GetSelectedNode,
-    IsFocusOnTree,
-    OpenNode,
-    SelectNode,
+  CloseNode,
+  GetFocusedNode,
+  GetSelectedNode,
+  GetTree,
+  OpenNode,
+  SelectNode,
+  TriggerEvent,
 } from "./methodTypes";
 import type { Node } from "./node";
 
 interface KeyHandlerParams {
-    closeNode: CloseNode;
-    getSelectedNode: GetSelectedNode;
-    isFocusOnTree: IsFocusOnTree;
-    keyboardSupport: boolean;
-    openNode: OpenNode;
-    selectNode: SelectNode;
+  closeNode: CloseNode;
+  getFocusedNode: GetFocusedNode;
+  getSelectedNode: GetSelectedNode;
+  getTree: GetTree;
+  keyboardSupport: boolean;
+  openNode: OpenNode;
+  selectNode: SelectNode;
+  triggerEvent: TriggerEvent;
 }
 
 export default class KeyHandler {
-    private closeNode: CloseNode;
-    private getSelectedNode: GetSelectedNode;
-
-    private isFocusOnTree: IsFocusOnTree;
-
-    private keyboardSupport: boolean;
-    private openNode: OpenNode;
-    private originalSelectNode: SelectNode;
-    constructor({
-        closeNode,
-        getSelectedNode,
-        isFocusOnTree,
-        keyboardSupport,
-        openNode,
-        selectNode,
-    }: KeyHandlerParams) {
-        this.closeNode = closeNode;
-        this.getSelectedNode = getSelectedNode;
-        this.isFocusOnTree = isFocusOnTree;
-        this.keyboardSupport = keyboardSupport;
-        this.openNode = openNode;
-        this.originalSelectNode = selectNode;
-
-        if (keyboardSupport) {
-            document.addEventListener("keydown", this.handleKeyDown);
-        }
+  private closeNode: CloseNode;
+  private getFocusedNode: GetFocusedNode;
+  private getSelectedNode: GetSelectedNode;
+  private getTree: GetTree;
+
+  private keyboardSupport: boolean;
+  private openNode: OpenNode;
+  private originalSelectNode: SelectNode;
+  private triggerEvent: TriggerEvent;
+
+  constructor({
+    closeNode,
+    getFocusedNode,
+    getSelectedNode,
+    getTree,
+    keyboardSupport,
+    openNode,
+    selectNode,
+    triggerEvent,
+  }: KeyHandlerParams) {
+    this.closeNode = closeNode;
+    this.getFocusedNode = getFocusedNode;
+    this.getSelectedNode = getSelectedNode;
+    this.getTree = getTree;
+    this.keyboardSupport = keyboardSupport;
+    this.openNode = openNode;
+    this.originalSelectNode = selectNode;
+    this.triggerEvent = triggerEvent;
+
+    if (keyboardSupport) {
+      document.addEventListener("keydown", this.handleKeyDown);
     }
+  }
 
-    public deinit(): void {
-        if (this.keyboardSupport) {
-            document.removeEventListener("keydown", this.handleKeyDown);
-        }
+  public deinit(): void {
+    if (this.keyboardSupport) {
+      document.removeEventListener("keydown", this.handleKeyDown);
     }
+  }
+
+  public moveDown(): boolean {
+    return this.selectNode(this.getSelectedNode()?.getNextVisibleNode());
+  }
+
+  public moveUp(): boolean {
+    return this.selectNode(this.getSelectedNode()?.getPreviousVisibleNode());
+  }
+
+  // Activate the node, for example to open its edit page.
+  private activate(node: Node, originalEvent: KeyboardEvent): boolean {
+    this.triggerEvent("tree.activate", { node, originalEvent });
+    return true;
+  }
+
+  private handleArrowKey(key: string): boolean {
+    switch (key) {
+      case "ArrowDown": {
+        return this.moveDown();
+      }
+
+      case "ArrowLeft": {
+        return this.moveLeft();
+      }
+
+      case "ArrowRight": {
+        return this.moveRight();
+      }
+
+      case "ArrowUp": {
+        return this.moveUp();
+      }
+
+      default: {
+        return false;
+      }
+    }
+  }
 
-    public moveDown(selectedNode: Node): boolean {
-        return this.selectNode(selectedNode.getNextVisibleNode());
+  private handleKeyDown = (e: KeyboardEvent): void => {
+    const focusedNode = this.getFocusedNode();
+
+    if (!focusedNode) {
+      return;
     }
 
-    public moveUp(selectedNode: Node): boolean {
-        return this.selectNode(selectedNode.getPreviousVisibleNode());
+    let isKeyHandled: boolean;
+
+    const selectedNode = this.getSelectedNode();
+
+    switch (e.key) {
+      case "End": {
+        isKeyHandled = this.selectNode(this.getTree()?.getLastChild());
+        break;
+      }
+
+      case "Enter": {
+        // Without a selected node, activate the focused node
+        isKeyHandled = this.activate(selectedNode ?? focusedNode, e);
+        break;
+      }
+
+      case "Home": {
+        isKeyHandled = this.selectNode(this.getTree()?.children[0]);
+        break;
+      }
+
+      default: {
+        isKeyHandled = selectedNode
+          ? this.handleArrowKey(e.key)
+          : this.handleKeyWithoutSelection(e.key, focusedNode);
+      }
     }
 
-    private canHandleKeyboard(): boolean {
-        return this.keyboardSupport && this.isFocusOnTree();
+    if (isKeyHandled) {
+      e.preventDefault();
+    }
+  };
+
+  // No node is selected. These keys select the focused node, which is
+  // usually the first node, see TreeElement.updateTabStop.
+  private handleKeyWithoutSelection(key: string, focusedNode: Node): boolean {
+    switch (key) {
+      case " ":
+      case "ArrowDown":
+      case "ArrowRight": {
+        return this.selectNode(focusedNode);
+      }
+
+      default: {
+        return false;
+      }
     }
+  }
+
+  private moveLeft(): boolean {
+    const selectedNode = this.getSelectedNode();
 
-    private handleKeyDown = (e: KeyboardEvent): void => {
-        if (!this.canHandleKeyboard()) {
-            return;
-        }
-
-        let isKeyHandled = false;
-
-        const selectedNode = this.getSelectedNode();
-        if (selectedNode) {
-            switch (e.key) {
-                case "ArrowDown":
-                    isKeyHandled = this.moveDown(selectedNode);
-                    break;
-
-                case "ArrowLeft":
-                    isKeyHandled = this.moveLeft(selectedNode);
-                    break;
-
-                case "ArrowRight":
-                    isKeyHandled = this.moveRight(selectedNode);
-                    break;
-
-                case "ArrowUp":
-                    isKeyHandled = this.moveUp(selectedNode);
-                    break;
-            }
-        }
-
-        if (isKeyHandled) {
-            e.preventDefault();
-        }
-    };
-
-    private moveLeft(selectedNode: Node): boolean {
-        if (selectedNode.isFolder() && selectedNode.is_open) {
-            // Left on an open node closes the node
-            this.closeNode(selectedNode);
-            return true;
-        } else {
-            // Left on a closed or end node moves focus to the node's parent
-            return this.selectNode(selectedNode.getParent());
-        }
+    /* istanbul ignore if */
+    if (!selectedNode) {
+      return false;
     }
 
-    private moveRight(selectedNode: Node): boolean {
-        if (!selectedNode.isFolder()) {
-            return false;
-        } else {
-            // folder node
-            if (selectedNode.is_open) {
-                // Right moves to the first child of an open node
-                return this.selectNode(selectedNode.getNextVisibleNode());
-            } else {
-                // Right expands a closed node
-                void this.openNode(selectedNode);
-                return true;
-            }
-        }
+    if (selectedNode.isFolder() && selectedNode.is_open) {
+      // Left on an open node closes the node
+      void this.closeNode(selectedNode);
+      return true;
     }
+    // Left on a closed or end node moves focus to the node's parent
+    return this.selectNode(selectedNode.getParent());
+  }
 
-    /* Select the node.
-     * Don't do anything if the node is null.
-     * Result: a different node was selected.
-     */
-    private selectNode(node: Node | null): boolean {
-        if (!node) {
-            return false;
-        } else {
-            this.originalSelectNode(node);
-
-            return true;
-        }
+  private moveRight(): boolean {
+    const selectedNode = this.getSelectedNode();
+
+    if (selectedNode?.isFolder()) {
+      // folder node
+      if (selectedNode.is_open) {
+        // Right moves to the first child of an open node
+        return this.selectNode(selectedNode.getNextVisibleNode());
+      }
+      // Right expands a closed node
+      void this.openNode(selectedNode);
+      return true;
+    }
+    return false;
+  }
+
+  /* Select the node.
+   * Don't do anything if the node is null.
+   * Result: a different node was selected.
+   */
+  private selectNode(node?: Node | null): boolean {
+    if (node) {
+      this.originalSelectNode(node);
+
+      return true;
     }
+    return false;
+  }
 }

package/src/methodTypes.ts

@@ -4,7 +4,9 @@ import type NodeElement from "./nodeElement";
 
 export type AddToSelection = (node: Node) => void;
 
-export type CloseNode = (node: Node) => void;
+export type CloseNode = (node: Node) => Promise<void>;
+
+export type GetFocusedNode = () => Node | null;
 
 export type GetNodeById = (nodeId: NodeId) => Node | null;
 
@@ -12,22 +14,17 @@ export type GetNodeElementForNode = (node: Node) => NodeElement;
 
 export type GetScrollLeft = () => number;
 
-export type GetSelectedNode = () => false | Node;
+export type GetSelectedNode = () => Node | null;
 
 export type GetSelectedNodes = () => Node[];
 
 export type GetTree = () => Node | null;
 
-export type IsFocusOnTree = () => boolean;
-
 export type IsNodeSelected = (node: Node) => boolean;
 
 export type LoadData = (data: NodeData[], parentNode?: Node) => void;
 
-export type OpenNode = (
-    node: Node,
-    slide?: boolean,
-) => Promise<void>;
+export type OpenNode = (node: Node, slide?: boolean) => Promise<void>;
 
 export type OpenParents = (node: Node) => void;
 
@@ -39,6 +36,6 @@ export type SelectNode = (node: Node) => void;
 
 // Trigger an event. Return if the event is processed (true) or cancelled (false).
 export type TriggerEvent = <Name extends TreeEventName>(
-    eventName: Name,
-    values?: TreeEvents[Name],
+  eventName: Name,
+  values?: TreeEvents[Name],
 ) => boolean;