Workflow Element Changes

Learn how to create element changes and understand how they fit into the system.

We'll create the types that represent the changes this new element can undergo, and we'll create the following file to include them:

// src/shared/kits/workflow/mvc/model/workflow-change/element-type/parallel.ts

import type { ElementFlow } from "../../workflow/flow";

export type ParallelChange =
  | ParallelSelectChange
  | ParallelSelectCreateBranchChange
  | ParallelSelectBranchChange
  | ParallelSelectAddBranchChange
  | ParallelCreateBranchChange
  | ParallelBranchInfoChange
  | ParallelDeleteBranchChange
  | ParallelAddBranchChange
  | ParallelEnterBranchDropAreaChange
  | ParallelLeaveBranchDropAreaChange;

export interface ParallelSelectChange {
  type: "elementType";
  elementType: "parallel";
  change: "select";
  id: string;
}

export interface ParallelSelectCreateBranchChange {
  type: "elementType";
  elementType: "parallel";
  change: "selectCreateBranch";
  id: string;
}

export interface ParallelSelectBranchChange {
  type: "elementType";
  elementType: "parallel";
  change: "selectBranch";
  id: string;
  branch: number;
}

export interface ParallelSelectAddBranchChange {
  type: "elementType";
  elementType: "parallel";
  change: "selectAddBranch";
  id: string;
  branch: number;
}

export interface ParallelCreateBranchChange {
  type: "elementType";
  elementType: "parallel";
  change: "createBranch";
  id: string;
  label: string;
}

export interface ParallelBranchInfoChange {
  type: "elementType";
  elementType: "parallel";
  change: "branchInfo";
  id: string;
  branch: number;
  label: string;
}

export interface ParallelDeleteBranchChange {
  type: "elementType";
  elementType: "parallel";
  change: "deleteBranch";
  id: string;
  branch: number;
}

export interface ParallelAddBranchChange {
  type: "elementType";
  elementType: "parallel";
  change: "addBranch";
  id: string;
  branch: number;
  element: ElementFlow;
}

export interface ParallelEnterBranchDropAreaChange {
  type: "elementType";
  elementType: "parallel";
  change: "enterBranchDropArea";
  id: string;
  branch: number;
  enter: string;
}

export interface ParallelLeaveBranchDropAreaChange {
  type: "elementType";
  elementType: "parallel";
  change: "leaveBranchDropArea";
  id: string;
  branch: number;
  leave: string;
}

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

// src/shared/kits/workflow/mvc/model/workflow-change/element-type/index.ts

import type {
  ActionChange,
  ActionSelectChange,
  ActionInfoChange,
} from "./action";

import type {
  ConditionChange,
  ConditionSelectChange,
  ConditionSelectAddThenChange,
  ConditionSelectAddElseChange,
  ConditionInfoChange,
  ConditionAddThenChange,
  ConditionAddElseChange,
  ConditionEnterThenDropAreaChange,
  ConditionLeaveThenDropAreaChange,
  ConditionEnterElseDropAreaChange,
  ConditionLeaveElseDropAreaChange,
} from "./condition";

import type {
  SwitchChange,
  SwitchSelectChange,
  SwitchSelectCreateBranchChange,
  SwitchSelectBranchChange,
  SwitchSelectDefaultChange,
  SwitchSelectAddBranchChange,
  SwitchSelectAddDefaultChange,
  SwitchCreateBranchChange,
  SwitchBranchInfoChange,
  SwitchDeleteBranchChange,
  SwitchAddBranchChange,
  SwitchAddDefaultChange,
  SwitchEnterBranchDropAreaChange,
  SwitchLeaveBranchDropAreaChange,
  SwitchEnterDefaultDropAreaChange,
  SwitchLeaveDefaultDropAreaChange,
} from "./switch";

