文本节点删除

src/components/Canvas/FlowCanvas/components/nodes/text.vue

@@ -1,5 +1,5 @@
 <template>
-	<!-- 结果图片 -->
+	<!-- 文字节点 -->
 	<div class="text" @mousedown="onMouseDown">
 		<div
 			tabindex="0"
@@ -11,6 +11,9 @@
 			@paste.prevent
 			@keydown.stop
 		></div>
+		<span class="delete" @mousedown.stop @click="emit('delete-node')" v-show="active">
+			<svg-icon name="close" size="7" size-unit="px" />
+		</span>
 	</div>
 </template>
 
@@ -26,7 +29,7 @@
 			default: () => ({})
 		}
 	})
-	const emit = defineEmits(['update-data'])
+	const emit = defineEmits(['update-data', 'delete-node'])
 	const data = reactive({
 		text: props.data?.text || '点击编辑文本'
 	})
@@ -70,6 +73,7 @@
 		user-select: none;
 		border: 1px solid transparent;
 		padding: 2px;
+		position: relative;
 		&.active {
 			border-color: #000;
 			> .input {
@@ -81,5 +85,15 @@
 			min-width: 2px;
 			font-size: 16px;
 		}
+		> .delete {
+			position: absolute;
+			top: 4px;
+			right: 4px;
+			transform: translate(100%, -100%);
+			background-color: #fff;
+			padding: 2px;
+			border-radius: 50%;
+			cursor: pointer;
+		}
 	}
 </style>