refactor: rename functions and variables

SSShooter · Sep 29, 2022 · 8d93e30 · 8d93e30
1 parent d9d4cbb
commit 8d93e30
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 43 deletions.
diff --git a/painter/index.foreignObject.js b/painter/index.foreignObject.js
@@ -65,13 +65,13 @@ function RootToSvg() {
   let rootOffsetY = root.offsetTop - maxTop
   let rootOffsetX = root.offsetLeft - maxLeft
 
-  let svg2ndEle = document.querySelector('.svg2nd')
+  let svg2ndEle = document.querySelector('.lines')
 
-  let svg2nd = `<g transform="translate(${imgPadding - maxLeft}, ${
+  let lines = `<g transform="translate(${imgPadding - maxLeft}, ${
     imgPadding - maxTop
     })">${svg2ndEle.innerHTML}</g>`
   return (
-    svg2nd +
+    lines +
     `<g id="root" transform="translate(${rootOffsetX + imgPadding}, ${
     rootOffsetY + imgPadding
     })">
@@ -93,11 +93,11 @@ function PrimaryToSvg(primaryNode) {
   let primaryNodeOffsetX = primaryNode.offsetLeft - maxLeft
 
   let svg = ''
-  let svg3rd = primaryNode.querySelector('.svg3rd')
+  let subLines = primaryNode.querySelector('.subLines')
   svg += `<g transform="translate(${primaryNodeOffsetX + imgPadding}, ${
     primaryNodeOffsetY + imgPadding
     })">`
-  svg += svg3rd ? svg3rd.innerHTML : ''
+  svg += subLines ? subLines.innerHTML : ''
   for (let i = 0; i < topics.length; i++) {
     let tpc = topics[i]
     let t = tpc.parentNode

diff --git a/painter/index.js b/painter/index.js
@@ -80,13 +80,13 @@ function RootToSvg() {
   let rootOffsetY = root.offsetTop - maxTop
   let rootOffsetX = root.offsetLeft - maxLeft
 
-  let svg2ndEle = $d.querySelector('.svg2nd')
+  let svg2ndEle = $d.querySelector('.lines')
 
-  let svg2nd = `<g transform="translate(${IMG_PADDING - maxLeft}, ${
+  let lines = `<g transform="translate(${IMG_PADDING - maxLeft}, ${
     IMG_PADDING - maxTop
   })">${svg2ndEle.innerHTML}</g>`
   return (
-    svg2nd +
+    lines +
     `<g id="root" transform="translate(${rootOffsetX + IMG_PADDING}, ${
       rootOffsetY + IMG_PADDING
     })">
@@ -108,11 +108,11 @@ function PrimaryToSvg(primaryNode) {
   let primaryNodeOffsetX = primaryNode.offsetLeft - maxLeft
 
   let svg = ''
-  let svg3rd = primaryNode.querySelector('.svg3rd')
+  let subLines = primaryNode.querySelector('.subLines')
   svg += `<g transform="translate(${primaryNodeOffsetX + IMG_PADDING}, ${
     primaryNodeOffsetY + IMG_PADDING
   })">`
-  svg += svg3rd ? svg3rd.innerHTML : ''
+  svg += subLines ? subLines.innerHTML : ''
   for (let i = 0; i < topics.length; i++) {
     let tpc = topics[i]
     let t = tpc.parentNode

diff --git a/src/exampleData/2.js b/src/exampleData/2.js
@@ -72,7 +72,7 @@ export default {
                         ],
                         tags: ['createChildren return'],
                       },
-                      { topic: 'svg.svg3rd', id: '33908986b6336a4f' },
+                      { topic: 'svg.subLines', id: '33908986b6336a4f' },
                     ],
                     tags: ['have child'],
                   },
@@ -93,7 +93,7 @@ export default {
                   { topic: 'grp...', id: '33b61346707af71a' },
                 ],
               },
-              { topic: 'svg.svg2nd', id: '3390707d68c0779d' },
+              { topic: 'svg.lines', id: '3390707d68c0779d' },
               { topic: 'svg.linkcontroller', id: '339072cb6cf95295' },
               { topic: 'svg.topiclinks', id: '3390751acbdbdb9f' },
             ],

diff --git a/src/index.less b/src/index.less
@@ -178,8 +178,8 @@
     fill: currentColor;
     overflow: hidden;
   }
-  .svg2nd,
-  .svg3rd,
+  .lines,
+  .subLines,
   .topiclinks,
   .linkcontroller {
     position: absolute;
@@ -195,8 +195,8 @@
       pointer-events: all;
     }
   }
