Files
FiDA_Front/src/components/Canvas/FlowCanvas/manager/NodeManager.ts

163 lines
4.8 KiB
TypeScript
Raw Normal View History

2026-02-27 09:56:49 +08:00
import { createId } from '../../tools/tools'
2026-03-04 15:06:22 +08:00
import { NODE_DATATYPE, NODE_COMPONENT, NODE_DATATIER } from '../tools/index.d'
2026-03-05 16:56:03 +08:00
interface NodeData {
type?: string
component?: any// 节点组件
data?: object// 节点数据
tier?: string// 节点层级
isHeader?: boolean// 是否显示头
superiorID?: string// 上级节点ID
superiorNodeType?: string// 上级节点类型
2026-03-05 16:56:03 +08:00
disableDelete?: boolean// 是否禁用删除
disableCopy?: boolean// 是否禁用复制
2026-03-12 17:07:04 +08:00
createIndexPosition?: number// 创建索引位置
isActive?: boolean// 是否激活
2026-03-05 16:56:03 +08:00
}
2026-02-27 09:56:49 +08:00
interface NodeOptions {
id?: string
position?: { x: number, y: number }
2026-02-27 11:43:27 +08:00
positionX?: number
positionY?: number
component?: any
2026-03-05 16:56:03 +08:00
data?: NodeData
2026-02-27 11:43:27 +08:00
}// 不可传入type class (内部使用)
2026-02-26 16:55:25 +08:00
export class NodeManager {
stateManager: any
vueFlow: any
2026-03-05 11:52:06 +08:00
nodesep = 100 // 节点间距
ranksep = 100 // 层级间距
2026-02-26 16:55:25 +08:00
constructor(options) {
this.stateManager = options.stateManager;
this.vueFlow = options.vueFlow
}
2026-02-27 09:56:49 +08:00
2026-02-27 11:43:27 +08:00
/** 删除节点 */
deleteNode(id: string) {
this.stateManager.getSubordinateAllNodes(id, { isElMessageBox: true })
2026-02-27 14:58:36 +08:00
}
/** 添加节点 */
addNode(node: any) {
this.stateManager.addNode(node)
2026-02-27 11:43:27 +08:00
}
/** 创建节点 */
2026-02-27 09:56:49 +08:00
createNode(options: NodeOptions) {
2026-03-03 15:39:54 +08:00
const superiorID = options?.data?.superiorID
2026-03-17 15:23:56 +08:00
//获取上级节点所生成的最后一个node设置位置为最后一个节点的xy 加上 节点间距
const superiorGenerateNodes = this.stateManager.getSubordNodes(superiorID)
const currentNode = superiorGenerateNodes.find((node) => {
2026-03-25 16:52:59 +08:00
return (node.data.createIndexPosition === options?.data?.createIndexPosition && options?.data?.createIndexPosition)
})
2026-03-17 15:23:56 +08:00
const endGenerateNode = superiorGenerateNodes.reduce((max, current) => {
return current.data.createIndexPosition > max.data.createIndexPosition ? current : max
}, superiorGenerateNodes[0])
const snode = superiorID ? this.stateManager.flowManager.getNodeById(superiorID) : this.stateManager.flowManager.getLastNode();
2026-02-27 09:56:49 +08:00
const id = options.id || createId()
2026-02-27 11:43:27 +08:00
const positionX = options.positionX || 0
const positionY = options.positionY || 0
const position = options.position ||
2026-03-17 15:23:56 +08:00
(
currentNode ?
currentNode.position :
endGenerateNode ?
2026-03-17 15:23:56 +08:00
{
x: endGenerateNode.position.x + positionX,
y: endGenerateNode.position.y + positionY + this.ranksep + 200
} : snode ?
2026-03-04 15:06:22 +08:00
{
2026-03-05 11:52:06 +08:00
x: snode.position.x + snode.dimensions.width + this.nodesep + positionX,
2026-03-04 15:06:22 +08:00
y: snode.position.y + positionY
} :
{
x: positionX,
y: positionY
2026-03-17 15:23:56 +08:00
}
)
2026-02-27 14:58:36 +08:00
const data = options?.data || {}
2026-02-27 09:56:49 +08:00
data['component'] = options.component
2026-02-27 11:43:27 +08:00
const options_ = {
2026-02-27 09:56:49 +08:00
id,
position,
data
2026-02-27 11:43:27 +08:00
}
2026-03-24 16:05:52 +08:00
if(currentNode)this.stateManager.deleteNode(currentNode.id)
2026-02-27 14:58:36 +08:00
this.addNode(options_)
2026-02-27 11:43:27 +08:00
return options_;
}
/** 创建结果节点 */
createResultNode(options?: NodeOptions) {
const options_ = {
2026-02-27 14:58:36 +08:00
...(options ? options : {}),
2026-03-02 13:51:14 +08:00
component: NODE_COMPONENT.RESULT_IMAGE,
2026-03-12 17:07:04 +08:00
positionY: options?.positionY || 0,
2026-02-27 11:43:27 +08:00
data: {
2026-03-04 15:06:22 +08:00
tier: NODE_DATATIER.RESULT_IMAGE,
2026-02-27 11:43:27 +08:00
type: NODE_DATATYPE.RESULT_IMAGE,
2026-03-12 17:07:04 +08:00
createIndexPosition: options?.data?.createIndexPosition || 1,
2026-02-27 14:58:36 +08:00
isHeader: true,
2026-02-27 11:49:08 +08:00
...(options?.data || {}),
2026-02-27 11:43:27 +08:00
},
}
return this.createNode(options_)
}
/** 创建卡片选择节点 */
createCardsSelect(options?: NodeOptions) {
const options_ = {
2026-02-27 14:58:36 +08:00
...(options ? options : {}),
2026-03-02 13:51:14 +08:00
component: NODE_COMPONENT.CARD,
2026-02-27 11:43:27 +08:00
positionY: 50,
data: {
2026-03-04 15:06:22 +08:00
tier: NODE_DATATIER.CARDS_SELECT,
2026-02-27 11:43:27 +08:00
type: NODE_DATATYPE.CARDS_SELECT,
createIndexPosition: options?.data?.createIndexPosition || 1,
2026-02-27 11:49:08 +08:00
...(options?.data || {}),
2026-02-27 11:43:27 +08:00
},
}
return this.createNode(options_)
}
/** 创建卡片节点 */
createCardNode(options?: NodeOptions) {
const options_ = {
...(options ? options : {}),
2026-03-02 13:51:14 +08:00
component: NODE_COMPONENT.CARD,
data: {
2026-03-04 15:06:22 +08:00
...(options?.data || {}),
}
}
return this.createNode(options_)
}
/** 创建文本节点 */
createTextNode(options?: NodeOptions) {
const options_ = {
...(options ? options : {}),
component: NODE_COMPONENT.TEXT,
data: {
...(options?.data || {}),
}
2026-02-27 11:43:27 +08:00
}
return this.createNode(options_)
2026-02-27 09:56:49 +08:00
}
2026-03-05 11:52:06 +08:00
2026-03-11 16:57:27 +08:00
copyNodeById(clickTaskId:string, id: string) {
2026-03-04 15:40:30 +08:00
const node = this.stateManager.getNodeById(id)
2026-03-11 16:57:27 +08:00
let copyNode = JSON.parse(JSON.stringify(node))
copyNode.data.data.imageProcessTasks = copyNode.data.data.imageProcessTasks.filter((item:any)=>item.taskId == clickTaskId)
2026-03-04 15:40:30 +08:00
const flowNode = this.stateManager.flowManager.getNodeById(id)
2026-03-05 16:56:03 +08:00
if (!node) return console.warn(`${id}找不到对应节点`)
if (node.data?.disableCopy) return console.warn(`${id}节点已禁用复制`)
2026-03-04 15:40:30 +08:00
const node_ = {
2026-03-11 16:57:27 +08:00
...copyNode,
2026-03-04 15:40:30 +08:00
id: createId(),
position: {
x: node.position.x,
2026-03-05 11:52:06 +08:00
y: node.position.y + (flowNode?.dimensions?.height || 0) + this.ranksep,
2026-03-04 15:40:30 +08:00
}
}
2026-03-05 10:27:41 +08:00
delete node_.data?.superiorID
2026-03-05 16:56:03 +08:00
delete node_.data?.disableDelete
2026-03-04 15:40:30 +08:00
this.stateManager.addNode(node_)
}
2026-03-11 17:02:32 +08:00
dispose() {}
2026-02-26 16:55:25 +08:00
}