tree-element 0.2.0 → 0.3.1

package/src/keyHandler.ts

@@ -1,45 +1,54 @@
 import type {
   CloseNode,
+  GetFocusedNode,
   GetSelectedNode,
-  IsFocusOnTree,
+  GetTree,
   OpenNode,
   SelectNode,
+  TriggerEvent,
 } from "./methodTypes";
 import type { Node } from "./node";
 
 interface KeyHandlerParams {
   closeNode: CloseNode;
+  getFocusedNode: GetFocusedNode;
   getSelectedNode: GetSelectedNode;
-  isFocusOnTree: IsFocusOnTree;
+  getTree: GetTree;
   keyboardSupport: boolean;
   openNode: OpenNode;
   selectNode: SelectNode;
+  triggerEvent: TriggerEvent;
 }
 
 export default class KeyHandler {
   private closeNode: CloseNode;
+  private getFocusedNode: GetFocusedNode;
   private getSelectedNode: GetSelectedNode;
-
-  private isFocusOnTree: IsFocusOnTree;
+  private getTree: GetTree;
 
   private keyboardSupport: boolean;
   private openNode: OpenNode;
   private originalSelectNode: SelectNode;
+  private triggerEvent: TriggerEvent;
 
   constructor({
     closeNode,
+    getFocusedNode,
     getSelectedNode,
-    isFocusOnTree,
+    getTree,
     keyboardSupport,
     openNode,
     selectNode,
+    triggerEvent,
   }: KeyHandlerParams) {
     this.closeNode = closeNode;
+    this.getFocusedNode = getFocusedNode;
     this.getSelectedNode = getSelectedNode;
-    this.isFocusOnTree = isFocusOnTree;
+    this.getTree = getTree;
     this.keyboardSupport = keyboardSupport;
     this.openNode = openNode;
     this.originalSelectNode = selectNode;
+    this.triggerEvent = triggerEvent;
 
     if (keyboardSupport) {
       document.addEventListener("keydown", this.handleKeyDown);
@@ -60,35 +69,68 @@ export default class KeyHandler {
     return this.selectNode(this.getSelectedNode()?.getPreviousVisibleNode());
   }
 
-  private canHandleKeyboard(): boolean {
-    return this.keyboardSupport && this.isFocusOnTree();
+  // 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;
+      }
+    }
   }
 
   private handleKeyDown = (e: KeyboardEvent): void => {
-    if (!this.canHandleKeyboard()) {
+    const focusedNode = this.getFocusedNode();
+
+    if (!focusedNode) {
       return;
     }
 
-    let isKeyHandled = false;
+    let isKeyHandled: boolean;
 
     const selectedNode = this.getSelectedNode();
-    if (selectedNode) {
-      switch (e.key) {
-        case "ArrowDown":
-          isKeyHandled = this.moveDown();
-          break;
-
-        case "ArrowLeft":
-          isKeyHandled = this.moveLeft();
-          break;
-
-        case "ArrowRight":
-          isKeyHandled = this.moveRight();
-          break;
-
-        case "ArrowUp":
-          isKeyHandled = this.moveUp();
-          break;
+
+    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);
       }
     }
 
@@ -97,6 +139,22 @@ export default class KeyHandler {
     }
   };
 
+  // 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();
 
@@ -107,30 +165,27 @@ export default class KeyHandler {
 
     if (selectedNode.isFolder() && selectedNode.is_open) {
       // Left on an open node closes the node
-      this.closeNode(selectedNode);
+      void 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());
     }
+    // Left on a closed or end node moves focus to the node's parent
+    return this.selectNode(selectedNode.getParent());
   }
 
   private moveRight(): boolean {
     const selectedNode = this.getSelectedNode();
 
-    if (!selectedNode?.isFolder()) {
-      return false;
-    } else {
+    if (selectedNode?.isFolder()) {
       // 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;
       }
+      // Right expands a closed node
+      void this.openNode(selectedNode);
+      return true;
     }
+    return false;
   }
 
   /* Select the node.
@@ -138,12 +193,11 @@ export default class KeyHandler {
    * Result: a different node was selected.
    */
   private selectNode(node?: Node | null): boolean {
-    if (!node) {
-      return false;
-    } else {
+    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;
 
@@ -18,8 +20,6 @@ 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;

package/src/mouseHandler.ts

@@ -23,7 +23,7 @@ interface MouseHandlerParams {
   element: HTMLElement;
   getMouseDelay: () => number;
   getNode: GetNode;
-  onClickButton: (node: Node) => void;
+  onClickButton: (node: Node) => Promise<void>;
   onClickTitle: (node: Node) => void;
   onMouseCapture: MouseCapture;
   onMouseDrag: (positionInfo: PositionInfo) => void;
@@ -46,7 +46,7 @@ class MouseHandler {
   private mouseDelayTimer: null | number;
 
   private mouseDownInfo: null | PositionInfo;
-  private onClickButton: (node: Node) => void;
+  private onClickButton: (node: Node) => Promise<void>;
   private onClickTitle: (node: Node) => void;
 
   private onMouseCapture: MouseCapture;
@@ -158,12 +158,13 @@ class MouseHandler {
     }
 
     switch (clickTarget.type) {
-      case "button":
-        this.onClickButton(clickTarget.node);
+      case "button": {
+        void this.onClickButton(clickTarget.node);
 
         e.preventDefault();
         e.stopPropagation();
         break;
+      }
 
       case "label": {
         if (
@@ -273,10 +274,12 @@ class MouseHandler {
     this.isMouseDelayMet = false;
     this.mouseDownInfo = null;
 
-    if (this.isMouseStarted) {
-      this.isMouseStarted = false;
-      this.onMouseStop(positionInfo);
+    if (!this.isMouseStarted) {
+      return;
     }
+
+    this.isMouseStarted = false;
+    this.onMouseStop(positionInfo);
   }
 
   private handleStartMouse(): void {