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) } }