@flowuent-org/diagramming-core 1.1.0 → 1.1.2

package/packages/diagrams/src/lib/hooks/useDragCallbacks.tsx

@@ -0,0 +1,122 @@
+import { Dispatch, SetStateAction, useCallback } from 'react';
+import { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
+import { useReactFlow } from '@xyflow/react';
+import { IBlock, ICardNode, ICardNodeData } from '../types/card-node';
+
+interface UseDragCallbacksProps {
+  setActiveItem: Dispatch<SetStateAction<IBlock | null>>;
+  setActiveCard: (card: ICardNodeData | null) => void;
+}
+
+export default function useDragCallbacks({
+  setActiveItem,
+  setActiveCard,
+}: UseDragCallbacksProps) {
+  const rf = useReactFlow<ICardNode>();
+
+  const onDragStart = useCallback(
+    (e: DragStartEvent) => {
+      setActiveItem(e.active.data.current?.blockData ?? null);
+      setActiveCard(e.active.data.current?.cardData ?? null);
+    },
+    [setActiveItem, setActiveCard],
+  );
+
+  const onDragCancel = useCallback(() => {
+    setActiveItem(null);
+    setActiveCard(null);
+  }, [setActiveItem, setActiveCard]);
+
+  const onDragEnd = useCallback(
+    (e: DragEndEvent) => {
+      if (!e.active.data.current) {
+        return;
+      }
+
+      if (e.over?.data.current?.sortable) {
+        // It is a sort
+        const node = rf.getNode(e.over.data.current.nodeId)!;
+        const items = node.data.blocks ?? [];
+        const oldIndex = items.findIndex((blk) => blk.id === e.active.id);
+        const newIndex = items.findIndex((blk) => blk.id === e.over?.id);
+        const newItems = arrayMove(items, oldIndex, newIndex);
+
+        rf.setNodes(
+          rf.getNodes().map((n) => {
+            if (n.id === node.id) {
+              n.data = {
+                ...n.data,
+                blocks: newItems,
+              };
+              return n;
+            }
+            return n;
+          }),
+        );
+      } else if (e?.over?.id.toString().includes('node-')) {
+        // Dropped on node
+        const id = e.over.id.toString().split('-')[1];
+        const blockId: string = e.active.id.toString();
+        const currentBlockNodeId = e.active.data.current.nodeId;
+        rf.setNodes(
+          rf.getNodes().map((node) => {
+            if (node.id === id && currentBlockNodeId !== id) {
+              const newid = new Date().getMilliseconds().toString();
+              const blockToAdd = e.active.data.current?.blockData ?? [
+                {
+                  id: newid,
+                  color: 'red',
+                  title: 'Dropped',
+                },
+              ];
+
+              node.data = {
+                ...node.data,
+                blocks: node.data.blocks?.concat(blockToAdd),
+              };
+              return node;
+            }
+            if (node.id === currentBlockNodeId && currentBlockNodeId !== id) {
+              node.data = {
+                ...node.data,
+                blocks: node.data.blocks?.filter((el) => el.id !== blockId),
+              };
+              return node;
+            }
+            return node;
+          }),
+        );
+      } else if (!e.active.data.current.blockData) {
+        // Dropped on Canvas
+        const ev = e.activatorEvent as PointerEvent;
+        const id = new Date().getMilliseconds().toString();
+        const newNode: ICardNode = {
+          data: {
+            blocks: [],
+            color: 'green',
+            isPinned: false,
+            isBlock: false,
+            nodeId: id,
+            parentId: 'parentId',
+            title: 'Text',
+            ...e.active.data.current?.data,
+          },
+          id,
+          type: e.active.data.current?.type ?? 'card',
+          position: rf.screenToFlowPosition({
+            x: ev.clientX + e.delta.x,
+            y: ev.clientY + e.delta.y,
+          }),
+        };
+        rf.addNodes(newNode);
+      }
+
+      setActiveItem(null);
+      setActiveCard(null);
+    },
+    [rf, setActiveCard, setActiveItem],
+  );
+
+  return { onDragEnd, onDragStart, onDragCancel };
+}

package/packages/diagrams/src/lib/hooks/useFormValidation.ts

@@ -0,0 +1,349 @@
+import { useState, useCallback } from 'react';
+import {
+  validateFunctionName,
+  validateParameters,
+  validateCustomCode,
+  FunctionParameter,
+  Expression,
+} from '../types/ndoe-form-types';
+
+export interface ValidationErrors {
+  [key: string]: string | null;
+}
+
+export interface ValidationState {
+  errors: ValidationErrors;
+  isValid: boolean;
+  touched: { [key: string]: boolean };
+}
+
+export const useFormValidation = () => {
+  const [validationState, setValidationState] = useState<ValidationState>({
+    errors: {},
+    isValid: true,
+    touched: {},
+  });
+
+  const validateField = useCallback(
+    (
+      fieldName: string,
+      value: any,
+      validator: (value: any) => string | null,
+    ) => {
+      const error = validator(value);
+      return error;
+    },
+    [],
+  );
+
+  const setFieldError = useCallback(
+    (fieldName: string, error: string | null) => {
+      setValidationState((prev) => ({
+        ...prev,
+        errors: {
+          ...prev.errors,
+          [fieldName]: error,
+        },
+        isValid: !Object.values({ ...prev.errors, [fieldName]: error }).some(
+          Boolean,
+        ),
+      }));
+    },
+    [],
+  );
+
+  const setFieldTouched = useCallback(
+    (fieldName: string, touched: boolean = true) => {
+      setValidationState((prev) => ({
+        ...prev,
+        touched: {
+          ...prev.touched,
+          [fieldName]: touched,
+        },
+      }));
+    },
+    [],
+  );
+
+  const validateFunctionForm = useCallback(
+    (formData: {
+      name: string;
+      parameters: FunctionParameter[];
+      mode: string;
+      customCode: string;
+    }) => {
+      const errors: ValidationErrors = {};
+
+      // Validate function name
+      errors.name = validateFunctionName(formData.name);
+
+      // Validate parameters
+      errors.parameters = validateParameters(formData.parameters);
+
+      // Validate custom code if in advanced mode
+      errors.customCode = validateCustomCode(
+        formData.customCode,
+        formData.mode,
+      );
+
+      // Check if form is valid
+      const isValid = !Object.values(errors).some(Boolean);
+
+      setValidationState((prev) => ({
+        ...prev,
+        errors,
+        isValid,
+      }));
+
+      return { errors, isValid };
+    },
+    [],
+  );
+
+  const validateReturnNodeForm = useCallback(
+    (formData: { value: Expression; dataType?: string }) => {
+      const errors: ValidationErrors = {};
+
+      // Validation now handled by ExpressionInput component with new validation system
+      // No additional validation needed here
+
+      // Check if form is valid
+      const isValid = !Object.values(errors).some(Boolean);
+
+      setValidationState((prev) => ({
+        ...prev,
+        errors,
+        isValid,
+      }));
+
+      return { errors, isValid };
+    },
+    [],
+  );
+
+  const validateLetNodeForm = useCallback(
+    (formData: { bindings: [string, Expression][] }) => {
+      const errors: ValidationErrors = {};
+
+      // Validation now handled by ExpressionInput components and inline validation
+      // No additional validation needed here
+
+      // Check if form is valid
+      const isValid = !Object.values(errors).some(Boolean);
+
+      setValidationState((prev) => ({
+        ...prev,
+        errors,
+        isValid,
+      }));
+
+      return { errors, isValid };
+    },
+    [],
+  );
+
+  const validateSetNodeForm = useCallback(
+    (formData: {
+      variable: string;
+      value: Expression;
+      valueDataType?: string;
+    }) => {
+      const errors: ValidationErrors = {};
+
+      // Basic variable name validation (simple regex check)
+      if (!formData.variable || formData.variable.trim() === '') {
+        errors.variable = 'Variable name cannot be empty.';
+      } else if (!/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(formData.variable)) {
+        errors.variable =
+          'Variable name must start with a letter or underscore and contain only letters, numbers, and underscores.';
+      }
+
+      // Value validation now handled by ExpressionInput component with new validation system
+
+      // Check if form is valid
+      const isValid = !Object.values(errors).some(Boolean);
+
+      setValidationState((prev) => ({
+        ...prev,
+        errors,
+        isValid,
+      }));
+
+      return { errors, isValid };
+    },
+    [],
+  );
+
+  const validateIfNodeForm = useCallback(
+    (formData: { condition: Expression; conditionDataType?: string }) => {
+      const errors: ValidationErrors = {};
+
+      // Validation now handled by ExpressionInput component with new validation system
+      // No additional validation needed here
+
+      // Check if form is valid
+      const isValid = !Object.values(errors).some(Boolean);
+
+      setValidationState((prev) => ({
+        ...prev,
+        errors,
+        isValid,
+      }));
+
+      return { errors, isValid };
+    },
+    [],
+  );
+
+  const validateLoopNodeForm = useCallback(
+    (formData: { condition: Expression; conditionDataType?: string }) => {
+      const errors: ValidationErrors = {};
+
+      // Validation now handled by ExpressionInput component with new validation system
+      // No additional validation needed here
+
+      // Check if form is valid
+      const isValid = !Object.values(errors).some(Boolean);
+
+      setValidationState((prev) => ({
+        ...prev,
+        errors,
+        isValid,
+      }));
+
+      return { errors, isValid };
+    },
+    [],
+  );
+
+  const validateForLoopNodeForm = useCallback(
+    (formData: {
+      init: Expression;
+      condition: Expression;
+      update: Expression;
+      initDataType?: string;
+      conditionDataType?: string;
+      updateDataType?: string;
+    }) => {
+      const errors: ValidationErrors = {};
+
+      // Basic empty checks - detailed validation handled by ExpressionInput components
+      if (
+        !formData.init ||
+        (typeof formData.init === 'string' && formData.init.trim() === '')
+      ) {
+        errors.init = 'Initialization cannot be empty.';
+      }
+
+      if (
+        !formData.condition ||
+        (typeof formData.condition === 'string' &&
+          formData.condition.trim() === '')
+      ) {
+        errors.condition = 'Condition cannot be empty.';
+      }
+
+      if (
+        !formData.update ||
+        (typeof formData.update === 'string' && formData.update.trim() === '')
+      ) {
+        errors.update = 'Update cannot be empty.';
+      }
+
+      // Check if form is valid
+      const isValid = !Object.values(errors).some(Boolean);
+
+      setValidationState((prev) => ({
+        ...prev,
+        errors,
+        isValid,
+      }));
+
+      return { errors, isValid };
+    },
+    [],
+  );
+
+  const shouldShowFieldError = useCallback(
+    (fieldName: string) => {
+      return (
+        validationState.touched[fieldName] &&
+        !!validationState.errors[fieldName]
+      );
+    },
+    [validationState],
+  );
+
+  const getFieldError = useCallback(
+    (fieldName: string) => {
+      return validationState.errors[fieldName] || null;
+    },
+    [validationState],
+  );
+
+  const clearFieldError = useCallback(
+    (fieldName: string) => {
+      setFieldError(fieldName, null);
+    },
+    [setFieldError],
+  );
+
+  const clearAllErrors = useCallback(() => {
+    setValidationState((prev) => ({
+      ...prev,
+      errors: {},
+      isValid: true,
+    }));
+  }, []);
+
+  const validateForm = useCallback(
+    (formData: any, formType: string) => {
+      switch (formType) {
+        case 'function':
+          return validateFunctionForm(formData);
+        case 'return':
+          return validateReturnNodeForm(formData);
+        case 'let':
+          return validateLetNodeForm(formData);
+        case 'set':
+          return validateSetNodeForm(formData);
+        case 'if':
+          return validateIfNodeForm(formData);
+        case 'loop':
+          return validateLoopNodeForm(formData);
+        case 'forLoop':
+          return validateForLoopNodeForm(formData);
+        default:
+          return { errors: {}, isValid: true };
+      }
+    },
+    [
+      validateFunctionForm,
+      validateReturnNodeForm,
+      validateLetNodeForm,
+      validateSetNodeForm,
+      validateIfNodeForm,
+      validateLoopNodeForm,
+      validateForLoopNodeForm,
+    ],
+  );
+
+  return {
+    validationState,
+    validateField,
+    setFieldError,
+    setFieldTouched,
+    shouldShowFieldError,
+    getFieldError,
+    clearFieldError,
+    clearAllErrors,
+    validateForm,
+    validateFunctionForm,
+    validateReturnNodeForm,
+    validateLetNodeForm,
+    validateSetNodeForm,
+    validateIfNodeForm,
+    validateLoopNodeForm,
+    validateForLoopNodeForm,
+  };
+};

package/packages/diagrams/src/lib/hooks/useFunctionFormCallbacks.ts

@@ -0,0 +1,136 @@
+import { useCallback } from 'react';
+import {
+  FunctionFormData,
+  FunctionParameter,
+  SaveFunctionParams,
+} from '../templates/node-forms/FunctionForm';
+import { useAddFunction } from '../contexts/DiagramProvider';
+
+type FunctionFormChanges = {
+  [K in keyof FunctionFormData]?: FunctionFormData[K];
+};
+
+interface UseFunctionFormCallbacksProps {
+  handleInputChange: (
+    field: keyof FunctionFormData,
+    value: string | FunctionParameter[],
+  ) => void;
+  handleMultipleInputChanges: (changes: FunctionFormChanges) => void;
+  setModalOpen: (open: boolean) => void;
+  setCreateModalOpen: (open: boolean) => void;
+}
+
+export const useFunctionFormCallbacks = ({
+  handleInputChange,
+  handleMultipleInputChanges,
+  setModalOpen,
+  setCreateModalOpen,
+}: UseFunctionFormCallbacksProps) => {
+  const addFunction = useAddFunction();
+
+  const handleModalClose = useCallback(() => {
+    setModalOpen(false);
+  }, [setModalOpen]);
+
+  const handleModalOpen = useCallback(() => {
+    setModalOpen(true);
+  }, [setModalOpen]);
+
+  const handleCreateModalClose = useCallback(() => {
+    setCreateModalOpen(false);
+  }, [setCreateModalOpen]);
+
+  const handleModeChange = useCallback(
+    (_: React.SyntheticEvent, newValue: string) => {
+      handleInputChange('mode', newValue);
+    },
+    [handleInputChange],
+  );
+
+  const handleNameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      handleInputChange('name', e.target.value);
+    },
+    [handleInputChange],
+  );
+
+  const handleParametersChange = useCallback(
+    (parameters: FunctionParameter[]) => {
+      handleInputChange('parameters', parameters);
+    },
+    [handleInputChange],
+  );
+
+  const handleCustomCodeChange = useCallback(
+    (code: string) => {
+      handleInputChange('customCode', code);
+    },
+    [handleInputChange],
+  );
+
+  const handleCreate = useCallback(
+    (func: SaveFunctionParams) => {
+      const newId = Date.now().toString();
+      // Ensure args is an array of { name, type } objects
+      const parameters: FunctionParameter[] = func.args.map((arg) => ({
+        name: arg.name,
+        type: arg.type || 'number',
+      }));
+
+      addFunction({
+        id: newId,
+        name: func.name,
+        args: parameters,
+        code: func.code,
+      });
+
+      handleMultipleInputChanges({
+        name: func.name,
+        parameters,
+        customCode: func.code,
+      });
+
+      setCreateModalOpen(false);
+    },
+    [addFunction, handleMultipleInputChanges, setCreateModalOpen],
+  );
+
+  const handleSaveAsFunction = useCallback(
+    ({ name, args, code }: SaveFunctionParams) => {
+      const newId = Date.now().toString();
+      // Ensure args is an array of { name, type }
+      const parameters: FunctionParameter[] = args.map((arg) => ({
+        name: arg.name,
+        type: arg.type || 'number',
+      }));
+
+      addFunction({
+        id: newId,
+        name,
+        args: parameters,
+        code,
+      });
+
+      handleMultipleInputChanges({
+        name,
+        parameters,
+        customCode: code,
+      });
+
+      setModalOpen(false);
+    },
+    [addFunction, handleMultipleInputChanges, setModalOpen],
+  );
+
+  return {
+    handleModalClose,
+    handleModalOpen,
+    handleCreateModalClose,
+    handleModeChange,
+    handleNameChange,
+    handleParametersChange,
+    handleCustomCodeChange,
+    handleCreate,
+    handleSaveAsFunction,
+  };
+};

