diff --git a/simple-mind-map/src/constants/constant.js b/simple-mind-map/src/constants/constant.js index e426e2e5..a2c8c074 100644 --- a/simple-mind-map/src/constants/constant.js +++ b/simple-mind-map/src/constants/constant.js @@ -18,7 +18,9 @@ export const CONSTANTS = { FISHBONE2: 'fishbone2', RIGHT_FISHBONE: 'rightFishbone', RIGHT_FISHBONE2: 'rightFishbone2', - VERTICAL_TIMELINE: 'verticalTimeline' + VERTICAL_TIMELINE: 'verticalTimeline', + VERTICAL_TIMELINE2: 'verticalTimeline2', + VERTICAL_TIMELINE3: 'verticalTimeline3' }, DIR: { UP: 'up', @@ -127,6 +129,14 @@ export const layoutList = [ name: '竖向时间轴', value: CONSTANTS.LAYOUT.VERTICAL_TIMELINE }, + { + name: '竖向时间轴2', + value: CONSTANTS.LAYOUT.VERTICAL_TIMELINE2 + }, + { + name: '竖向时间轴3', + value: CONSTANTS.LAYOUT.VERTICAL_TIMELINE3 + }, { name: '鱼骨图', value: CONSTANTS.LAYOUT.FISHBONE @@ -153,6 +163,8 @@ export const layoutValueList = [ CONSTANTS.LAYOUT.TIMELINE, CONSTANTS.LAYOUT.TIMELINE2, CONSTANTS.LAYOUT.VERTICAL_TIMELINE, + CONSTANTS.LAYOUT.VERTICAL_TIMELINE2, + CONSTANTS.LAYOUT.VERTICAL_TIMELINE3, CONSTANTS.LAYOUT.FISHBONE, CONSTANTS.LAYOUT.FISHBONE2, CONSTANTS.LAYOUT.RIGHT_FISHBONE, @@ -174,7 +186,7 @@ export const nodeDataNoStylePropList = [ 'isActive', 'generalization', 'richText', - 'resetRichText',// 重新创建富文本内容,去掉原有样式 + 'resetRichText', // 重新创建富文本内容,去掉原有样式 'uid', 'activeStyle', 'associativeLineTargets', @@ -192,7 +204,7 @@ export const nodeDataNoStylePropList = [ 'customTextWidth', 'checkbox', 'dir', - 'needUpdate',// 重新创建节点内容 + 'needUpdate', // 重新创建节点内容 'imgMap' ] diff --git a/simple-mind-map/src/core/render/Render.js b/simple-mind-map/src/core/render/Render.js index d87628f3..85388e10 100644 --- a/simple-mind-map/src/core/render/Render.js +++ b/simple-mind-map/src/core/render/Render.js @@ -60,6 +60,10 @@ const layouts = { [CONSTANTS.LAYOUT.TIMELINE2]: Timeline, // 竖向时间轴 [CONSTANTS.LAYOUT.VERTICAL_TIMELINE]: VerticalTimeline, + // 竖向时间轴2 + [CONSTANTS.LAYOUT.VERTICAL_TIMELINE2]: VerticalTimeline, + // 竖向时间轴3 + [CONSTANTS.LAYOUT.VERTICAL_TIMELINE3]: VerticalTimeline, // 鱼骨图 [CONSTANTS.LAYOUT.FISHBONE]: Fishbone, // 鱼骨图2 diff --git a/simple-mind-map/src/layouts/VerticalTimeline.js b/simple-mind-map/src/layouts/VerticalTimeline.js index c11e9dbb..722e68a4 100644 --- a/simple-mind-map/src/layouts/VerticalTimeline.js +++ b/simple-mind-map/src/layouts/VerticalTimeline.js @@ -35,7 +35,14 @@ class VerticalTimeline extends Base { this.renderer.renderTree, null, (cur, parent, isRoot, layerIndex, index, ancestors) => { - let newNode = this.createNode(cur, parent, isRoot, layerIndex, index, ancestors) + let newNode = this.createNode( + cur, + parent, + isRoot, + layerIndex, + index, + ancestors + ) // 根节点定位在画布中心位置 if (isRoot) { this.setNodeCenter(newNode) @@ -46,10 +53,16 @@ class VerticalTimeline extends Base { if (parent._node.dir) { newNode.dir = parent._node.dir } else { - newNode.dir = - index % 2 === 0 - ? CONSTANTS.LAYOUT_GROW_DIR.RIGHT - : CONSTANTS.LAYOUT_GROW_DIR.LEFT + if (this.layout === CONSTANTS.LAYOUT.VERTICAL_TIMELINE2) { + newNode.dir = CONSTANTS.LAYOUT_GROW_DIR.LEFT + } else if (this.layout === CONSTANTS.LAYOUT.VERTICAL_TIMELINE3) { + newNode.dir = CONSTANTS.LAYOUT_GROW_DIR.RIGHT + } else { + newNode.dir = + index % 2 === 0 + ? CONSTANTS.LAYOUT_GROW_DIR.RIGHT + : CONSTANTS.LAYOUT_GROW_DIR.LEFT + } } // 定位二级节点的left if (parent._node.isRoot) { diff --git a/simple-mind-map/src/plugins/Drag.js b/simple-mind-map/src/plugins/Drag.js index b31ea8cf..643ca1ef 100644 --- a/simple-mind-map/src/plugins/Drag.js +++ b/simple-mind-map/src/plugins/Drag.js @@ -407,6 +407,8 @@ class Drag extends Base { TIMELINE, TIMELINE2, VERTICAL_TIMELINE, + VERTICAL_TIMELINE2, + VERTICAL_TIMELINE3, FISHBONE, FISHBONE2, RIGHT_FISHBONE, @@ -446,6 +448,8 @@ class Drag extends Base { this.handleTimeLine2(node) break case VERTICAL_TIMELINE: + case VERTICAL_TIMELINE2: + case VERTICAL_TIMELINE3: this.handleLogicalStructure(node) break case FISHBONE: @@ -475,6 +479,8 @@ class Drag extends Base { TIMELINE, TIMELINE2, VERTICAL_TIMELINE, + VERTICAL_TIMELINE2, + VERTICAL_TIMELINE3, FISHBONE, FISHBONE2, RIGHT_FISHBONE, @@ -572,6 +578,8 @@ class Drag extends Base { } break case VERTICAL_TIMELINE: + case VERTICAL_TIMELINE2: + case VERTICAL_TIMELINE3: if (layerIndex === 0) { x = lastNodeRect.originLeft + @@ -667,6 +675,8 @@ class Drag extends Base { } break case VERTICAL_TIMELINE: + case VERTICAL_TIMELINE2: + case VERTICAL_TIMELINE3: if (layerIndex === 0) { rotate = true } @@ -718,6 +728,8 @@ class Drag extends Base { MIND_MAP, TIMELINE2, VERTICAL_TIMELINE, + VERTICAL_TIMELINE2, + VERTICAL_TIMELINE3, FISHBONE, FISHBONE2, RIGHT_FISHBONE, @@ -731,6 +743,8 @@ class Drag extends Base { case MIND_MAP: case TIMELINE2: case VERTICAL_TIMELINE: + case VERTICAL_TIMELINE2: + case VERTICAL_TIMELINE3: case FISHBONE: case FISHBONE2: case RIGHT_FISHBONE: @@ -748,6 +762,8 @@ class Drag extends Base { const { LAYOUT, LAYOUT_GROW_DIR } = CONSTANTS const { VERTICAL_TIMELINE, + VERTICAL_TIMELINE2, + VERTICAL_TIMELINE3, FISHBONE, FISHBONE2, RIGHT_FISHBONE, @@ -794,6 +810,8 @@ class Drag extends Base { let notRenderLine = false switch (layout) { case VERTICAL_TIMELINE: + case VERTICAL_TIMELINE2: + case VERTICAL_TIMELINE3: if (layerIndex === 1) { x = nodeRect.originLeft +