This version introduces new build formats (ESM, UMD) of the package.

🤩 For more advanced use cases we prepared the paid pro package. The package is in the early stage. Currently it contains advanced components for steps. Here you can find more information and examples.

Breaking Changes

• Default export of the Designer class is removed. Now you should import directly the Designer class.

  import { Designer } from 'sequential-workflow-designer';
  Designer.create(/* ... */);
  

  This affects CDN usage too.

  <script src="https://cdn.jsdelivr.net/..."></script>
  <script>
  sequentialWorkflowDesigner.Designer.create(/* ... */);
  </script>
  

• The package now contains two type of build: ESM and UMD. ESM build is located in the lib folder. UMD build is located in the dist folder. That means the URL to the CDN is also changed.

  <script src="https://cdn.jsdelivr.net/.../dist/index.umd.js"></script>
  

• Static method Designer.utils.nextId() is deleted. You should use the next() from the Uid class. Example:

  import { Uid } from 'sequential-workflow-designer';
  Uid.next();
  

• Static method Designer.utils.getParents() is deleted. You should use the getStepParents() method from the Designer class. Example:

  designer.getStepParents(needleStep);
  

• The ComponentType is not an enum anymore. It's a type (string). This change doesn't affect serialized JSONs.

Improved rendering of the switch step for 3 and more branches.

Added the notifyChildrenChanged() method to the StepEditorContext interface.

Support undo and redo. This feature is disabled by default. To enable it add the below config.

const config = {
  undoStackSize: 10,
  // ...
};

Editor's Context

We've changed an approach how the editors should notify the designer about changes in the definition. We've deleted revalidate() and notifiyDefinitionChanged() methods from the Designer class. Instead of this, now editors receive an editor's context.

interface StepEditorContext {
  notifyNameChanged(): void;
  notifyPropertiesChanged(): void;
}

interface GlobalEditorContext {
  notifyPropertiesChanged(): void;
}

const config = {
  // ...
  editors: {
    stepEditorProvider: (step: Step, context: StepEditorContext) => {
      // ...
      context.notifyPropertiesChanged();
      // ...
    },
    globalEditorProvider: (definition: Definition, context: GlobalEditorContext) => {
      // ...
      context.notifyPropertiesChanged();
      // ...
    }
  }
};

Type Requirments

The type of a step cannot contain special characters from now. Check the type validator.

• ✅ someType
• ✅ some-type
• ✅ some_type
• ❌ some type
• ❌ someType!

By this, we could add the type to an element's class on the SVG canvas. That allows to customize components by CSS. Check this example.

Restrictions

We added canInsertStep, canMoveStep and canDeleteStep callbacks to the StepsConfiguration. You may restrict some activity in the designer by this.

const config = {
  // ...
  steps: {
    canInsertStep: (step, targetSequence, targetIndex) => {
      return targetSequence.length < 5;
    },
    canMoveStep: (sourceSequence, step, targetSequence, targetIndex) => {
      return !step.properties['isLocked'];
    },
    canDeleteStep: (step, parentSequence) => {
      return step.name !== 'x';
    }
    // ...
  }
};