sequential-workflow-designer 0.35.3 → 0.37.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 +65 -64
- package/dist/index.umd.js +91 -47
- package/lib/cjs/index.cjs +91 -47
- package/lib/esm/index.js +91 -47
- package/lib/index.d.ts +43 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,16 +4,16 @@
|
|
|
4
4
|
|
|
5
5
|
[](https://actions-badge.atrox.dev/b4rtaz/sequential-workflow-designer/goto?ref=main) [](/LICENSE) [](https://npmjs.org/package/sequential-workflow-designer)
|
|
6
6
|
|
|
7
|
-
Sequential workflow designer with
|
|
7
|
+
Sequential workflow designer with no external dependencies for web applications. It is written in pure TypeScript and uses SVG for rendering. This designer is not associated with any workflow engine, it is fully generic. You can use it to create any kind of application, from graphical programming languages to workflow builders.
|
|
8
8
|
|
|
9
9
|
Features:
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
- No external dependencies
|
|
12
|
+
- Fully generic and configurable
|
|
13
|
+
- Supports light, dark, and soft themes, with easy customization
|
|
14
|
+
- Compatible with modern browsers and mobile devices
|
|
15
|
+
- Definitions are stored as JSON
|
|
16
|
+
- Supports [Angular](./angular/designer/), [React](./react/) and [Svelte](./svelte/).
|
|
17
17
|
|
|
18
18
|
📝 Check the [documentation](https://nocode-js.com/docs/category/sequential-workflow-designer) for more details.
|
|
19
19
|
|
|
@@ -21,51 +21,51 @@ Features:
|
|
|
21
21
|
|
|
22
22
|
## 👀 Examples
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
24
|
+
- [⏩ Live Testing](https://nocode-js.github.io/sequential-workflow-designer/examples/live-testing.html)
|
|
25
|
+
- [💥 Triggers](https://nocode-js.github.io/sequential-workflow-designer/examples/triggers.html)
|
|
26
|
+
- [❎ Fullscreen](https://nocode-js.github.io/sequential-workflow-designer/examples/fullscreen.html)
|
|
27
|
+
- [🌅 Image Filter](https://nocode-js.github.io/sequential-workflow-designer/examples/image-filter.html)
|
|
28
|
+
- [🔴 Particles](https://nocode-js.github.io/sequential-workflow-designer/examples/particles.html)
|
|
29
|
+
- [🌍 Internationalization](https://nocode-js.github.io/sequential-workflow-designer/examples/i18n.html)
|
|
30
|
+
- [⛅ Light Dark](https://nocode-js.github.io/sequential-workflow-designer/examples/light-dark.html)
|
|
31
|
+
- [🤖 Code Generator](https://nocode-js.github.io/sequential-workflow-designer/examples/code-generator.html)
|
|
32
|
+
- [🌻 Rendering Test](https://nocode-js.github.io/sequential-workflow-designer/examples/rendering-test.html)
|
|
33
|
+
- [🚄 Stress Test](https://nocode-js.github.io/sequential-workflow-designer/examples/stress-test.html)
|
|
34
|
+
- [🚪 Editing Restrictions](https://nocode-js.github.io/sequential-workflow-designer/examples/editing-restrictions.html)
|
|
35
|
+
- [📜 Scrollable Page](https://nocode-js.github.io/sequential-workflow-designer/examples/scrollable-page.html)
|
|
36
|
+
- [🌵 Multi-Conditional Switch](https://nocode-js.github.io/sequential-workflow-designer/examples/multi-conditional-switch.html)
|
|
37
|
+
- [🌀 Auto-Select](https://nocode-js.github.io/sequential-workflow-designer/examples/auto-select.html)
|
|
38
|
+
- [Angular Demo](https://nocode-js.github.io/sequential-workflow-designer/angular-app/)
|
|
39
|
+
- [React Demo](https://nocode-js.github.io/sequential-workflow-designer/react-app/)
|
|
40
|
+
- [Svelte Demo](https://nocode-js.github.io/sequential-workflow-designer/svelte-app/)
|
|
41
41
|
|
|
42
42
|
Pro:
|
|
43
43
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
44
|
+
- [🤩 Pro Components](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/pro-components.html)
|
|
45
|
+
- [🍬 Custom Theme Flat](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-theme-flat.html)
|
|
46
|
+
- [🌹 Custom Step Types](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-step-types.html)
|
|
47
|
+
- [📺 Popup Editor](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/popup-editor.html)
|
|
48
|
+
- [🔽 Collapsible Region](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/collapsible-region.html)
|
|
49
|
+
- [💼 Copy Paste](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/copy-paste.html)
|
|
50
|
+
- [👈 Goto](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/goto.html)
|
|
51
|
+
- [📁 Folders](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/folders.html)
|
|
52
|
+
- [⭕ Wheel Mode](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/wheel-mode.html)
|
|
53
|
+
- [💠 Grid](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/grid.html)
|
|
54
|
+
- [🐭 Minimal Root Component](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/minimal-root-component.html)
|
|
55
|
+
- [🦁 External UI Components](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/external-ui-components.html)
|
|
56
|
+
- [👋 Custom Dragged Component](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-dragged-component.html)
|
|
57
|
+
- [🔰 Badges](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/badges.html)
|
|
58
|
+
- [🎩 Custom Viewport](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-viewport.html)
|
|
59
|
+
- [👊 Double Click](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/double-click.html)
|
|
60
|
+
- [🛎 Clickable Placeholder](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/clickable-placeholder.html)
|
|
61
|
+
- [📮 Conditional Placeholders](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/conditional-placeholders.html)
|
|
62
|
+
- [React Pro Demo](https://nocode-js.com/examples/sequential-workflow-designer-pro/react-pro-app/build/index.html)
|
|
63
|
+
- [Angular Pro Demo](https://nocode-js.com/examples/sequential-workflow-designer-pro/angular-pro-app/angular-app/index.html)
|
|
64
64
|
|
|
65
65
|
## 👩💻 Integrations
|
|
66
66
|
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
- [⛽ Sequential Workflow Editor](https://github.com/nocode-js/sequential-workflow-editor) - Powerful step editor builder. Don't write step editors manually, build them.
|
|
68
|
+
- [🚚 Sequential Workflow Machine](https://github.com/nocode-js/sequential-workflow-machine) - Workflow engine for browser and NodeJS apps, powered by the xstate library.
|
|
69
69
|
|
|
70
70
|
## 🚀 Installation
|
|
71
71
|
|
|
@@ -105,11 +105,12 @@ Add the below code to your head section in HTML document.
|
|
|
105
105
|
|
|
106
106
|
```html
|
|
107
107
|
<head>
|
|
108
|
-
...
|
|
109
|
-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.
|
|
110
|
-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.
|
|
111
|
-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.
|
|
112
|
-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.
|
|
108
|
+
...
|
|
109
|
+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.0/css/designer.css" rel="stylesheet" />
|
|
110
|
+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.0/css/designer-light.css" rel="stylesheet" />
|
|
111
|
+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.0/css/designer-dark.css" rel="stylesheet" />
|
|
112
|
+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.0/dist/index.umd.js"></script>
|
|
113
|
+
</head>
|
|
113
114
|
```
|
|
114
115
|
|
|
115
116
|
Call the designer by:
|
|
@@ -129,12 +130,12 @@ const placeholder = document.getElementById('placeholder');
|
|
|
129
130
|
|
|
130
131
|
const definition = {
|
|
131
132
|
properties: {
|
|
132
|
-
|
|
133
|
+
myProperty: 'my-value',
|
|
133
134
|
// root properties...
|
|
134
135
|
},
|
|
135
136
|
sequence: [
|
|
136
137
|
// steps...
|
|
137
|
-
]
|
|
138
|
+
],
|
|
138
139
|
};
|
|
139
140
|
|
|
140
141
|
const configuration = {
|
|
@@ -156,7 +157,7 @@ const configuration = {
|
|
|
156
157
|
return step.properties['isDeletable'];
|
|
157
158
|
},
|
|
158
159
|
isDuplicable: (step, parentSequence) => {
|
|
159
|
-
|
|
160
|
+
return true;
|
|
160
161
|
},
|
|
161
162
|
canInsertStep: (step, targetSequence, targetIndex) => {
|
|
162
163
|
return targetSequence.length < 5;
|
|
@@ -166,7 +167,7 @@ const configuration = {
|
|
|
166
167
|
},
|
|
167
168
|
canDeleteStep: (step, parentSequence) => {
|
|
168
169
|
return step.name !== 'x';
|
|
169
|
-
}
|
|
170
|
+
},
|
|
170
171
|
},
|
|
171
172
|
|
|
172
173
|
validator: {
|
|
@@ -175,9 +176,9 @@ const configuration = {
|
|
|
175
176
|
step: (step, parentSequence, definition) => {
|
|
176
177
|
return /^[a-z]+$/.test(step.name);
|
|
177
178
|
},
|
|
178
|
-
root:
|
|
179
|
+
root: definition => {
|
|
179
180
|
return definition.properties['memory'] > 256;
|
|
180
|
-
}
|
|
181
|
+
},
|
|
181
182
|
},
|
|
182
183
|
|
|
183
184
|
toolbox: {
|
|
@@ -187,15 +188,15 @@ const configuration = {
|
|
|
187
188
|
name: 'Files',
|
|
188
189
|
steps: [
|
|
189
190
|
// steps for the toolbox's group
|
|
190
|
-
]
|
|
191
|
+
],
|
|
191
192
|
},
|
|
192
193
|
{
|
|
193
194
|
name: 'Notification',
|
|
194
195
|
steps: [
|
|
195
196
|
// steps for the toolbox's group
|
|
196
|
-
]
|
|
197
|
-
}
|
|
198
|
-
]
|
|
197
|
+
],
|
|
198
|
+
},
|
|
199
|
+
],
|
|
199
200
|
},
|
|
200
201
|
|
|
201
202
|
editors: {
|
|
@@ -209,7 +210,7 @@ const configuration = {
|
|
|
209
210
|
const editor = document.createElement('div');
|
|
210
211
|
// ...
|
|
211
212
|
return editor;
|
|
212
|
-
}
|
|
213
|
+
},
|
|
213
214
|
},
|
|
214
215
|
|
|
215
216
|
controlBar: true,
|
|
@@ -217,7 +218,7 @@ const configuration = {
|
|
|
217
218
|
};
|
|
218
219
|
|
|
219
220
|
const designer = Designer.create(placeholder, definition, configuration);
|
|
220
|
-
designer.onDefinitionChanged.subscribe(
|
|
221
|
+
designer.onDefinitionChanged.subscribe(event => {
|
|
221
222
|
// ...
|
|
222
223
|
});
|
|
223
224
|
```
|
|
@@ -231,7 +232,7 @@ const configuration = {
|
|
|
231
232
|
controlBar: false,
|
|
232
233
|
contextMenu: false,
|
|
233
234
|
// ...
|
|
234
|
-
}
|
|
235
|
+
};
|
|
235
236
|
```
|
|
236
237
|
|
|
237
238
|
## 💡 License
|
package/dist/index.umd.js
CHANGED
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
count() {
|
|
155
155
|
return this.listeners.length;
|
|
156
156
|
}
|
|
157
|
-
|
|
157
|
+
once() {
|
|
158
158
|
return new Promise(resolve => {
|
|
159
159
|
const handler = (value) => {
|
|
160
160
|
this.unsubscribe(handler);
|
|
@@ -1519,7 +1519,7 @@
|
|
|
1519
1519
|
exports.ClickCommandType = void 0;
|
|
1520
1520
|
(function (ClickCommandType) {
|
|
1521
1521
|
ClickCommandType[ClickCommandType["selectStep"] = 1] = "selectStep";
|
|
1522
|
-
ClickCommandType[ClickCommandType["
|
|
1522
|
+
ClickCommandType[ClickCommandType["changePreferences"] = 2] = "changePreferences";
|
|
1523
1523
|
ClickCommandType[ClickCommandType["openFolder"] = 3] = "openFolder";
|
|
1524
1524
|
ClickCommandType[ClickCommandType["triggerCustomAction"] = 4] = "triggerCustomAction";
|
|
1525
1525
|
})(exports.ClickCommandType || (exports.ClickCommandType = {}));
|
|
@@ -2736,7 +2736,12 @@
|
|
|
2736
2736
|
createPlaceholderForGap: componentContext.services.placeholder.createForGap.bind(componentContext.services.placeholder),
|
|
2737
2737
|
createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder),
|
|
2738
2738
|
getPreference: (key) => componentContext.preferenceStorage.getItem(preferenceKeyPrefix + key),
|
|
2739
|
-
|
|
2739
|
+
createPreferenceChange: (key, value) => {
|
|
2740
|
+
return {
|
|
2741
|
+
key: preferenceKeyPrefix + key,
|
|
2742
|
+
value
|
|
2743
|
+
};
|
|
2744
|
+
}
|
|
2740
2745
|
};
|
|
2741
2746
|
}
|
|
2742
2747
|
}
|
|
@@ -3049,11 +3054,19 @@
|
|
|
3049
3054
|
}
|
|
3050
3055
|
duplicate(step) {
|
|
3051
3056
|
const newStep = ObjectCloner.deepClone(step);
|
|
3052
|
-
|
|
3057
|
+
const duplicatedIds = [];
|
|
3058
|
+
const newId = this.uidGenerator();
|
|
3059
|
+
duplicatedIds.push([step.id, newId]);
|
|
3060
|
+
newStep.id = newId;
|
|
3053
3061
|
this.definitionWalker.forEachChildren(newStep, s => {
|
|
3054
|
-
|
|
3062
|
+
const newId = this.uidGenerator();
|
|
3063
|
+
duplicatedIds.push([s.id, newId]);
|
|
3064
|
+
s.id = newId;
|
|
3055
3065
|
});
|
|
3056
|
-
return
|
|
3066
|
+
return {
|
|
3067
|
+
step: newStep,
|
|
3068
|
+
duplicatedIds
|
|
3069
|
+
};
|
|
3057
3070
|
}
|
|
3058
3071
|
}
|
|
3059
3072
|
|
|
@@ -3174,13 +3187,13 @@
|
|
|
3174
3187
|
this.updateDependencies();
|
|
3175
3188
|
return true;
|
|
3176
3189
|
}
|
|
3177
|
-
tryInsert(step, targetSequence, targetIndex) {
|
|
3190
|
+
tryInsert(step, targetSequence, targetIndex, details) {
|
|
3178
3191
|
const canInsertStep = this.configuration.canInsertStep ? this.configuration.canInsertStep(step, targetSequence, targetIndex) : true;
|
|
3179
3192
|
if (!canInsertStep) {
|
|
3180
3193
|
return false;
|
|
3181
3194
|
}
|
|
3182
3195
|
SequenceModifier.insertStep(step, targetSequence, targetIndex);
|
|
3183
|
-
this.state.notifyDefinitionChanged(exports.DefinitionChangeType.stepInserted, step.id);
|
|
3196
|
+
this.state.notifyDefinitionChanged(exports.DefinitionChangeType.stepInserted, step.id, details);
|
|
3184
3197
|
if (!this.configuration.isAutoSelectDisabled && this.isSelectable(step, targetSequence)) {
|
|
3185
3198
|
this.trySelectStepById(step.id);
|
|
3186
3199
|
}
|
|
@@ -3216,8 +3229,10 @@
|
|
|
3216
3229
|
tryDuplicate(step, parentSequence) {
|
|
3217
3230
|
const duplicator = new StepDuplicator(this.uidGenerator, this.definitionWalker);
|
|
3218
3231
|
const index = parentSequence.indexOf(step);
|
|
3219
|
-
const
|
|
3220
|
-
return this.tryInsert(
|
|
3232
|
+
const result = duplicator.duplicate(step);
|
|
3233
|
+
return this.tryInsert(result.step, parentSequence, index + 1, {
|
|
3234
|
+
duplicatedStepIds: result.duplicatedIds
|
|
3235
|
+
});
|
|
3221
3236
|
}
|
|
3222
3237
|
replaceDefinition(definition) {
|
|
3223
3238
|
if (!definition) {
|
|
@@ -3232,11 +3247,12 @@
|
|
|
3232
3247
|
}
|
|
3233
3248
|
|
|
3234
3249
|
class DesignerState {
|
|
3235
|
-
constructor(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed) {
|
|
3250
|
+
constructor(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed, preferenceStorage) {
|
|
3236
3251
|
this.definition = definition;
|
|
3237
3252
|
this.isReadonly = isReadonly;
|
|
3238
3253
|
this.isToolboxCollapsed = isToolboxCollapsed;
|
|
3239
3254
|
this.isEditorCollapsed = isEditorCollapsed;
|
|
3255
|
+
this.preferenceStorage = preferenceStorage;
|
|
3240
3256
|
this.onViewportChanged = new SimpleEvent();
|
|
3241
3257
|
this.onSelectedStepIdChanged = new SimpleEvent();
|
|
3242
3258
|
this.onStepUnselectionBlocked = new SimpleEvent();
|
|
@@ -3247,6 +3263,7 @@
|
|
|
3247
3263
|
this.onDefinitionChanged = new SimpleEvent();
|
|
3248
3264
|
this.onIsToolboxCollapsedChanged = new SimpleEvent();
|
|
3249
3265
|
this.onIsEditorCollapsedChanged = new SimpleEvent();
|
|
3266
|
+
this.onPreferencesChanged = new SimpleEvent();
|
|
3250
3267
|
this.viewport = {
|
|
3251
3268
|
position: new Vector(0, 0),
|
|
3252
3269
|
scale: 1
|
|
@@ -3277,8 +3294,16 @@
|
|
|
3277
3294
|
this.definition = definition;
|
|
3278
3295
|
this.notifyDefinitionChanged(exports.DefinitionChangeType.rootReplaced, null);
|
|
3279
3296
|
}
|
|
3280
|
-
notifyDefinitionChanged(changeType, stepId) {
|
|
3281
|
-
|
|
3297
|
+
notifyDefinitionChanged(changeType, stepId, details) {
|
|
3298
|
+
const event = {
|
|
3299
|
+
definition: this.definition,
|
|
3300
|
+
changeType,
|
|
3301
|
+
stepId
|
|
3302
|
+
};
|
|
3303
|
+
if (details) {
|
|
3304
|
+
Object.assign(event, details);
|
|
3305
|
+
}
|
|
3306
|
+
this.onDefinitionChanged.forward(event);
|
|
3282
3307
|
}
|
|
3283
3308
|
notifyStepUnselectionBlocked(stepId) {
|
|
3284
3309
|
this.onStepUnselectionBlocked.forward(stepId);
|
|
@@ -3317,6 +3342,15 @@
|
|
|
3317
3342
|
this.onIsEditorCollapsedChanged.forward(isCollapsed);
|
|
3318
3343
|
}
|
|
3319
3344
|
}
|
|
3345
|
+
setPreferences(changes, stepId) {
|
|
3346
|
+
for (const change of changes) {
|
|
3347
|
+
this.preferenceStorage.setItem(change.key, change.value);
|
|
3348
|
+
}
|
|
3349
|
+
this.onPreferencesChanged.forward({ changes, stepId });
|
|
3350
|
+
}
|
|
3351
|
+
getPreference(key) {
|
|
3352
|
+
return this.preferenceStorage.getItem(key);
|
|
3353
|
+
}
|
|
3320
3354
|
}
|
|
3321
3355
|
|
|
3322
3356
|
class HistoryController {
|
|
@@ -3470,22 +3504,22 @@
|
|
|
3470
3504
|
const isReadonly = Boolean(configuration.isReadonly);
|
|
3471
3505
|
const isToolboxCollapsed = configuration.toolbox ? (_a = configuration.toolbox.isCollapsed) !== null && _a !== void 0 ? _a : layoutController.isMobile() : false;
|
|
3472
3506
|
const isEditorCollapsed = configuration.editors ? (_b = configuration.editors.isCollapsed) !== null && _b !== void 0 ? _b : layoutController.isMobile() : false;
|
|
3507
|
+
const preferenceStorage = (_c = configuration.preferenceStorage) !== null && _c !== void 0 ? _c : new MemoryPreferenceStorage();
|
|
3473
3508
|
const theme = configuration.theme || 'light';
|
|
3474
|
-
const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
|
|
3509
|
+
const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed, preferenceStorage);
|
|
3475
3510
|
const workspaceController = new WorkspaceControllerWrapper();
|
|
3476
3511
|
const behaviorController = BehaviorController.create(configuration.shadowRoot);
|
|
3477
3512
|
const stepExtensionResolver = StepExtensionResolver.create(services);
|
|
3478
3513
|
const placeholderController = PlaceholderController.create(state, configuration.placeholder);
|
|
3479
|
-
const definitionWalker = (
|
|
3480
|
-
const i18n = (
|
|
3481
|
-
const uidGenerator = (
|
|
3514
|
+
const definitionWalker = (_d = configuration.definitionWalker) !== null && _d !== void 0 ? _d : new DefinitionWalker();
|
|
3515
|
+
const i18n = (_e = configuration.i18n) !== null && _e !== void 0 ? _e : ((_, defaultValue) => defaultValue);
|
|
3516
|
+
const uidGenerator = (_f = configuration.uidGenerator) !== null && _f !== void 0 ? _f : Uid.next;
|
|
3482
3517
|
const stateModifier = StateModifier.create(definitionWalker, uidGenerator, state, configuration.steps);
|
|
3483
3518
|
const customActionController = new CustomActionController(configuration, state, stateModifier);
|
|
3484
3519
|
let historyController = undefined;
|
|
3485
3520
|
if (configuration.undoStackSize) {
|
|
3486
3521
|
historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
|
|
3487
3522
|
}
|
|
3488
|
-
const preferenceStorage = (_f = configuration.preferenceStorage) !== null && _f !== void 0 ? _f : new MemoryPreferenceStorage();
|
|
3489
3523
|
const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, services);
|
|
3490
3524
|
return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, uidGenerator, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
|
|
3491
3525
|
}
|
|
@@ -3759,16 +3793,13 @@
|
|
|
3759
3793
|
}
|
|
3760
3794
|
}
|
|
3761
3795
|
|
|
3762
|
-
class
|
|
3796
|
+
class ChangePreferencesBehaviorHandler {
|
|
3763
3797
|
constructor(command, designerContext) {
|
|
3764
3798
|
this.command = command;
|
|
3765
3799
|
this.designerContext = designerContext;
|
|
3766
3800
|
}
|
|
3767
3801
|
handle() {
|
|
3768
|
-
|
|
3769
|
-
this.command.beforeCallback();
|
|
3770
|
-
}
|
|
3771
|
-
this.designerContext.workspaceController.updateRootComponent();
|
|
3802
|
+
this.designerContext.state.setPreferences(this.command.changes, this.command.step.id);
|
|
3772
3803
|
}
|
|
3773
3804
|
}
|
|
3774
3805
|
|
|
@@ -3804,8 +3835,8 @@
|
|
|
3804
3835
|
switch (commandOrNull.type) {
|
|
3805
3836
|
case exports.ClickCommandType.selectStep:
|
|
3806
3837
|
return SelectStepBehavior.create(commandOrNull.component, forceMove, this.context);
|
|
3807
|
-
case exports.ClickCommandType.
|
|
3808
|
-
return PressingBehavior.create(element, new
|
|
3838
|
+
case exports.ClickCommandType.changePreferences:
|
|
3839
|
+
return PressingBehavior.create(element, new ChangePreferencesBehaviorHandler(commandOrNull, this.context));
|
|
3809
3840
|
case exports.ClickCommandType.openFolder:
|
|
3810
3841
|
return PressingBehavior.create(element, new OpenFolderPressingBehaviorHandler(commandOrNull, this.context));
|
|
3811
3842
|
case exports.ClickCommandType.triggerCustomAction:
|
|
@@ -4116,6 +4147,7 @@
|
|
|
4116
4147
|
const workspace = new Workspace(view, designerContext.state, designerContext.behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, api.viewport, api.workspace, designerContext.services);
|
|
4117
4148
|
designerContext.setWorkspaceController(workspace);
|
|
4118
4149
|
designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
|
|
4150
|
+
designerContext.state.onPreferencesChanged.subscribe(workspace.onPreferencesChanged);
|
|
4119
4151
|
race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
|
|
4120
4152
|
workspace.onStateChanged(r[0], r[1], r[2]);
|
|
4121
4153
|
});
|
|
@@ -4138,11 +4170,25 @@
|
|
|
4138
4170
|
this.viewportApi = viewportApi;
|
|
4139
4171
|
this.workspaceApi = workspaceApi;
|
|
4140
4172
|
this.services = services;
|
|
4141
|
-
this.
|
|
4173
|
+
this.onRootComponentUpdated = new SimpleEvent();
|
|
4142
4174
|
this.isValid = false;
|
|
4143
4175
|
this.initTimeout = null;
|
|
4144
4176
|
this.selectedStepComponent = null;
|
|
4145
4177
|
this.validationErrorBadgeIndex = null;
|
|
4178
|
+
this.updateRootComponent = () => {
|
|
4179
|
+
this.selectedStepComponent = null;
|
|
4180
|
+
const rootSequence = this.workspaceApi.getRootSequence();
|
|
4181
|
+
const parentPlaceIndicator = rootSequence.parentStep
|
|
4182
|
+
? {
|
|
4183
|
+
sequence: rootSequence.parentStep.parentSequence,
|
|
4184
|
+
index: rootSequence.parentStep.index
|
|
4185
|
+
}
|
|
4186
|
+
: null;
|
|
4187
|
+
this.view.render(rootSequence.sequence, parentPlaceIndicator);
|
|
4188
|
+
this.trySelectStepComponent(this.state.selectedStepId);
|
|
4189
|
+
this.updateBadges();
|
|
4190
|
+
this.onRootComponentUpdated.forward();
|
|
4191
|
+
};
|
|
4146
4192
|
this.onClick = (position, target, buttonIndex, altKey) => {
|
|
4147
4193
|
const isPrimaryButton = buttonIndex === 0;
|
|
4148
4194
|
const isMiddleButton = buttonIndex === 1;
|
|
@@ -4169,6 +4215,9 @@
|
|
|
4169
4215
|
this.onViewportChanged = (viewport) => {
|
|
4170
4216
|
this.view.setPositionAndScale(viewport.position, viewport.scale);
|
|
4171
4217
|
};
|
|
4218
|
+
this.onPreferencesChanged = () => {
|
|
4219
|
+
this.updateRootComponent();
|
|
4220
|
+
};
|
|
4172
4221
|
}
|
|
4173
4222
|
scheduleInit() {
|
|
4174
4223
|
this.initTimeout = setTimeout(() => {
|
|
@@ -4177,20 +4226,6 @@
|
|
|
4177
4226
|
this.viewportApi.resetViewport();
|
|
4178
4227
|
});
|
|
4179
4228
|
}
|
|
4180
|
-
updateRootComponent() {
|
|
4181
|
-
this.selectedStepComponent = null;
|
|
4182
|
-
const rootSequence = this.workspaceApi.getRootSequence();
|
|
4183
|
-
const parentPlaceIndicator = rootSequence.parentStep
|
|
4184
|
-
? {
|
|
4185
|
-
sequence: rootSequence.parentStep.parentSequence,
|
|
4186
|
-
index: rootSequence.parentStep.index
|
|
4187
|
-
}
|
|
4188
|
-
: null;
|
|
4189
|
-
this.view.render(rootSequence.sequence, parentPlaceIndicator);
|
|
4190
|
-
this.trySelectStepComponent(this.state.selectedStepId);
|
|
4191
|
-
this.updateBadges();
|
|
4192
|
-
this.onRendered.forward();
|
|
4193
|
-
}
|
|
4194
4229
|
updateBadges() {
|
|
4195
4230
|
const result = BadgesResultFactory.create(this.services);
|
|
4196
4231
|
this.getRootComponent().updateBadges(result);
|
|
@@ -5219,11 +5254,12 @@
|
|
|
5219
5254
|
const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
|
|
5220
5255
|
const designerApi = DesignerApi.create(designerContext);
|
|
5221
5256
|
const view = DesignerView.create(placeholder, designerContext, designerApi);
|
|
5222
|
-
const designer = new Designer(view, designerContext.state, designerContext.
|
|
5223
|
-
view.workspace.
|
|
5257
|
+
const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
|
|
5258
|
+
view.workspace.onRootComponentUpdated.subscribe(designer.onRootComponentUpdated.forward);
|
|
5259
|
+
view.workspace.onRootComponentUpdated.once().then(designer.onReady.forward);
|
|
5224
5260
|
race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
|
|
5225
5261
|
if (definition !== undefined) {
|
|
5226
|
-
designer.onDefinitionChanged.forward(
|
|
5262
|
+
designer.onDefinitionChanged.forward(definition);
|
|
5227
5263
|
}
|
|
5228
5264
|
if (selectedStepId !== undefined) {
|
|
5229
5265
|
designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
|
|
@@ -5233,12 +5269,12 @@
|
|
|
5233
5269
|
designerContext.state.onIsToolboxCollapsedChanged.subscribe(designer.onIsToolboxCollapsedChanged.forward);
|
|
5234
5270
|
designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.forward);
|
|
5235
5271
|
designerContext.state.onStepUnselectionBlocked.subscribe(designer.onStepUnselectionBlocked.forward);
|
|
5272
|
+
designerContext.state.onPreferencesChanged.subscribe(designer.onPreferencesChanged.forward);
|
|
5236
5273
|
return designer;
|
|
5237
5274
|
}
|
|
5238
|
-
constructor(view, state,
|
|
5275
|
+
constructor(view, state, walker, historyController, api) {
|
|
5239
5276
|
this.view = view;
|
|
5240
5277
|
this.state = state;
|
|
5241
|
-
this.stateModifier = stateModifier;
|
|
5242
5278
|
this.walker = walker;
|
|
5243
5279
|
this.historyController = historyController;
|
|
5244
5280
|
this.api = api;
|
|
@@ -5270,6 +5306,14 @@
|
|
|
5270
5306
|
* @description Fires when the editor is collapsed or expanded.
|
|
5271
5307
|
*/
|
|
5272
5308
|
this.onIsEditorCollapsedChanged = new SimpleEvent();
|
|
5309
|
+
/**
|
|
5310
|
+
* @description Fires when the root component and all its children are rerendered.
|
|
5311
|
+
*/
|
|
5312
|
+
this.onRootComponentUpdated = new SimpleEvent();
|
|
5313
|
+
/**
|
|
5314
|
+
* @description Fires when any of the designer preferences has changed.
|
|
5315
|
+
*/
|
|
5316
|
+
this.onPreferencesChanged = new SimpleEvent();
|
|
5273
5317
|
}
|
|
5274
5318
|
/**
|
|
5275
5319
|
* @returns the current definition of the workflow.
|
|
@@ -5395,8 +5439,8 @@
|
|
|
5395
5439
|
return __awaiter(this, void 0, void 0, function* () {
|
|
5396
5440
|
this.getHistoryController().replaceDefinition(definition);
|
|
5397
5441
|
yield Promise.all([
|
|
5398
|
-
this.view.workspace.
|
|
5399
|
-
this.onDefinitionChanged.
|
|
5442
|
+
this.view.workspace.onRootComponentUpdated.once(),
|
|
5443
|
+
this.onDefinitionChanged.once()
|
|
5400
5444
|
]);
|
|
5401
5445
|
});
|
|
5402
5446
|
}
|