package/packages/diagrams/src/lib/hooks/useIsSelectedNode.ts

@@ -0,0 +1,11 @@
+import { useSelectedNode } from '../contexts/DiagramProvider';
+import { useNodeId } from '../contexts/CardDataProvider';
+
+const useIsSelectedNode = () => {
+  const id = useNodeId();
+  const selectedNode = useSelectedNode();
+
+  return id === selectedNode;
+};
+
+export default useIsSelectedNode;

package/packages/diagrams/src/lib/hooks/useModalControls.ts

@@ -0,0 +1,13 @@
+// File: src/components/AddNodeAnchor/useAddNodeAnchor.ts
+import { useState } from 'react';
+
+export const useModalControls = () => {
+  const [open, setOpen] = useState(false);
+
+  const onClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.persist();
+    setOpen(true);
+  };
+
+  return { open, onClick, setOpen };
+};

package/packages/diagrams/src/lib/hooks/useNodeDragHandlers.ts

@@ -0,0 +1,43 @@
+import { useCallback, useRef } from 'react';
+import { Edge, useNodeId, Node } from '@xyflow/react';
+import { ICardNode } from '../types/card-node';
+import { useDiagramEdges, useDiagramNodes } from '../contexts/DiagramProvider';
+import { useSetDraggedCard } from '../contexts/CardDataProvider';
+import React from 'react';
+
+const useNodeDragHandlers = () => {
+  const nodeId = useNodeId();
+  const nodes = useDiagramNodes();
+  const edges = useDiagramEdges();
+  const setDraggedCard = useSetDraggedCard();
+  const dragData = useRef<{ nodes: ICardNode[]; edges: Edge[] } | null>(null);
+
+  const handleOnNodeDragStart = useCallback(
+    (_event: React.MouseEvent, node: Node) => {
+      const cardNode = node as ICardNode;
+      if (cardNode.id === nodeId) {
+        setDraggedCard(nodeId);
+        dragData.current = {
+          nodes: JSON.parse(JSON.stringify(nodes)),
+          edges: JSON.parse(JSON.stringify(edges)),
+        };
+      }
+    },
+    [nodeId, nodes, edges, setDraggedCard],
+  );
+
+  const handleOnNodeDragEnd = useCallback(
+    (_event: React.MouseEvent, node: Node) => {
+      const cardNode = node as ICardNode;
+      if (cardNode.id === nodeId) {
+        setDraggedCard(null);
+        dragData.current = null;
+      }
+    },
+    [nodeId, setDraggedCard],
+  );
+
+  return { handleOnNodeDragStart, handleOnNodeDragEnd };
+};
+
+export default useNodeDragHandlers;