orcheo-canvas 0.0.1

package/src/features/workflow/pages/workflow-canvas/hooks/use-workflow-node-state.ts

@@ -0,0 +1,89 @@
+import { useWorkflowNodeDeletion } from "./use-workflow-node-deletion";
+import { useWorkflowStickyNotes } from "./use-workflow-sticky-notes";
+import { useDecoratedNodes } from "./use-decorated-nodes";
+import type { CanvasNode } from "@features/workflow/pages/workflow-canvas/helpers/types";
+import type { ValidationError } from "@features/workflow/components/canvas/connection-validator";
+
+type NodeRuntimeCacheEntry = Record<string, unknown>;
+
+type UseWorkflowNodeStateArgs = {
+  nodes: CanvasNode[];
+  searchMatches: string[];
+  searchMatchSet: Set<string>;
+  isSearchOpen: boolean;
+  currentSearchIndex: number;
+  latestNodesRef: React.MutableRefObject<CanvasNode[]>;
+  isRestoringRef: React.MutableRefObject<boolean>;
+  setNodes: React.Dispatch<React.SetStateAction<CanvasNode[]>>;
+  setNodesState: React.Dispatch<React.SetStateAction<CanvasNode[]>>;
+  setEdgesState: React.Dispatch<React.SetStateAction<CanvasEdge[]>>;
+  recordSnapshot: (options?: { force?: boolean }) => void;
+  setNodeRuntimeCache: React.Dispatch<
+    React.SetStateAction<Record<string, NodeRuntimeCacheEntry>>
+  >;
+  setValidationErrors: React.Dispatch<React.SetStateAction<ValidationError[]>>;
+  setSearchMatches: React.Dispatch<React.SetStateAction<string[]>>;
+  setSelectedNodeId: React.Dispatch<React.SetStateAction<string | null>>;
+  setActiveChatNodeId: React.Dispatch<React.SetStateAction<string | null>>;
+  setIsChatOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  activeChatNodeId: string | null;
+};
+
+export const useWorkflowNodeState = ({
+  nodes,
+  searchMatches,
+  searchMatchSet,
+  isSearchOpen,
+  currentSearchIndex,
+  latestNodesRef,
+  isRestoringRef,
+  setNodes,
+  setNodesState,
+  setEdgesState,
+  recordSnapshot,
+  setNodeRuntimeCache,
+  setValidationErrors,
+  setSearchMatches,
+  setSelectedNodeId,
+  setActiveChatNodeId,
+  setIsChatOpen,
+  activeChatNodeId,
+}: UseWorkflowNodeStateArgs) => {
+  const { resolveNodeLabel, deleteNodes, handleDeleteNode } =
+    useWorkflowNodeDeletion({
+      latestNodesRef,
+      isRestoringRef,
+      setNodesState,
+      setEdgesState,
+      recordSnapshot,
+      setNodeRuntimeCache,
+      setValidationErrors,
+      setSearchMatches,
+      setSelectedNodeId,
+      setActiveChatNodeId,
+      setIsChatOpen,
+      activeChatNodeId,
+    });
+
+  const { handleUpdateStickyNoteNode } = useWorkflowStickyNotes({
+    setNodes,
+  });
+
+  const decoratedNodes = useDecoratedNodes({
+    nodes,
+    isSearchOpen,
+    searchMatchSet,
+    searchMatches,
+    currentSearchIndex,
+    handleDeleteNode,
+    handleUpdateStickyNoteNode,
+  });
+
+  return {
+    decoratedNodes,
+    resolveNodeLabel,
+    deleteNodes,
+    handleDeleteNode,
+    handleUpdateStickyNoteNode,
+  };
+};

package/src/features/workflow/pages/workflow-canvas/hooks/use-workflow-saver.ts

