Feat：新增创建新节点的行为配置选项

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

@@ -229,6 +229,11 @@ export const CONSTANTS = {
   SCROLL_BAR_DIR: {
     VERTICAL: 'vertical',
     HORIZONTAL: 'horizontal'
+  },
+  CREATE_NEW_NODE_BEHAVIOR: {
+    DEFAULT: 'default',
+    NOT_ACTIVE: 'notActive',
+    ACTIVE_ONLY: 'activeOnly'
   }
 }
 

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

@@ -210,8 +210,8 @@ export const defaultOpt = {
   tagsColorMap: {},
   // 节点协作样式配置
   cooperateStyle: {
-    avatarSize: 22,// 头像大小
+    avatarSize: 22, // 头像大小
-    fontSize: 12,// 如果是文字头像，那么文字的大小
+    fontSize: 12 // 如果是文字头像，那么文字的大小
   },
   // 关联线是否始终显示在节点上层
   // false：即创建关联线和激活关联线时处于最顶层，其他情况下处于节点下方
@@ -230,6 +230,11 @@ export const defaultOpt = {
     stroke: 'rgb(94, 200, 248)',
     fill: 'transparent'
   },
-  // 创建新节点时默认不聚焦新节点，不进入新节点的编辑状态
+  // 创建新节点时的行为
-  notFocusNewNodeOnCreateNewNode: false
+  /*
+    DEFAULT  ：默认会激活新创建的节点，并且进入编辑模式。如果同时创建了多个新节点，那么只会激活而不会进入编辑模式
+    NOT_ACTIVE  : 不激活新创建的节点
+    ACTIVE_ONLY  : 只激活新创建的节点，不进入编辑模式
+  */
+  createNewNodeBehavior: CONSTANTS.CREATE_NEW_NODE_BEHAVIOR.DEFAULT
 }

simple-mind-map/src/core/render/Render.js

@@ -524,6 +524,36 @@ class Render {
     }
   }
 
