完善菜单功能

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/components/nodes/result-image.vue

@@ -16,7 +16,7 @@
 				<span class="text">Edit</span>
 			</button>
 		</div>
-		<img class="image" :src="data.url" />
+		<img class="image" :src="data.url" :style="{transform: `scale(${data?.scale?.x || 1}, ${data?.scale?.y || 1})`}" />
 		<div class="more" @click="showMenu = !showMenu" @mousedown.stop>
 			<svg-icon name="more" size="24" size-unit="px" color="#C9C9C9" />
 		</div>
@@ -48,12 +48,13 @@
 			default: () => ({})
 		}
 	})
-	const emit = defineEmits(['delete-node', 'copy-node', 'bring-to-font', 'send-to-back', 'flip-horizontal', 'flip-vertical'])
+	const emit = defineEmits(['delete-node', 'copy-node', 'bring-to-font', 'send-to-back', 'update-data'])
 	const attrs = useAttrs()
 	const showHeader = ref(!!attrs.node?.data?.isHeader)
 	const showMenu = ref(false)
 	const data = reactive({
-		url: props.data?.url || ''
+		url: props.data?.url || '',
+		scale: props.data?.scale || { x:1,y:1 }
 	})
 	watch(
 		() => props.data.url,
@@ -73,8 +74,8 @@
 		{ label: 'Bring to font', tip: '', on: () => {} },
 		{ label: 'Send to back', tip: '', on: () => {} },
 		{ isDivide: true },
-		{ label: 'Flip horizontal', tip: '', on: () => {emit('flip-horizontal')} },
-		{ label: 'Flip vertical', tip: '', on: () => {emit('flip-vertical')} }
+		{ label: 'Flip horizontal', tip: '', on: () => {data.scale.x = -data.scale.x; emit('update-data',data)} },
+		{ label: 'Flip vertical', tip: '', on: () => {data.scale.y = -data.scale.y; emit('update-data',data)} }
 	])
 	const onMenuItem = (v) => {
 		if (v.disabled) return

src/components/Canvas/FlowCanvas/flow-canvas.vue

@@ -36,8 +36,6 @@
 						@update-data="(v) => (node.data.data = v)"
 						@bring-to-font="bringToFont(node.id)"
 						@send-to-back="sendToBack(node.id)"
-						@flip-horizontal="flipHorizontal(node.id)"
-						@flip-vertical="flipVertical(node.id)"
 					/>
 				</node>
 			</template>
@@ -147,21 +145,12 @@
 	}
 	/** 节点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)
-	}
-	/** 垂直翻转 */
-	const flipVertical = (id) => {
-		// nodeManager.flipVertical(id)
-	}
-
 	// 导出流程
 	const exportFlow = () => {
 		// flowManager.exportFlow()

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
@@ -113,11 +113,18 @@ 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) }
-	/** 获取节点最小zIndex值 */
-	getMinZIndex() { return this.nodes.value.reduce((min, node) => Math.min(min, 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))
+	}
+	/** 设置节点层级至最低部 */
+	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))
+	}
 	/** 记录状态 */
 	recordState() {
 		if (this.historyIndex.value < this.historyList.value.length - 1) {