diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index 39003ccc..7f513e14 100644 --- a/simple-mind-map/index.js +++ b/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) diff --git a/simple-mind-map/src/constants/constant.js b/simple-mind-map/src/constants/constant.js index 8332dba3..e426e2e5 100644 --- a/simple-mind-map/src/constants/constant.js +++ b/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 ] // 节点数据中非样式的字段 diff --git a/simple-mind-map/src/layouts/Fishbone.js b/simple-mind-map/src/layouts/Fishbone.js index 8240e684..cdb6f0c7 100644 --- a/simple-mind-map/src/layouts/Fishbone.js +++ b/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(``) 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(``) this.fishTail.addClass('smm-layout-fishbone-tail') } else { this.fishTail = exist diff --git a/simple-mind-map/src/plugins/Drag.js b/simple-mind-map/src/plugins/Drag.js index 371c7d49..b31ea8cf 100644 --- a/simple-mind-map/src/plugins/Drag.js +++ b/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