@inspirer-dev/crm-dashboard 1.0.67 → 1.0.68

package/admin/src/components/StepFlowBuilder/flow-canvas/FlowCanvas.tsx

@@ -6,6 +6,7 @@ import ReactFlow, {
   useEdgesState,
   useReactFlow,
   useStoreApi,
+  useUpdateNodeInternals,
   addEdge,
   type Connection,
   type OnNodesChange,
@@ -69,6 +70,7 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
   const history = useFlowHistory();
   const { fitView, getViewport, setViewport, setCenter } = useReactFlow();
   const store = useStoreApi();
+  const updateNodeInternals = useUpdateNodeInternals();
 
   const validation = useMemo(() => {
     return validateFlow(nodes as FlowNode[], edges as FlowEdge[]);
@@ -298,14 +300,19 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
       const hasPositions = steps.length > 0 && steps[0].positionX != null;
       const finalNodes = hasPositions ? n : applyAutoLayout(n, e);
       setNodes(finalNodes);
-      setEdges(e);
 
-      setTimeout(() => {
-        fitViewWithOffset();
-      }, 50);
+      requestAnimationFrame(() => {
+        finalNodes.forEach((node) => updateNodeInternals(node.id));
+        requestAnimationFrame(() => {
+          setEdges(e);
+          setTimeout(() => {
+            fitViewWithOffset();
+          }, 50);
+        });
+      });
     }
     isInitialMount.current = false;
-  }, [steps, setNodes, setEdges, fitViewWithOffset]);
+  }, [steps, setNodes, setEdges, fitViewWithOffset, updateNodeInternals]);
 
   const syncToParent = useCallback(() => {
     if (isInitialMount.current) return;

package/dist/_chunks/{index-BOwaSLls.js → index-CzxnKN-q.js}

@@ -3473,6 +3473,7 @@ const FlowCanvas = ({
   const history = useFlowHistory();
   const { fitView, getViewport, setViewport, setCenter } = ReactFlow.useReactFlow();
   const store = ReactFlow.useStoreApi();
+  const updateNodeInternals = ReactFlow.useUpdateNodeInternals();
   const validation = React.useMemo(() => {
     return validateFlow(nodes, edges);
   }, [nodes, edges]);
@@ -3642,13 +3643,18 @@ const FlowCanvas = ({
       const hasPositions = steps.length > 0 && steps[0].positionX != null;
       const finalNodes = hasPositions ? n : applyAutoLayout(n, e);
       setNodes(finalNodes);
-      setEdges(e);
-      setTimeout(() => {
-        fitViewWithOffset();
-      }, 50);
+      requestAnimationFrame(() => {
+        finalNodes.forEach((node) => updateNodeInternals(node.id));
+        requestAnimationFrame(() => {
+          setEdges(e);
+          setTimeout(() => {
+            fitViewWithOffset();
+          }, 50);
+        });
+      });
     }
     isInitialMount.current = false;
-  }, [steps, setNodes, setEdges, fitViewWithOffset]);
+  }, [steps, setNodes, setEdges, fitViewWithOffset, updateNodeInternals]);
   const syncToParent = React.useCallback(() => {
     if (isInitialMount.current) return;
     if (syncTimeoutRef.current) {

package/dist/_chunks/{index-sbrdEB7Z.mjs → index-D6i3MTUb.mjs}

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { createContext, useContext, memo, useState, useEffect, useCallback, useRef, useMemo, forwardRef } from "react";
-import ReactFlow, { Handle, Position, useReactFlow, getSimpleBezierPath, BaseEdge, EdgeLabelRenderer, useNodesState, useEdgesState, useStoreApi, addEdge, Background, MiniMap, ReactFlowProvider } from "reactflow";
+import ReactFlow, { Handle, Position, useReactFlow, getSimpleBezierPath, BaseEdge, EdgeLabelRenderer, useNodesState, useEdgesState, useStoreApi, useUpdateNodeInternals, addEdge, Background, MiniMap, ReactFlowProvider } from "reactflow";
 import "reactflow/dist/style.css";
 import { Flex, Box, Typography, SingleSelect, SingleSelectOption, TextInput, NumberInput, Loader, Tooltip, Field, Badge as Badge$1, Modal } from "@strapi/design-system";
 import { Plus, Trash, Cross, Layout, Pencil } from "@strapi/icons";
@@ -3468,6 +3468,7 @@ const FlowCanvas = ({
   const history = useFlowHistory();
   const { fitView, getViewport, setViewport, setCenter } = useReactFlow();
   const store = useStoreApi();
+  const updateNodeInternals = useUpdateNodeInternals();
   const validation = useMemo(() => {
     return validateFlow(nodes, edges);
   }, [nodes, edges]);
@@ -3637,13 +3638,18 @@ const FlowCanvas = ({
       const hasPositions = steps.length > 0 && steps[0].positionX != null;
       const finalNodes = hasPositions ? n : applyAutoLayout(n, e);
       setNodes(finalNodes);
-      setEdges(e);
-      setTimeout(() => {
-        fitViewWithOffset();
-      }, 50);
+      requestAnimationFrame(() => {
+        finalNodes.forEach((node) => updateNodeInternals(node.id));
+        requestAnimationFrame(() => {
+          setEdges(e);
+          setTimeout(() => {
+            fitViewWithOffset();
+          }, 50);
+        });
+      });
     }
     isInitialMount.current = false;
-  }, [steps, setNodes, setEdges, fitViewWithOffset]);
+  }, [steps, setNodes, setEdges, fitViewWithOffset, updateNodeInternals]);
   const syncToParent = useCallback(() => {
     if (isInitialMount.current) return;
     if (syncTimeoutRef.current) {

package/dist/admin/index.js

@@ -131,7 +131,7 @@ const index = {
       components: {
         Input: async () => Promise.resolve().then(() => require(
           /* webpackChunkName: "crm-step-flow-builder" */
-          "../_chunks/index-BOwaSLls.js"
+          "../_chunks/index-CzxnKN-q.js"
         ))
       },
       options: {

package/dist/admin/index.mjs

@@ -130,7 +130,7 @@ const index = {
       components: {
         Input: async () => import(
           /* webpackChunkName: "crm-step-flow-builder" */
-          "../_chunks/index-sbrdEB7Z.mjs"
+          "../_chunks/index-D6i3MTUb.mjs"
         )
       },
       options: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inspirer-dev/crm-dashboard",
-  "version": "1.0.67",
+  "version": "1.0.68",
   "description": "CRM Dashboard and Tools",
   "strapi": {
     "name": "crm-dashboard",