@flowuent-org/diagramming-core 1.0.8 → 1.1.0

package/dist/out-tsc/packages/diagrams/src/lib/organisms/CustomEdge/custom-edge-generator.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { EdgeTypes } from './custom-edge.type';
+import EdgeModal from '../EdgeModal';
+import { useCustomReactFlow } from '../../hooks/customUseReactFlow';
+import { useCreateBendPoint } from './useCreateBendPoint';
+import { useEdgePath } from './useEdgePath';
+import { useEdgeModal } from './useEdgeModal';
+import { EdgeMarkers } from './EdgeMarkers';
+import { useDiagram, useDiagramType, useSelectedEdge } from '../../contexts/DiagramProvider';
+/**
+ * CustomEdgeGenerator is a higher-order function that generates a custom edge component.
+ * It accepts an optional `type` parameter (defaults to `EdgeTypes.Default`) and returns
+ * a React component that renders the edge.
+ */
+export const CustomEdgeGenerator = (type = EdgeTypes.Default) => {
+    return ({ id, source, target, style, markerEnd, markerStart }) => {
+        var _a, _b;
+        // Access the diagram store to get selected edge, diagram type, and setter functions
+        // Use the useDiagram hook to access state and actions
+        const selectedEdgeId = useSelectedEdge();
+        const setSelectedEdgeId = useDiagram((state) => state.setSelectedEdge);
+        const diagramType = useDiagramType();
+        // Calculate the edge path, label positions, and edge parameters using the `useEdgePath` hook
+        const { edgePath, labelX, labelY, edgeParams, sourceNode, targetNode } = useEdgePath(source, target, type, style);
+        // If sourceNode, targetNode, or edgeParams are missing, return null (edge cannot be rendered)
+        if (!sourceNode || !targetNode || !edgeParams)
+            return null;
+        // Check if the diagram type is ERD (Entity-Relationship Diagram)
+        const isErDiagram = diagramType === 'erd';
+        // Extract source and target positions from edgeParams
+        const { sourcePosition, targetPosition } = edgeParams;
+        // Access the React Flow instance to get the current edge
+        const { getEdge } = useCustomReactFlow();
+        const currentEdge = getEdge(id);
+        // Use the `useEdgeModal` hook to manage modal state and toggle functionality
+        const { hasModal, toggleModal } = useEdgeModal(selectedEdgeId, id, type, currentEdge === null || currentEdge === void 0 ? void 0 : currentEdge.type);
+        // Create a ref for the edge path (used for bend point creation)
+        const pathRef = useRef(null);
+        // Create a ref for the card (used for positioning the modal)
+        const cardRef = useRef(null);
+        // Use the `useCreateBendPoint` hook to handle bend point creation logic
+        const createBendPoint = useCreateBendPoint(currentEdge, sourceNode, targetNode, pathRef);
+        // Update the card position whenever labelX or labelY changes
+        useEffect(() => {
+            if (cardRef.current) {
+                cardRef.current.style.left = `${labelX - 100}px`;
+                cardRef.current.style.top = `${labelY - 50}px`;
+            }
+        }, [labelX, labelY]);
+        return (_jsxs(_Fragment, { children: [_jsxs("g", { style: { position: 'relative' }, children: [isErDiagram && (_jsx(EdgeMarkers, { id: id, sourcePosition: sourcePosition, targetPosition: targetPosition, stroke: style === null || style === void 0 ? void 0 : style.stroke, markerStart: (_a = currentEdge.markerStart) === null || _a === void 0 ? void 0 : _a.toString(), markerEnd: (_b = currentEdge.markerEnd) === null || _b === void 0 ? void 0 : _b.toString() })), _jsx("path", { id: id, ref: pathRef, d: edgePath, onClick: () => isErDiagram && toggleModal(setSelectedEdgeId), onDoubleClick: createBendPoint, style: Object.assign(Object.assign({}, style), { strokeWidth: (Number(style === null || style === void 0 ? void 0 : style.strokeWidth) || 1) * 4, strokeOpacity: selectedEdgeId === id ? 0.1 : 0 }), fill: "none" }), _jsx("path", { id: id, d: edgePath, onClick: () => isErDiagram && toggleModal(setSelectedEdgeId), onDoubleClick: createBendPoint, style: Object.assign({}, style), markerStart: isErDiagram ? `url(#${id}-marker-start)` : markerStart, markerEnd: isErDiagram ? `url(#${id}-marker-end)` : markerEnd, fill: "none" })] }), hasModal && isErDiagram && (_jsx(EdgeModal, { type: type, id: id, targetNode: targetNode, sourceNode: sourceNode, labelX: labelX, labelY: labelY }))] }));
+    };
+};
+//# sourceMappingURL=custom-edge-generator.js.map

