feat: 节点缩小和定位

src/utils/flow.js

@@ -172,6 +172,22 @@ export const newEdge = (nodeId) => {
   })
 }
 
+export const initNodeZoom = (modelId, nodeZoom, className, init=false) => {
+  const nodes = document.getElementsByClassName(modelId)
+  if (nodes.length > 0) {
+    const node = nodes[0]
+    const parent = node.closest(className);
+    if (nodeZoom) {
+      parent.style.width = '680px'
+    } else {
+      parent.style.width = '300px'
+    }
+    if (!init) {
+      addNewEdge(modelId)
+    }
+  }
+}
+
 export const getInputNumber = (nodeId) => {
     const data = lf.getGraphData();
     let flag = false

src/views/flow/index.vue

@@ -572,6 +572,7 @@ const handleTreeNodeClick = (node) => {
   lf.focusOn({
     id: node.id
   })
+  lf.selectElementById(node.id)
 }
 
 const fitView = () => {

src/views/flow/nodes/common/serviceNode.vue

@@ -210,8 +210,8 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted } from "vue";
+import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
-import { getInput, addNewEdge } from "@/utils/flow";
+import { getInput, initNodeZoom } from "@/utils/flow";
 import { useFlowStore } from "@/store/modules/flow";
 import { Plus } from "@element-plus/icons-vue";
 import NodeTitle from "../../components/NodeTitle.vue";
@@ -283,6 +283,7 @@ const setNodeProperties = async () => {
       lf.setProperties(props.model.id, {
         ...properties,
         ...data,
+        zoom: nodeZoom.value
       });
       emits("contentChange");
     }
@@ -363,20 +364,10 @@ const deleteTopLevelItem = (fullPath) => {
   emits("contentChange");
 };
 
-const nodeZoom = ref(true)
+const nodeZoom = ref(props?.properties?.zoom ?? true)
 const zoom = (flag) => {
   nodeZoom.value = flag
-  const nodes = document.getElementsByClassName(props.model.id)
+  initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
-  if (nodes.length > 0) {
-    const node = nodes[0]
-    const parent = node.closest('.node__box');
-    if (nodeZoom.value) {
-      parent.style.width = '680px'
-    } else {
-      parent.style.width = '300px'
-    }
-    addNewEdge(props.model.id)
-  }
 }
 
 watch(
@@ -388,6 +379,10 @@ watch(
       if (option) {
         quoteOptions.value = option;
       }
+
+      nextTick(() => {
+        initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
+      })
     }
     if (
       props.properties.outputParams &&

src/views/flow/nodes/common/startNode.vue

@@ -77,10 +77,10 @@
 </template>
 
 <script setup>
-import { watch, reactive, toRaw, ref, onMounted, onUnmounted } from "vue";
+import { watch, reactive, toRaw, ref, onMounted, onUnmounted, nextTick } from "vue";
 import { Plus, ZoomOut, ZoomIn } from "@element-plus/icons-vue";
 import { useFlowStore } from "@/store/modules/flow";
-import { addNewEdge } from "@/utils/flow";
+import { initNodeZoom } from "@/utils/flow";
 import NodeState from "../../components/NodeState.vue";
 import "vue3-json-viewer/dist/index.css";
 import { emitter } from "@/utils/eventBus";
@@ -130,6 +130,7 @@ const setNodeProperties = async () => {
       lf.setProperties(props.model.id, {
         ...props.properties,
         ...data,
+        zoom: nodeZoom.value
       });
       emits("contentChange");
     }
@@ -147,6 +148,9 @@ watch(
   () => {
     if (props.properties.inputParams && props.properties.inputParams.length > 0) {
       formData.inputParams = props.properties.inputParams;
+      nextTick(() => {
+        initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
+      })
     }
   },
   {
@@ -218,20 +222,10 @@ const validateForm = async () => {
   }
 };
 
-const nodeZoom = ref(true)
+const nodeZoom = ref(props?.properties?.zoom ?? true)
 const zoom = () => {
   nodeZoom.value = !nodeZoom.value
-  const nodes = document.getElementsByClassName(props.model.id)
+  initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
-  if (nodes.length > 0) {
-    const node = nodes[0]
-    const parent = node.closest('.node__box');
-    if (nodeZoom.value) {
-      parent.style.width = '680px'
-    } else {
-      parent.style.width = '300px'
-    }
-    addNewEdge(props.model.id)
-  }
 }
 
 onUnmounted(() => {

src/views/flow/nodes/function/sleep.vue

@@ -136,8 +136,8 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted } from "vue";
+import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
-import { getInput, addNewEdge } from "@/utils/flow";
+import { getInput, initNodeZoom } from "@/utils/flow";
 import { useFlowStore } from "@/store/modules/flow";
 import { Plus } from "@element-plus/icons-vue";
 import NodeTitle from "../../components/NodeTitle.vue";
@@ -185,6 +185,7 @@ const setNodeProperties = async () => {
       lf.setProperties(props.model.id, {
         ...properties,
         ...data,
+        zoom: nodeZoom.value
       });
       emits("contentChange");
     }
@@ -230,20 +231,10 @@ const addFormItem = () => {
   emits("contentChange");
 };
 
-const nodeZoom = ref(true)
+const nodeZoom = ref(props?.properties?.zoom ?? true)
 const zoom = (flag) => {
   nodeZoom.value = flag
-  const nodes = document.getElementsByClassName(props.model.id)
+  initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
-  if (nodes.length > 0) {
-    const node = nodes[0]
-    const parent = node.closest('.node__box');
-    if (nodeZoom.value) {
-      parent.style.width = '680px'
-    } else {
-      parent.style.width = '300px'
-    }
-    addNewEdge(props.model.id)
-  }
 }
 
 watch(
@@ -255,6 +246,9 @@ watch(
       if (option) {
         quoteOptions.value = option;
       }
+      nextTick(() => {
+        initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
+      })
     }
   },
   {