+  // 获取创建新节点的行为
+  getNewNodeBehavior(openEdit = false, handleMultiNodes = false) {
+    const { createNewNodeBehavior } = this.mindMap.opt
+    let focusNewNode = false // 是否激活新节点
+    let inserting = false // 新节点是否进入编辑模式
+    switch (createNewNodeBehavior) {
+      // 默认会激活新创建的节点，并且进入编辑模式。如果同时创建了多个新节点，那么只会激活而不会进入编辑模式
+      case CONSTANTS.CREATE_NEW_NODE_BEHAVIOR.DEFAULT:
+        focusNewNode = handleMultiNodes || !openEdit
+        inserting = handleMultiNodes ? false : openEdit // 如果同时对多个节点插入子节点，那么无需进入编辑模式
+        break
+      // 不激活新创建的节点
+      case CONSTANTS.CREATE_NEW_NODE_BEHAVIOR.NOT_ACTIVE:
+        focusNewNode = false
+        inserting = false
+        break
+      // 只激活新创建的节点，不进入编辑模式
+      case CONSTANTS.CREATE_NEW_NODE_BEHAVIOR.ACTIVE_ONLY:
+        focusNewNode = true
+        inserting = false
+        break
+      default:
+        break
+    }
+    return {
+      focusNewNode,
+      inserting
+    }
+  }
+
   //  插入同级节点
   insertNode(
     openEdit = true,
@@ -538,15 +568,15 @@ class Render {
     this.textEdit.hideEditTextBox()
     const {
       defaultInsertSecondLevelNodeText,
-      defaultInsertBelowSecondLevelNodeText,
+      defaultInsertBelowSecondLevelNodeText
-      notFocusNewNodeOnCreateNewNode
     } = this.mindMap.opt
     const list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
     const handleMultiNodes = list.length > 1
     const isRichText = !!this.mindMap.richText
-    const focusNewNode = notFocusNewNodeOnCreateNewNode
+    const { focusNewNode, inserting } = this.getNewNodeBehavior(
-      ? false
+      openEdit,
-      : handleMultiNodes || !openEdit
+      handleMultiNodes
+    )
     const params = {
       expand: true,
       richText: isRichText,
@@ -570,8 +600,7 @@ class Render {
       // 计算插入位置
       const index = getNodeDataIndex(node)
       const newNodeData = {
-        inserting:
+        inserting,
-          notFocusNewNodeOnCreateNewNode || handleMultiNodes ? false : openEdit, // 如果同时对多个节点插入子节点，那么无需进入编辑模式,
         data: {
           text: text,
           ...params,
@@ -599,8 +628,7 @@ class Render {
     this.textEdit.hideEditTextBox()
     const list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
     const isRichText = !!this.mindMap.richText
-    const { notFocusNewNodeOnCreateNewNode } = this.mindMap.opt
+    const { focusNewNode } = this.getNewNodeBehavior(false, true)
-    const focusNewNode = !notFocusNewNodeOnCreateNewNode
     const params = {
       expand: true,
       richText: isRichText,
@@ -641,20 +669,20 @@ class Render {
     this.textEdit.hideEditTextBox()
     const {
       defaultInsertSecondLevelNodeText,
-      defaultInsertBelowSecondLevelNodeText,
+      defaultInsertBelowSecondLevelNodeText
-      notFocusNewNodeOnCreateNewNode
     } = this.mindMap.opt
     const list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
     const handleMultiNodes = list.length > 1
     const isRichText = !!this.mindMap.richText
-    const focusNewNode = notFocusNewNodeOnCreateNewNode
+    const { focusNewNode, inserting } = this.getNewNodeBehavior(
-      ? false
+      openEdit,
-      : handleMultiNodes || !openEdit
+      handleMultiNodes
+    )
     const params = {
       expand: true,
       richText: isRichText,
       resetRichText: isRichText,
-      isActive: focusNewNode // 如果同时对多个节点插入子节点，那么需要把新增的节点设为激活状态。如果不进入编辑状态，那么也需要手动设为激活状态
+      isActive: focusNewNode
     }
     // 动态指定的子节点数据也需要添加相关属性
     appointChildren = addDataToAppointNodes(appointChildren, {
@@ -671,8 +699,7 @@ class Render {
         ? defaultInsertSecondLevelNodeText
         : defaultInsertBelowSecondLevelNodeText
       const newNode = {
-        inserting:
+        inserting,
-          notFocusNewNodeOnCreateNewNode || handleMultiNodes ? false : openEdit, // 如果同时对多个节点插入子节点，那么无需进入编辑模式
         data: {
           text: text,
           uid: createUid(),
@@ -704,8 +731,7 @@ class Render {
     this.textEdit.hideEditTextBox()
     const list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
     const isRichText = !!this.mindMap.richText
-    const { notFocusNewNodeOnCreateNewNode } = this.mindMap.opt
+    const { focusNewNode } = this.getNewNodeBehavior(false, true)
-    const focusNewNode = !notFocusNewNodeOnCreateNewNode
     const params = {
       expand: true,
       richText: isRichText,
@@ -742,20 +768,20 @@ class Render {
     this.textEdit.hideEditTextBox()
     const {
       defaultInsertSecondLevelNodeText,
-      defaultInsertBelowSecondLevelNodeText,
+      defaultInsertBelowSecondLevelNodeText
-      notFocusNewNodeOnCreateNewNode
     } = this.mindMap.opt
     const list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
     const handleMultiNodes = list.length > 1
     const isRichText = !!this.mindMap.richText
-    const focusNewNode = notFocusNewNodeOnCreateNewNode
+    const { focusNewNode, inserting } = this.getNewNodeBehavior(
-      ? false
+      openEdit,
-      : handleMultiNodes || !openEdit
+      handleMultiNodes
+    )
     const params = {
       expand: true,
       richText: isRichText,
       resetRichText: isRichText,
-      isActive: focusNewNode // 如果同时对多个节点插入子节点，那么需要把新增的节点设为激活状态。如果不进入编辑状态，那么也需要手动设为激活状态
+      isActive: focusNewNode
     }
     list.forEach(node => {
       if (node.isGeneralization || node.isRoot) {
@@ -766,8 +792,7 @@ class Render {
           ? defaultInsertSecondLevelNodeText
           : defaultInsertBelowSecondLevelNodeText
       const newNode = {
-        inserting:
+        inserting,
-          notFocusNewNodeOnCreateNewNode || handleMultiNodes ? false : openEdit, // 如果同时对多个节点插入子节点，那么无需进入编辑模式
         data: {
           text: text,
           uid: createUid(),