@marktoflow/gui 2.0.0-alpha.5 → 2.0.1

package/src/client/stores/canvasStore.ts

@@ -1,348 +0,0 @@
-import { create } from 'zustand';
-import {
-  type Node,
-  type Edge,
-  type OnNodesChange,
-  type OnEdgesChange,
-  type OnConnect,
-  applyNodeChanges,
-  applyEdgeChanges,
-  addEdge,
-} from '@xyflow/react';
-
-interface HistoryState {
-  nodes: Node[];
-  edges: Edge[];
-}
-
-interface ClipboardState {
-  nodes: Node[];
-  edges: Edge[];
-}
-
-interface CanvasState {
-  nodes: Node[];
-  edges: Edge[];
-  // History for undo/redo
-  past: HistoryState[];
-  future: HistoryState[];
-  maxHistorySize: number;
-  // Clipboard for copy/paste
-  clipboard: ClipboardState | null;
-  onNodesChange: OnNodesChange;
-  onEdgesChange: OnEdgesChange;
-  onConnect: OnConnect;
-  setNodes: (nodes: Node[]) => void;
-  setEdges: (edges: Edge[]) => void;
-  updateNodeData: (nodeId: string, data: Partial<any>) => void;
-  clearCanvas: () => void;
-  // Undo/redo methods
-  undo: () => void;
-  redo: () => void;
-  canUndo: () => boolean;
-  canRedo: () => boolean;
-  // Save checkpoint for history
-  saveCheckpoint: () => void;
-  // Copy/paste methods
-  copySelected: () => void;
-  paste: (offset?: { x: number; y: number }) => void;
-  canPaste: () => boolean;
-}
-
-// Demo data for initial view
-const initialNodes: Node[] = [
-  {
-    id: 'trigger',
-    type: 'step',
-    position: { x: 250, y: 0 },
-    data: {
-      id: 'trigger',
-      name: 'PR Opened',
-      action: 'github.webhook',
-      status: 'completed',
-    },
-  },
-  {
-    id: 'fetch_pr',
-    type: 'step',
-    position: { x: 250, y: 120 },
-    data: {
-      id: 'fetch_pr',
-      name: 'Fetch PR Details',
-      action: 'github.pulls.get',
-      status: 'completed',
-    },
-  },
-  {
-    id: 'get_files',
-    type: 'step',
-    position: { x: 250, y: 240 },
-    data: {
-      id: 'get_files',
-      name: 'Get Changed Files',
-      action: 'github.pulls.listFiles',
-      status: 'running',
-    },
-  },
-  {
-    id: 'analyze',
-    type: 'step',
-    position: { x: 250, y: 360 },
-    data: {
-      id: 'analyze',
-      name: 'Analyze Changes',
-      action: 'claude.analyze',
-      status: 'pending',
-    },
-  },
-  {
-    id: 'post_review',
-    type: 'step',
-    position: { x: 250, y: 480 },
-    data: {
-      id: 'post_review',
-      name: 'Post Review',
-      action: 'github.pulls.createReview',
-      status: 'pending',
-    },
-  },
-];
-
-const initialEdges: Edge[] = [
-  { id: 'e1', source: 'trigger', target: 'fetch_pr', animated: true },
-  { id: 'e2', source: 'fetch_pr', target: 'get_files', animated: true },
-  { id: 'e3', source: 'get_files', target: 'analyze' },
-  { id: 'e4', source: 'analyze', target: 'post_review' },
-];
-
-export const useCanvasStore = create<CanvasState>((set, get) => ({
-  nodes: initialNodes,
-  edges: initialEdges,
-  past: [],
-  future: [],
-  maxHistorySize: 50,
-  clipboard: null,
-
-  onNodesChange: (changes) => {
-    // Filter out position changes for smoother dragging (don't create history for every pixel)
-    const isSignificantChange = changes.some(
-      (change) => change.type !== 'position' && change.type !== 'select' && change.type !== 'dimensions'
-    );
-
-    if (isSignificantChange) {
-      get().saveCheckpoint();
-    }
-
-    set({
-      nodes: applyNodeChanges(changes, get().nodes),
-    });
-  },
-
-  onEdgesChange: (changes) => {
-    // Check for significant changes (not just selection)
-    const isSignificantChange = changes.some(
-      (change) => change.type !== 'select'
-    );
-
-    if (isSignificantChange) {
-      get().saveCheckpoint();
-    }
-
-    set({
-      edges: applyEdgeChanges(changes, get().edges),
-    });
-  },
-
-  onConnect: (connection) => {
-    get().saveCheckpoint();
-    set({
-      edges: addEdge(
-        { ...connection, animated: true, style: { stroke: '#ff6d5a', strokeWidth: 2 } },
-        get().edges
-      ),
-    });
-  },
-
-  setNodes: (nodes) => {
-    get().saveCheckpoint();
-    set({ nodes, future: [] });
-  },
-
-  setEdges: (edges) => {
-    get().saveCheckpoint();
-    set({ edges, future: [] });
-  },
-
-  updateNodeData: (nodeId, data) => {
-    get().saveCheckpoint();
-    set({
-      nodes: get().nodes.map((node) =>
-        node.id === nodeId ? { ...node, data: { ...node.data, ...data } } : node
-      ),
-      future: [],
-    });
-  },
-
-  clearCanvas: () => {
-    get().saveCheckpoint();
-    set({ nodes: [], edges: [], future: [] });
-  },
-
-  saveCheckpoint: () => {
-    const { nodes, edges, past, maxHistorySize } = get();
-
-    // Don't save if there's no change from the last checkpoint
-    if (past.length > 0) {
-      const lastState = past[past.length - 1];
-      if (
-        JSON.stringify(lastState.nodes) === JSON.stringify(nodes) &&
-        JSON.stringify(lastState.edges) === JSON.stringify(edges)
-      ) {
-        return;
-      }
-    }
-
-    // Deep clone to avoid reference issues
-    const checkpoint: HistoryState = {
-      nodes: JSON.parse(JSON.stringify(nodes)),
-      edges: JSON.parse(JSON.stringify(edges)),
-    };
-
-    const newPast = [...past, checkpoint];
-
-    // Limit history size
-    if (newPast.length > maxHistorySize) {
-      newPast.shift();
-    }
-
-    set({ past: newPast });
-  },
-
-  undo: () => {
-    const { nodes, edges, past, future } = get();
-
-    if (past.length === 0) return;
-
-    // Save current state to future
-    const currentState: HistoryState = {
-      nodes: JSON.parse(JSON.stringify(nodes)),
-      edges: JSON.parse(JSON.stringify(edges)),
-    };
-
-    // Get the last state from past
-    const previousState = past[past.length - 1];
-    const newPast = past.slice(0, -1);
-
-    set({
-      nodes: previousState.nodes,
-      edges: previousState.edges,
-      past: newPast,
-      future: [currentState, ...future],
-    });
-  },
-
-  redo: () => {
-    const { nodes, edges, past, future } = get();
-
-    if (future.length === 0) return;
-
-    // Save current state to past
-    const currentState: HistoryState = {
-      nodes: JSON.parse(JSON.stringify(nodes)),
-      edges: JSON.parse(JSON.stringify(edges)),
-    };
-
-    // Get the first state from future
-    const nextState = future[0];
-    const newFuture = future.slice(1);
-
-    set({
-      nodes: nextState.nodes,
-      edges: nextState.edges,
-      past: [...past, currentState],
-      future: newFuture,
-    });
-  },
-
-  canUndo: () => get().past.length > 0,
-
-  canRedo: () => get().future.length > 0,
-
-  copySelected: () => {
-    const { nodes } = get();
-    const selectedNodes = nodes.filter((node) => node.selected);
-
-    if (selectedNodes.length === 0) return;
-
-    // Get the IDs of selected nodes
-    const selectedNodeIds = new Set(selectedNodes.map((n) => n.id));
-
-    // Get edges that connect selected nodes
-    const { edges } = get();
-    const selectedEdges = edges.filter(
-      (edge) => selectedNodeIds.has(edge.source) && selectedNodeIds.has(edge.target)
-    );
-
-    // Deep clone to avoid reference issues
-    const clipboard: ClipboardState = {
-      nodes: JSON.parse(JSON.stringify(selectedNodes)),
-      edges: JSON.parse(JSON.stringify(selectedEdges)),
-    };
-
-    set({ clipboard });
-  },
-
-  paste: (offset = { x: 50, y: 50 }) => {
-    const { clipboard, nodes, edges } = get();
-
-    if (!clipboard || clipboard.nodes.length === 0) return;
-
-    get().saveCheckpoint();
-
-    // Create ID mapping for new nodes
-    const idMap = new Map<string, string>();
-    const timestamp = Date.now().toString(36);
-
-    // Create new nodes with unique IDs and offset positions
-    const newNodes: Node[] = clipboard.nodes.map((node, index) => {
-      const newId = `${node.id.split('-copy')[0]}-copy-${timestamp}-${index}`;
-      idMap.set(node.id, newId);
-
-      return {
-        ...node,
-        id: newId,
-        position: {
-          x: node.position.x + offset.x,
-          y: node.position.y + offset.y,
-        },
-        selected: true, // Select pasted nodes
-        data: {
-          ...node.data,
-          id: newId,
-        },
-      };
-    });
-
-    // Create new edges with updated source/target IDs
-    const newEdges: Edge[] = clipboard.edges.map((edge, index) => ({
-      ...edge,
-      id: `${edge.id.split('-copy')[0]}-copy-${timestamp}-${index}`,
-      source: idMap.get(edge.source) || edge.source,
-      target: idMap.get(edge.target) || edge.target,
-    }));
-
-    // Deselect existing nodes
-    const updatedNodes = nodes.map((node) => ({ ...node, selected: false }));
-
-    set({
-      nodes: [...updatedNodes, ...newNodes],
-      edges: [...edges, ...newEdges],
-      future: [],
-    });
-  },
-
-  canPaste: () => {
-    const { clipboard } = get();
-    return clipboard !== null && clipboard.nodes.length > 0;
-  },
-}));

