129 lines
3.1 KiB
TypeScript
129 lines
3.1 KiB
TypeScript
/*
|
||
* This file is part of the kernelstudio package.
|
||
*
|
||
* (c) 2014-2026 zlin <admin@kernelstudio.com>
|
||
*
|
||
* For the full copyright and license information, please view the LICENSE file
|
||
* that was distributed with this source code.
|
||
*/
|
||
|
||
import type { GraphRect, GraphTaskElement } from '../graph';
|
||
import { generateKey } from '@/utils/strings';
|
||
import type { PlatformWithComponents } from '../types';
|
||
|
||
export const createGraphTaskElementFromScenario = (
|
||
platform: PlatformWithComponents,
|
||
rect?: GraphRect,
|
||
): GraphTaskElement => {
|
||
let realRect = { width: 120, height: 80, x: 0, y: 0, ...rect || {} };
|
||
console.info('rect', rect);
|
||
return {
|
||
id: 0,
|
||
key: generateKey(),
|
||
type: 'scenario',
|
||
name: platform.name,
|
||
platformId: platform.id,
|
||
scenarioId: platform.scenarioId,
|
||
components: platform.components ?? [],
|
||
template: 0,
|
||
templateType: null,
|
||
category: null,
|
||
multiable: false,
|
||
group: null,
|
||
description: platform.description,
|
||
order: 0,
|
||
position: {
|
||
x: realRect.x ?? 0,
|
||
y: realRect.y ?? 0,
|
||
},
|
||
width: realRect.width,
|
||
height: realRect.height,
|
||
inputs: null,
|
||
outputs: null,
|
||
parameters: [],
|
||
variables: [],
|
||
} as GraphTaskElement;
|
||
};
|
||
|
||
const portsGroups = {
|
||
in: {
|
||
position: 'left', // 入桩在左侧
|
||
attrs: {
|
||
circle: {
|
||
r: 6,
|
||
magnet: 'passive', // 被动吸附（仅作为连线目标）
|
||
stroke: '#5da1df',
|
||
strokeWidth: 2,
|
||
fill: '#fff',
|
||
},
|
||
},
|
||
},
|
||
out: {
|
||
position: 'right', // 出桩在右侧
|
||
attrs: {
|
||
circle: {
|
||
r: 6,
|
||
magnet: 'active', // 主动吸附（作为连线源）
|
||
stroke: '#5da1df',
|
||
strokeWidth: 2,
|
||
fill: '#5da1df',
|
||
},
|
||
},
|
||
},
|
||
};
|
||
|
||
export const createGraphScenarioElement = (element: GraphTaskElement): any => {
|
||
let realHeight = 120;
|
||
let width: number = 250;
|
||
if (!realHeight) {
|
||
realHeight = 120;
|
||
}
|
||
if(element?.components){
|
||
if(element?.components?.length > 2){
|
||
realHeight = 90 + element?.components?.length * 25
|
||
} else if(element?.components?.length <=1){
|
||
realHeight = 120
|
||
}
|
||
}
|
||
|
||
// const portsItems = (element.components || []).map((comp, index) => {
|
||
// const compId = comp.id || index;
|
||
// return [
|
||
// // 入桩（对应 DOM: data-port="in-${compId}"）
|
||
// {
|
||
// id: `in-${compId}`, // portId 必须和 DOM 的 data-port 一致
|
||
// group: 'in',
|
||
// data: comp, // 直接存储 port 数据，避免后续解析 DOM
|
||
// },
|
||
// // 出桩（对应 DOM: data-port="out-${compId}"）
|
||
// {
|
||
// id: `out-${compId}`,
|
||
// group: 'out',
|
||
// data: comp,
|
||
// },
|
||
// ];
|
||
// }).flat(); // 扁平化数组
|
||
|
||
return {
|
||
shape: 'scenario',
|
||
id: element.key,
|
||
position: {
|
||
x: element.position?.x || 0,
|
||
y: element.position?.y || 0,
|
||
},
|
||
size: {
|
||
width: width,
|
||
height: realHeight,
|
||
},
|
||
attrs: {
|
||
label: {
|
||
text: element.name,
|
||
},
|
||
},
|
||
data: element,
|
||
// ports: {
|
||
// groups: portsGroups,
|
||
// items: portsItems,
|
||
// },
|
||
};
|
||
}; |