Skip to content

Commit 1ccaae4

Browse files
b4rtazb4rtaz
authored
0.24.0. (#159)
1 parent b7aec7e commit 1ccaae4

20 files changed

+81
-45
lines changed

‎CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# 0.24.0
2+
3+
This version introduces a new function in the `Designer` class: `updateLayout()`. You can now manually update the layout of the designer, which is particularly useful when you change the size of the designer container. Previously, the layout was updated automatically only when the browser window was resized. However, if you changed the container size dynamically, there was no way to update the layout manually.
4+
15
# 0.23.0
26

37
This release updates the CSS selectors for the toolbox, allowing you to adjust its width with a single CSS override.

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,10 @@ Add the below code to your head section in HTML document.
103103
```html
104104
<head>
105105
...
106-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.23.0/css/designer.css" rel="stylesheet">
107-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.23.0/css/designer-light.css" rel="stylesheet">
108-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.23.0/css/designer-dark.css" rel="stylesheet">
109-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.23.0/dist/index.umd.js"></script>
106+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.0/css/designer.css" rel="stylesheet">
107+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.0/css/designer-light.css" rel="stylesheet">
108+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.0/css/designer-dark.css" rel="stylesheet">
109+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.0/dist/index.umd.js"></script>
110110
```
111111

112112
Call the designer by:

‎angular/designer/package.json

+2-2
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.23.0",
4+
"version": "0.24.0",
55
"author": {
66
"name": "NoCode JS",
77
"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
1515
"peerDependencies": {
1616
"@angular/common": "12 - 18",
1717
"@angular/core": "12 - 18",
18-
"sequential-workflow-designer": "^0.23.0"
18+
"sequential-workflow-designer": "^0.24.0"
1919
},
2020
"dependencies": {
2121
"tslib": "^2.3.0"

‎demos/angular-app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
"@angular/platform-browser-dynamic": "^17.3.9",
2727
"@angular/router": "^17.3.9",
2828
"rxjs": "~7.8.0",
29-
"sequential-workflow-designer": "^0.23.0",
30-
"sequential-workflow-designer-angular": "^0.23.0",
29+
"sequential-workflow-designer": "^0.24.0",
30+
"sequential-workflow-designer-angular": "^0.24.0",
3131
"tslib": "^2.3.0",
3232
"zone.js": "~0.14.6"
3333
},

‎demos/angular-app/yarn.lock

+8-8
Original file line numberDiff line numberDiff line change
@@ -6744,17 +6744,17 @@ send@0.18.0:
67446744
range-parser "~1.2.1"
67456745
statuses "2.0.1"
67466746

6747-
sequential-workflow-designer-angular@^0.23.0:
6748-
version "0.23.0"
6749-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.23.0.tgz#aa8a8f9f6e0332d1d3e37c9f973526858db47529"
6750-
integrity sha512-zLLDzDCY9YOjEpDBdKhYPmsaMIph8boZ9sHyCG8G3btDe5DxyQ0CWly83gn3JYn+ydEbxP8uKr79QOCx5qU86g==
6747+
sequential-workflow-designer-angular@^0.24.0:
6748+
version "0.24.0"
6749+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.24.0.tgz#b7f93508228e309648597c17eb742ac0e437d62d"
6750+
integrity sha512-H137tfBzgB7ETQFWtgVwSIVPL9Spe47zSx1xTpClMQndVMEh2ueOstncHoZouF97NuxGenfogfPRQ1r2yX8rfg==
67516751
dependencies:
67526752
tslib "^2.3.0"
67536753

6754-
sequential-workflow-designer@^0.23.0:
6755-
version "0.23.0"
6756-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.23.0.tgz#8564eed552a75d5d6bca4aeb84e410add3fe431d"
6757-
integrity sha512-wySBYU+r8UoXeRaqThnH99NDgyAEek4QJSWZHGhKwgPfguH0Y9JZB+8DvV15iLFL9lMKPYiqWQHZvIhUtDz2LA==
6754+
sequential-workflow-designer@^0.24.0:
6755+
version "0.24.0"
6756+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.24.0.tgz#33d1bba1ccbf33a1ba8b70c133d381faf2361536"
6757+
integrity sha512-o4wWHw4z2W2r5EqIKTmR3VUh+Cb6yMn+4nIcFWyA63J4XOKcEAEV32eBHtXnmxsjdlfkfRDcXMITp8zV4QbzUA==
67586758
dependencies:
67596759
sequential-workflow-model "^0.2.0"
67606760

‎demos/react-app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
"dependencies": {
77
"react": "^18.2.0",
88
"react-dom": "^18.2.0",
9-
"sequential-workflow-designer": "^0.23.0",
10-
"sequential-workflow-designer-react": "^0.23.0"
9+
"sequential-workflow-designer": "^0.24.0",
10+
"sequential-workflow-designer-react": "^0.24.0"
1111
},
1212
"devDependencies": {
1313
"@types/jest": "^29.2.5",

‎demos/svelte-app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
"eslint": "eslint ./src --ext .ts"
1717
},
1818
"dependencies": {
19-
"sequential-workflow-designer": "^0.23.0",
20-
"sequential-workflow-designer-svelte": "^0.23.0"
19+
"sequential-workflow-designer": "^0.24.0",
20+
"sequential-workflow-designer-svelte": "^0.24.0"
2121
},
2222
"devDependencies": {
2323
"@sveltejs/adapter-static": "^2.0.3",

‎designer/package.json

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

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

+4
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ export class ControlBar implements UiComponent {
3131
private readonly isUndoRedoSupported: boolean
3232
) {}
3333

34+
public updateLayout() {
35+
//
36+
}
37+
3438
public destroy() {
3539
//
3640
}

‎designer/src/designer-extension.ts

+1
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ export interface UiComponentExtension {
112112
}
113113

114114
export interface UiComponent {
115+
updateLayout(): void;
115116
destroy(): void;
116117
}
117118

‎designer/src/designer-view.ts

+14-9
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,11 @@ export class DesignerView {
1818
const daemons = designerContext.services.daemons.map(factory => factory.create(api));
1919

2020
const view = new DesignerView(root, designerContext.layoutController, workspace, uiComponents, daemons);
21-
view.reloadLayout();
22-
window.addEventListener('resize', view.onResizeHandler, false);
21+
view.applyLayout();
22+
window.addEventListener('resize', view.onResize, false);
2323
return view;
2424
}
2525

26-
private readonly onResizeHandler = () => this.onResize();
27-
2826
public constructor(
2927
private readonly root: HTMLElement,
3028
private readonly layoutController: LayoutController,
@@ -33,8 +31,15 @@ export class DesignerView {
3331
private readonly daemons: Daemon[]
3432
) {}
3533

34+
public updateLayout() {
35+
this.applyLayout();
36+
for (const component of this.uiComponents) {
37+
component.updateLayout();
38+
}
39+
}
40+
3641
public destroy() {
37-
window.removeEventListener('resize', this.onResizeHandler, false);
42+
window.removeEventListener('resize', this.onResize, false);
3843

3944
this.workspace.destroy();
4045
this.uiComponents.forEach(component => component.destroy());
@@ -43,11 +48,11 @@ export class DesignerView {
4348
this.root.parentElement?.removeChild(this.root);
4449
}
4550

46-
private onResize() {
47-
this.reloadLayout();
48-
}
51+
private readonly onResize = () => {
52+
this.updateLayout();
53+
};
4954

50-
private reloadLayout() {
55+
private applyLayout() {
5156
const isMobile = this.layoutController.isMobile();
5257
Dom.toggleClass(this.root, !isMobile, 'sqd-layout-desktop');
5358
Dom.toggleClass(this.root, isMobile, 'sqd-layout-mobile');

‎designer/src/designer.ts

+8
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,14 @@ export class Designer<TDefinition extends Definition = Definition> {
187187
this.api.workspace.updateRootComponent();
188188
}
189189

190+
/**
191+
* @description Updates the layout of the designer.
192+
*/
193+
public updateLayout() {
194+
this.api.workspace.updateCanvasSize();
195+
this.view.updateLayout();
196+
}
197+
190198
/**
191199
* @description Updates all badges.
192200
*/

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

+4
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@ export class SmartEditor implements UiComponent {
3939
this.setIsCollapsed(this.editorApi.isCollapsed());
4040
}
4141

42+
public updateLayout() {
43+
//
44+
}
45+
4246
public destroy() {
4347
this.view.destroy();
4448
}

‎designer/src/toolbox/scrollbox-view.ts

+2-7
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ export class ScrollBoxView {
1616
parent.appendChild(root);
1717

1818
const view = new ScrollBoxView(root, viewport);
19-
window.addEventListener('resize', view.onResize, false);
2019
root.addEventListener('wheel', e => view.onWheel(e), listenerOptions);
2120
root.addEventListener('touchstart', e => view.onTouchStart(e), listenerOptions);
2221
root.addEventListener('mousedown', e => view.onMouseDown(e), false);
@@ -46,14 +45,14 @@ export class ScrollBoxView {
4645
this.reload(element);
4746
}
4847

49-
public refresh() {
48+
public updateLayout() {
5049
if (this.content) {
5150
this.reload(this.content.element);
5251
}
5352
}
5453

5554
public destroy() {
56-
window.removeEventListener('resize', this.onResize, false);
55+
//
5756
}
5857

5958
private reload(element: HTMLElement) {
@@ -72,10 +71,6 @@ export class ScrollBoxView {
7271
};
7372
}
7473

75-
private readonly onResize = () => {
76-
this.refresh();
77-
};
78-
7974
private onWheel(e: WheelEvent) {
8075
e.preventDefault();
8176
e.stopPropagation();

‎designer/src/toolbox/toolbox-view.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,10 @@ export class ToolboxView {
5454
private readonly api: ToolboxApi
5555
) {}
5656

57+
public updateLayout() {
58+
this.scrollBoxView.updateLayout();
59+
}
60+
5761
public bindToggleClick(handler: () => void) {
5862
function forward(e: Event) {
5963
e.preventDefault();
@@ -80,7 +84,7 @@ export class ToolboxView {
8084
this.header.appendChild(this.headerToggleIcon);
8185

8286
if (!isCollapsed) {
83-
this.scrollBoxView.refresh();
87+
this.updateLayout();
8488
}
8589
}
8690

‎designer/src/toolbox/toolbox.ts

+4
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ export class Toolbox implements UiComponent {
2727
private readonly allGroups: ToolboxGroupData[]
2828
) {}
2929

30+
public updateLayout() {
31+
this.view.updateLayout();
32+
}
33+
3034
public destroy() {
3135
this.view.destroy();
3236
}

‎examples/assets/lib.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ function embedStylesheet(url) {
1313
document.write(`<link href="${url}" rel="stylesheet">`);
1414
}
1515

16-
const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.23.0';
16+
const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.0';
1717

1818
embedScript(`${baseUrl}/dist/index.umd.js`);
1919
embedStylesheet(`${baseUrl}/css/designer.css`);

‎react/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer-react",
33
"description": "React wrapper for Sequential Workflow Designer component.",
4-
"version": "0.23.0",
4+
"version": "0.24.0",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",
@@ -47,7 +47,7 @@
4747
"peerDependencies": {
4848
"react": "^18.2.0",
4949
"react-dom": "^18.2.0",
50-
"sequential-workflow-designer": "^0.23.0"
50+
"sequential-workflow-designer": "^0.24.0"
5151
},
5252
"devDependencies": {
5353
"@rollup/plugin-node-resolve": "^15.0.1",
@@ -63,7 +63,7 @@
6363
"prettier": "^3.2.5",
6464
"react": "^18.2.0",
6565
"react-dom": "^18.2.0",
66-
"sequential-workflow-designer": "^0.23.0",
66+
"sequential-workflow-designer": "^0.24.0",
6767
"rollup": "^3.18.0",
6868
"rollup-plugin-dts": "^5.2.0",
6969
"rollup-plugin-typescript2": "^0.34.1",

‎react/src/SequentialWorkflowDesignerController.ts

+7
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,13 @@ export class SequentialWorkflowDesignerController {
3333
this.getDesigner().updateRootComponent();
3434
};
3535

36+
/**
37+
* @description Updates the layout of the designer.
38+
*/
39+
public readonly updateLayout = () => {
40+
this.getDesigner().updateLayout();
41+
};
42+
3643
/**
3744
* Replaces the current definition with a new one and adds the previous definition to the undo stack.
3845
* @param definition A new definition.

‎svelte/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer-svelte",
33
"description": "Svelte wrapper for Sequential Workflow Designer component.",
4-
"version": "0.23.0",
4+
"version": "0.24.0",
55
"license": "MIT",
66
"scripts": {
77
"prepare": "cp ../LICENSE LICENSE",
@@ -28,10 +28,10 @@
2828
],
2929
"peerDependencies": {
3030
"svelte": "^4.0.0",
31-
"sequential-workflow-designer": "^0.23.0"
31+
"sequential-workflow-designer": "^0.24.0"
3232
},
3333
"devDependencies": {
34-
"sequential-workflow-designer": "^0.23.0",
34+
"sequential-workflow-designer": "^0.24.0",
3535
"@sveltejs/adapter-static": "^2.0.3",
3636
"@sveltejs/kit": "^1.20.4",
3737
"@sveltejs/package": "^2.0.0",

0 commit comments

Comments
 (0)