Browse Source

feat: optimize selecting edges experience

master
smallstonesk 4 years ago
parent
commit
03ff151ed0
  1. 24
      packages/core/src/mods/flowChart/createFlowChart.ts

24
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 { MIN_ZOOM, MAX_ZOOM } from '../../common/const';
import baseCellSchemaMap from '../../common/baseCell'; import baseCellSchemaMap from '../../common/baseCell';
import previewCellSchemaMap from '../../common/previewCell'; import previewCellSchemaMap from '../../common/previewCell';
import { getSelectedEdges } from '../../utils/flowChartUtils';
import { registerServerStorage } from './registerServerStorage'; import { registerServerStorage } from './registerServerStorage';
import MiniMapSimpleNode from '../../components/miniMapSimpleNode'; 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 => { const registerShortcuts = (flowChart: Graph): void => {
@ -87,8 +108,7 @@ const createFlowChart = (container: HTMLDivElement, miniMapContainer: HTMLDivEle
multiple: true, multiple: true,
rubberband: true, rubberband: true,
movable: true, movable: true,
showNodeSelectionBox: true, showNodeSelectionBox: true
showEdgeSelectionBox: true
}, },
// https://x6.antv.vision/zh/docs/tutorial/basic/snapline // https://x6.antv.vision/zh/docs/tutorial/basic/snapline
snapline: { snapline: {

Loading…
Cancel
Save