sequential-workflow-designer 0.22.1 → 0.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -4
- package/css/designer-dark.css +2 -2
- package/css/designer-light.css +2 -2
- package/css/designer.css +13 -7
- package/dist/index.umd.js +41 -17
- package/lib/cjs/index.cjs +41 -17
- package/lib/esm/index.js +41 -17
- package/lib/index.d.ts +5 -0
- package/package.json +1 -1
- package/sass/designer-theme.scss +2 -2
- package/sass/designer.scss +12 -7
package/README.md
CHANGED
|
@@ -103,10 +103,10 @@ Add the below code to your head section in HTML document.
|
|
|
103
103
|
```html
|
|
104
104
|
<head>
|
|
105
105
|
...
|
|
106
|
-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.
|
|
107
|
-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.
|
|
108
|
-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.
|
|
109
|
-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.
|
|
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>
|
|
110
110
|
```
|
|
111
111
|
|
|
112
112
|
Call the designer by:
|
package/css/designer-dark.css
CHANGED
|
@@ -7,13 +7,13 @@
|
|
|
7
7
|
.sqd-theme-dark .sqd-toolbox-header-title {
|
|
8
8
|
color: #fff;
|
|
9
9
|
}
|
|
10
|
-
.sqd-theme-dark .sqd-toolbox-filter {
|
|
10
|
+
.sqd-theme-dark .sqd-toolbox-filter-input {
|
|
11
11
|
background: #242424;
|
|
12
12
|
color: #fff;
|
|
13
13
|
border: none;
|
|
14
14
|
border-radius: 10px;
|
|
15
15
|
}
|
|
16
|
-
.sqd-theme-dark .sqd-toolbox-filter:focus {
|
|
16
|
+
.sqd-theme-dark .sqd-toolbox-filter-input:focus {
|
|
17
17
|
border-color: #939393;
|
|
18
18
|
}
|
|
19
19
|
.sqd-theme-dark .sqd-toolbox-group-title {
|
package/css/designer-light.css
CHANGED
|
@@ -7,13 +7,13 @@
|
|
|
7
7
|
.sqd-theme-light .sqd-toolbox-header-title {
|
|
8
8
|
color: #000;
|
|
9
9
|
}
|
|
10
|
-
.sqd-theme-light .sqd-toolbox-filter {
|
|
10
|
+
.sqd-theme-light .sqd-toolbox-filter-input {
|
|
11
11
|
background: #fff;
|
|
12
12
|
color: #000;
|
|
13
13
|
border: 1px solid #c3c3c3;
|
|
14
14
|
border-radius: 10px;
|
|
15
15
|
}
|
|
16
|
-
.sqd-theme-light .sqd-toolbox-filter:focus {
|
|
16
|
+
.sqd-theme-light .sqd-toolbox-filter-input:focus {
|
|
17
17
|
border-color: #939393;
|
|
18
18
|
}
|
|
19
19
|
.sqd-theme-light .sqd-toolbox-group-title {
|
package/css/designer.css
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
|
|
24
24
|
/* .sqd-toolbox */
|
|
25
25
|
.sqd-toolbox,
|
|
26
|
-
.sqd-toolbox-filter {
|
|
26
|
+
.sqd-toolbox-filter-input {
|
|
27
27
|
font-size: 11px;
|
|
28
28
|
line-height: 1.2em;
|
|
29
29
|
}
|
|
@@ -74,29 +74,35 @@
|
|
|
74
74
|
position: absolute;
|
|
75
75
|
top: 0;
|
|
76
76
|
left: 0;
|
|
77
|
+
width: 100%;
|
|
78
|
+
box-sizing: border-box;
|
|
79
|
+
padding: 0 10px;
|
|
77
80
|
}
|
|
78
81
|
|
|
79
82
|
.sqd-toolbox-filter {
|
|
83
|
+
padding: 0 10px 10px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.sqd-toolbox-filter-input {
|
|
80
87
|
display: block;
|
|
81
88
|
box-sizing: border-box;
|
|
82
89
|
padding: 6px 8px;
|
|
83
90
|
outline: none;
|
|
84
|
-
width:
|
|
85
|
-
margin: 0 10px 10px;
|
|
86
|
-
box-sizing: border-box;
|
|
91
|
+
width: 100%;
|
|
87
92
|
}
|
|
88
93
|
|
|
89
94
|
.sqd-toolbox-group-title {
|
|
90
95
|
text-align: center;
|
|
91
96
|
padding: 5px 0;
|
|
92
|
-
margin: 0
|
|
97
|
+
margin: 0 0 10px;
|
|
98
|
+
width: 100%;
|
|
93
99
|
}
|
|
94
100
|
|
|
95
101
|
.sqd-toolbox-item {
|
|
96
102
|
position: relative;
|
|
97
103
|
box-sizing: border-box;
|
|
98
|
-
margin: 0
|
|
99
|
-
width:
|
|
104
|
+
margin: 0 0 10px;
|
|
105
|
+
width: 100%;
|
|
100
106
|
cursor: move;
|
|
101
107
|
}
|
|
102
108
|
|
package/dist/index.umd.js
CHANGED
|
@@ -3436,8 +3436,8 @@
|
|
|
3436
3436
|
const uiComponents = designerContext.services.uiComponents.map(factory => factory.create(root, api));
|
|
3437
3437
|
const daemons = designerContext.services.daemons.map(factory => factory.create(api));
|
|
3438
3438
|
const view = new DesignerView(root, designerContext.layoutController, workspace, uiComponents, daemons);
|
|
3439
|
-
view.
|
|
3440
|
-
window.addEventListener('resize', view.
|
|
3439
|
+
view.applyLayout();
|
|
3440
|
+
window.addEventListener('resize', view.onResize, false);
|
|
3441
3441
|
return view;
|
|
3442
3442
|
}
|
|
3443
3443
|
constructor(root, layoutController, workspace, uiComponents, daemons) {
|
|
@@ -3446,20 +3446,25 @@
|
|
|
3446
3446
|
this.workspace = workspace;
|
|
3447
3447
|
this.uiComponents = uiComponents;
|
|
3448
3448
|
this.daemons = daemons;
|
|
3449
|
-
this.
|
|
3449
|
+
this.onResize = () => {
|
|
3450
|
+
this.updateLayout();
|
|
3451
|
+
};
|
|
3452
|
+
}
|
|
3453
|
+
updateLayout() {
|
|
3454
|
+
this.applyLayout();
|
|
3455
|
+
for (const component of this.uiComponents) {
|
|
3456
|
+
component.updateLayout();
|
|
3457
|
+
}
|
|
3450
3458
|
}
|
|
3451
3459
|
destroy() {
|
|
3452
3460
|
var _a;
|
|
3453
|
-
window.removeEventListener('resize', this.
|
|
3461
|
+
window.removeEventListener('resize', this.onResize, false);
|
|
3454
3462
|
this.workspace.destroy();
|
|
3455
3463
|
this.uiComponents.forEach(component => component.destroy());
|
|
3456
3464
|
this.daemons.forEach(daemon => daemon.destroy());
|
|
3457
3465
|
(_a = this.root.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.root);
|
|
3458
3466
|
}
|
|
3459
|
-
|
|
3460
|
-
this.reloadLayout();
|
|
3461
|
-
}
|
|
3462
|
-
reloadLayout() {
|
|
3467
|
+
applyLayout() {
|
|
3463
3468
|
const isMobile = this.layoutController.isMobile();
|
|
3464
3469
|
Dom.toggleClass(this.root, !isMobile, 'sqd-layout-desktop');
|
|
3465
3470
|
Dom.toggleClass(this.root, isMobile, 'sqd-layout-mobile');
|
|
@@ -3628,6 +3633,9 @@
|
|
|
3628
3633
|
this.controlBarApi = controlBarApi;
|
|
3629
3634
|
this.isUndoRedoSupported = isUndoRedoSupported;
|
|
3630
3635
|
}
|
|
3636
|
+
updateLayout() {
|
|
3637
|
+
//
|
|
3638
|
+
}
|
|
3631
3639
|
destroy() {
|
|
3632
3640
|
//
|
|
3633
3641
|
}
|
|
@@ -3803,6 +3811,9 @@
|
|
|
3803
3811
|
updateVisibility() {
|
|
3804
3812
|
this.setIsCollapsed(this.editorApi.isCollapsed());
|
|
3805
3813
|
}
|
|
3814
|
+
updateLayout() {
|
|
3815
|
+
//
|
|
3816
|
+
}
|
|
3806
3817
|
destroy() {
|
|
3807
3818
|
this.view.destroy();
|
|
3808
3819
|
}
|
|
@@ -3828,7 +3839,6 @@
|
|
|
3828
3839
|
});
|
|
3829
3840
|
parent.appendChild(root);
|
|
3830
3841
|
const view = new ScrollBoxView(root, viewport);
|
|
3831
|
-
window.addEventListener('resize', view.onResize, false);
|
|
3832
3842
|
root.addEventListener('wheel', e => view.onWheel(e), listenerOptions);
|
|
3833
3843
|
root.addEventListener('touchstart', e => view.onTouchStart(e), listenerOptions);
|
|
3834
3844
|
root.addEventListener('mousedown', e => view.onMouseDown(e), false);
|
|
@@ -3837,9 +3847,6 @@
|
|
|
3837
3847
|
constructor(root, viewport) {
|
|
3838
3848
|
this.root = root;
|
|
3839
3849
|
this.viewport = viewport;
|
|
3840
|
-
this.onResize = () => {
|
|
3841
|
-
this.refresh();
|
|
3842
|
-
};
|
|
3843
3850
|
this.onTouchStart = (e) => {
|
|
3844
3851
|
e.preventDefault();
|
|
3845
3852
|
this.startScroll(readTouchPosition(e));
|
|
@@ -3873,13 +3880,13 @@
|
|
|
3873
3880
|
this.root.appendChild(element);
|
|
3874
3881
|
this.reload(element);
|
|
3875
3882
|
}
|
|
3876
|
-
|
|
3883
|
+
updateLayout() {
|
|
3877
3884
|
if (this.content) {
|
|
3878
3885
|
this.reload(this.content.element);
|
|
3879
3886
|
}
|
|
3880
3887
|
}
|
|
3881
3888
|
destroy() {
|
|
3882
|
-
|
|
3889
|
+
//
|
|
3883
3890
|
}
|
|
3884
3891
|
reload(element) {
|
|
3885
3892
|
const maxHeightPercent = 0.7;
|
|
@@ -4040,15 +4047,19 @@
|
|
|
4040
4047
|
const body = Dom.element('div', {
|
|
4041
4048
|
class: 'sqd-toolbox-body'
|
|
4042
4049
|
});
|
|
4050
|
+
const filter = Dom.element('div', {
|
|
4051
|
+
class: 'sqd-toolbox-filter'
|
|
4052
|
+
});
|
|
4043
4053
|
const filterInput = Dom.element('input', {
|
|
4044
|
-
class: 'sqd-toolbox-filter',
|
|
4054
|
+
class: 'sqd-toolbox-filter-input',
|
|
4045
4055
|
type: 'text',
|
|
4046
4056
|
placeholder: i18n('toolbox.search', 'Search...')
|
|
4047
4057
|
});
|
|
4048
4058
|
root.appendChild(header);
|
|
4049
4059
|
root.appendChild(body);
|
|
4050
4060
|
header.appendChild(headerTitle);
|
|
4051
|
-
|
|
4061
|
+
filter.appendChild(filterInput);
|
|
4062
|
+
body.appendChild(filter);
|
|
4052
4063
|
parent.appendChild(root);
|
|
4053
4064
|
const scrollBoxView = ScrollBoxView.create(body, parent);
|
|
4054
4065
|
return new ToolboxView(header, body, filterInput, scrollBoxView, api);
|
|
@@ -4060,6 +4071,9 @@
|
|
|
4060
4071
|
this.scrollBoxView = scrollBoxView;
|
|
4061
4072
|
this.api = api;
|
|
4062
4073
|
}
|
|
4074
|
+
updateLayout() {
|
|
4075
|
+
this.scrollBoxView.updateLayout();
|
|
4076
|
+
}
|
|
4063
4077
|
bindToggleClick(handler) {
|
|
4064
4078
|
function forward(e) {
|
|
4065
4079
|
e.preventDefault();
|
|
@@ -4082,7 +4096,7 @@
|
|
|
4082
4096
|
this.headerToggleIcon = Icons.createSvg('sqd-toolbox-toggle-icon', isCollapsed ? Icons.expand : Icons.close);
|
|
4083
4097
|
this.header.appendChild(this.headerToggleIcon);
|
|
4084
4098
|
if (!isCollapsed) {
|
|
4085
|
-
this.
|
|
4099
|
+
this.updateLayout();
|
|
4086
4100
|
}
|
|
4087
4101
|
}
|
|
4088
4102
|
setGroups(groups) {
|
|
@@ -4119,6 +4133,9 @@
|
|
|
4119
4133
|
this.api = api;
|
|
4120
4134
|
this.allGroups = allGroups;
|
|
4121
4135
|
}
|
|
4136
|
+
updateLayout() {
|
|
4137
|
+
this.view.updateLayout();
|
|
4138
|
+
}
|
|
4122
4139
|
destroy() {
|
|
4123
4140
|
this.view.destroy();
|
|
4124
4141
|
}
|
|
@@ -4680,6 +4697,13 @@
|
|
|
4680
4697
|
updateRootComponent() {
|
|
4681
4698
|
this.api.workspace.updateRootComponent();
|
|
4682
4699
|
}
|
|
4700
|
+
/**
|
|
4701
|
+
* @description Updates the layout of the designer.
|
|
4702
|
+
*/
|
|
4703
|
+
updateLayout() {
|
|
4704
|
+
this.api.workspace.updateCanvasSize();
|
|
4705
|
+
this.view.updateLayout();
|
|
4706
|
+
}
|
|
4683
4707
|
/**
|
|
4684
4708
|
* @description Updates all badges.
|
|
4685
4709
|
*/
|
package/lib/cjs/index.cjs
CHANGED
|
@@ -3251,8 +3251,8 @@ class DesignerView {
|
|
|
3251
3251
|
const uiComponents = designerContext.services.uiComponents.map(factory => factory.create(root, api));
|
|
3252
3252
|
const daemons = designerContext.services.daemons.map(factory => factory.create(api));
|
|
3253
3253
|
const view = new DesignerView(root, designerContext.layoutController, workspace, uiComponents, daemons);
|
|
3254
|
-
view.
|
|
3255
|
-
window.addEventListener('resize', view.
|
|
3254
|
+
view.applyLayout();
|
|
3255
|
+
window.addEventListener('resize', view.onResize, false);
|
|
3256
3256
|
return view;
|
|
3257
3257
|
}
|
|
3258
3258
|
constructor(root, layoutController, workspace, uiComponents, daemons) {
|
|
@@ -3261,20 +3261,25 @@ class DesignerView {
|
|
|
3261
3261
|
this.workspace = workspace;
|
|
3262
3262
|
this.uiComponents = uiComponents;
|
|
3263
3263
|
this.daemons = daemons;
|
|
3264
|
-
this.
|
|
3264
|
+
this.onResize = () => {
|
|
3265
|
+
this.updateLayout();
|
|
3266
|
+
};
|
|
3267
|
+
}
|
|
3268
|
+
updateLayout() {
|
|
3269
|
+
this.applyLayout();
|
|
3270
|
+
for (const component of this.uiComponents) {
|
|
3271
|
+
component.updateLayout();
|
|
3272
|
+
}
|
|
3265
3273
|
}
|
|
3266
3274
|
destroy() {
|
|
3267
3275
|
var _a;
|
|
3268
|
-
window.removeEventListener('resize', this.
|
|
3276
|
+
window.removeEventListener('resize', this.onResize, false);
|
|
3269
3277
|
this.workspace.destroy();
|
|
3270
3278
|
this.uiComponents.forEach(component => component.destroy());
|
|
3271
3279
|
this.daemons.forEach(daemon => daemon.destroy());
|
|
3272
3280
|
(_a = this.root.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.root);
|
|
3273
3281
|
}
|
|
3274
|
-
|
|
3275
|
-
this.reloadLayout();
|
|
3276
|
-
}
|
|
3277
|
-
reloadLayout() {
|
|
3282
|
+
applyLayout() {
|
|
3278
3283
|
const isMobile = this.layoutController.isMobile();
|
|
3279
3284
|
Dom.toggleClass(this.root, !isMobile, 'sqd-layout-desktop');
|
|
3280
3285
|
Dom.toggleClass(this.root, isMobile, 'sqd-layout-mobile');
|
|
@@ -3443,6 +3448,9 @@ class ControlBar {
|
|
|
3443
3448
|
this.controlBarApi = controlBarApi;
|
|
3444
3449
|
this.isUndoRedoSupported = isUndoRedoSupported;
|
|
3445
3450
|
}
|
|
3451
|
+
updateLayout() {
|
|
3452
|
+
//
|
|
3453
|
+
}
|
|
3446
3454
|
destroy() {
|
|
3447
3455
|
//
|
|
3448
3456
|
}
|
|
@@ -3618,6 +3626,9 @@ class SmartEditor {
|
|
|
3618
3626
|
updateVisibility() {
|
|
3619
3627
|
this.setIsCollapsed(this.editorApi.isCollapsed());
|
|
3620
3628
|
}
|
|
3629
|
+
updateLayout() {
|
|
3630
|
+
//
|
|
3631
|
+
}
|
|
3621
3632
|
destroy() {
|
|
3622
3633
|
this.view.destroy();
|
|
3623
3634
|
}
|
|
@@ -3643,7 +3654,6 @@ class ScrollBoxView {
|
|
|
3643
3654
|
});
|
|
3644
3655
|
parent.appendChild(root);
|
|
3645
3656
|
const view = new ScrollBoxView(root, viewport);
|
|
3646
|
-
window.addEventListener('resize', view.onResize, false);
|
|
3647
3657
|
root.addEventListener('wheel', e => view.onWheel(e), listenerOptions);
|
|
3648
3658
|
root.addEventListener('touchstart', e => view.onTouchStart(e), listenerOptions);
|
|
3649
3659
|
root.addEventListener('mousedown', e => view.onMouseDown(e), false);
|
|
@@ -3652,9 +3662,6 @@ class ScrollBoxView {
|
|
|
3652
3662
|
constructor(root, viewport) {
|
|
3653
3663
|
this.root = root;
|
|
3654
3664
|
this.viewport = viewport;
|
|
3655
|
-
this.onResize = () => {
|
|
3656
|
-
this.refresh();
|
|
3657
|
-
};
|
|
3658
3665
|
this.onTouchStart = (e) => {
|
|
3659
3666
|
e.preventDefault();
|
|
3660
3667
|
this.startScroll(readTouchPosition(e));
|
|
@@ -3688,13 +3695,13 @@ class ScrollBoxView {
|
|
|
3688
3695
|
this.root.appendChild(element);
|
|
3689
3696
|
this.reload(element);
|
|
3690
3697
|
}
|
|
3691
|
-
|
|
3698
|
+
updateLayout() {
|
|
3692
3699
|
if (this.content) {
|
|
3693
3700
|
this.reload(this.content.element);
|
|
3694
3701
|
}
|
|
3695
3702
|
}
|
|
3696
3703
|
destroy() {
|
|
3697
|
-
|
|
3704
|
+
//
|
|
3698
3705
|
}
|
|
3699
3706
|
reload(element) {
|
|
3700
3707
|
const maxHeightPercent = 0.7;
|
|
@@ -3855,15 +3862,19 @@ class ToolboxView {
|
|
|
3855
3862
|
const body = Dom.element('div', {
|
|
3856
3863
|
class: 'sqd-toolbox-body'
|
|
3857
3864
|
});
|
|
3865
|
+
const filter = Dom.element('div', {
|
|
3866
|
+
class: 'sqd-toolbox-filter'
|
|
3867
|
+
});
|
|
3858
3868
|
const filterInput = Dom.element('input', {
|
|
3859
|
-
class: 'sqd-toolbox-filter',
|
|
3869
|
+
class: 'sqd-toolbox-filter-input',
|
|
3860
3870
|
type: 'text',
|
|
3861
3871
|
placeholder: i18n('toolbox.search', 'Search...')
|
|
3862
3872
|
});
|
|
3863
3873
|
root.appendChild(header);
|
|
3864
3874
|
root.appendChild(body);
|
|
3865
3875
|
header.appendChild(headerTitle);
|
|
3866
|
-
|
|
3876
|
+
filter.appendChild(filterInput);
|
|
3877
|
+
body.appendChild(filter);
|
|
3867
3878
|
parent.appendChild(root);
|
|
3868
3879
|
const scrollBoxView = ScrollBoxView.create(body, parent);
|
|
3869
3880
|
return new ToolboxView(header, body, filterInput, scrollBoxView, api);
|
|
@@ -3875,6 +3886,9 @@ class ToolboxView {
|
|
|
3875
3886
|
this.scrollBoxView = scrollBoxView;
|
|
3876
3887
|
this.api = api;
|
|
3877
3888
|
}
|
|
3889
|
+
updateLayout() {
|
|
3890
|
+
this.scrollBoxView.updateLayout();
|
|
3891
|
+
}
|
|
3878
3892
|
bindToggleClick(handler) {
|
|
3879
3893
|
function forward(e) {
|
|
3880
3894
|
e.preventDefault();
|
|
@@ -3897,7 +3911,7 @@ class ToolboxView {
|
|
|
3897
3911
|
this.headerToggleIcon = Icons.createSvg('sqd-toolbox-toggle-icon', isCollapsed ? Icons.expand : Icons.close);
|
|
3898
3912
|
this.header.appendChild(this.headerToggleIcon);
|
|
3899
3913
|
if (!isCollapsed) {
|
|
3900
|
-
this.
|
|
3914
|
+
this.updateLayout();
|
|
3901
3915
|
}
|
|
3902
3916
|
}
|
|
3903
3917
|
setGroups(groups) {
|
|
@@ -3934,6 +3948,9 @@ class Toolbox {
|
|
|
3934
3948
|
this.api = api;
|
|
3935
3949
|
this.allGroups = allGroups;
|
|
3936
3950
|
}
|
|
3951
|
+
updateLayout() {
|
|
3952
|
+
this.view.updateLayout();
|
|
3953
|
+
}
|
|
3937
3954
|
destroy() {
|
|
3938
3955
|
this.view.destroy();
|
|
3939
3956
|
}
|
|
@@ -4495,6 +4512,13 @@ class Designer {
|
|
|
4495
4512
|
updateRootComponent() {
|
|
4496
4513
|
this.api.workspace.updateRootComponent();
|
|
4497
4514
|
}
|
|
4515
|
+
/**
|
|
4516
|
+
* @description Updates the layout of the designer.
|
|
4517
|
+
*/
|
|
4518
|
+
updateLayout() {
|
|
4519
|
+
this.api.workspace.updateCanvasSize();
|
|
4520
|
+
this.view.updateLayout();
|
|
4521
|
+
}
|
|
4498
4522
|
/**
|
|
4499
4523
|
* @description Updates all badges.
|
|
4500
4524
|
*/
|
package/lib/esm/index.js
CHANGED
|
@@ -3250,8 +3250,8 @@ class DesignerView {
|
|
|
3250
3250
|
const uiComponents = designerContext.services.uiComponents.map(factory => factory.create(root, api));
|
|
3251
3251
|
const daemons = designerContext.services.daemons.map(factory => factory.create(api));
|
|
3252
3252
|
const view = new DesignerView(root, designerContext.layoutController, workspace, uiComponents, daemons);
|
|
3253
|
-
view.
|
|
3254
|
-
window.addEventListener('resize', view.
|
|
3253
|
+
view.applyLayout();
|
|
3254
|
+
window.addEventListener('resize', view.onResize, false);
|
|
3255
3255
|
return view;
|
|
3256
3256
|
}
|
|
3257
3257
|
constructor(root, layoutController, workspace, uiComponents, daemons) {
|
|
@@ -3260,20 +3260,25 @@ class DesignerView {
|
|
|
3260
3260
|
this.workspace = workspace;
|
|
3261
3261
|
this.uiComponents = uiComponents;
|
|
3262
3262
|
this.daemons = daemons;
|
|
3263
|
-
this.
|
|
3263
|
+
this.onResize = () => {
|
|
3264
|
+
this.updateLayout();
|
|
3265
|
+
};
|
|
3266
|
+
}
|
|
3267
|
+
updateLayout() {
|
|
3268
|
+
this.applyLayout();
|
|
3269
|
+
for (const component of this.uiComponents) {
|
|
3270
|
+
component.updateLayout();
|
|
3271
|
+
}
|
|
3264
3272
|
}
|
|
3265
3273
|
destroy() {
|
|
3266
3274
|
var _a;
|
|
3267
|
-
window.removeEventListener('resize', this.
|
|
3275
|
+
window.removeEventListener('resize', this.onResize, false);
|
|
3268
3276
|
this.workspace.destroy();
|
|
3269
3277
|
this.uiComponents.forEach(component => component.destroy());
|
|
3270
3278
|
this.daemons.forEach(daemon => daemon.destroy());
|
|
3271
3279
|
(_a = this.root.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.root);
|
|
3272
3280
|
}
|
|
3273
|
-
|
|
3274
|
-
this.reloadLayout();
|
|
3275
|
-
}
|
|
3276
|
-
reloadLayout() {
|
|
3281
|
+
applyLayout() {
|
|
3277
3282
|
const isMobile = this.layoutController.isMobile();
|
|
3278
3283
|
Dom.toggleClass(this.root, !isMobile, 'sqd-layout-desktop');
|
|
3279
3284
|
Dom.toggleClass(this.root, isMobile, 'sqd-layout-mobile');
|
|
@@ -3442,6 +3447,9 @@ class ControlBar {
|
|
|
3442
3447
|
this.controlBarApi = controlBarApi;
|
|
3443
3448
|
this.isUndoRedoSupported = isUndoRedoSupported;
|
|
3444
3449
|
}
|
|
3450
|
+
updateLayout() {
|
|
3451
|
+
//
|
|
3452
|
+
}
|
|
3445
3453
|
destroy() {
|
|
3446
3454
|
//
|
|
3447
3455
|
}
|
|
@@ -3617,6 +3625,9 @@ class SmartEditor {
|
|
|
3617
3625
|
updateVisibility() {
|
|
3618
3626
|
this.setIsCollapsed(this.editorApi.isCollapsed());
|
|
3619
3627
|
}
|
|
3628
|
+
updateLayout() {
|
|
3629
|
+
//
|
|
3630
|
+
}
|
|
3620
3631
|
destroy() {
|
|
3621
3632
|
this.view.destroy();
|
|
3622
3633
|
}
|
|
@@ -3642,7 +3653,6 @@ class ScrollBoxView {
|
|
|
3642
3653
|
});
|
|
3643
3654
|
parent.appendChild(root);
|
|
3644
3655
|
const view = new ScrollBoxView(root, viewport);
|
|
3645
|
-
window.addEventListener('resize', view.onResize, false);
|
|
3646
3656
|
root.addEventListener('wheel', e => view.onWheel(e), listenerOptions);
|
|
3647
3657
|
root.addEventListener('touchstart', e => view.onTouchStart(e), listenerOptions);
|
|
3648
3658
|
root.addEventListener('mousedown', e => view.onMouseDown(e), false);
|
|
@@ -3651,9 +3661,6 @@ class ScrollBoxView {
|
|
|
3651
3661
|
constructor(root, viewport) {
|
|
3652
3662
|
this.root = root;
|
|
3653
3663
|
this.viewport = viewport;
|
|
3654
|
-
this.onResize = () => {
|
|
3655
|
-
this.refresh();
|
|
3656
|
-
};
|
|
3657
3664
|
this.onTouchStart = (e) => {
|
|
3658
3665
|
e.preventDefault();
|
|
3659
3666
|
this.startScroll(readTouchPosition(e));
|
|
@@ -3687,13 +3694,13 @@ class ScrollBoxView {
|
|
|
3687
3694
|
this.root.appendChild(element);
|
|
3688
3695
|
this.reload(element);
|
|
3689
3696
|
}
|
|
3690
|
-
|
|
3697
|
+
updateLayout() {
|
|
3691
3698
|
if (this.content) {
|
|
3692
3699
|
this.reload(this.content.element);
|
|
3693
3700
|
}
|
|
3694
3701
|
}
|
|
3695
3702
|
destroy() {
|
|
3696
|
-
|
|
3703
|
+
//
|
|
3697
3704
|
}
|
|
3698
3705
|
reload(element) {
|
|
3699
3706
|
const maxHeightPercent = 0.7;
|
|
@@ -3854,15 +3861,19 @@ class ToolboxView {
|
|
|
3854
3861
|
const body = Dom.element('div', {
|
|
3855
3862
|
class: 'sqd-toolbox-body'
|
|
3856
3863
|
});
|
|
3864
|
+
const filter = Dom.element('div', {
|
|
3865
|
+
class: 'sqd-toolbox-filter'
|
|
3866
|
+
});
|
|
3857
3867
|
const filterInput = Dom.element('input', {
|
|
3858
|
-
class: 'sqd-toolbox-filter',
|
|
3868
|
+
class: 'sqd-toolbox-filter-input',
|
|
3859
3869
|
type: 'text',
|
|
3860
3870
|
placeholder: i18n('toolbox.search', 'Search...')
|
|
3861
3871
|
});
|
|
3862
3872
|
root.appendChild(header);
|
|
3863
3873
|
root.appendChild(body);
|
|
3864
3874
|
header.appendChild(headerTitle);
|
|
3865
|
-
|
|
3875
|
+
filter.appendChild(filterInput);
|
|
3876
|
+
body.appendChild(filter);
|
|
3866
3877
|
parent.appendChild(root);
|
|
3867
3878
|
const scrollBoxView = ScrollBoxView.create(body, parent);
|
|
3868
3879
|
return new ToolboxView(header, body, filterInput, scrollBoxView, api);
|
|
@@ -3874,6 +3885,9 @@ class ToolboxView {
|
|
|
3874
3885
|
this.scrollBoxView = scrollBoxView;
|
|
3875
3886
|
this.api = api;
|
|
3876
3887
|
}
|
|
3888
|
+
updateLayout() {
|
|
3889
|
+
this.scrollBoxView.updateLayout();
|
|
3890
|
+
}
|
|
3877
3891
|
bindToggleClick(handler) {
|
|
3878
3892
|
function forward(e) {
|
|
3879
3893
|
e.preventDefault();
|
|
@@ -3896,7 +3910,7 @@ class ToolboxView {
|
|
|
3896
3910
|
this.headerToggleIcon = Icons.createSvg('sqd-toolbox-toggle-icon', isCollapsed ? Icons.expand : Icons.close);
|
|
3897
3911
|
this.header.appendChild(this.headerToggleIcon);
|
|
3898
3912
|
if (!isCollapsed) {
|
|
3899
|
-
this.
|
|
3913
|
+
this.updateLayout();
|
|
3900
3914
|
}
|
|
3901
3915
|
}
|
|
3902
3916
|
setGroups(groups) {
|
|
@@ -3933,6 +3947,9 @@ class Toolbox {
|
|
|
3933
3947
|
this.api = api;
|
|
3934
3948
|
this.allGroups = allGroups;
|
|
3935
3949
|
}
|
|
3950
|
+
updateLayout() {
|
|
3951
|
+
this.view.updateLayout();
|
|
3952
|
+
}
|
|
3936
3953
|
destroy() {
|
|
3937
3954
|
this.view.destroy();
|
|
3938
3955
|
}
|
|
@@ -4494,6 +4511,13 @@ class Designer {
|
|
|
4494
4511
|
updateRootComponent() {
|
|
4495
4512
|
this.api.workspace.updateRootComponent();
|
|
4496
4513
|
}
|
|
4514
|
+
/**
|
|
4515
|
+
* @description Updates the layout of the designer.
|
|
4516
|
+
*/
|
|
4517
|
+
updateLayout() {
|
|
4518
|
+
this.api.workspace.updateCanvasSize();
|
|
4519
|
+
this.view.updateLayout();
|
|
4520
|
+
}
|
|
4497
4521
|
/**
|
|
4498
4522
|
* @description Updates all badges.
|
|
4499
4523
|
*/
|
package/lib/index.d.ts
CHANGED
|
@@ -781,6 +781,7 @@ interface UiComponentExtension {
|
|
|
781
781
|
create(root: HTMLElement, api: DesignerApi): UiComponent;
|
|
782
782
|
}
|
|
783
783
|
interface UiComponent {
|
|
784
|
+
updateLayout(): void;
|
|
784
785
|
destroy(): void;
|
|
785
786
|
}
|
|
786
787
|
interface DraggedComponentExtension {
|
|
@@ -1184,6 +1185,10 @@ declare class Designer<TDefinition extends Definition = Definition> {
|
|
|
1184
1185
|
* @description Rerender the root component and all its children.
|
|
1185
1186
|
*/
|
|
1186
1187
|
updateRootComponent(): void;
|
|
1188
|
+
/**
|
|
1189
|
+
* @description Updates the layout of the designer.
|
|
1190
|
+
*/
|
|
1191
|
+
updateLayout(): void;
|
|
1187
1192
|
/**
|
|
1188
1193
|
* @description Updates all badges.
|
|
1189
1194
|
*/
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sequential-workflow-designer",
|
|
3
3
|
"description": "Customizable no-code component for building flow-based programming applications.",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.24.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./lib/esm/index.js",
|
|
7
7
|
"types": "./lib/index.d.ts",
|
package/sass/designer-theme.scss
CHANGED
|
@@ -22,13 +22,13 @@
|
|
|
22
22
|
.sqd-toolbox-header-title {
|
|
23
23
|
color: $headerTextColor;
|
|
24
24
|
}
|
|
25
|
-
.sqd-toolbox-filter {
|
|
25
|
+
.sqd-toolbox-filter-input {
|
|
26
26
|
background: $filterBackground;
|
|
27
27
|
color: $filterTextColor;
|
|
28
28
|
border: $filterBorder;
|
|
29
29
|
border-radius: $filterBorderRadius;
|
|
30
30
|
}
|
|
31
|
-
.sqd-toolbox-filter:focus {
|
|
31
|
+
.sqd-toolbox-filter-input:focus {
|
|
32
32
|
border-color: $filterBorderColorFocused;
|
|
33
33
|
}
|
|
34
34
|
.sqd-toolbox-group-title {
|
package/sass/designer.scss
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
/* .sqd-toolbox */
|
|
23
23
|
|
|
24
24
|
.sqd-toolbox,
|
|
25
|
-
.sqd-toolbox-filter {
|
|
25
|
+
.sqd-toolbox-filter-input {
|
|
26
26
|
font-size: 11px;
|
|
27
27
|
line-height: 1.2em;
|
|
28
28
|
}
|
|
@@ -66,26 +66,31 @@
|
|
|
66
66
|
position: absolute;
|
|
67
67
|
top: 0;
|
|
68
68
|
left: 0;
|
|
69
|
+
width: 100%;
|
|
70
|
+
box-sizing: border-box;
|
|
71
|
+
padding: 0 10px;
|
|
69
72
|
}
|
|
70
73
|
.sqd-toolbox-filter {
|
|
74
|
+
padding: 0 10px 10px;
|
|
75
|
+
}
|
|
76
|
+
.sqd-toolbox-filter-input {
|
|
71
77
|
display: block;
|
|
72
78
|
box-sizing: border-box;
|
|
73
79
|
padding: 6px 8px;
|
|
74
80
|
outline: none;
|
|
75
|
-
width:
|
|
76
|
-
margin: 0 10px 10px;
|
|
77
|
-
box-sizing: border-box;
|
|
81
|
+
width: 100%;
|
|
78
82
|
}
|
|
79
83
|
.sqd-toolbox-group-title {
|
|
80
84
|
text-align: center;
|
|
81
85
|
padding: 5px 0;
|
|
82
|
-
margin: 0
|
|
86
|
+
margin: 0 0 10px;
|
|
87
|
+
width: 100%;
|
|
83
88
|
}
|
|
84
89
|
.sqd-toolbox-item {
|
|
85
90
|
position: relative;
|
|
86
91
|
box-sizing: border-box;
|
|
87
|
-
margin: 0
|
|
88
|
-
width:
|
|
92
|
+
margin: 0 0 10px;
|
|
93
|
+
width: 100%;
|
|
89
94
|
cursor: move;
|
|
90
95
|
}
|
|
91
96
|
.sqd-toolbox-item-icon {
|