Workflow Element

Learn how to create the workflow element and understand how it fits into the system.

We'll begin by updating the model layer of the existing model-view-controller architecture, starting with the type that represents the state of the new element.

To do that, we'll update the file shown below to include the ParallelFlow type and add it to the ElementFlow union:

// src/shared/kits/workflow/mvc/model/workflow/flow.ts

export type WorkflowFlow = {
  start: { message: string };
  elements: ElementFlow[];
  dropTop: Set<string>;
  end: { message: string };
};

export type ElementFlow =
  | ActionFlow
  | ConditionFlow
  | SwitchFlow
  | LoopFlow
  | ParallelFlow;

export interface ActionFlow {
  type: "action";
  id: string;
  message: string;
  dragging: { x: number; y: number } | null;
  dropNext: Set<string>;
}

export interface ConditionFlow {
  type: "condition";
  id: string;
  if: string;
  then: ElementFlow[];
  else: ElementFlow[];
  dragging: { x: number; y: number } | null;
  dropNext: Set<string>;
  dropThen: Set<string>;
  dropElse: Set<string>;
}

export interface SwitchFlow {
  type: "switch";
  id: string;
  branches: {
    case: string;
    then: ElementFlow[];
  }[];
  default: ElementFlow[];
  dragging: { x: number; y: number } | null;
  dropNext: Set<string>;
  dropBranches: Set<string>[];
  dropDefault: Set<string>;
}

export interface LoopFlow {
  type: "loop";
  id: string;
  while: string;
  into: ElementFlow[];
  dragging: { x: number; y: number } | null;
  dropNext: Set<string>;
  dropInto: Set<string>;
}

export interface ParallelFlow {
  type: "parallel";
  id: string;
  branches: {
    label: string;
    then: ElementFlow[];
  }[];
  dragging: { x: number; y: number } | null;
  dropNext: Set<string>;
  dropBranches: Set<string>[];
}

We'll also update the following file to export the type we created:

// src/shared/kits/workflow/mvc/model/workflow/index.ts

import type {
  WorkflowFlow,
  ElementFlow,
  ActionFlow,
  ConditionFlow,
  SwitchFlow,
  LoopFlow,
  ParallelFlow,
} from "./flow";

import type {
  Widget,
  GlobalWidget,
  StartInfoWidget,
  EndInfoWidget,
  AddTopWidget,
  ElementWidget,
  ElementAddNextWidget,
  ElementTypeWidget,
  ActionWidget,
  ActionInfoWidget,
  ConditionWidget,
  ConditionInfoWidget,
  ConditionAddThenWidget,
  ConditionAddElseWidget,
  SwitchWidget,
  SwitchBranchInfoWidget,
  SwitchCreateBranchWidget,
  SwitchAddBranchWidget,
  SwitchAddDefaultWidget,
  LoopWidget,
  LoopInfoWidget,
  LoopAddIntoWidget,
} from "./widget";

import type {
  Failure,
  StartFailure,
  AddTopFailure,
  EndFailure,
  ElementFailure,
  ActionFailure,
  ConditionFailure,
  SwitchFailure,
  LoopFailure,
} from "./failure";

export interface Workflow {
  flow: WorkflowFlow;
  widget: Widget | null;
  active: string | null; // String that identifies the active selection.
  failure: Failure | null; // Failure that occurred in the workflow.
}

export type {
  WorkflowFlow,
  ElementFlow,
  ActionFlow,
  ConditionFlow,
  SwitchFlow,
  LoopFlow,
  ParallelFlow,
};

export type {
  Widget,
  GlobalWidget,
  StartInfoWidget,
  EndInfoWidget,
  AddTopWidget,
  ElementWidget,
  ElementAddNextWidget,
  ElementTypeWidget,
  ActionWidget,
  ActionInfoWidget,
  ConditionWidget,
  ConditionInfoWidget,
  ConditionAddThenWidget,
  ConditionAddElseWidget,
  SwitchWidget,
  SwitchBranchInfoWidget,
  SwitchCreateBranchWidget,
  SwitchAddBranchWidget,
  SwitchAddDefaultWidget,
  LoopWidget,
  LoopInfoWidget,
  LoopAddIntoWidget,
};

export type {
  Failure,
  StartFailure,
  AddTopFailure,
  EndFailure,
  ElementFailure,
  ActionFailure,
  ConditionFailure,
  SwitchFailure,
  LoopFailure,
};

We'll also update the following file to export the type we created:

// src/shared/kits/workflow/index.tsx

export { useWorkflow, type State, type Action } from "./hooks/use-workflow";

export { WorkflowView } from "./components/workflow-view";

export { toWorkflowSchema } from "./utilities/to-workflow-schema";
export { toWorkflow } from "./utilities/to-workflow";

export type {
  WorkflowSchema,
  ElementSchema,
  ActionSchema,
  ConditionSchema,
  SwitchSchema,
  LoopSchema,
} from "./types/workflow-schema";

export type {
  Workflow,
  ElementFlow,
  ActionFlow,
  ConditionFlow,
  SwitchFlow,
  LoopFlow,
  ParallelFlow,
} from "./mvc/model/workflow";

export type { WorkflowChange } from "./mvc/model/workflow-change";