From 8eceda54c5732063737e48141300b2ed2f24f687 Mon Sep 17 00:00:00 2001
From: Geoffrey Deldique <gde@efficy.com>
Date: Thu, 21 Jul 2022 17:14:40 +0200
Subject: [PATCH 1/3] Set attribute "data-node-id" on each node

---
 src/components/TreeNode.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/TreeNode.vue b/src/components/TreeNode.vue
index 45766a4..682114e 100644
--- a/src/components/TreeNode.vue
+++ b/src/components/TreeNode.vue
@@ -12,13 +12,14 @@
     @keydown.up.stop="up"
     @keydown.down.stop="down"
   >
-    <div  
+    <div
       class="node-wrapper"
       :class="nodeClass"
       :style="style"
       :ref="setWrapperRef"
       :draggable="draggable"
       :tabindex="tabIndex"
+      :data-node-id="node.id"
       @blur="blur"
       @click.stop="focus"
       @dragstart.stop="dragstart"

From 98a12bfb80c27b48c45da873a29e3873990999e5 Mon Sep 17 00:00:00 2001
From: Geoffrey Deldique <gde@efficy.com>
Date: Sat, 23 Jul 2022 13:10:48 +0200
Subject: [PATCH 2/3] use "id" instead of "data-node-id"

---
 src/components/TreeNode.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TreeNode.vue b/src/components/TreeNode.vue
index 682114e..45c9013 100644
--- a/src/components/TreeNode.vue
+++ b/src/components/TreeNode.vue
@@ -19,7 +19,7 @@
       :ref="setWrapperRef"
       :draggable="draggable"
       :tabindex="tabIndex"
-      :data-node-id="node.id"
+      :id="node.id"
       @blur="blur"
       @click.stop="focus"
       @dragstart.stop="dragstart"

From a4a04136b1cdabb963624fd02b47f4f358f48eb7 Mon Sep 17 00:00:00 2001
From: Geoffrey Deldique <gde@efficy.com>
Date: Sat, 23 Jul 2022 13:13:19 +0200
Subject: [PATCH 3/3] create API methods "open" and "focus" to enable node
 interactions

---
 src/dev.vue          | 567 ++++++++++++++++++++++---------------------
 src/setup/useTree.ts |  34 ++-
 2 files changed, 327 insertions(+), 274 deletions(-)

diff --git a/src/dev.vue b/src/dev.vue
index e568c54..b714004 100644
--- a/src/dev.vue
+++ b/src/dev.vue
@@ -1,130 +1,144 @@
 <template>
-  <p>
-    <label for="showCheckBoxes">Show checkboxes</label>
-    <input
-      id="showCheckBoxes"
-      type="checkbox"
-      v-model="config.checkboxes"
-    >
+    <p>
+        <label for="showCheckBoxes">Show checkboxes</label>
+        <input
+            id="showCheckBoxes"
+            type="checkbox"
+            v-model="config.checkboxes"
+        >
 
-    <label for="padding">padding</label>
-    <input
-      id="padding"
-      type="number"
-      v-model.number="config.padding"
-    >
+        <label for="padding">padding</label>
+        <input
+            id="padding"
+            type="number"
+            v-model.number="config.padding"
+        >
 
-    <label for="editable">editable</label>
-    <input
-      id="editable"
-      type="checkbox"
-      v-model="config.editable"
-    >
+        <label for="editable">editable</label>
+        <input
+            id="editable"
+            type="checkbox"
+            v-model="config.editable"
+        >
 
-    <label for="disabled">disabled</label>
-    <input
-      id="disabled"
-      type="checkbox"
-      v-model="config.disabled"
-    >
+        <label for="disabled">disabled</label>
+        <input
+            id="disabled"
+            type="checkbox"
+            v-model="config.disabled"
+        >
 
-    <label for="keyboardNavigation">keyboardNavigation</label>
-    <input
-      id="keyboardNavigation"
-      type="checkbox"
-      v-model="config.keyboardNavigation"
-    >
+        <label for="keyboardNavigation">keyboardNavigation</label>
+        <input
+            id="keyboardNavigation"
+            type="checkbox"
+            v-model="config.keyboardNavigation"
+        >
 
