Sequential Workflow Designer

Before passing a workflow definition to the designer, it must be wrapped using the wrapDefinition function. This ensures the definition is in the format expected by the designer's internal state management. It is recommended to use useState to manage the wrapped definition and useMemo for configuration objects to prevent unnecessary re-renders.

import { Definition, ToolboxConfiguration, StepsConfiguration, ValidatorConfiguration } from 'sequential-workflow-designer';
import { SequentialWorkflowDesigner, wrapDefinition, useRootEditor, useStepEditor } from 'sequential-workflow-designer-react';

// 1. Define the raw definition
const startDefinition: Definition = { /* ... */ };

// 2. Wrap it and store in state
const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition));

// 3. Memoize configurations
const toolboxConfiguration: ToolboxConfiguration = useMemo(() => ({ /* ... */ }), []);
const stepsConfiguration: StepsConfiguration = useMemo(() => ({ /* ... */ }), []);
const validatorConfiguration: ValidatorConfiguration = useMemo(() => ({ /* ... */ }), []);

To implement the designer, import the SequentialWorkflowDesigner component and provide a definition, configuration objects (steps, toolbox, validator), and a handler for definition changes. The on:definitionChanged event provides both the updated definition and its isValid status.

<script lang="ts">
  import { SequentialWorkflowDesigner } from 'sequential-workflow-designer-svelte';
  import type { Definition, StepsConfiguration, ToolboxConfiguration, ValidatorConfiguration } from 'sequential-workflow-designer';

  let definition: Definition = { ... };
  let isValid: boolean | null = null;

  const steps: StepsConfiguration = { /* ... */ };
  const toolbox: ToolboxConfiguration = { /* ... */ };
  const validator: ValidatorConfiguration = { /* ... */ };

  function onDefinitionChanged({ detail }: { detail: { definition: Definition, isValid: boolean } }) {
    definition = detail.definition;
    isValid = detail.isValid;
  }
</script>

<SequentialWorkflowDesigner
  theme="light"
  definition={definition}
  on:definitionChanged={onDefinitionChanged}
  steps={steps}
  toolbox={toolbox}
  validator={validator} />

The designer uses Angular templates to render custom editor interfaces for the workflow root and individual steps. These templates receive a context object that allows you to bind data and notify the designer of changes.

Root Editor

The root editor template receives a variable implementing the RootEditorWrapper interface. Use editor.context (of type RootEditorContext) to notify the designer when properties change.

Step Editor

The step editor template receives a variable implementing the StepEditorWrapper interface. Use editor.context (of type StepEditorContext) to notify the designer when step properties or names change.

To ensure the designer stays in sync with your UI, you must call context.notifyPropertiesChanged() or context.notifyNameChanged() after updating the underlying data model.

<!-- Root Editor Template -->
<ng-template #rootEditor let-editor>
  <h2>Root Editor</h2>
  <h3>Velocity</h3>
  <input type="number"
    [value="editor.definition.properties.velocity"
    (input)="updateProperty(editor.definition.properties, 'velocity', $event, editor.context)" />
</ng-template>

<!-- Step Editor Template -->
<ng-template #stepEditor let-editor>
  <h2>Step Editor</h2>
  <h3>Name</h3>
  <input type="text"
    [value="editor.step.name"
    (input)="updateName(editor.step, $event, editor.context)" />

  <h3>Velocity</h3>
  <input type="number"
    [value="editor.step.properties.velocity"
    (input)="updateProperty(editor.step.properties, 'velocity', $event, editor.context)" />
</ng-template>