feat: insertParent(WIP)

Author: SSShooter

src/i18n.ts

@@ -1,5 +1,6 @@
 const cn = {
   addChild: '插入子节点',
+  addParent: '插入父节点',
   addSibling: '插入同级节点',
   removeNode: '删除节点',
   focus: '专注',
@@ -21,6 +22,7 @@ export default {
   zh_CN: cn,
   zh_TW: {
     addChild: '插入子節點',
+    addParent: '插入父節點',
     addSibling: '插入同級節點',
     removeNode: '刪除節點',
     focus: '專注',
@@ -38,8 +40,9 @@ export default {
     iconsSeparate: '多個圖標半角逗號分隔',
   },
   en: {
-    addChild: 'Add a child',
-    addSibling: 'Add a sibling',
+    addChild: 'Add child',
+    addParent: 'Add parent',
+    addSibling: 'Add sibling',
     removeNode: 'Remove node',
     focus: 'Focus Mode',
     cancelFocus: 'Cancel Focus Mode',
@@ -57,6 +60,7 @@ export default {
   },
   ja: {
     addChild: '子ノードを追加する',
+    addParent: '親ノードを追加します',
     addSibling: '兄弟ノードを追加する',
     removeNode: 'ノードを削除',
     focus: '集中',
@@ -75,6 +79,7 @@ export default {
   },
   pt: {
     addChild: 'Adicionar item filho',
+    addParent: 'Adicionar item pai',
     addSibling: 'Adicionar item irmao',
     removeNode: 'Remover item',
     focus: 'Modo Foco',

src/index.ts

@@ -34,6 +34,7 @@ import {
 import {
   insertSibling,
   insertBefore,
+  insertParent,
   addChild,
   copyNode,
   moveNode,
@@ -294,6 +295,7 @@ MindElixir.prototype = {
   // node operation
   insertSibling: beforeHook(insertSibling),
   insertBefore: beforeHook(insertBefore),
+  insertParent: beforeHook(insertParent),
   addChild: beforeHook(addChild),
   copyNode: beforeHook(copyNode),
   moveNode: beforeHook(moveNode),

src/interact.ts

@@ -18,7 +18,7 @@ function getData(instance) {
  * @description Select a node and add solid border to it.
  * @param {TargetElement} el - Target element return by E('...'), default value: currentTarget.
  */
-export const selectNode = function(targetElement, isNewNode) {
+export const selectNode = function(targetElement, isNewNode, clickEvent) {
   if (!targetElement) return
   console.time('selectNode')
   if (typeof targetElement === 'string') {
@@ -28,9 +28,9 @@ export const selectNode = function(targetElement, isNewNode) {
   targetElement.className = 'selected'
   this.currentNode = targetElement
   if (isNewNode) {
-    this.bus.fire('selectNewNode', targetElement.nodeObj)
+    this.bus.fire('selectNewNode', targetElement.nodeObj, clickEvent)
   } else {
-    this.bus.fire('selectNode', targetElement.nodeObj)
+    this.bus.fire('selectNode', targetElement.nodeObj, clickEvent)
   }
   console.timeEnd('selectNode')
 }

src/mouse.ts

@@ -9,7 +9,7 @@ export default function(mind) {
       e.target.parentElement.nodeName === 'T' ||
       e.target.parentElement.nodeName === 'ROOT'
     ) {
-      mind.selectNode(e.target)
+      mind.selectNode(e.target, false, e)
     } else if (e.target.nodeName === 'path') {
       if (e.target.parentElement.nodeName === 'g') {
         mind.selectLink(e.target.parentElement)

src/nodeOperation.ts

@@ -5,6 +5,7 @@ import {
   removeNodeObj,
   insertNodeObj,
   insertBeforeNodeObj,
+  insertParentNodeObj,
   checkMoveValid,
   addParentLink,
   moveUpObj,
@@ -170,6 +171,46 @@ export const insertBefore = function(el, node) {
   })
 }
 
+export const insertParent = function(el, node) {
+  const nodeEle = el || this.currentNode
+  if (!nodeEle) return
+  const nodeObj = nodeEle.nodeObj
+  if (nodeObj.root === true) {
+    return
+  }
+  const newNodeObj = node || this.generateNewObj()
+  insertParentNodeObj(nodeObj, newNodeObj)
+  addParentLink(this.nodeData)
+  const grp0 = nodeEle.parentElement.parentElement
+  console.time('insertParent_DOM')
+  const { grp, top } = this.createGroup(newNodeObj)
+  // console.log(grp)
+  const children = grp0.parentNode
+  children.insertBefore(grp, grp0.nextSibling)
+
+  // const c = $d.createElement('children')
+  // c.appendChild(grp0)
+  // top.appendChild(createExpander(true))
+  // top.parentElement.insertBefore(c, top.nextSibling)
+  grp0.remove()
+  if (children.className === 'box') {
+    this.processPrimaryNode(grp, newNodeObj)
+    this.linkDiv()
+  } else {
+    this.linkDiv(grp.offsetParent)
+  }
+
+  if (!node) {
+    this.createInputDiv(top.children[0])
+  }
+  this.selectNode(top.children[0], true)
+  console.timeEnd('insertParent_DOM')
+  this.bus.fire('operation', {
+    name: 'insertParent',
+    obj: newNodeObj,
+  })
+}
+
 export const addChildFunction = function(nodeEle, node) {
   if (!nodeEle) return
   const nodeObj = nodeEle.nodeObj
@@ -344,7 +385,9 @@ export const removeNode = function(el) {
     // remove epd when children length === 0
     const parentT = t.parentNode.parentNode.previousSibling
     // root doesn't have epd
-    if (parentT.tagName !== 'ROOT') { parentT.children[1].remove() }
+    if (parentT.tagName !== 'ROOT') {
+      parentT.children[1].remove()
+    }
     this.selectParent()
   } else {
     // select sibling automatically

src/plugin/contextMenu.ts

@@ -17,6 +17,7 @@ export default function(mind, option) {
   const locale = i18n[mind.locale] ? mind.locale : 'en'
 
   const add_child = createLi('cm-add_child', i18n[locale].addChild, 'tab')
+  const add_parent = createLi('cm-add_parent', i18n[locale].addParent, '')
   const add_sibling = createLi('cm-add_sibling', i18n[locale].addSibling, 'enter')
   const remove_child = createLi(
     'cm-remove_child',
@@ -32,6 +33,7 @@ export default function(mind, option) {
   const menuUl = document.createElement('ul')
   menuUl.className = 'menu-list'
   menuUl.appendChild(add_child)
+  menuUl.appendChild(add_parent)
   menuUl.appendChild(add_sibling)
   menuUl.appendChild(remove_child)
   if (!option || option.focus) {
@@ -112,6 +114,10 @@ export default function(mind, option) {
     mind.addChild()
     menuContainer.hidden = true
   }
+  add_parent.onclick = e => {
+    mind.insertParent()
+    menuContainer.hidden = true
+  }
   add_sibling.onclick = e => {
     if (isRoot) return
     mind.insertSibling()

src/plugin/nodeMenu.ts

@@ -176,7 +176,8 @@ export default function(mind) {
   mind.bus.addListener('unselectNode', function() {
     menuContainer.hidden = true
   })
-  mind.bus.addListener('selectNode', function(nodeObj) {
+  mind.bus.addListener('selectNode', function(nodeObj, clickEvent) {
+    if (!clickEvent) return
     menuContainer.hidden = false
     clearSelect('.palette', 'nmenu-selected')
     clearSelect('.size', 'size-selected')

src/utils/dom.ts

@@ -128,7 +128,7 @@ export function createInputDiv(tpc: Topic) {
   div.addEventListener('keydown', e => {
     e.stopPropagation()
     const key = e.key
-    console.log(e, key)
+    // console.log(e, key)
     if (key === 'Enter' || key === 'Tab') {
       // keep wrap for shift enter
       if (e.shiftKey) return

src/utils/index.ts

@@ -237,6 +237,13 @@ export function insertBeforeNodeObj(obj: NodeObj, newObj: NodeObj) {
   childrenList.splice(index, 0, newObj)
 }
 
+export function insertParentNodeObj(obj: NodeObj, newObj: NodeObj) {
+  const childrenList = obj.parent.children
+  const index = childrenList.indexOf(obj)
+  childrenList[index] = newObj
+  newObj.children = [obj]
+}
+
 export function moveNodeObj(from: NodeObj, to: NodeObj) {
   removeNodeObj(from)
   if (to.children) to.children.push(from)

src/utils/pubsub.ts

@@ -9,11 +9,11 @@ Bus.prototype = {
     if (this.handlers[type] === undefined) this.handlers[type] = []
     this.handlers[type].push(handler)
   },
-  fire: function(type, payload) {
+  fire: function(type, ...payload) {
     if (this.handlers[type] instanceof Array) {
       var handlers = this.handlers[type]
       for (var i = 0; i < handlers.length; i++) {
-        handlers[i](payload)
+        handlers[i](...payload)
       }
     }
   },