tree-element 0.3.1 → 0.4.0

package/src/selectNodeHandler.ts

@@ -128,9 +128,9 @@ export default class SelectNodeHandler {
       this.selectedNodes.delete(node.id);
 
       if (includeChildren) {
-        node.iterate(() => {
-          if (node.id != null) {
-            this.selectedNodes.delete(node.id);
+        node.iterate((child: Node) => {
+          if (child.id != null) {
+            this.selectedNodes.delete(child.id);
           }
           return true;
         });
@@ -149,37 +149,32 @@ export default class SelectNodeHandler {
    * mustToggle: support deselecting the selected node
    */
   public selectSingleNode(node: Node, optionsParam?: SelectNodeOptions) {
-    const defaultOptions = { mustSetFocus: true, mustToggle: true };
-    const selectOptions = { ...defaultOptions, ...optionsParam };
-
-    const canSelect = (): boolean => {
-      if (!this.getSelectable()) {
-        return false;
-      }
-
-      const onCanSelectNode = this.getOnCanSelectNode();
-      return onCanSelectNode ? onCanSelectNode(node) : true;
-    };
-
-    if (!canSelect()) {
+    if (!this.canSelect(node)) {
       return;
     }
 
-    const deselectCurrentNode = (deselectedNode: Node) => {
-      this.removeFromSelection(deselectedNode);
-      this.getNodeElementForNode(deselectedNode).deselect();
-    };
+    const defaultOptions = { mustSetFocus: true, mustToggle: true };
+    const selectOptions = { ...defaultOptions, ...optionsParam };
+
+    const otherSelectedNodes = this.getSelectedNodes().filter(
+      (selectedNode) => selectedNode !== node,
+    );
 
     if (this.isNodeSelected(node)) {
-      if (selectOptions.mustToggle) {
-        deselectCurrentNode(node);
+      if (otherSelectedNodes.length) {
+        // Part of a multiple selection: keep only this node selected
+        for (const otherNode of otherSelectedNodes) {
+          this.deselectNode(otherNode);
+        }
+      } else if (selectOptions.mustToggle) {
+        this.deselectNode(node);
         this.triggerEvent("tree.deselect", { node });
       }
     } else {
-      const deselectedNode = this.getSelectedNode();
+      const deselectedNode = otherSelectedNodes[0] ?? null;
 
-      if (deselectedNode) {
-        deselectCurrentNode(deselectedNode);
+      for (const otherNode of otherSelectedNodes) {
+        this.deselectNode(otherNode);
       }
 
       this.addToSelection(node);
@@ -195,4 +190,42 @@ export default class SelectNodeHandler {
     this.updateTabStop();
     this.saveState();
   }
+
+  /* Add a node to the selection, or remove it when it is selected, without
+   * changing the other selected nodes.
+   * Checks if the node is selectable and saves the state.
+   */
+  public toggleNodeInSelection(node: Node, mustSetFocus = true): void {
+    if (!this.canSelect(node)) {
+      return;
+    }
+
+    if (this.isNodeSelected(node)) {
+      this.deselectNode(node);
+      this.triggerEvent("tree.deselect", { node });
+    } else {
+      this.addToSelection(node);
+      this.openParents(node);
+      this.getNodeElementForNode(node).select(mustSetFocus);
+
+      this.triggerEvent("tree.select", { deselectedNode: null, node });
+    }
+
+    this.updateTabStop();
+    this.saveState();
+  }
+
+  private canSelect(node: Node): boolean {
+    if (!this.getSelectable()) {
+      return false;
+    }
+
+    const onCanSelectNode = this.getOnCanSelectNode();
+    return onCanSelectNode ? onCanSelectNode(node) : true;
+  }
+
+  private deselectNode(node: Node): void {
+    this.removeFromSelection(node);
+    this.getNodeElementForNode(node).deselect();
+  }
 }

package/src/setDefaultOptions.ts

@@ -10,11 +10,11 @@ import { Node } from "./node";
  * --tree-element-toggler-color.
  */
 const triangle = (points: string): string =>
-  `<svg width="0.7em" height="0.7em" viewBox="0 0 10 10" focusable="false"><polygon points="${points}" fill="currentColor"/></svg>`;
+  `<svg width="0.8em" height="0.8em" viewBox="0 0 10 10" focusable="false"><polygon points="${points}" fill="currentColor"/></svg>`;
 
-export const triangleDown = triangle("0.5,1.5 9.5,1.5 5,9");
-export const triangleLeft = triangle("9,0.5 9,9.5 1.5,5");
-export const triangleRight = triangle("1,0.5 1,9.5 8.5,5");
+export const triangleDown = triangle("0.5,0.5 9.5,0.5 5,9.5");
+export const triangleLeft = triangle("9.5,0.5 9.5,9.5 0.5,5");
+export const triangleRight = triangle("0.5,0.5 0.5,9.5 9.5,5");
 
 const defaults: TreeElementOptions = {
   animationSpeed: "fast",
@@ -29,6 +29,7 @@ const defaults: TreeElementOptions = {
   // dataUrl: undefined,
   dragAndDrop: false,
   keyboardSupport: true,
+  multiSelect: false,
   nodeClass: Node,
   // onCanMove: undefined, // Can this node be moved?
   // onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)

package/src/version.ts

@@ -1,4 +1,4 @@
 // Generated by config/generateVersion.mjs. Do not edit.
-const version = "0.3.1";
+const version = "0.4.0";
 
 export default version;

package/tree_element.css

@@ -86,6 +86,22 @@ ul.tree-element .tree-element-title {
     vertical-align: middle;
   }
 
+/* The li is the treeitem, so it gets the focus. Show the focus ring around
+     the title, not around the li with all its children. */
+
+ul.tree-element li.tree-element-common:focus {
+    outline: none;
+  }
+
+ul.tree-element li.tree-element-common:focus-visible
+    > .tree-element-element
+    .tree-element-title {
+    /* Same as the default focus ring of the browser. Browsers without
+       -webkit-focus-ring-color ignore the second line. */
+    outline: auto;
+    outline-color: -webkit-focus-ring-color;
+  }
+
 /* Line up with the titles of folders, after the toggler */
 
 ul.tree-element .tree-element-title-button-left {