package/dist/out-tsc/packages/diagrams/src/lib/organisms/CustomEdge/custom-edge-generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-edge-generator.js","sourceRoot":"","sources":["../../../../../../../../packages/diagrams/src/lib/organisms/CustomEdge/custom-edge-generator.tsx"],"names":[],"mappings":";AACA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAE7F;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,OAAkB,SAAS,CAAC,OAAO,EAAE,EAAE;IACzE,OAAO,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAa,EAAE,EAAE;;QAC1E,oFAAoF;QACpF,sDAAsD;QACtD,MAAM,cAAc,GAAG,eAAe,EAAE,CAAC;QACzC,MAAM,iBAAiB,GAAG,UAAU,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QACvE,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;QAErC,6FAA6F;QAC7F,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,GACpE,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;QAE3C,8FAA8F;QAC9F,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU;YAAE,OAAO,IAAI,CAAC;QAE3D,iEAAiE;QACjE,MAAM,WAAW,GAAG,WAAW,KAAK,KAAK,CAAC;QAE1C,sDAAsD;QACtD,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,UAAU,CAAC;QAEtD,yDAAyD;QACzD,MAAM,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE,CAAC;QACzC,MAAM,WAAW,GAAG,OAAO,CAAC,EAAE,CAAS,CAAC;QAExC,6EAA6E;QAC7E,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,YAAY,CAC5C,cAAc,EACd,EAAE,EACF,IAAI,EACJ,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,CAClB,CAAC;QAEF,gEAAgE;QAChE,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;QAE7C,6DAA6D;QAC7D,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;QAE7C,wEAAwE;QACxE,MAAM,eAAe,GAAG,kBAAkB,CACxC,WAAW,EACX,UAAU,EACV,UAAU,EACV,OAAO,CACR,CAAC;QAEF,6DAA6D;QAC7D,SAAS,CAAC,GAAG,EAAE;YACb,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;gBACpB,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,MAAM,GAAG,GAAG,IAAI,CAAC;gBACjD,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,MAAM,GAAG,EAAE,IAAI,CAAC;YACjD,CAAC;QACH,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;QAErB,OAAO,CACL,8BAEE,aAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAE/B,WAAW,IAAI,CACd,KAAC,WAAW,IACV,EAAE,EAAE,EAAE,EACN,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,MAAM,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,EACrB,WAAW,EAAE,MAAA,WAAW,CAAC,WAAW,0CAAE,QAAQ,EAAE,EAChD,SAAS,EAAE,MAAA,WAAW,CAAC,SAAS,0CAAE,QAAQ,EAAE,GAC5C,CACH,EAGD,eACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,OAAO,EACZ,CAAC,EAAE,QAAQ,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,IAAI,WAAW,CAAC,iBAAiB,CAAC,EAC5D,aAAa,EAAE,eAAe,EAC9B,KAAK,kCACA,KAAK,KACR,WAAW,EAAE,CAAC,MAAM,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,EAClD,aAAa,EAAE,cAAc,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAEhD,IAAI,EAAC,MAAM,GACX,EAGF,eACE,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,QAAQ,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,IAAI,WAAW,CAAC,iBAAiB,CAAC,EAC5D,aAAa,EAAE,eAAe,EAC9B,KAAK,oBAAO,KAAK,GACjB,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,WAAW,EACnE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,EAC7D,IAAI,EAAC,MAAM,GACX,IACA,EAGH,QAAQ,IAAI,WAAW,IAAI,CAC1B,KAAC,SAAS,IACR,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,GACd,CACH,IACA,CACJ,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC"}

package/dist/out-tsc/packages/diagrams/src/lib/organisms/CustomEdge/custom-edge.params.js

@@ -0,0 +1,7 @@
+export const colorMappings = {
+    '#000000': 'black',
+    '#4169e1': 'blue',
+    '#ffd700': 'yellow',
+    '#ff4500': 'red',
+};
+//# sourceMappingURL=custom-edge.params.js.map

package/dist/out-tsc/packages/diagrams/src/lib/organisms/CustomEdge/custom-edge.params.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-edge.params.js","sourceRoot":"","sources":["../../../../../../../../packages/diagrams/src/lib/organisms/CustomEdge/custom-edge.params.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAA8B;IACtD,SAAS,EAAE,OAAO;IAClB,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,QAAQ;IACnB,SAAS,EAAE,KAAK;CACjB,CAAC"}

package/dist/out-tsc/packages/diagrams/src/lib/organisms/CustomEdge/custom-edge.type.js

@@ -0,0 +1,9 @@
+export var EdgeTypes;
+(function (EdgeTypes) {
+    EdgeTypes["Init"] = "init";
+    EdgeTypes["Default"] = "default";
+    EdgeTypes["Source2Bend"] = "source->bend";
+    EdgeTypes["Bend2Target"] = "bend->target";
+    EdgeTypes["Bend2Bend"] = "bend->bend";
+})(EdgeTypes || (EdgeTypes = {}));
+//# sourceMappingURL=custom-edge.type.js.map

package/dist/out-tsc/packages/diagrams/src/lib/organisms/CustomEdge/custom-edge.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-edge.type.js","sourceRoot":"","sources":["../../../../../../../../packages/diagrams/src/lib/organisms/CustomEdge/custom-edge.type.ts"],"names":[],"mappings":"AAQA,MAAM,CAAN,IAAY,SAMX;AAND,WAAY,SAAS;IACnB,0BAAa,CAAA;IACb,gCAAmB,CAAA;IACnB,yCAA4B,CAAA;IAC5B,yCAA4B,CAAA;IAC5B,qCAAwB,CAAA;AAC1B,CAAC,EANW,SAAS,KAAT,SAAS,QAMpB"}

