From b2bf6a375597f424662b96e6e7c223a671ae9e55 Mon Sep 17 00:00:00 2001 From: smallstonesk <575913857@qq.com> Date: Sun, 3 Jan 2021 00:17:39 +0800 Subject: [PATCH] feat: completes editint code item of node's context menu --- .../mods/flowChart/contextMenu/menuConfig/node.tsx | 12 ++++++++++-- packages/core/src/mods/flowChart/createFlowChart.ts | 3 +++ .../src/mods/settingBar/components/code/index.tsx | 7 ++++--- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/core/src/mods/flowChart/contextMenu/menuConfig/node.tsx b/packages/core/src/mods/flowChart/contextMenu/menuConfig/node.tsx index 0b04ec3..6623066 100644 --- a/packages/core/src/mods/flowChart/contextMenu/menuConfig/node.tsx +++ b/packages/core/src/mods/flowChart/contextMenu/menuConfig/node.tsx @@ -9,6 +9,8 @@ import { } from '@ant-design/icons'; import XIcon from '../../../../components/xIcon'; import shortcuts from '../../../../common/shortcuts'; +import { Graph } from '@antv/x6'; +import { getSelectedNodes } from '../../../../utils/flowChartUtils'; const nodeMenuConfig = [ { @@ -49,14 +51,20 @@ const nodeMenuConfig = [ key: 'editCode', title: '编辑代码', icon: , - handler() { - // TODO + disabled(flowChart: Graph) { + return getSelectedNodes(flowChart).length !== 1; + }, + handler(flowChart: Graph) { + flowChart.trigger('settingBar:clickEditCode'); } }, { key: 'executeCode', title: '执行代码', icon: , + disabled(flowChart: Graph) { + return getSelectedNodes(flowChart).length !== 1; + }, handler() { // TODO } diff --git a/packages/core/src/mods/flowChart/createFlowChart.ts b/packages/core/src/mods/flowChart/createFlowChart.ts index b611ad9..ca02c80 100644 --- a/packages/core/src/mods/flowChart/createFlowChart.ts +++ b/packages/core/src/mods/flowChart/createFlowChart.ts @@ -55,6 +55,9 @@ const registerEvents = (flowChart: Graph): void => { args.edge.attr('line/strokeWidth', '2px'); } }); + flowChart.on('node:dblclick', () => { + flowChart.trigger('settingBar:clickEditCode'); + }); flowChart.on('blank:contextmenu', (args) => { const { e: { clientX, clientY } } = args; flowChart.cleanSelection(); diff --git a/packages/core/src/mods/settingBar/components/code/index.tsx b/packages/core/src/mods/settingBar/components/code/index.tsx index 13f0aaf..6dac600 100644 --- a/packages/core/src/mods/settingBar/components/code/index.tsx +++ b/packages/core/src/mods/settingBar/components/code/index.tsx @@ -21,9 +21,10 @@ const Code: React.FC = (props) => { const [visible, setVisible] = useState(false); useEffect(() => { - flowChart.on('node:dblclick', () => { - onClickEdit(); - }); + flowChart.on('settingBar:clickEditCode', onClickEdit); + return () => { + flowChart.off('settingBar:clickEditCode', onClickEdit); + }; }, []); // events