-    <label for="DragandDrop">DragandDrop</label>
-    <input
-      id="DragandDrop"
-      type="checkbox"
-      v-model="config.dragAndDrop"
-    >
+        <label for="DragandDrop">DragandDrop</label>
+        <input
+            id="DragandDrop"
+            type="checkbox"
+            v-model="config.dragAndDrop"
+        >
 
-    <label for="checkMode">Checkmode auto</label>
-    <input
-      id="checkMode"
-      type="checkbox"
-      :value="modeBool"
-      @input="changeMode"
-    >
-  </p>
+        <label for="checkMode">Checkmode auto</label>
+        <input
+            id="checkMode"
+            type="checkbox"
+            :value="modeBool"
+            @input="changeMode"
+        >
+    </p>
 
-  <Tree
-    ref="Tree"
-    :nodes="nodes"
-    :config="config"
+    <p>
+        <span>Node API</span>
+        <input
+            type="text"
+            v-model="selectedNode"
+        >
+        <button @click.stop="openNode(selectedNode)">
+            Open
+        </button>
+        <button @click.stop="focusNode(selectedNode)">
+            Focus
+        </button>
+    </p>
 
-    @node-opened="log(`node-opened`)"
-    @node-closed="log('node-closed')"
-    @node-focus="log('node-focus')"
-    @node-toggle="log('node-toggle')"
-    @node-blur="log('node-blur')"
-    @node-edit="log('node-edit')"
+    <Tree
+        ref="Tree"
+        :nodes="nodes"
+        :config="config"
 
-    @node-checked="log('node-checked')"
-    @node-unchecked="log('node-unchecked')"
+        @node-opened="log(`node-opened`)"
+        @node-closed="log('node-closed')"
+        @node-focus="log('node-focus')"
+        @node-toggle="log('node-toggle')"
+        @node-blur="log('node-blur')"
+        @node-edit="log('node-edit')"
 
-    @node-dragstart="log('node-dragstart')"
-    @node-dragenter="log('node-dragenter')"
-    @node-dragleave="log('node-dragleave')"
-    @node-dragend="log('node-dragend')"
-    @node-over="log('node-over')"
-    @node-drop="log('node-drop')"
-  >
-    <!--template #loading-slot>
-      <div class="load">
-        Loading...
-      </div>
-    </template>
+        @node-checked="log('node-checked')"
+        @node-unchecked="log('node-unchecked')"
 
-    <template #before-input="props">
-      <span> {{ props.node.text }} </span>
-    </template>
+        @node-dragstart="log('node-dragstart')"
+        @node-dragenter="log('node-dragenter')"
+        @node-dragleave="log('node-dragleave')"
+        @node-dragend="log('node-dragend')"
+        @node-over="log('node-over')"
+        @node-drop="log('node-drop')"
+    >
+        <!--template #loading-slot>
+          <div class="load">
+            Loading...
+          </div>
+        </template>
 
-    <template #after-input="props">
-      <span> {{ props.node.text }} </span>
-    </template!-->
-  </Tree>
+        <template #before-input="props">
+          <span> {{ props.node.text }} </span>
+        </template>
 
-  <p>
-    <label for="nbRoots">Number of Roots</label>
-    <input
-      id="nbRoots"
-      type="number"
-      v-model.number="nbRoots"
-    >
+        <template #after-input="props">
+          <span> {{ props.node.text }} </span>
+        </template!-->
+    </Tree>
 
-    <label for="maxChild">Max child</label>
-    <input
-      id="maxChild"
-      type="number"
-      v-model.number="maxChild"
-    >
+    <p>
+        <label for="nbRoots">Number of Roots</label>
+        <input
+            id="nbRoots"
+            type="number"
+            v-model.number="nbRoots"
+        >
 