package/dist/out-tsc/packages/diagrams/src/lib/organisms/CustomEdge/useCreateBendPoint.js

@@ -0,0 +1,93 @@
+import { closestPoint, EdgeTypes, useCustomReactFlow, useDiagram, } from '@flowuent-labs/diagrams';
+import { useCallback } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import addToHistory from '../../utils/addToHistory';
+export const useCreateBendPoint = (currentEdge, sourceNode, targetNode, pathRef) => {
+    const { setEdges, getEdge, screenToFlowPosition, addNodes } = useCustomReactFlow();
+    const store = useDiagram();
+    const { diagramType, nodes, edges, setStore } = store;
+    return useCallback((evt) => {
+        if (diagramType === 'workflow') {
+            return;
+        }
+        evt.preventDefault();
+        evt.stopPropagation();
+        if (!pathRef.current)
+            return;
+        const position = screenToFlowPosition({
+            x: evt.clientX,
+            y: evt.clientY,
+        });
+        const cpoint = closestPoint(pathRef.current, [position.x, position.y]);
+        if (!currentEdge || !sourceNode || !targetNode)
+            throw new Error('Invalid Edge found with source, target or curr edge missing');
+        const nodesAndEdgesBefore = {
+            nodes: [...nodes],
+            edges: [...edges],
+        };
+        const nodeId = uuidv4();
+        const newBendPoint = {
+            id: nodeId,
+            position: { x: cpoint[0], y: cpoint[1] },
+            data: { nodeId: nodeId },
+            type: 'bendPoint',
+        };
+        const newEdge = {
+            id: uuidv4(),
+            source: newBendPoint.id,
+            target: currentEdge.target,
+            type: currentEdge.type === EdgeTypes.Default ||
+                currentEdge.type === EdgeTypes.Bend2Target
+                ? EdgeTypes.Bend2Target
+                : EdgeTypes.Bend2Bend,
+        };
+        newEdge.markerEnd =
+            newEdge.type === EdgeTypes.Bend2Target
+                ? currentEdge.markerEnd
+                : undefined;
+        currentEdge.target = newBendPoint.id;
+        currentEdge.type =
+            currentEdge.type === EdgeTypes.Default ||
+                currentEdge.type === EdgeTypes.Source2Bend
+                ? EdgeTypes.Source2Bend
+                : EdgeTypes.Bend2Bend;
+        delete currentEdge.markerEnd;
+        currentEdge.markerStart =
+            currentEdge.type === EdgeTypes.Source2Bend
+                ? currentEdge.markerStart
+                : undefined;
+        const newEdges = [
+            ...edges.filter((e) => e.id !== currentEdge.id),
+            currentEdge,
+            newEdge,
+        ];
+        const newNodes = [...nodes, newBendPoint];
+        const nodesAndEdgesAfter = {
+            nodes: newNodes,
+            edges: newEdges,
+        };
+        const event = {
+            forward: {
+                t: 'complex-change',
+                type: 'complex',
+                nodesAndEdges: nodesAndEdgesAfter,
+            },
+            backward: {
+                t: 'complex-change',
+                type: 'complex',
+                nodesAndEdges: nodesAndEdgesBefore,
+            },
+            title: 'Bend point created in the middle of ' + currentEdge.id,
+        };
+        setStore(Object.assign(Object.assign({}, addToHistory(store, [event])), nodesAndEdgesAfter));
+    }, [
+        pathRef.current,
+        currentEdge.id,
+        getEdge,
+        setEdges,
+        addNodes,
+        sourceNode,
+        targetNode,
+    ]);
+};
+//# sourceMappingURL=useCreateBendPoint.js.map

package/dist/out-tsc/packages/diagrams/src/lib/organisms/CustomEdge/useCreateBendPoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateBendPoint.js","sourceRoot":"","sources":["../../../../../../../../packages/diagrams/src/lib/organisms/CustomEdge/useCreateBendPoint.tsx"],"names":[],"mappings":"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"}

package/dist/out-tsc/packages/diagrams/src/lib/organisms/CustomEdge/useEdgeModal.js

@@ -0,0 +1,29 @@
+import { useMemo, useState } from 'react';
+import { EdgeTypes } from './custom-edge.type';
+export const useEdgeModal = (selectedEdgeId, id, type, currentEdgeType) => {
+    const [doubleClickTimer, setDoubleClickTimer] = useState(null);
+    const hasModal = useMemo(() => selectedEdgeId === id && type !== EdgeTypes.Bend2Bend, [selectedEdgeId, id, currentEdgeType]);
+    const toggleModal = (setSelectedEdgeId) => {
+        if (type === EdgeTypes.Bend2Bend)
+            return;
+        if (doubleClickTimer) {
+            clearTimeout(doubleClickTimer);
+            setDoubleClickTimer(null);
+        }
+        else {
+            const timer = setTimeout(() => {
+                if (selectedEdgeId)
+                    setSelectedEdgeId(null);
+                else
+                    setSelectedEdgeId(id);
+                setDoubleClickTimer(null);
+            }, 250);
+            setDoubleClickTimer(timer);
+        }
+    };
+    return {
+        hasModal,
+        toggleModal,
+    };
+};
+//# sourceMappingURL=useEdgeModal.js.map

