diff --git a/painter/index.foreignObject.js b/painter/index.foreignObject.js
index a3e0d4de..bdea866f 100644
--- 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 = `${svg2ndEle.innerHTML}`
return (
- svg2nd +
+ lines +
`
@@ -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 += ``
- 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
index d6403f6e..0a89c1dc 100644
--- 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 = `${svg2ndEle.innerHTML}`
return (
- svg2nd +
+ lines +
`
@@ -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 += ``
- 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
index b9b27662..754acce4 100644
--- 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
index 6f44b22c..8f31506d 100644
--- 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
index b4c8abc2..d9f406c4 100644
--- 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
index 11e48333..55ddf52b 100644
--- 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
index 40e20f10..597892a0 100644
--- 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
index 87f462f1..fa2a7da6 100644
--- 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) {