fix: missing line at moveNodeBefore

fixed #101

Author: SSShooter

.prettierrc.json

@@ -3,5 +3,6 @@
   "tabWidth": 2,
   "semi": false,
   "singleQuote": true,
-  "arrowParens": "avoid"
-}
+  "arrowParens": "avoid",
+  "printWidth": 150
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mind-elixir",
-  "version": "0.19.5",
+  "version": "0.19.6",
   "description": "Mind elixir is a free open source mind map core.",
   "main": "dist/MindElixir.js",
   "scripts": {

src/dev.ts

@@ -4,13 +4,24 @@ import { exportSvg, exportPng } from '../painter/index'
 import example from './exampleData/1'
 import example2 from './exampleData/2'
 
+interface Window {
+  currentOperation: any
+  m: any
+  M: any
+  E: any
+  exportSvg: any
+  exportPng: any
+}
+
+declare let window: Window
+
 const mind = new MindElixir({
   el: '#map',
   newTopicName: '子节点',
   direction: MindElixir.SIDE,
   // direction: MindElixir.RIGHT,
-  // data: MindElixir.new('new topic'),
-  data: example,
+  data: MindElixir.new('new topic'),
+  // data: example,
   locale: 'en',
   draggable: true,
   editable: true,

src/linkDiv.ts

@@ -1,12 +1,6 @@
 import { createPath, createMainPath, createLinkSvg } from './utils/svg'
 import { findEle, Expander } from './utils/dom'
-import {
-  SIDE,
-  GAP,
-  TURNPOINT_R,
-  PRIMARY_NODE_HORIZONTAL_GAP,
-  PRIMARY_NODE_VERTICAL_GAP,
-} from './const'
+import { SIDE, GAP, TURNPOINT_R, PRIMARY_NODE_HORIZONTAL_GAP, PRIMARY_NODE_VERTICAL_GAP } from './const'
 
 /**
  * Link nodes with svg,
@@ -134,8 +128,7 @@ export default function linkDiv(primaryNode) {
     // set position of expander
     const expander = el.children[0].children[1]
     if (expander) {
-      expander.style.top =
-        (expander.parentNode.offsetHeight - expander.offsetHeight) / 2 + 'px'
+      expander.style.top = (expander.parentNode.offsetHeight - expander.offsetHeight) / 2 + 'px'
       if (el.className === 'lhs') {
         expander.style.left = -10 + 'px'
       } else {
@@ -171,17 +164,13 @@ export default function linkDiv(primaryNode) {
     if (typeof link.from === 'string') {
       this.createLink(findEle(link.from), findEle(link.to), true, link)
     } else {
-      this.createLink(
-        findEle(link.from.nodeObj.id),
-        findEle(link.to.nodeObj.id),
-        true,
-        link
-      )
+      this.createLink(findEle(link.from.nodeObj.id), findEle(link.to.nodeObj.id), true, link)
     }
   }
   console.timeEnd('linkDiv')
 }
 
+// core function of generate svg3rd
 let path = ''
 function loopChildren(children: HTMLCollection, parent: HTMLElement, first?: boolean) {
   const parentOT = parent.offsetTop
@@ -207,10 +196,7 @@ function loopChildren(children: HTMLCollection, parent: HTMLElement, first?: boo
       xMiddle = parentOL
       x2 = parentOL - childT.offsetWidth
 
-      if (
-        childTOT + childTOH < parentOT + parentOH / 2 + 50 &&
-        childTOT + childTOH > parentOT + parentOH / 2 - 50
-      ) {
+      if (childTOT + childTOH < parentOT + parentOH / 2 + 50 && childTOT + childTOH > parentOT + parentOH / 2 - 50) {
         // 相差+-50内直接直线
         path += `M ${x1} ${y1} H ${xMiddle} V ${y2} H ${x2}`
       } else if (childTOT + childTOH >= parentOT + parentOH / 2) {
@@ -225,10 +211,7 @@ function loopChildren(children: HTMLCollection, parent: HTMLElement, first?: boo
       xMiddle = parentOL + parentOW
       x2 = parentOL + parentOW + childT.offsetWidth
 
-      if (
-        childTOT + childTOH < parentOT + parentOH / 2 + 50 &&
-        childTOT + childTOH > parentOT + parentOH / 2 - 50
-      ) {
+      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}`
@@ -239,8 +222,7 @@ function loopChildren(children: HTMLCollection, parent: HTMLElement, first?: boo
 
     const expander = childT.children[1] as Expander
     if (expander) {
-      expander.style.top =
-        (childT.offsetHeight - expander.offsetHeight) / 2 + 'px'
+      expander.style.top = (childT.offsetHeight - expander.offsetHeight) / 2 + 'px'
       if (direction === 'lhs') {
         expander.style.left = -10 + 'px'
       } else if (direction === 'rhs') {

src/nodeOperation.ts

@@ -423,11 +423,7 @@ export const removeNode = function(el) {
     // MAYBEBUG should traversal all children node
     const link = this.linkData[prop]
     if (link.from === t.firstChild || link.to === t.firstChild) {
-      this.removeLink(
-        this.mindElixirBox.querySelector(
-          `[data-linkid=${this.linkData[prop].id}]`
-        )
-      )
+      this.removeLink(this.mindElixirBox.querySelector(`[data-linkid=${this.linkData[prop].id}]`))
     }
   }
   // remove GRP
@@ -527,6 +523,7 @@ export const moveNodeBefore = function(from, to) {
   const toGrp = toTop.parentNode
   const toChilren = toTop.parentNode.parentNode
   toChilren.insertBefore(fromGrp, toGrp)
+  if (toGrp.className) fromGrp.className = toGrp.className
   this.linkDiv()
   this.bus.fire('operation', {
     name: 'moveNodeBefore',
@@ -557,6 +554,7 @@ export const moveNodeAfter = function(from, to) {
   const toGrp = toTop.parentNode
   const toChilren = toTop.parentNode.parentNode
   toChilren.insertBefore(fromGrp, toGrp.nextSibling)
+  if (toGrp.className) fromGrp.className = toGrp.className
   this.linkDiv()
   this.bus.fire('operation', {
     name: 'moveNodeAfter',

src/utils/svg.ts

@@ -15,12 +15,17 @@ export const createLinkSvg = function(klass: string) {
   return svg
 }
 
-export const createLine = function(x1: number, y1: number, x2: number, y2: number) {
+export const createLine = function(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number
+) {
   const line = $d.createElementNS(svgNS, 'line')
-  line.setAttribute('x1', x1)
-  line.setAttribute('y1', y1)
-  line.setAttribute('x2', x2)
-  line.setAttribute('y2', y2)
+  line.setAttribute('x1', x1 + '')
+  line.setAttribute('y1', y1 + '')
+  line.setAttribute('x2', x2 + '')
+  line.setAttribute('y2', y2 + '')
   line.setAttribute('stroke', '#bbb')
   line.setAttribute('fill', 'none')
   line.setAttribute('stroke-width', '2')
@@ -39,10 +44,10 @@ export const createPath = function(d: string) {
   return path
 }
 
-interface CustomSvg extends SVGElement{
-  linkObj?:object
+interface CustomSvg extends SVGElement {
+  linkObj?: object
 }
-export const createSvgGroup = function(d: string, arrowd: string):CustomSvg {
+export const createSvgGroup = function(d: string, arrowd: string): CustomSvg {
   const g = $d.createElementNS(svgNS, 'g')
   const path = $d.createElementNS(svgNS, 'path')
   const arrow = $d.createElementNS(svgNS, 'path')