package/dist/out-tsc/packages/diagrams/src/lib/organisms/CustomEdge/useEdgeModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEdgeModal.js","sourceRoot":"","sources":["../../../../../../../../packages/diagrams/src/lib/organisms/CustomEdge/useEdgeModal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,cAA6B,EAC7B,EAAU,EACV,IAAe,EACf,eAAwB,EACxB,EAAE;IACF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAC3C,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAExC,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,cAAc,KAAK,EAAE,IAAI,IAAI,KAAK,SAAS,CAAC,SAAS,EAC3D,CAAC,cAAc,EAAE,EAAE,EAAE,eAAe,CAAC,CACtC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,iBAA8C,EAAE,EAAE;QACrE,IAAI,IAAI,KAAK,SAAS,CAAC,SAAS;YAAE,OAAO;QACzC,IAAI,gBAAgB,EAAE,CAAC;YACrB,YAAY,CAAC,gBAAgB,CAAC,CAAC;YAC/B,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC5B,CAAC;aAAM,CAAC;YACN,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC5B,IAAI,cAAc;oBAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;;oBACvC,iBAAiB,CAAC,EAAE,CAAC,CAAC;gBAC3B,mBAAmB,CAAC,IAAI,CAAC,CAAC;YAC5B,CAAC,EAAE,GAAG,CAAC,CAAC;YACR,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,CAAC;IAEF,OAAO;QACL,QAAQ;QACR,WAAW;KACZ,CAAC;AACJ,CAAC,CAAC"}

package/dist/out-tsc/packages/diagrams/src/lib/organisms/CustomEdge/useEdgePath.js

@@ -0,0 +1,73 @@
+import { useCallback } from 'react';
+import { getBezierPath, getSmoothStepPath, useStore } from '@xyflow/react';
+import { getEdgeParams } from '../../utils/nodeutils';
+import { useDiagram, useDiagramType, useDiagramNodes } from '../../contexts/DiagramProvider';
+export const useEdgePath = (source, target, type, style) => {
+    var _a;
+    const sourceNode = useStore(useCallback((store) => {
+        var _a;
+        const lookup = (_a = store.nodeLookup) !== null && _a !== void 0 ? _a : store.nodeInternals;
+        return lookup === null || lookup === void 0 ? void 0 : lookup.get(source);
+    }, [source]));
+    const targetNode = useStore(useCallback((store) => {
+        var _a;
+        const lookup = (_a = store.nodeLookup) !== null && _a !== void 0 ? _a : store.nodeInternals;
+        return lookup === null || lookup === void 0 ? void 0 : lookup.get(target);
+    }, [target]));
+    const { edgeShapeType } = useDiagram();
+    const diagramType = useDiagramType();
+    const nodes = useDiagramNodes();
+    if (!sourceNode || !targetNode) {
+        return {
+            edgePath: null,
+            labelX: 0,
+            labelY: 0,
+            edgeParams: null,
+            sourceNode: null,
+            targetNode: null,
+        };
+    }
+    const edgeParams = getEdgeParams(sourceNode, targetNode, type, parseInt(((_a = style === null || style === void 0 ? void 0 : style.strokeWidth) === null || _a === void 0 ? void 0 : _a.toString()) || '10', 10), diagramType, nodes);
+    // Debug logging for edge path calculation
+    // console.log('useEdgePath Debug:', {
+    //   sourceId: source,
+    //   targetId: target,
+    //   edgeType: type,
+    //   diagramType,
+    //   edgeShapeType,
+    //   edgeParams,
+    //   sourceNode: sourceNode ? {
+    //     id: sourceNode.id,
+    //     width: sourceNode.width || sourceNode.measured?.width,
+    //     height: sourceNode.height || sourceNode.measured?.height,
+    //     position: sourceNode.position
+    //   } : null,
+    //   targetNode: targetNode ? {
+    //     id: targetNode.id,
+    //     width: targetNode.width || targetNode.measured?.width,
+    //     height: targetNode.height || targetNode.measured?.height,
+    //     position: targetNode.position
+    //   } : null
+    // });
+    const [edgePath, labelX, labelY] = edgeShapeType === 'curly'
+        ? getBezierPath(edgeParams)
+        : getSmoothStepPath(edgeParams);
+    // Debug logging for final edge path
+    // console.log('useEdgePath Final:', {
+    //   sourceId: source,
+    //   targetId: target,
+    //   edgePath,
+    //   labelX,
+    //   labelY,
+    //   edgeShapeType
+    // });
+    return {
+        edgePath,
+        labelX,
+        labelY,
+        edgeParams,
+        sourceNode,
+        targetNode,
+    };
+};
+//# sourceMappingURL=useEdgePath.js.map

