@flowdrop/flowdrop 1.0.0

package/dist/stores/workflowStore.svelte.js

@@ -0,0 +1,649 @@
+/**
+ * Workflow Store for FlowDrop (Svelte 5 Runes)
+ *
+ * Provides global state management for workflows with dirty state tracking
+ * and undo/redo history integration.
+ *
+ * **Important: Single-instance only.** This store uses module-level singletons.
+ * Only one FlowDrop editor instance per page is supported. Mounting multiple
+ * FlowDrop editors on the same page will cause them to share workflow state.
+ *
+ * @module stores/workflowStore
+ */
+import { DEFAULT_WORKFLOW_FORMAT } from '../types/index.js';
+import { historyService } from '../services/historyService.js';
+/**
+ * Safely build updated workflow metadata, providing defaults for required fields.
+ */
+function buildMetadata(existing, updates) {
+    return {
+        version: existing?.version ?? '1.0',
+        createdAt: existing?.createdAt ?? new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        author: existing?.author,
+        tags: existing?.tags,
+        versionId: existing?.versionId,
+        updateNumber: existing?.updateNumber,
+        format: existing?.format,
+        ...updates
+    };
+}
+// =========================================================================
+// Core Workflow State (Svelte 5 Runes)
+// =========================================================================
+/** Global workflow state */
+let workflowState = $state(null);
+// =========================================================================
+// Dirty State Tracking
+// =========================================================================
+/**
+ * State for tracking if there are unsaved changes
+ *
+ * This is set to true whenever the workflow changes after initialization.
+ * It can be reset to false by calling markAsSaved().
+ */
+let isDirtyState = $state(false);
+/**
+ * Snapshot of the workflow when it was last saved
+ *
+ * Used to compare current state with saved state.
+ */
+let savedSnapshot = null;
+/**
+ * Callback for dirty state changes
+ *
+ * Set by the App component to notify parent application.
+ */
+let onDirtyStateChangeCallback = null;
+/**
+ * Callback for workflow changes
+ *
+ * Set by the App component to notify parent application.
+ */
+let onWorkflowChangeCallback = null;
+/**
+ * Flag to track if we're currently restoring from history (undo/redo)
+ *
+ * When true, prevents pushing to history to avoid recursive loops.
+ */
+let isRestoringFromHistory = false;
+/**
+ * Flag to track if history recording is enabled
+ *
+ * Can be disabled for bulk operations or when history is not needed.
+ */
+let historyEnabled = true;
+// =========================================================================
+// Getter Functions (Reactive State Access)
+// =========================================================================
+/**
+ * Get the current workflow store value reactively
+ *
+ * @returns The current workflow or null
+ */
+export function getWorkflowStore() {
+    return workflowState;
+}
+/**
+ * Get the current dirty state reactively
+ *
+ * @returns true if there are unsaved changes
+ */
+export function getIsDirty() {
+    return isDirtyState;
+}
+/**
+ * Get the workflow ID reactively
+ *
+ * @returns The workflow ID or null
+ */
+export function getWorkflowId() {
+    return workflowState?.id ?? null;
+}
+/**
+ * Get the workflow name reactively
+ *
+ * @returns The workflow name or 'Untitled Workflow'
+ */
+export function getWorkflowName() {
+    return workflowState?.name ?? 'Untitled Workflow';
+}
+/**
+ * Get the workflow nodes reactively
+ *
+ * @returns Array of workflow nodes
+ */
+export function getWorkflowNodes() {
+    return workflowState?.nodes ?? [];
+}
+/**
+ * Get the workflow edges reactively
+ *
+ * @returns Array of workflow edges
+ */
+export function getWorkflowEdges() {
+    return workflowState?.edges ?? [];
+}
+/**
+ * Get the workflow metadata reactively
+ *
+ * @returns The workflow metadata with defaults
+ */
+export function getWorkflowMetadata() {
+    return (workflowState?.metadata ?? {
+        version: '1.0.0',
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        versionId: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+        updateNumber: 0
+    });
+}
+/**
+ * Get the current workflow format reactively
+ *
+ * @returns The workflow format string
+ */
+export function getWorkflowFormat() {
+    return workflowState?.metadata?.format ?? DEFAULT_WORKFLOW_FORMAT;
+}
+/**
+ * Get workflow change summary reactively (useful for triggering saves)
+ *
+ * @returns Object with nodes, edges, and name
+ */
+export function getWorkflowChanged() {
+    return {
+        nodes: getWorkflowNodes(),
+        edges: getWorkflowEdges(),
+        name: getWorkflowName()
+    };
+}
+/**
+ * Get workflow validation state reactively
+ *
+ * @returns Validation info object
+ */
+export function getWorkflowValidation() {
+    const nodes = getWorkflowNodes();
+    const edges = getWorkflowEdges();
+    return {
+        hasNodes: nodes.length > 0,
+        hasEdges: edges.length > 0,
+        nodeCount: nodes.length,
+        edgeCount: edges.length,
+        isValid: nodes.length > 0 && edges.length >= 0
+    };
+}
+/**
+ * Get workflow metadata change summary reactively
+ *
+ * @returns Metadata change info
+ */
+export function getWorkflowMetadataChanged() {
+    const metadata = getWorkflowMetadata();
+    return {
+        createdAt: metadata.createdAt,
+        updatedAt: metadata.updatedAt,
+        version: metadata.version ?? '1.0.0'
+    };
+}
+/**
+ * Get connected handles reactively
+ *
+ * Provides a Set of all handle IDs that are currently connected to edges.
+ * Used by node components to implement hideUnconnectedHandles functionality.
+ *
+ * @example
+ * ```typescript
+ * import { getConnectedHandles } from './workflowStore.svelte.js';
+ *
+ * // Check if a specific handle is connected
+ * const isConnected = getConnectedHandles().has('node-1-input-data');
+ * ```
+ */
+export function getConnectedHandles() {
+    const edges = getWorkflowEdges();
+    const handles = new Set();
+    edges.forEach((edge) => {
+        // Add source handle (output port)
+        if (edge.sourceHandle) {
+            handles.add(edge.sourceHandle);
+        }
+        // Add target handle (input port)
+        if (edge.targetHandle) {
+            handles.add(edge.targetHandle);
+        }
+    });
+    return handles;
+}
+// =========================================================================
+// Callback Setters
+// =========================================================================
+/**
+ * Set the dirty state change callback
+ *
+ * @param callback - Function to call when dirty state changes
+ */
+export function setOnDirtyStateChange(callback) {
+    onDirtyStateChangeCallback = callback;
+}
+/**
+ * Set the workflow change callback
+ *
+ * @param callback - Function to call when workflow changes
+ */
+export function setOnWorkflowChange(callback) {
+    onWorkflowChangeCallback = callback;
+}
+// =========================================================================
+// Internal Helpers
+// =========================================================================
+/**
+ * Create a snapshot of the workflow for comparison
+ *
+ * @param workflow - The workflow to snapshot
+ * @returns A JSON string representation for comparison
+ */
+function createSnapshot(workflow) {
+    if (!workflow)
+        return null;
+    // Only include the parts that matter for "dirty" detection
+    const toSnapshot = {
+        name: workflow.name,
+        description: workflow.description,
+        nodes: workflow.nodes.map((n) => ({
+            id: n.id,
+            position: n.position,
+            data: {
+                label: n.data.label,
+                config: n.data.config
+            }
+        })),
+        edges: workflow.edges.map((e) => ({
+            id: e.id,
+            source: e.source,
+            target: e.target,
+            sourceHandle: e.sourceHandle,
+            targetHandle: e.targetHandle
+        }))
+    };
+    return JSON.stringify(toSnapshot);
+}
+/**
+ * Update dirty state based on current workflow
+ *
+ * Compares current workflow with saved snapshot.
+ */
+function updateDirtyState() {
+    const currentSnapshot = createSnapshot(workflowState);
+    const newIsDirty = currentSnapshot !== savedSnapshot;
+    if (newIsDirty !== isDirtyState) {
+        isDirtyState = newIsDirty;
+        if (onDirtyStateChangeCallback) {
+            onDirtyStateChangeCallback(newIsDirty);
+        }
+    }
+}
+/**
+ * Mark the workflow change and update dirty state
+ *
+ * @param changeType - The type of change that occurred
+ */
+function notifyWorkflowChange(changeType) {
+    if (workflowState && onWorkflowChangeCallback) {
+        onWorkflowChangeCallback(workflowState, changeType);
+    }
+    updateDirtyState();
+}
+/**
+ * Mark the current workflow state as saved
+ *
+ * Clears the dirty state by updating the saved snapshot.
+ */
+export function markAsSaved() {
+    savedSnapshot = createSnapshot(workflowState);
+    isDirtyState = false;
+    if (onDirtyStateChangeCallback) {
+        onDirtyStateChangeCallback(false);
+    }
+}
+/**
+ * Check if there are unsaved changes (non-reactive version for plain TS)
+ *
+ * @returns true if there are unsaved changes
+ */
+export function isDirty() {
+    return isDirtyState;
+}
+/**
+ * Enable or disable history recording
+ *
+ * Useful for bulk operations where you don't want individual history entries.
+ *
+ * @param enabled - Whether history should be recorded
+ */
+export function setHistoryEnabled(enabled) {
+    historyEnabled = enabled;
+}
+/**
+ * Check if history recording is enabled
+ *
+ * @returns true if history is being recorded
+ */
+export function isHistoryEnabled() {
+    return historyEnabled;
+}
+/**
+ * Set the restoring from history flag
+ *
+ * Used internally by the history store when performing undo/redo.
+ *
+ * @param restoring - Whether we're currently restoring from history
+ */
+export function setRestoringFromHistory(restoring) {
+    isRestoringFromHistory = restoring;
+}
+/**
+ * Push current state to history before making changes
+ *
+ * @param description - Description of the change about to be made
+ * @param workflow - Optional workflow to push (uses store if not provided)
+ */
+function pushToHistory(description, workflow) {
+    if (!historyEnabled || isRestoringFromHistory) {
+        return;
+    }
+    const workflowToPush = workflow ?? workflowState;
+    if (workflowToPush) {
+        historyService.push(workflowToPush, { description });
+    }
+}
+/**
+ * Get the current workflow (non-reactive version for plain TS)
+ *
+ * @returns The current workflow or null
+ */
+export function getWorkflow() {
+    return workflowState;
+}
+// =========================================================================
+// Helper Functions
+// =========================================================================
+/**
+ * Check if workflow data has actually changed
+ *
+ * Used to prevent unnecessary updates and infinite loops.
+ */
+function hasWorkflowDataChanged(currentWorkflow, newNodes, newEdges) {
+    if (!currentWorkflow)
+        return true;
+    // Check if nodes have changed
+    if (currentWorkflow.nodes.length !== newNodes.length)
+        return true;
+    for (let i = 0; i < newNodes.length; i++) {
+        const currentNode = currentWorkflow.nodes[i];
+        const newNode = newNodes[i];
+        if (!currentNode || !newNode)
+            return true;
+        if (currentNode.id !== newNode.id)
+            return true;
+        if (currentNode.position.x !== newNode.position.x ||
+            currentNode.position.y !== newNode.position.y)
+            return true;
+        if (JSON.stringify(currentNode.data) !== JSON.stringify(newNode.data))
+            return true;
+    }
+    // Check if edges have changed
+    if (currentWorkflow.edges.length !== newEdges.length)
+        return true;
+    for (let i = 0; i < newEdges.length; i++) {
+        const currentEdge = currentWorkflow.edges[i];
+        const newEdge = newEdges[i];
+        if (!currentEdge || !newEdge)
+            return true;
+        if (currentEdge.id !== newEdge.id)
+            return true;
+        if (currentEdge.source !== newEdge.source || currentEdge.target !== newEdge.target)
+            return true;
+    }
+    return false;
+}
+// =========================================================================
+// Workflow Actions
+// =========================================================================
+/**
+ * Actions for updating the workflow
+ *
+ * All actions that modify the workflow will trigger dirty state updates
+ * and emit change events.
+ */
+export const workflowActions = {
+    /**
+     * Initialize workflow (from load or new)
+     *
+     * This sets the initial saved snapshot, clears dirty state, and initializes history.
+     */
+    initialize: (workflow) => {
+        workflowState = workflow;
+        // Set the saved snapshot - workflow is "clean" after initialization
+        savedSnapshot = createSnapshot(workflow);
+        isDirtyState = false;
+        if (onDirtyStateChangeCallback) {
+            onDirtyStateChangeCallback(false);
+        }
+        // Initialize history with the loaded workflow
+        historyService.initialize(workflow);
+    },
+    /**
+     * Update the entire workflow
+     *
+     * Note: This is typically called from SvelteFlow sync and should not push to history
+     * for every small change. History is pushed by specific actions or drag handlers.
+     */
+    updateWorkflow: (workflow) => {
+        workflowState = workflow;
+        notifyWorkflowChange('metadata');
+    },
+    /**
+     * Restore workflow from history (undo/redo)
+     *
+     * This bypasses history recording to prevent recursive loops.
+     */
+    restoreFromHistory: (workflow) => {
+        isRestoringFromHistory = true;
+        workflowState = workflow;
+        notifyWorkflowChange('metadata');
+        isRestoringFromHistory = false;
+    },
+    /**
+     * Update nodes
+     */
+    updateNodes: (nodes) => {
+        if (!workflowState)
+            return;
+        // Check if nodes have actually changed to prevent infinite loops
+        if (!hasWorkflowDataChanged(workflowState, nodes, workflowState.edges)) {
+            return;
+        }
+        // Generate unique version identifier
+        const versionId = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        workflowState = {
+            ...workflowState,
+            nodes,
+            metadata: buildMetadata(workflowState.metadata, {
+                versionId,
+                updateNumber: (workflowState.metadata?.updateNumber ?? 0) + 1
+            })
+        };
+        notifyWorkflowChange('node_move');
+    },
+    /**
+     * Update edges
+     */
+    updateEdges: (edges) => {
+        if (!workflowState)
+            return;
+        // Check if edges have actually changed to prevent infinite loops
+        if (!hasWorkflowDataChanged(workflowState, workflowState.nodes, edges)) {
+            return;
+        }
+        // Generate unique version identifier
+        const versionId = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        workflowState = {
+            ...workflowState,
+            edges,
+            metadata: buildMetadata(workflowState.metadata, {
+                versionId,
+                updateNumber: (workflowState.metadata?.updateNumber ?? 0) + 1
+            })
+        };
+        notifyWorkflowChange('edge_add');
+    },
+    /**
+     * Update workflow name
+     */
+    updateName: (name) => {
+        if (!workflowState)
+            return;
+        workflowState = {
+            ...workflowState,
+            name,
+            metadata: buildMetadata(workflowState.metadata)
+        };
+        notifyWorkflowChange('name');
+    },
+    /**
+     * Add a node
+     */
+    addNode: (node) => {
+        pushToHistory('Add node');
+        if (!workflowState)
+            return;
+        workflowState = {
+            ...workflowState,
+            nodes: [...workflowState.nodes, node],
+            metadata: buildMetadata(workflowState.metadata)
+        };
+        notifyWorkflowChange('node_add');
+    },
+    /**
+     * Remove a node
+     *
+     * This is an atomic operation that also removes connected edges.
+     * A single undo will restore both the node and its edges.
+     */
+    removeNode: (nodeId) => {
+        pushToHistory('Delete node');
+        if (!workflowState)
+            return;
+        workflowState = {
+            ...workflowState,
+            nodes: workflowState.nodes.filter((node) => node.id !== nodeId),
+            edges: workflowState.edges.filter((edge) => edge.source !== nodeId && edge.target !== nodeId),
+            metadata: buildMetadata(workflowState.metadata)
+        };
+        notifyWorkflowChange('node_remove');
+    },
+    /**
+     * Add an edge
+     */
+    addEdge: (edge) => {
+        pushToHistory('Add connection');
+        if (!workflowState)
+            return;
+        workflowState = {
+            ...workflowState,
+            edges: [...workflowState.edges, edge],
+            metadata: buildMetadata(workflowState.metadata)
+        };
+        notifyWorkflowChange('edge_add');
+    },
+    /**
+     * Remove an edge
+     */
+    removeEdge: (edgeId) => {
+        pushToHistory('Delete connection');
+        if (!workflowState)
+            return;
+        workflowState = {
+            ...workflowState,
+            edges: workflowState.edges.filter((edge) => edge.id !== edgeId),
+            metadata: buildMetadata(workflowState.metadata)
+        };
+        notifyWorkflowChange('edge_remove');
+    },
+    /**
+     * Update a specific node
+     *
+     * Used for config changes. Pushes to history for undo support.
+     */
+    updateNode: (nodeId, updates) => {
+        pushToHistory('Update node config');
+        if (!workflowState)
+            return;
+        workflowState = {
+            ...workflowState,
+            nodes: workflowState.nodes.map((node) => node.id === nodeId ? { ...node, ...updates } : node),
+            metadata: buildMetadata(workflowState.metadata)
+        };
+        notifyWorkflowChange('node_config');
+    },
+    /**
+     * Clear the workflow
+     *
+     * Resets the workflow and clears history.
+     */
+    clear: () => {
+        workflowState = null;
+        savedSnapshot = null;
+        isDirtyState = false;
+        historyService.clear();
+        if (onDirtyStateChangeCallback) {
+            onDirtyStateChangeCallback(false);
+        }
+    },
+    /**
+     * Update workflow metadata
+     */
+    updateMetadata: (metadata) => {
+        if (!workflowState)
+            return;
+        workflowState = {
+            ...workflowState,
+            metadata: buildMetadata(workflowState.metadata, metadata)
+        };
+        notifyWorkflowChange('metadata');
+    },
+    /**
+     * Batch update nodes and edges
+     *
+     * Useful for complex operations that update multiple things at once.
+     * Creates a single history entry for the entire batch.
+     */
+    batchUpdate: (updates) => {
+        pushToHistory('Batch update');
+        if (!workflowState)
+            return;
+        workflowState = {
+            ...workflowState,
+            ...(updates.nodes && { nodes: updates.nodes }),
+            ...(updates.edges && { edges: updates.edges }),
+            ...(updates.name && { name: updates.name }),
+            ...(updates.description !== undefined && { description: updates.description }),
+            metadata: buildMetadata(workflowState.metadata, updates.metadata ?? undefined)
+        };
+        notifyWorkflowChange('metadata');
+    },
+    /**
+     * Push current state to history manually
+     *
+     * Use this before operations that modify the workflow through other means
+     * (e.g., drag operations handled by SvelteFlow directly).
+     *
+     * @param description - Description of the upcoming change
+     * @param workflow - Optional workflow to push (uses store state if not provided)
+     */
+    pushHistory: (description, workflow) => {
+        pushToHistory(description, workflow);
+    }
+};