import type {
  LoopChange,
  LoopSelectChange,
  LoopSelectAddIntoChange,
  LoopInfoChange,
  LoopAddIntoChange,
  LoopEnterIntoDropAreaChange,
  LoopLeaveIntoDropAreaChange,
} from "./loop";

import type {
  ParallelChange,
  ParallelSelectChange,
  ParallelSelectCreateBranchChange,
  ParallelSelectBranchChange,
  ParallelSelectAddBranchChange,
  ParallelCreateBranchChange,
  ParallelBranchInfoChange,
  ParallelDeleteBranchChange,
  ParallelAddBranchChange,
  ParallelEnterBranchDropAreaChange,
  ParallelLeaveBranchDropAreaChange,
} from "./parallel";

export type ElementTypeChange =
  | ActionChange
  | ConditionChange
  | SwitchChange
  | LoopChange
  | ParallelChange;

export type { ActionChange, ActionSelectChange, ActionInfoChange };

export type {
  ConditionChange,
  ConditionSelectChange,
  ConditionSelectAddThenChange,
  ConditionSelectAddElseChange,
  ConditionInfoChange,
  ConditionAddThenChange,
  ConditionAddElseChange,
  ConditionEnterThenDropAreaChange,
  ConditionLeaveThenDropAreaChange,
  ConditionEnterElseDropAreaChange,
  ConditionLeaveElseDropAreaChange,
};

export type {
  SwitchChange,
  SwitchSelectChange,
  SwitchSelectCreateBranchChange,
  SwitchSelectBranchChange,
  SwitchSelectDefaultChange,
  SwitchSelectAddBranchChange,
  SwitchSelectAddDefaultChange,
  SwitchCreateBranchChange,
  SwitchBranchInfoChange,
  SwitchDeleteBranchChange,
  SwitchAddBranchChange,
  SwitchAddDefaultChange,
  SwitchEnterBranchDropAreaChange,
  SwitchLeaveBranchDropAreaChange,
  SwitchEnterDefaultDropAreaChange,
  SwitchLeaveDefaultDropAreaChange,
};

export type {
  LoopChange,
  LoopSelectChange,
  LoopSelectAddIntoChange,
  LoopInfoChange,
  LoopAddIntoChange,
  LoopEnterIntoDropAreaChange,
  LoopLeaveIntoDropAreaChange,
};

export type {
  ParallelChange,
  ParallelSelectChange,
  ParallelSelectCreateBranchChange,
  ParallelSelectBranchChange,
  ParallelSelectAddBranchChange,
  ParallelCreateBranchChange,
  ParallelBranchInfoChange,
  ParallelDeleteBranchChange,
  ParallelAddBranchChange,
  ParallelEnterBranchDropAreaChange,
  ParallelLeaveBranchDropAreaChange,
};

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

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

import type {
  GlobalChange,
  StartSelectChange,
  StartInfoChange,
  EndSelectChange,
  EndInfoChange,
  SelectAddTopChange,
  AddTopChange,
  EnterTopDropAreaChange,
  LeaveTopDropAreaChange,
  RemoveWidgetChange,
} from "./global";

import type {
  ElementChange,
  ElementSelectAddNextChange,
  ElementAddNextChange,
  ElementRemoveChange,
  ElementDragChange,
  ElementDropChange,
  ElementEnterNextDropAreaChange,
  ElementLeaveNextDropAreaChange,
} from "./element";