package/dist/out-tsc/packages/diagrams/src/lib/organisms/CustomEdge/useEdgePath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEdgePath.js","sourceRoot":"","sources":["../../../../../../../../packages/diagrams/src/lib/organisms/CustomEdge/useEdgePath.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAI7F,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,MAAc,EACd,MAAc,EACd,IAAe,EACf,KAA2B,EAC3B,EAAE;;IACF,MAAM,UAAU,GAAG,QAAQ,CACzB,WAAW,CAAC,CAAC,KAAU,EAAE,EAAE;;QACzB,MAAM,MAAM,GACV,MAAC,KAAa,CAAC,UAAU,mCAAK,KAAa,CAAC,aAAa,CAAC;QAC5D,OAAO,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CACW,CAAC;IAC1B,MAAM,UAAU,GAAG,QAAQ,CACzB,WAAW,CAAC,CAAC,KAAU,EAAE,EAAE;;QACzB,MAAM,MAAM,GACV,MAAC,KAAa,CAAC,UAAU,mCAAK,KAAa,CAAC,aAAa,CAAC;QAC5D,OAAO,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CACW,CAAC;IAE1B,MAAM,EAAE,aAAa,EAAE,GAAG,UAAU,EAAgB,CAAC;IACrD,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAEhC,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,EAAE,CAAC;QAC/B,OAAO;YACL,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,CAAC;YACT,UAAU,EAAE,IAAI;YAChB,UAAU,EAAE,IAAI;YAChB,UAAU,EAAE,IAAI;SACjB,CAAC;IACJ,CAAC;IAED,MAAM,UAAU,GAAG,aAAa,CAC9B,UAAU,EACV,UAAU,EACV,IAAI,EACJ,QAAQ,CAAC,CAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,0CAAE,QAAQ,EAAE,KAAI,IAAI,EAAE,EAAE,CAAC,EACpD,WAAW,EACX,KAAK,CACN,CAAC;IAEF,0CAA0C;IAC1C,sCAAsC;IACtC,sBAAsB;IACtB,sBAAsB;IACtB,oBAAoB;IACpB,iBAAiB;IACjB,mBAAmB;IACnB,gBAAgB;IAChB,+BAA+B;IAC/B,yBAAyB;IACzB,6DAA6D;IAC7D,gEAAgE;IAChE,oCAAoC;IACpC,cAAc;IACd,+BAA+B;IAC/B,yBAAyB;IACzB,6DAA6D;IAC7D,gEAAgE;IAChE,oCAAoC;IACpC,aAAa;IACb,MAAM;IAEN,MAAM,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,GAC9B,aAAa,KAAK,OAAO;QACvB,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC;QAC3B,CAAC,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAEpC,oCAAoC;IACpC,sCAAsC;IACtC,sBAAsB;IACtB,sBAAsB;IACtB,cAAc;IACd,YAAY;IACZ,YAAY;IACZ,kBAAkB;IAClB,MAAM;IAEN,OAAO;QACL,QAAQ;QACR,MAAM;QACN,MAAM;QACN,UAAU;QACV,UAAU;QACV,UAAU;KACX,CAAC;AACJ,CAAC,CAAC"}

package/dist/out-tsc/packages/diagrams/src/lib/organisms/DownloadPanel.js

