sequential-workflow-designer 0.15.3 → 0.16.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.
Files changed (11) hide show
  1. package/README.md +4 -4
  2. package/css/designer-dark.css +10 -0
  3. package/css/designer-light.css +10 -0
  4. package/css/designer.css +0 -12
  5. package/dist/index.umd.js +78 -50
  6. package/lib/cjs/index.cjs +78 -50
  7. package/lib/esm/index.js +78 -50
  8. package/lib/index.d.ts +27 -8
  9. package/package.json +1 -1
  10. package/sass/designer-theme.scss +33 -4
  11. package/sass/designer.scss +0 -11
package/README.md CHANGED
@@ -98,10 +98,10 @@ Add the below code to your head section in HTML document.
98
98
  ```html
99
99
  <head>
100
100
  ...
101
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.3/css/designer.css" rel="stylesheet">
102
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.3/css/designer-light.css" rel="stylesheet">
103
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.3/css/designer-dark.css" rel="stylesheet">
104
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.3/dist/index.umd.js"></script>
101
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.0/css/designer.css" rel="stylesheet">
102
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.0/css/designer-light.css" rel="stylesheet">
103
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.0/css/designer-dark.css" rel="stylesheet">
104
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.0/dist/index.umd.js"></script>
105
105
  ```
106
106
 
107
107
  Call the designer by:
package/css/designer-dark.css CHANGED
@@ -2,6 +2,7 @@
2
2
  .sqd-theme-dark .sqd-toolbox {
3
3
  background: #3f3f3f;
4
4
  box-shadow: none;
5
+ border-radius: 10px;
5
6
  }
6
7
  .sqd-theme-dark .sqd-toolbox-header-title {
7
8
  color: #fff;
@@ -10,6 +11,7 @@
10
11
  background: #242424;
11
12
  color: #fff;
12
13
  border: none;
14
+ border-radius: 10px;
13
15
  }
