Skip to content

Commit 8724a60

Browse files
b4rtazb4rtaz
authored
0.11.0. (#40)
1 parent 912bc6c commit 8724a60

File tree

92 files changed

+1250
-739
lines changed

Some content is hidden

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

92 files changed

+1250
-739
lines changed

‎CHANGELOG.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
## 0.11.0
2+
3+
### Breaking Changes
4+
5+
* This version introduces a few changes in the `customActionHandler` handler:
6+
* the first parameter is an object now, previously it was a string. To read action type you need to read the `type` property from the object.
7+
* the `step` parameter is nullable now,
8+
* we added a `context` parameter that allows to notify about changes in the definition.
9+
* Added new classes for label components: `sqd-label-primary` and `sqd-label-secondary`.
10+
111
## 0.10.2
212

313
* Fixed the bug with moving the viewport by the scroll wheel button.

‎README.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ Pro:
4545
* [👋 Custom Dragged Component](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/custom-dragged-component.html)
4646
* [🔰 Badges](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/badges.html)
4747
* [🎩 Custom Viewport](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/custom-viewport.html)
48+
* [🛎 Clickable Placeholder](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/clickable-placeholder.html)
4849

4950
## 👩‍💻 Integrations
5051

@@ -88,10 +89,10 @@ Add the below code to your head section in HTML document.
8889
```html
8990
<head>
9091
...
91-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.10.2/css/designer.css" rel="stylesheet">
92-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.10.2/css/designer-light.css" rel="stylesheet">
93-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.10.2/css/designer-dark.css" rel="stylesheet">
94-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.10.2/dist/index.umd.js"></script>
92+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.11.0/css/designer.css" rel="stylesheet">
93+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.11.0/css/designer-light.css" rel="stylesheet">
94+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.11.0/css/designer-dark.css" rel="stylesheet">
95+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.11.0/dist/index.umd.js"></script>
9596
```
9697

9798
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.10.2",
4+
"version": "0.11.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.10.2"
18+
"sequential-workflow-designer": "^0.11.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.10.2",
28-
"sequential-workflow-designer-angular": "^0.10.2",
27+
"sequential-workflow-designer": "^0.11.0",
28+
"sequential-workflow-designer-angular": "^0.11.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.10.2:
5184-
version "0.10.2"
5185-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.10.2.tgz#c496facffe214c57bcd116e28c096966bb3da5eb"
5186-
integrity sha512-M9eMlbvIaKcgY4UAPngwbmpcYxhEJKnoLDhXplwVGLB8AsOxf9AdmKj3TpJEd2PMvTtHGLiQu3NrOPr4OV36Kw==
5183+
sequential-workflow-designer-angular@^0.11.0:
5184+
version "0.11.0"
5185+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.11.0.tgz#1a05b95e70e71b8299d231c7a3253a0cc8e3d462"
5186+
integrity sha512-Hw4xW9Tx3vxz+UDCDXw6qcxbeGnKCD8DLBBiMFbVMnzX8zDuM3ZKgwIK42V1utCYMjrn9gQSCsrXBDXVLbnjKg==
51875187
dependencies:
51885188
tslib "^2.3.0"
51895189

5190-
sequential-workflow-designer@^0.10.2:
5191-
version "0.10.2"
5192-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.10.2.tgz#f8c355ea3c8772d247e7ac9bc0ecf1ce91b51187"
5193-
integrity sha512-mq9yOwwOwo9a9LPfzOUwECSVpkXYSDLqoUENEqconj0GDbUk3pVuXHQ78b/n4DOMdoxNSloZyRxbmkUZrLTFkw==
5190+
sequential-workflow-designer@^0.11.0:
5191+
version "0.11.0"
5192+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.11.0.tgz#b1dac2d141f3f78dbb19628709257b89ead3c507"
5193+
integrity sha512-BwqEO5u1qna2ZO6qr6BKlqedsh8SofUS21SR0GA9mO1FWDj5OWfwKUB/g4WdUR+kC5ZpmdVf3O7Ou5/TtymrOg==
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.10.2",
9-
"sequential-workflow-designer-react": "^0.10.2"
8+
"sequential-workflow-designer": "^0.11.0",
9+
"sequential-workflow-designer-react": "^0.11.0"
1010
},
1111
"devDependencies": {
1212
"@types/jest": "^29.2.5",

‎demos/react-app/src/model.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ export interface TaskStep extends Step {
1616
}
1717

1818
export interface SwitchStep extends BranchedStep {
19+
componentType: 'switch';
1920
type: 'switch';
20-
name: 'switch';
2121
properties: {
2222
x?: string;
2323
y?: string;

‎designer/css/designer-dark.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,10 @@
103103
.sqd-theme-dark .sqd-region.sqd-selected {
104104
stroke: #FFF;
105105
}
106-
.sqd-theme-dark .sqd-label-rect {
106+
.sqd-theme-dark .sqd-label-primary .sqd-label-rect {
107107
fill: #2411DB;
108108
}
109-
.sqd-theme-dark .sqd-label-rect.sqd-label-secondary {
109+
.sqd-theme-dark .sqd-label-secondary .sqd-label-rect {
110110
fill: #0E0E0E;
111111
}
112112
.sqd-theme-dark .sqd-label-text {

‎designer/css/designer-light.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,10 @@
103103
.sqd-theme-light .sqd-region.sqd-selected {
104104
stroke: #ED4800;
105105
}
106-
.sqd-theme-light .sqd-label-rect {
106+
.sqd-theme-light .sqd-label-primary .sqd-label-rect {
107107
fill: #2411DB;
108108
}
109-
.sqd-theme-light .sqd-label-rect.sqd-label-secondary {
109+
.sqd-theme-light .sqd-label-secondary .sqd-label-rect {
110110
fill: #000;
111111
}
112112
.sqd-theme-light .sqd-label-text {

‎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.10.2",
4+
"version": "0.11.0",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ export class EditorApi {
2727
}
2828

2929
public createStepEditorContext(stepId: string): StepEditorContext {
30+
if (!stepId) {
31+
throw new Error('Step id is empty');
32+
}
3033
return {
3134
notifyPropertiesChanged: () => {
3235
this.state.notifyDefinitionChanged(DefinitionChangeType.stepPropertyChanged, stepId);

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,15 @@ export class WorkspaceApi {
2626
this.state.setViewport(viewport);
2727
}
2828

29+
public updateRootComponent() {
30+
this.workspaceController.updateRootComponent();
31+
}
32+
2933
public updateBadges() {
3034
this.workspaceController.updateBadges();
3135
}
3236

33-
public updateSize() {
34-
this.workspaceController.updateSize();
37+
public updateCanvasSize() {
38+
this.workspaceController.updateCanvasSize();
3539
}
3640
}

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ import { DesignerState } from '../designer-state';
44
import { ClickCommandType, ClickDetails, Component } from '../workspace';
55
import { Behavior } from './behavior';
66
import { MoveViewportBehavior } from './move-viewport-behavior';
7-
import { TriggerCustomActionBehavior } from './trigger-custom-action-behavior';
87
import { SelectStepBehavior } from './select-step-behavior';
9-
import { OpenFolderBehavior } from './open-folder-behavior';
8+
import { PressingBehavior } from './pressing-behaviors/pressing-behavior';
9+
import { RerenderStepPressingBehaviorHandler } from './pressing-behaviors/rerender-step-pressing-behavior-handler';
10+
import { OpenFolderPressingBehaviorHandler } from './pressing-behaviors/open-folder-pressing-behavior-handler';
11+
import { TriggerCustomActionPressingBehaviorHandler } from './pressing-behaviors/trigger-custom-action-pressing-behavior-handler';
1012

1113
export class ClickBehaviorResolver {
1214
public constructor(private readonly designerContext: DesignerContext, private readonly state: DesignerState) {}
@@ -18,25 +20,23 @@ export class ClickBehaviorResolver {
1820
scale: this.state.viewport.scale
1921
};
2022

21-
const result = rootComponent.resolveClick(click);
22-
if (!result) {
23+
const command = rootComponent.resolveClick(click);
24+
if (!command) {
2325
return MoveViewportBehavior.create(this.state, true);
2426
}
2527

26-
switch (result.command.type) {
27-
case ClickCommandType.selectStep: {
28-
const isDragDisabled =
29-
forceDisableDrag ||
30-
this.state.isDragDisabled ||
31-
!this.designerContext.definitionModifier.isDraggable(result.component.step, result.component.parentSequence);
32-
return SelectStepBehavior.create(result.component, isDragDisabled, this.designerContext);
33-
}
28+
switch (command.type) {
29+
case ClickCommandType.selectStep:
30+
return SelectStepBehavior.create(command.component, forceDisableDrag, this.designerContext);
31+
32+
case ClickCommandType.rerenderStep:
33+
return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.designerContext));
3434

3535
case ClickCommandType.openFolder:
36-
return OpenFolderBehavior.create(this.designerContext, element, result);
36+
return PressingBehavior.create(element, new OpenFolderPressingBehaviorHandler(command, this.designerContext));
3737

3838
case ClickCommandType.triggerCustomAction:
39-
return TriggerCustomActionBehavior.create(this.designerContext, element, result);
39+
return PressingBehavior.create(element, new TriggerCustomActionPressingBehaviorHandler(command, this.designerContext));
4040

4141
default:
4242
throw new Error('Not supported behavior type');

‎designer/src/behaviors/open-folder-behavior.ts

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎designer/src/behaviors/pressing-behaviors/open-folder-pressing-behavior-handler.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { DesignerContext } from '../../designer-context';
2+
import { OpenFolderClickCommand } from '../../workspace';
3+
import { PressingBehaviorHandler } from './pressing-behavior';
4+
5+
export class OpenFolderPressingBehaviorHandler implements PressingBehaviorHandler {
6+
public constructor(private readonly command: OpenFolderClickCommand, private readonly designerContext: DesignerContext) {}
7+
8+
public handle() {
9+
const stepId = this.command.step.id;
10+
this.designerContext.state.pushStepIdToFolderPath(stepId);
11+
}
12+
}

‎designer/src/behaviors/pressing-behaviors/pressing-behavior.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Behavior } from '../behavior';
2+
3+
export interface PressingBehaviorHandler {
4+
handle(): void;
5+
}
6+
7+
export class PressingBehavior implements Behavior {
8+
public static create(clickedElement: Element, handler: PressingBehaviorHandler): PressingBehavior {
9+
return new PressingBehavior(clickedElement, handler);
10+
}
11+
12+
private constructor(private readonly clickedElement: Element, private readonly handler: PressingBehaviorHandler) {}
13+
14+
public onStart() {
15+
// Nothing...
16+
}
17+
18+
public onMove() {
19+
// Nothing...
20+
}
21+
22+
public onEnd(interrupt: boolean, element: Element | null) {
23+
if (!interrupt && element && this.clickedElement === element) {
24+
this.handler.handle();
25+
}
26+
}
27+
}

‎designer/src/behaviors/pressing-behaviors/rerender-step-pressing-behavior-handler.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { DesignerContext } from '../../designer-context';
2+
import { PressingBehaviorHandler } from './pressing-behavior';
3+
4+
export class RerenderStepPressingBehaviorHandler implements PressingBehaviorHandler {
5+
public constructor(private readonly designerContext: DesignerContext) {}
6+
7+
public handle() {
8+
this.designerContext.workspaceController.updateRootComponent();
9+
}
10+
}

‎designer/src/behaviors/pressing-behaviors/trigger-custom-action-pressing-behavior-handler.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { CustomActionHandlerContext } from '../../designer-configuration';
2+
import { DesignerContext } from '../../designer-context';
3+
import { DefinitionChangeType } from '../../designer-state';
4+
import { TriggerCustomActionClickCommand } from '../../workspace';
5+
import { PressingBehaviorHandler } from './pressing-behavior';
6+
7+
export class TriggerCustomActionPressingBehaviorHandler implements PressingBehaviorHandler {
8+
public constructor(private readonly command: TriggerCustomActionClickCommand, private readonly designerContext: DesignerContext) {}
9+
10+
public handle() {
11+
const customActionHandler = this.designerContext.configuration.customActionHandler;
12+
if (!customActionHandler) {
13+
console.warn(`Custom action handler is not defined (action type: ${this.command.action.type})`);
14+
return;
15+
}
16+
17+
const context = this.createContext();
18+
customActionHandler(this.command.action, this.command.step, this.command.sequence, context);
19+
}
20+
21+
private createContext(): CustomActionHandlerContext {
22+
return {
23+
notifyStepNameChanged: (stepId: string) => this.notifyStepChanged(DefinitionChangeType.stepNameChanged, stepId),
24+
notifyStepPropertiesChanged: (stepId: string) => this.notifyStepChanged(DefinitionChangeType.stepPropertyChanged, stepId),
25+
notifyStepInserted: (stepId: string) => this.notifyStepChanged(DefinitionChangeType.stepInserted, stepId),
26+
notifyStepMoved: (stepId: string) => this.notifyStepChanged(DefinitionChangeType.stepMoved, stepId),
27+
notifyStepDeleted: (stepId: string) => this.notifyStepChanged(DefinitionChangeType.stepDeleted, stepId)
28+
};
29+
}
30+
31+
private notifyStepChanged(changeType: DefinitionChangeType, stepId: string) {
32+
if (!stepId) {
33+
throw new Error('Step id is empty');
34+
}
35+
this.designerContext.state.notifyDefinitionChanged(changeType, stepId);
36+
}
37+
}

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@ import { DragStepBehavior } from './drag-step-behavior';
77
import { MoveViewportBehavior } from './move-viewport-behavior';
88

99
export class SelectStepBehavior implements Behavior {
10-
public static create(
11-
pressedStepComponent: StepComponent,
12-
isDragDisabled: boolean,
13-
designerContext: DesignerContext
14-
): SelectStepBehavior {
15-
return new SelectStepBehavior(pressedStepComponent, isDragDisabled, designerContext, designerContext.state);
10+
public static create(pressedStepComponent: StepComponent, forceDisableDrag: boolean, context: DesignerContext): SelectStepBehavior {
11+
const isDragDisabled =
12+
forceDisableDrag ||
13+
context.state.isDragDisabled ||
14+
!context.definitionModifier.isDraggable(pressedStepComponent.step, pressedStepComponent.parentSequence);
15+
return new SelectStepBehavior(pressedStepComponent, isDragDisabled, context, context.state);
1616
}
1717

1818
private constructor(
1919
private readonly pressedStepComponent: StepComponent,
2020
private readonly isDragDisabled: boolean,
21-
private readonly designerContext: DesignerContext,
21+
private readonly context: DesignerContext,
2222
private readonly state: DesignerState
2323
) {}
2424

@@ -31,7 +31,7 @@ export class SelectStepBehavior implements Behavior {
3131
const canDrag = !this.state.isReadonly && !this.isDragDisabled;
3232
if (canDrag) {
3333
this.state.setSelectedStepId(null);
34-
return DragStepBehavior.create(this.designerContext, this.pressedStepComponent.step, this.pressedStepComponent);
34+
return DragStepBehavior.create(this.context, this.pressedStepComponent.step, this.pressedStepComponent);
3535
} else {
3636
return MoveViewportBehavior.create(this.state, false);
3737
}

0 commit comments

Comments
 (0)