fix

src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue

@@ -9,6 +9,9 @@
 				size-unit="px"
 			/>
 			<span>{{ currentComponent?.title }}</span>
+			<div class="delete-icon" @click="onDeleteClick">
+				<SvgIcon name="delete" size="16" size-unit="px" color="#fff" />
+			</div>
 		</div>
 		<div class="body" @mousedown.stop>
 			<component :is="currentComponent?.component" ref="componentRef" v-bind="attrs" />
@@ -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;

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')
 	}
 
 	// 导出流程

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

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() {
+	bringToFont(id) {
-		return this.nodes.value.reduce((max, node) => Math.max(max, node.zIndex), 0)
+		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() {
+	sendToBack(id) {
-		return this.nodes.value.reduce((min, node) => Math.min(min, node.zIndex), 0)
+		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)
 	}
 }