14
16
  .sqd-theme-dark .sqd-toolbox-filter:focus {
15
17
  border-color: #939393;
@@ -17,6 +19,7 @@
17
19
  .sqd-theme-dark .sqd-toolbox-group-title {
18
20
  color: #fff;
19
21
  background: #242424;
22
+ border-radius: 10px;
20
23
  }
21
24
 
22
25
  .sqd-theme-dark .sqd-toolbox-item {
@@ -24,6 +27,7 @@
24
27
  border: none;
25
28
  box-shadow: none;
26
29
  background: #c6c6c6;
30
+ border-radius: 5px;
27
31
  }
28
32
  .sqd-theme-dark .sqd-toolbox-item:hover {
29
33
  border-color: none;
@@ -31,15 +35,18 @@
31
35
  }
32
36
  .sqd-theme-dark .sqd-toolbox-item .sqd-toolbox-item-icon.sqd-no-icon {
33
37
  background: #c6c6c6;
38
+ border-radius: 4px;
34
39
  }
35
40
 
36
41
  .sqd-theme-dark .sqd-control-bar {
37
42
  background: #3f3f3f;
38
43
  box-shadow: none;
44
+ border-radius: 10px;
39
45
  }
40
46
  .sqd-theme-dark .sqd-control-bar-button {
41
47
  border: none;
42
48
  background: #c6c6c6;
49
+ border-radius: 5px;
43
50
  }
44
51
  .sqd-theme-dark .sqd-control-bar-button:hover {
45
52
  border-color: #939393;
@@ -64,6 +71,7 @@
64
71
  .sqd-theme-dark.sqd-context-menu {
65
72
  background: #3f3f3f;
66
73
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
74
+ border-radius: 4px;
67
75
  }
68
76
 
69
77
  .sqd-theme-dark .sqd-context-menu-group {
@@ -72,6 +80,7 @@
72
80
 
73
81
  .sqd-theme-dark .sqd-context-menu-item {
74
82
  color: #fff;
83
+ border-radius: 4px;
75
84
  }
76
85
 
77
86
  .sqd-theme-dark .sqd-context-menu-item:hover {
@@ -184,6 +193,7 @@
184
193
  }
185
194
  .sqd-theme-dark .sqd-step-container > .sqd-label > .sqd-label-rect {
186
195
  fill: #2411db;
196
+ stroke-width: 0;
187
197
  }
188
198
  .sqd-theme-dark .sqd-step-container > g > .sqd-input {
189
199
  fill: #c6c6c6;
package/css/designer-light.css CHANGED
@@ -2,6 +2,7 @@
2
2
  .sqd-theme-light .sqd-toolbox {
3
3
  background: #fff;
4
4
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15);
5
+ border-radius: 10px;
5
6
  }
6
7
  .sqd-theme-light .sqd-toolbox-header-title {
7
8
  color: #000;
@@ -10,6 +11,7 @@
10
11
  background: #fff;
11
12
  color: #000;
12
13
  border: 1px solid #c3c3c3;
14
+ border-radius: 10px;
13
15
  }
14
16
  .sqd-theme-light .sqd-toolbox-filter:focus {
15
17
  border-color: #939393;
@@ -17,6 +19,7 @@
17
19
  .sqd-theme-light .sqd-toolbox-group-title {
18
20
  color: #000;
19
21
  background: #e5e5e5;
22
+ border-radius: 10px;
20
23
  }
21
24
 
22
25
  .sqd-theme-light .sqd-toolbox-item {
@@ -24,6 +27,7 @@
24
27
  border: 1px solid #c3c3c3;
25
28
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
26
29
  background: #fff;
30
+ border-radius: 5px;
27
31
  }
28
32
  .sqd-theme-light .sqd-toolbox-item:hover {
29
33
  border-color: #939393;
@@ -31,15 +35,18 @@
31
35
  }
32
36
  .sqd-theme-light .sqd-toolbox-item .sqd-toolbox-item-icon.sqd-no-icon {
33
37
  background: #c6c6c6;
38
+ border-radius: 4px;
34
39
  }
35
40
 
36
41
  .sqd-theme-light .sqd-control-bar {
37
42
  background: #fff;
38
43
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15);
44
+ border-radius: 10px;
39
45
  }
40
46
  .sqd-theme-light .sqd-control-bar-button {
41
47
  border: 1px solid #c3c3c3;
42
48
  background: #fff;
49
+ border-radius: 5px;
43
50
  }
44
51
  .sqd-theme-light .sqd-control-bar-button:hover {
45
52
  border-color: #939393;
@@ -64,6 +71,7 @@
64
71
  .sqd-theme-light.sqd-context-menu {
65
72
  background: #fff;
66
73
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
74
+ border-radius: 4px;
67
75
  }
68
76
 
69
77
  .sqd-theme-light .sqd-context-menu-group {
@@ -72,6 +80,7 @@
72
80
 
73
81
  .sqd-theme-light .sqd-context-menu-item {
74
82
  color: #000;
83
+ border-radius: 4px;
75
84
  }
76
85
 
77
86
  .sqd-theme-light .sqd-context-menu-item:hover {
@@ -184,6 +193,7 @@
184
193
  }
185
194
  .sqd-theme-light .sqd-step-container > .sqd-label > .sqd-label-rect {
186
195
  fill: #2411db;
196
+ stroke-width: 0;
187
197
  }
188
198
  .sqd-theme-light .sqd-step-container > g > .sqd-input {
189
199
  fill: #fff;
package/css/designer.css CHANGED
@@ -34,7 +34,6 @@
34
34
  left: 10px;
35
35
  z-index: 20;
36
36
  box-sizing: border-box;
37
- border-radius: 10px;
38
37
  width: 130px;
39
38
  user-select: none;
40
39
  }
@@ -84,19 +83,16 @@
84
83
  width: 110px;
85
84
  margin: 0 10px 10px;
86
85
  box-sizing: border-box;
87
- border-radius: 10px;
88
86
  }
89
87
 
90
88
  .sqd-toolbox-group-title {
91
89
  text-align: center;
92
90
  padding: 5px 0;
93
91
  margin: 0 10px 10px;
94
- border-radius: 10px;
95
92
  }
96
93
 
97
94
  .sqd-toolbox-item {
98
95
  position: relative;
99
- border-radius: 5px;
100
96
  box-sizing: border-box;
101
97
  margin: 0 10px 10px;
102
98
  width: 110px;
@@ -112,10 +108,6 @@
112
108
  height: 20px;
113
109
  }
114
110
 
115
- .sqd-toolbox-item-icon.sqd-no-icon {
116
- border-radius: 4px;
117
- }
118
-
119
111
  .sqd-toolbox-item-icon-image {
120
112
  width: 100%;
121
113
  height: 100%;
@@ -143,7 +135,6 @@
143
135
  left: 10px;
144
136
  z-index: 20;
145
137
  padding: 8px 0 8px 8px;
146
- border-radius: 10px;
147
138
  white-space: nowrap;
148
139
  }
149
140
 
@@ -151,7 +142,6 @@
151
142
  display: inline-block;
152
143
  width: 32px;
153
144
  height: 32px;
154
- border-radius: 5px;
155
145
  margin-right: 8px;
156
146
  cursor: pointer;
157
147
  box-sizing: border-box;
@@ -229,7 +219,6 @@
229
219
  .sqd-context-menu {
230
220
  position: absolute;
231
221
  z-index: 2000000000;
232
- border-radius: 4px;
233
222
  overflow: hidden;
234
223
  padding: 5px;
235
224
  }
@@ -249,7 +238,6 @@
249
238
  }
250
239
 
251
240
  .sqd-context-menu-item {
252
- border-radius: 5px;
253
241
  cursor: pointer;
254
242
  transition: background 70ms;
255
243
  }
package/dist/index.umd.js CHANGED
@@ -614,12 +614,11 @@
614
614
  }
615
615
 
616
616
  class ToolboxApi {
617
- constructor(state, designerContext, behaviorController, iconProvider, configuration, uidGenerator) {
617
+ constructor(state, designerContext, behaviorController, toolboxDataProvider, uidGenerator) {
618
618
  this.state = state;
619
619
  this.designerContext = designerContext;
620
620
  this.behaviorController = behaviorController;
621
- this.iconProvider = iconProvider;
622
- this.configuration = configuration;
621
+ this.toolboxDataProvider = toolboxDataProvider;
623
622
  this.uidGenerator = uidGenerator;
624
623
  }
625
624
  isCollapsed() {
@@ -631,24 +630,11 @@
631
630
  subscribeIsCollapsed(listener) {
632
631
  this.state.onIsToolboxCollapsedChanged.subscribe(listener);
633
632
  }
634
- tryGetIconUrl(step) {
635
- return this.iconProvider.getIconUrl(step);
636
- }
637
- getLabel(step) {
638
- const labelProvider = this.getConfiguration().labelProvider;
639
- return labelProvider ? labelProvider(step) : step.name;
633
+ getAllGroups() {
634
+ return this.toolboxDataProvider.getAllGroups();
640
635
  }
641
- filterGroups(filter) {
642
- return this.getConfiguration()
643
- .groups.map(group => {
644
- return {
645
- name: group.name,
646
- steps: group.steps.filter(s => {
647
- return filter ? s.name.toLowerCase().includes(filter) : true;
648
- })
649
- };
650
- })
651
- .filter(group => group.steps.length > 0);
636
+ applyFilter(allGroups, filter) {
637
+ return this.toolboxDataProvider.applyFilter(allGroups, filter);
652
638
  }
653
639
  /**
654
640
  * @param position Mouse or touch position.
@@ -668,11 +654,62 @@
668
654
  newStep.id = this.uidGenerator ? this.uidGenerator() : Uid.next();
669
655
  return newStep;
670
656
  }
671
- getConfiguration() {
657
+ }
658
+
659
+ const regexp = /^[a-zA-Z][a-zA-Z0-9_-]+$/;
660
+ class StepTypeValidator {
661
+ static validate(type) {
662
+ if (!regexp.test(type)) {
663
+ throw new Error(`Step type "${type}" contains not allowed characters`);
664
+ }
665
+ }
666
+ }
667
+
668
+ class ToolboxDataProvider {
669
+ constructor(iconProvider, configuration) {
670
+ this.iconProvider = iconProvider;
671
+ this.configuration = configuration;
672
+ this.createItemData = (step) => {
673
+ StepTypeValidator.validate(step.type);
674
+ const iconUrl = this.iconProvider.getIconUrl(step);
675
+ const label = this.configuration && this.configuration.labelProvider ? this.configuration.labelProvider(step) : step.name;
676
+ const description = this.configuration && this.configuration.descriptionProvider ? this.configuration.descriptionProvider(step) : label;
677
+ const lowerCaseLabel = label.toLowerCase();
678
+ return {
679
+ iconUrl,
680
+ label,
681
+ description,
682
+ lowerCaseLabel,
683
+ step
684
+ };
685
+ };
686
+ }
687
+ getAllGroups() {
672
688
  if (!this.configuration) {
673
- throw new Error('Toolbox is disabled');
689
+ return [];
674
690
  }
675
- return this.configuration;
691
+ return this.configuration.groups.map(group => {
692
+ return {
693
+ name: group.name,
694
+ items: group.steps.map(this.createItemData)
695
+ };
696
+ });
697
+ }
698
+ applyFilter(allGroups, filter) {
699
+ if (!filter) {
700
+ return allGroups;
701
+ }
702
+ const lowerCaseFilter = filter.toLowerCase();
703
+ return allGroups
704
+ .map(group => {
705
+ return {
706
+ name: group.name,
707
+ items: group.items.filter(s => {
708
+ return s.lowerCaseLabel.includes(lowerCaseFilter);
709
+ })
710
+ };
711
+ })
712
+ .filter(group => group.items.length > 0);
676
713
  }
677
714
  }
678
715
 
@@ -731,7 +768,8 @@
731
768
  const workspace = new WorkspaceApi(context.state, context.workspaceController);
732
769
  const viewportController = context.services.viewportController.create(workspace);
733
770
  const viewport = new ViewportApi(context.workspaceController, viewportController);
734
- return new DesignerApi(new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, context.componentContext.iconProvider, context.configuration.toolbox, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.definitionModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker));
771
+ const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.configuration.toolbox);
772
+ return new DesignerApi(new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.definitionModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker));
735
773
  }
736
774
  constructor(controlBar, toolbox, editor, workspace, viewport, pathBar) {
737
775
  this.controlBar = controlBar;
@@ -3638,30 +3676,19 @@
3638
3676
  }
3639
3677
  }
3640
3678
 
3641
- const regexp = /^[a-zA-Z][a-zA-Z0-9_-]+$/;
3642
- class StepTypeValidator {
3643
- static validate(type) {
3644
- if (!regexp.test(type)) {
3645
- throw new Error(`Step type "${type}" contains not allowed characters`);
3646
- }
3647
- }
3648
- }
3649
-
3650
3679
  class ToolboxItemView {
3651
- static create(parent, step, api) {
3652
- const label = api.getLabel(step);
3680
+ static create(parent, data) {
3653
3681
  const root = Dom.element('div', {
3654
- class: `sqd-toolbox-item sqd-type-${step.type}`,
3655
- title: label
3682
+ class: `sqd-toolbox-item sqd-type-${data.step.type}`,
3683
+ title: data.description
3656
3684
  });
3657
- const iconUrl = api.tryGetIconUrl(step);
3658
3685
  const icon = Dom.element('div', {
3659
3686
  class: 'sqd-toolbox-item-icon'
3660
3687
  });
3661
- if (iconUrl) {
3688
+ if (data.iconUrl) {
3662
3689
  const iconImage = Dom.element('img', {
3663
3690
  class: 'sqd-toolbox-item-icon-image',
3664
- src: iconUrl
3691
+ src: data.iconUrl
3665
3692
  });
3666
3693
  icon.appendChild(iconImage);
3667
3694
  }
@@ -3671,7 +3698,7 @@
3671
3698
  const text = Dom.element('div', {
3672
3699
  class: 'sqd-toolbox-item-text'
3673
3700
  });
3674
- text.textContent = label;
3701
+ text.textContent = data.label;
3675
3702
  root.appendChild(icon);
3676
3703
  root.appendChild(text);
3677
3704
  parent.appendChild(root);
@@ -3692,10 +3719,9 @@
3692
3719
  }
3693
3720
 
3694
3721
  class ToolboxItem {
3695
- static create(parent, step, api) {
3696
- StepTypeValidator.validate(step.type);
3697
- const view = ToolboxItemView.create(parent, step, api);
3698
- const item = new ToolboxItem(step, api);
3722
+ static create(parent, data, api) {
3723
+ const view = ToolboxItemView.create(parent, data);
3724
+ const item = new ToolboxItem(data.step, api);
3699
3725
  view.bindMousedown(e => item.onMousedown(e));
3700
3726
  view.bindTouchstart(e => item.onTouchstart(e));
3701
3727
  view.bindContextMenu(e => item.onContextMenu(e));
@@ -3795,7 +3821,7 @@
3795
3821
  });
3796
3822
  groupTitle.innerText = group.name;
3797
3823
  list.appendChild(groupTitle);
3798
- group.steps.forEach(s => ToolboxItem.create(list, s, this.api));
3824
+ group.items.forEach(item => ToolboxItem.create(list, item, this.api));
3799
3825
  });
3800
3826
  this.scrollBoxView.setContent(list);
3801
3827
  }
@@ -3806,8 +3832,9 @@
3806
3832
 
3807
3833
  class Toolbox {
3808
3834
  static create(root, api) {
3835
+ const allGroups = api.getAllGroups();
3809
3836
  const view = ToolboxView.create(root, api);
3810
- const toolbox = new Toolbox(view, api);
3837
+ const toolbox = new Toolbox(view, api, allGroups);
3811
3838
  toolbox.render();
3812
3839
  toolbox.onIsCollapsedChanged();
3813
3840
  view.bindToggleClick(() => toolbox.onToggleClicked());
@@ -3815,15 +3842,16 @@
3815
3842
  api.subscribeIsCollapsed(() => toolbox.onIsCollapsedChanged());
3816
3843
  return toolbox;
3817
3844
  }
3818
- constructor(view, api) {
3845
+ constructor(view, api, allGroups) {
3819
3846
  this.view = view;
3820
3847
  this.api = api;
3848
+ this.allGroups = allGroups;
3821
3849
  }
3822
3850
  destroy() {
3823
3851
  this.view.destroy();
3824
3852
  }
3825
3853
  render() {
3826
- const groups = this.api.filterGroups(this.filter);
3854
+ const groups = this.api.applyFilter(this.allGroups, this.filter);
3827
3855
  this.view.setGroups(groups);
3828
3856
  }
3829
3857
  onIsCollapsedChanged() {
@@ -3833,7 +3861,7 @@
3833
3861
  this.api.toggleIsCollapsed();
3834
3862
  }
3835
3863
  onFilterInputChanged(value) {
3836
- this.filter = value.toLowerCase();
3864
+ this.filter = value;
3837
3865
  this.render();
3838
3866
  }
3839
3867
  }
package/lib/cjs/index.cjs CHANGED
@@ -612,12 +612,11 @@ class DragStepBehavior {
612
612
  }
613
613
 
614
614
  class ToolboxApi {
615
- constructor(state, designerContext, behaviorController, iconProvider, configuration, uidGenerator) {
615
+ constructor(state, designerContext, behaviorController, toolboxDataProvider, uidGenerator) {
616
616
  this.state = state;
617
617
  this.designerContext = designerContext;
618
618
  this.behaviorController = behaviorController;
619
- this.iconProvider = iconProvider;
620
- this.configuration = configuration;
619
+ this.toolboxDataProvider = toolboxDataProvider;
621
620
  this.uidGenerator = uidGenerator;
622
621
  }
623
622
  isCollapsed() {
@@ -629,24 +628,11 @@ class ToolboxApi {
629
628
  subscribeIsCollapsed(listener) {
630
629
  this.state.onIsToolboxCollapsedChanged.subscribe(listener);
631
630
  }
632
- tryGetIconUrl(step) {
633
- return this.iconProvider.getIconUrl(step);
634
- }
635
- getLabel(step) {
636
- const labelProvider = this.getConfiguration().labelProvider;
637
- return labelProvider ? labelProvider(step) : step.name;
631
+ getAllGroups() {
632
+ return this.toolboxDataProvider.getAllGroups();
638
633
  }
639
- filterGroups(filter) {
640
- return this.getConfiguration()
641
- .groups.map(group => {
642
- return {
643
- name: group.name,
644
- steps: group.steps.filter(s => {
645
- return filter ? s.name.toLowerCase().includes(filter) : true;
646
- })
647
- };
648
- })
649
- .filter(group => group.steps.length > 0);
634
+ applyFilter(allGroups, filter) {
635
+ return this.toolboxDataProvider.applyFilter(allGroups, filter);
650
636
  }
651
637
  /**
652
638
  * @param position Mouse or touch position.
@@ -666,11 +652,62 @@ class ToolboxApi {
666
652
  newStep.id = this.uidGenerator ? this.uidGenerator() : Uid.next();
667
653
  return newStep;
668
654
  }
669
- getConfiguration() {
655
+ }
656
+
657
+ const regexp = /^[a-zA-Z][a-zA-Z0-9_-]+$/;
658
+ class StepTypeValidator {
659
+ static validate(type) {
660
+ if (!regexp.test(type)) {
661
+ throw new Error(`Step type "${type}" contains not allowed characters`);
662
+ }
663
+ }
664
+ }
665
+
666
+ class ToolboxDataProvider {
667
+ constructor(iconProvider, configuration) {
668
+ this.iconProvider = iconProvider;
669
+ this.configuration = configuration;
670
+ this.createItemData = (step) => {
671
+ StepTypeValidator.validate(step.type);
672
+ const iconUrl = this.iconProvider.getIconUrl(step);
673
+ const label = this.configuration && this.configuration.labelProvider ? this.configuration.labelProvider(step) : step.name;
674
+ const description = this.configuration && this.configuration.descriptionProvider ? this.configuration.descriptionProvider(step) : label;
675
+ const lowerCaseLabel = label.toLowerCase();
676
+ return {
677
+ iconUrl,
678
+ label,
679
+ description,
680
+ lowerCaseLabel,
681
+ step
682
+ };
683
+ };
684
+ }
685
+ getAllGroups() {
670
686
  if (!this.configuration) {
671
- throw new Error('Toolbox is disabled');
687
+ return [];
672
688
  }
673
- return this.configuration;
689
+ return this.configuration.groups.map(group => {
690
+ return {
691
+ name: group.name,
692
+ items: group.steps.map(this.createItemData)
693
+ };
694
+ });
695
+ }
696
+ applyFilter(allGroups, filter) {
697
+ if (!filter) {
698
+ return allGroups;
699
+ }
700
+ const lowerCaseFilter = filter.toLowerCase();
701
+ return allGroups
702
+ .map(group => {
703
+ return {
704
+ name: group.name,
705
+ items: group.items.filter(s => {
706
+ return s.lowerCaseLabel.includes(lowerCaseFilter);
707
+ })
708
+ };
709
+ })
710
+ .filter(group => group.items.length > 0);
674
711
  }
675
712
  }
676
713
 
@@ -729,7 +766,8 @@ class DesignerApi {
729
766
  const workspace = new WorkspaceApi(context.state, context.workspaceController);
730
767
  const viewportController = context.services.viewportController.create(workspace);
731
768
  const viewport = new ViewportApi(context.workspaceController, viewportController);
732
- return new DesignerApi(new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, context.componentContext.iconProvider, context.configuration.toolbox, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.definitionModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker));
769
+ const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.configuration.toolbox);
770
+ return new DesignerApi(new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.definitionModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker));
733
771
  }
734
772
  constructor(controlBar, toolbox, editor, workspace, viewport, pathBar) {
735
773
  this.controlBar = controlBar;
@@ -3453,30 +3491,19 @@ class ScrollBoxView {
3453
3491
  }
3454
3492
  }
3455
3493
 
3456
- const regexp = /^[a-zA-Z][a-zA-Z0-9_-]+$/;
3457
- class StepTypeValidator {
3458
- static validate(type) {
3459
- if (!regexp.test(type)) {
3460
- throw new Error(`Step type "${type}" contains not allowed characters`);
3461
- }
3462
- }
3463
- }
3464
-
3465
3494
  class ToolboxItemView {
3466
- static create(parent, step, api) {
3467
- const label = api.getLabel(step);
3495
+ static create(parent, data) {
3468
3496
  const root = Dom.element('div', {
3469
- class: `sqd-toolbox-item sqd-type-${step.type}`,
3470
- title: label
3497
+ class: `sqd-toolbox-item sqd-type-${data.step.type}`,
3498
+ title: data.description
3471
3499
  });
3472
- const iconUrl = api.tryGetIconUrl(step);
3473
3500
  const icon = Dom.element('div', {
3474
3501
  class: 'sqd-toolbox-item-icon'
3475
3502
  });
3476
- if (iconUrl) {
3503
+ if (data.iconUrl) {
3477
3504
  const iconImage = Dom.element('img', {
3478
3505
  class: 'sqd-toolbox-item-icon-image',
3479
- src: iconUrl
3506
+ src: data.iconUrl
3480
3507
  });
3481
3508
  icon.appendChild(iconImage);
3482
3509
  }
@@ -3486,7 +3513,7 @@ class ToolboxItemView {
3486
3513
  const text = Dom.element('div', {
3487
3514
  class: 'sqd-toolbox-item-text'
3488
3515
  });
3489
- text.textContent = label;
3516
+ text.textContent = data.label;
3490
3517
  root.appendChild(icon);
3491
3518
  root.appendChild(text);
3492
3519
  parent.appendChild(root);
@@ -3507,10 +3534,9 @@ class ToolboxItemView {
3507
3534
  }
3508
3535
 
3509
3536
  class ToolboxItem {
3510
- static create(parent, step, api) {
3511
- StepTypeValidator.validate(step.type);
3512
- const view = ToolboxItemView.create(parent, step, api);
3513
- const item = new ToolboxItem(step, api);
3537
+ static create(parent, data, api) {
3538
+ const view = ToolboxItemView.create(parent, data);
3539
+ const item = new ToolboxItem(data.step, api);
3514
3540
  view.bindMousedown(e => item.onMousedown(e));
3515
3541
  view.bindTouchstart(e => item.onTouchstart(e));
3516
3542
  view.bindContextMenu(e => item.onContextMenu(e));
@@ -3610,7 +3636,7 @@ class ToolboxView {
3610
3636
  });
3611
3637
  groupTitle.innerText = group.name;
3612
3638
  list.appendChild(groupTitle);
3613
- group.steps.forEach(s => ToolboxItem.create(list, s, this.api));
3639
+ group.items.forEach(item => ToolboxItem.create(list, item, this.api));
3614
3640
  });
3615
3641
  this.scrollBoxView.setContent(list);
3616
3642
  }
@@ -3621,8 +3647,9 @@ class ToolboxView {
3621
3647
 
3622
3648
  class Toolbox {
3623
3649
  static create(root, api) {
3650
+ const allGroups = api.getAllGroups();
3624
3651
  const view = ToolboxView.create(root, api);
3625
- const toolbox = new Toolbox(view, api);
3652
+ const toolbox = new Toolbox(view, api, allGroups);
3626
3653
  toolbox.render();
3627
3654
  toolbox.onIsCollapsedChanged();
3628
3655
  view.bindToggleClick(() => toolbox.onToggleClicked());
@@ -3630,15 +3657,16 @@ class Toolbox {
3630
3657
  api.subscribeIsCollapsed(() => toolbox.onIsCollapsedChanged());
3631
3658
  return toolbox;
3632
3659
  }
3633
- constructor(view, api) {
3660
+ constructor(view, api, allGroups) {
3634
3661
  this.view = view;
3635
3662
  this.api = api;
3663
+ this.allGroups = allGroups;
3636
3664
  }
3637
3665
  destroy() {
3638
3666
  this.view.destroy();
3639
3667
  }
3640
3668
  render() {
3641
- const groups = this.api.filterGroups(this.filter);
3669
+ const groups = this.api.applyFilter(this.allGroups, this.filter);
3642
3670
  this.view.setGroups(groups);
3643
3671
  }
3644
3672
  onIsCollapsedChanged() {
@@ -3648,7 +3676,7 @@ class Toolbox {
3648
3676
  this.api.toggleIsCollapsed();
3649
3677
  }
3650
3678
  onFilterInputChanged(value) {
3651
- this.filter = value.toLowerCase();
3679
+ this.filter = value;
3652
3680
  this.render();
3653
3681
  }
3654
3682
  }
package/lib/esm/index.js CHANGED
@@ -611,12 +611,11 @@ class DragStepBehavior {
611
611
  }
612
612
 
613
613
  class ToolboxApi {
614
- constructor(state, designerContext, behaviorController, iconProvider, configuration, uidGenerator) {
614
+ constructor(state, designerContext, behaviorController, toolboxDataProvider, uidGenerator) {
615
615
  this.state = state;
616
616
  this.designerContext = designerContext;
617
617
  this.behaviorController = behaviorController;
618
- this.iconProvider = iconProvider;
619
- this.configuration = configuration;
618
+ this.toolboxDataProvider = toolboxDataProvider;
620
619
  this.uidGenerator = uidGenerator;
621
620
  }
622
621
  isCollapsed() {
@@ -628,24 +627,11 @@ class ToolboxApi {
628
627
  subscribeIsCollapsed(listener) {
629
628
  this.state.onIsToolboxCollapsedChanged.subscribe(listener);
630
629
  }
631
- tryGetIconUrl(step) {
632
- return this.iconProvider.getIconUrl(step);
633
- }
634
- getLabel(step) {
635
- const labelProvider = this.getConfiguration().labelProvider;
636
- return labelProvider ? labelProvider(step) : step.name;
630
+ getAllGroups() {
631
+ return this.toolboxDataProvider.getAllGroups();
637
632
  }
638
- filterGroups(filter) {
639
- return this.getConfiguration()
640
- .groups.map(group => {
641
- return {
642
- name: group.name,
643
- steps: group.steps.filter(s => {
644
- return filter ? s.name.toLowerCase().includes(filter) : true;
645
- })
646
- };
647
- })
648
- .filter(group => group.steps.length > 0);
633
+ applyFilter(allGroups, filter) {
634
+ return this.toolboxDataProvider.applyFilter(allGroups, filter);
649
635
  }
650
636
  /**
651
637
  * @param position Mouse or touch position.
@@ -665,11 +651,62 @@ class ToolboxApi {
665
651
  newStep.id = this.uidGenerator ? this.uidGenerator() : Uid.next();
666
652
  return newStep;
667
653
  }
668
- getConfiguration() {
654
+ }
655
+
656
+ const regexp = /^[a-zA-Z][a-zA-Z0-9_-]+$/;
657
+ class StepTypeValidator {
658
+ static validate(type) {
659
+ if (!regexp.test(type)) {
660
+ throw new Error(`Step type "${type}" contains not allowed characters`);
661
+ }
662
+ }
663
+ }
664
+
665
+ class ToolboxDataProvider {
666
+ constructor(iconProvider, configuration) {
667
+ this.iconProvider = iconProvider;
668
+ this.configuration = configuration;
669
+ this.createItemData = (step) => {
670
+ StepTypeValidator.validate(step.type);
671
+ const iconUrl = this.iconProvider.getIconUrl(step);
672
+ const label = this.configuration && this.configuration.labelProvider ? this.configuration.labelProvider(step) : step.name;
673
+ const description = this.configuration && this.configuration.descriptionProvider ? this.configuration.descriptionProvider(step) : label;
674
+ const lowerCaseLabel = label.toLowerCase();
675
+ return {
676
+ iconUrl,
677
+ label,
678
+ description,
679
+ lowerCaseLabel,
680
+ step
681
+ };
682
+ };
683
+ }
684
+ getAllGroups() {
669
685
  if (!this.configuration) {
670
- throw new Error('Toolbox is disabled');
686
+ return [];
671
687
  }
672
- return this.configuration;
688
+ return this.configuration.groups.map(group => {
689
+ return {
690
+ name: group.name,
691
+ items: group.steps.map(this.createItemData)
692
+ };
693
+ });
694
+ }
695
+ applyFilter(allGroups, filter) {
696
+ if (!filter) {
697
+ return allGroups;
698
+ }
699
+ const lowerCaseFilter = filter.toLowerCase();
700
+ return allGroups
701
+ .map(group => {
702
+ return {
703
+ name: group.name,
704
+ items: group.items.filter(s => {
705
+ return s.lowerCaseLabel.includes(lowerCaseFilter);
706
+ })
707
+ };
708
+ })
709
+ .filter(group => group.items.length > 0);
673
710
  }
674
711
  }
675
712
 
@@ -728,7 +765,8 @@ class DesignerApi {
728
765
  const workspace = new WorkspaceApi(context.state, context.workspaceController);
729
766
  const viewportController = context.services.viewportController.create(workspace);
730
767
  const viewport = new ViewportApi(context.workspaceController, viewportController);
731
- return new DesignerApi(new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, context.componentContext.iconProvider, context.configuration.toolbox, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.definitionModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker));
768
+ const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.configuration.toolbox);
769
+ return new DesignerApi(new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.definitionModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker));
732
770
  }
733
771
  constructor(controlBar, toolbox, editor, workspace, viewport, pathBar) {
734
772
  this.controlBar = controlBar;
@@ -3452,30 +3490,19 @@ class ScrollBoxView {
3452
3490
  }
3453
3491
  }
3454
3492
 
3455
- const regexp = /^[a-zA-Z][a-zA-Z0-9_-]+$/;
3456
- class StepTypeValidator {
3457
- static validate(type) {
3458
- if (!regexp.test(type)) {
3459
- throw new Error(`Step type "${type}" contains not allowed characters`);
3460
- }
3461
- }
3462
- }
3463
-
3464
3493
  class ToolboxItemView {
3465
- static create(parent, step, api) {
3466
- const label = api.getLabel(step);
3494
+ static create(parent, data) {
3467
3495
  const root = Dom.element('div', {
3468
- class: `sqd-toolbox-item sqd-type-${step.type}`,
3469
- title: label
3496
+ class: `sqd-toolbox-item sqd-type-${data.step.type}`,
3497
+ title: data.description
3470
3498
  });
3471
- const iconUrl = api.tryGetIconUrl(step);
3472
3499
  const icon = Dom.element('div', {
3473
3500
  class: 'sqd-toolbox-item-icon'
3474
3501
  });
3475
- if (iconUrl) {
3502
+ if (data.iconUrl) {
3476
3503
  const iconImage = Dom.element('img', {
3477
3504
  class: 'sqd-toolbox-item-icon-image',
3478
- src: iconUrl
3505
+ src: data.iconUrl
3479
3506
  });
3480
3507
  icon.appendChild(iconImage);
3481
3508
  }
@@ -3485,7 +3512,7 @@ class ToolboxItemView {
3485
3512
  const text = Dom.element('div', {
3486
3513
  class: 'sqd-toolbox-item-text'
3487
3514
  });
3488
- text.textContent = label;
3515
+ text.textContent = data.label;
3489
3516
  root.appendChild(icon);
3490
3517
  root.appendChild(text);
3491
3518
  parent.appendChild(root);
@@ -3506,10 +3533,9 @@ class ToolboxItemView {
3506
3533
  }
3507
3534
 
3508
3535
  class ToolboxItem {
3509
- static create(parent, step, api) {
3510
- StepTypeValidator.validate(step.type);
3511
- const view = ToolboxItemView.create(parent, step, api);
3512
- const item = new ToolboxItem(step, api);
3536
+ static create(parent, data, api) {
3537
+ const view = ToolboxItemView.create(parent, data);
3538
+ const item = new ToolboxItem(data.step, api);
3513
3539
  view.bindMousedown(e => item.onMousedown(e));
3514
3540
  view.bindTouchstart(e => item.onTouchstart(e));
3515
3541
  view.bindContextMenu(e => item.onContextMenu(e));
@@ -3609,7 +3635,7 @@ class ToolboxView {
3609
3635
  });
3610
3636
  groupTitle.innerText = group.name;
3611
3637
  list.appendChild(groupTitle);
3612
- group.steps.forEach(s => ToolboxItem.create(list, s, this.api));
3638
+ group.items.forEach(item => ToolboxItem.create(list, item, this.api));
3613
3639
  });
3614
3640
  this.scrollBoxView.setContent(list);
3615
3641
  }
@@ -3620,8 +3646,9 @@ class ToolboxView {
3620
3646
 
3621
3647
  class Toolbox {
3622
3648
  static create(root, api) {
3649
+ const allGroups = api.getAllGroups();
3623
3650
  const view = ToolboxView.create(root, api);
3624
- const toolbox = new Toolbox(view, api);
3651
+ const toolbox = new Toolbox(view, api, allGroups);
3625
3652
  toolbox.render();
3626
3653
  toolbox.onIsCollapsedChanged();
3627
3654
  view.bindToggleClick(() => toolbox.onToggleClicked());
@@ -3629,15 +3656,16 @@ class Toolbox {
3629
3656
  api.subscribeIsCollapsed(() => toolbox.onIsCollapsedChanged());
3630
3657
  return toolbox;
3631
3658
  }
3632
- constructor(view, api) {
3659
+ constructor(view, api, allGroups) {
3633
3660
  this.view = view;
3634
3661
  this.api = api;
3662
+ this.allGroups = allGroups;
3635
3663
  }
3636
3664
  destroy() {
3637
3665
  this.view.destroy();
3638
3666
  }
3639
3667
  render() {
3640
- const groups = this.api.filterGroups(this.filter);
3668
+ const groups = this.api.applyFilter(this.allGroups, this.filter);
3641
3669
  this.view.setGroups(groups);
3642
3670
  }
3643
3671
  onIsCollapsedChanged() {
@@ -3647,7 +3675,7 @@ class Toolbox {
3647
3675
  this.api.toggleIsCollapsed();
3648
3676
  }
3649
3677
  onFilterInputChanged(value) {
3650
- this.filter = value.toLowerCase();
3678
+ this.filter = value;
3651
3679
  this.render();
3652
3680
  }
3653
3681
  }
package/lib/index.d.ts CHANGED
@@ -408,20 +408,38 @@ declare class PathBarApi {
408
408
  getFolderPathStepNames(): string[];
409
409
  }
410
410
 
411
+ declare class ToolboxDataProvider {
412
+ private readonly iconProvider;
413
+ private readonly configuration;
414
+ constructor(iconProvider: IconProvider, configuration: ToolboxConfiguration | false);
415
+ getAllGroups(): ToolboxGroupData[];
416
+ private readonly createItemData;
417
+ applyFilter(allGroups: ToolboxGroupData[], filter: string | undefined): ToolboxGroupData[];
418
+ }
419
+ interface ToolboxGroupData {
420
+ name: string;
421
+ items: ToolboxItemData[];
422
+ }
423
+ interface ToolboxItemData {
424
+ iconUrl: string | null;
425
+ label: string;
426
+ lowerCaseLabel: string;
427
+ description: string;
428
+ step: StepDefinition;
429
+ }
430
+
411
431
  declare class ToolboxApi {
412
432
  private readonly state;
413
433
  private readonly designerContext;
414
434
  private readonly behaviorController;
415
- private readonly iconProvider;
416
- private readonly configuration;
435
+ private readonly toolboxDataProvider;
417
436
  private readonly uidGenerator;
418
- constructor(state: DesignerState, designerContext: DesignerContext, behaviorController: BehaviorController, iconProvider: IconProvider, configuration: ToolboxConfiguration | false, uidGenerator: UidGenerator | undefined);
437
+ constructor(state: DesignerState, designerContext: DesignerContext, behaviorController: BehaviorController, toolboxDataProvider: ToolboxDataProvider, uidGenerator: UidGenerator | undefined);
419
438
  isCollapsed(): boolean;
420
439
  toggleIsCollapsed(): void;
421
440
  subscribeIsCollapsed(listener: SimpleEventListener<boolean>): void;
422
- tryGetIconUrl(step: StepDefinition): string | null;
423
- getLabel(step: StepDefinition): string;
424
- filterGroups(filter: string | undefined): ToolboxGroupConfiguration[];
441
+ getAllGroups(): ToolboxGroupData[];
442
+ applyFilter(allGroups: ToolboxGroupData[], filter: string | undefined): ToolboxGroupData[];
425
443
  /**
426
444
  * @param position Mouse or touch position.
427
445
  * @param step Step definition.
@@ -429,7 +447,6 @@ declare class ToolboxApi {
429
447
  */
430
448
  tryDrag(position: Vector, step: StepDefinition): boolean;
431
449
  private activateStep;
432
- private getConfiguration;
433
450
  }
434
451
 
435
452
  declare class ViewportApi {
@@ -890,11 +907,13 @@ interface CustomActionHandlerContext {
890
907
  }
891
908
  interface ToolboxConfiguration {
892
909
  labelProvider?: StepLabelProvider;
910
+ descriptionProvider?: StepDescriptionProvider;
893
911
  isCollapsed?: boolean;
894
912
  groups: ToolboxGroupConfiguration[];
895
913
  }
896
914
  type StepDefinition = Omit<Step, 'id'>;
897
915
  type StepLabelProvider = (step: StepDefinition) => string;
916
+ type StepDescriptionProvider = (step: StepDefinition) => string;
898
917
  interface ToolboxGroupConfiguration {
899
918
  name: string;
900
919
  steps: StepDefinition[];
@@ -1126,4 +1145,4 @@ declare class StepsExtension extends StepsDesignerExtension {
1126
1145
  interface StepsExtensionConfiguration extends StepsDesignerExtensionConfiguration {
1127
1146
  }
1128
1147
 
1129
- export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesResult, BaseClickCommand, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentView, ContainerStep, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ControlBarApi, CustomAction, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, GlobalEditorContext, GlobalEditorProvider, Grid, GridExtension, Icons, InputView, JoinView, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionView, RerenderStepClickCommand, RootComponentExtension, RootValidator, SelectStepClickCommand, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, StepsExtension, StepsExtensionConfiguration, SwitchStep, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStep, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, race };
1148
+ export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesResult, BaseClickCommand, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentView, ContainerStep, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ControlBarApi, CustomAction, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, GlobalEditorContext, GlobalEditorProvider, Grid, GridExtension, Icons, InputView, JoinView, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionView, RerenderStepClickCommand, RootComponentExtension, RootValidator, SelectStepClickCommand, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, StepsExtension, StepsExtensionConfiguration, SwitchStep, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStep, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, race };
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.15.3",
4
+ "version": "0.16.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
@@ -2,18 +2,22 @@
2
2
  $theme,
3
3
  $panelBackgroundColor: #fff,
4
4
  $panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15)),
5
+ $panelBorderRadius: 10px,
5
6
  $headerTextColor: #000,
6
7
  $filterBackground: #fff,
7
8
  $filterTextColor: #000,
8
9
  $filterBorder: (1px solid #c3c3c3),
9
10
  $filterBorderColorFocused: #939393,
11
+ $filterBorderRadius: 10px,
10
12
  $groupTextColor: #000,
11
- $groupBackgroundColor: #e5e5e5
13
+ $groupBackgroundColor: #e5e5e5,
14
+ $groupBorderRadius: 10px
12
15
  ) {
13
16
  .sqd-theme-#{$theme} {
14
17
  .sqd-toolbox {
15
18
  background: $panelBackgroundColor;
16
19
  box-shadow: $panelBoxShadow;
20
+ border-radius: $panelBorderRadius;
17
21
  }
18
22
  .sqd-toolbox-header-title {
19
23
  color: $headerTextColor;
@@ -22,6 +26,7 @@
22
26
  background: $filterBackground;
23
27
  color: $filterTextColor;
24
28
  border: $filterBorder;
29
+ border-radius: $filterBorderRadius;
25
30
  }
26
31
  .sqd-toolbox-filter:focus {
27
32
  border-color: $filterBorderColorFocused;
@@ -29,6 +34,7 @@
29
34
  .sqd-toolbox-group-title {
30
35
  color: $groupTextColor;
31
36
  background: $groupBackgroundColor;
37
+ border-radius: $groupBorderRadius;
32
38
  }
33
39
  }
34
40
  }
@@ -41,7 +47,9 @@
41
47
  $itemBoxShadow: (0 2px 2px rgba(0, 0, 0, 0.15)),
42
48
  $itemBorderHovered: #939393,
43
49
  $itemBackgroundColorHovered: #fff,
44
- $noIconBackgroundColor: #c6c6c6
50
+ $itemBorderRadius: 5px,
51
+ $noIconBackgroundColor: #c6c6c6,
52
+ $noIconBorderRadius: 4px
45
53
  ) {
46
54
  .sqd-theme-#{$theme} .sqd-toolbox-item#{if($stepType != '', '.sqd-type-' + $stepType, '')} {
47
55
  & {
@@ -49,6 +57,7 @@
49
57
  border: $itemBorder;
50
58
  box-shadow: $itemBoxShadow;
51
59
  background: $itemBackgroundColor;
60
+ border-radius: $itemBorderRadius;
52
61
  }
53
62
  &:hover {
54
63
  border-color: $itemBorderHovered;
@@ -56,6 +65,7 @@
56
65
  }
57
66
  & .sqd-toolbox-item-icon.sqd-no-icon {
58
67
  background: $noIconBackgroundColor;
68
+ border-radius: $noIconBorderRadius;
59
69
  }
60
70
  }
61
71
  }
@@ -64,10 +74,12 @@
64
74
  $theme,
65
75
  $panelBackgroundColor: #fff,
66
76
  $panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15)),
77
+ $panelBorderRadius: 10px,
67
78
  $buttonBackground: #fff,
68
79
  $buttonBackgroundHovered: #fff,
69
80
  $buttonBorder: (1px solid #c3c3c3),
70
81
  $buttonBorderColorHovered: #939393,
82
+ $buttonBorderRadius: 5px,
71
83
  $buttonIconPathFillColor: #000,
72
84
  $buttonDeleteIconPathFillColor: #e01a24
73
85
  ) {
@@ -75,10 +87,12 @@
75
87
  .sqd-control-bar {
76
88
  background: $panelBackgroundColor;
77
89
  box-shadow: $panelBoxShadow;
90
+ border-radius: $panelBorderRadius;
78
91
  }
79
92
  .sqd-control-bar-button {
80
93
  border: $buttonBorder;
81
94
  background: $buttonBackground;
95
+ border-radius: $buttonBorderRadius;
82
96
  }
83
97
  .sqd-control-bar-button:hover {
84
98
  border-color: $buttonBorderColorHovered;
@@ -116,19 +130,23 @@
116
130
  $theme,
117
131
  $panelBackgroundColor: #fff,
118
132
  $panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.2)),
133
+ $panelBorderRadius: 4px,
119
134
  $groupTextColor: #888,
120
135
  $itemTextColor: #000,
121
- $itemBackgroundColorHovered: #eee
136
+ $itemBackgroundColorHovered: #eee,
137
+ $itemBorderRadius: 4px
122
138
  ) {
123
139
  .sqd-theme-#{$theme}.sqd-context-menu {
124
140
  background: $panelBackgroundColor;
125
141
  box-shadow: $panelBoxShadow;
142
+ border-radius: $panelBorderRadius;
126
143
  }