package/src/client/stores/editorStore.ts

@@ -1,133 +0,0 @@
-import { create } from 'zustand';
-import type { WorkflowStep } from '@shared/types';
-
-interface EditorState {
-  // Currently editing step
-  editingStep: WorkflowStep | null;
-  isEditorOpen: boolean;
-
-  // YAML viewer
-  yamlViewStep: WorkflowStep | null;
-  isYamlViewOpen: boolean;
-
-  // New step wizard
-  isNewStepOpen: boolean;
-  newStepPosition: { afterStepId?: string; beforeStepId?: string } | null;
-
-  // Clipboard
-  copiedNodes: WorkflowStep[];
-
-  // Undo/redo stacks
-  undoStack: WorkflowStep[][];
-  redoStack: WorkflowStep[][];
-
-  // Actions
-  openEditor: (step: WorkflowStep) => void;
-  closeEditor: () => void;
-  openYamlViewer: (step: WorkflowStep) => void;
-  closeYamlViewer: () => void;
-  openNewStepWizard: (position?: { afterStepId?: string; beforeStepId?: string }) => void;
-  closeNewStepWizard: () => void;
-  copyNodes: (steps: WorkflowStep[]) => void;
-  clearClipboard: () => void;
-  pushUndo: (steps: WorkflowStep[]) => void;
-  undo: () => WorkflowStep[] | null;
-  redo: () => WorkflowStep[] | null;
-  clearHistory: () => void;
-}
-
-export const useEditorStore = create<EditorState>((set, get) => ({
-  editingStep: null,
-  isEditorOpen: false,
-  yamlViewStep: null,
-  isYamlViewOpen: false,
-  isNewStepOpen: false,
-  newStepPosition: null,
-  copiedNodes: [],
-  undoStack: [],
-  redoStack: [],
-
-  openEditor: (step) =>
-    set({
-      editingStep: step,
-      isEditorOpen: true,
-    }),
-
-  closeEditor: () =>
-    set({
-      editingStep: null,
-      isEditorOpen: false,
-    }),
-
-  openYamlViewer: (step) =>
-    set({
-      yamlViewStep: step,
-      isYamlViewOpen: true,
-    }),
-
-  closeYamlViewer: () =>
-    set({
-      yamlViewStep: null,
-      isYamlViewOpen: false,
-    }),
-
-  openNewStepWizard: (position) =>
-    set({
-      isNewStepOpen: true,
-      newStepPosition: position ?? null,
-    }),
-
-  closeNewStepWizard: () =>
-    set({
-      isNewStepOpen: false,
-      newStepPosition: null,
-    }),
-
-  copyNodes: (steps) =>
-    set({
-      copiedNodes: steps.map((s) => ({ ...s })),
-    }),
-
-  clearClipboard: () =>
-    set({
-      copiedNodes: [],
-    }),
-
-  pushUndo: (steps) => {
-    const { undoStack } = get();
-    set({
-      undoStack: [...undoStack, steps],
-      redoStack: [], // Clear redo stack when new action is taken
-    });
-  },
-
-  undo: () => {
-    const { undoStack, redoStack } = get();
-    if (undoStack.length === 0) return null;
-
-    const lastState = undoStack[undoStack.length - 1];
-    set({
-      undoStack: undoStack.slice(0, -1),
-      redoStack: [...redoStack, lastState],
-    });
-    return lastState;
-  },
-
-  redo: () => {
-    const { undoStack, redoStack } = get();
-    if (redoStack.length === 0) return null;
-
-    const nextState = redoStack[redoStack.length - 1];
-    set({
-      redoStack: redoStack.slice(0, -1),
-      undoStack: [...undoStack, nextState],
-    });
-    return nextState;
-  },
-
-  clearHistory: () =>
-    set({
-      undoStack: [],
-      redoStack: [],
-    }),
-}));