Fixed support for touchpad.
- Redesigned the
DesignerExtension
interface. This change increases the extensibility of the designer.
This version introduces the first release of the Sequential Workflow Designer for Angular package.
- The disabled drag mode doesn't block the step selecting anymore.
- Replaced custom shapes by icons from the
Icons
class forStartStopComponentView
.
This version introduces the first release of the Sequential Workflow Designer for React package.
- Fixed calculation of label width in the switch step.
- Added an exclamation mark to the warning icon.
- Fixed losing the disabled state during dragging.
- Fixed steps rendering with long labels.
- Added to the global editor and the step editor the common class:
sqd-editor
.
- Changed a behavior of the default zoom. From now the designer shows a whole flow at the start.
- Zoom is aligned to the predefined constants.
This version brings rendering speed improvements. Check the stress-test.html
example. This version contains many internal changes to support the folder
component in the pro version.
- Replaced all icons to material icons.
- Normalized step CSS classes. All components have the
sqd-step-<componentType>-
prefix from now.
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.
-
Default export of the
Designer
class is removed. Now you should import directly theDesigner
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 thedist
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 thenext()
from theUid
class. Example:import { Uid } from 'sequential-workflow-designer'; Uid.next();
-
Static method
Designer.utils.getParents()
is deleted. You should use thegetStepParents()
method from theDesigner
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,
// ...
};
We've changed an approach how the editors should notify the designer about changes in the definition. We've deleted revalidate()
and notifyDefinitionChanged()
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();
// ...
}
}
};
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.
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';
}
// ...
}
};
The designer released.