Initial commit

This commit is contained in:
libertyspy
2026-02-08 17:57:40 +08:00
parent 294e5d687e
commit 82fcedfa97
15 changed files with 548 additions and 290 deletions

View File

@@ -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); // 显式设置宽度