@flowuent-org/diagramming-core 1.3.10 → 1.4.0

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

@@ -1,135 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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,
-  };
-};

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

@@ -1,99 +0,0 @@
-import React, { useCallback } from 'react';
-import { getBezierPath, getSmoothStepPath, useStore } from '@xyflow/react';
-import { getEdgeParams } from '../../utils/nodeutils';
-import { ICardNode } from '../../types/card-node';
-import { useDiagram, useDiagramType, useDiagramNodes } from '../../contexts/DiagramProvider';
-import { DiagramStore } from '../../contexts/diagramStoreTypes';
-import { EdgeTypes } from './custom-edge.type';
-
-export const useEdgePath = (
-  source: string,
-  target: string,
-  type: EdgeTypes,
-  style?: React.CSSProperties,
-) => {
-  const sourceNode = useStore(
-    useCallback((store: any) => {
-      const lookup: Map<string, unknown> | undefined =
-        (store as any).nodeLookup ?? (store as any).nodeInternals;
-      return lookup?.get(source);
-    }, [source]),
-  ) as unknown as ICardNode;
-  const targetNode = useStore(
-    useCallback((store: any) => {
-      const lookup: Map<string, unknown> | undefined =
-        (store as any).nodeLookup ?? (store as any).nodeInternals;
-      return lookup?.get(target);
-    }, [target]),
-  ) as unknown as ICardNode;
-
-  const { edgeShapeType } = useDiagram<DiagramStore>();
-  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(style?.strokeWidth?.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,
-  };
-};