Feat:新增两种垂直时间轴结构

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'
 ]
 

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

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 =
+            if (this.layout === CONSTANTS.LAYOUT.VERTICAL_TIMELINE2) {
-              index % 2 === 0
+              newNode.dir = CONSTANTS.LAYOUT_GROW_DIR.LEFT
-                ? CONSTANTS.LAYOUT_GROW_DIR.RIGHT
+            } else if (this.layout === CONSTANTS.LAYOUT.VERTICAL_TIMELINE3) {
-                : CONSTANTS.LAYOUT_GROW_DIR.LEFT
+              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) {

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 +