sequential-workflow-designer 0.21.4 → 0.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +6 -5
  2. package/dist/index.umd.js +62 -66
  3. package/lib/cjs/index.cjs +62 -66
  4. package/lib/esm/index.js +62 -66
  5. package/lib/index.d.ts +16 -12
  6. 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
- * [🇪🇸 Internationalization](https://nocode-js.github.io/sequential-workflow-designer/examples/i18n.html)
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.21.4/css/designer.css" rel="stylesheet">
106
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.21.4/css/designer-light.css" rel="stylesheet">
107
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.21.4/css/designer-dark.css" rel="stylesheet">
108
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.21.4/dist/index.umd.js"></script>
106
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.0/css/designer.css" rel="stylesheet">
107
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.0/css/designer-light.css" rel="stylesheet">
108
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.0/css/designer-dark.css" rel="stylesheet">
109
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.22.0/dist/index.umd.js"></script>
109
110
  ```
110
111
 
111
112
  Call the designer by:
package/dist/index.umd.js CHANGED
@@ -469,11 +469,12 @@
469
469
  class DragStepBehavior {
470
470
  static create(designerContext, step, draggedStepComponent) {
471
471
  const view = DragStepView.create(step, designerContext.theme, designerContext.componentContext);
472
- return new DragStepBehavior(view, designerContext.workspaceController, designerContext.state, step, designerContext.stateModifier, draggedStepComponent);
472
+ return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, draggedStepComponent);
473
473
  }
474
- constructor(view, workspaceController, designerState, step, stateModifier, draggedStepComponent) {
474
+ constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, draggedStepComponent) {
475
475
  this.view = view;
476
476
  this.workspaceController = workspaceController;
477
+ this.placeholderController = placeholderController;
477
478
  this.designerState = designerState;
478
479
  this.step = step;
479
480
  this.stateModifier = stateModifier;
@@ -483,6 +484,7 @@
483
484
  let offset = null;
484
485
  if (this.draggedStepComponent) {
485
486
  this.draggedStepComponent.setIsDisabled(true);
487
+ this.draggedStepComponent.setIsDragging(true);
486
488
  const hasSameSize = this.draggedStepComponent.view.width === this.view.component.width &&
487
489
  this.draggedStepComponent.view.height === this.view.component.height;
488
490
  if (hasSameSize) {
@@ -497,12 +499,16 @@
497
499
  }
498
500
  this.view.setPosition(position.subtract(offset));
499
501
  this.designerState.setIsDragging(true);
500
- const placeholders = this.workspaceController.getPlaceholders();
502
+ const { placeholders, components } = this.resolvePlaceholders(this.draggedStepComponent);
501
503
  this.state = {
504
+ placeholders,
505
+ components,
502
506
  startPosition: position,
503
507
  finder: PlaceholderFinder.create(placeholders, this.designerState),
504
508
  offset
505
509
  };
510
+ placeholders.forEach(placeholder => placeholder.setIsVisible(true));
511
+ components.forEach(component => component.setIsDragging(true));
506
512
  }
507
513
  onMove(delta) {
508
514
  if (this.state) {
@@ -524,6 +530,8 @@
524
530
  if (!this.state) {
525
531
  throw new Error('Invalid state');
526
532
  }
533
+ this.state.placeholders.forEach(placeholder => placeholder.setIsVisible(false));
534
+ this.state.components.forEach(component => component.setIsDragging(false));
527
535
  this.state.finder.destroy();
528
536
  this.state = undefined;
529
537
  this.view.remove();
@@ -540,6 +548,7 @@
540
548
  if (!modified) {
541
549
  if (this.draggedStepComponent) {
542
550
  this.draggedStepComponent.setIsDisabled(false);
551
+ this.draggedStepComponent.setIsDragging(false);
543
552
  }
544
553
  if (this.currentPlaceholder) {
545
554
  this.currentPlaceholder.setIsHover(false);
@@ -547,6 +556,14 @@
547
556
  }
548
557
  this.currentPlaceholder = undefined;
549
558
  }
559
+ resolvePlaceholders(skipComponent) {
560
+ const result = this.workspaceController.resolvePlaceholders(skipComponent);
561
+ if (this.placeholderController.canShow) {
562
+ const canShow = this.placeholderController.canShow;
563
+ result.placeholders = result.placeholders.filter(placeholder => canShow(placeholder.parentSequence, placeholder.index, this.step.componentType, this.step.type));
564
+ }
565
+ return result;
566
+ }
550
567
  }
551
568
 
552
569
  class ToolboxApi {
@@ -842,7 +859,6 @@
842
859
  this.parentSequence = parentSequence;
843
860
  this.hasOutput = hasOutput;
844
861
  this.badges = badges;
845
- this.isDisabled = false;
846
862
  }
847
863
  findById(stepId) {
848
864
  if (this.step.id === stepId) {
@@ -882,32 +898,24 @@
882
898
  }
883
899
  return null;
884
900
  }
885
- getPlaceholders(result) {
886
- if (!this.isDisabled) {
901
+ resolvePlaceholders(skipComponent, result) {
902
+ if (skipComponent !== this) {
887
903
  if (this.view.sequenceComponents) {
888
- this.view.sequenceComponents.forEach(component => component.getPlaceholders(result));
904
+ this.view.sequenceComponents.forEach(component => component.resolvePlaceholders(skipComponent, result));
889
905
  }
890
906
  if (this.view.placeholders) {
891
- this.view.placeholders.forEach(ph => result.push(ph));
907
+ this.view.placeholders.forEach(ph => result.placeholders.push(ph));
892
908
  }
909
+ result.components.push(this);
893
910
  }
894
911
  }
895
912
  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
913
  this.view.setIsDragging(isDragging);
905
914
  }
906
915
  setIsSelected(isSelected) {
907
916
  this.view.setIsSelected(isSelected);
908
917
  }
909
918
  setIsDisabled(isDisabled) {
910
- this.isDisabled = isDisabled;
911
919
  this.view.setIsDisabled(isDisabled);
912
920
  }
913
921
  updateBadges(result) {
@@ -930,7 +938,8 @@
930
938
  sequence,
931
939
  depth: stepContext.depth + 1,
932
940
  isInputConnected: true,
933
- isOutputConnected: stepContext.isOutputConnected
941
+ isOutputConnected: stepContext.isOutputConnected,
942
+ isPreview: stepContext.isPreview
934
943
  };
935
944
  return componentContext.services.sequenceComponent.create(parentElement, sequenceContext, componentContext);
936
945
  },
@@ -958,10 +967,9 @@
958
967
  }
959
968
 
960
969
  class ComponentContext {
961
- static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, i18n, services) {
970
+ static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
962
971
  const validator = new DefinitionValidator(configuration.validator, state);
963
972
  const iconProvider = new IconProvider(configuration.steps);
964
- const placeholderController = services.placeholderController.create();
965
973
  const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
966
974
  return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
967
975
  }
@@ -1364,7 +1372,8 @@
1364
1372
  depth: sequenceContext.depth,
1365
1373
  position: index,
1366
1374
  isInputConnected: index === 0 ? sequenceContext.isInputConnected : components[index - 1].hasOutput,
1367
- isOutputConnected: index === sequence.length - 1 ? sequenceContext.isOutputConnected : true
1375
+ isOutputConnected: index === sequence.length - 1 ? sequenceContext.isOutputConnected : true,
1376
+ isPreview: sequenceContext.isPreview
1368
1377
  };
1369
1378
  components[index] = componentContext.stepComponentFactory.create(g, stepContext, componentContext);
1370
1379
  }
@@ -1387,7 +1396,7 @@
1387
1396
  if ((i === 0 && sequenceContext.isInputConnected) || (i > 0 && components[i - 1].hasOutput)) {
1388
1397
  JoinView.createStraightJoin(g, new Vector(joinX, offsetY - phHeight), phHeight);
1389
1398
  }
1390
- if (componentContext.placeholderController.canCreate(sequence, i)) {
1399
+ if (!sequenceContext.isPreview && componentContext.placeholderController.canCreate(sequence, i)) {
1391
1400
  const ph = componentContext.services.placeholder.createForGap(g, sequence, i);
1392
1401
  Dom.translate(ph.view.g, joinX - phWidth / 2, offsetY - phHeight);
1393
1402
  placeholders.push(ph);
@@ -1399,7 +1408,7 @@
1399
1408
  JoinView.createStraightJoin(g, new Vector(joinX, offsetY - phHeight), phHeight);
1400
1409
  }
1401
1410
  const newIndex = components.length;
1402
- if (componentContext.placeholderController.canCreate(sequence, newIndex)) {
1411
+ if (!sequenceContext.isPreview && componentContext.placeholderController.canCreate(sequence, newIndex)) {
1403
1412
  const ph = componentContext.services.placeholder.createForGap(g, sequence, newIndex);
1404
1413
  Dom.translate(ph.view.g, joinX - phWidth / 2, offsetY - phHeight);
1405
1414
  placeholders.push(ph);
@@ -1414,11 +1423,6 @@
1414
1423
  this.placeholders = placeholders;
1415
1424
  this.components = components;
1416
1425
  }
1417
- setIsDragging(isDragging) {
1418
- this.placeholders.forEach(placeholder => {
1419
- placeholder.setIsVisible(isDragging);
1420
- });
1421
- }
1422
1426
  hasOutput() {
1423
1427
  if (this.components.length > 0) {
1424
1428
  return this.components[this.components.length - 1].hasOutput;
@@ -1460,13 +1464,9 @@
1460
1464
  }
1461
1465
  return null;
1462
1466
  }
1463
- getPlaceholders(result) {
1464
- this.view.placeholders.forEach(placeholder => result.push(placeholder));
1465
- this.view.components.forEach(c => c.getPlaceholders(result));
1466
- }
1467
- setIsDragging(isDragging) {
1468
- this.view.setIsDragging(isDragging);
1469
- this.view.components.forEach(c => c.setIsDragging(isDragging));
1467
+ resolvePlaceholders(skipComponent, result) {
1468
+ this.view.placeholders.forEach(placeholder => result.placeholders.push(placeholder));
1469
+ this.view.components.forEach(c => c.resolvePlaceholders(skipComponent, result));
1470
1470
  }
1471
1471
  updateBadges(result) {
1472
1472
  for (const component of this.view.components) {
@@ -2683,8 +2683,8 @@
2683
2683
  }
2684
2684
  return this.controller;
2685
2685
  }
2686
- getPlaceholders() {
2687
- return this.get().getPlaceholders();
2686
+ resolvePlaceholders(skipComponent) {
2687
+ return this.get().resolvePlaceholders(skipComponent);
2688
2688
  }
2689
2689
  getComponentByStepId(stepId) {
2690
2690
  return this.get().getComponentByStepId(stepId);
@@ -2733,6 +2733,7 @@
2733
2733
  const theme = configuration.theme || 'light';
2734
2734
  const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
2735
2735
  const workspaceController = new WorkspaceControllerWrapper();
2736
+ const placeholderController = services.placeholderController.create();
2736
2737
  const behaviorController = new BehaviorController();
2737
2738
  const stepExtensionResolver = StepExtensionResolver.create(services);
2738
2739
  const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new DefinitionWalker();
@@ -2744,10 +2745,10 @@
2744
2745
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
2745
2746
  }
2746
2747
  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);
2748
+ const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
2749
+ return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
2749
2750
  }
2750
- constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController) {
2751
+ constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2751
2752
  this.theme = theme;
2752
2753
  this.state = state;
2753
2754
  this.configuration = configuration;
@@ -2758,6 +2759,7 @@
2758
2759
  this.stateModifier = stateModifier;
2759
2760
  this.layoutController = layoutController;
2760
2761
  this.workspaceController = workspaceController;
2762
+ this.placeholderController = placeholderController;
2761
2763
  this.behaviorController = behaviorController;
2762
2764
  this.customActionController = customActionController;
2763
2765
  this.historyController = historyController;
@@ -3266,8 +3268,7 @@
3266
3268
  api.viewport.resetViewport();
3267
3269
  });
3268
3270
  designerContext.setWorkspaceController(workspace);
3269
- designerContext.state.onViewportChanged.subscribe(vp => workspace.onViewportChanged(vp));
3270
- designerContext.state.onIsDraggingChanged.subscribe(is => workspace.onIsDraggingChanged(is));
3271
+ designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
3271
3272
  race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
3272
3273
  workspace.onStateChanged(r[0], r[1], r[2]);
3273
3274
  });
@@ -3309,6 +3310,9 @@
3309
3310
  const commandOrNull = this.resolveClick(target, position);
3310
3311
  this.contextMenuController.tryOpen(position, commandOrNull);
3311
3312
  };
3313
+ this.onViewportChanged = (viewport) => {
3314
+ this.view.setPositionAndScale(viewport.position, viewport.scale);
3315
+ };
3312
3316
  }
3313
3317
  updateRootComponent() {
3314
3318
  this.selectedStepComponent = null;
@@ -3344,9 +3348,12 @@
3344
3348
  }
3345
3349
  this.isValid = Boolean(result[this.validationErrorBadgeIndex]);
3346
3350
  }
3347
- getPlaceholders() {
3348
- const result = [];
3349
- this.getRootComponent().getPlaceholders(result);
3351
+ resolvePlaceholders(skipComponent) {
3352
+ const result = {
3353
+ placeholders: [],
3354
+ components: []
3355
+ };
3356
+ this.getRootComponent().resolvePlaceholders(skipComponent, result);
3350
3357
  return result;
3351
3358
  }
3352
3359
  getComponentByStepId(stepId) {
@@ -3373,12 +3380,6 @@
3373
3380
  this.contextMenuController.destroy();
3374
3381
  this.view.destroy();
3375
3382
  }
3376
- onIsDraggingChanged(isDragging) {
3377
- this.getRootComponent().setIsDragging(isDragging);
3378
- }
3379
- onViewportChanged(viewport) {
3380
- this.view.setPositionAndScale(viewport.position, viewport.scale);
3381
- }
3382
3383
  onStateChanged(definitionChanged, selectedStepIdChanged, folderPathChanged) {
3383
3384
  if (folderPathChanged) {
3384
3385
  this.updateRootComponent();
@@ -3471,15 +3472,16 @@
3471
3472
  canvas.style.marginLeft = -SAFE_OFFSET + 'px';
3472
3473
  canvas.style.marginTop = -SAFE_OFFSET + 'px';
3473
3474
  parent.appendChild(canvas);
3474
- const fakeStepContext = {
3475
+ const previewStepContext = {
3475
3476
  parentSequence: [],
3476
3477
  step,
3477
3478
  depth: 0,
3478
3479
  position: 0,
3479
3480
  isInputConnected: true,
3480
- isOutputConnected: true
3481
+ isOutputConnected: true,
3482
+ isPreview: true
3481
3483
  };
3482
- const stepComponent = componentContext.stepComponentFactory.create(canvas, fakeStepContext, componentContext);
3484
+ const stepComponent = componentContext.stepComponentFactory.create(canvas, previewStepContext, componentContext);
3483
3485
  Dom.attrs(canvas, {
3484
3486
  width: stepComponent.view.width + SAFE_OFFSET * 2,
3485
3487
  height: stepComponent.view.height + SAFE_OFFSET * 2
@@ -4209,7 +4211,8 @@
4209
4211
  sequence,
4210
4212
  depth: 0,
4211
4213
  isInputConnected: true,
4212
- isOutputConnected: true
4214
+ isOutputConnected: true,
4215
+ isPreview: false
4213
4216
  }, context);
4214
4217
  const view = sequenceComponent.view;
4215
4218
  const x = view.joinX - SIZE / 2;
@@ -4279,18 +4282,11 @@
4279
4282
  findById(stepId) {
4280
4283
  return this.view.component.findById(stepId);
4281
4284
  }
4282
- getPlaceholders(result) {
4283
- this.view.component.getPlaceholders(result);
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);
4285
+ resolvePlaceholders(skipComponent, result) {
4286
+ this.view.component.resolvePlaceholders(skipComponent, result);
4291
4287
  if (this.view.startPlaceholder && this.view.endPlaceholder) {
4292
- this.view.startPlaceholder.setIsVisible(isDragging);
4293
- this.view.endPlaceholder.setIsVisible(isDragging);
4288
+ result.placeholders.push(this.view.startPlaceholder);
4289
+ result.placeholders.push(this.view.endPlaceholder);
4294
4290
  }
4295
4291
  }
4296
4292
  updateBadges(result) {
package/lib/cjs/index.cjs CHANGED
@@ -467,11 +467,12 @@ class PlaceholderFinder {
467
467
  class DragStepBehavior {
468
468
  static create(designerContext, step, draggedStepComponent) {
469
469
  const view = DragStepView.create(step, designerContext.theme, designerContext.componentContext);
470
- 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);
471
471
  }
472
- constructor(view, workspaceController, designerState, step, stateModifier, draggedStepComponent) {
472
+ constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, draggedStepComponent) {
473
473
  this.view = view;
474
474
  this.workspaceController = workspaceController;
475
+ this.placeholderController = placeholderController;
475
476
  this.designerState = designerState;
476
477
  this.step = step;
477
478
  this.stateModifier = stateModifier;
@@ -481,6 +482,7 @@ class DragStepBehavior {
481
482
  let offset = null;
482
483
  if (this.draggedStepComponent) {
483
484
  this.draggedStepComponent.setIsDisabled(true);
485
+ this.draggedStepComponent.setIsDragging(true);
484
486
  const hasSameSize = this.draggedStepComponent.view.width === this.view.component.width &&
485
487
  this.draggedStepComponent.view.height === this.view.component.height;
486
488
  if (hasSameSize) {
@@ -495,12 +497,16 @@ class DragStepBehavior {
495
497
  }
496
498
  this.view.setPosition(position.subtract(offset));
497
499
  this.designerState.setIsDragging(true);
498
- const placeholders = this.workspaceController.getPlaceholders();
500
+ const { placeholders, components } = this.resolvePlaceholders(this.draggedStepComponent);
499
501
  this.state = {
502
+ placeholders,
503
+ components,
500
504
  startPosition: position,
501
505
  finder: PlaceholderFinder.create(placeholders, this.designerState),
502
506
  offset
503
507
  };
508
+ placeholders.forEach(placeholder => placeholder.setIsVisible(true));
509
+ components.forEach(component => component.setIsDragging(true));
504
510
  }
505
511
  onMove(delta) {
506
512
  if (this.state) {
@@ -522,6 +528,8 @@ class DragStepBehavior {
522
528
  if (!this.state) {
523
529
  throw new Error('Invalid state');
524
530
  }
531
+ this.state.placeholders.forEach(placeholder => placeholder.setIsVisible(false));
532
+ this.state.components.forEach(component => component.setIsDragging(false));
525
533
  this.state.finder.destroy();
526
534
  this.state = undefined;
527
535
  this.view.remove();
@@ -538,6 +546,7 @@ class DragStepBehavior {
538
546
  if (!modified) {
539
547
  if (this.draggedStepComponent) {
540
548
  this.draggedStepComponent.setIsDisabled(false);
549
+ this.draggedStepComponent.setIsDragging(false);
541
550
  }
542
551
  if (this.currentPlaceholder) {
543
552
  this.currentPlaceholder.setIsHover(false);
@@ -545,6 +554,14 @@ class DragStepBehavior {
545
554
  }
546
555
  this.currentPlaceholder = undefined;
547
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
+ }
548
565
  }
549
566
 
550
567
  class ToolboxApi {
@@ -840,7 +857,6 @@ class StepComponent {
840
857
  this.parentSequence = parentSequence;
841
858
  this.hasOutput = hasOutput;
842
859
  this.badges = badges;
843
- this.isDisabled = false;
844
860
  }
845
861
  findById(stepId) {
846
862
  if (this.step.id === stepId) {
@@ -880,32 +896,24 @@ class StepComponent {
880
896
  }
881
897
  return null;
882
898
  }
883
- getPlaceholders(result) {
884
- if (!this.isDisabled) {
899
+ resolvePlaceholders(skipComponent, result) {
900
+ if (skipComponent !== this) {
885
901
  if (this.view.sequenceComponents) {
886
- this.view.sequenceComponents.forEach(component => component.getPlaceholders(result));
902
+ this.view.sequenceComponents.forEach(component => component.resolvePlaceholders(skipComponent, result));
887
903
  }
888
904
  if (this.view.placeholders) {
889
- this.view.placeholders.forEach(ph => result.push(ph));
905
+ this.view.placeholders.forEach(ph => result.placeholders.push(ph));
890
906
  }
907
+ result.components.push(this);
891
908
  }
892
909
  }
893
910
  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
911
  this.view.setIsDragging(isDragging);
903
912
  }
904
913
  setIsSelected(isSelected) {
905
914
  this.view.setIsSelected(isSelected);
906
915
  }
907
916
  setIsDisabled(isDisabled) {
908
- this.isDisabled = isDisabled;
909
917
  this.view.setIsDisabled(isDisabled);
910
918
  }
911
919
  updateBadges(result) {
@@ -928,7 +936,8 @@ class StepComponentViewContextFactory {
928
936
  sequence,
929
937
  depth: stepContext.depth + 1,
930
938
  isInputConnected: true,
931
- isOutputConnected: stepContext.isOutputConnected
939
+ isOutputConnected: stepContext.isOutputConnected,
940
+ isPreview: stepContext.isPreview
932
941
  };
933
942
  return componentContext.services.sequenceComponent.create(parentElement, sequenceContext, componentContext);
934
943
  },
@@ -956,10 +965,9 @@ class StepComponentFactory {
956
965
  }
957
966
 
958
967
  class ComponentContext {
959
- static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, i18n, services) {
968
+ static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
960
969
  const validator = new DefinitionValidator(configuration.validator, state);
961
970
  const iconProvider = new IconProvider(configuration.steps);
962
- const placeholderController = services.placeholderController.create();
963
971
  const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
964
972
  return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
965
973
  }
@@ -1362,7 +1370,8 @@ class DefaultSequenceComponentView {
1362
1370
  depth: sequenceContext.depth,
1363
1371
  position: index,
1364
1372
  isInputConnected: index === 0 ? sequenceContext.isInputConnected : components[index - 1].hasOutput,
1365
- isOutputConnected: index === sequence.length - 1 ? sequenceContext.isOutputConnected : true
1373
+ isOutputConnected: index === sequence.length - 1 ? sequenceContext.isOutputConnected : true,
1374
+ isPreview: sequenceContext.isPreview
1366
1375
  };
1367
1376
  components[index] = componentContext.stepComponentFactory.create(g, stepContext, componentContext);
1368
1377
  }
@@ -1385,7 +1394,7 @@ class DefaultSequenceComponentView {
1385
1394
  if ((i === 0 && sequenceContext.isInputConnected) || (i > 0 && components[i - 1].hasOutput)) {
1386
1395
  JoinView.createStraightJoin(g, new Vector(joinX, offsetY - phHeight), phHeight);
1387
1396
  }
1388
- if (componentContext.placeholderController.canCreate(sequence, i)) {
1397
+ if (!sequenceContext.isPreview && componentContext.placeholderController.canCreate(sequence, i)) {
1389
1398
  const ph = componentContext.services.placeholder.createForGap(g, sequence, i);
1390
1399
  Dom.translate(ph.view.g, joinX - phWidth / 2, offsetY - phHeight);
1391
1400
  placeholders.push(ph);
@@ -1397,7 +1406,7 @@ class DefaultSequenceComponentView {
1397
1406
  JoinView.createStraightJoin(g, new Vector(joinX, offsetY - phHeight), phHeight);
1398
1407
  }
1399
1408
  const newIndex = components.length;
1400
- if (componentContext.placeholderController.canCreate(sequence, newIndex)) {
1409
+ if (!sequenceContext.isPreview && componentContext.placeholderController.canCreate(sequence, newIndex)) {
1401
1410
  const ph = componentContext.services.placeholder.createForGap(g, sequence, newIndex);
1402
1411
  Dom.translate(ph.view.g, joinX - phWidth / 2, offsetY - phHeight);
1403
1412
  placeholders.push(ph);
@@ -1412,11 +1421,6 @@ class DefaultSequenceComponentView {
1412
1421
  this.placeholders = placeholders;
1413
1422
  this.components = components;
1414
1423
  }
1415
- setIsDragging(isDragging) {
1416
- this.placeholders.forEach(placeholder => {
1417
- placeholder.setIsVisible(isDragging);
1418
- });
1419
- }
1420
1424
  hasOutput() {
1421
1425
  if (this.components.length > 0) {
1422
1426
  return this.components[this.components.length - 1].hasOutput;
@@ -1458,13 +1462,9 @@ class DefaultSequenceComponent {
1458
1462
  }
1459
1463
  return null;
1460
1464
  }
1461
- getPlaceholders(result) {
1462
- this.view.placeholders.forEach(placeholder => result.push(placeholder));
1463
- this.view.components.forEach(c => c.getPlaceholders(result));
1464
- }
1465
- setIsDragging(isDragging) {
1466
- this.view.setIsDragging(isDragging);
1467
- 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));
1468
1468
  }
1469
1469
  updateBadges(result) {
1470
1470
  for (const component of this.view.components) {
@@ -2498,8 +2498,8 @@ class WorkspaceControllerWrapper {
2498
2498
  }
2499
2499
  return this.controller;
2500
2500
  }
2501
- getPlaceholders() {
2502
- return this.get().getPlaceholders();
2501
+ resolvePlaceholders(skipComponent) {
2502
+ return this.get().resolvePlaceholders(skipComponent);
2503
2503
  }
2504
2504
  getComponentByStepId(stepId) {
2505
2505
  return this.get().getComponentByStepId(stepId);
@@ -2548,6 +2548,7 @@ class DesignerContext {
2548
2548
  const theme = configuration.theme || 'light';
2549
2549
  const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
2550
2550
  const workspaceController = new WorkspaceControllerWrapper();
2551
+ const placeholderController = services.placeholderController.create();
2551
2552
  const behaviorController = new BehaviorController();
2552
2553
  const stepExtensionResolver = StepExtensionResolver.create(services);
2553
2554
  const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new sequentialWorkflowModel.DefinitionWalker();
@@ -2559,10 +2560,10 @@ class DesignerContext {
2559
2560
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
2560
2561
  }
2561
2562
  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);
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);
2564
2565
  }
2565
- 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) {
2566
2567
  this.theme = theme;
2567
2568
  this.state = state;
2568
2569
  this.configuration = configuration;
@@ -2573,6 +2574,7 @@ class DesignerContext {
2573
2574
  this.stateModifier = stateModifier;
2574
2575
  this.layoutController = layoutController;
2575
2576
  this.workspaceController = workspaceController;
2577
+ this.placeholderController = placeholderController;
2576
2578
  this.behaviorController = behaviorController;
2577
2579
  this.customActionController = customActionController;
2578
2580
  this.historyController = historyController;
@@ -3081,8 +3083,7 @@ class Workspace {
3081
3083
  api.viewport.resetViewport();
3082
3084
  });
3083
3085
  designerContext.setWorkspaceController(workspace);
3084
- designerContext.state.onViewportChanged.subscribe(vp => workspace.onViewportChanged(vp));
3085
- designerContext.state.onIsDraggingChanged.subscribe(is => workspace.onIsDraggingChanged(is));
3086
+ designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
3086
3087
  race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
3087
3088
  workspace.onStateChanged(r[0], r[1], r[2]);
3088
3089
  });
@@ -3124,6 +3125,9 @@ class Workspace {
3124
3125
  const commandOrNull = this.resolveClick(target, position);
3125
3126
  this.contextMenuController.tryOpen(position, commandOrNull);
3126
3127
  };
3128
+ this.onViewportChanged = (viewport) => {
3129
+ this.view.setPositionAndScale(viewport.position, viewport.scale);
3130
+ };
3127
3131
  }
3128
3132
  updateRootComponent() {
3129
3133
  this.selectedStepComponent = null;
@@ -3159,9 +3163,12 @@ class Workspace {
3159
3163
  }
3160
3164
  this.isValid = Boolean(result[this.validationErrorBadgeIndex]);
3161
3165
  }
3162
- getPlaceholders() {
3163
- const result = [];
3164
- this.getRootComponent().getPlaceholders(result);
3166
+ resolvePlaceholders(skipComponent) {
3167
+ const result = {
3168
+ placeholders: [],
3169
+ components: []
3170
+ };
3171
+ this.getRootComponent().resolvePlaceholders(skipComponent, result);
3165
3172
  return result;
3166
3173
  }
3167
3174
  getComponentByStepId(stepId) {
@@ -3188,12 +3195,6 @@ class Workspace {
3188
3195
  this.contextMenuController.destroy();
3189
3196
  this.view.destroy();
3190
3197
  }
3191
- onIsDraggingChanged(isDragging) {
3192
- this.getRootComponent().setIsDragging(isDragging);
3193
- }
3194
- onViewportChanged(viewport) {
3195
- this.view.setPositionAndScale(viewport.position, viewport.scale);
3196
- }
3197
3198
  onStateChanged(definitionChanged, selectedStepIdChanged, folderPathChanged) {
3198
3199
  if (folderPathChanged) {
3199
3200
  this.updateRootComponent();
@@ -3286,15 +3287,16 @@ class DefaultDraggedComponent {
3286
3287
  canvas.style.marginLeft = -SAFE_OFFSET + 'px';
3287
3288
  canvas.style.marginTop = -SAFE_OFFSET + 'px';
3288
3289
  parent.appendChild(canvas);
3289
- const fakeStepContext = {
3290
+ const previewStepContext = {
3290
3291
  parentSequence: [],
3291
3292
  step,
3292
3293
  depth: 0,
3293
3294
  position: 0,
3294
3295
  isInputConnected: true,
3295
- isOutputConnected: true
3296
+ isOutputConnected: true,
3297
+ isPreview: true
3296
3298
  };
3297
- const stepComponent = componentContext.stepComponentFactory.create(canvas, fakeStepContext, componentContext);
3299
+ const stepComponent = componentContext.stepComponentFactory.create(canvas, previewStepContext, componentContext);
3298
3300
  Dom.attrs(canvas, {
3299
3301
  width: stepComponent.view.width + SAFE_OFFSET * 2,
3300
3302
  height: stepComponent.view.height + SAFE_OFFSET * 2
@@ -4024,7 +4026,8 @@ class StartStopRootComponentView {
4024
4026
  sequence,
4025
4027
  depth: 0,
4026
4028
  isInputConnected: true,
4027
- isOutputConnected: true
4029
+ isOutputConnected: true,
4030
+ isPreview: false
4028
4031
  }, context);
4029
4032
  const view = sequenceComponent.view;
4030
4033
  const x = view.joinX - SIZE / 2;
@@ -4094,18 +4097,11 @@ class StartStopRootComponent {
4094
4097
  findById(stepId) {
4095
4098
  return this.view.component.findById(stepId);
4096
4099
  }
4097
- getPlaceholders(result) {
4098
- this.view.component.getPlaceholders(result);
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);
4100
+ resolvePlaceholders(skipComponent, result) {
4101
+ this.view.component.resolvePlaceholders(skipComponent, result);
4106
4102
  if (this.view.startPlaceholder && this.view.endPlaceholder) {
4107
- this.view.startPlaceholder.setIsVisible(isDragging);
4108
- this.view.endPlaceholder.setIsVisible(isDragging);
4103
+ result.placeholders.push(this.view.startPlaceholder);
4104
+ result.placeholders.push(this.view.endPlaceholder);
4109
4105
  }
4110
4106
  }
4111
4107
  updateBadges(result) {
package/lib/esm/index.js CHANGED
@@ -466,11 +466,12 @@ class PlaceholderFinder {
466
466
  class DragStepBehavior {
467
467
  static create(designerContext, step, draggedStepComponent) {
468
468
  const view = DragStepView.create(step, designerContext.theme, designerContext.componentContext);
469
- return new DragStepBehavior(view, designerContext.workspaceController, designerContext.state, step, designerContext.stateModifier, draggedStepComponent);
469
+ return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, draggedStepComponent);
470
470
  }
471
- constructor(view, workspaceController, designerState, step, stateModifier, draggedStepComponent) {
471
+ constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, draggedStepComponent) {
472
472
  this.view = view;
473
473
  this.workspaceController = workspaceController;
474
+ this.placeholderController = placeholderController;
474
475
  this.designerState = designerState;
475
476
  this.step = step;
476
477
  this.stateModifier = stateModifier;
@@ -480,6 +481,7 @@ class DragStepBehavior {
480
481
  let offset = null;
481
482
  if (this.draggedStepComponent) {
482
483
  this.draggedStepComponent.setIsDisabled(true);
484
+ this.draggedStepComponent.setIsDragging(true);
483
485
  const hasSameSize = this.draggedStepComponent.view.width === this.view.component.width &&
484
486
  this.draggedStepComponent.view.height === this.view.component.height;
485
487
  if (hasSameSize) {
@@ -494,12 +496,16 @@ class DragStepBehavior {
494
496
  }
495
497
  this.view.setPosition(position.subtract(offset));
496
498
  this.designerState.setIsDragging(true);
497
- const placeholders = this.workspaceController.getPlaceholders();
499
+ const { placeholders, components } = this.resolvePlaceholders(this.draggedStepComponent);
498
500
  this.state = {
501
+ placeholders,
502
+ components,
499
503
  startPosition: position,
500
504
  finder: PlaceholderFinder.create(placeholders, this.designerState),
501
505
  offset
502
506
  };
507
+ placeholders.forEach(placeholder => placeholder.setIsVisible(true));
508
+ components.forEach(component => component.setIsDragging(true));
503
509
  }
504
510
  onMove(delta) {
505
511
  if (this.state) {
@@ -521,6 +527,8 @@ class DragStepBehavior {
521
527
  if (!this.state) {
522
528
  throw new Error('Invalid state');
523
529
  }
530
+ this.state.placeholders.forEach(placeholder => placeholder.setIsVisible(false));
531
+ this.state.components.forEach(component => component.setIsDragging(false));
524
532
  this.state.finder.destroy();
525
533
  this.state = undefined;
526
534
  this.view.remove();
@@ -537,6 +545,7 @@ class DragStepBehavior {
537
545
  if (!modified) {
538
546
  if (this.draggedStepComponent) {
539
547
  this.draggedStepComponent.setIsDisabled(false);
548
+ this.draggedStepComponent.setIsDragging(false);
540
549
  }
541
550
  if (this.currentPlaceholder) {
542
551
  this.currentPlaceholder.setIsHover(false);
@@ -544,6 +553,14 @@ class DragStepBehavior {
544
553
  }
545
554
  this.currentPlaceholder = undefined;
546
555
  }
556
+ resolvePlaceholders(skipComponent) {
557
+ const result = this.workspaceController.resolvePlaceholders(skipComponent);
558
+ if (this.placeholderController.canShow) {
559
+ const canShow = this.placeholderController.canShow;
560
+ result.placeholders = result.placeholders.filter(placeholder => canShow(placeholder.parentSequence, placeholder.index, this.step.componentType, this.step.type));
561
+ }
562
+ return result;
563
+ }
547
564
  }
548
565
 
549
566
  class ToolboxApi {
@@ -839,7 +856,6 @@ class StepComponent {
839
856
  this.parentSequence = parentSequence;
840
857
  this.hasOutput = hasOutput;
841
858
  this.badges = badges;
842
- this.isDisabled = false;
843
859
  }
844
860
  findById(stepId) {
845
861
  if (this.step.id === stepId) {
@@ -879,32 +895,24 @@ class StepComponent {
879
895
  }
880
896
  return null;
881
897
  }
882
- getPlaceholders(result) {
883
- if (!this.isDisabled) {
898
+ resolvePlaceholders(skipComponent, result) {
899
+ if (skipComponent !== this) {
884
900
  if (this.view.sequenceComponents) {
885
- this.view.sequenceComponents.forEach(component => component.getPlaceholders(result));
901
+ this.view.sequenceComponents.forEach(component => component.resolvePlaceholders(skipComponent, result));
886
902
  }
887
903
  if (this.view.placeholders) {
888
- this.view.placeholders.forEach(ph => result.push(ph));
904
+ this.view.placeholders.forEach(ph => result.placeholders.push(ph));
889
905
  }
906
+ result.components.push(this);
890
907
  }
891
908
  }
892
909
  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
910
  this.view.setIsDragging(isDragging);
902
911
  }
903
912
  setIsSelected(isSelected) {
904
913
  this.view.setIsSelected(isSelected);
905
914
  }
906
915
  setIsDisabled(isDisabled) {
907
- this.isDisabled = isDisabled;
908
916
  this.view.setIsDisabled(isDisabled);
909
917
  }
910
918
  updateBadges(result) {
@@ -927,7 +935,8 @@ class StepComponentViewContextFactory {
927
935
  sequence,
928
936
  depth: stepContext.depth + 1,
929
937
  isInputConnected: true,
930
- isOutputConnected: stepContext.isOutputConnected
938
+ isOutputConnected: stepContext.isOutputConnected,
939
+ isPreview: stepContext.isPreview
931
940
  };
932
941
  return componentContext.services.sequenceComponent.create(parentElement, sequenceContext, componentContext);
933
942
  },
@@ -955,10 +964,9 @@ class StepComponentFactory {
955
964
  }
956
965
 
957
966
  class ComponentContext {
958
- static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, i18n, services) {
967
+ static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
959
968
  const validator = new DefinitionValidator(configuration.validator, state);
960
969
  const iconProvider = new IconProvider(configuration.steps);
961
- const placeholderController = services.placeholderController.create();
962
970
  const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
963
971
  return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
964
972
  }
@@ -1361,7 +1369,8 @@ class DefaultSequenceComponentView {
1361
1369
  depth: sequenceContext.depth,
1362
1370
  position: index,
1363
1371
  isInputConnected: index === 0 ? sequenceContext.isInputConnected : components[index - 1].hasOutput,
1364
- isOutputConnected: index === sequence.length - 1 ? sequenceContext.isOutputConnected : true
1372
+ isOutputConnected: index === sequence.length - 1 ? sequenceContext.isOutputConnected : true,
1373
+ isPreview: sequenceContext.isPreview
1365
1374
  };
1366
1375
  components[index] = componentContext.stepComponentFactory.create(g, stepContext, componentContext);
1367
1376
  }
@@ -1384,7 +1393,7 @@ class DefaultSequenceComponentView {
1384
1393
  if ((i === 0 && sequenceContext.isInputConnected) || (i > 0 && components[i - 1].hasOutput)) {
1385
1394
  JoinView.createStraightJoin(g, new Vector(joinX, offsetY - phHeight), phHeight);
1386
1395
  }
1387
- if (componentContext.placeholderController.canCreate(sequence, i)) {
1396
+ if (!sequenceContext.isPreview && componentContext.placeholderController.canCreate(sequence, i)) {
1388
1397
  const ph = componentContext.services.placeholder.createForGap(g, sequence, i);
1389
1398
  Dom.translate(ph.view.g, joinX - phWidth / 2, offsetY - phHeight);
1390
1399
  placeholders.push(ph);
@@ -1396,7 +1405,7 @@ class DefaultSequenceComponentView {
1396
1405
  JoinView.createStraightJoin(g, new Vector(joinX, offsetY - phHeight), phHeight);
1397
1406
  }
1398
1407
  const newIndex = components.length;
1399
- if (componentContext.placeholderController.canCreate(sequence, newIndex)) {
1408
+ if (!sequenceContext.isPreview && componentContext.placeholderController.canCreate(sequence, newIndex)) {
1400
1409
  const ph = componentContext.services.placeholder.createForGap(g, sequence, newIndex);
1401
1410
  Dom.translate(ph.view.g, joinX - phWidth / 2, offsetY - phHeight);
1402
1411
  placeholders.push(ph);
@@ -1411,11 +1420,6 @@ class DefaultSequenceComponentView {
1411
1420
  this.placeholders = placeholders;
1412
1421
  this.components = components;
1413
1422
  }
1414
- setIsDragging(isDragging) {
1415
- this.placeholders.forEach(placeholder => {
1416
- placeholder.setIsVisible(isDragging);
1417
- });
1418
- }
1419
1423
  hasOutput() {
1420
1424
  if (this.components.length > 0) {
1421
1425
  return this.components[this.components.length - 1].hasOutput;
@@ -1457,13 +1461,9 @@ class DefaultSequenceComponent {
1457
1461
  }
1458
1462
  return null;
1459
1463
  }
1460
- getPlaceholders(result) {
1461
- this.view.placeholders.forEach(placeholder => result.push(placeholder));
1462
- this.view.components.forEach(c => c.getPlaceholders(result));
1463
- }
1464
- setIsDragging(isDragging) {
1465
- this.view.setIsDragging(isDragging);
1466
- this.view.components.forEach(c => c.setIsDragging(isDragging));
1464
+ resolvePlaceholders(skipComponent, result) {
1465
+ this.view.placeholders.forEach(placeholder => result.placeholders.push(placeholder));
1466
+ this.view.components.forEach(c => c.resolvePlaceholders(skipComponent, result));
1467
1467
  }
1468
1468
  updateBadges(result) {
1469
1469
  for (const component of this.view.components) {
@@ -2497,8 +2497,8 @@ class WorkspaceControllerWrapper {
2497
2497
  }
2498
2498
  return this.controller;
2499
2499
  }
2500
- getPlaceholders() {
2501
- return this.get().getPlaceholders();
2500
+ resolvePlaceholders(skipComponent) {
2501
+ return this.get().resolvePlaceholders(skipComponent);
2502
2502
  }
2503
2503
  getComponentByStepId(stepId) {
2504
2504
  return this.get().getComponentByStepId(stepId);
@@ -2547,6 +2547,7 @@ class DesignerContext {
2547
2547
  const theme = configuration.theme || 'light';
2548
2548
  const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
2549
2549
  const workspaceController = new WorkspaceControllerWrapper();
2550
+ const placeholderController = services.placeholderController.create();
2550
2551
  const behaviorController = new BehaviorController();
2551
2552
  const stepExtensionResolver = StepExtensionResolver.create(services);
2552
2553
  const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new DefinitionWalker();
@@ -2558,10 +2559,10 @@ class DesignerContext {
2558
2559
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
2559
2560
  }
2560
2561
  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);
2562
+ const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
2563
+ return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
2563
2564
  }
2564
- constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController) {
2565
+ constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
2565
2566
  this.theme = theme;
2566
2567
  this.state = state;
2567
2568
  this.configuration = configuration;
@@ -2572,6 +2573,7 @@ class DesignerContext {
2572
2573
  this.stateModifier = stateModifier;
2573
2574
  this.layoutController = layoutController;
2574
2575
  this.workspaceController = workspaceController;
2576
+ this.placeholderController = placeholderController;
2575
2577
  this.behaviorController = behaviorController;
2576
2578
  this.customActionController = customActionController;
2577
2579
  this.historyController = historyController;
@@ -3080,8 +3082,7 @@ class Workspace {
3080
3082
  api.viewport.resetViewport();
3081
3083
  });
3082
3084
  designerContext.setWorkspaceController(workspace);
3083
- designerContext.state.onViewportChanged.subscribe(vp => workspace.onViewportChanged(vp));
3084
- designerContext.state.onIsDraggingChanged.subscribe(is => workspace.onIsDraggingChanged(is));
3085
+ designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
3085
3086
  race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
3086
3087
  workspace.onStateChanged(r[0], r[1], r[2]);
3087
3088
  });
@@ -3123,6 +3124,9 @@ class Workspace {
3123
3124
  const commandOrNull = this.resolveClick(target, position);
3124
3125
  this.contextMenuController.tryOpen(position, commandOrNull);
3125
3126
  };
3127
+ this.onViewportChanged = (viewport) => {
3128
+ this.view.setPositionAndScale(viewport.position, viewport.scale);
3129
+ };
3126
3130
  }
3127
3131
  updateRootComponent() {
3128
3132
  this.selectedStepComponent = null;
@@ -3158,9 +3162,12 @@ class Workspace {
3158
3162
  }
3159
3163
  this.isValid = Boolean(result[this.validationErrorBadgeIndex]);
3160
3164
  }
3161
- getPlaceholders() {
3162
- const result = [];
3163
- this.getRootComponent().getPlaceholders(result);
3165
+ resolvePlaceholders(skipComponent) {
3166
+ const result = {
3167
+ placeholders: [],
3168
+ components: []
3169
+ };
3170
+ this.getRootComponent().resolvePlaceholders(skipComponent, result);
3164
3171
  return result;
3165
3172
  }
3166
3173
  getComponentByStepId(stepId) {
@@ -3187,12 +3194,6 @@ class Workspace {
3187
3194
  this.contextMenuController.destroy();
3188
3195
  this.view.destroy();
3189
3196
  }
3190
- onIsDraggingChanged(isDragging) {
3191
- this.getRootComponent().setIsDragging(isDragging);
3192
- }
3193
- onViewportChanged(viewport) {
3194
- this.view.setPositionAndScale(viewport.position, viewport.scale);
3195
- }
3196
3197
  onStateChanged(definitionChanged, selectedStepIdChanged, folderPathChanged) {
3197
3198
  if (folderPathChanged) {
3198
3199
  this.updateRootComponent();
@@ -3285,15 +3286,16 @@ class DefaultDraggedComponent {
3285
3286
  canvas.style.marginLeft = -SAFE_OFFSET + 'px';
3286
3287
  canvas.style.marginTop = -SAFE_OFFSET + 'px';
3287
3288
  parent.appendChild(canvas);
3288
- const fakeStepContext = {
3289
+ const previewStepContext = {
3289
3290
  parentSequence: [],
3290
3291
  step,
3291
3292
  depth: 0,
3292
3293
  position: 0,
3293
3294
  isInputConnected: true,
3294
- isOutputConnected: true
3295
+ isOutputConnected: true,
3296
+ isPreview: true
3295
3297
  };
3296
- const stepComponent = componentContext.stepComponentFactory.create(canvas, fakeStepContext, componentContext);
3298
+ const stepComponent = componentContext.stepComponentFactory.create(canvas, previewStepContext, componentContext);
3297
3299
  Dom.attrs(canvas, {
3298
3300
  width: stepComponent.view.width + SAFE_OFFSET * 2,
3299
3301
  height: stepComponent.view.height + SAFE_OFFSET * 2
@@ -4023,7 +4025,8 @@ class StartStopRootComponentView {
4023
4025
  sequence,
4024
4026
  depth: 0,
4025
4027
  isInputConnected: true,
4026
- isOutputConnected: true
4028
+ isOutputConnected: true,
4029
+ isPreview: false
4027
4030
  }, context);
4028
4031
  const view = sequenceComponent.view;
4029
4032
  const x = view.joinX - SIZE / 2;
@@ -4093,18 +4096,11 @@ class StartStopRootComponent {
4093
4096
  findById(stepId) {
4094
4097
  return this.view.component.findById(stepId);
4095
4098
  }
4096
- getPlaceholders(result) {
4097
- this.view.component.getPlaceholders(result);
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);
4099
+ resolvePlaceholders(skipComponent, result) {
4100
+ this.view.component.resolvePlaceholders(skipComponent, result);
4105
4101
  if (this.view.startPlaceholder && this.view.endPlaceholder) {
4106
- this.view.startPlaceholder.setIsVisible(isDragging);
4107
- this.view.endPlaceholder.setIsVisible(isDragging);
4102
+ result.placeholders.push(this.view.startPlaceholder);
4103
+ result.placeholders.push(this.view.endPlaceholder);
4108
4104
  }
4109
4105
  }
4110
4106
  updateBadges(result) {
package/lib/index.d.ts CHANGED
@@ -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
- getPlaceholders(result: Placeholder[]): void;
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
- getPlaceholders(result: Placeholder[]): void;
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
- getPlaceholders(): Placeholder[];
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
- getPlaceholders(): Placeholder[];
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
 
@@ -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
- getPlaceholders(result: Placeholder[]): void;
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.21.4",
4
+ "version": "0.22.0",
5
5
  "type": "module",
6
6
  "main": "./lib/esm/index.js",
7
7
  "types": "./lib/index.d.ts",