From 55d7d0a846b4c3dd1366067e3d35eff321499c4f Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Mon, 4 Dec 2023 11:07:26 +0800 Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E5=88=9B?= =?UTF-8?q?=E5=BB=BA=E6=96=B0=E8=8A=82=E7=82=B9=E7=9A=84=E8=A1=8C=E4=B8=BA?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=80=89=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/src/constants/constant.js | 5 ++ .../src/constants/defaultOptions.js | 13 ++- simple-mind-map/src/core/render/Render.js | 79 ++++++++++++------- 3 files changed, 66 insertions(+), 31 deletions(-) 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(),