diff --git a/simple-mind-map/src/constants/constant.js b/simple-mind-map/src/constants/constant.js index a31e4a6f..f0046027 100644 --- a/simple-mind-map/src/constants/constant.js +++ b/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' } } diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index 14df0219..67c8298e 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -210,8 +210,8 @@ export const defaultOpt = { tagsColorMap: {}, // 节点协作样式配置 cooperateStyle: { - avatarSize: 22,// 头像大小 - fontSize: 12,// 如果是文字头像,那么文字的大小 + avatarSize: 22, // 头像大小 + 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 } diff --git a/simple-mind-map/src/core/render/Render.js b/simple-mind-map/src/core/render/Render.js index 9ebbf368..733c2352 100644 --- a/simple-mind-map/src/core/render/Render.js +++ b/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, - notFocusNewNodeOnCreateNewNode + defaultInsertBelowSecondLevelNodeText } = this.mindMap.opt const list = appointNodes.length > 0 ? appointNodes : this.activeNodeList const handleMultiNodes = list.length > 1 const isRichText = !!this.mindMap.richText - const focusNewNode = notFocusNewNodeOnCreateNewNode - ? false - : handleMultiNodes || !openEdit + const { focusNewNode, inserting } = this.getNewNodeBehavior( + openEdit, + handleMultiNodes + ) const params = { expand: true, richText: isRichText, @@ -570,8 +600,7 @@ class Render { // 计算插入位置 const index = getNodeDataIndex(node) const newNodeData = { - inserting: - notFocusNewNodeOnCreateNewNode || handleMultiNodes ? false : openEdit, // 如果同时对多个节点插入子节点,那么无需进入编辑模式, + inserting, 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 = !notFocusNewNodeOnCreateNewNode + const { focusNewNode } = this.getNewNodeBehavior(false, true) const params = { expand: true, richText: isRichText, @@ -641,20 +669,20 @@ class Render { this.textEdit.hideEditTextBox() const { defaultInsertSecondLevelNodeText, - defaultInsertBelowSecondLevelNodeText, - notFocusNewNodeOnCreateNewNode + defaultInsertBelowSecondLevelNodeText } = this.mindMap.opt const list = appointNodes.length > 0 ? appointNodes : this.activeNodeList const handleMultiNodes = list.length > 1 const isRichText = !!this.mindMap.richText - const focusNewNode = notFocusNewNodeOnCreateNewNode - ? false - : handleMultiNodes || !openEdit + const { focusNewNode, inserting } = this.getNewNodeBehavior( + 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: - notFocusNewNodeOnCreateNewNode || handleMultiNodes ? false : openEdit, // 如果同时对多个节点插入子节点,那么无需进入编辑模式 + inserting, 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 = !notFocusNewNodeOnCreateNewNode + const { focusNewNode } = this.getNewNodeBehavior(false, true) const params = { expand: true, richText: isRichText, @@ -742,20 +768,20 @@ class Render { this.textEdit.hideEditTextBox() const { defaultInsertSecondLevelNodeText, - defaultInsertBelowSecondLevelNodeText, - notFocusNewNodeOnCreateNewNode + defaultInsertBelowSecondLevelNodeText } = this.mindMap.opt const list = appointNodes.length > 0 ? appointNodes : this.activeNodeList const handleMultiNodes = list.length > 1 const isRichText = !!this.mindMap.richText - const focusNewNode = notFocusNewNodeOnCreateNewNode - ? false - : handleMultiNodes || !openEdit + const { focusNewNode, inserting } = this.getNewNodeBehavior( + 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: - notFocusNewNodeOnCreateNewNode || handleMultiNodes ? false : openEdit, // 如果同时对多个节点插入子节点,那么无需进入编辑模式 + inserting, data: { text: text, uid: createUid(),