From 5ec768f4edae8c49ad067a482cdfb29d2460aea8 Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Thu, 5 Mar 2026 10:27:41 +0800
Subject: [PATCH] fix
---
.../components/nodes/cards/index.vue | 13 ++++++++-
.../Canvas/FlowCanvas/flow-canvas.vue | 8 ++---
.../Canvas/FlowCanvas/manager/NodeManager.ts | 3 +-
.../Canvas/FlowCanvas/manager/StateManager.ts | 29 ++++++++++++++-----
4 files changed, 40 insertions(+), 13 deletions(-)
diff --git a/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue b/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue
index 46c8ac4..da2a847 100644
--- a/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue
+++ b/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue
@@ -9,6 +9,9 @@
size-unit="px"
/>
{{ currentComponent?.title }}
+
+
+
@@ -125,6 +128,10 @@
'https://s3-alpha-sig.figma.com/img/8ce2/f1a4/12b93da90e5f17109e7430f14837fd14?Expires=1773619200&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=kmLsTFtXJqfvuxj6husWlDkRDMOIRDjzUUjb7zh79GkBKihUHc0f59k5OAImHTPdaiEREUCCpn~8sQ-si5lenuauJpApCmAU~NsxjfQhuh9m5O~GiHenr2fKu0DIJ75-oCE3859fyxoSFXQgZ9PRmeb98kikMR6uRX9nI5TPUHgKO8ZgkhDBTW~iyaDT~1ybnoK7elPa6T2VzfO-bpIyY-MZ71VRq3RxwmZRxduqHEb3Dh-jjrHyh2SoQsHmUjSJOf-uYilfvpGUResZAjAq8ZVLEjvhzKC2bmCNZIp3RmhYO8ctU7pd5t91J6Xaa6jBLtGfMxbqIm652EC79K0RoA__'
}
}
+ //删除功能卡片
+ const onDeleteClick = ()=>{
+ stateManager.deleteNode(attrs.node.id)
+ }
onMounted(() => {
for (const key in props.data) {
if (componentRef.value?.data?.hasOwnProperty(key)) {
@@ -150,9 +157,13 @@
background: #ff7a51;
display: flex;
align-items: center;
- padding-left: 16px;
+ padding: 0 16px;
position: relative;
user-select: none;
+ > .delete-icon{
+ margin-left: auto;
+ cursor: pointer;
+ }
> .c-svg {
width: auto;
height: auto;
diff --git a/src/components/Canvas/FlowCanvas/flow-canvas.vue b/src/components/Canvas/FlowCanvas/flow-canvas.vue
index 17f5b98..a7b26ed 100644
--- a/src/components/Canvas/FlowCanvas/flow-canvas.vue
+++ b/src/components/Canvas/FlowCanvas/flow-canvas.vue
@@ -146,19 +146,19 @@
}
/** 节点zIndex设置最大 */
const bringToFont = (id) => {
- // nodeManager.bringToFont(id)
+ stateManager.bringToFont(id)
}
/** 节点zIndex设置最小 */
const sendToBack = (id) => {
- // nodeManager.sendToBack(id)
+ stateManager.sendToBack(id)
}
/** 水平翻转 */
const flipHorizontal = (id) => {
- // nodeManager.flipHorizontal(id)
+ stateManager.setNodeFlip(id,'X')
}
/** 垂直翻转 */
const flipVertical = (id) => {
- // nodeManager.flipVertical(id)
+ stateManager.setNodeFlip(id,'Y')
}
// 导出流程
diff --git a/src/components/Canvas/FlowCanvas/manager/NodeManager.ts b/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
index 637cfd7..6efeff0 100644
--- a/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
+++ b/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
@@ -42,6 +42,7 @@ export class NodeManager {
})
const data = options?.data || {}
data['component'] = options.component
+ data['scale'] = options?.data?.scale || {x:1,y:1}
const options_ = {
id,
position,
@@ -114,7 +115,7 @@ export class NodeManager {
y: node.position.y + (flowNode?.dimensions?.height || 0) + 50,
}
}
+ delete node_.data?.superiorID
this.stateManager.addNode(node_)
- // return this.createNode(options_)
}
}
diff --git a/src/components/Canvas/FlowCanvas/manager/StateManager.ts b/src/components/Canvas/FlowCanvas/manager/StateManager.ts
index 8cbb95b..b1b8b75 100644
--- a/src/components/Canvas/FlowCanvas/manager/StateManager.ts
+++ b/src/components/Canvas/FlowCanvas/manager/StateManager.ts
@@ -6,7 +6,7 @@ export interface NodesItem {
type: string
class: string
position: { x: number, y: number }
- data: { component: any, type: string, superiorID?: string }
+ data: { component: any, type: string, superiorID?: string, scale: { x: number, y: number } }
}
export class StateManager {
vueFlow: any
@@ -127,12 +127,27 @@ export class StateManager {
setNodesDraggable(v: boolean) { this.nodesDraggable.value = v }
/** 设置是否可以平移画布 */
setPanOnDrag(v: boolean) { this.panOnDrag.value = v }
- /** 获取节点最大zIndex值 */
- getMaxZIndex() {
- return this.nodes.value.reduce((max, node) => Math.max(max, node.zIndex), 0)
+ /** 设置节点层级至最顶部 */
+ bringToFont(id) {
+ const fromIndex = this.nodes.value.findIndex(item => item.id === id)
+ if (fromIndex === -1) return console.warn(`没有找到指定id:${id}`)
+ this.nodes.value.splice(this.nodes.value.length - 1, 0, ...this.nodes.value.splice(fromIndex, 1))
}
- /** 获取节点最小zIndex值 */
- getMinZIndex() {
- return this.nodes.value.reduce((min, node) => Math.min(min, node.zIndex), 0)
+ /** 设置节点层级至最低部 */
+ sendToBack(id) {
+ const fromIndex = this.nodes.value.findIndex(item => item.id === id)
+ if (fromIndex === -1) return console.warn(`没有找到指定id:${id}`)
+ this.nodes.value.splice(0, 0, ...this.nodes.value.splice(fromIndex, 1))
+ }
+ /** 设置水平或者垂直翻转 */
+ setNodeFlip(id,direction) {
+ const node = this.getNodeById(id)
+ if (!node) return console.warn(`没有找到指定id:${id}`)
+ if (direction === 'X') {
+ node.data.scale.x = -node.data.scale.x
+ } else if (direction === 'Y') {
+ node.data.scale.y = -node.data.scale.y
+ }
+ console.log(node,direction)
}
}