@@ -0,0 +1,167 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useCallback } from 'react';
+import { Panel } from '@xyflow/react';
+import { useDownload, useExportJson, useImportJson } from '../utils/model-hooks';
+import { Card, IconButton, Input, Stack, styled, Switch, Tooltip, useMediaQuery, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { useDiagram, useDiagramEdges, useDiagramNodes, useLayoutDirection, useSetLayoutDirection } from '../contexts/DiagramProvider';
+import { RiArrowGoBackFill as UndoIcon, RiArrowGoForwardFill as RedoIcon, RiBrushFill as BroomIcon, RiCodeBoxFill as CodeIcon, RiDownload2Fill as DownloadIcon, RiUpload2Fill as ImportIcon, RiUploadCloud2Fill as ExportIcon, } from 'react-icons/ri';
+import BarChartIcon from '@mui/icons-material/BarChart';
+import CodeModal from './CodeModal';
+import { flowToCode } from '../utils/flow-to-js';
+import { useTranslation } from 'react-i18next';
+// Memoized subcomponent for the Clear button
+const ClearButton = React.memo(() => {
+    const reset = useDiagram((state) => state.reset);
+    const { t } = useTranslation();
+    return (_jsx(Tooltip, { title: t('tooltip.clear'), children: _jsx(IconButton, { size: "small", onClick: reset, children: _jsx(BroomIcon, {}) }) }));
+});
+// Memoized subcomponent for the Undo button
+const UndoButton = React.memo(() => {
+    const undo = useDiagram((state) => state.undo);
+    const { t } = useTranslation();
+    return (_jsx(Tooltip, { title: t('tooltip.undo'), children: _jsx(IconButton, { size: "small", onClick: undo, children: _jsx(UndoIcon, {}) }) }));
+});
+// Memoized subcomponent for the Redo button
+const RedoButton = React.memo(() => {
+    const redo = useDiagram((state) => state.redo);
+    const { t } = useTranslation();
+    return (_jsx(Tooltip, { title: t('tooltip.redo'), children: _jsx(IconButton, { size: "small", onClick: redo, children: _jsx(RedoIcon, {}) }) }));
+});
+// Memoized subcomponent for the Download button
+const DownloadButton = React.memo(() => {
+    const download = useDownload();
+    const { t } = useTranslation();
+    return (_jsx(Tooltip, { title: t('tooltip.download'), children: _jsx(IconButton, { size: "small", onClick: download, children: _jsx(DownloadIcon, {}) }) }));
+});
+// Memoized subcomponent for the Export JSON button
+const ExportJsonButton = React.memo(() => {
+    const exportJson = useExportJson();
+    const { t } = useTranslation();
+    return (_jsx(Tooltip, { title: t('tooltip.exportJson'), children: _jsx(IconButton, { size: "small", onClick: exportJson, children: _jsx(ExportIcon, {}) }) }));
+});
+// Memoized subcomponent for the Export Code button
+const ExportCodeButton = React.memo(() => {
+    const nodes = useDiagramNodes();
+    const edges = useDiagramEdges();
+    const [codeModalOpen, setCodeModalOpen] = useState(false);
+    const [generatedCode, setGeneratedCode] = useState('');
+    const { t } = useTranslation();
+    const exportCode = useCallback(() => {
+        const { mainCode, externalFunctions } = flowToCode({
+            nodes: nodes,
+            edges,
+        });
+        setGeneratedCode([externalFunctions, mainCode].join('\n'));
+        setCodeModalOpen(true);
+    }, [nodes, edges]); // add nodes, edges as dependencies
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: t('tooltip.exportCode'), children: _jsx(IconButton, { size: "small", onClick: exportCode, children: _jsx(CodeIcon, {}) }) }), _jsx(CodeModal, { open: codeModalOpen, onClose: () => setCodeModalOpen(false), code: generatedCode })] }));
+});
+// Memoized subcomponent for the Import JSON button
+const ImportJsonButton = React.memo(() => {
+    const importJson = useImportJson();
+    const { t } = useTranslation();
+    return (_jsxs(_Fragment, { children: [_jsx(Input, { onChange: importJson, type: "file", id: "json-input", style: { display: 'none', }, inputProps: { accept: 'application/JSON' } }), _jsx(Tooltip, { title: t('tooltip.importJson'), children: _jsx(IconButton, { size: "small", component: "label", htmlFor: "json-input", children: _jsx(ImportIcon, {}) }) })] }));
+});
+// Memoized subcomponent for the Edge Type Switch
+const EdgeTypeSwitch = React.memo(() => {
+    const edgeShapeType = useDiagram((state) => state.edgeShapeType);
+    const setEdgeShapeType = useDiagram((state) => state.setEdgeShapeType);
+    const { t } = useTranslation();
+    const handleEdgeTypeSwitch = useCallback(() => {
+        setEdgeShapeType(edgeShapeType === 'curly' ? 'step' : 'curly');
+    }, [edgeShapeType, setEdgeShapeType]);
+    return (_jsx(Tooltip, { title: t('tooltip.toggleEdgeType'), children: _jsxs(IconButton, { size: "small", children: ["Edge Curls:", _jsx(Switch, { checked: edgeShapeType === 'curly', onChange: handleEdgeTypeSwitch, inputProps: { 'aria-label': 'Edge Type Switch' } })] }) }));
+});
+// Memoized subcomponent for the Layout Direction Toggle
+const LayoutDirectionToggle = React.memo(() => {
+    const layoutDirection = useLayoutDirection();
+    const setLayoutDirection = useSetLayoutDirection();
+    const { t } = useTranslation();
+    const handleLayoutDirectionChange = useCallback((event, newDirection) => {
+        if (newDirection !== null) {
+            setLayoutDirection(newDirection);
+            // Trigger a re-layout by dispatching a custom event
+            window.dispatchEvent(new CustomEvent('layoutDirectionChanged', {
+                detail: { direction: newDirection }
+            }));
+        }
+    }, [setLayoutDirection]);
+    return (_jsxs(ToggleButtonGroup, { value: layoutDirection, exclusive: true, onChange: handleLayoutDirectionChange, "aria-label": "layout direction", size: "small", sx: {
+            backgroundColor: 'transparent',
+            boxShadow: 'none',
+            borderRadius: 3,
+            gap: 1,
+            border: 'none',
+        }, children: [_jsx(ToggleButton, { value: "DOWN", "aria-label": "vertical layout", sx: {
+                    p: 0.5,
+                    minWidth: 32,
+                    borderRadius: 2,
+                    bgcolor: 'transparent',
+                    color: '#fff',
+                    border: 'none',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                    mr: 0,
+                    '&.Mui-selected': {
+                        bgcolor: '#393939',
+                        color: '#fff',
+                        border: 'none',
+                        boxShadow: '0 4px 12px rgba(0,0,0,0.20)',
+                    },
+                    '&:hover': {
+                        border: 'none',
+                        boxShadow: '0 4px 12px rgba(0,0,0,0.20)',
+                    },
+                }, children: _jsx(BarChartIcon, { fontSize: "small", sx: { color: 'inherit', transform: 'rotate(90deg)' } }) }), _jsx(ToggleButton, { value: "RIGHT", "aria-label": "horizontal layout", sx: {
+                    p: 0.5,
+                    minWidth: 32,
+                    borderRadius: 2,
+                    bgcolor: 'transparent',
+                    color: '#fff',
+                    border: 'none',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                    '&.Mui-selected': {
+                        bgcolor: '#393939',
+                        color: '#fff',
+                        border: 'none',
+                        boxShadow: '0 4px 12px rgba(0,0,0,0.20)',
+                    },
+                    '&:hover': {
+                        border: 'none',
+                        boxShadow: '0 4px 12px rgba(0,0,0,0.20)',
+                    },
+                }, children: _jsx(BarChartIcon, { fontSize: "small", sx: { color: 'inherit' } }) })] }));
+});
+// Helper to map offset to style based on position
+function getOffsetStyle(position, offsetX, offsetY) {
+    switch (position) {
+        case 'top-left':
+            return { top: offsetY, left: offsetX };
+        case 'top-center':
+            return { top: offsetY, left: '50%', transform: 'translateX(-50%)' };
+        case 'top-right':
+            return { top: offsetY, right: offsetX };
+        case 'bottom-left':
+            return { bottom: offsetY, left: offsetX };
+        case 'bottom-center':
+            return { bottom: offsetY, left: '50%', transform: 'translateX(-50%)' };
+        case 'bottom-right':
+            return { bottom: offsetY, right: offsetX };
+        default:
+            return {};
+    }
+}
+// Main DownloadPanel component
+export const DownloadPanel = React.memo((_a) => {
+    var { position = 'top-left', customButtons, hideUndo = false, hideRedo = false, hideDownload = false, hideExportJson = false, hideImportJson = false, hideEdgeTypeSwitch = false, hideLayoutDirection = false, offsetX = 230, offsetY = 50 } = _a, rest = __rest(_a, ["position", "customButtons", "hideUndo", "hideRedo", "hideDownload", "hideExportJson", "hideImportJson", "hideEdgeTypeSwitch", "hideLayoutDirection", "offsetX", "offsetY"]);
+    const smScreen = useMediaQuery('only screen and (min-width:768px)');
+    const { t } = useTranslation();
+    const StyledPanel = styled(Panel) `
+      display: flex;
+      flex-direction: ${smScreen ? 'row' : 'column'};
+      gap: 1rem;
+    `;
+    return (_jsx(StyledPanel, Object.assign({ position: position, style: getOffsetStyle(position, offsetX, offsetY) }, rest, { children: _jsx(Card, { sx: { backgroundColor: '#232323' }, children: _jsxs(Stack, { direction: "row", sx: { height: 30 }, spacing: 2, children: [_jsx(ClearButton, {}), !hideUndo && _jsx(UndoButton, {}), !hideRedo && _jsx(RedoButton, {}), !hideDownload && _jsx(DownloadButton, {}), !hideExportJson && _jsx(ExportJsonButton, {}), !hideExportJson && _jsx(ExportCodeButton, {}), !hideImportJson && _jsx(ImportJsonButton, {}), !hideEdgeTypeSwitch && _jsx(EdgeTypeSwitch, {}), !hideLayoutDirection && _jsx(LayoutDirectionToggle, {}), customButtons] }) }) })));
+});
+export default DownloadPanel;
+//# sourceMappingURL=DownloadPanel.js.map

