Store State Shape

State Fields

WorkflowNode Type

// workflow.types.ts
export interface WorkflowNode {
    id       : string;           // Unique node ID (GUID)
    type     : string;           // TypeCode — matches the executor's NodeType
    position : XYPosition;       // { x: number, y: number } — top-left corner on canvas
    data     : WorkflowNodeData; // Config + port definitions
}

export interface WorkflowNodeData {
    label        : string;                  // Display name on canvas
    config       : Record<string, unknown>; // Node-specific settings
    inputPorts   : NodePortDefinition[];    // Declared input handles
    outputPorts  : NodePortDefinition[];    // Declared output handles
}

export interface NodePortDefinition {
    id            : string;
    label         : string;
    isTimeoutPort?: boolean;    // True for HIL timeout ports
}

WorkflowEdge Type

export interface WorkflowEdge {
    id           : string;   // Unique edge ID
    source       : string;   // Source node ID
    sourceHandle : string;   // Source port ID (output port)
    target       : string;   // Target node ID
    targetHandle : string;   // Target port ID (input port)
    data?        : WorkflowEdgeData;
}

export interface WorkflowEdgeData {
    label?: string;  // Optional edge label (e.g., condition name)
}

Viewport Type

export interface Viewport {
    x    : number;  // Horizontal pan offset (pixels)
    y    : number;  // Vertical pan offset (pixels)
    zoom : number;  // Zoom level (1.0 = 100%)
}

Example State Snapshot

{
  "processId"    : "proc-001",
  "selectedNodes": ["node-abc"],
  "selectedEdges": [],
  "viewport"     : { "x": -120, "y": 80, "zoom": 0.85 },
  "nodes": [
    {
      "id"      : "node-abc",
      "type"    : "ApprovalNode",
      "position": { "x": 400, "y": 200 },
      "data": {
        "label"      : "Manager Approval",
        "config"     : { "actorId": "{{$context.managerId}}", "timeoutDuration": "P1D" },
        "inputPorts" : [{ "id": "in", "label": "In" }],
        "outputPorts": [
          { "id": "approved", "label": "Approved" },
          { "id": "rejected", "label": "Rejected" },
          { "id": "timeout",  "label": "Timeout", "isTimeoutPort": true }
        ]
      }
    }
  ],
  "edges": [
    {
      "id": "edge-001", "source": "node-trigger", "sourceHandle": "out",
      "target": "node-abc", "targetHandle": "in"
    }
  ]
}