2026-02-26 11:45:32 +08:00
|
|
|
import { ref, computed } from "vue";
|
2026-02-27 14:58:36 +08:00
|
|
|
import { NODE_TYPE } from '../tools/index.d'
|
2026-02-26 11:45:32 +08:00
|
|
|
|
2026-02-27 14:58:36 +08:00
|
|
|
export interface NodesItem {
|
|
|
|
|
id: string
|
|
|
|
|
type: string
|
|
|
|
|
class: string
|
|
|
|
|
position: { x: number, y: number }
|
2026-03-03 15:39:54 +08:00
|
|
|
data: { component: any, type: string, superiorID?: string }
|
2026-02-27 14:58:36 +08:00
|
|
|
}
|
2026-02-26 11:45:32 +08:00
|
|
|
export class StateManager {
|
|
|
|
|
vueFlow: any
|
|
|
|
|
nodes: any
|
2026-02-27 11:43:27 +08:00
|
|
|
nodes_: any
|
2026-02-26 11:45:32 +08:00
|
|
|
edges: any
|
|
|
|
|
zoom: any
|
2026-02-27 09:56:49 +08:00
|
|
|
// 管理器
|
|
|
|
|
eventManager: any
|
|
|
|
|
flowManager: any
|
|
|
|
|
nodeManager: any
|
|
|
|
|
// 设置管理器
|
|
|
|
|
setManager(options) {
|
|
|
|
|
options.eventManager && (this.eventManager = options.eventManager)
|
|
|
|
|
options.flowManager && (this.flowManager = options.flowManager)
|
|
|
|
|
options.nodeManager && (this.nodeManager = options.nodeManager)
|
|
|
|
|
}
|
2026-02-26 11:45:32 +08:00
|
|
|
constructor(options) {
|
|
|
|
|
this.vueFlow = options.vueFlow
|
2026-03-03 11:10:43 +08:00
|
|
|
this.zoom = ref(1)
|
2026-02-27 14:58:36 +08:00
|
|
|
this.nodes = ref<NodesItem[]>([]);
|
2026-02-27 11:43:27 +08:00
|
|
|
this.nodes_ = computed(() => {
|
|
|
|
|
return this.nodes.value.map((node, index) => {
|
2026-03-03 15:39:54 +08:00
|
|
|
const obj = node;
|
|
|
|
|
// if (index === 0) {
|
|
|
|
|
// obj.type = NODE_TYPE.INPUT;
|
|
|
|
|
// } else if (index === this.nodes.value.length - 1) {
|
|
|
|
|
// obj.type = NODE_TYPE.OUTPUT;
|
|
|
|
|
// } else {
|
|
|
|
|
// obj.type = NODE_TYPE.SECONDARY;
|
|
|
|
|
// }
|
|
|
|
|
const superiorID = node.data.superiorID;
|
|
|
|
|
const isSuperior = this.nodes.value.some((v) => v.id === superiorID)
|
|
|
|
|
const isSubord = this.nodes.value.some((v) => v.data.superiorID === node.id)
|
|
|
|
|
if (!superiorID) {// 没有上级ID
|
2026-02-27 14:58:36 +08:00
|
|
|
obj.type = NODE_TYPE.INPUT;
|
2026-03-03 15:39:54 +08:00
|
|
|
} else if (isSuperior && isSubord) {// 有上级ID并找到下级
|
2026-02-27 14:58:36 +08:00
|
|
|
obj.type = NODE_TYPE.SECONDARY;
|
2026-03-03 15:39:54 +08:00
|
|
|
} else if (isSuperior && !isSubord) {// 有上级ID但未找到下级
|
|
|
|
|
obj.type = NODE_TYPE.OUTPUT;
|
|
|
|
|
} else {// 其他情况-有上级ID未找到上级
|
|
|
|
|
obj.type = NODE_TYPE.INPUT;
|
2026-02-27 11:43:27 +08:00
|
|
|
}
|
|
|
|
|
return obj
|
|
|
|
|
})
|
|
|
|
|
})
|
2026-02-26 11:45:32 +08:00
|
|
|
|
|
|
|
|
this.edges = computed(() => {
|
|
|
|
|
const arr = []
|
|
|
|
|
this.nodes.value.forEach((node, index) => {
|
2026-03-03 15:39:54 +08:00
|
|
|
// if (index < this.nodes.value.length - 1) {
|
|
|
|
|
// const source = node.id
|
|
|
|
|
// const target = this.nodes.value[index + 1].id
|
|
|
|
|
// arr.push({
|
|
|
|
|
// id: `el-${source}-${target}`,
|
|
|
|
|
// source: source,
|
|
|
|
|
// target: target,
|
|
|
|
|
// selectable: false,
|
|
|
|
|
// type: 'default'
|
|
|
|
|
// })
|
|
|
|
|
// }
|
|
|
|
|
const superiorID = node.data.superiorID;
|
|
|
|
|
const isSuperior = this.nodes.value.some((v) => v.id === superiorID)
|
|
|
|
|
if (superiorID && isSuperior) {
|
|
|
|
|
const source = node.data.superiorID
|
|
|
|
|
const target = node.id
|
2026-02-26 11:45:32 +08:00
|
|
|
arr.push({
|
2026-03-03 15:39:54 +08:00
|
|
|
id: `el-${source}-${target}`,
|
|
|
|
|
source: source,
|
2026-02-26 11:45:32 +08:00
|
|
|
target: target,
|
2026-03-02 16:24:32 +08:00
|
|
|
selectable: false,
|
2026-03-02 13:51:14 +08:00
|
|
|
type: 'default'
|
2026-02-26 11:45:32 +08:00
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
return arr
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
2026-02-27 14:58:36 +08:00
|
|
|
/** 添加节点 */
|
|
|
|
|
addNode(node: NodesItem) {
|
|
|
|
|
this.nodes.value.push(node)
|
|
|
|
|
}
|
|
|
|
|
/** 删除节点 */
|
|
|
|
|
deleteNode(id: string) {
|
|
|
|
|
this.nodes.value = this.nodes.value.filter((node: NodesItem) => node.id !== id)
|
|
|
|
|
}
|
2026-03-03 16:16:30 +08:00
|
|
|
/** 获取节点 */
|
|
|
|
|
getNodeById(id: string) {
|
|
|
|
|
return this.nodes.value.find((node: NodesItem) => node.id === id)
|
|
|
|
|
}
|
|
|
|
|
/** 获取下级节点 */
|
|
|
|
|
getSubordNodeByID(id: string) {
|
|
|
|
|
return this.nodes.value.find((node: NodesItem) => node.data.superiorID === id)
|
|
|
|
|
}
|
2026-02-27 11:43:27 +08:00
|
|
|
getLastNode() {
|
|
|
|
|
return this.nodes.value[this.nodes.value.length - 1]
|
|
|
|
|
}
|
2026-02-26 11:45:32 +08:00
|
|
|
}
|