fix(web): loop、iteration sub node move bugfix

web/src/views/Workflow/hooks/useWorkflowGraph.ts

@@ -666,6 +666,77 @@ export const useWorkflowGraph = ({
       graphRef.current.resize(containerRef.current.offsetWidth, containerRef.current.offsetHeight);
     }
   };
+  
+  const nodeChangePosition = ({ node, options }: { node: Node; options: { skipParentHandler?: boolean } }) => {
+    const embedPadding = 50; // Define the embed padding constant
+    if (options.skipParentHandler) {
+      return
+    }
+
+    const children = node.getChildren()
+    if (children && children.length) {
+      node.prop('originPosition', node.getPosition())
+    }
+
+    const parent = node.getParent()
+    if (parent && parent.isNode()) {
+      let originSize = parent.prop('originSize')
+      if (originSize == null) {
+        originSize = parent.getSize()
+        parent.prop('originSize', originSize)
+      }
+
+      let originPosition = parent.prop('originPosition')
+      if (originPosition == null) {
+        originPosition = parent.getPosition()
+        parent.prop('originPosition', originPosition)
+      }
+
+      let x = originPosition.x
+      let y = originPosition.y
+      let cornerX = originPosition.x + originSize.width
+      let cornerY = originPosition.y + originSize.height
+      let hasChange = false
+
+      const children = parent.getChildren()
+      if (children) {
+        children.forEach((child) => {
+          const bbox = child.getBBox().inflate(embedPadding)
+          const corner = bbox.getCorner()
+
+          if (bbox.x < x) {
+            x = bbox.x
+            hasChange = true
+          }
+
+          if (bbox.y < y) {
+            y = bbox.y
+            hasChange = true
+          }
+
+          if (corner.x > cornerX) {
+            cornerX = corner.x
+            hasChange = true
+          }
+
+          if (corner.y > cornerY) {
+            cornerY = corner.y
+            hasChange = true
+          }
+        })
+      }
+
+      if (hasChange) {
+        parent.prop(
+          {
+            position: { x, y },
+            size: { width: cornerX - x, height: cornerY - y },
+          },
+          { skipParentHandler: true },
+        )
+      }
+    }
+  }
 
   // 初始化
   const init = () => {
@@ -764,10 +835,7 @@ export const useWorkflowGraph = ({
         },
       },
       embedding: {
-        enabled: true,
-        validate (this) {
-          return false
-        }
+        enabled: false,
       },
       translating: {
         restrict(view) {
@@ -783,6 +851,17 @@ export const useWorkflowGraph = ({
           return null
         },
       },
+      highlighting: {
+        embedding: {
+          name: 'stroke',
+          args: {
+            padding: -1,
+            attrs: {
+              stroke: '#73d13d',
+            },
+          },
+        },
+      },
     });
     // 使用插件
     setupPlugins();
@@ -824,7 +903,8 @@ export const useWorkflowGraph = ({
     // 监听缩放事件
     graphRef.current.on('scale', scaleEvent);
     // 监听节点移动事件
-    graphRef.current.on('node:moved', nodeMoved);
+    // graphRef.current.on('node:moved', nodeMoved);
+    graphRef.current.on('node:change:position', nodeChangePosition);
 
     // 监听画布变化事件
     const events = [