@@ -0,0 +1,204 @@
+import { useCallback } from "react";
+import type { Dispatch, SetStateAction } from "react";
+
+import { toast } from "@/hooks/use-toast";
+import {
+  toPersistedEdge,
+  toPersistedNode,
+} from "@features/workflow/pages/workflow-canvas/helpers/transformers";
+import type {
+  CanvasEdge,
+  CanvasNode,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+import type {
+  WorkflowEdge as PersistedWorkflowEdge,
+  WorkflowNode as PersistedWorkflowNode,
+} from "@features/workflow/data/workflow-data";
+import {
+  getVersionSnapshot,
+  saveWorkflow as persistWorkflow,
+  type StoredWorkflow,
+} from "@features/workflow/lib/workflow-storage";
+
+interface WorkflowSaverOptions {
+  createSnapshot: () => { nodes: CanvasNode[]; edges: CanvasEdge[] };
+  convertPersistedNodesToCanvas: (
+    nodes: PersistedWorkflowNode[],
+  ) => CanvasNode[];
+  convertPersistedEdgesToCanvas: (
+    edges: PersistedWorkflowEdge[],
+  ) => CanvasEdge[];
+  setWorkflowName: Dispatch<SetStateAction<string>>;
+  setWorkflowDescription: Dispatch<SetStateAction<string>>;
+  setCurrentWorkflowId: Dispatch<SetStateAction<string | null>>;
+  setWorkflowVersions: Dispatch<SetStateAction<StoredWorkflow["versions"]>>;
+  setWorkflowTags: Dispatch<SetStateAction<string[]>>;
+  workflowName: string;
+  workflowDescription: string;
+  workflowTags: string[];
+  currentWorkflowId: string | null;
+  workflowIdFromRoute?: string;
+  navigate: (path: string, options?: { replace?: boolean }) => void;
+  applySnapshot: (
+    snapshot: { nodes: CanvasNode[]; edges: CanvasEdge[] },
+    options?: { resetHistory?: boolean },
+  ) => void;
+}
+
+interface WorkflowSaverHandlers {
+  handleSaveWorkflow: () => Promise<void>;
+  handleTagsChange: (value: string) => void;
+  handleRestoreVersion: (versionId: string) => Promise<void>;
+}
+
+export function useWorkflowSaver(
+  options: WorkflowSaverOptions,
+): WorkflowSaverHandlers {
+  const {
+    createSnapshot,
+    convertPersistedNodesToCanvas,
+    convertPersistedEdgesToCanvas,
+    setWorkflowName,
+    setWorkflowDescription,
+    setCurrentWorkflowId,
+    setWorkflowVersions,
+    setWorkflowTags,
+    workflowName,
+    workflowDescription,
+    workflowTags,
+    currentWorkflowId,
+    workflowIdFromRoute,
+    navigate,
+    applySnapshot,
+  } = options;
+
+  const handleSaveWorkflow = useCallback(async () => {
+    const snapshot = createSnapshot();
+    const persistedNodes = snapshot.nodes.map(toPersistedNode);
+    const persistedEdges = snapshot.edges.map(toPersistedEdge);
+    const timestampLabel = new Date().toLocaleString();
+
+    const tagsToPersist = workflowTags.length > 0 ? workflowTags : ["draft"];
+
+    try {
+      const saved = await persistWorkflow(
+        {
+          id: currentWorkflowId ?? undefined,
+          name: workflowName.trim() || "Untitled Workflow",
+          description: workflowDescription.trim(),
+          tags: tagsToPersist,
+          nodes: persistedNodes,
+          edges: persistedEdges,
+        },
+        { versionMessage: `Manual save (${timestampLabel})` },
+      );
+
+      setCurrentWorkflowId(saved.id);
+      setWorkflowName(saved.name);
+      setWorkflowDescription(saved.description ?? "");
+      setWorkflowTags(saved.tags ?? tagsToPersist);
+      setWorkflowVersions(saved.versions ?? []);
+
+      toast({
+        title: "Workflow saved",
+        description: `"${saved.name}" has been updated.`,
+      });
+
+      if (!workflowIdFromRoute || workflowIdFromRoute !== saved.id) {
+        navigate(`/workflow-canvas/${saved.id}`, {
+          replace: !!workflowIdFromRoute,
+        });
+      }
+    } catch (error) {
+      toast({
+        title: "Failed to save workflow",
+        description:
+          error instanceof Error ? error.message : "Unknown error occurred",
+        variant: "destructive",
+      });
+    }
+  }, [
+    createSnapshot,
+    currentWorkflowId,
+    navigate,
+    setCurrentWorkflowId,
+    setWorkflowDescription,
+    setWorkflowName,
+    setWorkflowTags,
+    setWorkflowVersions,
+    workflowDescription,
+    workflowIdFromRoute,
+    workflowName,
+    workflowTags,
+  ]);
+
+  const handleTagsChange = useCallback(
+    (value: string) => {
+      const tags = value
+        .split(",")
+        .map((tag) => tag.trim())
+        .filter((tag) => tag.length > 0);
+      setWorkflowTags(tags);
+    },
+    [setWorkflowTags],
+  );
+
+  const handleRestoreVersion = useCallback(
+    async (versionId: string) => {
+      if (!currentWorkflowId) {
+        toast({
+          title: "Save required",
+          description: "Save this workflow before restoring versions.",
+          variant: "destructive",
+        });
+        return;
+      }
+
+      try {
+        const snapshot = await getVersionSnapshot(currentWorkflowId, versionId);
+        if (!snapshot) {
+          toast({
+            title: "Version unavailable",
+            description: "We couldn't load that version. Please try again.",
+            variant: "destructive",
+          });
+          return;
+        }
+
+        const canvasNodes = convertPersistedNodesToCanvas(snapshot.nodes ?? []);
+        const canvasEdges = convertPersistedEdgesToCanvas(snapshot.edges ?? []);
+        applySnapshot(
+          { nodes: canvasNodes, edges: canvasEdges },
+          { resetHistory: true },
+        );
+        setWorkflowName(snapshot.name);
+        setWorkflowDescription(snapshot.description ?? "");
+        toast({
+          title: "Version loaded",
+          description: "Review the restored version and save to keep it.",
+        });
+      } catch (error) {
+        toast({
+          title: "Failed to restore version",
+          description:
+            error instanceof Error ? error.message : "Unknown error occurred",
+          variant: "destructive",
+        });
+      }
+    },
+    [
+      applySnapshot,
+      convertPersistedEdgesToCanvas,
+      convertPersistedNodesToCanvas,
+      currentWorkflowId,
+      setWorkflowDescription,
+      setWorkflowName,
+    ],
+  );
+
+  return {
+    handleSaveWorkflow,
+    handleTagsChange,
+    handleRestoreVersion,
+  };
+}

package/src/features/workflow/pages/workflow-canvas/hooks/use-workflow-search.ts

@@ -0,0 +1,167 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { ReactFlowInstance } from "@xyflow/react";
+
+import type {
+  CanvasEdge,
+  CanvasNode,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+type UseWorkflowSearchArgs = {
+  nodesRef: React.MutableRefObject<CanvasNode[]>;
+  reactFlowInstance: React.MutableRefObject<ReactFlowInstance<
+    CanvasNode,
+    CanvasEdge
+  > | null>;
+};
+
+export const useWorkflowSearch = ({
+  nodesRef,
+  reactFlowInstance,
+}: UseWorkflowSearchArgs) => {
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [searchMatches, setSearchMatches] = useState<string[]>([]);
+  const [currentSearchIndex, setCurrentSearchIndex] = useState(0);
+
+  const searchMatchSet = useMemo(() => new Set(searchMatches), [searchMatches]);
+
+  const highlightMatch = useCallback(
+    (index: number) => {
+      const instance = reactFlowInstance.current;
+      if (!instance) {
+        return;
+      }
+
+      const nodeId = searchMatches[index];
+      if (!nodeId) {
+        return;
+      }
+
+      const node = instance.getNode(nodeId);
+      if (!node) {
+        return;
+      }
+
+      const position = node.positionAbsolute ?? node.position;
+      const width = node.measured?.width ?? node.width ?? 180;
+      const height = node.measured?.height ?? node.height ?? 120;
+
+      const centerX = (position?.x ?? 0) + width / 2;
+      const centerY = (position?.y ?? 0) + height / 2;
+
+      const zoomLevel =
+        typeof instance.getZoom === "function"
+          ? Math.max(instance.getZoom(), 1.2)
+          : 1.2;
+
+      instance.setCenter(centerX, centerY, {
+        zoom: zoomLevel,
+        duration: 300,
+      });
+    },
+    [reactFlowInstance, searchMatches],
+  );
+
+  const handleSearchNodes = useCallback(
+    (query: string) => {
+      const normalized = query.trim().toLowerCase();
+
+      if (!normalized) {
+        setSearchMatches([]);
+        setCurrentSearchIndex(0);
+        return;
+      }
+
+      const matches = nodesRef.current
+        .filter((node) => {
+          const label = String(node.data?.label ?? "").toLowerCase();
+          const description = String(
+            node.data?.description ?? "",
+          ).toLowerCase();
+          return (
+            label.includes(normalized) ||
+            description.includes(normalized) ||
+            node.id.toLowerCase().includes(normalized)
+          );
+        })
+        .map((node) => node.id);
+
+      setSearchMatches(matches);
+      setCurrentSearchIndex(matches.length > 0 ? 0 : 0);
+    },
+    [nodesRef],
+  );
+
+  const handleHighlightNext = useCallback(() => {
+    if (searchMatches.length === 0) {
+      return;
+    }
+    setCurrentSearchIndex((index) => (index + 1) % searchMatches.length);
+  }, [searchMatches]);
+
+  const handleHighlightPrevious = useCallback(() => {
+    if (searchMatches.length === 0) {
+      return;
+    }
+    setCurrentSearchIndex(
+      (index) => (index - 1 + searchMatches.length) % searchMatches.length,
+    );
+  }, [searchMatches]);
+
+  const handleCloseSearch = useCallback(() => {
+    setIsSearchOpen(false);
+    setSearchMatches([]);
+    setCurrentSearchIndex(0);
+  }, []);
+
+  const handleToggleSearch = useCallback(() => {
+    setIsSearchOpen((previous) => {
+      const next = !previous;
+      setSearchMatches([]);
+      setCurrentSearchIndex(0);
+      return next;
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!isSearchOpen) {
+      return;
+    }
+
+    if (searchMatches.length === 0) {
+      return;
+    }
+
+    const safeIndex = Math.min(
+      currentSearchIndex,
+      Math.max(searchMatches.length - 1, 0),
+    );
+
+    if (safeIndex !== currentSearchIndex) {
+      setCurrentSearchIndex(safeIndex);
+      return;
+    }
+
+    highlightMatch(safeIndex);
+  }, [
+    currentSearchIndex,
+    highlightMatch,
+    isSearchOpen,
+    searchMatches,
+    setCurrentSearchIndex,
+  ]);
+
+  return {
+    isSearchOpen,
+    setIsSearchOpen,
+    searchMatches,
+    setSearchMatches,
+    currentSearchIndex,
+    setCurrentSearchIndex,
+    searchMatchSet,
+    handleSearchNodes,
+    handleHighlightNext,
+    handleHighlightPrevious,
+    handleCloseSearch,
+    handleToggleSearch,
+  };
+};

package/src/features/workflow/pages/workflow-canvas/hooks/use-workflow-sticky-notes.ts

@@ -0,0 +1,89 @@
+import { useCallback } from "react";
+
+import type { StickyNoteNodeData } from "@features/workflow/components/nodes/sticky-note-node";
+import {
+  DEFAULT_STICKY_NOTE_COLOR,
+  DEFAULT_STICKY_NOTE_HEIGHT,
+  DEFAULT_STICKY_NOTE_WIDTH,
+  STICKY_NOTE_MIN_HEIGHT,
+  STICKY_NOTE_MIN_WIDTH,
+  isStickyNoteColor,
+  sanitizeStickyNoteContent,
+  sanitizeStickyNoteDimension,
+} from "@features/workflow/pages/workflow-canvas/helpers/sticky-notes";
+import type {
+  CanvasNode,
+  NodeData,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+type UseWorkflowStickyNotesArgs = {
+  setNodes: React.Dispatch<React.SetStateAction<CanvasNode[]>>;
+};
+
+export const useWorkflowStickyNotes = ({
+  setNodes,
+}: UseWorkflowStickyNotesArgs) => {
+  const handleUpdateStickyNoteNode = useCallback(
+    (
+      nodeId: string,
+      updates: Partial<
+        Pick<StickyNoteNodeData, "color" | "content" | "width" | "height">
+      >,
+    ) => {
+      setNodes((nodes) =>
+        nodes.map((node) => {
+          if (node.id !== nodeId) {
+            return node;
+          }
+
+          const sanitizedUpdates: Record<string, unknown> = {};
+
+          if ("color" in updates) {
+            sanitizedUpdates.color = isStickyNoteColor(updates.color)
+              ? updates.color
+              : DEFAULT_STICKY_NOTE_COLOR;
+          }
+
+          if ("content" in updates && typeof updates.content === "string") {
+            sanitizedUpdates.content = sanitizeStickyNoteContent(
+              updates.content,
+            );
+          }
+
+          if ("width" in updates && typeof updates.width === "number") {
+            sanitizedUpdates.width = sanitizeStickyNoteDimension(
+              updates.width,
+              DEFAULT_STICKY_NOTE_WIDTH,
+              STICKY_NOTE_MIN_WIDTH,
+            );
+          }
+
+          if ("height" in updates && typeof updates.height === "number") {
+            sanitizedUpdates.height = sanitizeStickyNoteDimension(
+              updates.height,
+              DEFAULT_STICKY_NOTE_HEIGHT,
+              STICKY_NOTE_MIN_HEIGHT,
+            );
+          }
+
+          if (Object.keys(sanitizedUpdates).length === 0) {
+            return node;
+          }
+
+          return {
+            ...node,
+            data: {
+              ...(node.data as NodeData),
+              ...sanitizedUpdates,
+            },
+          };
+        }),
+      );
+    },
+    [setNodes],
+  );
+
+  return {
+    handleUpdateStickyNoteNode,
+  };
+};

package/src/features/workflow/pages/workflow-canvas/hooks/use-workflow-storage-listener.ts

@@ -0,0 +1,51 @@
+import type { Dispatch, SetStateAction } from "react";
+import { useEffect } from "react";
+
+import {
+  WORKFLOW_STORAGE_EVENT,
+  getWorkflowById,
+} from "@features/workflow/lib/workflow-storage";
+import type { StoredWorkflow } from "@features/workflow/lib/workflow-storage";
+
+interface UseWorkflowStorageListenerParams {
+  currentWorkflowId: string | null;
+  setWorkflowVersions: Dispatch<SetStateAction<StoredWorkflow["versions"]>>;
+  setWorkflowTags: Dispatch<SetStateAction<string[]>>;
+}
+
+export function useWorkflowStorageListener({
+  currentWorkflowId,
+  setWorkflowVersions,
+  setWorkflowTags,
+}: UseWorkflowStorageListenerParams) {
+  useEffect(() => {
+    if (!currentWorkflowId) {
+      return;
+    }
+
+    const targetWindow = typeof window !== "undefined" ? window : undefined;
+    if (!targetWindow) {
+      return;
+    }
+
+    const handleStorageUpdate = async () => {
+      try {
+        const updated = await getWorkflowById(currentWorkflowId);
+        if (updated) {
+          setWorkflowVersions(updated.versions ?? []);
+          setWorkflowTags(updated.tags ?? ["draft"]);
+        }
+      } catch (error) {
+        console.error("Failed to reload workflow", error);
+      }
+    };
+
+    targetWindow.addEventListener(WORKFLOW_STORAGE_EVENT, handleStorageUpdate);
+    return () => {
+      targetWindow.removeEventListener(
+        WORKFLOW_STORAGE_EVENT,
+        handleStorageUpdate,
+      );
+    };
+  }, [currentWorkflowId, setWorkflowTags, setWorkflowVersions]);
+}

package/src/features/workflow/pages/workflow-canvas/hooks/use-workflow-validation-state.ts

@@ -0,0 +1,22 @@
+import { useState } from "react";
+
+import type { ValidationError } from "@features/workflow/components/canvas/connection-validator";
+
+export function useWorkflowValidationState() {
+  const [validationErrors, setValidationErrors] = useState<ValidationError[]>(
+    [],
+  );
+  const [isValidating, setIsValidating] = useState(false);
+  const [lastValidationRun, setLastValidationRun] = useState<string | null>(
+    null,
+  );
+
+  return {
+    validationErrors,
+    setValidationErrors,
+    isValidating,
+    setIsValidating,
+    lastValidationRun,
+    setLastValidationRun,
+  };
+}