Skip to content

Commit db8da4f

Browse files
b4rtazb4rtaz
authored
0.10.0. (#32)
1 parent 348a1f6 commit db8da4f

File tree

88 files changed

+872
-786
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+872
-786
lines changed

‎CHANGELOG.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
## 0.10.0
2+
3+
Refactored the step component interface. Extracted the logic of the step validation to a separated layer called badges. This allowed to create a new type of badge: `counter`. The counter badge is available in the pro version.
4+
5+
Additionally, now it's possible manually refreshing the validation from outside of the designer. The validation is a special case of a badge. To refresh the validation you need to call the `updateBadges` method.
6+
7+
```ts
8+
designer.updateBadges();
9+
```
10+
111
## 0.9.2
212

313
The `sequential-workflow-designer-angular` package supports Angular 12 - 15 now.

‎README.md

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ Pro:
4242
* [🐭 Minimal Root Component](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/minimal-root-component.html)
4343
* [🦁 External UI Components](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/external-ui-components.html)
4444
* [👋 Custom Dragged Component](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/custom-dragged-component.html)
45-
* [🎩 Custom Viewport](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/custom-view-port.html)
45+
* [🔰 Badges](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/badges.html)
46+
* [🎩 Custom Viewport](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/custom-viewport.html)
4647

4748
## 👩‍💻 Integrations
4849

@@ -86,10 +87,10 @@ Add the below code to your head section in HTML document.
8687
```html
8788
<head>
8889
...
89-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.9.2/css/designer.css" rel="stylesheet">
90-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.9.2/css/designer-light.css" rel="stylesheet">
91-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.9.2/css/designer-dark.css" rel="stylesheet">
92-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.9.2/dist/index.umd.js"></script>
90+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.10.0/css/designer.css" rel="stylesheet">
91+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.10.0/css/designer-light.css" rel="stylesheet">
92+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.10.0/css/designer-dark.css" rel="stylesheet">
93+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.10.0/dist/index.umd.js"></script>
9394
```
9495

9596
Call the designer by:

‎angular/designer/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer-angular",
33
"description": "Angular wrapper for Sequential Workflow Designer component.",
4-
"version": "0.9.2",
4+
"version": "0.10.0",
55
"author": {
66
"name": "NoCode JS",
77
"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
1515
"peerDependencies": {
1616
"@angular/common": "12 - 15",
1717
"@angular/core": "12 - 15",
18-
"sequential-workflow-designer": "^0.9.2"
18+
"sequential-workflow-designer": "^0.10.0"
1919
},
2020
"dependencies": {
2121
"tslib": "^2.3.0"

‎demos/angular-app/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
"@angular/platform-browser-dynamic": "^15.2.2",
2525
"@angular/router": "^15.2.2",
2626
"rxjs": "~7.8.0",
27-
"sequential-workflow-designer": "^0.9.2",
28-
"sequential-workflow-designer-angular": "^0.9.2",
27+
"sequential-workflow-designer": "^0.10.0",
28+
"sequential-workflow-designer-angular": "^0.10.0",
2929
"tslib": "^2.3.0",
3030
"zone.js": "~0.13.0"
3131
},

‎demos/angular-app/yarn.lock

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5180,17 +5180,17 @@ send@0.18.0:
51805180
range-parser "~1.2.1"
51815181
statuses "2.0.1"
51825182

5183-
sequential-workflow-designer-angular@^0.9.2:
5184-
version "0.9.2"
5185-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.9.2.tgz#263ea87d1eb55f151839af0d075100824a8755c4"
5186-
integrity sha512-DKv12v6U792aMhUfxBAa4NU1+zvGiYhNQBdvJb79gmcr7JODVgJwHWpm/zK16A0ZHcXAD3EIO/yUsoHc4hG/0g==
5183+
sequential-workflow-designer-angular@^0.10.0:
5184+
version "0.10.0"
5185+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.10.0.tgz#bccb2212f6bcf3114c13435291195e7346271f50"
5186+
integrity sha512-RivPz4H10wWyviJBfHciEGqy/EBf/mD/zPy2/2yzOXc8sI+NGTBTg9GJSTx0iHqa8LrOtWgv3JAhLrRr3X90/A==
51875187
dependencies:
51885188
tslib "^2.3.0"
51895189

5190-
sequential-workflow-designer@^0.9.2:
5191-
version "0.9.2"
5192-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.9.2.tgz#d1d942570526164021aaab97f6b4bb9193ed3d91"
5193-
integrity sha512-2kyzFCl7I7ZcMhoGTAB+OZ5+epwyTJThcuLh26MJs0Io0fFZpUvSyEKzxAIFUmSz6oAXCC7uCrzlLuZeBCewQw==
5190+
sequential-workflow-designer@^0.10.0:
5191+
version "0.10.0"
5192+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.10.0.tgz#c443f867c06cab82703dfc5a84a579392f268d9a"
5193+
integrity sha512-50A8bJBNNsHbdu48PbDIqwJk9YsWBNsCpVb7zY0IAJeNWM1yhk8w+h2vtPBqMIwkqoXAX2o/4em6QHkIofXR8A==
51945194
dependencies:
51955195
sequential-workflow-model "^0.1.1"
51965196

‎demos/react-app/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"dependencies": {
66
"react": "^18.2.0",
77
"react-dom": "^18.2.0",
8-
"sequential-workflow-designer": "^0.9.2",
9-
"sequential-workflow-designer-react": "^0.9.2"
8+
"sequential-workflow-designer": "^0.10.0",
9+
"sequential-workflow-designer-react": "^0.10.0"
1010
},
1111
"devDependencies": {
1212
"@types/jest": "^29.2.5",

‎demos/react-app/src/App.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { GlobalEditor } from './GlobalEditor';
55
import { StepEditor } from './StepEditor';
66
import { createSwitchStep, createTaskStep } from './StepUtils';
77
import { WorkflowDefinition } from './model';
8+
import { useSequentialWorkflowDesignerController } from 'sequential-workflow-designer-react';
89

910
const startDefinition: WorkflowDefinition = {
1011
properties: {},
@@ -20,6 +21,7 @@ const stepsConfiguration: StepsConfiguration = {
2021
};
2122

2223
export function App() {
24+
const controller = useSequentialWorkflowDesignerController();
2325
const [isVisible, setIsVisible] = useState(true);
2426
const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition));
2527
const [selectedStepId, setSelectedStepId] = useState<string | null>(null);
@@ -43,6 +45,13 @@ export function App() {
4345
setIsReadonly(!isReadonly);
4446
}
4547

48+
function moveViewportToFirstStepClicked() {
49+
const fistStep = definition.value.sequence[0];
50+
if (fistStep) {
51+
controller.moveViewportToStep(fistStep.id);
52+
}
53+
}
54+
4655
function reloadDefinitionClicked() {
4756
const newDefinition = ObjectCloner.deepClone(startDefinition);
4857
setDefinition(wrapDefinition(newDefinition));
@@ -63,6 +72,7 @@ export function App() {
6372
controlBar={true}
6473
globalEditor={<GlobalEditor />}
6574
stepEditor={<StepEditor />}
75+
controller={controller}
6676
/>
6777
)}
6878

@@ -78,6 +88,7 @@ export function App() {
7888
<button onClick={reloadDefinitionClicked}>Reload definition</button>
7989
<button onClick={toggleSelectionClicked}>Toggle selection</button>
8090
<button onClick={toggleIsReadonlyClicked}>Toggle readonly</button>
91+
<button onClick={moveViewportToFirstStepClicked}>Move viewport to first step</button>
8192
</div>
8293

8394
<div>

‎designer/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer",
33
"description": "Customizable no-code component for building flow-based programming applications.",
4-
"version": "0.9.2",
4+
"version": "0.10.0",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",

‎designer/src/api/control-bar-api.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { DefinitionModifier } from '../definition-modifier';
22
import { DesignerState } from '../designer-state';
33
import { HistoryController } from '../history-controller';
4-
import { ViewPortApi } from './view-port-api';
4+
import { ViewportApi } from './viewport-api';
55

66
export class ControlBarApi {
77
public constructor(
88
private readonly state: DesignerState,
99
private readonly historyController: HistoryController | undefined,
1010
private readonly definitionModifier: DefinitionModifier,
11-
private readonly viewPortApi: ViewPortApi
11+
private readonly viewportApi: ViewportApi
1212
) {}
1313

1414
/**
@@ -25,16 +25,16 @@ export class ControlBarApi {
2525
}
2626
}
2727

28-
public resetViewPort() {
29-
this.viewPortApi.resetViewPort();
28+
public resetViewport() {
29+
this.viewportApi.resetViewport();
3030
}
3131

3232
public zoomIn() {
33-
this.viewPortApi.zoom(true);
33+
this.viewportApi.zoom(true);
3434
}
3535

3636
public zoomOut() {
37-
this.viewPortApi.zoom(false);
37+
this.viewportApi.zoom(false);
3838
}
3939

4040
public isDragDisabled(): boolean {

‎designer/src/api/designer-api.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,21 @@ import { ControlBarApi } from './control-bar-api';
33
import { EditorApi } from './editor-api';
44
import { PathBarApi } from './path-bar-api';
55
import { ToolboxApi } from './toolbox-api';
6-
import { ViewPortApi } from './view-port-api';
6+
import { ViewportApi } from './viewport-api';
77
import { WorkspaceApi } from './workspace-api';
88

99
export class DesignerApi {
1010
public static create(context: DesignerContext): DesignerApi {
11-
const workspaceApi = new WorkspaceApi(context.state, context.workspaceController);
12-
const viewPortController = context.services.viewPortController.create(workspaceApi);
13-
const viewPortApi = new ViewPortApi(context.workspaceController, viewPortController);
11+
const workspace = new WorkspaceApi(context.state, context.workspaceController);
12+
const viewportController = context.services.viewportController.create(workspace);
13+
const viewport = new ViewportApi(context.workspaceController, viewportController);
1414

1515
return new DesignerApi(
16-
new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewPortApi),
16+
new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewport),
1717
new ToolboxApi(context.state, context, context.behaviorController, context.layoutController, context.configuration.steps),
1818
new EditorApi(context.state, context.stepsTraverser, context.layoutController, context.definitionModifier),
19-
workspaceApi,
20-
viewPortApi,
19+
workspace,
20+
viewport,
2121
new PathBarApi(context.state, context.stepsTraverser)
2222
);
2323
}
@@ -27,7 +27,7 @@ export class DesignerApi {
2727
public readonly toolbox: ToolboxApi,
2828
public readonly editor: EditorApi,
2929
public readonly workspace: WorkspaceApi,
30-
public readonly viewPort: ViewPortApi,
30+
public readonly viewport: ViewportApi,
3131
public readonly pathBar: PathBarApi
3232
) {}
3333
}

‎designer/src/api/editor-api.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { DefinitionModifier } from '../definition-modifier';
44
import { GlobalEditorContext, StepEditorContext } from '../designer-configuration';
55
import { EditorRenderer, EditorRendererHandler } from './editor-renderer';
66
import { LayoutController } from '../layout-controller';
7-
import { Definition } from 'sequential-workflow-model';
7+
import { Definition } from '../definition';
88

99
export class EditorApi {
1010
public constructor(

‎designer/src/api/view-port-api.ts renamed to ‎designer/src/api/viewport-api.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
import { Vector } from '../core';
2-
import { ViewPortController } from '../designer-extension';
2+
import { ViewportController } from '../designer-extension';
33
import { WorkspaceControllerWrapper } from '../workspace/workspace-controller';
44

5-
export class ViewPortApi {
5+
export class ViewportApi {
66
public constructor(
77
private readonly workspaceController: WorkspaceControllerWrapper,
8-
private readonly viewPortController: ViewPortController
8+
private readonly viewportController: ViewportController
99
) {}
1010

11-
public resetViewPort() {
12-
this.viewPortController.setDefault();
11+
public resetViewport() {
12+
this.viewportController.setDefault();
1313
}
1414

1515
public zoom(direction: boolean) {
16-
this.viewPortController.zoom(direction);
16+
this.viewportController.zoom(direction);
1717
}
1818

19-
public moveViewPortToStep(stepId: string) {
19+
public moveViewportToStep(stepId: string) {
2020
const component = this.workspaceController.getComponentByStepId(stepId);
2121
const componentPosition = component.view.getClientPosition();
2222
const componentSize = new Vector(component.view.width, component.view.height);
23-
this.viewPortController.focusOnComponent(componentPosition, componentSize);
23+
this.viewportController.focusOnComponent(componentPosition, componentSize);
2424
}
2525
}

‎designer/src/api/workspace-api.ts

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Vector } from '../core';
2-
import { ViewPort } from '../designer-extension';
2+
import { Viewport } from '../designer-extension';
33
import { DesignerState } from '../designer-state';
44
import { WorkspaceControllerWrapper } from '../workspace/workspace-controller';
55

@@ -18,15 +18,19 @@ export class WorkspaceApi {
1818
return this.workspaceController.getRootComponentSize();
1919
}
2020

21-
public getViewPort(): ViewPort {
22-
return this.state.viewPort;
21+
public getViewport(): Viewport {
22+
return this.state.viewport;
2323
}
2424

25-
public setViewPort(viewPort: ViewPort) {
26-
this.state.setViewPort(viewPort);
25+
public setViewport(viewport: Viewport) {
26+
this.state.setViewport(viewport);
2727
}
2828

29-
public refreshSize() {
30-
this.workspaceController.refreshSize();
29+
public updateBadges() {
30+
this.workspaceController.updateBadges();
31+
}
32+
33+
public updateSize() {
34+
this.workspaceController.updateSize();
3135
}
3236
}

‎designer/src/behaviors/click-behavior-resolver.ts

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { Vector } from '../core';
22
import { DesignerContext } from '../designer-context';
33
import { DesignerState } from '../designer-state';
4-
import { ClickBehaviorType, ClickDetails, Component } from '../workspace';
4+
import { ClickCommandType, ClickDetails, Component } from '../workspace';
55
import { Behavior } from './behavior';
6-
import { MoveViewPortBehavior } from './move-view-port-behavior';
7-
import { OpenFolderBehavior } from './open-folder-behavior';
6+
import { MoveViewportBehavior } from './move-viewport-behavior';
7+
import { TriggerCustomActionBehavior } from './trigger-custom-action-behavior';
88
import { SelectStepBehavior } from './select-step-behavior';
9+
import { OpenFolderBehavior } from './open-folder-behavior';
910

1011
export class ClickBehaviorResolver {
1112
public constructor(private readonly designerContext: DesignerContext, private readonly state: DesignerState) {}
@@ -14,26 +15,29 @@ export class ClickBehaviorResolver {
1415
const click: ClickDetails = {
1516
element,
1617
position,
17-
scale: this.state.viewPort.scale
18+
scale: this.state.viewport.scale
1819
};
1920

20-
const result = rootComponent.findByClick(click);
21+
const result = rootComponent.resolveClick(click);
2122
if (!result) {
22-
return MoveViewPortBehavior.create(this.state, true);
23+
return MoveViewportBehavior.create(this.state, true);
2324
}
2425

25-
switch (result.action.type) {
26-
case ClickBehaviorType.selectStep: {
26+
switch (result.command.type) {
27+
case ClickCommandType.selectStep: {
2728
const isDragDisabled =
2829
forceDisableDrag ||
2930
this.state.isDragDisabled ||
3031
!this.designerContext.definitionModifier.isDraggable(result.component.step, result.component.parentSequence);
3132
return SelectStepBehavior.create(result.component, isDragDisabled, this.designerContext);
3233
}
3334

34-
case ClickBehaviorType.openFolder:
35+
case ClickCommandType.openFolder:
3536
return OpenFolderBehavior.create(this.designerContext, element, result);
3637

38+
case ClickCommandType.triggerCustomAction:
39+
return TriggerCustomActionBehavior.create(this.designerContext, element, result);
40+
3741
default:
3842
throw new Error('Not supported behavior type');
3943
}

‎designer/src/behaviors/default-dragged-component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Step } from 'sequential-workflow-model';
1+
import { Step } from '../definition';
22
import { ComponentContext } from '../component-context';
33
import { Dom } from '../core';
44
import { DraggedComponent, StepContext } from '../designer-extension';

‎designer/src/behaviors/drag-step-behavior.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { Vector } from '../core/vector';
22
import { Step } from '../definition';
33
import { DesignerContext } from '../designer-context';
4-
import { Placeholder, StepComponent } from '../workspace/component';
4+
import { Placeholder } from '../workspace/component';
55
import { Behavior } from './behavior';
66
import { DragStepView } from './drag-step-behavior-view';
77
import { PlaceholderFinder } from './placeholder-finder';
88
import { DesignerState } from '../designer-state';
99
import { DefinitionModifier } from '../definition-modifier';
1010
import { WorkspaceController } from '../workspace/workspace-controller';
11+
import { StepComponent } from '../workspace/step-component';
1112

1213
export class DragStepBehavior implements Behavior {
1314
public static create(designerContext: DesignerContext, step: Step, draggedStepComponent?: StepComponent): DragStepBehavior {

0 commit comments

Comments
 (0)