sequential-workflow-designer 0.21.4 → 0.22.1
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 +6 -5
- package/dist/index.umd.js +76 -79
- package/lib/cjs/index.cjs +76 -79
- package/lib/esm/index.js +76 -79
- package/lib/index.d.ts +18 -14
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -25,7 +25,7 @@ Features:
|
|
|
25
25
|
* [❎ Fullscreen](https://nocode-js.github.io/sequential-workflow-designer/examples/fullscreen.html)
|
|
26
26
|
* [🌅 Image Filter](https://nocode-js.github.io/sequential-workflow-designer/examples/image-filter.html)
|
|
27
27
|
* [🔴 Particles](https://nocode-js.github.io/sequential-workflow-designer/examples/particles.html)
|
|
28
|
-
* [
|
|
28
|
+
* [🌍 Internationalization](https://nocode-js.github.io/sequential-workflow-designer/examples/i18n.html)
|
|
29
29
|
* [⛅ Light Dark](https://nocode-js.github.io/sequential-workflow-designer/examples/light-dark.html)
|
|
30
30
|
* [🤖 Code Generator](https://nocode-js.github.io/sequential-workflow-designer/examples/code-generator.html)
|
|
31
31
|
* [🌻 Rendering Test](https://nocode-js.github.io/sequential-workflow-designer/examples/rendering-test.html)
|
|
@@ -56,6 +56,7 @@ Pro:
|
|
|
56
56
|
* [🔰 Badges](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/badges.html)
|
|
57
57
|
* [🎩 Custom Viewport](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-viewport.html)
|
|
58
58
|
* [🛎 Clickable Placeholder](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/clickable-placeholder.html)
|
|
59
|
+
* [📮 Conditional Placeholders](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/conditional-placeholders.html)
|
|
59
60
|
* [React Pro Demo](https://nocode-js.com/examples/sequential-workflow-designer-pro/react-pro-app/build/index.html)
|
|
60
61
|
* [Angular Pro Demo](https://nocode-js.com/examples/sequential-workflow-designer-pro/angular-pro-app/angular-app/index.html)
|
|
61
62
|
|
|
@@ -102,10 +103,10 @@ Add the below code to your head section in HTML document.
|
|
|
102
103
|
```html
|
|
103
104
|
<head>
|
|
104
105
|
...
|
|
105
|
-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.
|
|
106
|
-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.
|
|
107
|
-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.
|
|
108
|
-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.
|
|
106
|
+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.1/css/designer.css" rel="stylesheet">
|
|
107
|
+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.1/css/designer-light.css" rel="stylesheet">
|
|
108
|
+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.1/css/designer-dark.css" rel="stylesheet">
|
|
109
|
+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.1/dist/index.umd.js"></script>
|
|
109
110
|
```
|
|
110
111
|
|
|
111
112
|
Call the designer by:
|
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
|
-
|
|
188
|
-
.
|
|
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) {
|
|
@@ -469,11 +470,12 @@
|
|
|
469
470
|
class DragStepBehavior {
|
|
470
471
|
static create(designerContext, step, draggedStepComponent) {
|
|
471
472
|
const view = DragStepView.create(step, designerContext.theme, designerContext.componentContext);
|
|
472
|
-
return new DragStepBehavior(view, designerContext.workspaceController, designerContext.state, step, designerContext.stateModifier, draggedStepComponent);
|
|
473
|
+
return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, draggedStepComponent);
|
|
473
474
|
}
|
|
474
|
-
constructor(view, workspaceController, designerState, step, stateModifier, draggedStepComponent) {
|
|
475
|
+
constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, draggedStepComponent) {
|
|
475
476
|
this.view = view;
|
|
476
477
|
this.workspaceController = workspaceController;
|
|
478
|
+
this.placeholderController = placeholderController;
|
|
477
479
|
this.designerState = designerState;
|
|
478
480
|
this.step = step;
|
|
479
481
|
this.stateModifier = stateModifier;
|
|
@@ -483,6 +485,7 @@
|
|
|
483
485
|
let offset = null;
|
|
484
486
|
if (this.draggedStepComponent) {
|
|
485
487
|
this.draggedStepComponent.setIsDisabled(true);
|
|
488
|
+
this.draggedStepComponent.setIsDragging(true);
|
|
486
489
|
const hasSameSize = this.draggedStepComponent.view.width === this.view.component.width &&
|
|
487
490
|
this.draggedStepComponent.view.height === this.view.component.height;
|
|
488
491
|
if (hasSameSize) {
|
|
@@ -497,12 +500,16 @@
|
|
|
497
500
|
}
|
|
498
501
|
this.view.setPosition(position.subtract(offset));
|
|
499
502
|
this.designerState.setIsDragging(true);
|
|
500
|
-
const placeholders = this.
|
|
503
|
+
const { placeholders, components } = this.resolvePlaceholders(this.draggedStepComponent);
|
|
501
504
|
this.state = {
|
|
505
|
+
placeholders,
|
|
506
|
+
components,
|
|
502
507
|
startPosition: position,
|
|
503
508
|
finder: PlaceholderFinder.create(placeholders, this.designerState),
|
|
504
509
|
offset
|
|
505
510
|
};
|
|
511
|
+
placeholders.forEach(placeholder => placeholder.setIsVisible(true));
|
|
512
|
+
components.forEach(component => component.setIsDragging(true));
|
|
506
513
|
}
|
|
507
514
|
onMove(delta) {
|
|
508
515
|
if (this.state) {
|
|
@@ -524,6 +531,8 @@
|
|
|
524
531
|
if (!this.state) {
|
|
525
532
|
throw new Error('Invalid state');
|
|
526
533
|
}
|
|
534
|
+
this.state.placeholders.forEach(placeholder => placeholder.setIsVisible(false));
|
|
535
|
+
this.state.components.forEach(component => component.setIsDragging(false));
|
|
527
536
|
this.state.finder.destroy();
|
|
528
537
|
this.state = undefined;
|
|
529
538
|
this.view.remove();
|
|
@@ -540,6 +549,7 @@
|
|
|
540
549
|
if (!modified) {
|
|
541
550
|
if (this.draggedStepComponent) {
|
|
542
551
|
this.draggedStepComponent.setIsDisabled(false);
|
|
552
|
+
this.draggedStepComponent.setIsDragging(false);
|
|
543
553
|
}
|
|
544
554
|
if (this.currentPlaceholder) {
|
|
545
555
|
this.currentPlaceholder.setIsHover(false);
|
|
@@ -547,6 +557,14 @@
|
|
|
547
557
|
}
|
|
548
558
|
this.currentPlaceholder = undefined;
|
|
549
559
|
}
|
|
560
|
+
resolvePlaceholders(skipComponent) {
|
|
561
|
+
const result = this.workspaceController.resolvePlaceholders(skipComponent);
|
|
562
|
+
if (this.placeholderController.canShow) {
|
|
563
|
+
const canShow = this.placeholderController.canShow;
|
|
564
|
+
result.placeholders = result.placeholders.filter(placeholder => canShow(placeholder.parentSequence, placeholder.index, this.step.componentType, this.step.type));
|
|
565
|
+
}
|
|
566
|
+
return result;
|
|
567
|
+
}
|
|
550
568
|
}
|
|
551
569
|
|
|
552
570
|
class ToolboxApi {
|
|
@@ -842,7 +860,6 @@
|
|
|
842
860
|
this.parentSequence = parentSequence;
|
|
843
861
|
this.hasOutput = hasOutput;
|
|
844
862
|
this.badges = badges;
|
|
845
|
-
this.isDisabled = false;
|
|
846
863
|
}
|
|
847
864
|
findById(stepId) {
|
|
848
865
|
if (this.step.id === stepId) {
|
|
@@ -882,32 +899,24 @@
|
|
|
882
899
|
}
|
|
883
900
|
return null;
|
|
884
901
|
}
|
|
885
|
-
|
|
886
|
-
if (
|
|
902
|
+
resolvePlaceholders(skipComponent, result) {
|
|
903
|
+
if (skipComponent !== this) {
|
|
887
904
|
if (this.view.sequenceComponents) {
|
|
888
|
-
this.view.sequenceComponents.forEach(component => component.
|
|
905
|
+
this.view.sequenceComponents.forEach(component => component.resolvePlaceholders(skipComponent, result));
|
|
889
906
|
}
|
|
890
907
|
if (this.view.placeholders) {
|
|
891
|
-
this.view.placeholders.forEach(ph => result.push(ph));
|
|
908
|
+
this.view.placeholders.forEach(ph => result.placeholders.push(ph));
|
|
892
909
|
}
|
|
910
|
+
result.components.push(this);
|
|
893
911
|
}
|
|
894
912
|
}
|
|
895
913
|
setIsDragging(isDragging) {
|
|
896
|
-
if (!this.isDisabled) {
|
|
897
|
-
if (this.view.sequenceComponents) {
|
|
898
|
-
this.view.sequenceComponents.forEach(component => component.setIsDragging(isDragging));
|
|
899
|
-
}
|
|
900
|
-
if (this.view.placeholders) {
|
|
901
|
-
this.view.placeholders.forEach(ph => ph.setIsVisible(isDragging));
|
|
902
|
-
}
|
|
903
|
-
}
|
|
904
914
|
this.view.setIsDragging(isDragging);
|
|
905
915
|
}
|
|
906
916
|
setIsSelected(isSelected) {
|
|
907
917
|
this.view.setIsSelected(isSelected);
|
|
908
918
|
}
|
|
909
919
|
setIsDisabled(isDisabled) {
|
|
910
|
-
this.isDisabled = isDisabled;
|
|
911
920
|
this.view.setIsDisabled(isDisabled);
|
|
912
921
|
}
|
|
913
922
|
updateBadges(result) {
|
|
@@ -930,7 +939,8 @@
|
|
|
930
939
|
sequence,
|
|
931
940
|
depth: stepContext.depth + 1,
|
|
932
941
|
isInputConnected: true,
|
|
933
|
-
isOutputConnected: stepContext.isOutputConnected
|
|
942
|
+
isOutputConnected: stepContext.isOutputConnected,
|
|
943
|
+
isPreview: stepContext.isPreview
|
|
934
944
|
};
|
|
935
945
|
return componentContext.services.sequenceComponent.create(parentElement, sequenceContext, componentContext);
|
|
936
946
|
},
|
|
@@ -958,10 +968,9 @@
|
|
|
958
968
|
}
|
|
959
969
|
|
|
960
970
|
class ComponentContext {
|
|
961
|
-
static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, i18n, services) {
|
|
971
|
+
static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
|
|
962
972
|
const validator = new DefinitionValidator(configuration.validator, state);
|
|
963
973
|
const iconProvider = new IconProvider(configuration.steps);
|
|
964
|
-
const placeholderController = services.placeholderController.create();
|
|
965
974
|
const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
|
|
966
975
|
return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
|
|
967
976
|
}
|
|
@@ -1364,7 +1373,8 @@
|
|
|
1364
1373
|
depth: sequenceContext.depth,
|
|
1365
1374
|
position: index,
|
|
1366
1375
|
isInputConnected: index === 0 ? sequenceContext.isInputConnected : components[index - 1].hasOutput,
|
|
1367
|
-
isOutputConnected: index === sequence.length - 1 ? sequenceContext.isOutputConnected : true
|
|
1376
|
+
isOutputConnected: index === sequence.length - 1 ? sequenceContext.isOutputConnected : true,
|
|
1377
|
+
isPreview: sequenceContext.isPreview
|
|
1368
1378
|
};
|
|
1369
1379
|
components[index] = componentContext.stepComponentFactory.create(g, stepContext, componentContext);
|
|
1370
1380
|
}
|
|
@@ -1387,7 +1397,7 @@
|
|
|
1387
1397
|
if ((i === 0 && sequenceContext.isInputConnected) || (i > 0 && components[i - 1].hasOutput)) {
|
|
1388
1398
|
JoinView.createStraightJoin(g, new Vector(joinX, offsetY - phHeight), phHeight);
|
|
1389
1399
|
}
|
|
1390
|
-
if (componentContext.placeholderController.canCreate(sequence, i)) {
|
|
1400
|
+
if (!sequenceContext.isPreview && componentContext.placeholderController.canCreate(sequence, i)) {
|
|
1391
1401
|
const ph = componentContext.services.placeholder.createForGap(g, sequence, i);
|
|
1392
1402
|
Dom.translate(ph.view.g, joinX - phWidth / 2, offsetY - phHeight);
|
|
1393
1403
|
placeholders.push(ph);
|
|
@@ -1399,7 +1409,7 @@
|
|
|
1399
1409
|
JoinView.createStraightJoin(g, new Vector(joinX, offsetY - phHeight), phHeight);
|
|
1400
1410
|
}
|
|
1401
1411
|
const newIndex = components.length;
|
|
1402
|
-
if (componentContext.placeholderController.canCreate(sequence, newIndex)) {
|
|
1412
|
+
if (!sequenceContext.isPreview && componentContext.placeholderController.canCreate(sequence, newIndex)) {
|
|
1403
1413
|
const ph = componentContext.services.placeholder.createForGap(g, sequence, newIndex);
|
|
1404
1414
|
Dom.translate(ph.view.g, joinX - phWidth / 2, offsetY - phHeight);
|
|
1405
1415
|
placeholders.push(ph);
|
|
@@ -1414,11 +1424,6 @@
|
|
|
1414
1424
|
this.placeholders = placeholders;
|
|
1415
1425
|
this.components = components;
|
|
1416
1426
|
}
|
|
1417
|
-
setIsDragging(isDragging) {
|
|
1418
|
-
this.placeholders.forEach(placeholder => {
|
|
1419
|
-
placeholder.setIsVisible(isDragging);
|
|
1420
|
-
});
|
|
1421
|
-
}
|
|
1422
1427
|
hasOutput() {
|
|
1423
1428
|
if (this.components.length > 0) {
|
|
1424
1429
|
return this.components[this.components.length - 1].hasOutput;
|
|
@@ -1460,13 +1465,9 @@
|
|
|
1460
1465
|
}
|
|
1461
1466
|
return null;
|
|
1462
1467
|
}
|
|
1463
|
-
|
|
1464
|
-
this.view.placeholders.forEach(placeholder => result.push(placeholder));
|
|
1465
|
-
this.view.components.forEach(c => c.
|
|
1466
|
-
}
|
|
1467
|
-
setIsDragging(isDragging) {
|
|
1468
|
-
this.view.setIsDragging(isDragging);
|
|
1469
|
-
this.view.components.forEach(c => c.setIsDragging(isDragging));
|
|
1468
|
+
resolvePlaceholders(skipComponent, result) {
|
|
1469
|
+
this.view.placeholders.forEach(placeholder => result.placeholders.push(placeholder));
|
|
1470
|
+
this.view.components.forEach(c => c.resolvePlaceholders(skipComponent, result));
|
|
1470
1471
|
}
|
|
1471
1472
|
updateBadges(result) {
|
|
1472
1473
|
for (const component of this.view.components) {
|
|
@@ -2683,8 +2684,8 @@
|
|
|
2683
2684
|
}
|
|
2684
2685
|
return this.controller;
|
|
2685
2686
|
}
|
|
2686
|
-
|
|
2687
|
-
return this.get().
|
|
2687
|
+
resolvePlaceholders(skipComponent) {
|
|
2688
|
+
return this.get().resolvePlaceholders(skipComponent);
|
|
2688
2689
|
}
|
|
2689
2690
|
getComponentByStepId(stepId) {
|
|
2690
2691
|
return this.get().getComponentByStepId(stepId);
|
|
@@ -2733,6 +2734,7 @@
|
|
|
2733
2734
|
const theme = configuration.theme || 'light';
|
|
2734
2735
|
const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
|
|
2735
2736
|
const workspaceController = new WorkspaceControllerWrapper();
|
|
2737
|
+
const placeholderController = services.placeholderController.create();
|
|
2736
2738
|
const behaviorController = new BehaviorController();
|
|
2737
2739
|
const stepExtensionResolver = StepExtensionResolver.create(services);
|
|
2738
2740
|
const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new DefinitionWalker();
|
|
@@ -2744,10 +2746,10 @@
|
|
|
2744
2746
|
historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
|
|
2745
2747
|
}
|
|
2746
2748
|
const preferenceStorage = (_e = configuration.preferenceStorage) !== null && _e !== void 0 ? _e : new MemoryPreferenceStorage();
|
|
2747
|
-
const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, i18n, services);
|
|
2748
|
-
return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController);
|
|
2749
|
+
const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
|
|
2750
|
+
return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
|
|
2749
2751
|
}
|
|
2750
|
-
constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController) {
|
|
2752
|
+
constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
|
|
2751
2753
|
this.theme = theme;
|
|
2752
2754
|
this.state = state;
|
|
2753
2755
|
this.configuration = configuration;
|
|
@@ -2758,6 +2760,7 @@
|
|
|
2758
2760
|
this.stateModifier = stateModifier;
|
|
2759
2761
|
this.layoutController = layoutController;
|
|
2760
2762
|
this.workspaceController = workspaceController;
|
|
2763
|
+
this.placeholderController = placeholderController;
|
|
2761
2764
|
this.behaviorController = behaviorController;
|
|
2762
2765
|
this.customActionController = customActionController;
|
|
2763
2766
|
this.historyController = historyController;
|
|
@@ -3266,8 +3269,7 @@
|
|
|
3266
3269
|
api.viewport.resetViewport();
|
|
3267
3270
|
});
|
|
3268
3271
|
designerContext.setWorkspaceController(workspace);
|
|
3269
|
-
designerContext.state.onViewportChanged.subscribe(
|
|
3270
|
-
designerContext.state.onIsDraggingChanged.subscribe(is => workspace.onIsDraggingChanged(is));
|
|
3272
|
+
designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
|
|
3271
3273
|
race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
|
|
3272
3274
|
workspace.onStateChanged(r[0], r[1], r[2]);
|
|
3273
3275
|
});
|
|
@@ -3309,6 +3311,9 @@
|
|
|
3309
3311
|
const commandOrNull = this.resolveClick(target, position);
|
|
3310
3312
|
this.contextMenuController.tryOpen(position, commandOrNull);
|
|
3311
3313
|
};
|
|
3314
|
+
this.onViewportChanged = (viewport) => {
|
|
3315
|
+
this.view.setPositionAndScale(viewport.position, viewport.scale);
|
|
3316
|
+
};
|
|
3312
3317
|
}
|
|
3313
3318
|
updateRootComponent() {
|
|
3314
3319
|
this.selectedStepComponent = null;
|
|
@@ -3344,9 +3349,12 @@
|
|
|
3344
3349
|
}
|
|
3345
3350
|
this.isValid = Boolean(result[this.validationErrorBadgeIndex]);
|
|
3346
3351
|
}
|
|
3347
|
-
|
|
3348
|
-
const result =
|
|
3349
|
-
|
|
3352
|
+
resolvePlaceholders(skipComponent) {
|
|
3353
|
+
const result = {
|
|
3354
|
+
placeholders: [],
|
|
3355
|
+
components: []
|
|
3356
|
+
};
|
|
3357
|
+
this.getRootComponent().resolvePlaceholders(skipComponent, result);
|
|
3350
3358
|
return result;
|
|
3351
3359
|
}
|
|
3352
3360
|
getComponentByStepId(stepId) {
|
|
@@ -3373,12 +3381,6 @@
|
|
|
3373
3381
|
this.contextMenuController.destroy();
|
|
3374
3382
|
this.view.destroy();
|
|
3375
3383
|
}
|
|
3376
|
-
onIsDraggingChanged(isDragging) {
|
|
3377
|
-
this.getRootComponent().setIsDragging(isDragging);
|
|
3378
|
-
}
|
|
3379
|
-
onViewportChanged(viewport) {
|
|
3380
|
-
this.view.setPositionAndScale(viewport.position, viewport.scale);
|
|
3381
|
-
}
|
|
3382
3384
|
onStateChanged(definitionChanged, selectedStepIdChanged, folderPathChanged) {
|
|
3383
3385
|
if (folderPathChanged) {
|
|
3384
3386
|
this.updateRootComponent();
|
|
@@ -3471,15 +3473,16 @@
|
|
|
3471
3473
|
canvas.style.marginLeft = -SAFE_OFFSET + 'px';
|
|
3472
3474
|
canvas.style.marginTop = -SAFE_OFFSET + 'px';
|
|
3473
3475
|
parent.appendChild(canvas);
|
|
3474
|
-
const
|
|
3476
|
+
const previewStepContext = {
|
|
3475
3477
|
parentSequence: [],
|
|
3476
3478
|
step,
|
|
3477
3479
|
depth: 0,
|
|
3478
3480
|
position: 0,
|
|
3479
3481
|
isInputConnected: true,
|
|
3480
|
-
isOutputConnected: true
|
|
3482
|
+
isOutputConnected: true,
|
|
3483
|
+
isPreview: true
|
|
3481
3484
|
};
|
|
3482
|
-
const stepComponent = componentContext.stepComponentFactory.create(canvas,
|
|
3485
|
+
const stepComponent = componentContext.stepComponentFactory.create(canvas, previewStepContext, componentContext);
|
|
3483
3486
|
Dom.attrs(canvas, {
|
|
3484
3487
|
width: stepComponent.view.width + SAFE_OFFSET * 2,
|
|
3485
3488
|
height: stepComponent.view.height + SAFE_OFFSET * 2
|
|
@@ -4209,7 +4212,8 @@
|
|
|
4209
4212
|
sequence,
|
|
4210
4213
|
depth: 0,
|
|
4211
4214
|
isInputConnected: true,
|
|
4212
|
-
isOutputConnected: true
|
|
4215
|
+
isOutputConnected: true,
|
|
4216
|
+
isPreview: false
|
|
4213
4217
|
}, context);
|
|
4214
4218
|
const view = sequenceComponent.view;
|
|
4215
4219
|
const x = view.joinX - SIZE / 2;
|
|
@@ -4279,18 +4283,11 @@
|
|
|
4279
4283
|
findById(stepId) {
|
|
4280
4284
|
return this.view.component.findById(stepId);
|
|
4281
4285
|
}
|
|
4282
|
-
|
|
4283
|
-
this.view.component.
|
|
4284
|
-
if (this.view.startPlaceholder && this.view.endPlaceholder) {
|
|
4285
|
-
result.push(this.view.startPlaceholder);
|
|
4286
|
-
result.push(this.view.endPlaceholder);
|
|
4287
|
-
}
|
|
4288
|
-
}
|
|
4289
|
-
setIsDragging(isDragging) {
|
|
4290
|
-
this.view.component.setIsDragging(isDragging);
|
|
4286
|
+
resolvePlaceholders(skipComponent, result) {
|
|
4287
|
+
this.view.component.resolvePlaceholders(skipComponent, result);
|
|
4291
4288
|
if (this.view.startPlaceholder && this.view.endPlaceholder) {
|
|
4292
|
-
this.view.startPlaceholder
|
|
4293
|
-
this.view.endPlaceholder
|
|
4289
|
+
result.placeholders.push(this.view.startPlaceholder);
|
|
4290
|
+
result.placeholders.push(this.view.endPlaceholder);
|
|
4294
4291
|
}
|
|
4295
4292
|
}
|
|
4296
4293
|
updateBadges(result) {
|
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
|
-
|
|
186
|
-
.
|
|
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) {
|
|
@@ -467,11 +468,12 @@ class PlaceholderFinder {
|
|
|
467
468
|
class DragStepBehavior {
|
|
468
469
|
static create(designerContext, step, draggedStepComponent) {
|
|
469
470
|
const view = DragStepView.create(step, designerContext.theme, designerContext.componentContext);
|
|
470
|
-
return new DragStepBehavior(view, designerContext.workspaceController, designerContext.state, step, designerContext.stateModifier, draggedStepComponent);
|
|
471
|
+
return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, draggedStepComponent);
|
|
471
472
|
}
|
|
472
|
-
constructor(view, workspaceController, designerState, step, stateModifier, draggedStepComponent) {
|
|
473
|
+
constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, draggedStepComponent) {
|
|
473
474
|
this.view = view;
|
|
474
475
|
this.workspaceController = workspaceController;
|
|
476
|
+
this.placeholderController = placeholderController;
|
|
475
477
|
this.designerState = designerState;
|
|
476
478
|
this.step = step;
|
|
477
479
|
this.stateModifier = stateModifier;
|
|
@@ -481,6 +483,7 @@ class DragStepBehavior {
|
|
|
481
483
|
let offset = null;
|
|
482
484
|
if (this.draggedStepComponent) {
|
|
483
485
|
this.draggedStepComponent.setIsDisabled(true);
|
|
486
|
+
this.draggedStepComponent.setIsDragging(true);
|
|
484
487
|
const hasSameSize = this.draggedStepComponent.view.width === this.view.component.width &&
|
|
485
488
|
this.draggedStepComponent.view.height === this.view.component.height;
|
|
486
489
|
if (hasSameSize) {
|
|
@@ -495,12 +498,16 @@ class DragStepBehavior {
|
|
|
495
498
|
}
|
|
496
499
|
this.view.setPosition(position.subtract(offset));
|
|
497
500
|
this.designerState.setIsDragging(true);
|
|
498
|
-
const placeholders = this.
|
|
501
|
+
const { placeholders, components } = this.resolvePlaceholders(this.draggedStepComponent);
|
|
499
502
|
this.state = {
|
|
503
|
+
placeholders,
|
|
504
|
+
components,
|
|
500
505
|
startPosition: position,
|
|
501
506
|
finder: PlaceholderFinder.create(placeholders, this.designerState),
|
|
502
507
|
offset
|
|
503
508
|
};
|
|
509
|
+
placeholders.forEach(placeholder => placeholder.setIsVisible(true));
|
|
510
|
+
components.forEach(component => component.setIsDragging(true));
|
|
504
511
|
}
|
|
505
512
|
onMove(delta) {
|
|
506
513
|
if (this.state) {
|
|
@@ -522,6 +529,8 @@ class DragStepBehavior {
|
|
|
522
529
|
if (!this.state) {
|
|
523
530
|
throw new Error('Invalid state');
|
|
524
531
|
}
|
|
532
|
+
this.state.placeholders.forEach(placeholder => placeholder.setIsVisible(false));
|
|
533
|
+
this.state.components.forEach(component => component.setIsDragging(false));
|
|
525
534
|
this.state.finder.destroy();
|
|
526
535
|
this.state = undefined;
|
|
527
536
|
this.view.remove();
|
|
@@ -538,6 +547,7 @@ class DragStepBehavior {
|
|
|
538
547
|
if (!modified) {
|
|
539
548
|
if (this.draggedStepComponent) {
|
|
540
549
|
this.draggedStepComponent.setIsDisabled(false);
|
|
550
|
+
this.draggedStepComponent.setIsDragging(false);
|
|
541
551
|
}
|
|
542
552
|
if (this.currentPlaceholder) {
|
|
543
553
|
this.currentPlaceholder.setIsHover(false);
|
|
@@ -545,6 +555,14 @@ class DragStepBehavior {
|
|
|
545
555
|
}
|
|
546
556
|
this.currentPlaceholder = undefined;
|
|
547
557
|
}
|
|
558
|
+
resolvePlaceholders(skipComponent) {
|
|
559
|
+
const result = this.workspaceController.resolvePlaceholders(skipComponent);
|
|
560
|
+
if (this.placeholderController.canShow) {
|
|
561
|
+
const canShow = this.placeholderController.canShow;
|
|
562
|
+
result.placeholders = result.placeholders.filter(placeholder => canShow(placeholder.parentSequence, placeholder.index, this.step.componentType, this.step.type));
|
|
563
|
+
}
|
|
564
|
+
return result;
|
|
565
|
+
}
|
|
548
566
|
}
|
|
549
567
|
|
|
550
568
|
class ToolboxApi {
|
|
@@ -840,7 +858,6 @@ class StepComponent {
|
|
|
840
858
|
this.parentSequence = parentSequence;
|
|
841
859
|
this.hasOutput = hasOutput;
|
|
842
860
|
this.badges = badges;
|
|
843
|
-
this.isDisabled = false;
|
|
844
861
|
}
|
|
845
862
|
findById(stepId) {
|
|
846
863
|
if (this.step.id === stepId) {
|
|
@@ -880,32 +897,24 @@ class StepComponent {
|
|
|
880
897
|
}
|
|
881
898
|
return null;
|
|
882
899
|
}
|
|
883
|
-
|
|
884
|
-
if (
|
|
900
|
+
resolvePlaceholders(skipComponent, result) {
|
|
901
|
+
if (skipComponent !== this) {
|
|
885
902
|
if (this.view.sequenceComponents) {
|
|
886
|
-
this.view.sequenceComponents.forEach(component => component.
|
|
903
|
+
this.view.sequenceComponents.forEach(component => component.resolvePlaceholders(skipComponent, result));
|
|
887
904
|
}
|
|
888
905
|
if (this.view.placeholders) {
|
|
889
|
-
this.view.placeholders.forEach(ph => result.push(ph));
|
|
906
|
+
this.view.placeholders.forEach(ph => result.placeholders.push(ph));
|
|
890
907
|
}
|
|
908
|
+
result.components.push(this);
|
|
891
909
|
}
|
|
892
910
|
}
|
|
893
911
|
setIsDragging(isDragging) {
|
|
894
|
-
if (!this.isDisabled) {
|
|
895
|
-
if (this.view.sequenceComponents) {
|
|
896
|
-
this.view.sequenceComponents.forEach(component => component.setIsDragging(isDragging));
|
|
897
|
-
}
|
|
898
|
-
if (this.view.placeholders) {
|
|
899
|
-
this.view.placeholders.forEach(ph => ph.setIsVisible(isDragging));
|
|
900
|
-
}
|
|
901
|
-
}
|
|
902
912
|
this.view.setIsDragging(isDragging);
|
|
903
913
|
}
|
|
904
914
|
setIsSelected(isSelected) {
|
|
905
915
|
this.view.setIsSelected(isSelected);
|
|
906
916
|
}
|
|
907
917
|
setIsDisabled(isDisabled) {
|
|
908
|
-
this.isDisabled = isDisabled;
|
|
909
918
|
this.view.setIsDisabled(isDisabled);
|
|
910
919
|
}
|
|
911
920
|
updateBadges(result) {
|
|
@@ -928,7 +937,8 @@ class StepComponentViewContextFactory {
|
|
|
928
937
|
sequence,
|
|
929
938
|
depth: stepContext.depth + 1,
|
|
930
939
|
isInputConnected: true,
|
|
931
|
-
isOutputConnected: stepContext.isOutputConnected
|
|
940
|
+
isOutputConnected: stepContext.isOutputConnected,
|
|
941
|
+
isPreview: stepContext.isPreview
|
|
932
942
|
};
|
|
933
943
|
return componentContext.services.sequenceComponent.create(parentElement, sequenceContext, componentContext);
|
|
934
944
|
},
|
|
@@ -956,10 +966,9 @@ class StepComponentFactory {
|
|
|
956
966
|
}
|
|
957
967
|
|
|
958
968
|
class ComponentContext {
|
|
959
|
-
static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, i18n, services) {
|
|
969
|
+
static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
|
|
960
970
|
const validator = new DefinitionValidator(configuration.validator, state);
|
|
961
971
|
const iconProvider = new IconProvider(configuration.steps);
|
|
962
|
-
const placeholderController = services.placeholderController.create();
|
|
963
972
|
const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
|
|
964
973
|
return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
|
|
965
974
|
}
|
|
@@ -1362,7 +1371,8 @@ class DefaultSequenceComponentView {
|
|
|
1362
1371
|
depth: sequenceContext.depth,
|
|
1363
1372
|
position: index,
|
|
1364
1373
|
isInputConnected: index === 0 ? sequenceContext.isInputConnected : components[index - 1].hasOutput,
|
|
1365
|
-
isOutputConnected: index === sequence.length - 1 ? sequenceContext.isOutputConnected : true
|
|
1374
|
+
isOutputConnected: index === sequence.length - 1 ? sequenceContext.isOutputConnected : true,
|
|
1375
|
+
isPreview: sequenceContext.isPreview
|
|
1366
1376
|
};
|
|
1367
1377
|
components[index] = componentContext.stepComponentFactory.create(g, stepContext, componentContext);
|
|
1368
1378
|
}
|
|
@@ -1385,7 +1395,7 @@ class DefaultSequenceComponentView {
|
|
|
1385
1395
|
if ((i === 0 && sequenceContext.isInputConnected) || (i > 0 && components[i - 1].hasOutput)) {
|
|
1386
1396
|
JoinView.createStraightJoin(g, new Vector(joinX, offsetY - phHeight), phHeight);
|
|
1387
1397
|
}
|
|
1388
|
-
if (componentContext.placeholderController.canCreate(sequence, i)) {
|
|
1398
|
+
if (!sequenceContext.isPreview && componentContext.placeholderController.canCreate(sequence, i)) {
|
|
1389
1399
|
const ph = componentContext.services.placeholder.createForGap(g, sequence, i);
|
|
1390
1400
|
Dom.translate(ph.view.g, joinX - phWidth / 2, offsetY - phHeight);
|
|
1391
1401
|
placeholders.push(ph);
|
|
@@ -1397,7 +1407,7 @@ class DefaultSequenceComponentView {
|
|
|
1397
1407
|
JoinView.createStraightJoin(g, new Vector(joinX, offsetY - phHeight), phHeight);
|
|
1398
1408
|
}
|
|
1399
1409
|
const newIndex = components.length;
|
|
1400
|
-
if (componentContext.placeholderController.canCreate(sequence, newIndex)) {
|
|
1410
|
+
if (!sequenceContext.isPreview && componentContext.placeholderController.canCreate(sequence, newIndex)) {
|
|
1401
1411
|
const ph = componentContext.services.placeholder.createForGap(g, sequence, newIndex);
|
|
1402
1412
|
Dom.translate(ph.view.g, joinX - phWidth / 2, offsetY - phHeight);
|
|
1403
1413
|
placeholders.push(ph);
|
|
@@ -1412,11 +1422,6 @@ class DefaultSequenceComponentView {
|
|
|
1412
1422
|
this.placeholders = placeholders;
|
|
1413
1423
|
this.components = components;
|
|
1414
1424
|
}
|
|
1415
|
-
setIsDragging(isDragging) {
|
|
1416
|
-
this.placeholders.forEach(placeholder => {
|
|
1417
|
-
placeholder.setIsVisible(isDragging);
|
|
1418
|
-
});
|
|
1419
|
-
}
|
|
1420
1425
|
hasOutput() {
|
|
1421
1426
|
if (this.components.length > 0) {
|
|
1422
1427
|
return this.components[this.components.length - 1].hasOutput;
|
|
@@ -1458,13 +1463,9 @@ class DefaultSequenceComponent {
|
|
|
1458
1463
|
}
|
|
1459
1464
|
return null;
|
|
1460
1465
|
}
|
|
1461
|
-
|
|
1462
|
-
this.view.placeholders.forEach(placeholder => result.push(placeholder));
|
|
1463
|
-
this.view.components.forEach(c => c.
|
|
1464
|
-
}
|
|
1465
|
-
setIsDragging(isDragging) {
|
|
1466
|
-
this.view.setIsDragging(isDragging);
|
|
1467
|
-
this.view.components.forEach(c => c.setIsDragging(isDragging));
|
|
1466
|
+
resolvePlaceholders(skipComponent, result) {
|
|
1467
|
+
this.view.placeholders.forEach(placeholder => result.placeholders.push(placeholder));
|
|
1468
|
+
this.view.components.forEach(c => c.resolvePlaceholders(skipComponent, result));
|
|
1468
1469
|
}
|
|
1469
1470
|
updateBadges(result) {
|
|
1470
1471
|
for (const component of this.view.components) {
|
|
@@ -2498,8 +2499,8 @@ class WorkspaceControllerWrapper {
|
|
|
2498
2499
|
}
|
|
2499
2500
|
return this.controller;
|
|
2500
2501
|
}
|
|
2501
|
-
|
|
2502
|
-
return this.get().
|
|
2502
|
+
resolvePlaceholders(skipComponent) {
|
|
2503
|
+
return this.get().resolvePlaceholders(skipComponent);
|
|
2503
2504
|
}
|
|
2504
2505
|
getComponentByStepId(stepId) {
|
|
2505
2506
|
return this.get().getComponentByStepId(stepId);
|
|
@@ -2548,6 +2549,7 @@ class DesignerContext {
|
|
|
2548
2549
|
const theme = configuration.theme || 'light';
|
|
2549
2550
|
const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
|
|
2550
2551
|
const workspaceController = new WorkspaceControllerWrapper();
|
|
2552
|
+
const placeholderController = services.placeholderController.create();
|
|
2551
2553
|
const behaviorController = new BehaviorController();
|
|
2552
2554
|
const stepExtensionResolver = StepExtensionResolver.create(services);
|
|
2553
2555
|
const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new sequentialWorkflowModel.DefinitionWalker();
|
|
@@ -2559,10 +2561,10 @@ class DesignerContext {
|
|
|
2559
2561
|
historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
|
|
2560
2562
|
}
|
|
2561
2563
|
const preferenceStorage = (_e = configuration.preferenceStorage) !== null && _e !== void 0 ? _e : new MemoryPreferenceStorage();
|
|
2562
|
-
const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, i18n, services);
|
|
2563
|
-
return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController);
|
|
2564
|
+
const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
|
|
2565
|
+
return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
|
|
2564
2566
|
}
|
|
2565
|
-
constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController) {
|
|
2567
|
+
constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
|
|
2566
2568
|
this.theme = theme;
|
|
2567
2569
|
this.state = state;
|
|
2568
2570
|
this.configuration = configuration;
|
|
@@ -2573,6 +2575,7 @@ class DesignerContext {
|
|
|
2573
2575
|
this.stateModifier = stateModifier;
|
|
2574
2576
|
this.layoutController = layoutController;
|
|
2575
2577
|
this.workspaceController = workspaceController;
|
|
2578
|
+
this.placeholderController = placeholderController;
|
|
2576
2579
|
this.behaviorController = behaviorController;
|
|
2577
2580
|
this.customActionController = customActionController;
|
|
2578
2581
|
this.historyController = historyController;
|
|
@@ -3081,8 +3084,7 @@ class Workspace {
|
|
|
3081
3084
|
api.viewport.resetViewport();
|
|
3082
3085
|
});
|
|
3083
3086
|
designerContext.setWorkspaceController(workspace);
|
|
3084
|
-
designerContext.state.onViewportChanged.subscribe(
|
|
3085
|
-
designerContext.state.onIsDraggingChanged.subscribe(is => workspace.onIsDraggingChanged(is));
|
|
3087
|
+
designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
|
|
3086
3088
|
race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
|
|
3087
3089
|
workspace.onStateChanged(r[0], r[1], r[2]);
|
|
3088
3090
|
});
|
|
@@ -3124,6 +3126,9 @@ class Workspace {
|
|
|
3124
3126
|
const commandOrNull = this.resolveClick(target, position);
|
|
3125
3127
|
this.contextMenuController.tryOpen(position, commandOrNull);
|
|
3126
3128
|
};
|
|
3129
|
+
this.onViewportChanged = (viewport) => {
|
|
3130
|
+
this.view.setPositionAndScale(viewport.position, viewport.scale);
|
|
3131
|
+
};
|
|
3127
3132
|
}
|
|
3128
3133
|
updateRootComponent() {
|
|
3129
3134
|
this.selectedStepComponent = null;
|
|
@@ -3159,9 +3164,12 @@ class Workspace {
|
|
|
3159
3164
|
}
|
|
3160
3165
|
this.isValid = Boolean(result[this.validationErrorBadgeIndex]);
|
|
3161
3166
|
}
|
|
3162
|
-
|
|
3163
|
-
const result =
|
|
3164
|
-
|
|
3167
|
+
resolvePlaceholders(skipComponent) {
|
|
3168
|
+
const result = {
|
|
3169
|
+
placeholders: [],
|
|
3170
|
+
components: []
|
|
3171
|
+
};
|
|
3172
|
+
this.getRootComponent().resolvePlaceholders(skipComponent, result);
|
|
3165
3173
|
return result;
|
|
3166
3174
|
}
|
|
3167
3175
|
getComponentByStepId(stepId) {
|
|
@@ -3188,12 +3196,6 @@ class Workspace {
|
|
|
3188
3196
|
this.contextMenuController.destroy();
|
|
3189
3197
|
this.view.destroy();
|
|
3190
3198
|
}
|
|
3191
|
-
onIsDraggingChanged(isDragging) {
|
|
3192
|
-
this.getRootComponent().setIsDragging(isDragging);
|
|
3193
|
-
}
|
|
3194
|
-
onViewportChanged(viewport) {
|
|
3195
|
-
this.view.setPositionAndScale(viewport.position, viewport.scale);
|
|
3196
|
-
}
|
|
3197
3199
|
onStateChanged(definitionChanged, selectedStepIdChanged, folderPathChanged) {
|
|
3198
3200
|
if (folderPathChanged) {
|
|
3199
3201
|
this.updateRootComponent();
|
|
@@ -3286,15 +3288,16 @@ class DefaultDraggedComponent {
|
|
|
3286
3288
|
canvas.style.marginLeft = -SAFE_OFFSET + 'px';
|
|
3287
3289
|
canvas.style.marginTop = -SAFE_OFFSET + 'px';
|
|
3288
3290
|
parent.appendChild(canvas);
|
|
3289
|
-
const
|
|
3291
|
+
const previewStepContext = {
|
|
3290
3292
|
parentSequence: [],
|
|
3291
3293
|
step,
|
|
3292
3294
|
depth: 0,
|
|
3293
3295
|
position: 0,
|
|
3294
3296
|
isInputConnected: true,
|
|
3295
|
-
isOutputConnected: true
|
|
3297
|
+
isOutputConnected: true,
|
|
3298
|
+
isPreview: true
|
|
3296
3299
|
};
|
|
3297
|
-
const stepComponent = componentContext.stepComponentFactory.create(canvas,
|
|
3300
|
+
const stepComponent = componentContext.stepComponentFactory.create(canvas, previewStepContext, componentContext);
|
|
3298
3301
|
Dom.attrs(canvas, {
|
|
3299
3302
|
width: stepComponent.view.width + SAFE_OFFSET * 2,
|
|
3300
3303
|
height: stepComponent.view.height + SAFE_OFFSET * 2
|
|
@@ -4024,7 +4027,8 @@ class StartStopRootComponentView {
|
|
|
4024
4027
|
sequence,
|
|
4025
4028
|
depth: 0,
|
|
4026
4029
|
isInputConnected: true,
|
|
4027
|
-
isOutputConnected: true
|
|
4030
|
+
isOutputConnected: true,
|
|
4031
|
+
isPreview: false
|
|
4028
4032
|
}, context);
|
|
4029
4033
|
const view = sequenceComponent.view;
|
|
4030
4034
|
const x = view.joinX - SIZE / 2;
|
|
@@ -4094,18 +4098,11 @@ class StartStopRootComponent {
|
|
|
4094
4098
|
findById(stepId) {
|
|
4095
4099
|
return this.view.component.findById(stepId);
|
|
4096
4100
|
}
|
|
4097
|
-
|
|
4098
|
-
this.view.component.
|
|
4099
|
-
if (this.view.startPlaceholder && this.view.endPlaceholder) {
|
|
4100
|
-
result.push(this.view.startPlaceholder);
|
|
4101
|
-
result.push(this.view.endPlaceholder);
|
|
4102
|
-
}
|
|
4103
|
-
}
|
|
4104
|
-
setIsDragging(isDragging) {
|
|
4105
|
-
this.view.component.setIsDragging(isDragging);
|
|
4101
|
+
resolvePlaceholders(skipComponent, result) {
|
|
4102
|
+
this.view.component.resolvePlaceholders(skipComponent, result);
|
|
4106
4103
|
if (this.view.startPlaceholder && this.view.endPlaceholder) {
|
|
4107
|
-
this.view.startPlaceholder
|
|
4108
|
-
this.view.endPlaceholder
|
|
4104
|
+
result.placeholders.push(this.view.startPlaceholder);
|
|
4105
|
+
result.placeholders.push(this.view.endPlaceholder);
|
|
4109
4106
|
}
|
|
4110
4107
|
}
|
|
4111
4108
|
updateBadges(result) {
|
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
|
-
|
|
185
|
-
.
|
|
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) {
|
|
@@ -466,11 +467,12 @@ class PlaceholderFinder {
|
|
|
466
467
|
class DragStepBehavior {
|
|
467
468
|
static create(designerContext, step, draggedStepComponent) {
|
|
468
469
|
const view = DragStepView.create(step, designerContext.theme, designerContext.componentContext);
|
|
469
|
-
return new DragStepBehavior(view, designerContext.workspaceController, designerContext.state, step, designerContext.stateModifier, draggedStepComponent);
|
|
470
|
+
return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, draggedStepComponent);
|
|
470
471
|
}
|
|
471
|
-
constructor(view, workspaceController, designerState, step, stateModifier, draggedStepComponent) {
|
|
472
|
+
constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, draggedStepComponent) {
|
|
472
473
|
this.view = view;
|
|
473
474
|
this.workspaceController = workspaceController;
|
|
475
|
+
this.placeholderController = placeholderController;
|
|
474
476
|
this.designerState = designerState;
|
|
475
477
|
this.step = step;
|
|
476
478
|
this.stateModifier = stateModifier;
|
|
@@ -480,6 +482,7 @@ class DragStepBehavior {
|
|
|
480
482
|
let offset = null;
|
|
481
483
|
if (this.draggedStepComponent) {
|
|
482
484
|
this.draggedStepComponent.setIsDisabled(true);
|
|
485
|
+
this.draggedStepComponent.setIsDragging(true);
|
|
483
486
|
const hasSameSize = this.draggedStepComponent.view.width === this.view.component.width &&
|
|
484
487
|
this.draggedStepComponent.view.height === this.view.component.height;
|
|
485
488
|
if (hasSameSize) {
|
|
@@ -494,12 +497,16 @@ class DragStepBehavior {
|
|
|
494
497
|
}
|
|
495
498
|
this.view.setPosition(position.subtract(offset));
|
|
496
499
|
this.designerState.setIsDragging(true);
|
|
497
|
-
const placeholders = this.
|
|
500
|
+
const { placeholders, components } = this.resolvePlaceholders(this.draggedStepComponent);
|
|
498
501
|
this.state = {
|
|
502
|
+
placeholders,
|
|
503
|
+
components,
|
|
499
504
|
startPosition: position,
|
|
500
505
|
finder: PlaceholderFinder.create(placeholders, this.designerState),
|
|
501
506
|
offset
|
|
502
507
|
};
|
|
508
|
+
placeholders.forEach(placeholder => placeholder.setIsVisible(true));
|
|
509
|
+
components.forEach(component => component.setIsDragging(true));
|
|
503
510
|
}
|
|
504
511
|
onMove(delta) {
|
|
505
512
|
if (this.state) {
|
|
@@ -521,6 +528,8 @@ class DragStepBehavior {
|
|
|
521
528
|
if (!this.state) {
|
|
522
529
|
throw new Error('Invalid state');
|
|
523
530
|
}
|
|
531
|
+
this.state.placeholders.forEach(placeholder => placeholder.setIsVisible(false));
|
|
532
|
+
this.state.components.forEach(component => component.setIsDragging(false));
|
|
524
533
|
this.state.finder.destroy();
|
|
525
534
|
this.state = undefined;
|
|
526
535
|
this.view.remove();
|
|
@@ -537,6 +546,7 @@ class DragStepBehavior {
|
|
|
537
546
|
if (!modified) {
|
|
538
547
|
if (this.draggedStepComponent) {
|
|
539
548
|
this.draggedStepComponent.setIsDisabled(false);
|
|
549
|
+
this.draggedStepComponent.setIsDragging(false);
|
|
540
550
|
}
|
|
541
551
|
if (this.currentPlaceholder) {
|
|
542
552
|
this.currentPlaceholder.setIsHover(false);
|
|
@@ -544,6 +554,14 @@ class DragStepBehavior {
|
|
|
544
554
|
}
|
|
545
555
|
this.currentPlaceholder = undefined;
|
|
546
556
|
}
|
|
557
|
+
resolvePlaceholders(skipComponent) {
|
|
558
|
+
const result = this.workspaceController.resolvePlaceholders(skipComponent);
|
|
559
|
+
if (this.placeholderController.canShow) {
|
|
560
|
+
const canShow = this.placeholderController.canShow;
|
|
561
|
+
result.placeholders = result.placeholders.filter(placeholder => canShow(placeholder.parentSequence, placeholder.index, this.step.componentType, this.step.type));
|
|
562
|
+
}
|
|
563
|
+
return result;
|
|
564
|
+
}
|
|
547
565
|
}
|
|
548
566
|
|
|
549
567
|
class ToolboxApi {
|
|
@@ -839,7 +857,6 @@ class StepComponent {
|
|
|
839
857
|
this.parentSequence = parentSequence;
|
|
840
858
|
this.hasOutput = hasOutput;
|
|
841
859
|
this.badges = badges;
|
|
842
|
-
this.isDisabled = false;
|
|
843
860
|
}
|
|
844
861
|
findById(stepId) {
|
|
845
862
|
if (this.step.id === stepId) {
|
|
@@ -879,32 +896,24 @@ class StepComponent {
|
|
|
879
896
|
}
|
|
880
897
|
return null;
|
|
881
898
|
}
|
|
882
|
-
|
|
883
|
-
if (
|
|
899
|
+
resolvePlaceholders(skipComponent, result) {
|
|
900
|
+
if (skipComponent !== this) {
|
|
884
901
|
if (this.view.sequenceComponents) {
|
|
885
|
-
this.view.sequenceComponents.forEach(component => component.
|
|
902
|
+
this.view.sequenceComponents.forEach(component => component.resolvePlaceholders(skipComponent, result));
|
|
886
903
|
}
|
|
887
904
|
if (this.view.placeholders) {
|
|
888
|
-
this.view.placeholders.forEach(ph => result.push(ph));
|
|
905
|
+
this.view.placeholders.forEach(ph => result.placeholders.push(ph));
|
|
889
906
|
}
|
|
907
|
+
result.components.push(this);
|
|
890
908
|
}
|
|
891
909
|
}
|
|
892
910
|
setIsDragging(isDragging) {
|
|
893
|
-
if (!this.isDisabled) {
|
|
894
|
-
if (this.view.sequenceComponents) {
|
|
895
|
-
this.view.sequenceComponents.forEach(component => component.setIsDragging(isDragging));
|
|
896
|
-
}
|
|
897
|
-
if (this.view.placeholders) {
|
|
898
|
-
this.view.placeholders.forEach(ph => ph.setIsVisible(isDragging));
|
|
899
|
-
}
|
|
900
|
-
}
|
|
901
911
|
this.view.setIsDragging(isDragging);
|
|
902
912
|
}
|
|
903
913
|
setIsSelected(isSelected) {
|
|
904
914
|
this.view.setIsSelected(isSelected);
|
|
905
915
|
}
|
|
906
916
|
setIsDisabled(isDisabled) {
|
|
907
|
-
this.isDisabled = isDisabled;
|
|
908
917
|
this.view.setIsDisabled(isDisabled);
|
|
909
918
|
}
|
|
910
919
|
updateBadges(result) {
|
|
@@ -927,7 +936,8 @@ class StepComponentViewContextFactory {
|
|
|
927
936
|
sequence,
|
|
928
937
|
depth: stepContext.depth + 1,
|
|
929
938
|
isInputConnected: true,
|
|
930
|
-
isOutputConnected: stepContext.isOutputConnected
|
|
939
|
+
isOutputConnected: stepContext.isOutputConnected,
|
|
940
|
+
isPreview: stepContext.isPreview
|
|
931
941
|
};
|
|
932
942
|
return componentContext.services.sequenceComponent.create(parentElement, sequenceContext, componentContext);
|
|
933
943
|
},
|
|
@@ -955,10 +965,9 @@ class StepComponentFactory {
|
|
|
955
965
|
}
|
|
956
966
|
|
|
957
967
|
class ComponentContext {
|
|
958
|
-
static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, i18n, services) {
|
|
968
|
+
static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
|
|
959
969
|
const validator = new DefinitionValidator(configuration.validator, state);
|
|
960
970
|
const iconProvider = new IconProvider(configuration.steps);
|
|
961
|
-
const placeholderController = services.placeholderController.create();
|
|
962
971
|
const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
|
|
963
972
|
return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
|
|
964
973
|
}
|
|
@@ -1361,7 +1370,8 @@ class DefaultSequenceComponentView {
|
|
|
1361
1370
|
depth: sequenceContext.depth,
|
|
1362
1371
|
position: index,
|
|
1363
1372
|
isInputConnected: index === 0 ? sequenceContext.isInputConnected : components[index - 1].hasOutput,
|
|
1364
|
-
isOutputConnected: index === sequence.length - 1 ? sequenceContext.isOutputConnected : true
|
|
1373
|
+
isOutputConnected: index === sequence.length - 1 ? sequenceContext.isOutputConnected : true,
|
|
1374
|
+
isPreview: sequenceContext.isPreview
|
|
1365
1375
|
};
|
|
1366
1376
|
components[index] = componentContext.stepComponentFactory.create(g, stepContext, componentContext);
|
|
1367
1377
|
}
|
|
@@ -1384,7 +1394,7 @@ class DefaultSequenceComponentView {
|
|
|
1384
1394
|
if ((i === 0 && sequenceContext.isInputConnected) || (i > 0 && components[i - 1].hasOutput)) {
|
|
1385
1395
|
JoinView.createStraightJoin(g, new Vector(joinX, offsetY - phHeight), phHeight);
|
|
1386
1396
|
}
|
|
1387
|
-
if (componentContext.placeholderController.canCreate(sequence, i)) {
|
|
1397
|
+
if (!sequenceContext.isPreview && componentContext.placeholderController.canCreate(sequence, i)) {
|
|
1388
1398
|
const ph = componentContext.services.placeholder.createForGap(g, sequence, i);
|
|
1389
1399
|
Dom.translate(ph.view.g, joinX - phWidth / 2, offsetY - phHeight);
|
|
1390
1400
|
placeholders.push(ph);
|
|
@@ -1396,7 +1406,7 @@ class DefaultSequenceComponentView {
|
|
|
1396
1406
|
JoinView.createStraightJoin(g, new Vector(joinX, offsetY - phHeight), phHeight);
|
|
1397
1407
|
}
|
|
1398
1408
|
const newIndex = components.length;
|
|
1399
|
-
if (componentContext.placeholderController.canCreate(sequence, newIndex)) {
|
|
1409
|
+
if (!sequenceContext.isPreview && componentContext.placeholderController.canCreate(sequence, newIndex)) {
|
|
1400
1410
|
const ph = componentContext.services.placeholder.createForGap(g, sequence, newIndex);
|
|
1401
1411
|
Dom.translate(ph.view.g, joinX - phWidth / 2, offsetY - phHeight);
|
|
1402
1412
|
placeholders.push(ph);
|
|
@@ -1411,11 +1421,6 @@ class DefaultSequenceComponentView {
|
|
|
1411
1421
|
this.placeholders = placeholders;
|
|
1412
1422
|
this.components = components;
|
|
1413
1423
|
}
|
|
1414
|
-
setIsDragging(isDragging) {
|
|
1415
|
-
this.placeholders.forEach(placeholder => {
|
|
1416
|
-
placeholder.setIsVisible(isDragging);
|
|
1417
|
-
});
|
|
1418
|
-
}
|
|
1419
1424
|
hasOutput() {
|
|
1420
1425
|
if (this.components.length > 0) {
|
|
1421
1426
|
return this.components[this.components.length - 1].hasOutput;
|
|
@@ -1457,13 +1462,9 @@ class DefaultSequenceComponent {
|
|
|
1457
1462
|
}
|
|
1458
1463
|
return null;
|
|
1459
1464
|
}
|
|
1460
|
-
|
|
1461
|
-
this.view.placeholders.forEach(placeholder => result.push(placeholder));
|
|
1462
|
-
this.view.components.forEach(c => c.
|
|
1463
|
-
}
|
|
1464
|
-
setIsDragging(isDragging) {
|
|
1465
|
-
this.view.setIsDragging(isDragging);
|
|
1466
|
-
this.view.components.forEach(c => c.setIsDragging(isDragging));
|
|
1465
|
+
resolvePlaceholders(skipComponent, result) {
|
|
1466
|
+
this.view.placeholders.forEach(placeholder => result.placeholders.push(placeholder));
|
|
1467
|
+
this.view.components.forEach(c => c.resolvePlaceholders(skipComponent, result));
|
|
1467
1468
|
}
|
|
1468
1469
|
updateBadges(result) {
|
|
1469
1470
|
for (const component of this.view.components) {
|
|
@@ -2497,8 +2498,8 @@ class WorkspaceControllerWrapper {
|
|
|
2497
2498
|
}
|
|
2498
2499
|
return this.controller;
|
|
2499
2500
|
}
|
|
2500
|
-
|
|
2501
|
-
return this.get().
|
|
2501
|
+
resolvePlaceholders(skipComponent) {
|
|
2502
|
+
return this.get().resolvePlaceholders(skipComponent);
|
|
2502
2503
|
}
|
|
2503
2504
|
getComponentByStepId(stepId) {
|
|
2504
2505
|
return this.get().getComponentByStepId(stepId);
|
|
@@ -2547,6 +2548,7 @@ class DesignerContext {
|
|
|
2547
2548
|
const theme = configuration.theme || 'light';
|
|
2548
2549
|
const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
|
|
2549
2550
|
const workspaceController = new WorkspaceControllerWrapper();
|
|
2551
|
+
const placeholderController = services.placeholderController.create();
|
|
2550
2552
|
const behaviorController = new BehaviorController();
|
|
2551
2553
|
const stepExtensionResolver = StepExtensionResolver.create(services);
|
|
2552
2554
|
const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new DefinitionWalker();
|
|
@@ -2558,10 +2560,10 @@ class DesignerContext {
|
|
|
2558
2560
|
historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
|
|
2559
2561
|
}
|
|
2560
2562
|
const preferenceStorage = (_e = configuration.preferenceStorage) !== null && _e !== void 0 ? _e : new MemoryPreferenceStorage();
|
|
2561
|
-
const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, i18n, services);
|
|
2562
|
-
return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController);
|
|
2563
|
+
const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
|
|
2564
|
+
return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
|
|
2563
2565
|
}
|
|
2564
|
-
constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController) {
|
|
2566
|
+
constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
|
|
2565
2567
|
this.theme = theme;
|
|
2566
2568
|
this.state = state;
|
|
2567
2569
|
this.configuration = configuration;
|
|
@@ -2572,6 +2574,7 @@ class DesignerContext {
|
|
|
2572
2574
|
this.stateModifier = stateModifier;
|
|
2573
2575
|
this.layoutController = layoutController;
|
|
2574
2576
|
this.workspaceController = workspaceController;
|
|
2577
|
+
this.placeholderController = placeholderController;
|
|
2575
2578
|
this.behaviorController = behaviorController;
|
|
2576
2579
|
this.customActionController = customActionController;
|
|
2577
2580
|
this.historyController = historyController;
|
|
@@ -3080,8 +3083,7 @@ class Workspace {
|
|
|
3080
3083
|
api.viewport.resetViewport();
|
|
3081
3084
|
});
|
|
3082
3085
|
designerContext.setWorkspaceController(workspace);
|
|
3083
|
-
designerContext.state.onViewportChanged.subscribe(
|
|
3084
|
-
designerContext.state.onIsDraggingChanged.subscribe(is => workspace.onIsDraggingChanged(is));
|
|
3086
|
+
designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
|
|
3085
3087
|
race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
|
|
3086
3088
|
workspace.onStateChanged(r[0], r[1], r[2]);
|
|
3087
3089
|
});
|
|
@@ -3123,6 +3125,9 @@ class Workspace {
|
|
|
3123
3125
|
const commandOrNull = this.resolveClick(target, position);
|
|
3124
3126
|
this.contextMenuController.tryOpen(position, commandOrNull);
|
|
3125
3127
|
};
|
|
3128
|
+
this.onViewportChanged = (viewport) => {
|
|
3129
|
+
this.view.setPositionAndScale(viewport.position, viewport.scale);
|
|
3130
|
+
};
|
|
3126
3131
|
}
|
|
3127
3132
|
updateRootComponent() {
|
|
3128
3133
|
this.selectedStepComponent = null;
|
|
@@ -3158,9 +3163,12 @@ class Workspace {
|
|
|
3158
3163
|
}
|
|
3159
3164
|
this.isValid = Boolean(result[this.validationErrorBadgeIndex]);
|
|
3160
3165
|
}
|
|
3161
|
-
|
|
3162
|
-
const result =
|
|
3163
|
-
|
|
3166
|
+
resolvePlaceholders(skipComponent) {
|
|
3167
|
+
const result = {
|
|
3168
|
+
placeholders: [],
|
|
3169
|
+
components: []
|
|
3170
|
+
};
|
|
3171
|
+
this.getRootComponent().resolvePlaceholders(skipComponent, result);
|
|
3164
3172
|
return result;
|
|
3165
3173
|
}
|
|
3166
3174
|
getComponentByStepId(stepId) {
|
|
@@ -3187,12 +3195,6 @@ class Workspace {
|
|
|
3187
3195
|
this.contextMenuController.destroy();
|
|
3188
3196
|
this.view.destroy();
|
|
3189
3197
|
}
|
|
3190
|
-
onIsDraggingChanged(isDragging) {
|
|
3191
|
-
this.getRootComponent().setIsDragging(isDragging);
|
|
3192
|
-
}
|
|
3193
|
-
onViewportChanged(viewport) {
|
|
3194
|
-
this.view.setPositionAndScale(viewport.position, viewport.scale);
|
|
3195
|
-
}
|
|
3196
3198
|
onStateChanged(definitionChanged, selectedStepIdChanged, folderPathChanged) {
|
|
3197
3199
|
if (folderPathChanged) {
|
|
3198
3200
|
this.updateRootComponent();
|
|
@@ -3285,15 +3287,16 @@ class DefaultDraggedComponent {
|
|
|
3285
3287
|
canvas.style.marginLeft = -SAFE_OFFSET + 'px';
|
|
3286
3288
|
canvas.style.marginTop = -SAFE_OFFSET + 'px';
|
|
3287
3289
|
parent.appendChild(canvas);
|
|
3288
|
-
const
|
|
3290
|
+
const previewStepContext = {
|
|
3289
3291
|
parentSequence: [],
|
|
3290
3292
|
step,
|
|
3291
3293
|
depth: 0,
|
|
3292
3294
|
position: 0,
|
|
3293
3295
|
isInputConnected: true,
|
|
3294
|
-
isOutputConnected: true
|
|
3296
|
+
isOutputConnected: true,
|
|
3297
|
+
isPreview: true
|
|
3295
3298
|
};
|
|
3296
|
-
const stepComponent = componentContext.stepComponentFactory.create(canvas,
|
|
3299
|
+
const stepComponent = componentContext.stepComponentFactory.create(canvas, previewStepContext, componentContext);
|
|
3297
3300
|
Dom.attrs(canvas, {
|
|
3298
3301
|
width: stepComponent.view.width + SAFE_OFFSET * 2,
|
|
3299
3302
|
height: stepComponent.view.height + SAFE_OFFSET * 2
|
|
@@ -4023,7 +4026,8 @@ class StartStopRootComponentView {
|
|
|
4023
4026
|
sequence,
|
|
4024
4027
|
depth: 0,
|
|
4025
4028
|
isInputConnected: true,
|
|
4026
|
-
isOutputConnected: true
|
|
4029
|
+
isOutputConnected: true,
|
|
4030
|
+
isPreview: false
|
|
4027
4031
|
}, context);
|
|
4028
4032
|
const view = sequenceComponent.view;
|
|
4029
4033
|
const x = view.joinX - SIZE / 2;
|
|
@@ -4093,18 +4097,11 @@ class StartStopRootComponent {
|
|
|
4093
4097
|
findById(stepId) {
|
|
4094
4098
|
return this.view.component.findById(stepId);
|
|
4095
4099
|
}
|
|
4096
|
-
|
|
4097
|
-
this.view.component.
|
|
4098
|
-
if (this.view.startPlaceholder && this.view.endPlaceholder) {
|
|
4099
|
-
result.push(this.view.startPlaceholder);
|
|
4100
|
-
result.push(this.view.endPlaceholder);
|
|
4101
|
-
}
|
|
4102
|
-
}
|
|
4103
|
-
setIsDragging(isDragging) {
|
|
4104
|
-
this.view.component.setIsDragging(isDragging);
|
|
4100
|
+
resolvePlaceholders(skipComponent, result) {
|
|
4101
|
+
this.view.component.resolvePlaceholders(skipComponent, result);
|
|
4105
4102
|
if (this.view.startPlaceholder && this.view.endPlaceholder) {
|
|
4106
|
-
this.view.startPlaceholder
|
|
4107
|
-
this.view.endPlaceholder
|
|
4103
|
+
result.placeholders.push(this.view.startPlaceholder);
|
|
4104
|
+
result.placeholders.push(this.view.endPlaceholder);
|
|
4108
4105
|
}
|
|
4109
4106
|
}
|
|
4110
4107
|
updateBadges(result) {
|
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;
|
|
@@ -154,10 +154,13 @@ interface Component {
|
|
|
154
154
|
view: ComponentView;
|
|
155
155
|
findById(stepId: string): StepComponent | null;
|
|
156
156
|
resolveClick(click: ClickDetails): ClickCommand | null;
|
|
157
|
-
|
|
158
|
-
setIsDragging(isDragging: boolean): void;
|
|
157
|
+
resolvePlaceholders(skipComponent: StepComponent | undefined, result: FoundPlaceholders): void;
|
|
159
158
|
updateBadges(result: BadgesResult): void;
|
|
160
159
|
}
|
|
160
|
+
interface FoundPlaceholders {
|
|
161
|
+
placeholders: Placeholder[];
|
|
162
|
+
components: StepComponent[];
|
|
163
|
+
}
|
|
161
164
|
interface ComponentView {
|
|
162
165
|
g: SVGGElement;
|
|
163
166
|
width: number;
|
|
@@ -251,11 +254,10 @@ declare class StepComponent implements Component {
|
|
|
251
254
|
readonly hasOutput: boolean;
|
|
252
255
|
private readonly badges;
|
|
253
256
|
static create(view: StepComponentView, stepContext: StepContext, componentContext: ComponentContext): StepComponent;
|
|
254
|
-
private isDisabled;
|
|
255
257
|
private constructor();
|
|
256
258
|
findById(stepId: string): StepComponent | null;
|
|
257
259
|
resolveClick(click: ClickDetails): ClickCommand | null;
|
|
258
|
-
|
|
260
|
+
resolvePlaceholders(skipComponent: StepComponent | undefined, result: FoundPlaceholders): void;
|
|
259
261
|
setIsDragging(isDragging: boolean): void;
|
|
260
262
|
setIsSelected(isSelected: boolean): void;
|
|
261
263
|
setIsDisabled(isDisabled: boolean): void;
|
|
@@ -277,7 +279,7 @@ declare class ComponentContext {
|
|
|
277
279
|
readonly services: Services;
|
|
278
280
|
readonly preferenceStorage: PreferenceStorage;
|
|
279
281
|
readonly i18n: I18n;
|
|
280
|
-
static create(configuration: DesignerConfiguration, state: DesignerState, stepExtensionResolver: StepExtensionResolver, definitionWalker: DefinitionWalker, preferenceStorage: PreferenceStorage, i18n: I18n, services: Services): ComponentContext;
|
|
282
|
+
static create(configuration: DesignerConfiguration, state: DesignerState, stepExtensionResolver: StepExtensionResolver, definitionWalker: DefinitionWalker, preferenceStorage: PreferenceStorage, placeholderController: PlaceholderController, i18n: I18n, services: Services): ComponentContext;
|
|
281
283
|
private constructor();
|
|
282
284
|
}
|
|
283
285
|
|
|
@@ -316,7 +318,7 @@ declare class LayoutController {
|
|
|
316
318
|
}
|
|
317
319
|
|
|
318
320
|
interface WorkspaceController {
|
|
319
|
-
|
|
321
|
+
resolvePlaceholders(skipComponent: StepComponent | undefined): FoundPlaceholders;
|
|
320
322
|
getComponentByStepId(stepId: string): StepComponent;
|
|
321
323
|
getCanvasPosition(): Vector;
|
|
322
324
|
getCanvasSize(): Vector;
|
|
@@ -329,7 +331,7 @@ declare class WorkspaceControllerWrapper implements WorkspaceController {
|
|
|
329
331
|
private controller?;
|
|
330
332
|
set(controller: WorkspaceController): void;
|
|
331
333
|
private get;
|
|
332
|
-
|
|
334
|
+
resolvePlaceholders(skipComponent: StepComponent | undefined): FoundPlaceholders;
|
|
333
335
|
getComponentByStepId(stepId: string): StepComponent;
|
|
334
336
|
getCanvasPosition(): Vector;
|
|
335
337
|
getCanvasSize(): Vector;
|
|
@@ -350,11 +352,12 @@ declare class DesignerContext {
|
|
|
350
352
|
readonly stateModifier: StateModifier;
|
|
351
353
|
readonly layoutController: LayoutController;
|
|
352
354
|
readonly workspaceController: WorkspaceControllerWrapper;
|
|
355
|
+
readonly placeholderController: PlaceholderController;
|
|
353
356
|
readonly behaviorController: BehaviorController;
|
|
354
357
|
readonly customActionController: CustomActionController;
|
|
355
358
|
readonly historyController: HistoryController | undefined;
|
|
356
359
|
static create(parent: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration, services: Services): DesignerContext;
|
|
357
|
-
constructor(theme: string, state: DesignerState, configuration: DesignerConfiguration, services: Services, componentContext: ComponentContext, definitionWalker: DefinitionWalker, i18n: I18n, stateModifier: StateModifier, layoutController: LayoutController, workspaceController: WorkspaceControllerWrapper, behaviorController: BehaviorController, customActionController: CustomActionController, historyController: HistoryController | undefined);
|
|
360
|
+
constructor(theme: string, state: DesignerState, configuration: DesignerConfiguration, services: Services, componentContext: ComponentContext, definitionWalker: DefinitionWalker, i18n: I18n, stateModifier: StateModifier, layoutController: LayoutController, workspaceController: WorkspaceControllerWrapper, placeholderController: PlaceholderController, behaviorController: BehaviorController, customActionController: CustomActionController, historyController: HistoryController | undefined);
|
|
358
361
|
setWorkspaceController(controller: WorkspaceController): void;
|
|
359
362
|
}
|
|
360
363
|
|
|
@@ -402,7 +405,7 @@ declare class PathBarApi {
|
|
|
402
405
|
private readonly state;
|
|
403
406
|
private readonly definitionWalker;
|
|
404
407
|
constructor(state: DesignerState, definitionWalker: DefinitionWalker);
|
|
405
|
-
readonly onStateChanged: SimpleEvent<[(string[] | undefined)?, (DefinitionChangedEvent | undefined)?, unknown?]>;
|
|
408
|
+
readonly onStateChanged: SimpleEvent<[(string[] | undefined)?, (DefinitionChangedEvent | undefined)?, unknown?, unknown?]>;
|
|
406
409
|
setFolderPath(path: string[]): void;
|
|
407
410
|
getFolderPath(): string[];
|
|
408
411
|
getFolderPathStepNames(): string[];
|
|
@@ -564,7 +567,6 @@ declare class DefaultSequenceComponentView implements ComponentView {
|
|
|
564
567
|
readonly components: StepComponent[];
|
|
565
568
|
static create(parent: SVGElement, sequenceContext: SequenceContext, componentContext: ComponentContext): DefaultSequenceComponentView;
|
|
566
569
|
private constructor();
|
|
567
|
-
setIsDragging(isDragging: boolean): void;
|
|
568
570
|
hasOutput(): boolean;
|
|
569
571
|
}
|
|
570
572
|
|
|
@@ -575,8 +577,7 @@ declare class DefaultSequenceComponent implements SequenceComponent {
|
|
|
575
577
|
private constructor();
|
|
576
578
|
resolveClick(click: ClickDetails): ClickCommand | null;
|
|
577
579
|
findById(stepId: string): StepComponent | null;
|
|
578
|
-
|
|
579
|
-
setIsDragging(isDragging: boolean): void;
|
|
580
|
+
resolvePlaceholders(skipComponent: StepComponent | undefined, result: FoundPlaceholders): void;
|
|
580
581
|
updateBadges(result: BadgesResult): void;
|
|
581
582
|
}
|
|
582
583
|
|
|
@@ -752,12 +753,14 @@ interface StepContext<S extends Step = Step> {
|
|
|
752
753
|
position: number;
|
|
753
754
|
isInputConnected: boolean;
|
|
754
755
|
isOutputConnected: boolean;
|
|
756
|
+
isPreview: boolean;
|
|
755
757
|
}
|
|
756
758
|
interface SequenceContext {
|
|
757
759
|
sequence: Sequence;
|
|
758
760
|
depth: number;
|
|
759
761
|
isInputConnected: boolean;
|
|
760
762
|
isOutputConnected: boolean;
|
|
763
|
+
isPreview: boolean;
|
|
761
764
|
}
|
|
762
765
|
interface StepComponentViewWrapperExtension {
|
|
763
766
|
wrap(view: StepComponentView, stepContext: StepContext): StepComponentView;
|
|
@@ -822,6 +825,7 @@ interface PlaceholderControllerExtension {
|
|
|
822
825
|
}
|
|
823
826
|
interface PlaceholderController {
|
|
824
827
|
canCreate(sequence: Sequence, index: number): boolean;
|
|
828
|
+
canShow?: (sequence: Sequence, index: number, draggingStepComponentType: ComponentType, draggingStepType: string) => boolean;
|
|
825
829
|
}
|
|
826
830
|
interface PlaceholderExtension {
|
|
827
831
|
gapSize: Vector;
|
|
@@ -1257,4 +1261,4 @@ declare class StepsDesignerExtension implements DesignerExtension {
|
|
|
1257
1261
|
protected constructor(steps: StepExtension<Step>[]);
|
|
1258
1262
|
}
|
|
1259
1263
|
|
|
1260
|
-
export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesResult, BaseClickCommand, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentDom, ComponentView, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ContextMenuExtension, ContextMenuItem, ContextMenuItemsProvider, ControlBarApi, CustomAction, CustomActionController, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultRegionComponentViewExtension, DefaultRegionView, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, Grid, GridExtension, I18n, Icons, InputView, JoinView, KeyboardAction, KeyboardConfiguration, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, PreferenceStorage, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionComponentViewContentFactory, RegionComponentViewExtension, RegionView, RegionViewFactory, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SelectedStepIdProvider, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StateModifierDependency, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
|
|
1264
|
+
export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesResult, BaseClickCommand, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentDom, ComponentView, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ContextMenuExtension, ContextMenuItem, ContextMenuItemsProvider, ControlBarApi, CustomAction, CustomActionController, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultRegionComponentViewExtension, DefaultRegionView, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, FoundPlaceholders, Grid, GridExtension, I18n, Icons, InputView, JoinView, KeyboardAction, KeyboardConfiguration, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, PreferenceStorage, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionComponentViewContentFactory, RegionComponentViewExtension, RegionView, RegionViewFactory, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SelectedStepIdProvider, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StateModifierDependency, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, 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.
|
|
4
|
+
"version": "0.22.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./lib/esm/index.js",
|
|
7
7
|
"types": "./lib/index.d.ts",
|