From 03ff151ed0e2d8e3cc66185212d25ebeb38e8706 Mon Sep 17 00:00:00 2001 From: smallstonesk <575913857@qq.com> Date: Mon, 28 Dec 2020 09:59:42 +0800 Subject: [PATCH] feat: optimize selecting edges experience --- .../src/mods/flowChart/createFlowChart.ts | 24 +++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/core/src/mods/flowChart/createFlowChart.ts b/packages/core/src/mods/flowChart/createFlowChart.ts index be6c8c4..0680058 100644 --- a/packages/core/src/mods/flowChart/createFlowChart.ts +++ b/packages/core/src/mods/flowChart/createFlowChart.ts @@ -3,6 +3,7 @@ import { Cell, Edge, Graph, Node } from '@antv/x6'; import { MIN_ZOOM, MAX_ZOOM } from '../../common/const'; import baseCellSchemaMap from '../../common/baseCell'; import previewCellSchemaMap from '../../common/previewCell'; +import { getSelectedEdges } from '../../utils/flowChartUtils'; import { registerServerStorage } from './registerServerStorage'; import MiniMapSimpleNode from '../../components/miniMapSimpleNode'; @@ -34,6 +35,26 @@ const registerEvents = (flowChart: Graph): void => { } } }); + flowChart.on('edge:selected', (args) => { + args.edge.attr('line/stroke', '#feb663'); + args.edge.attr('line/strokeWidth', '3px'); + }); + flowChart.on('edge:unselected', (args) => { + args.edge.attr('line/stroke', '#333'); + args.edge.attr('line/strokeWidth', '2px'); + }); + flowChart.on('edge:mouseover', (args) => { + args.edge.attr('line/stroke', '#feb663'); + args.edge.attr('line/strokeWidth', '3px'); + }); + flowChart.on('edge:mouseleave', (args) => { + const { edge } = args; + const selectedEdges = getSelectedEdges(flowChart); + if (selectedEdges[0] !== edge) { + args.edge.attr('line/stroke', '#333'); + args.edge.attr('line/strokeWidth', '2px'); + } + }); }; const registerShortcuts = (flowChart: Graph): void => { @@ -87,8 +108,7 @@ const createFlowChart = (container: HTMLDivElement, miniMapContainer: HTMLDivEle multiple: true, rubberband: true, movable: true, - showNodeSelectionBox: true, - showEdgeSelectionBox: true + showNodeSelectionBox: true }, // https://x6.antv.vision/zh/docs/tutorial/basic/snapline snapline: {