import type {
  ElementTypeChange,
  ActionChange,
  ActionSelectChange,
  ActionInfoChange,
  ConditionChange,
  ConditionSelectChange,
  ConditionSelectAddThenChange,
  ConditionSelectAddElseChange,
  ConditionInfoChange,
  ConditionAddThenChange,
  ConditionAddElseChange,
  ConditionEnterThenDropAreaChange,
  ConditionLeaveThenDropAreaChange,
  ConditionEnterElseDropAreaChange,
  ConditionLeaveElseDropAreaChange,
  SwitchChange,
  SwitchSelectChange,
  SwitchSelectCreateBranchChange,
  SwitchSelectBranchChange,
  SwitchSelectDefaultChange,
  SwitchSelectAddBranchChange,
  SwitchSelectAddDefaultChange,
  SwitchCreateBranchChange,
  SwitchBranchInfoChange,
  SwitchDeleteBranchChange,
  SwitchAddBranchChange,
  SwitchAddDefaultChange,
  SwitchEnterBranchDropAreaChange,
  SwitchLeaveBranchDropAreaChange,
  SwitchEnterDefaultDropAreaChange,
  SwitchLeaveDefaultDropAreaChange,
  LoopChange,
  LoopSelectChange,
  LoopSelectAddIntoChange,
  LoopInfoChange,
  LoopAddIntoChange,
  LoopEnterIntoDropAreaChange,
  LoopLeaveIntoDropAreaChange,
  ParallelChange,
  ParallelSelectChange,
  ParallelSelectCreateBranchChange,
  ParallelSelectBranchChange,
  ParallelSelectAddBranchChange,
  ParallelCreateBranchChange,
  ParallelBranchInfoChange,
  ParallelDeleteBranchChange,
  ParallelAddBranchChange,
  ParallelEnterBranchDropAreaChange,
  ParallelLeaveBranchDropAreaChange,
} from "./element-type";

export type WorkflowChange = GlobalChange | ElementChange | ElementTypeChange;

export type {
  GlobalChange,
  StartSelectChange,
  StartInfoChange,
  EndSelectChange,
  EndInfoChange,
  SelectAddTopChange,
  AddTopChange,
  EnterTopDropAreaChange,
  LeaveTopDropAreaChange,
  RemoveWidgetChange,
};

export type {
  ElementChange,
  ElementSelectAddNextChange,
  ElementAddNextChange,
  ElementRemoveChange,
  ElementDragChange,
  ElementDropChange,
  ElementEnterNextDropAreaChange,
  ElementLeaveNextDropAreaChange,
};

export type {
  ElementTypeChange,
  ActionChange,
  ActionSelectChange,
  ActionInfoChange,
  ConditionChange,
  ConditionSelectChange,
  ConditionSelectAddThenChange,
  ConditionSelectAddElseChange,
  ConditionInfoChange,
  ConditionAddThenChange,
  ConditionAddElseChange,
  ConditionEnterThenDropAreaChange,
  ConditionLeaveThenDropAreaChange,
  ConditionEnterElseDropAreaChange,
  ConditionLeaveElseDropAreaChange,
  SwitchChange,
  SwitchSelectChange,
  SwitchSelectCreateBranchChange,
  SwitchSelectBranchChange,
  SwitchSelectDefaultChange,
  SwitchSelectAddBranchChange,
  SwitchSelectAddDefaultChange,
  SwitchCreateBranchChange,
  SwitchBranchInfoChange,
  SwitchDeleteBranchChange,
  SwitchAddBranchChange,
  SwitchAddDefaultChange,
  SwitchEnterBranchDropAreaChange,
  SwitchLeaveBranchDropAreaChange,
  SwitchEnterDefaultDropAreaChange,
  SwitchLeaveDefaultDropAreaChange,
  LoopChange,
  LoopSelectChange,
  LoopSelectAddIntoChange,
  LoopInfoChange,
  LoopAddIntoChange,
  LoopEnterIntoDropAreaChange,
  LoopLeaveIntoDropAreaChange,
  ParallelChange,
  ParallelSelectChange,
  ParallelSelectCreateBranchChange,
  ParallelSelectBranchChange,
  ParallelSelectAddBranchChange,
  ParallelCreateBranchChange,
  ParallelBranchInfoChange,
  ParallelDeleteBranchChange,
  ParallelAddBranchChange,
  ParallelEnterBranchDropAreaChange,
  ParallelLeaveBranchDropAreaChange,
};