package/dist/out-tsc/packages/diagrams/src/lib/organisms/DownloadPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadPanel.js","sourceRoot":"","sources":["../../../../../../../packages/diagrams/src/lib/organisms/DownloadPanel.tsx"],"names":[],"mappings":"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"}

package/dist/out-tsc/packages/diagrams/src/lib/organisms/EdgeModal.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Card, Typography } from '@mui/material';
+import { EdgeTypes } from './CustomEdge/custom-edge.type';
+import MarkerSelector from '../atoms/MarkerSelector';
+import { CirclePicker } from 'react-color';
+import { IconTrash } from '@tabler/icons-react';
+import { useEffect, useState } from 'react';
+import { colorMappings } from './CustomEdge/custom-edge.params';
+import { useDeleteEdge, useSelectedMarkers } from '../utils/edge-hooks';
+import { useDiagramType } from '../contexts/DiagramProvider';
+import { Markers } from '../assets/markers/markers.type';
+import { useCustomReactFlow } from '../hooks/customUseReactFlow';
+export default function EdgeModal({ type, id, labelX, labelY, sourceNode, targetNode, }) {
+    var _a, _b, _c;
+    const foreignObjectSizes = [EdgeTypes.Default].includes(type)
+        ? { width: 150, height: 80, x: 0, y: 0 }
+        : { width: 150, height: 50, x: 0, y: 0 };
+    const { getEdges, setEdges, getEdge, screenToFlowPosition, addNodes } = useCustomReactFlow();
+    const currentEdge = getEdge(id);
+    const { selectedEdgeMarkerEnd, selectedEdgeMarkerStart, updateEdgeMarker } = useSelectedMarkers(currentEdge);
+    const handleEdgeDelete = useDeleteEdge(id);
+    const diagramType = useDiagramType();
+    const isErDiagram = diagramType === 'erd';
+    const [colorToggle, setColorToggle] = useState(false);
+    const [color, setColor] = useState((_a = currentEdge.style) === null || _a === void 0 ? void 0 : _a.stroke);
+    const onColorChange = (value) => {
+        setColor(value);
+        setColorToggle(!colorToggle);
+        const colorValue = colorMappings[value] || value;
+        const newEdges = getEdges().map((e) => {
+            if (e.id === id) {
+                return Object.assign(Object.assign({}, e), { style: Object.assign(Object.assign({}, e.style), { stroke: colorValue }), markerEnd: e.markerEnd
+                        ? typeof e.markerEnd === 'string'
+                            ? e.markerEnd
+                            : Object.assign(Object.assign({}, e.markerEnd), { color: colorValue })
+                        : undefined });
+            }
+            else {
+                return e;
+            }
+        });
+        setEdges(newEdges);
+    };
+    useEffect(() => {
+        if (isErDiagram) {
+            if (!Object.values(Markers).includes(currentEdge.markerStart)) {
+                updateEdgeMarker('markerStart', Markers.One);
+            }
+            if (!Object.values(Markers).includes(currentEdge.markerEnd)) {
+                updateEdgeMarker('markerEnd', Markers.One);
+            }
+        }
+    }, [currentEdge.markerEnd, currentEdge.markerStart]);
+    return (_jsx(Card, { elevation: 3, sx: {
+            backgroundColor: '#333131',
+            zIndex: 9999,
+            p: 1,
+            m: 0,
+            borderRadius: '8px',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+            border: '1px solid rgba(0, 0, 0, 0.1)',
+            position: 'relative',
+            '&::before': {
+                content: '""',
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backdropFilter: 'blur(2px)',
+                zIndex: -1
+            }
+        }, component: "foreignObject", width: '400px', height: foreignObjectSizes.height + 40, x: labelX - foreignObjectSizes.x, y: labelY - foreignObjectSizes.y, style: {
+            overflow: 'visible',
+            pointerEvents: 'all',
+        }, requiredExtensions: "http://www.w3.org/1999/xhtml", children: _jsx(Box, { sx: {
+                padding: 1,
+                alignItems: "center",
+                position: "relative",
+                height: "100%",
+                display: "flex",
+                flexDirection: "column",
+                gap: 1,
+                zIndex: 9999
+            }, children: isErDiagram ? (_jsxs(Box, { sx: { width: '100%', display: 'flex', flexDirection: 'column', gap: 1 }, children: [[EdgeTypes.Default, EdgeTypes.Source2Bend].includes(type) && (_jsx(MarkerSelector, { label: ((_b = sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.data) === null || _b === void 0 ? void 0 : _b.title) || '', onChange: (value) => updateEdgeMarker('markerStart', value), value: (selectedEdgeMarkerStart === null || selectedEdgeMarkerStart === void 0 ? void 0 : selectedEdgeMarkerStart.toString()) || 'none' })), [EdgeTypes.Default, EdgeTypes.Bend2Target].includes(type) && (_jsx(MarkerSelector, { label: ((_c = targetNode === null || targetNode === void 0 ? void 0 : targetNode.data) === null || _c === void 0 ? void 0 : _c.title) || '', keyPrefix: 1, onChange: (value) => updateEdgeMarker('markerEnd', value), value: (selectedEdgeMarkerEnd === null || selectedEdgeMarkerEnd === void 0 ? void 0 : selectedEdgeMarkerEnd.toString()) || 'none' }))] })) : (_jsxs(Box, { sx: {
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 2
+                }, children: [_jsxs(Box, { sx: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            gap: 1,
+                            position: 'relative',
+                            width: '100%'
+                        }, children: [_jsx(Typography, { sx: {
+                                    fontSize: '0.75rem',
+                                    fontWeight: 500,
+                                    color: '#2c3e50'
+                                }, children: "Color" }), _jsx(Button, { onClick: () => setColorToggle(!colorToggle), sx: {
+                                    minWidth: 'unset',
+                                    padding: '4px',
+                                    border: '1px solid #e2e8f0',
+                                    borderRadius: '4px',
+                                    backgroundColor: 'white',
+                                    '&:hover': {
+                                        backgroundColor: '#f7fafc'
+                                    }
+                                }, children: _jsx(Box, { sx: {
+                                        borderRadius: '50%',
+                                        width: '20px',
+                                        height: '20px',
+                                        bgcolor: color,
+                                        cursor: 'pointer',
+                                        border: '1px solid rgba(0,0,0,0.1)'
+                                    } }) }), _jsx(Box, { sx: {
+                                    position: "absolute",
+                                    display: colorToggle ? 'flex' : 'none',
+                                    bgcolor: "white",
+                                    left: "-3.5rem",
+                                    top: "100%",
+                                    zIndex: "100",
+                                    height: "5rem",
+                                    borderRadius: "8px",
+                                    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+                                    p: "1rem",
+                                    transform: "scale(0.5)",
+                                    border: '1px solid rgba(0,0,0,0.1)'
+                                }, children: _jsx(CirclePicker, { colors: ['#000000', '#4169E1', '#FFD700', '#FF4500'], color: color, onChange: (e) => onColorChange(e.hex) }) })] }), _jsx(Box, { sx: {
+                            cursor: 'pointer',
+                            color: '#e53e3e',
+                            transition: 'color 0.2s ease',
+                            '&:hover': {
+                                color: '#c53030'
+                            }
+                        }, children: _jsx(IconTrash, { onClick: handleEdgeDelete }) })] })) }) }));
+}
+//# sourceMappingURL=EdgeModal.js.map