package/dist/stories/CanvasDecorator.svelte

@@ -0,0 +1,49 @@
+<!--
+  CanvasDecorator: Renders child components inside an empty SvelteFlow canvas,
+  matching how overlay components (e.g. CanvasBanner) appear in the workflow editor.
+-->
+<script lang="ts">
+	import { SvelteFlow, Controls } from '@xyflow/svelte';
+	import type { ColorMode } from '@xyflow/svelte';
+	import '@xyflow/svelte/dist/style.css';
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+
+	// Watch the data-theme attribute set by Storybook's addon-themes
+	let colorMode = $state<ColorMode>(
+		(document.documentElement.getAttribute('data-theme') as ColorMode) || 'light'
+	);
+
+	$effect(() => {
+		const observer = new MutationObserver(() => {
+			colorMode = (document.documentElement.getAttribute('data-theme') as ColorMode) || 'light';
+		});
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ['data-theme']
+		});
+		return () => observer.disconnect();
+	});
+</script>
+
+<div class="canvas-decorator-wrapper">
+	<SvelteFlow nodes={[]} edges={[]} {colorMode}>
+		<Controls />
+		{@render children()}
+	</SvelteFlow>
+</div>
+
+<style>
+	.canvas-decorator-wrapper {
+		width: 800px;
+		height: 400px;
+		position: relative;
+	}
+
+	/* Fix: SvelteFlow's scoped styles use non-prefixed --background-color-default
+	   which doesn't update with colorMode="dark". Map the --xy- themed value. */
+	.canvas-decorator-wrapper :global(.svelte-flow.dark) {
+		--background-color-default: var(--xy-background-color-default);
+	}
+</style>

package/dist/stories/CanvasDecorator.svelte.d.ts

@@ -0,0 +1,8 @@
+import '@xyflow/svelte/dist/style.css';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const CanvasDecorator: import("svelte").Component<$$ComponentProps, {}, "">;
+type CanvasDecorator = ReturnType<typeof CanvasDecorator>;
+export default CanvasDecorator;