Designer Mode Store Overview

Three Canvas Modes

What Changes Per Mode

Store Architecture

// designerModeStore.ts
import { create } from 'zustand';

export type CanvasMode = 'design' | 'execution' | 'readonly';

export interface DesignerModeState {
    currentMode   : CanvasMode;
    executionId   : string | null;
    nodeStatuses  : Record<string, NodeExecutionStatus>;
    runProgress   : RunProgress;
    isReadonly    : boolean;
}

export interface DesignerModeActions {
    enterExecutionMode : (executionId: string) => void;
    exitExecutionMode  : () => void;
    enterReadonly      : () => void;
    exitReadonly       : () => void;
    setNodeStatus      : (nodeId: string, status: NodeExecutionStatus) => void;
    updateRunProgress  : (progress: RunProgress) => void;
}

export const useDesignerModeStore =
    create<DesignerModeState & DesignerModeActions>()((set) => ({
        currentMode : 'design',
        executionId : null,
        nodeStatuses: {},
        runProgress : { totalNodes: 0, completedNodes: 0, failedNodes: 0 },
        isReadonly  : false,
        // ... actions
    }));