UPDATE: VERSION-20260326
This commit is contained in:
@@ -46,6 +46,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
import {useRouter} from 'vue-router';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { getTeleport } from '@antv/x6-vue-shape';
|
||||
import { Graph, Node, type NodeProperties } from '@antv/x6';
|
||||
@@ -54,8 +55,9 @@ import { Wrapper } from '@/components/wrapper';
|
||||
import { safePreventDefault, safeStopPropagation } from '@/utils/event';
|
||||
import Header from '../header.vue';
|
||||
|
||||
import type { PlatformWithComponents, Scenario } from './types';
|
||||
import { createGraphTaskElement, createLineOptions, type GraphContainer, type GraphTaskElement, resolveGraph, useGraphCanvas } from '../graph';
|
||||
import type { Scenario } from './types';
|
||||
import type { PlatformWithComponents } from '../types';
|
||||
import { createLineOptions, type GraphContainer, type GraphTaskElement, resolveGraph, useGraphCanvas } from '../graph';
|
||||
|
||||
import { registerScenarioElement } from './register';
|
||||
import { createGraphScenarioElement, createGraphTaskElementFromScenario } from './utils';
|
||||
@@ -63,7 +65,7 @@ import { createGraphScenarioElement, createGraphTaskElementFromScenario } from '
|
||||
import PlatformCard from './platform-card.vue';
|
||||
import NodesCard from './nodes-card.vue';
|
||||
import { saveScenario } from './api';
|
||||
import {resolveConnectionRelation} from './relation'
|
||||
import { resolveConnectionRelation } from './relation';
|
||||
|
||||
const TeleportContainer = defineComponent(getTeleport());
|
||||
|
||||
@@ -82,6 +84,7 @@ export default defineComponent({
|
||||
TeleportContainer,
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const canvas = ref<HTMLDivElement | null>(null);
|
||||
const graph = ref<Graph | null>(null);
|
||||
const currentZoom = ref<number>(1);
|
||||
@@ -105,6 +108,19 @@ export default defineComponent({
|
||||
resizeCanvas,
|
||||
} = useGraphCanvas();
|
||||
|
||||
const destroy = ()=> {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (graph.value) {
|
||||
try {
|
||||
graph.value.clearCells();
|
||||
} catch (error) {
|
||||
console.warn('销毁画布时出错:', error);
|
||||
}
|
||||
graph.value = null;
|
||||
console.log('画布已销毁');
|
||||
}
|
||||
}
|
||||
|
||||
// 处理拖动开始
|
||||
const handleDragStart = (nm: PlatformWithComponents) => {
|
||||
draggedNodeData.value = nm;
|
||||
@@ -293,6 +309,14 @@ export default defineComponent({
|
||||
currentScenarioEditing.value = null !== currentScenario.value;
|
||||
});
|
||||
|
||||
handleGraphEvent('node:dblclick', () => {
|
||||
destroy()
|
||||
window.location.href = '/app/decision/designer'
|
||||
// router.push({
|
||||
// path: '/app/decision/designer'
|
||||
// })
|
||||
});
|
||||
|
||||
handleGraphEvent('node:click', (args: any) => {
|
||||
const node = args.node as Node<NodeProperties>;
|
||||
const newElement = node.getData() as GraphTaskElement;
|
||||
@@ -382,18 +406,7 @@ export default defineComponent({
|
||||
});
|
||||
|
||||
// 清理
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (graph.value) {
|
||||
try {
|
||||
graph.value.clearCells();
|
||||
} catch (error) {
|
||||
console.warn('销毁画布时出错:', error);
|
||||
}
|
||||
graph.value = null;
|
||||
console.log('画布已销毁');
|
||||
}
|
||||
});
|
||||
onBeforeUnmount(() => destroy());
|
||||
|
||||
return {
|
||||
scenariosCardRef,
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
*/
|
||||
|
||||
|
||||
import type { ApiDataResponse, NullableString, PageableResponse } from '@/types';
|
||||
import type { NullableString, PageableResponse } from '@/types';
|
||||
import type { GraphContainer } from '../graph';
|
||||
import type { Platform, PlatformComponent } from '../types';
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
import type { GraphRect, GraphTaskElement } from '../graph';
|
||||
import { generateKey } from '@/utils/strings';
|
||||
import type { PlatformWithComponents } from './types';
|
||||
import type { PlatformWithComponents } from '../types';
|
||||
|
||||
export const createGraphTaskElementFromScenario = (
|
||||
platform: PlatformWithComponents,
|
||||
@@ -28,6 +28,7 @@ export const createGraphTaskElementFromScenario = (
|
||||
template: 0,
|
||||
templateType: null,
|
||||
category: null,
|
||||
multiable: false,
|
||||
group: null,
|
||||
description: platform.description,
|
||||
order: 0,
|
||||
|
||||
@@ -69,11 +69,12 @@
|
||||
|
||||
</a-tabs>
|
||||
|
||||
<a-tabs v-if="currentElement" v-model:activeKey="activeBottomTabsKey" class="ks-model-builder-tabs parameters-tabs">
|
||||
<a-tabs v-if="currentElement?.multiable === true" v-model:activeKey="activeBottomTabsKey" class="ks-model-builder-tabs parameters-tabs">
|
||||
<template #leftExtra>
|
||||
<span class="ks-model-builder-title-icon icon-input"></span>
|
||||
</template>
|
||||
<a-tab-pane key="1" tab="节点变量">
|
||||
|
||||
<a-form
|
||||
v-if="currentElement.parameters && currentElement.parameters.length > 0"
|
||||
autocomplete="off"
|
||||
@@ -217,6 +218,7 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
const updateNode = () => {
|
||||
console.error('currentElement.value',currentElement.value)
|
||||
if (currentNode.value && currentElement.value) {
|
||||
// 深拷贝当前元素数据
|
||||
const newElement = JSON.parse(JSON.stringify(currentElement.value)) as GraphTaskElement;
|
||||
|
||||
@@ -19,6 +19,7 @@ export interface NodeTemplate {
|
||||
templateType: NullableString;
|
||||
englishName: NullableString;
|
||||
parameters: ElementParameter[],
|
||||
multiable?: boolean,
|
||||
}
|
||||
|
||||
export interface NodeDragTemplate extends NodeTemplate {
|
||||
|
||||
@@ -27,6 +27,7 @@ export const createGraphTaskElementFromTemplate = (
|
||||
category: template.type,
|
||||
group: template.group,
|
||||
description: template.description,
|
||||
multiable: template.multiable === true,
|
||||
order: 0,
|
||||
position: {
|
||||
x: realRect.x ?? 0,
|
||||
|
||||
@@ -67,6 +67,7 @@ export interface ElementParameter {
|
||||
defaultValue: NullableString,
|
||||
description: NullableString,
|
||||
templateType: NullableString,
|
||||
groupIndex: number,
|
||||
}
|
||||
|
||||
|
||||
@@ -84,6 +85,7 @@ export interface GraphTaskElement extends GraphBaseElement {
|
||||
inputs: any;
|
||||
outputs: any;
|
||||
order: number;
|
||||
multiable:boolean,
|
||||
variables: ElementVariable[];
|
||||
parameters: ElementParameter[];
|
||||
children?: GraphTaskElement[],
|
||||
|
||||
@@ -183,6 +183,11 @@ export const useGraphCanvas = (readonly: boolean = false): UseGraphCanvas => {
|
||||
emitGraphEvent('node:click', ctx);
|
||||
});
|
||||
|
||||
graph.value.on('node:dblclick', (ctx: NodeViewPositionEventArgs<Dom.ClickEvent>) => {
|
||||
console.info('node:dblclick', ctx);
|
||||
emitGraphEvent('node:dblclick', ctx);
|
||||
});
|
||||
|
||||
// 监听节点选中事件
|
||||
graph.value.on('node:selected', ({ node }) => {
|
||||
console.info('node select', node);
|
||||
|
||||
Reference in New Issue
Block a user