feat: 现在可以只删除单个节点

src/components/Mindmap/data/ImData.ts

@@ -5,7 +5,6 @@ import { BoundingBox, Layout } from './flextree'
 
 type GetSize = (text: string) => { width: number, height: number }
 type Processer = (d: Mdata, id: string) => void
-type Temp = { collapse: boolean, children: Temp[], left: boolean, parent?: Temp | null }
 
 const swapWidthAndHeight = (d: Mdata) => [d.width, d.height] = [d.height, d.width]
 
@@ -40,7 +39,7 @@ const renewLeft = (d: Mdata) => {
   }
 }
 
-const separateLeftAndRight = <T extends Temp >(d: T): { left: T, right: T } => {
+const separateLeftAndRight = (d: Mdata): { left: Mdata, right: Mdata } => {
   const ld = Object.assign({}, d)
   const rd = Object.assign({}, d)
   if (d.collapse) {
@@ -148,11 +147,11 @@ class ImData {
   }
 
   /**
-   * 默认更新x, y, dx, dy, left
+   * 默认更新x, y, dx, dy, left, depth
    * @param plugins - 需要更新其他属性时的函数
    */
   private renew (...plugins: Processer[]): void {
-    traverse(this.data, [swapWidthAndHeight, renewLeft])
+    traverse(this.data, [swapWidthAndHeight, renewDepth, renewLeft])
     this.data = this.l(this.data)
     const temp: Processer[] = [swapWidthAndHeight, this.renewXY.bind(this), renewDelta]
     traverse(this.data, temp.concat(plugins))
@@ -247,7 +246,7 @@ class ImData {
         np.children.push(del)
       }
       np.rawData.children ? np.rawData.children.push(del.rawData) : np.rawData.children = [del.rawData]
-      this.renew(renewId, renewColor, renewDepth)
+      this.renew(renewId, renewColor)
     }
     return del
   }
@@ -355,6 +354,21 @@ class ImData {
     }
   }
 
+  deleteOne (id: string): void {
+    const del = this.find(id)
+    if (del && del.parent) {
+      const { parent, children, _children, collapse, rawData } = del
+      const index = parseInt(id.split('-').pop() as string, 10)
+      parent.children.splice(index, 1, ...(collapse ? _children : children))
+      parent.rawData.children?.splice(index, 1, ...(rawData.children || []))
+      children.forEach(c => {
+        c.parent = parent
+        if (c.depth === 1) { c.rawData.left = c.left }
+      })
+      this.renew(renewId)
+    }
+  }
+
   addSibling (id: string, name: string, before = false): IsMdata {
     const d = this.find(id)
     if (d && d.parent) {
@@ -424,7 +438,7 @@ class ImData {
       }
       d.parent = p
       oldP.children.splice(index, 1, p)
-      this.renew(renewId, renewDepth)
+      this.renew(renewId)
       return p
     }
     return null

src/components/Mindmap/data/index.ts

@@ -39,6 +39,10 @@ export const del = (id: string): void => {
   mmdata.delete(id)
   afterOperation()
 }
+export const delOne = (id: string): void => {
+  mmdata.deleteOne(id)
+  afterOperation()
+}
 export const expand = (id: string): void => {
   mmdata.expand(id)
   afterOperation()

src/components/Mindmap/listener/listener.ts

@@ -3,7 +3,7 @@ import { ctm, editFlag, selection, textRectPadding, zoomTransform } from '../var
 import * as d3 from '../d3'
 import { Mdata } from '../interface'
 import { fitView, getRelativePos, getSelectedGData, isData, moveNode, moveView, scaleView, selectGNode } from '../assistant'
-import { add, addParent, addSibling, changeLeft, collapse, del, expand, mmdata, moveChild, moveSibling, rename } from '../data'
+import { add, addParent, addSibling, changeLeft, collapse, del, delOne, expand, mmdata, moveChild, moveSibling, rename } from '../data'
 import { svgEle, gEle, foreignDivEle, wrapperEle, foreignEle } from '../variable/element'
 import emitter from '@/mitt'
 import { getDataId, getSiblingGClass } from '../attribute'
@@ -92,6 +92,7 @@ export const onContextmenu = (e: MouseEvent): void => {
     ctm.addItem.value.disabled = collapseFlag
     ctm.deleteItem.value.disabled = isRoot
     ctm.cutItem.value.disabled = isRoot
+    ctm.deleteOneItem.value.disabled = isRoot
     ctm.addSiblingItem.value.disabled = isRoot
     ctm.addSiblingBeforeItem.value.disabled = isRoot
     ctm.addParentItem.value.disabled = isRoot
@@ -111,6 +112,7 @@ export const onClickMenu = (name: MenuEvent): void => {
     case 'zoomout': scaleView(true); break
     case 'add': addAndEdit(new MouseEvent('click'), getSelectedGData()); break
     case 'delete': del(getSelectedGData().id); break
+    case 'delete-one': delOne(getSelectedGData().id); break
     case 'collapse': collapse(getSelectedGData().id); break
     case 'expand': expand(getSelectedGData().id); break
     case 'add-sibling': {

src/components/Mindmap/variable/contextmenu.ts

@@ -3,7 +3,7 @@ import { scaleExtent, zoomTransform } from '.'
 
 export type MenuEvent = 'zoomin' | 'zoomout' | 'zoomfit' | 'add' | 'delete' |
   'selectall' | 'collapse' | 'expand' | 'add-sibling' | 'add-sibling-before' |
-  'add-parent' | 'copy' | 'paste' | 'cut'
+  'add-parent' | 'copy' | 'paste' | 'cut' | 'delete-one'
 export interface MenuItem {
   title: string
   name: string
@@ -21,11 +21,12 @@ export const addSiblingBeforeItem: Ref<MenuItem> = ref({ title: '在此之前新
 export const cutItem: Ref<MenuItem> = ref({ title: '剪切', name: 'cut', disabled: false })
 export const copyItem: Ref<MenuItem> = ref({ title: '拷贝', name: 'copy', disabled: false })
 export const pasteItem: Ref<MenuItem> = ref({ title: '粘贴', name: 'paste', disabled: false })
+export const deleteOneItem: Ref<MenuItem> = ref({ title: '删除单个节点', name: 'delete-one', disabled: false })
 
 
 const nodeMenu = computed<MenuItem[][]>(() => [
   [ addItem.value, addParentItem.value, addSiblingItem.value, addSiblingBeforeItem.value ],
-  [ cutItem.value, copyItem.value, pasteItem.value, deleteItem.value ],
+  [ cutItem.value, copyItem.value, pasteItem.value, deleteItem.value, deleteOneItem.value ],
   [ { title: '全选', name: 'selectall', disabled: true } ],
   [ collapseItem.value, expandItem.value ]
 ])