@inspirer-dev/crm-dashboard 1.0.71 → 1.0.72

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

@@ -119,7 +119,7 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
 
   const getClosestEdge = useCallback(
     (node: Node<FlowNodeData>) => {
-      const { nodeInternals } = store.getState();
+      const { nodeInternals, edges: currentEdges } = store.getState();
       const internalNode = nodeInternals.get(node.id);
       if (!internalNode) return null;
 
@@ -155,60 +155,67 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
       const closestData = closestNode.node.data as FlowNodeData;
       const draggedData = node.data;
 
-      const draggedIsBelow = draggedPos.y > closestPos.y;
+      const nonTempEdges = currentEdges.filter((e) => e.className !== 'temp');
 
-      if (draggedIsBelow) {
-        if (closestData.stepType === 'exit') {
-          return null;
-        }
-        if (closestData.stepType === 'branch') {
-          const draggedCenterX = draggedPos.x + NODE_DIMENSIONS.width / 2;
-          const closestCenterX = closestPos.x + NODE_DIMENSIONS.width / 2;
-          const isRight = draggedCenterX >= closestCenterX;
-          const handle = isRight ? 'no' : 'yes';
-          return {
-            id: `${closestNode.node.id}-${node.id}-${handle}`,
-            source: closestNode.node.id,
-            sourceHandle: handle,
-            target: node.id,
-            targetHandle: 'target',
-          };
-        }
+      const isSourceHandleFree = (sourceId: string, handle: string) =>
+        !nonTempEdges.some((e) => e.source === sourceId && e.sourceHandle === handle);
+
+      const isTargetFree = (targetId: string) =>
+        !nonTempEdges.some((e) => e.target === targetId);
+
+      const buildEdge = (
+        sourceId: string,
+        sourceHandle: string,
+        targetId: string
+      ) => {
+        const suffix = sourceHandle !== 'source' ? `-${sourceHandle}` : '';
         return {
-          id: `${closestNode.node.id}-${node.id}`,
-          source: closestNode.node.id,
-          sourceHandle: 'source',
-          target: node.id,
+          id: `${sourceId}-${targetId}${suffix}`,
+          source: sourceId,
+          sourceHandle,
+          target: targetId,
           targetHandle: 'target',
         };
-      } else {
-        if (draggedData.stepType === 'entry') {
-          return null;
-        }
-        if (closestData.stepType === 'entry') {
-          return null;
-        }
-        if (draggedData.stepType === 'branch') {
-          const draggedCenterX = draggedPos.x + NODE_DIMENSIONS.width / 2;
-          const closestCenterX = closestPos.x + NODE_DIMENSIONS.width / 2;
-          const isRight = closestCenterX >= draggedCenterX;
+      };
+
+      const trySourceToTarget = (
+        srcId: string,
+        srcData: FlowNodeData,
+        tgtId: string,
+        tgtData: FlowNodeData
+      ) => {
+        if (srcData.stepType === 'exit') return null;
+        if (tgtData.stepType === 'entry') return null;
+        if (!isTargetFree(tgtId)) return null;
+
+        if (srcData.stepType === 'branch') {
+          const srcPos = srcId === node.id ? draggedPos : closestPos;
+          const tgtPos = srcId === node.id ? closestPos : draggedPos;
+          const srcCenterX = srcPos.x + NODE_DIMENSIONS.width / 2;
+          const tgtCenterX = tgtPos.x + NODE_DIMENSIONS.width / 2;
+          const isRight = tgtCenterX >= srcCenterX;
           const handle = isRight ? 'no' : 'yes';
-          return {
-            id: `${node.id}-${closestNode.node.id}-${handle}`,
-            source: node.id,
-            sourceHandle: handle,
-            target: closestNode.node.id,
-            targetHandle: 'target',
-          };
+          if (!isSourceHandleFree(srcId, handle)) return null;
+          return buildEdge(srcId, handle, tgtId);
         }
-        return {
-          id: `${node.id}-${closestNode.node.id}`,
-          source: node.id,
-          sourceHandle: 'source',
-          target: closestNode.node.id,
-          targetHandle: 'target',
-        };
+
+        if (!isSourceHandleFree(srcId, 'source')) return null;
+        return buildEdge(srcId, 'source', tgtId);
+      };
+
+      const draggedIsBelow = draggedPos.y > closestPos.y;
+      const closestId = closestNode.node.id;
+
+      if (draggedIsBelow) {
+        return (
+          trySourceToTarget(closestId, closestData, node.id, draggedData) ??
+          trySourceToTarget(node.id, draggedData, closestId, closestData)
+        );
       }
+      return (
+        trySourceToTarget(node.id, draggedData, closestId, closestData) ??
+        trySourceToTarget(closestId, closestData, node.id, draggedData)
+      );
     },
     [store]
   );
@@ -239,7 +246,10 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
               ne.source === closeEdge.source &&
               ne.sourceHandle === closeEdge.sourceHandle
           );
-          if (!sourceHandleAlreadyUsed) {
+          const targetAlreadyHasInput = nextEdges.find(
+            (ne) => ne.target === closeEdge.target
+          );
+          if (!sourceHandleAlreadyUsed && !targetAlreadyHasInput) {
             nextEdges.push({
               ...closeEdge,
               className: 'temp',
@@ -280,7 +290,10 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
               ne.source === closeEdge.source &&
               ne.sourceHandle === closeEdge.sourceHandle
           );
-          if (!sourceHandleAlreadyUsed) {
+          const targetAlreadyHasInput = nextEdges.find(
+            (ne) => ne.target === closeEdge.target
+          );
+          if (!sourceHandleAlreadyUsed && !targetAlreadyHasInput) {
             nextEdges.push({
               ...closeEdge,
               type: closeEdge.sourceHandle ? 'labeled' : 'default',

package/dist/_chunks/{index-ruO-ALAX.mjs → index-DPbRPHfu.mjs}

@@ -4109,7 +4109,7 @@ const FlowCanvas = ({
   );
   const getClosestEdge = useCallback(
     (node) => {
-      const { nodeInternals } = store.getState();
+      const { nodeInternals, edges: currentEdges } = store.getState();
       const internalNode = nodeInternals.get(node.id);
       if (!internalNode) return null;
       const draggedPos = internalNode.positionAbsolute || internalNode.position;
@@ -4134,59 +4134,42 @@ const FlowCanvas = ({
       const closestPos = closestNode.node.positionAbsolute || closestNode.node.position;
       const closestData = closestNode.node.data;
       const draggedData = node.data;
-      const draggedIsBelow = draggedPos.y > closestPos.y;
-      if (draggedIsBelow) {
-        if (closestData.stepType === "exit") {
-          return null;
-        }
-        if (closestData.stepType === "branch") {
-          const draggedCenterX = draggedPos.x + NODE_DIMENSIONS.width / 2;
-          const closestCenterX = closestPos.x + NODE_DIMENSIONS.width / 2;
-          const isRight = draggedCenterX >= closestCenterX;
-          const handle = isRight ? "no" : "yes";
-          return {
-            id: `${closestNode.node.id}-${node.id}-${handle}`,
-            source: closestNode.node.id,
-            sourceHandle: handle,
-            target: node.id,
-            targetHandle: "target"
-          };
-        }
+      const nonTempEdges = currentEdges.filter((e) => e.className !== "temp");
+      const isSourceHandleFree = (sourceId, handle) => !nonTempEdges.some((e) => e.source === sourceId && e.sourceHandle === handle);
+      const isTargetFree = (targetId) => !nonTempEdges.some((e) => e.target === targetId);
+      const buildEdge = (sourceId, sourceHandle, targetId) => {
+        const suffix = sourceHandle !== "source" ? `-${sourceHandle}` : "";
         return {
-          id: `${closestNode.node.id}-${node.id}`,
-          source: closestNode.node.id,
-          sourceHandle: "source",
-          target: node.id,
+          id: `${sourceId}-${targetId}${suffix}`,
+          source: sourceId,
+          sourceHandle,
+          target: targetId,
           targetHandle: "target"
         };
-      } else {
-        if (draggedData.stepType === "entry") {
-          return null;
-        }
-        if (closestData.stepType === "entry") {
-          return null;
-        }
-        if (draggedData.stepType === "branch") {
-          const draggedCenterX = draggedPos.x + NODE_DIMENSIONS.width / 2;
-          const closestCenterX = closestPos.x + NODE_DIMENSIONS.width / 2;
-          const isRight = closestCenterX >= draggedCenterX;
+      };
+      const trySourceToTarget = (srcId, srcData, tgtId, tgtData) => {
+        if (srcData.stepType === "exit") return null;
+        if (tgtData.stepType === "entry") return null;
+        if (!isTargetFree(tgtId)) return null;
+        if (srcData.stepType === "branch") {
+          const srcPos = srcId === node.id ? draggedPos : closestPos;
+          const tgtPos = srcId === node.id ? closestPos : draggedPos;
+          const srcCenterX = srcPos.x + NODE_DIMENSIONS.width / 2;
+          const tgtCenterX = tgtPos.x + NODE_DIMENSIONS.width / 2;
+          const isRight = tgtCenterX >= srcCenterX;
           const handle = isRight ? "no" : "yes";
-          return {
-            id: `${node.id}-${closestNode.node.id}-${handle}`,
-            source: node.id,
-            sourceHandle: handle,
-            target: closestNode.node.id,
-            targetHandle: "target"
-          };
+          if (!isSourceHandleFree(srcId, handle)) return null;
+          return buildEdge(srcId, handle, tgtId);
         }
-        return {
-          id: `${node.id}-${closestNode.node.id}`,
-          source: node.id,
-          sourceHandle: "source",
-          target: closestNode.node.id,
-          targetHandle: "target"
-        };
+        if (!isSourceHandleFree(srcId, "source")) return null;
+        return buildEdge(srcId, "source", tgtId);
+      };
+      const draggedIsBelow = draggedPos.y > closestPos.y;
+      const closestId = closestNode.node.id;
+      if (draggedIsBelow) {
+        return trySourceToTarget(closestId, closestData, node.id, draggedData) ?? trySourceToTarget(node.id, draggedData, closestId, closestData);
       }
+      return trySourceToTarget(node.id, draggedData, closestId, closestData) ?? trySourceToTarget(closestId, closestData, node.id, draggedData);
     },
     [store]
   );
@@ -4202,7 +4185,10 @@ const FlowCanvas = ({
           const sourceHandleAlreadyUsed = nextEdges.find(
             (ne) => ne.source === closeEdge.source && ne.sourceHandle === closeEdge.sourceHandle
           );
-          if (!sourceHandleAlreadyUsed) {
+          const targetAlreadyHasInput = nextEdges.find(
+            (ne) => ne.target === closeEdge.target
+          );
+          if (!sourceHandleAlreadyUsed && !targetAlreadyHasInput) {
             nextEdges.push({
               ...closeEdge,
               className: "temp",
@@ -4227,7 +4213,10 @@ const FlowCanvas = ({
           const sourceHandleAlreadyUsed = nextEdges.find(
             (ne) => ne.source === closeEdge.source && ne.sourceHandle === closeEdge.sourceHandle
           );
-          if (!sourceHandleAlreadyUsed) {
+          const targetAlreadyHasInput = nextEdges.find(
+            (ne) => ne.target === closeEdge.target
+          );
+          if (!sourceHandleAlreadyUsed && !targetAlreadyHasInput) {
             nextEdges.push({
               ...closeEdge,
               type: closeEdge.sourceHandle ? "labeled" : "default"

package/dist/_chunks/{index-DThXHml5.js → index-DXq4OgEg.js}

@@ -4114,7 +4114,7 @@ const FlowCanvas = ({
   );
   const getClosestEdge = React.useCallback(
     (node) => {
-      const { nodeInternals } = store.getState();
+      const { nodeInternals, edges: currentEdges } = store.getState();
       const internalNode = nodeInternals.get(node.id);
       if (!internalNode) return null;
       const draggedPos = internalNode.positionAbsolute || internalNode.position;
@@ -4139,59 +4139,42 @@ const FlowCanvas = ({
       const closestPos = closestNode.node.positionAbsolute || closestNode.node.position;
       const closestData = closestNode.node.data;
       const draggedData = node.data;
-      const draggedIsBelow = draggedPos.y > closestPos.y;
-      if (draggedIsBelow) {
-        if (closestData.stepType === "exit") {
-          return null;
-        }
-        if (closestData.stepType === "branch") {
-          const draggedCenterX = draggedPos.x + NODE_DIMENSIONS.width / 2;
-          const closestCenterX = closestPos.x + NODE_DIMENSIONS.width / 2;
-          const isRight = draggedCenterX >= closestCenterX;
-          const handle = isRight ? "no" : "yes";
-          return {
-            id: `${closestNode.node.id}-${node.id}-${handle}`,
-            source: closestNode.node.id,
-            sourceHandle: handle,
-            target: node.id,
-            targetHandle: "target"
-          };
-        }
+      const nonTempEdges = currentEdges.filter((e) => e.className !== "temp");
+      const isSourceHandleFree = (sourceId, handle) => !nonTempEdges.some((e) => e.source === sourceId && e.sourceHandle === handle);
+      const isTargetFree = (targetId) => !nonTempEdges.some((e) => e.target === targetId);
+      const buildEdge = (sourceId, sourceHandle, targetId) => {
+        const suffix = sourceHandle !== "source" ? `-${sourceHandle}` : "";
         return {
-          id: `${closestNode.node.id}-${node.id}`,
-          source: closestNode.node.id,
-          sourceHandle: "source",
-          target: node.id,
+          id: `${sourceId}-${targetId}${suffix}`,
+          source: sourceId,
+          sourceHandle,
+          target: targetId,
           targetHandle: "target"
         };
-      } else {
-        if (draggedData.stepType === "entry") {
-          return null;
-        }
-        if (closestData.stepType === "entry") {
-          return null;
-        }
-        if (draggedData.stepType === "branch") {
-          const draggedCenterX = draggedPos.x + NODE_DIMENSIONS.width / 2;
-          const closestCenterX = closestPos.x + NODE_DIMENSIONS.width / 2;
-          const isRight = closestCenterX >= draggedCenterX;
+      };
+      const trySourceToTarget = (srcId, srcData, tgtId, tgtData) => {
+        if (srcData.stepType === "exit") return null;
+        if (tgtData.stepType === "entry") return null;
+        if (!isTargetFree(tgtId)) return null;
+        if (srcData.stepType === "branch") {
+          const srcPos = srcId === node.id ? draggedPos : closestPos;
+          const tgtPos = srcId === node.id ? closestPos : draggedPos;
+          const srcCenterX = srcPos.x + NODE_DIMENSIONS.width / 2;
+          const tgtCenterX = tgtPos.x + NODE_DIMENSIONS.width / 2;
+          const isRight = tgtCenterX >= srcCenterX;
           const handle = isRight ? "no" : "yes";
-          return {
-            id: `${node.id}-${closestNode.node.id}-${handle}`,
-            source: node.id,
-            sourceHandle: handle,
-            target: closestNode.node.id,
-            targetHandle: "target"
-          };
+          if (!isSourceHandleFree(srcId, handle)) return null;
+          return buildEdge(srcId, handle, tgtId);
         }
-        return {
-          id: `${node.id}-${closestNode.node.id}`,
-          source: node.id,
-          sourceHandle: "source",
-          target: closestNode.node.id,
-          targetHandle: "target"
-        };
+        if (!isSourceHandleFree(srcId, "source")) return null;
+        return buildEdge(srcId, "source", tgtId);
+      };
+      const draggedIsBelow = draggedPos.y > closestPos.y;
+      const closestId = closestNode.node.id;
+      if (draggedIsBelow) {
+        return trySourceToTarget(closestId, closestData, node.id, draggedData) ?? trySourceToTarget(node.id, draggedData, closestId, closestData);
       }
+      return trySourceToTarget(node.id, draggedData, closestId, closestData) ?? trySourceToTarget(closestId, closestData, node.id, draggedData);
     },
     [store]
   );
@@ -4207,7 +4190,10 @@ const FlowCanvas = ({
           const sourceHandleAlreadyUsed = nextEdges.find(
             (ne) => ne.source === closeEdge.source && ne.sourceHandle === closeEdge.sourceHandle
           );
-          if (!sourceHandleAlreadyUsed) {
+          const targetAlreadyHasInput = nextEdges.find(
+            (ne) => ne.target === closeEdge.target
+          );
+          if (!sourceHandleAlreadyUsed && !targetAlreadyHasInput) {
             nextEdges.push({
               ...closeEdge,
               className: "temp",
@@ -4232,7 +4218,10 @@ const FlowCanvas = ({
           const sourceHandleAlreadyUsed = nextEdges.find(
             (ne) => ne.source === closeEdge.source && ne.sourceHandle === closeEdge.sourceHandle
           );
-          if (!sourceHandleAlreadyUsed) {
+          const targetAlreadyHasInput = nextEdges.find(
+            (ne) => ne.target === closeEdge.target
+          );
+          if (!sourceHandleAlreadyUsed && !targetAlreadyHasInput) {
             nextEdges.push({
               ...closeEdge,
               type: closeEdge.sourceHandle ? "labeled" : "default"

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-DThXHml5.js"
+          "../_chunks/index-DXq4OgEg.js"
         ))
       },
       options: {

package/dist/admin/index.mjs

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

package/package.json

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