diff --git a/frontend/src/components/pure/ms-minder-editor/hooks/useMinderEventListener.ts b/frontend/src/components/pure/ms-minder-editor/hooks/useMinderEventListener.ts index 97ae90abce..966f3f225a 100644 --- a/frontend/src/components/pure/ms-minder-editor/hooks/useMinderEventListener.ts +++ b/frontend/src/components/pure/ms-minder-editor/hooks/useMinderEventListener.ts @@ -6,6 +6,7 @@ import type { MinderCustomEvent } from '@/store/modules/components/minder-editor import type { MinderEvent, MinderJsonNode } from '../props'; export interface UseEventListenerProps { + handleDblclick?: () => void; handleContentChange?: (node?: MinderJsonNode) => void; handleSelectionChange?: (nodes: MinderJsonNode[]) => void; handleMinderEvent?: (event: MinderCustomEvent) => void; @@ -24,6 +25,13 @@ export default function useEventListener(listener: UseEventListenerProps) { // 拖拽触发时未处理的选中事件,拖拽完成后触发 let selectionchangeEvent: (() => void) | undefined; + // 双击编辑内容 + minder.on('dblclick', () => { + if (listener.handleDblclick) { + listener.handleDblclick(); + } + }); + // 监听脑图节点内容变化 minder.on('contentchange', () => { const node: MinderJsonNode = minder.getSelectedNode(); diff --git a/frontend/src/components/pure/ms-minder-editor/main/mainEditor.vue b/frontend/src/components/pure/ms-minder-editor/main/mainEditor.vue index 41c38056ff..82849144b6 100644 --- a/frontend/src/components/pure/ms-minder-editor/main/mainEditor.vue +++ b/frontend/src/components/pure/ms-minder-editor/main/mainEditor.vue @@ -95,6 +95,8 @@ }); const currentTreePath = ref([]); + const floatMenuVisible = ref(false); + async function init() { window.editor = new Editor(mec.value, { sequenceEnable: props.sequenceEnable, @@ -153,6 +155,12 @@ }, 100); } }, + handleDblclick() { + const state = window.editor.state(); + if (state === 'input') { + floatMenuVisible.value = false; + } + }, }); }); @@ -213,8 +221,6 @@ }, 300); // TODO:暂未知渲染时机,临时延迟解决 } - const floatMenuVisible = ref(false); - function save() { let data = importJson.value; if (innerImportJson.value.treePath?.length > 1) { diff --git a/frontend/src/components/pure/ms-minder-editor/menu/nodeFloatMenu.vue b/frontend/src/components/pure/ms-minder-editor/menu/nodeFloatMenu.vue index 8b27133048..2466811f2a 100644 --- a/frontend/src/components/pure/ms-minder-editor/menu/nodeFloatMenu.vue +++ b/frontend/src/components/pure/ms-minder-editor/menu/nodeFloatMenu.vue @@ -251,8 +251,9 @@ await sleep(300); // 拖拽完毕后会有 300ms 的动画,等待动画结束后再计算 nodePosition = window.minder.getSelectedNode()?.getRenderBox(); } - if (nodePosition && isNodeInMinderView(undefined, nodePosition, nodePosition.width / 2)) { - // 判断节点在脑图可视区域内且遮挡的节点不超过节点宽度的一半,则显示菜单 + const state = window.editor.fsm.state(); + if (nodePosition && isNodeInMinderView(undefined, nodePosition, nodePosition.width / 2) && state !== 'input') { + // 判断节点在脑图可视区域内且遮挡的节点不超过节点宽度的一半且当前不是编辑名称状态,则显示菜单 const nodeDomHeight = nodePosition.height || 0; menuPopupOffset.value = [nodePosition.x, nodePosition.y + nodeDomHeight + 4]; // 菜单显示在节点下方4px处 menuVisible.value = true;