sequential-workflow-designer 0.22.0 → 0.23.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 +2 -2
  3. package/css/designer-light.css +2 -2
  4. package/css/designer.css +13 -7
  5. package/dist/index.umd.js +20 -15
  6. package/lib/cjs/index.cjs +20 -15
  7. package/lib/esm/index.js +20 -15
  8. package/lib/index.d.ts +2 -2
  9. package/package.json +1 -1
  10. package/sass/designer-theme.scss +2 -2
  11. 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.22.0/css/designer.css" rel="stylesheet">
107
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.0/css/designer-light.css" rel="stylesheet">
108
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.0/css/designer-dark.css" rel="stylesheet">
109
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.0/dist/index.umd.js"></script>
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>
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: 110px;
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 10px 10px;
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 10px 10px;
99
- width: 110px;
104
+ margin: 0 0 10px;
105
+ width: 100%;
100
106
  cursor: move;
101
107
  }
102
108
 
package/dist/index.umd.js CHANGED
@@ -165,8 +165,8 @@
165
165
  }
166
166
  }
167
167
 
168
- function race(timeout, a, b, c) {
169
- const value = [undefined, undefined, undefined];
168
+ function race(timeout, a, b, c, d) {
169
+ const value = [undefined, undefined, undefined, undefined];
170
170
  const result = new SimpleEvent();
171
171
  let scheduled = false;
172
172
  function forward() {
@@ -184,26 +184,27 @@
184
184
  }
185
185
  }, timeout);
186
186
  }
