Initial commit
This commit is contained in:
@@ -8,10 +8,12 @@
|
||||
*/
|
||||
|
||||
import { computed, type ComputedRef, ref, type Ref } from 'vue';
|
||||
import { type Dom, Graph } from '@antv/x6';
|
||||
import { type Dom, Graph, Node } from '@antv/x6';
|
||||
import type { NodeViewPositionEventArgs } from '@antv/x6/es/view/node/type';
|
||||
import { createGraphCanvas } from './graph';
|
||||
import { EventListener } from '@/utils/event';
|
||||
import type { ModelElement } from './element';
|
||||
// import {createLineOptions} from './line'
|
||||
|
||||
export interface UseGraphCanvas {
|
||||
container: Ref<HTMLDivElement | null>;
|
||||
@@ -85,7 +87,7 @@ export const useGraphCanvas = (readonly: boolean = false): UseGraphCanvas => {
|
||||
const cells = graph.value?.getSelectedCells();
|
||||
if (cells && cells.length) {
|
||||
graph.value?.removeCells(cells);
|
||||
// 通知父节点更新状态
|
||||
// 通知父组件更新状态
|
||||
emitGraphEvent('cells:removed', cells);
|
||||
}
|
||||
}
|
||||
@@ -104,7 +106,15 @@ export const useGraphCanvas = (readonly: boolean = false): UseGraphCanvas => {
|
||||
|
||||
// 监听连线删除
|
||||
graph.value.on('edge:removed', ({ edge }) => {
|
||||
emitGraphEvent('cells:removed', edge); // 添加此行
|
||||
emitGraphEvent('edge:removed', edge); // 添加此行
|
||||
});
|
||||
|
||||
graph.value.on('edge:added', ({ edge }) => {
|
||||
// const lineOptions = createLineOptions();
|
||||
// edge.setAttrs(lineOptions.attrs);
|
||||
// edge.set(lineOptions.animation);
|
||||
// edge.setMarkup(lineOptions.markup);
|
||||
emitGraphEvent('edge:added', edge); // 添加此行
|
||||
});
|
||||
|
||||
graph.value.on('edge:contextmenu', (ctx) => {
|
||||
@@ -132,28 +142,28 @@ export const useGraphCanvas = (readonly: boolean = false): UseGraphCanvas => {
|
||||
});
|
||||
|
||||
graph.value.on('edge:connected', ({ edge }) => {
|
||||
// const sourceNode = edge.getSourceCell() as Node;
|
||||
// const targetNode = edge.getTargetCell() as Node;
|
||||
const sourceNode = edge.getSourceCell() as Node;
|
||||
const targetNode = edge.getTargetCell() as Node;
|
||||
|
||||
// if (sourceNode && targetNode) {
|
||||
// const sourceData = sourceNode.getData() as TaskNodeElement;
|
||||
// const targetData = targetNode.getData() as TaskNodeElement;
|
||||
//
|
||||
// // 将连线存储到节点数据中
|
||||
// const sourceEdges = sourceData.edges || [];
|
||||
// const existingEdge = sourceEdges.find(e => e.targetKey === targetNode.id);
|
||||
//
|
||||
// if (!existingEdge) {
|
||||
// sourceEdges.push({
|
||||
// key: edge.id,
|
||||
// sourceKey: sourceNode.id,
|
||||
// sourceName: sourceData.name,
|
||||
// targetKey: targetNode.id,
|
||||
// targetName: targetData.name,
|
||||
// });
|
||||
// sourceNode.setData({ ...sourceData, edges: sourceEdges });
|
||||
// }
|
||||
// }
|
||||
if (sourceNode && targetNode) {
|
||||
const sourceData = sourceNode.getData() as ModelElement;
|
||||
const targetData = targetNode.getData() as ModelElement;
|
||||
|
||||
// 将连线存储到节点数据中
|
||||
const sourceEdges = sourceData.edges || [];
|
||||
const existingEdge = sourceEdges.find(e => e.targetKey === targetNode.id);
|
||||
|
||||
if (!existingEdge) {
|
||||
sourceEdges.push({
|
||||
key: edge.id,
|
||||
sourceKey: sourceNode.id,
|
||||
sourceName: sourceData.name,
|
||||
targetKey: targetNode.id,
|
||||
targetName: targetData.name,
|
||||
});
|
||||
sourceNode.replaceData({ ...sourceData, edges: sourceEdges });
|
||||
}
|
||||
}
|
||||
|
||||
edge.attr('line/stroke', '#3b82f6'); // 显式设置颜色
|
||||
edge.attr('line/strokeWidth', 2); // 显式设置宽度
|
||||
|
||||
Reference in New Issue
Block a user