WIP

animesh-workplace · Sep 25, 2019 · f14d7f1 · f14d7f1
1 parent fe70982
commit f14d7f1
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 7 deletions.
diff --git a/example/tree/App.vue b/example/tree/App.vue
@@ -227,10 +227,13 @@
         <noBehavior/>
       </template> -->
 
-      <template #contextMenu="{data}">
-        <div>
+      <template #contextMenu="{data,node}">
+        <div class="btn-group-vertical">
            <button type="button" class="btn btn-primary" @click="addFor(data)" data-toggle="tooltip" title="Add children">
-            <i class="fa fa-plus" aria-hidden="true"></i>
+              <i class="fa fa-plus" aria-hidden="true"></i>
+            </button>
+            <button type="button" class="btn btn-danger" @click="remove(data, node)" data-toggle="tooltip" title="Remove node">
+              <i class="fa fa-trash" aria-hidden="true"></i>
             </button>
         </div>
       </template>
@@ -247,6 +250,14 @@ import {getGremlin} from './gremlinConfiguration'
 import noBehavior from '../../src/behaviors/noBehavior'
 let currentId = 500
 
+const removeElement = (arr, element) => {
+  const index = arr.indexOf(element)
+  if (index === -1) {
+    return
+  }
+  arr.splice(index, 1)
+}
+
 Object.assign(data, {
   type: 'tree',
   layoutType: 'horizontal',
@@ -323,6 +334,10 @@ export default {
       }
       data.children.push(newData)
     },
+    remove (data, node) {
+      const parent = node.parent.data
+      removeElement(parent.children, data)
+    },
     resetZoom () {
       if (!this.$refs['tree']) {
         return

diff --git a/src/Tree.vue b/src/Tree.vue
@@ -178,13 +178,13 @@ export default {
   },
 
   render (h) {
-    const {$behaviorProps: behaviorProps, $scopedSlots: {contextMenu}, contextMenu: {node, style}} = this
+    const {$behaviorProps: behaviorProps, $scopedSlots: {contextMenu}, resetContextMenu: close, contextMenu: {node, style}} = this
     const slotNodes = defaultBehaviors.map(component => h(component, this._b({}, component.name, behaviorProps, false)))
     const menu = h('div', {
       class: 'context-menu-tree',
       style
     }, [
-      (!contextMenu || (node === null)) ? null : contextMenu({node, data: node.data})
+      (!contextMenu || (node === null)) ? null : contextMenu({node, data: node.data, close})
     ])
 
     return h('div', {class: 'viewport treeclass', directives: [{name: 'resize', value: this.resize}]}, [
@@ -319,22 +319,37 @@ export default {
       const originAngle = () => correctedSource.layoutInfo ? correctedSource.layoutInfo.rotate : 0
       const {currentPosition} = this
       const getOldPosition = (id) => currentPosition ? currentPosition.get(id) : {x: correctedSource.x0, y: correctedSource.y0}
+      const currentNodesById = new Map()
+      const getExitingParentIfAny = (node) => {
+        const survivingParent = node.ancestors().find(a => currentNodesById.has(a.id))
+        if (!survivingParent) {
+          return {x: correctedSource.x, y: correctedSource.y}
+        }
+        return currentNodesById.get(survivingParent.id)
+      }
       const origin = getOldPosition(correctedSource.id)
       const originBuilder = d => {
         if (source || !d.parent) {
           return origin
         }
         return getOldPosition(d.parent.id)
       }
-      const forExit = d => ({x: correctedSource.x, y: correctedSource.y})
+      const forExit = d => {
+        if (source || !d.parent) {
+          return {x: correctedSource.x, y: correctedSource.y}
+        }
+        return getExitingParentIfAny(d.parent)
+      }
 
       const links = this.internaldata.g.selectAll('.linktree')
          .data(this.internaldata.tree(root).descendants().slice(1), d => d.id)
 
       const newLinks = links.enter().append('path').attr('class', 'linktree').lower()
       const nodes = this.internaldata.g.selectAll('.nodetree').data(root.descendants(), d => d.id)
       const newNodes = nodes.enter().append('g').attr('class', d => `nodetree node-rank-${d.depth}`)
-      const allNodes = newNodes.merge(nodes)
+      const allNodes = newNodes.merge(nodes).each(n => {
+        currentNodesById.set(n.id, n)
+      })
 
       const { strokeWidth, layout, duration, drawLink } = this
       transitionDuration = (transitionDuration === undefined) ? duration : transitionDuration