@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/organisms/CustomEdge/custom-edge-generator.tsx

@@ -1,135 +1,135 @@
-import { Edge, EdgeProps } from '@xyflow/react';
-import React, { 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 = EdgeTypes.Default) => {
-  return ({ id, source, target, style, markerEnd, markerStart }: EdgeProps) => {
-    // 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) as Edge;
-
-    // Use the `useEdgeModal` hook to manage modal state and toggle functionality
-    const { hasModal, toggleModal } = useEdgeModal(
-      selectedEdgeId,
-      id,
-      type,
-      currentEdge?.type,
-    );
-
-    // Create a ref for the edge path (used for bend point creation)
-    const pathRef = useRef<SVGPathElement>(null);
-
-    // Create a ref for the card (used for positioning the modal)
-    const cardRef = useRef<HTMLDivElement>(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 (
-      <>
-        {/* Group for rendering the edge and markers */}
-        <g style={{ position: 'relative' }}>
-          {/* Render markers for ER diagrams */}
-          {isErDiagram && (
-            <EdgeMarkers
-              id={id}
-              sourcePosition={sourcePosition}
-              targetPosition={targetPosition}
-              stroke={style?.stroke}
-              markerStart={currentEdge.markerStart?.toString()}
-              markerEnd={currentEdge.markerEnd?.toString()}
-            />
-          )}
-
-          {/* Background path for the edge (used for hit detection) */}
-          <path
-            id={id}
-            ref={pathRef}
-            d={edgePath}
-            onClick={() => isErDiagram && toggleModal(setSelectedEdgeId)}
-            onDoubleClick={createBendPoint}
-            style={{
-              ...style,
-              strokeWidth: (Number(style?.strokeWidth) || 2) * 4,
-              strokeOpacity: selectedEdgeId === id ? 0.2 : 0.05,
-              stroke: style?.stroke || '#10B981',
-            }}
-            fill="none"
-          />
-
-          {/* Main path for the edge - always visible */}
-          <path
-            id={id}
-            d={edgePath}
-            onClick={() => isErDiagram && toggleModal(setSelectedEdgeId)}
-            onDoubleClick={createBendPoint}
-            style={{ 
-              ...style,
-              stroke: style?.stroke || '#10B981',
-              strokeWidth: style?.strokeWidth || 2,
-            }}
-            markerStart={isErDiagram ? `url(#${id}-marker-start)` : markerStart}
-            markerEnd={isErDiagram ? `url(#${id}-marker-end)` : (markerEnd || 'url(#arrow)')}
-            fill="none"
-          />
-        </g>
-
-        {/* Render the edge modal if `hasModal` is true */}
-        {hasModal && isErDiagram && (
-          <EdgeModal
-            type={type}
-            id={id}
-            targetNode={targetNode}
-            sourceNode={sourceNode}
-            labelX={labelX}
-            labelY={labelY}
-          />
-        )}
-      </>
-    );
-  };
-};
+import { Edge, EdgeProps } from '@xyflow/react';
+import React, { 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 = EdgeTypes.Default) => {
+  return ({ id, source, target, style, markerEnd, markerStart }: EdgeProps) => {
+    // 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) as Edge;
+
+    // Use the `useEdgeModal` hook to manage modal state and toggle functionality
+    const { hasModal, toggleModal } = useEdgeModal(
+      selectedEdgeId,
+      id,
+      type,
+      currentEdge?.type,
+    );
+
+    // Create a ref for the edge path (used for bend point creation)
+    const pathRef = useRef<SVGPathElement>(null);
+
+    // Create a ref for the card (used for positioning the modal)
+    const cardRef = useRef<HTMLDivElement>(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 (
+      <>
+        {/* Group for rendering the edge and markers */}
+        <g style={{ position: 'relative' }}>
+          {/* Render markers for ER diagrams */}
+          {isErDiagram && (
+            <EdgeMarkers
+              id={id}
+              sourcePosition={sourcePosition}
+              targetPosition={targetPosition}
+              stroke={style?.stroke}
+              markerStart={currentEdge.markerStart?.toString()}
+              markerEnd={currentEdge.markerEnd?.toString()}
+            />
+          )}
+
+          {/* Background path for the edge (used for hit detection) */}
+          <path
+            id={id}
+            ref={pathRef}
+            d={edgePath}
+            onClick={() => isErDiagram && toggleModal(setSelectedEdgeId)}
+            onDoubleClick={createBendPoint}
+            style={{
+              ...style,
+              strokeWidth: (Number(style?.strokeWidth) || 2) * 4,
+              strokeOpacity: selectedEdgeId === id ? 0.2 : 0.05,
+              stroke: style?.stroke || '#10B981',
+            }}
+            fill="none"
+          />
+
+          {/* Main path for the edge - always visible */}
+          <path
+            id={id}
+            d={edgePath}
+            onClick={() => isErDiagram && toggleModal(setSelectedEdgeId)}
+            onDoubleClick={createBendPoint}
+            style={{ 
+              ...style,
+              stroke: style?.stroke || '#10B981',
+              strokeWidth: style?.strokeWidth || 2,
+            }}
+            markerStart={isErDiagram ? `url(#${id}-marker-start)` : markerStart}
+            markerEnd={isErDiagram ? `url(#${id}-marker-end)` : (markerEnd || 'url(#arrow)')}
+            fill="none"
+          />
+        </g>
+
+        {/* Render the edge modal if `hasModal` is true */}
+        {hasModal && isErDiagram && (
+          <EdgeModal
+            type={type}
+            id={id}
+            targetNode={targetNode}
+            sourceNode={sourceNode}
+            labelX={labelX}
+            labelY={labelY}
+          />
+        )}
+      </>
+    );
+  };
+};

package/packages/diagrams/src/lib/organisms/CustomEdge/custom-edge.params.ts

@@ -1,6 +1,6 @@
-export const colorMappings: { [key: string]: string } = {
-  '#000000': 'black',
-  '#4169e1': 'blue',
-  '#ffd700': 'yellow',
-  '#ff4500': 'red',
-};
+export const colorMappings: { [key: string]: string } = {
+  '#000000': 'black',
+  '#4169e1': 'blue',
+  '#ffd700': 'yellow',
+  '#ff4500': 'red',
+};

package/packages/diagrams/src/lib/organisms/CustomEdge/custom-edge.type.ts

@@ -1,15 +1,15 @@
-export interface MarkerSelectionProps {
-  onChange: (value: string) => void;
-  keyPrefix?: number | string;
-  value: string;
-  disabled?: boolean;
-  label: string;
-}
-
-export enum EdgeTypes {
-  Init = 'init',
-  Default = 'default',
-  Source2Bend = 'source->bend',
-  Bend2Target = 'bend->target',
-  Bend2Bend = 'bend->bend',
-}
+export interface MarkerSelectionProps {
+  onChange: (value: string) => void;
+  keyPrefix?: number | string;
+  value: string;
+  disabled?: boolean;
+  label: string;
+}
+
+export enum EdgeTypes {
+  Init = 'init',
+  Default = 'default',
+  Source2Bend = 'source->bend',
+  Bend2Target = 'bend->target',
+  Bend2Bend = 'bend->bend',
+}

package/packages/diagrams/src/lib/organisms/CustomEdge/useCreateBendPoint.tsx

@@ -1,121 +1,121 @@
-import { Edge } from '@xyflow/react';
-import {
-  closestPoint,
-  DiagramStore,
-  EdgeTypes,
-  HistoryEvent,
-  ICardNode,
-  useCustomReactFlow,
-  useDiagram,
-} from '@flowuent-labs/diagrams';
-import React, { useCallback } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import addToHistory from '../../utils/addToHistory';
-
-export const useCreateBendPoint = (
-  currentEdge: Edge,
-  sourceNode: ICardNode,
-  targetNode: ICardNode,
-  pathRef: React.RefObject<SVGPathElement>,
-) => {
-  const { setEdges, getEdge, screenToFlowPosition, addNodes } =
-    useCustomReactFlow();
-  const store = useDiagram<DiagramStore>();
-  const { diagramType, nodes, edges, setStore } = store;
-
-  return useCallback(
-    (evt: React.MouseEvent<SVGPathElement, MouseEvent>) => {
-      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: ICardNode = {
-        id: nodeId,
-        position: { x: cpoint[0], y: cpoint[1] },
-        data: { nodeId: nodeId },
-        type: 'bendPoint',
-      };
-      const newEdge: Edge = {
-        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: HistoryEvent = {
-        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({
-        ...addToHistory(store, [event]),
-        ...nodesAndEdgesAfter,
-      });
-    },
-    [
-      pathRef.current,
-      currentEdge.id,
-      getEdge,
-      setEdges,
-      addNodes,
-      sourceNode,
-      targetNode,
-    ],
-  );
-};
+import { Edge } from '@xyflow/react';
+import {
+  closestPoint,
+  DiagramStore,
+  EdgeTypes,
+  HistoryEvent,
+  ICardNode,
+  useCustomReactFlow,
+  useDiagram,
+} from '@flowuent-labs/diagrams';
+import React, { useCallback } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import addToHistory from '../../utils/addToHistory';
+
+export const useCreateBendPoint = (
+  currentEdge: Edge,
+  sourceNode: ICardNode,
+  targetNode: ICardNode,
+  pathRef: React.RefObject<SVGPathElement>,
+) => {
+  const { setEdges, getEdge, screenToFlowPosition, addNodes } =
+    useCustomReactFlow();
+  const store = useDiagram<DiagramStore>();
+  const { diagramType, nodes, edges, setStore } = store;
+
+  return useCallback(
+    (evt: React.MouseEvent<SVGPathElement, MouseEvent>) => {
+      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: ICardNode = {
+        id: nodeId,
+        position: { x: cpoint[0], y: cpoint[1] },
+        data: { nodeId: nodeId },
+        type: 'bendPoint',
+      };
+      const newEdge: Edge = {
+        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: HistoryEvent = {
+        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({
+        ...addToHistory(store, [event]),
+        ...nodesAndEdgesAfter,
+      });
+    },
+    [
+      pathRef.current,
+      currentEdge.id,
+      getEdge,
+      setEdges,
+      addNodes,
+      sourceNode,
+      targetNode,
+    ],
+  );
+};

package/packages/diagrams/src/lib/organisms/CustomEdge/useEdgeModal.ts

@@ -1,37 +1,37 @@
-import { useMemo, useState } from 'react';
-import { EdgeTypes } from './custom-edge.type';
-
-export const useEdgeModal = (
-  selectedEdgeId: string | null,
-  id: string,
-  type: EdgeTypes,
-  currentEdgeType?: string,
-) => {
-  const [doubleClickTimer, setDoubleClickTimer] =
-    useState<NodeJS.Timeout | null>(null);
-
-  const hasModal = useMemo(
-    () => selectedEdgeId === id && type !== EdgeTypes.Bend2Bend,
-    [selectedEdgeId, id, currentEdgeType],
-  );
-
-  const toggleModal = (setSelectedEdgeId: (id: string | null) => void) => {
-    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,
-  };
-};
+import { useMemo, useState } from 'react';
+import { EdgeTypes } from './custom-edge.type';
+
+export const useEdgeModal = (
+  selectedEdgeId: string | null,
+  id: string,
+  type: EdgeTypes,
+  currentEdgeType?: string,
+) => {
+  const [doubleClickTimer, setDoubleClickTimer] =
+    useState<NodeJS.Timeout | null>(null);
+
+  const hasModal = useMemo(
+    () => selectedEdgeId === id && type !== EdgeTypes.Bend2Bend,
+    [selectedEdgeId, id, currentEdgeType],
+  );
+
+  const toggleModal = (setSelectedEdgeId: (id: string | null) => void) => {
+    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,
+  };
+};