Skip to content

Commit

Permalink
refactor: abstract line-generate function
Browse files Browse the repository at this point in the history 
#122
  • Loading branch information
@SSShooter
SSShooter committed Sep 30, 2022
1 parent 8c7ee6d commit d2556c9
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 47 deletions.
4 changes: 2 additions & 2 deletions src/dev.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@ const options = {
},
},
primaryLinkStyle: 1,
primaryNodeVerticalGap: 15, // 25
primaryNodeHorizontalGap: 15, // 65
primaryNodeVerticalGap: 25, // 25
primaryNodeHorizontalGap: 65, // 65
}

const mind = new (MindElixir as any)(options)
Expand Down
80 changes: 35 additions & 45 deletions src/linkDiv.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ export default function linkDiv(primaryNode) {
const alignLeft = 10000 + root.offsetWidth / 2 + primaryNodeHorizontalGap
for (let i = 0; i < primaryNodeList.length; i++) {
let x1 = 10000
const y1 = 10000
let x2, y2
const el = primaryNodeList[i]
const elOffsetH = el.offsetHeight
Expand All @@ -81,20 +82,6 @@ export default function linkDiv(primaryNode) {
x2 = alignRight - 15 // padding
y2 = base + currentOffsetL + elOffsetH / 2

// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#path_commands
if (this.primaryLinkStyle === 2) {
if (this.direction === SIDE) {
x1 = 10000 - root.offsetWidth / 6
}
if (y2 < 10000) {
primaryPath += `M ${x1} 10000 V ${y2 + 20} C ${x1} ${y2} ${x1} ${y2} ${x1 - 20} ${y2} H ${x2}`
} else {
primaryPath += `M ${x1} 10000 V ${y2 - 20} C ${x1} ${y2} ${x1} ${y2} ${x1 - 20} ${y2} H ${x2}`
}
} else {
primaryPath += `M 10000 10000 C 10000 10000 ${10000 + 2 * primaryNodeHorizontalGap * 0.03} ${y2} ${x2} ${y2}`
}

if (shortSide === 'l') {
currentOffsetL += elOffsetH + shortSideGap
} else {
Expand All @@ -106,24 +93,22 @@ export default function linkDiv(primaryNode) {
x2 = alignLeft + 15 // padding
y2 = base + currentOffsetR + elOffsetH / 2

if (this.primaryLinkStyle === 2) {
if (this.direction === SIDE) {
x1 = 10000 + root.offsetWidth / 6
}
if (y2 < 10000) {
primaryPath += `M ${x1} 10000 V ${y2 + 20} C ${x1} ${y2} ${x1} ${y2} ${x1 + 20} ${y2} H ${x2}`
} else {
primaryPath += `M ${x1} 10000 V ${y2 - 20} C ${x1} ${y2} ${x1} ${y2} ${x1 + 20} ${y2} H ${x2}`
}
} else {
primaryPath += `M 10000 10000 C 10000 10000 ${10000 + 2 * primaryNodeHorizontalGap * 0.03} ${y2} ${x2} ${y2}`
}
if (shortSide === 'r') {
currentOffsetR += elOffsetH + shortSideGap
} else {
currentOffsetR += elOffsetH + primaryNodeVerticalGap
}
}

if (this.primaryLinkStyle === 2) {
if (this.direction === SIDE) {
if (el.className === 'lhs') { x1 = 10000 - root.offsetWidth / 6 } else { x1 = 10000 + root.offsetWidth / 6 }
}
primaryPath += generatePrimaryLine2({ x1, y1, x2, y2 })
} else {
primaryPath += generatePrimaryLine1({ x1, y1, x2, y2 })
}

// set position of expander
const expander = el.children[0].children[1]
if (expander) {
Expand Down Expand Up @@ -193,31 +178,14 @@ function traverseChildren(children: HTMLCollection, parent: HTMLElement, first?:
x1 = parentOL + GAP
xMiddle = parentOL
x2 = parentOL - childT.offsetWidth + GAP

if (childTOT + childTOH < parentOT + parentOH / 2 + 50 && childTOT + childTOH > parentOT + parentOH / 2 - 50) {
// 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
path += `M ${x1} ${y1} H ${xMiddle} V ${y2 - TURNPOINT_R} A ${TURNPOINT_R} ${TURNPOINT_R} 0 0 1 ${xMiddle - TURNPOINT_R} ${y2} H ${x2}`
} else {
// child bottom higher than parent
path += `M ${x1} ${y1} H ${xMiddle} V ${y2 + TURNPOINT_R} A ${TURNPOINT_R} ${TURNPOINT_R} 0 0 0 ${xMiddle - TURNPOINT_R} ${y2} H ${x2}`
}
} else if (direction === 'rhs') {
x1 = parentOL + parentOW - GAP
xMiddle = parentOL + parentOW
x2 = parentOL + parentOW + childT.offsetWidth - GAP

if (childTOT + childTOH < parentOT + parentOH / 2 + 50 && childTOT + childTOH > parentOT + parentOH / 2 - 50) {
path += `M ${x1} ${y1} H ${xMiddle} V ${y2} H ${x2}`
} else if (childTOT + childTOH >= parentOT + parentOH / 2) {
path += `M ${x1} ${y1} H ${xMiddle} V ${y2 - TURNPOINT_R} A ${TURNPOINT_R} ${TURNPOINT_R} 0 0 0 ${xMiddle + TURNPOINT_R} ${y2} H ${x2}`
} else {
path += `M ${x1} ${y1} H ${xMiddle} V ${y2 + TURNPOINT_R} A ${TURNPOINT_R} ${TURNPOINT_R} 0 0 1 ${xMiddle + TURNPOINT_R} ${y2} H ${x2}`
}
}

path += generateSubLine({ x1, y1, x2, y2, xMiddle })

const expander = childT.children[1] as Expander
if (expander) {
expander.style.top = (childT.offsetHeight - expander.offsetHeight) / 2 + 'px'
Expand All @@ -238,3 +206,25 @@ function traverseChildren(children: HTMLCollection, parent: HTMLElement, first?:
}
return path
}

// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#path_commands
function generatePrimaryLine2({ x1, y1, x2, y2 }) {
return `M ${x1} 10000 V ${y2 > y1 ? (y2 - 20) : (y2 + 20)} C ${x1} ${y2} ${x1} ${y2} ${x2 > x1 ? (x1 + 20) : (x1 - 20)} ${y2} H ${x2}`
}

function generatePrimaryLine1({ x1, y1, x2, y2 }) {
return `M ${x1} ${y1} Q ${x1} ${y2} ${x2} ${y2}`
}

function generateSubLine({ x1, y1, x2, y2, xMiddle }) {
if (y2 < y1 + 50 && y2 > y1 - 50) {
// draw straight line if the distance is between +-50
return `M ${x1} ${y1} H ${xMiddle} V ${y2} H ${x2}`
} else if (y2 >= y1) {
// child bottom lower than parent
return `M ${x1} ${y1} H ${xMiddle} V ${y2 - TURNPOINT_R} A ${TURNPOINT_R} ${TURNPOINT_R} 0 0 ${x1 > x2 ? 1 : 0} ${x1 > x2 ? (xMiddle - TURNPOINT_R) : (xMiddle + TURNPOINT_R)} ${y2} H ${x2}`
} else {
// child bottom higher than parent
return `M ${x1} ${y1} H ${xMiddle} V ${y2 + TURNPOINT_R} A ${TURNPOINT_R} ${TURNPOINT_R} 0 0 ${x1 > x2 ? 0 : 1} ${x1 > x2 ? (xMiddle - TURNPOINT_R) : (xMiddle + TURNPOINT_R)} ${y2} H ${x2}`
}
}

0 comments on commit d2556c9

Please sign in to comment.