aidlab/FiDA_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

画布节点创建删除

Browse Source
This commit is contained in:
´ó¸ç
2026-02-27 11:43:27 +08:00
parent a8a898d2df
commit 10d58fb819
9 changed files with 160 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Canvas/FlowCanvas/manager/FlowManager.ts
View File

@@ -9,14 +9,12 @@ export class FlowManager {
this.stateManager.zoom.value = zoom
this.vueFlow.value.zoomTo(zoom)
}
handleNodeDragStop(e: any) {
const { node } = e
const { id, position } = node
this.stateManager.nodes.value.forEach((item) => {
if (item.id === id) {
item.position.x = position.x
item.position.y = position.y
}
})
getLastNode() {
const lastNode = this.stateManager.getLastNode()
if (lastNode?.id) {
return this.vueFlow.value.getNode(lastNode.id)
}
return null;
}
}

69
src/components/Canvas/FlowCanvas/manager/NodeManager.ts
View File

@@ -1,12 +1,16 @@
import { createId } from '../../tools/tools'
import card from '../components/cards/index.vue'
import resultImage from '../components/result/result-image.vue'
import { NODE_DATATYPE } from '../tools/index.d'
interface NodeOptions {
id?: string
type: "InputNode" | "SecondaryNode"
class?: string
position?: { x: number, y: number }
component: any
positionX?: number
positionY?: number
component?: any
data?: object
}
}// 不可传入type class （内部使用）
export class NodeManager {
stateManager: any
vueFlow: any
@@ -14,23 +18,60 @@ export class NodeManager {
this.stateManager = options.stateManager;
this.vueFlow = options.vueFlow
}
nodes: [
]
/** 删除节点 */
deleteNode(id: string) {
this.stateManager.nodes.value = this.stateManager.nodes.value.filter((node: any) => node.id !== id)
}
/** 创建节点 */
createNode(options: NodeOptions) {
const lastNode = this.stateManager.flowManager.getLastNode();
const id = options.id || createId()
const type = options.type || 'InputNode'
const class_ = options.class || 'custom-node'
const position = options.position || { x: 0, y: 0 }
const positionX = options.positionX || 0
const positionY = options.positionY || 0
const position = options.position ||
!lastNode ? { x: positionX, y: positionY } :
{ x: lastNode.position.x + lastNode.dimensions.width + 50 + positionX, y: lastNode.position.y + positionY }
const data = options.data || {}
data['component'] = options.component
this.stateManager.nodes.value.push({
const options_ = {
id,
type,
class: class_,
position,
data
})
console.log(this.stateManager.nodes.value)
}
this.stateManager.nodes.value.push(options_)
return options_;
}
/** 创建结果节点 */
createResultNode(options?: NodeOptions) {
const options_ = {
component: resultImage,
data: {
type: NODE_DATATYPE.RESULT_IMAGE,
},
...(options ? options : {}),
}
return this.createNode(options_)
}
/** 创建卡片选择节点 */
createCardsSelect(options?: NodeOptions) {
const options_ = {
component: card,
positionY: 50,
data: {
type: NODE_DATATYPE.CARDS_SELECT,
},
...(options ? options : {}),
}
return this.createNode(options_)
}
/** 创建卡片节点 */
createCardNode(options?: NodeOptions) {
const options_ = {
component: card,
...(options ? options : {}),
}
return this.createNode(options_)
}
}

71
src/components/Canvas/FlowCanvas/manager/StateManager.ts
View File

@@ -1,9 +1,9 @@
import { ref, computed } from "vue";
import card from '../components/cards/index.vue'
export class StateManager {
vueFlow: any
nodes: any
nodes_: any
edges: any
zoom: any
// 管理器
@@ -19,55 +19,6 @@ export class StateManager {
constructor(options) {
this.vueFlow = options.vueFlow
this.nodes = ref<any[]>([
// {
// id: '1',
// type: 'InputNode',
// class: 'custom-node start',
// position: { x: 0, y: 0 },
// data: { component: card, type: 'to-real-style' }
// },
// {
// id: '2',
// type: 'SecondaryNode',
// class: 'custom-node',
// position: { x: 0, y: 0 },
// data: { component: card, type: 'scene-composition' }
// },
// {
// id: '3',
// type: 'SecondaryNode',
// class: 'custom-node',
// position: { x: 0, y: 0 },
// data: { component: card, type: 'color-palette' }
// },
// {
// id: '4',
// type: 'SecondaryNode',
// class: 'custom-node',
// position: { x: 0, y: 0 },
// data: { component: card, type: 'to-video' }
// },
// {
// id: '5',
// type: 'SecondaryNode',
// class: 'custom-node',
// position: { x: 0, y: 0 },
// data: { component: card, type: 'to-3d-model' }
// },
// {
// id: '6',
// type: 'SecondaryNode',
// class: 'custom-node',
// position: { x: 0, y: 0 },
// data: { component: card, type: 'to-cad' }
// },
// {
// id: '7',
// type: 'SecondaryNode',
// class: 'custom-node',
// position: { x: 0, y: 0 },
// data: { component: card, type: 'add-print' }
// },
// {
// id: '8',
// type: 'SecondaryNode',
@@ -76,6 +27,21 @@ export class StateManager {
// data: { component: card, type: 'edit-material' }
// }
]);
this.nodes_ = computed(() => {
return this.nodes.value.map((node, index) => {
const obj = {
...node,
}
if (index === 0) {
obj.class = 'custom-node start';
obj.type = 'InputNode';
} else {
obj.class = 'custom-node';
obj.type = 'SecondaryNode';
}
return obj
})
})
this.edges = computed(() => {
const arr = []
@@ -96,6 +62,7 @@ export class StateManager {
this.zoom = ref(1)
}
getLastNode() {
return this.nodes.value[this.nodes.value.length - 1]
}
}