@inspirer-dev/crm-dashboard 1.0.66 → 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/admin/src/components/StepFlowBuilder/nodes/EntryNode.tsx

@@ -37,6 +37,7 @@ const EntryNode: React.FC<NodeProps<FlowNodeData>> = ({ selected }) => {
         style={{
           width: NODE_DIMENSIONS.width,
           height: NODE_DIMENSIONS.height,
+          boxSizing: 'border-box',
           background: colors.background,
           borderRadius: 12,
           border: getBorderStyle(),

package/admin/src/components/StepFlowBuilder/utils.ts

@@ -26,15 +26,15 @@ export const stepsToFlow = (
   const nodes: FlowNode[] = [];
   const edges: FlowEdge[] = [];
 
-  const firstStep = steps.length > 0
-    ? [...steps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))[0]
-    : null;
-  const hasPositions = firstStep != null && firstStep.positionX != null;
+  const entryStep = steps.find((s) => s.stepKey === ENTRY_NODE_ID);
+  const entryPosition = entryStep?.positionX != null && entryStep?.positionY != null
+    ? { x: entryStep.positionX, y: entryStep.positionY }
+    : { x: 250, y: 0 };
 
   const entryNode: FlowNode = {
     id: ENTRY_NODE_ID,
     type: 'entry',
-    position: { x: 250, y: 0 },
+    position: entryPosition,
     data: {
       stepType: 'entry',
       name: 'Entry',
@@ -44,7 +44,13 @@ export const stepsToFlow = (
   };
   nodes.push(entryNode);
 
-  const sortedSteps = [...steps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  const nonEntrySteps = steps.filter((s) => s.stepKey !== ENTRY_NODE_ID);
+  const firstStep = nonEntrySteps.length > 0
+    ? [...nonEntrySteps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))[0]
+    : null;
+  const hasPositions = firstStep != null && firstStep.positionX != null;
+
+  const sortedSteps = [...nonEntrySteps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
 
   sortedSteps.forEach((step, index) => {
     const node: FlowNode = {
@@ -111,13 +117,27 @@ export const stepsToFlow = (
 };
 
 export const flowToSteps = (nodes: FlowNode[], edges: FlowEdge[]): FlowStep[] => {
+  const entryNode = nodes.find((n) => n.id === ENTRY_NODE_ID);
   const stepNodes = nodes.filter((n) => n.data.stepType !== 'entry');
   const nodePositions = new Map(nodes.map((n) => [n.id, n.position.y]));
   const sorted = [...stepNodes].sort(
     (a, b) => (nodePositions.get(a.id) ?? 0) - (nodePositions.get(b.id) ?? 0)
   );
 
-  return sorted.map((node, index) => {
+  const steps: FlowStep[] = [];
+
+  if (entryNode) {
+    steps.push({
+      stepKey: ENTRY_NODE_ID,
+      name: 'Entry',
+      stepType: 'entry' as any,
+      order: -1,
+      positionX: Math.round(entryNode.position.x),
+      positionY: Math.round(entryNode.position.y),
+    });
+  }
+
+  sorted.forEach((node, index) => {
     const step: FlowStep = {
       stepKey: node.id,
       name: node.data.name,
@@ -139,8 +159,10 @@ export const flowToSteps = (nodes: FlowNode[], edges: FlowEdge[]): FlowStep[] =>
       step.nextStep = outEdges[0]?.target;
     }
 
-    return step;
+    steps.push(step);
   });
+
+  return steps;
 };
 
 export const applyAutoLayout = (nodes: FlowNode[], edges: FlowEdge[]): FlowNode[] => {

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

@@ -151,12 +151,12 @@ const parseValue = (value) => {
 const stepsToFlow = (steps) => {
   const nodes = [];
   const edges = [];
-  const firstStep = steps.length > 0 ? [...steps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))[0] : null;
-  const hasPositions = firstStep != null && firstStep.positionX != null;
+  const entryStep = steps.find((s) => s.stepKey === ENTRY_NODE_ID);
+  const entryPosition = entryStep?.positionX != null && entryStep?.positionY != null ? { x: entryStep.positionX, y: entryStep.positionY } : { x: 250, y: 0 };
   const entryNode = {
     id: ENTRY_NODE_ID,
     type: "entry",
-    position: { x: 250, y: 0 },
+    position: entryPosition,
     data: {
       stepType: "entry",
       name: "Entry",
@@ -165,7 +165,10 @@ const stepsToFlow = (steps) => {
     deletable: false
   };
   nodes.push(entryNode);
-  const sortedSteps = [...steps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  const nonEntrySteps = steps.filter((s) => s.stepKey !== ENTRY_NODE_ID);
+  const firstStep = nonEntrySteps.length > 0 ? [...nonEntrySteps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))[0] : null;
+  const hasPositions = firstStep != null && firstStep.positionX != null;
+  const sortedSteps = [...nonEntrySteps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
   sortedSteps.forEach((step, index) => {
     const node = {
       id: step.stepKey,
@@ -225,12 +228,24 @@ const stepsToFlow = (steps) => {
   return { nodes, edges };
 };
 const flowToSteps = (nodes, edges) => {
+  const entryNode = nodes.find((n) => n.id === ENTRY_NODE_ID);
   const stepNodes = nodes.filter((n) => n.data.stepType !== "entry");
   const nodePositions = new Map(nodes.map((n) => [n.id, n.position.y]));
   const sorted = [...stepNodes].sort(
     (a, b) => (nodePositions.get(a.id) ?? 0) - (nodePositions.get(b.id) ?? 0)
   );
-  return sorted.map((node, index) => {
+  const steps = [];
+  if (entryNode) {
+    steps.push({
+      stepKey: ENTRY_NODE_ID,
+      name: "Entry",
+      stepType: "entry",
+      order: -1,
+      positionX: Math.round(entryNode.position.x),
+      positionY: Math.round(entryNode.position.y)
+    });
+  }
+  sorted.forEach((node, index) => {
     const step = {
       stepKey: node.id,
       name: node.data.name,
@@ -249,8 +264,9 @@ const flowToSteps = (nodes, edges) => {
     } else {
       step.nextStep = outEdges[0]?.target;
     }
-    return step;
+    steps.push(step);
   });
+  return steps;
 };
 const applyAutoLayout = (nodes, edges) => {
   const g = new dagre__default.default.graphlib.Graph();
@@ -364,6 +380,7 @@ const EntryNode = ({ selected }) => {
         style: {
           width: NODE_DIMENSIONS.width,
           height: NODE_DIMENSIONS.height,
+          boxSizing: "border-box",
           background: colors.background,
           borderRadius: 12,
           border: getBorderStyle(),
@@ -3456,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]);
@@ -3625,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-paSmi6BE.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";
@@ -146,12 +146,12 @@ const parseValue = (value) => {
 const stepsToFlow = (steps) => {
   const nodes = [];
   const edges = [];
-  const firstStep = steps.length > 0 ? [...steps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))[0] : null;
-  const hasPositions = firstStep != null && firstStep.positionX != null;
+  const entryStep = steps.find((s) => s.stepKey === ENTRY_NODE_ID);
+  const entryPosition = entryStep?.positionX != null && entryStep?.positionY != null ? { x: entryStep.positionX, y: entryStep.positionY } : { x: 250, y: 0 };
   const entryNode = {
     id: ENTRY_NODE_ID,
     type: "entry",
-    position: { x: 250, y: 0 },
+    position: entryPosition,
     data: {
       stepType: "entry",
       name: "Entry",
@@ -160,7 +160,10 @@ const stepsToFlow = (steps) => {
     deletable: false
   };
   nodes.push(entryNode);
-  const sortedSteps = [...steps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  const nonEntrySteps = steps.filter((s) => s.stepKey !== ENTRY_NODE_ID);
+  const firstStep = nonEntrySteps.length > 0 ? [...nonEntrySteps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))[0] : null;
+  const hasPositions = firstStep != null && firstStep.positionX != null;
+  const sortedSteps = [...nonEntrySteps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
   sortedSteps.forEach((step, index) => {
     const node = {
       id: step.stepKey,
@@ -220,12 +223,24 @@ const stepsToFlow = (steps) => {
   return { nodes, edges };
 };
 const flowToSteps = (nodes, edges) => {
+  const entryNode = nodes.find((n) => n.id === ENTRY_NODE_ID);
   const stepNodes = nodes.filter((n) => n.data.stepType !== "entry");
   const nodePositions = new Map(nodes.map((n) => [n.id, n.position.y]));
   const sorted = [...stepNodes].sort(
     (a, b) => (nodePositions.get(a.id) ?? 0) - (nodePositions.get(b.id) ?? 0)
   );
-  return sorted.map((node, index) => {
+  const steps = [];
+  if (entryNode) {
+    steps.push({
+      stepKey: ENTRY_NODE_ID,
+      name: "Entry",
+      stepType: "entry",
+      order: -1,
+      positionX: Math.round(entryNode.position.x),
+      positionY: Math.round(entryNode.position.y)
+    });
+  }
+  sorted.forEach((node, index) => {
     const step = {
       stepKey: node.id,
       name: node.data.name,
@@ -244,8 +259,9 @@ const flowToSteps = (nodes, edges) => {
     } else {
       step.nextStep = outEdges[0]?.target;
     }
-    return step;
+    steps.push(step);
   });
+  return steps;
 };
 const applyAutoLayout = (nodes, edges) => {
   const g = new dagre.graphlib.Graph();
@@ -359,6 +375,7 @@ const EntryNode = ({ selected }) => {
         style: {
           width: NODE_DIMENSIONS.width,
           height: NODE_DIMENSIONS.height,
+          boxSizing: "border-box",
           background: colors.background,
           borderRadius: 12,
           border: getBorderStyle(),
@@ -3451,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]);
@@ -3620,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-PhHmqA3f.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-paSmi6BE.mjs"
+          "../_chunks/index-D6i3MTUb.mjs"
         )
       },
       options: {

package/package.json

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