@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/organisms/Card/card.params.ts

@@ -0,0 +1,29 @@
+import { IBlockType } from '../../types/card-node';
+
+export const blockTypes = {
+  String: String,
+  Number: Number,
+  Object: Object,
+  Array: Array,
+  Map: Map,
+  Set: Set,
+  Int16: Int16Array,
+  Date: Date,
+  null: null,
+  Boolean: Boolean,
+};
+
+export const BlockTypesKeys = Object.keys(blockTypes) as IBlockType[];
+export const fieldTypes = [
+  'STRING', // Variable-length character string
+  'CHAR', // Fixed-length character string
+  'INT', // Integer
+  'FLOAT', // Floating-point number
+  'DATE', // Date
+  'TIME', // Time
+  'DATETIME', // Date and time
+  'BOOLEAN', // Boolean (true/false)
+  'ENUM', // Enumeration (a predefined set of values)
+  'BLOB', // Binary Large Object (for storing binary data)
+  'TEXT', // Text
+];

package/packages/diagrams/src/lib/organisms/Card/card.types.ts

@@ -0,0 +1,5 @@
+export interface CardBlockTypesProps {
+  onChange: React.ChangeEventHandler<HTMLSelectElement>;
+  value?: string;
+  id: string;
+}

package/packages/diagrams/src/lib/organisms/CodeModal.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Tooltip,
+} from '@mui/material';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { materialDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { RiDownloadLine, RiFileCopyLine } from 'react-icons/ri'; // Importing icons from react-icons/ri
+import jsBeautify from 'js-beautify';
+import { useTranslation } from 'react-i18next';
+
+interface CodeModalProps {
+  open: boolean;
+  onClose: () => void;
+  code: string;
+}
+
+const CodeModal: React.FC<CodeModalProps> = ({ open, onClose, code }) => {
+  const { t } = useTranslation();
+  const formattedCode = React.useMemo(() => {
+    try {
+      return jsBeautify.js(code, {
+        indent_size: 2,
+        space_in_empty_paren: true,
+      });
+    } catch (error) {
+      console.error('Failed to format code:', error);
+      return code;
+    }
+  }, [code]);
+
+  const handleDownload = () => {
+    const blob = new Blob([formattedCode], {
+      type: 'text/javascript;charset=utf-8',
+    });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'exportedCode.js';
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(formattedCode);
+      alert(t('alert.codeCopied'));
+    } catch (error) {
+      console.error('Failed to copy code:', error);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      maxWidth="md"
+      fullWidth
+      sx={{
+        '& .MuiDialog-paper': {
+          backgroundColor: '#1e1e1e', // Dark background for the modal
+        },
+      }}
+    >
+      <DialogTitle>Exported Code</DialogTitle>
+      <DialogContent dividers>
+        <SyntaxHighlighter
+          language="javascript"
+          style={materialDark}
+          wrapLines={true}
+          wrapLongLines={true}
+          customStyle={{
+            backgroundColor: '#1e1e1e', // Dark background for the code block
+            padding: '16px',
+            borderRadius: '4px',
+          }}
+        >
+          {formattedCode}
+        </SyntaxHighlighter>
+      </DialogContent>
+      <DialogActions>
+        <Tooltip title={t('tooltip.copyToClipboard')}>
+          <IconButton onClick={handleCopy}>
+            <RiFileCopyLine /> {/* Replaced with react-icons/ri */}
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Download as .js file">
+          <IconButton onClick={handleDownload}>
+            <RiDownloadLine /> {/* Replaced with react-icons/ri */}
+          </IconButton>
+        </Tooltip>
+        <Button onClick={onClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default CodeModal;

package/packages/diagrams/src/lib/organisms/ConditionRuleGroup.tsx

@@ -0,0 +1,139 @@
+import { Box, Button, IconButton, MenuItem, Paper, PaperProps, Select } from "@mui/material";
+import { Delete } from '@mui/icons-material';
+import { Rule, RuleGroup } from "../types/condition-builder";
+import { Option } from "../atoms/ContentAssist";
+import React, { useCallback } from "react";
+import ConditionRule from "../molecules/ConditionRule";
+
+const ruleGroupWrapper = {
+  // padding: '16px',
+  border: 'unset',
+  boxShadow: 'unset',
+  backgroundColor: 'inherit',
+  marginTop: '5px',
+  marginBottom: '16px',
+  '.select-combinator': {
+    mr: 1, padding: '0px',
+    '.MuiSelect-select': {
+      padding: '7px',
+      paddingRight: '29px'
+    }
+  },
+  '.MuiButton-contained': {
+    padding: '6px'
+  },
+  '.rule-btn': {
+    mr: 1
+  },
+}
+
+type Props = {
+  value: RuleGroup,
+  onChange: (value: RuleGroup) => void,
+  onDelete?: () => void
+  options: Option[],
+  initialOptions: Option[];
+  optionsType: string;
+  setOptions: (value: Option[]) => void;
+  setOptionsType: (value: string) => void;
+  wrapperProps: PaperProps;
+}
+
+const defaultRuleValue = {
+  id: 0,
+  label: '',
+  type: 'env'
+}
+
+const ConditionRuleGroup: React.FC<Props> = React.memo((props: Props) => {
+  const { value, onChange, onDelete, options, initialOptions, optionsType, setOptions, setOptionsType, wrapperProps } = props;
+
+  const handleRuleChange = useCallback((index: number, newRule: Rule | RuleGroup) => {
+    const currentRule = value.rules[index];
+    if (JSON.stringify(currentRule) !== JSON.stringify(newRule)) {
+      const newRules = [...value.rules];
+      newRules[index] = newRule;
+      onChange({ ...value, rules: newRules });
+    }
+  }, [value, onChange]);
+
+  const handleAddRule = useCallback(() => {
+    onChange({ ...value, rules: [...value.rules, { field: defaultRuleValue, operator: '=', value: defaultRuleValue }] });
+  }, [value, onChange]);
+
+  const handleAddGroup = useCallback(() => {
+    onChange({ ...value, rules: [...value.rules, { combinator: 'and', rules: [] }] });
+  }, [value, onChange]);
+
+  const handleDeleteRule = useCallback((index: number) => {
+    const newRules = value.rules.filter((_, i) => i !== index);
+    onChange({ ...value, rules: newRules.length ? newRules : [] });
+  }, [value, onChange]);
+
+  return (
+    <Paper sx={ruleGroupWrapper} {...wrapperProps}>
+      <Select
+        value={value?.combinator}
+        onChange={e => onChange({ ...value, combinator: e.target.value as 'and' | 'or' })}
+        className="select-combinator nodrag nopan"
+        sx={{
+          color: '#FFFFFF',
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#8E8E93'
+          }
+        }}
+        MenuProps={{
+          PaperProps: {
+            sx: {
+              backgroundColor: '#393939',
+              color: '#FFFFFF',
+              '& .MuiMenuItem-root': {
+                backgroundColor: '#393939',
+                color: '#FFFFFF',
+                '&:hover': {
+                  backgroundColor: '#555555',
+                },
+              },
+            },
+          },
+        }}
+      >
+        <MenuItem value="and">AND</MenuItem>
+        <MenuItem value="or">OR</MenuItem>
+      </Select>
+      <Button onClick={handleAddRule} variant="contained" className="rule-btn">+ Rule</Button>
+      <Button onClick={handleAddGroup} variant="contained">+ Group</Button>
+      {onDelete ? <IconButton className="delete-btn" onClick={onDelete}><Delete /></IconButton> : null}
+      {value?.rules?.map((rule, index) => (
+        <Box key={index}>
+          {('combinator' in rule) ? (
+            <ConditionRuleGroup
+              wrapperProps={wrapperProps}
+              value={rule as RuleGroup}
+              onChange={newRuleGroup => handleRuleChange(index, newRuleGroup)}
+              onDelete={() => handleDeleteRule(index)}
+              options={options || []}
+              initialOptions={initialOptions}
+              setOptions={setOptions}
+              optionsType={optionsType}
+              setOptionsType={setOptionsType}
+            />
+          ) : (
+            <ConditionRule
+              rule={rule as Rule}
+              onChange={newRule => handleRuleChange(index, newRule)}
+              onDelete={() => handleDeleteRule(index)}
+              options={options || []}
+              initialOptions={initialOptions}
+              setOptions={setOptions}
+              optionsType={optionsType}
+              setOptionsType={setOptionsType}
+            />
+          )}
+        </Box>
+      ))}
+    </Paper>
+  );
+});
+
+export default ConditionRuleGroup;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { orientMap } from '../../assets/markers/markers.param';
+
+type EdgeMarkersProps = {
+  id: string;
+  sourcePosition: string;
+  targetPosition: string;
+  stroke?: string;
+  markerStart?: string;
+  markerEnd?: string;
+};
+
+export const EdgeMarkers = ({
+  id,
+  sourcePosition,
+  targetPosition,
+  stroke,
+  markerStart,
+  markerEnd,
+}: EdgeMarkersProps) => {
+  return (
+    <defs>
+      <marker
+        id={`${id}-marker-start`}
+        viewBox="0 0 100 100"
+        markerHeight={12}
+        markerWidth={10}
+        refX={orientMap[sourcePosition].refX}
+        refY={orientMap[sourcePosition].refY}
+        strokeWidth="10"
+        stroke={stroke}
+        fill="transparent"
+      >
+        {orientMap[sourcePosition].idPathMap[markerStart || 'one']}
+      </marker>
+      <marker
+        id={`${id}-marker-end`}
+        viewBox="0 0 100 100"
+        markerHeight={12}
+        markerWidth={10}
+        refX={orientMap[targetPosition].refX}
+        refY={orientMap[targetPosition].refY}
+        strokeWidth="10"
+        stroke={stroke}
+        fill="transparent"
+      >
+        {orientMap[targetPosition].idPathMap[markerEnd || 'one']}
+      </marker>
+    </defs>
+  );
+};

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

@@ -0,0 +1,130 @@
+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) || 1) * 4,
+              strokeOpacity: selectedEdgeId === id ? 0.1 : 0,
+            }}
+            fill="none"
+          />
+
+          {/* Main path for the edge */}
+          <path
+            id={id}
+            d={edgePath}
+            onClick={() => isErDiagram && toggleModal(setSelectedEdgeId)}
+            onDoubleClick={createBendPoint}
+            style={{ ...style }}
+            markerStart={isErDiagram ? `url(#${id}-marker-start)` : markerStart}
+            markerEnd={isErDiagram ? `url(#${id}-marker-end)` : markerEnd}
+            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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +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',
+}

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

@@ -0,0 +1,119 @@
+import { Edge } from '@xyflow/react';
+import { closestPoint } from '../../utils/closestPoint';
+import { DiagramStore } from '../../contexts/DiagramProvider';
+import { EdgeTypes } from './custom-edge.type';
+import { HistoryEvent } from '../../types/history-event';
+import { ICardNode } from '../../types/card-node';
+import { useCustomReactFlow } from '../../hooks/customUseReactFlow';
+import { useDiagram } from '../../contexts/DiagramProvider';
+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

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