127
144
  .sqd-theme-#{$theme} .sqd-context-menu-group {
128
145
  color: $groupTextColor;
129
146
  }
130
147
  .sqd-theme-#{$theme} .sqd-context-menu-item {
131
148
  color: $itemTextColor;
149
+ border-radius: $itemBorderRadius;
132
150
  }
133
151
  .sqd-theme-#{$theme} .sqd-context-menu-item:hover {
134
152
  background: $itemBackgroundColorHovered;
@@ -188,6 +206,7 @@
188
206
 
189
207
  @mixin sqd-theme-region(
190
208
  $theme,
209
+ $componentType: '',
191
210
  $strokeColor: #cecece,
192
211
  $strokeColorSelected: #ed4800,
193
212
  $strokeWidth: 2,
@@ -195,7 +214,7 @@
195
214
  $strokeDasharray: 3,
196
215
  $strokeDasharraySelected: 0
197
216
  ) {
198
- .sqd-theme-#{$theme} {
217
+ .sqd-theme-#{$theme}#{if($componentType != '', ' .sqd-step-' + $componentType + ' >', '')} {
199
218
  .sqd-region {
200
219
  stroke: $strokeColor;
201
220
  stroke-width: $strokeWidth;
@@ -334,6 +353,9 @@
334
353
  $stepType: '',
335
354
  $labelTextColor: #fff,
336
355
  $labelFillColor: #2411db,
356
+ $labelStrokeColor: #2411db,
357
+ $labelStrokeWidth: 0,
358
+ $labelShadow: '',
337
359
  $inputStrokeWidth: 2,
338
360
  $inputStrokeColor: #000,
339
361
  $inputFillColor: #fff
@@ -344,6 +366,13 @@
344
366
  }
345
367
  & > .sqd-label > .sqd-label-rect {
346
368
  fill: $labelFillColor;
369
+ stroke-width: $labelStrokeWidth;
370
+ @if $labelStrokeWidth > 0 {
371
+ stroke: $labelStrokeColor;
372
+ }
373
+ @if $labelShadow != '' {
374
+ filter: drop-shadow($labelShadow);
375
+ }
347
376
  }
348
377
  & > g > {
349
378
  @include _sqd-input(
package/sass/designer.scss CHANGED
@@ -32,7 +32,6 @@
32
32
  left: 10px;
33
33
  z-index: 20;
34
34
  box-sizing: border-box;
35
- border-radius: 10px;
36
35
  width: 130px;
37
36
  user-select: none;
38
37
  }
@@ -75,17 +74,14 @@
75
74
  width: 110px;
76
75
  margin: 0 10px 10px;
77
76
  box-sizing: border-box;
78
- border-radius: 10px;
79
77
  }
80
78
  .sqd-toolbox-group-title {
81
79
  text-align: center;
82
80
  padding: 5px 0;
83
81
  margin: 0 10px 10px;
84
- border-radius: 10px;
85
82
  }
86
83
  .sqd-toolbox-item {
87
84
  position: relative;
88
- border-radius: 5px;
89
85
  box-sizing: border-box;
90
86
  margin: 0 10px 10px;
91
87
  width: 110px;
@@ -99,9 +95,6 @@
99
95
  width: 20px;
100
96
  height: 20px;
101
97
  }
102
- .sqd-toolbox-item-icon.sqd-no-icon {
103
- border-radius: 4px;
104
- }
105
98
  .sqd-toolbox-item-icon-image {
106
99
  width: 100%;
107
100
  height: 100%;
@@ -129,14 +122,12 @@
129
122
  left: 10px;
130
123
  z-index: 20;
131
124
  padding: 8px 0 8px 8px;
132
- border-radius: 10px;
133
125
  white-space: nowrap;
134
126
  }
135
127
  .sqd-control-bar-button {
136
128
  display: inline-block;
137
129
  width: 32px;
138
130
  height: 32px;
139
- border-radius: 5px;
140
131
  margin-right: 8px;
141
132
  cursor: pointer;
142
133
  box-sizing: border-box;
@@ -205,7 +196,6 @@
205
196
  .sqd-context-menu {
206
197
  position: absolute;
207
198
  z-index: 2000000000;
208
- border-radius: 4px;
209
199
  overflow: hidden;
210
200
  padding: 5px;
211
201
  }
@@ -222,7 +212,6 @@
222
212
  line-height: 1em;
223
213
  }
224
214
  .sqd-context-menu-item {
225
- border-radius: 5px;
226
215
  cursor: pointer;
227
216
  transition: background 70ms;
228
217
  }