refactor: refactor expandNode

Author: SSShooter

api/mind-elixir.api.json

@@ -1006,7 +1006,7 @@
             },
             {
               "kind": "Content",
-              "text": ") => void;\n    mainToSub: (this: "
+              "text": ") => void;\n    rmSubline: (this: "
             },
             {
               "kind": "Reference",

src/interact.ts

@@ -1,3 +1,4 @@
+import { rmSubline } from './nodeOperation'
 import type { Topic } from './types/dom'
 import type { MindElixirData, MindElixirInstance, NodeObj } from './types/index'
 import { findEle } from './utils/dom'
@@ -278,8 +279,26 @@ export const expandNode = function (this: MindElixirInstance, el: Topic, isExpan
   } else {
     node.expanded = true
   }
+  const parent = el.parentNode
+  const expander = parent.children[1]!
+  expander.expanded = node.expanded
+  expander.className = node.expanded ? 'minus' : ''
+
+  rmSubline(el)
+  if (node.expanded) {
+    const children = this.createChildren(
+      node.children!.map(child => {
+        const wrapper = this.createWrapper(child)
+        return wrapper.grp
+      })
+    )
+    parent.parentNode.appendChild(children)
+  } else {
+    const children = parent.parentNode.children[1]
+    children.remove()
+  }
   // TODO 在此函数构造 html 结构，而非调用 layout
-  this.layout()
+  // this.layout()
   // linkDiv 已实现只更新特定主节点
   this.linkDiv()
   this.bus.fire('expandNode', node)

src/linkDiv.ts

@@ -59,15 +59,14 @@ const linkDiv = function (this: MindElixirInstance, mainNode?: Wrapper) {
     if (mainNode && mainNode !== el) {
       continue
     }
-    if (el.childElementCount) {
-      const svg = createLinkSvg('subLines')
-      // svg tag name is lower case
-      const svgLine = el.lastChild as SVGSVGElement
-      if (svgLine.tagName === 'svg') svgLine.remove()
-      el.appendChild(svg)
-
-      traverseChildren(this, svg, branchColor, el, direction, true)
-    }
+
+    const svg = createLinkSvg('subLines')
+    // svg tag name is lower case
+    const svgLine = el.lastChild as SVGSVGElement
+    if (svgLine.tagName === 'svg') svgLine.remove()
+    el.appendChild(svg)
+
+    traverseChildren(this, svg, branchColor, el, direction, true)
   }
 
   this.renderArrow()
@@ -87,6 +86,7 @@ const traverseChildren = function (
 ) {
   const parent = wrapper.firstChild
   const children = wrapper.children[1].children
+  if (children.length === 0) return
 
   const pT = parent.offsetTop
   const pL = parent.offsetLeft
@@ -120,10 +120,7 @@ const traverseChildren = function (
       continue
     }
 
-    const nextChildren = child.children[1].children
-    if (nextChildren.length > 0) {
-      traverseChildren(mei, svgContainer, bc, child, direction)
-    }
+    traverseChildren(mei, svgContainer, bc, child, direction)
   }
 }
 

src/nodeOperation.ts

@@ -11,7 +11,7 @@ const typeMap: Record<string, InsertPosition> = {
   after: 'afterend',
 }
 
-export const mainToSub = function (tpc: Topic) {
+export const rmSubline = function (tpc: Topic) {
   const mainNode = tpc.parentElement.parentElement
   const lc = mainNode.lastElementChild
   if (lc?.tagName === 'svg') lc?.remove() // clear svg group of main node
@@ -73,7 +73,7 @@ export const insertSibling = function (this: MindElixirInstance, type: 'before'
 export const insertParent = function (this: MindElixirInstance, el?: Topic, node?: NodeObj) {
   const nodeEle = el || this.currentNode
   if (!nodeEle) return
-  mainToSub(nodeEle)
+  rmSubline(nodeEle)
   const nodeObj = nodeEle.nodeObj
   if (nodeObj.root === true) {
     return
@@ -82,7 +82,6 @@ export const insertParent = function (this: MindElixirInstance, el?: Topic, node
   insertParentNodeObj(nodeObj, newNodeObj)
   fillParent(this.nodeData)
 
-  // warning: the tricky part
   const grp0 = nodeEle.parentElement.parentElement
   console.time('insertParent_DOM')
   const { grp, top } = this.createWrapper(newNodeObj, true)
@@ -274,7 +273,7 @@ const moveNode = (from: Topic[], type: 'before' | 'after', to: Topic, mei: MindE
     const obj = f.nodeObj
     moveNodeObj(type, obj, toObj)
     fillParent(mei.nodeData)
-    mainToSub(f)
+    rmSubline(f)
     const fromGrp = f.parentElement.parentNode
     const toGrp = to.parentElement.parentNode
     toGrp.insertAdjacentElement(typeMap[type], fromGrp)

src/utils/domManipulation.ts

@@ -1,6 +1,6 @@
 import { fillParent } from '.'
 import { LEFT, RIGHT, SIDE } from '../const'
-import { mainToSub } from '../nodeOperation'
+import { rmSubline } from '../nodeOperation'
 import type { MindElixirInstance, NodeObj } from '../types'
 import type { Topic, Wrapper } from '../types/dom'
 import { findEle, createExpander } from './dom'
@@ -28,7 +28,7 @@ export const realAddChild = function (mei: MindElixirInstance, to: Topic, wrappe
   const tpc = wrapper.children[0].children[0]
   const top = to.parentElement
   if (top.tagName === 'ME-PARENT') {
-    mainToSub(tpc)
+    rmSubline(tpc)
     if (top.children[1]) {
       top.nextSibling.appendChild(wrapper)
     } else {