187
- [a, b, c]
188
- .filter(e => e)
189
- .forEach((e, index) => {
190
- e.subscribe(v => {
187
+ function subscribe(event, index) {
188
+ event.subscribe(v => {
191
189
  value[index] = v;
192
190
  forward();
193
191
  });
194
- });
192
+ }
193
+ subscribe(a, 0);
194
+ subscribe(b, 1);
195
+ if (c) {
196
+ subscribe(c, 2);
197
+ }
198
+ if (d) {
199
+ subscribe(d, 3);
200
+ }
195
201
  return result;
196
202
  }
197
203
 
198
204
  class ControlBarApi {
199
205
  static create(state, historyController, stateModifier, viewportApi) {
200
206
  const api = new ControlBarApi(state, historyController, stateModifier, viewportApi);
201
- state.onIsReadonlyChanged.subscribe(api.onStateChanged.forward);
202
- state.onSelectedStepIdChanged.subscribe(api.onStateChanged.forward);
203
- state.onIsDragDisabledChanged.subscribe(api.onStateChanged.forward);
204
- if (api.isUndoRedoSupported()) {
205
- state.onDefinitionChanged.subscribe(api.onStateChanged.forward);
206
- }
207
+ race(0, state.onIsReadonlyChanged, state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined).subscribe(api.onStateChanged.forward);
207
208
  return api;
208
209
  }
209
210
  constructor(state, historyController, stateModifier, viewportApi) {
@@ -4039,15 +4040,19 @@
4039
4040
  const body = Dom.element('div', {
4040
4041
  class: 'sqd-toolbox-body'
4041
4042
  });
4043
+ const filter = Dom.element('div', {
4044
+ class: 'sqd-toolbox-filter'
4045
+ });
4042
4046
  const filterInput = Dom.element('input', {
4043
- class: 'sqd-toolbox-filter',
4047
+ class: 'sqd-toolbox-filter-input',
4044
4048
  type: 'text',
4045
4049
  placeholder: i18n('toolbox.search', 'Search...')
4046
4050
  });
4047
4051
  root.appendChild(header);
4048
4052
  root.appendChild(body);
4049
4053
  header.appendChild(headerTitle);
4050
- body.appendChild(filterInput);
4054
+ filter.appendChild(filterInput);
4055
+ body.appendChild(filter);
4051
4056
  parent.appendChild(root);
4052
4057
  const scrollBoxView = ScrollBoxView.create(body, parent);
4053
4058
  return new ToolboxView(header, body, filterInput, scrollBoxView, api);
package/lib/cjs/index.cjs CHANGED
@@ -163,8 +163,8 @@ class SimpleEvent {
163
163
  }
164
164
  }
165
165
 
166
- function race(timeout, a, b, c) {
167
- const value = [undefined, undefined, undefined];
166
+ function race(timeout, a, b, c, d) {
167
+ const value = [undefined, undefined, undefined, undefined];
168
168
  const result = new SimpleEvent();
169
169
  let scheduled = false;
170
170
  function forward() {
@@ -182,26 +182,27 @@ function race(timeout, a, b, c) {
182
182
  }
183
183
  }, timeout);
184
184
  }
185
- [a, b, c]
186
- .filter(e => e)
187
- .forEach((e, index) => {
188
- e.subscribe(v => {
185
+ function subscribe(event, index) {
186
+ event.subscribe(v => {
189
187
  value[index] = v;
190
188
  forward();
191
189
  });
192
- });
190
+ }
191
+ subscribe(a, 0);
192
+ subscribe(b, 1);
193
+ if (c) {
194
+ subscribe(c, 2);
195
+ }
196
+ if (d) {
197
+ subscribe(d, 3);
198
+ }
193
199
  return result;
194
200
  }
195
201
 
196
202
  class ControlBarApi {
197
203
  static create(state, historyController, stateModifier, viewportApi) {
198
204
  const api = new ControlBarApi(state, historyController, stateModifier, viewportApi);
199
- state.onIsReadonlyChanged.subscribe(api.onStateChanged.forward);
200
- state.onSelectedStepIdChanged.subscribe(api.onStateChanged.forward);
201
- state.onIsDragDisabledChanged.subscribe(api.onStateChanged.forward);
202
- if (api.isUndoRedoSupported()) {
203
- state.onDefinitionChanged.subscribe(api.onStateChanged.forward);
204
- }
205
+ race(0, state.onIsReadonlyChanged, state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined).subscribe(api.onStateChanged.forward);
205
206
  return api;
206
207
  }
207
208
  constructor(state, historyController, stateModifier, viewportApi) {
@@ -3854,15 +3855,19 @@ class ToolboxView {
3854
3855
  const body = Dom.element('div', {
3855
3856
  class: 'sqd-toolbox-body'
3856
3857
  });
3858
+ const filter = Dom.element('div', {
3859
+ class: 'sqd-toolbox-filter'
3860
+ });
3857
3861
  const filterInput = Dom.element('input', {
3858
- class: 'sqd-toolbox-filter',
3862
+ class: 'sqd-toolbox-filter-input',
3859
3863
  type: 'text',
3860
3864
  placeholder: i18n('toolbox.search', 'Search...')
3861
3865
  });
3862
3866
  root.appendChild(header);
3863
3867
  root.appendChild(body);
3864
3868
  header.appendChild(headerTitle);
3865
- body.appendChild(filterInput);
3869
+ filter.appendChild(filterInput);
3870
+ body.appendChild(filter);
3866
3871
  parent.appendChild(root);
3867
3872
  const scrollBoxView = ScrollBoxView.create(body, parent);
3868
3873
  return new ToolboxView(header, body, filterInput, scrollBoxView, api);
package/lib/esm/index.js CHANGED
@@ -162,8 +162,8 @@ class SimpleEvent {
162
162
  }
163
163
  }
164
164
 
165
- function race(timeout, a, b, c) {
166
- const value = [undefined, undefined, undefined];
165
+ function race(timeout, a, b, c, d) {
166
+ const value = [undefined, undefined, undefined, undefined];
167
167
  const result = new SimpleEvent();
168
168
  let scheduled = false;
169
169
  function forward() {
@@ -181,26 +181,27 @@ function race(timeout, a, b, c) {
181
181
  }
182
182
  }, timeout);
183
183
  }
184
- [a, b, c]
185
- .filter(e => e)
186
- .forEach((e, index) => {
187
- e.subscribe(v => {
184
+ function subscribe(event, index) {
185
+ event.subscribe(v => {
188
186
  value[index] = v;
189
187
  forward();
190
188
  });
191
- });
189
+ }
190
+ subscribe(a, 0);
191
+ subscribe(b, 1);
192
+ if (c) {
193
+ subscribe(c, 2);
194
+ }
195
+ if (d) {
196
+ subscribe(d, 3);
197
+ }
192
198
  return result;
193
199
  }
194
200
 
195
201
  class ControlBarApi {
196
202
  static create(state, historyController, stateModifier, viewportApi) {
197
203
  const api = new ControlBarApi(state, historyController, stateModifier, viewportApi);
198
- state.onIsReadonlyChanged.subscribe(api.onStateChanged.forward);
199
- state.onSelectedStepIdChanged.subscribe(api.onStateChanged.forward);
200
- state.onIsDragDisabledChanged.subscribe(api.onStateChanged.forward);
201
- if (api.isUndoRedoSupported()) {
202
- state.onDefinitionChanged.subscribe(api.onStateChanged.forward);
203
- }
204
+ race(0, state.onIsReadonlyChanged, state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined).subscribe(api.onStateChanged.forward);
204
205
  return api;
205
206
  }
206
207
  constructor(state, historyController, stateModifier, viewportApi) {
@@ -3853,15 +3854,19 @@ class ToolboxView {
3853
3854
  const body = Dom.element('div', {
3854
3855
  class: 'sqd-toolbox-body'
3855
3856
  });
3857
+ const filter = Dom.element('div', {
3858
+ class: 'sqd-toolbox-filter'
3859
+ });
3856
3860
  const filterInput = Dom.element('input', {
3857
- class: 'sqd-toolbox-filter',
3861
+ class: 'sqd-toolbox-filter-input',
3858
3862
  type: 'text',
3859
3863
  placeholder: i18n('toolbox.search', 'Search...')
3860
3864
  });
3861
3865
  root.appendChild(header);
3862
3866
  root.appendChild(body);
3863
3867
  header.appendChild(headerTitle);
3864
- body.appendChild(filterInput);
3868
+ filter.appendChild(filterInput);
3869
+ body.appendChild(filter);
3865
3870
  parent.appendChild(root);
3866
3871
  const scrollBoxView = ScrollBoxView.create(body, parent);
3867
3872
  return new ToolboxView(header, body, filterInput, scrollBoxView, api);
package/lib/index.d.ts CHANGED
@@ -66,7 +66,7 @@ declare class SimpleEvent<T> {
66
66
  }
67
67
  type SimpleEventListener<T> = (value: T) => void;
68
68
 
69
- declare function race<A, B, C>(timeout: number, a: SimpleEvent<A>, b: SimpleEvent<B>, c?: SimpleEvent<C>): SimpleEvent<[A?, B?, C?]>;
69
+ declare function race<A, B, C, D>(timeout: number, a: SimpleEvent<A>, b: SimpleEvent<B>, c?: SimpleEvent<C>, d?: SimpleEvent<D>): SimpleEvent<[A?, B?, C?, D?]>;
70
70
 
71
71
  interface Behavior {
72
72
  onStart(position: Vector): void;
@@ -405,7 +405,7 @@ declare class PathBarApi {
405
405
  private readonly state;
406
406
  private readonly definitionWalker;
407
407
  constructor(state: DesignerState, definitionWalker: DefinitionWalker);
408
- readonly onStateChanged: SimpleEvent<[(string[] | undefined)?, (DefinitionChangedEvent | undefined)?, unknown?]>;
408
+ readonly onStateChanged: SimpleEvent<[(string[] | undefined)?, (DefinitionChangedEvent | undefined)?, unknown?, unknown?]>;
409
409
  setFolderPath(path: string[]): void;
410
410
  getFolderPath(): string[];
411
411
  getFolderPathStepNames(): string[];
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.22.0",
4
+ "version": "0.23.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: 110px;
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 10px 10px;
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 10px 10px;
88
- width: 110px;
92
+ margin: 0 0 10px;
93
+ width: 100%;
89
94
  cursor: move;
90
95
  }
91
96
  .sqd-toolbox-item-icon {