Feat：1.思维导图实例新增getSvgObjects方法；2.支持向右结构图2

simple-mind-map/index.js

@@ -14,7 +14,7 @@ import {
   cssContent,
   nodeDataNoStylePropList
 } from './src/constants/constant'
-import { SVG } from '@svgdotjs/svg.js'
+import { SVG, G, Rect } from '@svgdotjs/svg.js'
 import {
   simpleDeepClone,
   getObjectChangedProps,
@@ -711,6 +711,15 @@ class MindMap {
     }
   }
 
+  // 获取SVG.js库的一些对象
+  getSvgObjects() {
+    return {
+      SVG,
+      G,
+      Rect
+    }
+  }
+
   // 添加插件
   addPlugin(plugin, opt) {
     let index = MindMap.hasPlugin(plugin)

simple-mind-map/src/constants/constant.js

@@ -17,6 +17,7 @@ export const CONSTANTS = {
     FISHBONE: 'fishbone',
     FISHBONE2: 'fishbone2',
     RIGHT_FISHBONE: 'rightFishbone',
+    RIGHT_FISHBONE2: 'rightFishbone2',
     VERTICAL_TIMELINE: 'verticalTimeline'
   },
   DIR: {
@@ -137,6 +138,10 @@ export const layoutList = [
   {
     name: '向右鱼骨图',
     value: CONSTANTS.LAYOUT.RIGHT_FISHBONE
+  },
+  {
+    name: '向右鱼骨图2',
+    value: CONSTANTS.LAYOUT.RIGHT_FISHBONE2
   }
 ]
 export const layoutValueList = [
@@ -150,7 +155,8 @@ export const layoutValueList = [
   CONSTANTS.LAYOUT.VERTICAL_TIMELINE,
   CONSTANTS.LAYOUT.FISHBONE,
   CONSTANTS.LAYOUT.FISHBONE2,
-  CONSTANTS.LAYOUT.RIGHT_FISHBONE
+  CONSTANTS.LAYOUT.RIGHT_FISHBONE,
+  CONSTANTS.LAYOUT.RIGHT_FISHBONE2
 ]
 
 // 节点数据中非样式的字段

simple-mind-map/src/layouts/Fishbone.js

@@ -17,6 +17,11 @@ class Fishbone extends Base {
     this.maxx = 0
     this.headRatio = 1
     this.tailRatio = 0.6
+    this.paddingXRatio = 0.3
+    this.fishHeadPathStr =
+      'M4,181 C4,181, 0,177, 4,173 Q 96.09523809523809,0, 288.2857142857143,0 L 288.2857142857143,354 Q 48.047619047619044,354, 8,218.18367346938777 C8,218.18367346938777, 6,214.18367346938777, 8,214.18367346938777 L 41.183673469387756,214.18367346938777 Z'
+    this.fishTailPathStr =
+      'M 606.9342905223708 0 Q 713.1342905223709 -177 819.3342905223708 -177 L 766.2342905223709 0 L 819.3342905223708 177 Q 713.1342905223709 177 606.9342905223708 0 z'
     this.bindEvent()
     this.extendShape()
     this.beforeChange = this.beforeChange.bind(this)
@@ -50,9 +55,7 @@ class Fishbone extends Base {
     this.mindMap.addShape({
       name: 'fishHead',
       createShape: node => {
-        const rect = SVG(
+        const rect = SVG(`<path d="${this.fishHeadPathStr}"></path>`)
-          `<path d="M4,181 C4,181, 0,177, 4,173 Q 96.09523809523809,0, 288.2857142857143,0 L 288.2857142857143,354 Q 48.047619047619044,354, 8,218.18367346938777 C8,218.18367346938777, 6,214.18367346938777, 8,214.18367346938777 L 41.183673469387756,214.18367346938777 Z"></path>`
-        )
         const { width, height } = node.shapeInstance.getNodeSize()
         rect.size(width, height)
         return rect
@@ -60,7 +63,7 @@ class Fishbone extends Base {
       getPadding: ({ width, height, paddingX, paddingY }) => {
         width += paddingX * 2
         height += paddingY * 2
-        let shapePaddingX = 0.25 * width
+        let shapePaddingX = this.paddingXRatio * width
         let shapePaddingY = 0
         width += shapePaddingX * 2
         const newHeight = width / this.headRatio
@@ -99,9 +102,7 @@ class Fishbone extends Base {
     if (!this.isFishbone2()) return
     const exist = this.mindMap.lineDraw.findOne('.smm-layout-fishbone-tail')
     if (!exist) {
-      this.fishTail = SVG(
+      this.fishTail = SVG(`<path d="${this.fishTailPathStr}"></path>`)
-        '<path d="M 606.9342905223708 0 Q 713.1342905223709 -177 819.3342905223708 -177 L 766.2342905223709 0 L 819.3342905223708 177 Q 713.1342905223709 177 606.9342905223708 0 z"></path>'
-      )
       this.fishTail.addClass('smm-layout-fishbone-tail')
     } else {
       this.fishTail = exist

simple-mind-map/src/plugins/Drag.js

@@ -409,7 +409,8 @@ class Drag extends Base {
       VERTICAL_TIMELINE,
       FISHBONE,
       FISHBONE2,
-      RIGHT_FISHBONE
+      RIGHT_FISHBONE,
+      RIGHT_FISHBONE2
     } = CONSTANTS.LAYOUT
     this.overlapNode = null
     this.prevNode = null
@@ -450,6 +451,7 @@ class Drag extends Base {
         case FISHBONE:
         case FISHBONE2:
         case RIGHT_FISHBONE:
+        case RIGHT_FISHBONE2:
           this.handleFishbone(node)
           break
         default:
@@ -475,7 +477,8 @@ class Drag extends Base {
       VERTICAL_TIMELINE,
       FISHBONE,
       FISHBONE2,
-      RIGHT_FISHBONE
+      RIGHT_FISHBONE,
+      RIGHT_FISHBONE2
     } = CONSTANTS.LAYOUT
     const { LEFT, TOP, RIGHT, BOTTOM } = CONSTANTS.LAYOUT_GROW_DIR
     const layerIndex = this.overlapNode.layerIndex
@@ -588,6 +591,7 @@ class Drag extends Base {
         case FISHBONE:
         case FISHBONE2:
         case RIGHT_FISHBONE:
+        case RIGHT_FISHBONE2:
           if (layerIndex <= 1) {
             notRenderPlaceholder = true
             this.mindMap.execCommand('SET_NODE_ACTIVE', this.overlapNode, true)
@@ -678,6 +682,7 @@ class Drag extends Base {
         case FISHBONE:
         case FISHBONE2:
         case RIGHT_FISHBONE:
+        case RIGHT_FISHBONE2:
           if (layerIndex <= 1) {
             notRenderPlaceholder = true
             this.mindMap.execCommand('SET_NODE_ACTIVE', this.overlapNode, true)
@@ -715,7 +720,8 @@ class Drag extends Base {
       VERTICAL_TIMELINE,
       FISHBONE,
       FISHBONE2,
-      RIGHT_FISHBONE
+      RIGHT_FISHBONE,
+      RIGHT_FISHBONE2
     } = CONSTANTS.LAYOUT
     switch (this.mindMap.opt.layout) {
       case LOGICAL_STRUCTURE:
@@ -728,6 +734,7 @@ class Drag extends Base {
       case FISHBONE:
       case FISHBONE2:
       case RIGHT_FISHBONE:
+      case RIGHT_FISHBONE2:
         return node.dir
       default:
         return ''
@@ -739,7 +746,13 @@ class Drag extends Base {
   handleVerticalCheck(node, checkList, isReverse = false) {
     const { layout } = this.mindMap.opt
     const { LAYOUT, LAYOUT_GROW_DIR } = CONSTANTS
-    const { VERTICAL_TIMELINE, FISHBONE, FISHBONE2, RIGHT_FISHBONE } = LAYOUT
+    const {
+      VERTICAL_TIMELINE,
+      FISHBONE,
+      FISHBONE2,
+      RIGHT_FISHBONE,
+      RIGHT_FISHBONE2
+    } = LAYOUT
     const { LEFT } = LAYOUT_GROW_DIR
     const mouseMoveX = this.mouseMoveX
     const mouseMoveY = this.mouseMoveY
@@ -789,6 +802,7 @@ class Drag extends Base {
             }
             break
           case RIGHT_FISHBONE:
+          case RIGHT_FISHBONE2:
             x =
               nodeRect.originLeft + nodeRect.originWidth - this.placeholderWidth
             break
@@ -808,6 +822,7 @@ class Drag extends Base {
             case FISHBONE:
             case FISHBONE2:
             case RIGHT_FISHBONE:
+            case RIGHT_FISHBONE2:
               if (layerIndex === 2) {
                 notRenderLine = true
                 y =
@@ -839,6 +854,7 @@ class Drag extends Base {
             case FISHBONE:
             case FISHBONE2:
             case RIGHT_FISHBONE:
+            case RIGHT_FISHBONE2:
               if (layerIndex === 2) {
                 notRenderLine = true
                 y =
@@ -875,7 +891,14 @@ class Drag extends Base {
   handleHorizontalCheck(node, checkList) {
     const { layout } = this.mindMap.opt
     const { LAYOUT } = CONSTANTS
-    const { FISHBONE, FISHBONE2, RIGHT_FISHBONE, TIMELINE, TIMELINE2 } = LAYOUT
+    const {
+      FISHBONE,
+      FISHBONE2,
+      RIGHT_FISHBONE,
+      RIGHT_FISHBONE2,
+      TIMELINE,
+      TIMELINE2
+    } = LAYOUT
     let mouseMoveX = this.mouseMoveX
     let mouseMoveY = this.mouseMoveY
     let nodeRect = this.getNodeRect(node)
@@ -917,6 +940,7 @@ class Drag extends Base {
           case FISHBONE:
           case FISHBONE2:
           case RIGHT_FISHBONE:
+          case RIGHT_FISHBONE2:
             if (layerIndex === 1) {
               notRenderLine = true
               y =
@@ -928,7 +952,7 @@ class Drag extends Base {
           default:
         }
         if (checkIsPrevNode) {
-          if (layout === RIGHT_FISHBONE) {
+          if ([RIGHT_FISHBONE, RIGHT_FISHBONE2].includes(layout)) {
             this.nextNode = node
           } else {
             this.prevNode = node
@@ -943,7 +967,7 @@ class Drag extends Base {
             notRenderLine
           })
         } else if (checkIsNextNode) {
-          if (layout === RIGHT_FISHBONE) {
+          if ([RIGHT_FISHBONE, RIGHT_FISHBONE2].includes(layout)) {
             this.prevNode = node
           } else {
             this.nextNode = node