-  .svg2nd,
-  .svg3rd {
+  .lines,
+  .subLines {
     pointer-events: none;
     z-index: -1;
   }

diff --git a/src/index.lite.ts b/src/index.lite.ts
@@ -28,7 +28,7 @@ import {
   refresh,
 } from './interact'
 import {
-  processPrimaryNode,
+  judgeDirection,
   setNodeTopic,
 } from './nodeOperation'
 import {
@@ -113,7 +113,7 @@ export interface MindElixirInstance {
   map: HTMLElement,
   root: HTMLElement,
   box: HTMLElement,
-  svg2nd: SVGElement,
+  lines: SVGElement,
   linkController: SVGElement,
   P2: HTMLElement,
   P3: HTMLElement,
@@ -223,7 +223,7 @@ function MindElixir(this: MindElixirInstance, {
 
   // infrastructure
 
-  this.svg2nd = createLinkSvg('svg2nd') // main link container
+  this.lines = createLinkSvg('lines') // main link container
 
   this.linkController = createLinkSvg('linkcontroller') // bezier controller container
   this.P2 = $d.createElement('div') // bezier P2
@@ -238,7 +238,7 @@ function MindElixir(this: MindElixirInstance, {
 
   this.map.appendChild(this.root)
   this.map.appendChild(this.box)
-  this.map.appendChild(this.svg2nd)
+  this.map.appendChild(this.lines)
   this.map.appendChild(this.linkController)
   this.map.appendChild(this.linkSvgGroup)
   this.map.appendChild(this.P2)
@@ -253,7 +253,7 @@ MindElixir.prototype = {
   addParentLink,
   getObjById,
   // node operation
-  processPrimaryNode,
+  judgeDirection,
   setNodeTopic,
   createLink,
   layout,

diff --git a/src/index.ts b/src/index.ts
@@ -46,7 +46,7 @@ import {
   updateNodeTags,
   updateNodeIcons,
   updateNodeHyperLink,
-  processPrimaryNode,
+  judgeDirection,
   setNodeTopic,
   moveNodeBefore,
   moveNodeAfter,
@@ -154,7 +154,7 @@ export interface MindElixirInstance {
   map: HTMLElement,
   root: HTMLElement,
   box: HTMLElement,
-  svg2nd: SVGElement,
+  lines: SVGElement,
   linkController:SVGElement,
   P2: HTMLElement,
   P3: HTMLElement,
@@ -315,7 +315,7 @@ function MindElixir(this: MindElixirInstance, {
 
   // infrastructure
 
-  this.svg2nd = createLinkSvg('svg2nd') // main link container
+  this.lines = createLinkSvg('lines') // main link container
 
   this.linkController = createLinkSvg('linkcontroller') // bezier controller container
   this.P2 = $d.createElement('div') // bezier P2
@@ -330,7 +330,7 @@ function MindElixir(this: MindElixirInstance, {
 
   this.map.appendChild(this.root)
   this.map.appendChild(this.box)
-  this.map.appendChild(this.svg2nd)
+  this.map.appendChild(this.lines)
   this.map.appendChild(this.linkController)
   this.map.appendChild(this.linkSvgGroup)
   this.map.appendChild(this.P2)
@@ -373,7 +373,7 @@ MindElixir.prototype = {
   updateNodeTags,
   updateNodeIcons,
   updateNodeHyperLink,
-  processPrimaryNode,
+  judgeDirection,
   setNodeTopic,
 
   createLink,

diff --git a/src/linkDiv.ts b/src/linkDiv.ts
@@ -20,7 +20,7 @@ export default function linkDiv(primaryNode) {
   const root = this.root
   root.style.cssText = `top:${10000 - root.offsetHeight / 2}px;left:${10000 - root.offsetWidth / 2}px;`
   const primaryNodeList = this.box.children
-  this.svg2nd.innerHTML = ''
+  this.lines.innerHTML = ''
 
   // 1. calculate position of primary nodes
   let totalHeight = 0
@@ -136,7 +136,7 @@ export default function linkDiv(primaryNode) {
       }
     }
   }
-  this.svg2nd.appendChild(createMainPath(primaryPath))
+  this.lines.appendChild(createMainPath(primaryPath))
 
   // 3. generate link inside primary node
   for (let i = 0; i < primaryNodeList.length; i++) {
@@ -145,14 +145,13 @@ export default function linkDiv(primaryNode) {
       continue
     }
     if (el.childElementCount) {
-      const svg = createLinkSvg('svg3rd')
+      const svg = createLinkSvg('subLines')
       // svg tag name is lower case
       if (el.lastChild.tagName === 'svg') el.lastChild.remove()
       el.appendChild(svg)
       const parent = el.children[0]
       const children = el.children[1].children
-      path = ''
-      loopChildren(children, parent, true)
+      const path = traverseChildren(children, parent, true)
       svg.appendChild(createPath(path))
     }
   }
@@ -170,9 +169,9 @@ export default function linkDiv(primaryNode) {
   console.timeEnd('linkDiv')
 }
 
-// core function of generate svg3rd
-let path = ''
-function loopChildren(children: HTMLCollection, parent: HTMLElement, first?: boolean) {
+// core function of generate subLines
+function traverseChildren(children: HTMLCollection, parent: HTMLElement, first?: boolean):string {
+  let path = ''
   const parentOT = parent.offsetTop
   const parentOL = parent.offsetLeft
   const parentOW = parent.offsetWidth
@@ -197,7 +196,7 @@ function loopChildren(children: HTMLCollection, parent: HTMLElement, first?: boo
       x2 = parentOL - childT.offsetWidth + GAP
 
       if (childTOT + childTOH < parentOT + parentOH / 2 + 50 && childTOT + childTOH > parentOT + parentOH / 2 - 50) {
-        // straight line
+        // draw straight line if the distance is between +-50
         path += `M ${x1} ${y1} H ${xMiddle} V ${y2} H ${x2}`
       } else if (childTOT + childTOH >= parentOT + parentOH / 2) {
         // child bottom lower than parent
@@ -234,8 +233,9 @@ function loopChildren(children: HTMLCollection, parent: HTMLElement, first?: boo
       // expander not exist
       continue
     }
-    // traversal
+
     const nextChildren = child.children[1].children
-    if (nextChildren.length > 0) loopChildren(nextChildren, childT)
+    if (nextChildren.length > 0) { path += traverseChildren(nextChildren, childT) }
   }
+  return path
 }
diff --git a/src/nodeOperation.ts b/src/nodeOperation.ts
@@ -117,7 +117,7 @@ export const insertSibling = function(el, node) {
   const children = t.parentNode.parentNode
   children.insertBefore(grp, t.parentNode.nextSibling)
   if (children.className === 'box') {
-    this.processPrimaryNode(grp, newNodeObj)
+    this.judgeDirection(grp, newNodeObj)
     this.linkDiv()
   } else {
     this.linkDiv(grp.offsetParent)
@@ -163,7 +163,7 @@ export const insertBefore = function(el, node) {
   const children = t.parentNode.parentNode
   children.insertBefore(grp, t.parentNode)
   if (children.className === 'box') {
-    this.processPrimaryNode(grp, newNodeObj)
+    this.judgeDirection(grp, newNodeObj)
     this.linkDiv()
   } else {
     this.linkDiv(grp.offsetParent)
@@ -216,7 +216,7 @@ export const insertParent = function(el, node) {
   if (children0.className === 'box') {
     grp.className = grp0.className // l/rhs
     grp0.className = ''
-    grp0.querySelector('.svg3rd').remove()
+    grp0.querySelector('.subLines').remove()
     this.linkDiv()
   } else {
     this.linkDiv(grp.offsetParent)
@@ -261,7 +261,7 @@ export const addChildFunction = function(nodeEle, node) {
     }
     this.linkDiv(grp.offsetParent)
   } else if (top.tagName === 'ROOT') {
-    this.processPrimaryNode(grp, newNodeObj)
+    this.judgeDirection(grp, newNodeObj)
     top.nextSibling.appendChild(grp)
     this.linkDiv()
   }
@@ -486,7 +486,7 @@ export const moveNode = function(from, to) {
       toTop.parentElement.insertBefore(c, toTop.nextSibling)
     }
   } else if (toTop.tagName === 'ROOT') {
-    this.processPrimaryNode(fromTop.parentNode, fromObj)
+    this.judgeDirection(fromTop.parentNode, fromObj)
     toTop.nextSibling.appendChild(fromTop.parentNode)
   }
   this.linkDiv()
@@ -582,7 +582,7 @@ export const setNodeTopic = function(tpc, topic) {
 }
 
 // Judge L or R
-export function processPrimaryNode(primaryNode, obj) {
+export function judgeDirection(primaryNode, obj) {
   if (this.direction === LEFT) {
     primaryNode.className = 'lhs'
   } else if (this.direction === RIGHT) {