vue-wiring-diagram 1.1.19 → 1.1.21

package/packages/components/text-control/index.vue

@@ -6,7 +6,7 @@
     <div class="control">
         <el-collapse v-model="activeName" accordion>
             <el-collapse-item title="文本内容" name="0" v-if="payload.data.type === 'text'">
-                <el-input ref="inputRef" type="textarea" v-model="text" @input="changeContent" @focus="setFocus"
+                <el-input ref="inputRef" type="textarea" v-model="text" @input="changeContent" @blur="leaveInput"
                           :rows="10"></el-input>
                 <el-alert type="info" title="提示"
                           description="请先选择设备，再选择字段，最后点击确定按钮，即可绑定设备数据。绑定完成后会由 $<> 进行包裹！"
@@ -158,7 +158,7 @@
 </template>
 
 <script setup>
-import {onMounted, reactive, ref,} from "vue";
+import {nextTick, onMounted, reactive, ref,} from "vue";
 import {DeleteFilled} from '@element-plus/icons-vue'
 import {getFieldList, showPorts} from "../common.js";
 import {ElMessageBox} from "element-plus";
@@ -228,7 +228,13 @@ const checkField = (row) => {
     }).then(() => {
         const unit = row.unit ?? ''
         const content = props.payload.data.content
-        props.payload.data.content = text.value = content + '${' + currentDevice.deviceName + '.' + row.name + '}' + unit
+        console.log(cursorPosition.value)
+        if (cursorPosition.value) {
+            // 在记录的光标位置后面添加字段
+            props.payload.data.content = text.value = content.slice(0, cursorPosition.value) + '${' + currentDevice.deviceName + '.' + row.name + '}' + unit + content.slice(cursorPosition.value)
+        } else {
+            props.payload.data.content = text.value = content + '${' + currentDevice.deviceName + '.' + row.name + '}' + unit
+        }
         // 查找所有${}
         const matches = content.match(defaultMatch)
         const index = matches?.length || 0
@@ -237,8 +243,10 @@ const checkField = (row) => {
             deviceName: currentDevice.deviceName,
             deviceCode: currentDevice.deviceCode,
             field: row.dataField,
+            fieldName: row.name,
         })
         props.payload.label = replace(props.payload.data.content)
+        console.log(props.payload.data.content, props.payload.data.fields)
     })
 }
 
@@ -271,42 +279,83 @@ const changeText = () => {
 }
 
 const inputRef = ref(null)
+const forbiddenRegex = /[\$\{|\}]/g;
 
 /**
  * 编辑内容
  */
-const changeContent = () => {
-    //判断字符串是否进行了删除操作
-    if (props.payload.data.content.length > text.value.length) {
-        // 判断是否删除的是}
-        if (props.payload.data.content.endsWith('}')) {
-            // 找出所有的${}
-            const matches = props.payload.data.content.match(defaultMatch)
-            if (matches) {
-                const index = matches.length - 1
-                // 删除数组中最后一个元素
-                props.payload.data.fields.splice(index, 1)
-                // 删除字符串中最后一个${}
-                text.value = props.payload.data.content.substring(0, props.payload.data.content.lastIndexOf('${'))
-            }
+const changeContent = (currentValue) => {
+    if (forbiddenRegex.test(currentValue)) {
+        text.value = text.value.slice(0, -1)
+    }
+    const content = props.payload.data.content
+
+    if (currentValue.length < content.length) {
+        const {deleted, start, end} = getDeletedSubstring(content, currentValue);
+        if (deleted === '}') {
+            // 找到前面的"${" 删除
+            const startIndex = content.lastIndexOf('${', start)
+            const deleteContent = content.substring(startIndex, start) + '}'
+            text.value = content.replace(deleteContent, '')
+            // 字符串去掉'${'和'}'
+            const matchedContent = deleteContent.replace(/[${}]/g, '')
+            props.payload.data.fields = props.payload.data.fields.filter(item => {
+                return item.deviceName + '.' + item.fieldName !== matchedContent
+            })
         }
     }
-    props.payload.data.content = text.value
-    props.payload.label = replace(text.value)
+
+    // 正常更新
+    props.payload.data.content = text.value;
+    props.payload.label = replace(text.value);
+    console.log(props.payload.data.content, props.payload.data.fields);
 }
 
-/**
- * 设置焦点
- */
-const setFocus = () => {
-    if (inputRef.value) {
-        const inputElement = inputRef.value.$refs.textarea; // 获取原生输入元素
-        inputElement.focus();
-        const length = text.value.length;
-        inputElement.setSelectionRange(length, length);
+const getDeletedSubstring = (oldStr, newStr) => {
+    let i = 0;
+    let j = 0;
+
+    // 找到第一个不相同的字符位置
+    while (i < oldStr.length && j < newStr.length && oldStr[i] === newStr[j]) {
+        i++;
+        j++;
+    }
+
+    // 如果新字符串已经结束，则后续都是被删除的内容
+    if (j === newStr.length && i < oldStr.length) {
+        return {
+            deleted: oldStr.slice(i),
+            start: i,
+            end: oldStr.length
+        };
+    }
+
+    // 向后尝试匹配剩余部分，找到最短删除范围
+    let k = oldStr.length - 1;
+    let l = newStr.length - 1;
+
+    while (k > i && l > j && oldStr[k] === newStr[l]) {
+        k--;
+        l--;
     }
+
+    const deleted = oldStr.slice(i, k);
+    return {
+        deleted,
+        start: i,
+        end: k
+    };
 }
 
+// 记录光标位置
+const cursorPosition = ref(null)
+
+const leaveInput = () => {
+    const inputElement = inputRef.value?.$refs.textarea;
+    cursorPosition.value = inputElement.selectionStart;
+}
+
+
 const ports = ref([]) // 连接桩数据
 
 /**
@@ -373,11 +422,32 @@ const deletePort = (id) => {
 onMounted(() => {
     getPorts()
     getDevices()
-    document.addEventListener('selectionchange', () => {
-        // 判断是否在输入框内
-        if (document.activeElement.tagName === 'TEXTAREA') {
-            setFocus()
-        }
+
+    nextTick(() => {
+        document.addEventListener('selectionchange', () => {
+            if (!inputRef.value) {
+                return false;
+            }
+            const inputElement = inputRef.value?.$refs.textarea;
+            const cursorPosition = inputElement.selectionStart;
+            const content = text.value;
+            const regex = /\$\{.*?\}/g;
+            let match;
+
+            while ((match = regex.exec(content)) !== null) {
+                const start = match.index;
+                const end = regex.lastIndex;
+
+                if (cursorPosition > start && cursorPosition < end) {
+                    console.log('光标位于字段:', match[0]);
+                    // 设置光标到往后的第一个}符号后面
+                    inputElement.setSelectionRange(end, end);
+                    return true; // 光标在 ${...} 内
+                }
+            }
+            console.log('光标不在任何字段内');
+            return false;
+        })
     })
 })
 </script>

package/packages/components/tools.js

@@ -228,7 +228,7 @@ export const setMathRandom = () => {
 export const defaultText = '--'
 
 // 默认匹配字符串
-export const defaultMatch = /\$\{(.*?)\}/g
+export const defaultMatch = /\$\{([^}]+)\}/g
 
 // 默认条件管道单个配置
 export const defaultPipeCondition = {