111

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

@@ -1,17 +1,11 @@
 <template>
 	<!-- 结果图片 -->
-	<div
-		class="text"
-		:class="{ edit }"
-		@click="onClick"
-		@mousedown="onMouseDown"
-		@dblclick="onDoubleClick"
-	>
+	<div class="text" @mousedown="onMouseDown">
 		<div
 			tabindex="0"
 			class="input"
 			ref="inputRef"
-			:contenteditable="edit"
+			:contenteditable="active"
 			@input="onInput"
 			@blur="onBlur"
 			@paste.prevent
@@ -20,8 +14,12 @@
 </template>
 
 <script setup lang="ts">
-	import { reactive, ref, onMounted, nextTick } from 'vue'
+	import { reactive, ref, onMounted, nextTick, watch } from 'vue'
 	const props = defineProps({
+		active: {
+			type: Boolean,
+			default: false
+		},
 		data: {
 			type: Object,
 			default: () => ({})
@@ -31,7 +29,6 @@
 	const data = reactive({
 		text: props.data?.text || '点击编辑文本'
 	})
-	const edit = ref(false)
 	const time = ref(null)
 	const inputRef = ref<any>()
 	const onInput = () => {
@@ -39,27 +36,26 @@
 		data.text = text
 		emit('update-data', data)
 	}
-	const onBlur = () => {
-		edit.value = false
-	}
-	const onClick = () => {
-		if (edit.value) return
-		edit.value = true
-		nextTick(() => {
-			// 光标定位到文本末尾
-			const range = document.createRange()
-			const selection = window.getSelection()
-			range.selectNodeContents(inputRef.value)
-			range.collapse(false)
-			selection.removeAllRanges()
-			selection.addRange(range)
-		})
-	}
-	const onDoubleClick = () => {
-		clearTimeout(time.value)
-	}
+	// watch(
+	// 	() => props.active,
+	// 	(newVal) => {
+	// 		if (!newVal) return
+	// 		nextTick(() => {
+	// 			// 光标定位到文本末尾
+	// 			const range = document.createRange()
+	// 			const selection = window.getSelection()
+	// 			range.selectNodeContents(inputRef.value)
+	// 			range.collapse(false)
+	// 			selection.removeAllRanges()
+	// 			selection.addRange(range)
+	// 		})
+	// 	}
+	// )
 	const onMouseDown = (e: MouseEvent) => {
-		if (edit.value) e.stopPropagation()
+		if (props.active) e.stopPropagation()
+	}
+	const onBlur = () => {
+		// emit('update-data', data)
 	}
 	onMounted(() => {
 		inputRef.value.innerHTML = data.text
@@ -73,7 +69,7 @@
 		user-select: none;
 		border: 1px solid transparent;
 		padding: 2px;
-		&.edit {
+		&.active {
 			border-color: #000;
 			> .input {
 				cursor: text;