-    <label for="maxDepth">Max Depth</label>
-    <input
-      id="maxDepth"
-      type="number"
-      v-model.number="maxDepth"
-    >
+        <label for="maxChild">Max child</label>
+        <input
+            id="maxChild"
+            type="number"
+            v-model.number="maxChild"
+        >
 
-    <button @click.stop="randomTree">
-      Generate random tree
-    </button>
-  </p>
-  <span>External items</span>
-  <ul>
-    <li
-      v-for="item in extItems"
-      :key="item.title"
-      draggable="true"
-      @dragstart="startDragExt($event, item)"
-    >
-      {{ item.title }}
-    </li>
-  </ul>
+        <label for="maxDepth">Max Depth</label>
+        <input
+            id="maxDepth"
+            type="number"
+            v-model.number="maxDepth"
+        >
+
+        <button @click.stop="randomTree">
+            Generate random tree
+        </button>
+    </p>
+    <span>External items</span>
+    <ul>
+        <li
+            v-for="item in extItems"
+            :key="item.title"
+            draggable="true"
+            @dragstart="startDragExt($event, item)"
+        >
+            {{ item.title }}
+        </li>
+    </ul>
 </template>
 
 <script lang="ts">
@@ -134,183 +148,190 @@ import { checkMode } from './structure/IConfiguration';
 import { INodeState } from './structure/INodeState';
 
 export default {
-  components: {
-    Tree,
-  },
-  data: function() {
-    return {
-      config: {
-        roots: ["id1", "id2", "id3"],
-        // leaves: ["id10000"],
-        checkboxes: true,
-        dragAndDrop: false,
-        checkMode: checkMode.manual,
-        keyboardNavigation: false,
-      },
-      nodes: {},
-      modeBool: false,
-      code: "",
-      nbRoots: 0,
-      maxDepth: 0,
-      maxChild: 0,
-      nbNodes: 0,
-      extItems:  [
+    components: {
+        Tree,
+    },
+    data: function () {
+        return {
+            config: {
+                roots: ["id1", "id2", "id3"],
+                // leaves: ["id10000"],
+                checkboxes: true,
+                dragAndDrop: false,
+                checkMode: checkMode.manual,
+                keyboardNavigation: false,
+            },
+            nodes: {},
+            selectedNode: "id212",
+            modeBool: false,
+            code: "",
+            nbRoots: 0,
+            maxDepth: 0,
+            maxChild: 0,
+            nbNodes: 0,
+            extItems: [
           { id: 0, title: 'Item A' },
           { id: 1, title: 'Item B' },
           { id: 2, title: 'Item C' }
       ]
-    };
-  },
-  mounted() {
-    this.nodes = {
-      id1: {
-        text: "text1",
-        children: ["id11", "id12", "id13"],
-        state: {
-          checked: true,
-          indeterminate: true,
-          draggable: true,
-          dropable: false
-        },
-      },
-      id11: {
-        text: "text11",
-        children: ["id111", "id112", "id113"],
-      },
-      id111: {
-        text: "id111",
-      },
-      id112: {
-        text: "id112",
-      },
-      id113: {
-        text: "id113",
-      },
-      id12: {
-        text: "text12",
-        children: [],
-      },
-      id13: {
-        text: "text13",
-        children: ["id131", "id132"],
-      },
-      id131: {
-        text: "text131"
-      },
-      id132: {
-        text: "text132"
-      },
-      id2: {
-        text: "text2",
-        children: ["id21", "id22"],
-      },
-      id21: {
-        text: "text21",
-        children: ["id211", "id212"],
-      },
-      id211: {
-        text: "id211",
-      },
-      id212: {
-        text: "id212",
-      },
-      id22: {
-        text: "text12",
-        children: [],
-      },
-      id3: {
-        text: "text3"
+        };
+    },
+    mounted() {
+        this.nodes = {
+            id1: {
+                text: "text1",
+                children: ["id11", "id12", "id13"],
+                state: {
+                    checked: true,
+                    indeterminate: true,
+                    draggable: true,
+                    dropable: false
+                },
+            },
+            id11: {
+                text: "text11",
+                children: ["id111", "id112", "id113"],
+            },
+            id111: {
+                text: "id111",
+            },
+            id112: {
+                text: "id112",
+            },
+            id113: {
+                text: "id113",
+            },
+            id12: {
+                text: "text12",
+                children: [],
+            },
+            id13: {
+                text: "text13",
+                children: ["id131", "id132"],
+            },
+            id131: {
+                text: "text131"
+            },
+            id132: {
+                text: "text132"
+            },
+            id2: {
+                text: "text2",
+                children: ["id21", "id22"],
+            },
+            id21: {
+                text: "text21",
+                children: ["id211", "id212"],
+            },
+            id211: {
+                text: "id211",
+            },
+            id212: {
+                text: "id212",
+            },
+            id22: {
+                text: "text12",
+                children: [],
+            },
+            id3: {
+            text: "text3"
       }
-    };
-    this.code = JSON.stringify(this.nodes, undefined, 4);
-  },
-  methods: {
-    log(s: string): void {
-      console.log(s);
+        };
+        this.code = JSON.stringify(this.nodes, undefined, 4);
     },
-    startDragExt (evt, item) {
+    methods: {
+        log(s: string): void {
+            console.log(s);
+        },
+        startDragExt(evt, item) {
         evt.dataTransfer!.setData('application/json', JSON.stringify(item));
-        // evt.dataTransfer!.setData('text/plain', "some content");
-    },
-    serverLoading(node: INode): void {
-      if (node.children == null || node.children.length === 0) {
-        node.state.isLoading = true;
-        setTimeout(() => {
-          for (let i = 0; i < Math.round(Math.random() * 4); i++) {
-            const id = `${Date.now()}`;
-            const n: INode = {
-              text: `loaded from server`,
-              children: [],
-              state: {}
-            };
+            // evt.dataTransfer!.setData('text/plain', "some content");
+        },
+        serverLoading(node: INode): void {
+            if (node.children == null || node.children.length === 0) {
+                node.state.isLoading = true;
+                setTimeout(() => {
+                    for (let i = 0; i < Math.round(Math.random() * 4); i++) {
+                        const id = `${Date.now()}`;
+                        const n: INode = {
+                            text: `loaded from server`,
+                            children: [],
+                            state: {}
+                        };
 
-            this.nodes[id] = n;
-            node.children = [];
-            node.children.push(id);
-          }
-          node.state.isLoading = false;
-        }, 3000);
-      }
-    },
-    changeMode(): void {
-      this.modeBool = !this.modeBool;
-      this.config.checkMode = this.modeBool ? checkMode.auto : checkMode.manual;
-    },
-    randomTree(): void {
-      this.config.roots = [];
-      this.nodes = {};
-      this.nbNodes = 0;
+                        this.nodes[id] = n;
+                        node.children = [];
+                        node.children.push(id);
+                    }
+                    node.state.isLoading = false;
+                }, 3000);
+            }
+        },
+        changeMode(): void {
+            this.modeBool = !this.modeBool;
+            this.config.checkMode = this.modeBool ? checkMode.auto : checkMode.manual;
+        },
+        randomTree(): void {
+            this.config.roots = [];
+            this.nodes = {};
+            this.nbNodes = 0;
 
-      for (let i = 0; i < this.nbRoots; i++) {
-        let maxDepth = this.maxDepth;
-        const n = this.createNode(i + 1, maxDepth);
-        this.config.roots.push(n);
-      }
+            for (let i = 0; i < this.nbRoots; i++) {
+                let maxDepth = this.maxDepth;
+                const n = this.createNode(i + 1, maxDepth);
+                this.config.roots.push(n);
+            }
 
-      console.log(`node created: ${this.nbNodes}`);
-      console.log(this.nodes);
-    },
-    addNodes(parent: INode, lvl: number, depth: number): void {
-      for (let i = 0; i < this.maxChild; i++) {
-        if (!this.randBool(0.8)) {
-          break;
-        }
+            console.log(`node created: ${this.nbNodes}`);
+            console.log(this.nodes);
+        },
+        addNodes(parent: INode, lvl: number, depth: number): void {
+            for (let i = 0; i < this.maxChild; i++) {
+                if (!this.randBool(0.8)) {
+                    break;
+                }
 
-        const n = this.createNode(Number(`${lvl}${i + 1}`), depth);
-        parent.children.push(n);
-      }
-    },
-    createNode(lvl: number, depth: number): string {
-      const id = `id${ lvl }`;
-      const n: INode = {
-        text: `text${id}`,
-        children: [],
-        state: this.randomState()
-      };
+                const n = this.createNode(Number(`${lvl}${i + 1}`), depth);
+                parent.children.push(n);
+            }
+        },
+        createNode(lvl: number, depth: number): string {
+            const id = `id${lvl}`;
+            const n: INode = {
+                text: `text${id}`,
+                children: [],
+                state: this.randomState()
+            };
 
-      this.nodes[id] = n;
-      this.nbNodes++;
+            this.nodes[id] = n;
+            this.nbNodes++;
 
-      if (depth > 0 && this.randBool(0.8)) {
-        this.addNodes(n, lvl, depth - 1);
-      }
+            if (depth > 0 && this.randBool(0.8)) {
+                this.addNodes(n, lvl, depth - 1);
+            }
 
-      return id;
-    },
-    randomState(): INodeState {
-      return {
-        opened: this.randBool(),
-        disabled: this.randBool(),
-        editable: this.randBool(),
-        draggable: this.randBool(),
-        dropable: this.randBool(),
-        checked: this.randBool(),
-        indeterminate: this.randBool(0.3)
-      };
+            return id;
+        },
+        randomState(): INodeState {
+            return {
+                opened: this.randBool(),
+                disabled: this.randBool(),
+                editable: this.randBool(),
+                draggable: this.randBool(),
+                dropable: this.randBool(),
+                checked: this.randBool(),
+                indeterminate: this.randBool(0.3)
+            };
+        },
+        randBool(mod: number = 0.5): boolean {
+            return Math.random() < mod;
+        },
+        openNode (id: string) {
+            this.$refs.Tree.API.open(id);
+        },
+        focusNode (id: string) {
+            this.$refs.Tree.API.focus(id);
+        },
     },
-    randBool(mod: number = 0.5): boolean {
-      return Math.random() < mod;
-    }
-  }
 };
 </script> 
diff --git a/src/setup/useTree.ts b/src/setup/useTree.ts
index 108a722..0ea8bd3 100644
--- a/src/setup/useTree.ts
+++ b/src/setup/useTree.ts
@@ -8,6 +8,37 @@ export default function useTree(props: any, emit: (event: string, ...args: any[]
 
     const state = states.get(id);
 
+    const open = (id: string) => {
+        const nodes = state.nodes.value;
+        const currentNode = nodes[id];
+        if (!currentNode) return;
+
+        const nodeArr = Object.entries(nodes);
+
+        for (const [key, node] of nodeArr) {
+            if (!node.children?.includes(id)) continue;
+
+            const parent = nodeArr.find((el) => el[1]?.children?.includes(key));
+            if (parent) open(parent[0]); // open grandparent
+
+            if (!nodes[key].state) nodes[key].state = {}
+            nodes[key].state.opened = true; // open parent
+        }
+
+        if (!currentNode.state) currentNode.state = {}
+        currentNode.state.opened = true // open node
+    }
+
+    const focus = (id: string) => {
+        const f = state.focusFunc.get(id);
+        if (f) f();
+    }
+
+    const API = {
+        open,
+        focus
+    }
+
     provide("emitter", emit);
 
     provide("state", state);
@@ -25,6 +56,7 @@ export default function useTree(props: any, emit: (event: string, ...args: any[]
 
     return {
         element,
-        style
+        style,
+        API
     };
 }
\ No newline at end of file