sequential-workflow-designer 0.28.0 → 0.29.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.
Files changed (6) hide show
  1. package/README.md +4 -4
  2. package/dist/index.umd.js +107 -76
  3. package/lib/cjs/index.cjs +108 -77
  4. package/lib/esm/index.js +107 -76
  5. package/lib/index.d.ts +8 -3
  6. package/package.json +5 -5
package/README.md CHANGED
@@ -104,10 +104,10 @@ Add the below code to your head section in HTML document.
104
104
  ```html
105
105
  <head>
106
106
  ...
107
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.28.0/css/designer.css" rel="stylesheet">
108
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.28.0/css/designer-light.css" rel="stylesheet">
109
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.28.0/css/designer-dark.css" rel="stylesheet">
110
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.28.0/dist/index.umd.js"></script>
107
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.1/css/designer.css" rel="stylesheet">
108
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.1/css/designer-light.css" rel="stylesheet">
109
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.1/css/designer-dark.css" rel="stylesheet">
110
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.1/dist/index.umd.js"></script>
111
111
  ```
112
112
 
113
113
  Call the designer by:
package/dist/index.umd.js CHANGED
@@ -425,14 +425,16 @@
425
425
  class PlaceholderFinder {
426
426
  static create(placeholders, state) {
427
427
  const checker = new PlaceholderFinder(placeholders, state);
428
- state.onViewportChanged.subscribe(checker.clearCacheHandler);
429
- window.addEventListener('scroll', checker.clearCacheHandler, false);
428
+ state.onViewportChanged.subscribe(checker.clearCache);
429
+ window.addEventListener('scroll', checker.clearCache, false);
430
430
  return checker;
431
431
  }
432
432
  constructor(placeholders, state) {
433
433
  this.placeholders = placeholders;
434
434
  this.state = state;
435
- this.clearCacheHandler = () => this.clearCache();
435
+ this.clearCache = () => {
436
+ this.cache = undefined;
437
+ };
436
438
  }
437
439
  find(vLt, vWidth, vHeight) {
438
440
  var _a;
@@ -455,11 +457,8 @@
455
457
  })) === null || _a === void 0 ? void 0 : _a.placeholder;
456
458
  }
457
459
  destroy() {
458
- this.state.onViewportChanged.unsubscribe(this.clearCacheHandler);
459
- window.removeEventListener('scroll', this.clearCacheHandler, false);
460
- }
461
- clearCache() {
462
- this.cache = undefined;
460
+ this.state.onViewportChanged.unsubscribe(this.clearCache);
461
+ window.removeEventListener('scroll', this.clearCache, false);
463
462
  }
464
463
  }
465
464
 
@@ -1263,11 +1262,11 @@
1263
1262
  parent.appendChild(circle);
1264
1263
  return new InputView(circle);
1265
1264
  }
1266
- constructor(root) {
1267
- this.root = root;
1265
+ constructor(g) {
1266
+ this.g = g;
1268
1267
  }
1269
1268
  setIsHidden(isHidden) {
1270
- Dom.attrs(this.root, {
1269
+ Dom.attrs(this.g, {
1271
1270
  visibility: isHidden ? 'hidden' : 'visible'
1272
1271
  });
1273
1272
  }
@@ -1692,31 +1691,77 @@
1692
1691
  };
1693
1692
 
1694
1693
  const COMPONENT_CLASS_NAME$1 = 'switch';
1694
+ function createView(g, width, height, joinX, viewContext, sequenceComponents, regionView, cfg) {
1695
+ let inputView = null;
1696
+ if (cfg.inputSize > 0) {
1697
+ const iconUrl = viewContext.getStepIconUrl();
1698
+ inputView = InputView.createRectInput(g, joinX, cfg.paddingTop1, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
1699
+ }
1700
+ return {
1701
+ g,
1702
+ width,
1703
+ height,
1704
+ joinX,
1705
+ placeholders: null,
1706
+ sequenceComponents,
1707
+ hasOutput: sequenceComponents ? sequenceComponents.some(c => c.hasOutput) : true,
1708
+ getClientPosition() {
1709
+ return regionView.getClientPosition();
1710
+ },
1711
+ resolveClick(click) {
1712
+ const result = regionView.resolveClick(click);
1713
+ return result === true || (result === null && g.contains(click.element)) ? true : result;
1714
+ },
1715
+ setIsDragging(isDragging) {
1716
+ if (cfg.autoHideInputOnDrag && inputView) {
1717
+ inputView.setIsHidden(isDragging);
1718
+ }
1719
+ },
1720
+ setIsSelected(isSelected) {
1721
+ regionView.setIsSelected(isSelected);
1722
+ },
1723
+ setIsDisabled(isDisabled) {
1724
+ Dom.toggleClass(g, isDisabled, 'sqd-disabled');
1725
+ }
1726
+ };
1727
+ }
1695
1728
  const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
1696
1729
  return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME$1, (g, regionViewBuilder) => {
1697
1730
  const step = stepContext.step;
1698
1731
  const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
1732
+ const name = viewContext.getStepName();
1733
+ const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
1699
1734
  const branchNames = Object.keys(step.branches);
1700
- const branchComponents = branchNames.map(branchName => {
1701
- return viewContext.createSequenceComponent(g, step.branches[branchName]);
1702
- });
1703
- const branchLabelViews = branchNames.map(branchName => {
1735
+ if (branchNames.length === 0) {
1736
+ const width = Math.max(nameLabelView.width, cfg.minBranchWidth) + cfg.paddingX * 2;
1737
+ const height = nameLabelView.height + paddingTop + cfg.noBranchPaddingBottom;
1738
+ const joinX = width / 2;
1739
+ const regionView = regionViewBuilder(g, [width], height);
1740
+ Dom.translate(nameLabelView.g, joinX, 0);
1741
+ JoinView.createStraightJoin(g, new Vector(joinX, 0), height);
1742
+ return createView(g, width, height, joinX, viewContext, null, regionView, cfg);
1743
+ }
1744
+ const branchComponents = [];
1745
+ const branchLabelViews = [];
1746
+ const branchSizes = [];
1747
+ let totalBranchesWidth = 0;
1748
+ let maxBranchesHeight = 0;
1749
+ branchNames.forEach(branchName => {
1750
+ const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
1704
1751
  const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1705
1752
  const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
1706
- return LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1707
- });
1708
- const name = viewContext.getStepName();
1709
- const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
1710
- let prevOffsetX = 0;
1711
- const branchSizes = branchComponents.map((component, i) => {
1712
- const halfOfWidestBranchElement = Math.max(branchLabelViews[i].width, cfg.minContainerWidth) / 2;
1753
+ const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1754
+ const halfOfWidestBranchElement = Math.max(labelView.width, cfg.minBranchWidth) / 2;
1713
1755
  const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
1714
1756
  const branchOffsetRight = Math.max(halfOfWidestBranchElement - (component.view.width - component.view.joinX), 0) + cfg.paddingX;
1715
1757
  const width = component.view.width + branchOffsetLeft + branchOffsetRight;
1716
1758
  const joinX = component.view.joinX + branchOffsetLeft;
1717
- const offsetX = prevOffsetX;
1718
- prevOffsetX += width;
1719
- return { width, branchOffsetLeft, offsetX, joinX };
1759
+ const offsetX = totalBranchesWidth;
1760
+ totalBranchesWidth += width;
1761
+ maxBranchesHeight = Math.max(maxBranchesHeight, component.view.height);
1762
+ branchComponents.push(component);
1763
+ branchLabelViews.push(labelView);
1764
+ branchSizes.push({ width, branchOffsetLeft, offsetX, joinX });
1720
1765
  });
1721
1766
  const centerBranchIndex = Math.floor(branchNames.length / 2);
1722
1767
  const centerBranchSize = branchSizes[centerBranchIndex];
@@ -1724,8 +1769,6 @@
1724
1769
  if (branchNames.length % 2 !== 0) {
1725
1770
  joinX += centerBranchSize.joinX;
1726
1771
  }
1727
- const totalBranchesWidth = branchSizes.reduce((result, s) => result + s.width, 0);
1728
- const maxBranchesHeight = Math.max(...branchComponents.map(s => s.view.height));
1729
1772
  const halfOfWidestSwitchElement = nameLabelView.width / 2 + cfg.paddingX;
1730
1773
  const switchOffsetLeft = Math.max(halfOfWidestSwitchElement - joinX, 0);
1731
1774
  const switchOffsetRight = Math.max(halfOfWidestSwitchElement - (totalBranchesWidth - joinX), 0);
@@ -1747,18 +1790,16 @@
1747
1790
  }
1748
1791
  }
1749
1792
  });
1750
- let inputView = null;
1751
- if (cfg.inputSize > 0) {
1752
- const iconUrl = viewContext.getStepIconUrl();
1753
- inputView = InputView.createRectInput(g, shiftedJoinX, cfg.paddingTop1, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
1754
- }
1755
1793
  JoinView.createStraightJoin(g, new Vector(shiftedJoinX, 0), paddingTop);
1756
- JoinView.createJoins(g, new Vector(shiftedJoinX, paddingTop + cfg.nameLabel.height), branchSizes.map(o => new Vector(switchOffsetLeft + o.offsetX + o.joinX, paddingTop + cfg.nameLabel.height + cfg.connectionHeight)));
1794
+ JoinView.createJoins(g, new Vector(shiftedJoinX, paddingTop + cfg.nameLabel.height), branchSizes.map(s => new Vector(switchOffsetLeft + s.offsetX + s.joinX, paddingTop + cfg.nameLabel.height + cfg.connectionHeight)));
1757
1795
  if (stepContext.isOutputConnected) {
1758
1796
  const ongoingSequenceIndexes = branchComponents
1759
1797
  .map((component, index) => (component.hasOutput ? index : null))
1760
1798
  .filter(index => index !== null);
1761
- const ongoingJoinTargets = ongoingSequenceIndexes.map((i) => new Vector(switchOffsetLeft + branchSizes[i].offsetX + branchSizes[i].joinX, paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight));
1799
+ const ongoingJoinTargets = ongoingSequenceIndexes.map((i) => {
1800
+ const branchSize = branchSizes[i];
1801
+ return new Vector(switchOffsetLeft + branchSize.offsetX + branchSize.joinX, paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight);
1802
+ });
1762
1803
  if (ongoingJoinTargets.length > 0) {
1763
1804
  JoinView.createJoins(g, new Vector(shiftedJoinX, viewHeight), ongoingJoinTargets);
1764
1805
  }
@@ -1767,33 +1808,7 @@
1767
1808
  regions[0] += switchOffsetLeft;
1768
1809
  regions[regions.length - 1] += switchOffsetRight;
1769
1810
  const regionView = regionViewBuilder(g, regions, viewHeight);
1770
- return {
1771
- g,
1772
- width: viewWidth,
1773
- height: viewHeight,
1774
- joinX: shiftedJoinX,
1775
- placeholders: null,
1776
- sequenceComponents: branchComponents,
1777
- hasOutput: branchComponents.some(c => c.hasOutput),
1778
- getClientPosition() {
1779
- return regionView.getClientPosition();
1780
- },
1781
- resolveClick(click) {
1782
- const result = regionView.resolveClick(click);
1783
- return result === true || (result === null && g.contains(click.element)) ? true : result;
1784
- },
1785
- setIsDragging(isDragging) {
1786
- if (cfg.autoHideInputOnDrag && inputView) {
1787
- inputView.setIsHidden(isDragging);
1788
- }
1789
- },
1790
- setIsSelected(isSelected) {
1791
- regionView.setIsSelected(isSelected);
1792
- },
1793
- setIsDisabled(isDisabled) {
1794
- Dom.toggleClass(g, isDisabled, 'sqd-disabled');
1795
- }
1796
- };
1811
+ return createView(g, viewWidth, viewHeight, shiftedJoinX, viewContext, branchComponents, regionView, cfg);
1797
1812
  });
1798
1813
  };
1799
1814
 
@@ -2318,11 +2333,12 @@
2318
2333
 
2319
2334
  const defaultConfiguration$2 = {
2320
2335
  view: {
2321
- minContainerWidth: 40,
2336
+ minBranchWidth: 88,
2322
2337
  paddingX: 20,
2323
2338
  paddingTop1: 0,
2324
2339
  paddingTop2: 22,
2325
- connectionHeight: 16,
2340
+ connectionHeight: 20,
2341
+ noBranchPaddingBottom: 24,
2326
2342
  inputSize: 18,
2327
2343
  inputIconSize: 14,
2328
2344
  inputRadius: 4,
@@ -3199,6 +3215,8 @@
3199
3215
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
3200
3216
  PERFORMANCE OF THIS SOFTWARE.
3201
3217
  ***************************************************************************** */
3218
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
3219
+
3202
3220
 
3203
3221
  function __awaiter(thisArg, _arguments, P, generator) {
3204
3222
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -3208,7 +3226,12 @@
3208
3226
  function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
3209
3227
  step((generator = generator.apply(thisArg, _arguments || [])).next());
3210
3228
  });
3211
- }
3229
+ }
3230
+
3231
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
3232
+ var e = new Error(message);
3233
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
3234
+ };
3212
3235
 
3213
3236
  function isElementAttached(dom, element) {
3214
3237
  return !(dom.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
@@ -3246,7 +3269,7 @@
3246
3269
  workspace.appendChild(canvas);
3247
3270
  parent.appendChild(workspace);
3248
3271
  const view = new WorkspaceView(componentContext.shadowRoot, workspace, canvas, pattern, gridPattern, foreground, componentContext);
3249
- window.addEventListener('resize', view.onResizeHandler, false);
3272
+ window.addEventListener('resize', view.onResize, false);
3250
3273
  return view;
3251
3274
  }
3252
3275
  constructor(shadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
@@ -3257,7 +3280,9 @@
3257
3280
  this.gridPattern = gridPattern;
3258
3281
  this.foreground = foreground;
3259
3282
  this.context = context;
3260
- this.onResizeHandler = () => this.onResize();
3283
+ this.onResize = () => {
3284
+ this.refreshSize();
3285
+ };
3261
3286
  }
3262
3287
  render(sequence, parentPlaceIndicator) {
3263
3288
  if (this.rootComponent) {
@@ -3318,7 +3343,7 @@
3318
3343
  this.canvas.addEventListener('wheel', handler, listenerOptions$1);
3319
3344
  }
3320
3345
  destroy() {
3321
- window.removeEventListener('resize', this.onResizeHandler, false);
3346
+ window.removeEventListener('resize', this.onResize, false);
3322
3347
  }
3323
3348
  refreshSize() {
3324
3349
  Dom.attrs(this.canvas, {
@@ -3326,9 +3351,6 @@
3326
3351
  height: this.workspace.offsetHeight
3327
3352
  });
3328
3353
  }
3329
- onResize() {
3330
- this.refreshSize();
3331
- }
3332
3354
  }
3333
3355
 
3334
3356
  class MoveViewportBehavior {
@@ -3777,10 +3799,6 @@
3777
3799
  : undefined);
3778
3800
  const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
3779
3801
  const workspace = new Workspace(view, designerContext.state, designerContext.behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, api.viewport, api.workspace, designerContext.services);
3780
- setTimeout(() => {
3781
- workspace.updateRootComponent();
3782
- api.viewport.resetViewport();
3783
- });
3784
3802
  designerContext.setWorkspaceController(workspace);
3785
3803
  designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
3786
3804
  race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
@@ -3790,6 +3808,7 @@
3790
3808
  view.bindTouchStart(workspace.onClick, workspace.onPinchToZoom);
3791
3809
  view.bindWheel(workspace.onWheel);
3792
3810
  view.bindContextMenu(workspace.onContextMenu);
3811
+ workspace.scheduleInit();
3793
3812
  return workspace;
3794
3813
  }
3795
3814
  constructor(view, state, behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, viewportApi, workspaceApi, services) {
@@ -3806,6 +3825,7 @@
3806
3825
  this.services = services;
3807
3826
  this.onRendered = new SimpleEvent();
3808
3827
  this.isValid = false;
3828
+ this.initTimeout = null;
3809
3829
  this.selectedStepComponent = null;
3810
3830
  this.validationErrorBadgeIndex = null;
3811
3831
  this.onClick = (position, target, buttonIndex, altKey) => {
@@ -3835,6 +3855,13 @@
3835
3855
  this.view.setPositionAndScale(viewport.position, viewport.scale);
3836
3856
  };
3837
3857
  }
3858
+ scheduleInit() {
3859
+ this.initTimeout = setTimeout(() => {
3860
+ this.initTimeout = null;
3861
+ this.updateRootComponent();
3862
+ this.viewportApi.resetViewport();
3863
+ });
3864
+ }
3838
3865
  updateRootComponent() {
3839
3866
  this.selectedStepComponent = null;
3840
3867
  const rootSequence = this.workspaceApi.getRootSequence();
@@ -3886,6 +3913,10 @@
3886
3913
  setTimeout(() => this.view.refreshSize());
3887
3914
  }
3888
3915
  destroy() {
3916
+ if (this.initTimeout) {
3917
+ clearTimeout(this.initTimeout);
3918
+ this.initTimeout = null;
3919
+ }
3889
3920
  this.contextMenuController.destroy();
3890
3921
  this.view.destroy();
3891
3922
  }
@@ -3983,8 +4014,8 @@
3983
4014
  class DefaultDraggedComponent {
3984
4015
  static create(parent, step, componentContext) {
3985
4016
  const canvas = Dom.svg('svg');
3986
- canvas.style.marginLeft = -SAFE_OFFSET + 'px';
3987
- canvas.style.marginTop = -SAFE_OFFSET + 'px';
4017
+ canvas.style.marginLeft = -10 + 'px';
4018
+ canvas.style.marginTop = -10 + 'px';
3988
4019
  parent.appendChild(canvas);
3989
4020
  const previewStepContext = {
3990
4021
  parentSequence: [],
package/lib/cjs/index.cjs CHANGED
@@ -423,14 +423,16 @@ class DragStepView {
423
423
  class PlaceholderFinder {
424
424
  static create(placeholders, state) {
425
425
  const checker = new PlaceholderFinder(placeholders, state);
426
- state.onViewportChanged.subscribe(checker.clearCacheHandler);
427
- window.addEventListener('scroll', checker.clearCacheHandler, false);
426
+ state.onViewportChanged.subscribe(checker.clearCache);
427
+ window.addEventListener('scroll', checker.clearCache, false);
428
428
  return checker;
429
429
  }
430
430
  constructor(placeholders, state) {
431
431
  this.placeholders = placeholders;
432
432
  this.state = state;
433
- this.clearCacheHandler = () => this.clearCache();
433
+ this.clearCache = () => {
434
+ this.cache = undefined;
435
+ };
434
436
  }
435
437
  find(vLt, vWidth, vHeight) {
436
438
  var _a;
@@ -453,11 +455,8 @@ class PlaceholderFinder {
453
455
  })) === null || _a === void 0 ? void 0 : _a.placeholder;
454
456
  }
455
457
  destroy() {
456
- this.state.onViewportChanged.unsubscribe(this.clearCacheHandler);
457
- window.removeEventListener('scroll', this.clearCacheHandler, false);
458
- }
459
- clearCache() {
460
- this.cache = undefined;
458
+ this.state.onViewportChanged.unsubscribe(this.clearCache);
459
+ window.removeEventListener('scroll', this.clearCache, false);
461
460
  }
462
461
  }
463
462
 
@@ -1078,11 +1077,11 @@ class InputView {
1078
1077
  parent.appendChild(circle);
1079
1078
  return new InputView(circle);
1080
1079
  }
1081
- constructor(root) {
1082
- this.root = root;
1080
+ constructor(g) {
1081
+ this.g = g;
1083
1082
  }
1084
1083
  setIsHidden(isHidden) {
1085
- Dom.attrs(this.root, {
1084
+ Dom.attrs(this.g, {
1086
1085
  visibility: isHidden ? 'hidden' : 'visible'
1087
1086
  });
1088
1087
  }
@@ -1507,31 +1506,77 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
1507
1506
  };
1508
1507
 
1509
1508
  const COMPONENT_CLASS_NAME$1 = 'switch';
1509
+ function createView(g, width, height, joinX, viewContext, sequenceComponents, regionView, cfg) {
1510
+ let inputView = null;
1511
+ if (cfg.inputSize > 0) {
1512
+ const iconUrl = viewContext.getStepIconUrl();
1513
+ inputView = InputView.createRectInput(g, joinX, cfg.paddingTop1, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
1514
+ }
1515
+ return {
1516
+ g,
1517
+ width,
1518
+ height,
1519
+ joinX,
1520
+ placeholders: null,
1521
+ sequenceComponents,
1522
+ hasOutput: sequenceComponents ? sequenceComponents.some(c => c.hasOutput) : true,
1523
+ getClientPosition() {
1524
+ return regionView.getClientPosition();
1525
+ },
1526
+ resolveClick(click) {
1527
+ const result = regionView.resolveClick(click);
1528
+ return result === true || (result === null && g.contains(click.element)) ? true : result;
1529
+ },
1530
+ setIsDragging(isDragging) {
1531
+ if (cfg.autoHideInputOnDrag && inputView) {
1532
+ inputView.setIsHidden(isDragging);
1533
+ }
1534
+ },
1535
+ setIsSelected(isSelected) {
1536
+ regionView.setIsSelected(isSelected);
1537
+ },
1538
+ setIsDisabled(isDisabled) {
1539
+ Dom.toggleClass(g, isDisabled, 'sqd-disabled');
1540
+ }
1541
+ };
1542
+ }
1510
1543
  const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
1511
1544
  return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME$1, (g, regionViewBuilder) => {
1512
1545
  const step = stepContext.step;
1513
1546
  const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
1547
+ const name = viewContext.getStepName();
1548
+ const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
1514
1549
  const branchNames = Object.keys(step.branches);
1515
- const branchComponents = branchNames.map(branchName => {
1516
- return viewContext.createSequenceComponent(g, step.branches[branchName]);
1517
- });
1518
- const branchLabelViews = branchNames.map(branchName => {
1550
+ if (branchNames.length === 0) {
1551
+ const width = Math.max(nameLabelView.width, cfg.minBranchWidth) + cfg.paddingX * 2;
1552
+ const height = nameLabelView.height + paddingTop + cfg.noBranchPaddingBottom;
1553
+ const joinX = width / 2;
1554
+ const regionView = regionViewBuilder(g, [width], height);
1555
+ Dom.translate(nameLabelView.g, joinX, 0);
1556
+ JoinView.createStraightJoin(g, new Vector(joinX, 0), height);
1557
+ return createView(g, width, height, joinX, viewContext, null, regionView, cfg);
1558
+ }
1559
+ const branchComponents = [];
1560
+ const branchLabelViews = [];
1561
+ const branchSizes = [];
1562
+ let totalBranchesWidth = 0;
1563
+ let maxBranchesHeight = 0;
1564
+ branchNames.forEach(branchName => {
1565
+ const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
1519
1566
  const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1520
1567
  const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
1521
- return LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1522
- });
1523
- const name = viewContext.getStepName();
1524
- const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
1525
- let prevOffsetX = 0;
1526
- const branchSizes = branchComponents.map((component, i) => {
1527
- const halfOfWidestBranchElement = Math.max(branchLabelViews[i].width, cfg.minContainerWidth) / 2;
1568
+ const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1569
+ const halfOfWidestBranchElement = Math.max(labelView.width, cfg.minBranchWidth) / 2;
1528
1570
  const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
1529
1571
  const branchOffsetRight = Math.max(halfOfWidestBranchElement - (component.view.width - component.view.joinX), 0) + cfg.paddingX;
1530
1572
  const width = component.view.width + branchOffsetLeft + branchOffsetRight;
1531
1573
  const joinX = component.view.joinX + branchOffsetLeft;
1532
- const offsetX = prevOffsetX;
1533
- prevOffsetX += width;
1534
- return { width, branchOffsetLeft, offsetX, joinX };
1574
+ const offsetX = totalBranchesWidth;
1575
+ totalBranchesWidth += width;
1576
+ maxBranchesHeight = Math.max(maxBranchesHeight, component.view.height);
1577
+ branchComponents.push(component);
1578
+ branchLabelViews.push(labelView);
1579
+ branchSizes.push({ width, branchOffsetLeft, offsetX, joinX });
1535
1580
  });
1536
1581
  const centerBranchIndex = Math.floor(branchNames.length / 2);
1537
1582
  const centerBranchSize = branchSizes[centerBranchIndex];
@@ -1539,8 +1584,6 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1539
1584
  if (branchNames.length % 2 !== 0) {
1540
1585
  joinX += centerBranchSize.joinX;
1541
1586
  }
1542
- const totalBranchesWidth = branchSizes.reduce((result, s) => result + s.width, 0);
1543
- const maxBranchesHeight = Math.max(...branchComponents.map(s => s.view.height));
1544
1587
  const halfOfWidestSwitchElement = nameLabelView.width / 2 + cfg.paddingX;
1545
1588
  const switchOffsetLeft = Math.max(halfOfWidestSwitchElement - joinX, 0);
1546
1589
  const switchOffsetRight = Math.max(halfOfWidestSwitchElement - (totalBranchesWidth - joinX), 0);
@@ -1562,18 +1605,16 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1562
1605
  }
1563
1606
  }
1564
1607
  });
1565
- let inputView = null;
1566
- if (cfg.inputSize > 0) {
1567
- const iconUrl = viewContext.getStepIconUrl();
1568
- inputView = InputView.createRectInput(g, shiftedJoinX, cfg.paddingTop1, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
1569
- }
1570
1608
  JoinView.createStraightJoin(g, new Vector(shiftedJoinX, 0), paddingTop);
1571
- JoinView.createJoins(g, new Vector(shiftedJoinX, paddingTop + cfg.nameLabel.height), branchSizes.map(o => new Vector(switchOffsetLeft + o.offsetX + o.joinX, paddingTop + cfg.nameLabel.height + cfg.connectionHeight)));
1609
+ JoinView.createJoins(g, new Vector(shiftedJoinX, paddingTop + cfg.nameLabel.height), branchSizes.map(s => new Vector(switchOffsetLeft + s.offsetX + s.joinX, paddingTop + cfg.nameLabel.height + cfg.connectionHeight)));
1572
1610
  if (stepContext.isOutputConnected) {
1573
1611
  const ongoingSequenceIndexes = branchComponents
1574
1612
  .map((component, index) => (component.hasOutput ? index : null))
1575
1613
  .filter(index => index !== null);
1576
- const ongoingJoinTargets = ongoingSequenceIndexes.map((i) => new Vector(switchOffsetLeft + branchSizes[i].offsetX + branchSizes[i].joinX, paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight));
1614
+ const ongoingJoinTargets = ongoingSequenceIndexes.map((i) => {
1615
+ const branchSize = branchSizes[i];
1616
+ return new Vector(switchOffsetLeft + branchSize.offsetX + branchSize.joinX, paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight);
1617
+ });
1577
1618
  if (ongoingJoinTargets.length > 0) {
1578
1619
  JoinView.createJoins(g, new Vector(shiftedJoinX, viewHeight), ongoingJoinTargets);
1579
1620
  }
@@ -1582,33 +1623,7 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1582
1623
  regions[0] += switchOffsetLeft;
1583
1624
  regions[regions.length - 1] += switchOffsetRight;
1584
1625
  const regionView = regionViewBuilder(g, regions, viewHeight);
1585
- return {
1586
- g,
1587
- width: viewWidth,
1588
- height: viewHeight,
1589
- joinX: shiftedJoinX,
1590
- placeholders: null,
1591
- sequenceComponents: branchComponents,
1592
- hasOutput: branchComponents.some(c => c.hasOutput),
1593
- getClientPosition() {
1594
- return regionView.getClientPosition();
1595
- },
1596
- resolveClick(click) {
1597
- const result = regionView.resolveClick(click);
1598
- return result === true || (result === null && g.contains(click.element)) ? true : result;
1599
- },
1600
- setIsDragging(isDragging) {
1601
- if (cfg.autoHideInputOnDrag && inputView) {
1602
- inputView.setIsHidden(isDragging);
1603
- }
1604
- },
1605
- setIsSelected(isSelected) {
1606
- regionView.setIsSelected(isSelected);
1607
- },
1608
- setIsDisabled(isDisabled) {
1609
- Dom.toggleClass(g, isDisabled, 'sqd-disabled');
1610
- }
1611
- };
1626
+ return createView(g, viewWidth, viewHeight, shiftedJoinX, viewContext, branchComponents, regionView, cfg);
1612
1627
  });
1613
1628
  };
1614
1629
 
@@ -2133,11 +2148,12 @@ class ContainerStepExtension {
2133
2148
 
2134
2149
  const defaultConfiguration$2 = {
2135
2150
  view: {
2136
- minContainerWidth: 40,
2151
+ minBranchWidth: 88,
2137
2152
  paddingX: 20,
2138
2153
  paddingTop1: 0,
2139
2154
  paddingTop2: 22,
2140
- connectionHeight: 16,
2155
+ connectionHeight: 20,
2156
+ noBranchPaddingBottom: 24,
2141
2157
  inputSize: 18,
2142
2158
  inputIconSize: 14,
2143
2159
  inputRadius: 4,
@@ -3014,6 +3030,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
3014
3030
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
3015
3031
  PERFORMANCE OF THIS SOFTWARE.
3016
3032
  ***************************************************************************** */
3033
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
3034
+
3017
3035
 
3018
3036
  function __awaiter(thisArg, _arguments, P, generator) {
3019
3037
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -3023,7 +3041,12 @@ function __awaiter(thisArg, _arguments, P, generator) {
3023
3041
  function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
3024
3042
  step((generator = generator.apply(thisArg, _arguments || [])).next());
3025
3043
  });
3026
- }
3044
+ }
3045
+
3046
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
3047
+ var e = new Error(message);
3048
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
3049
+ };
3027
3050
 
3028
3051
  function isElementAttached(dom, element) {
3029
3052
  return !(dom.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
@@ -3061,7 +3084,7 @@ class WorkspaceView {
3061
3084
  workspace.appendChild(canvas);
3062
3085
  parent.appendChild(workspace);
3063
3086
  const view = new WorkspaceView(componentContext.shadowRoot, workspace, canvas, pattern, gridPattern, foreground, componentContext);
3064
- window.addEventListener('resize', view.onResizeHandler, false);
3087
+ window.addEventListener('resize', view.onResize, false);
3065
3088
  return view;
3066
3089
  }
3067
3090
  constructor(shadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
@@ -3072,7 +3095,9 @@ class WorkspaceView {
3072
3095
  this.gridPattern = gridPattern;
3073
3096
  this.foreground = foreground;
3074
3097
  this.context = context;
3075
- this.onResizeHandler = () => this.onResize();
3098
+ this.onResize = () => {
3099
+ this.refreshSize();
3100
+ };
3076
3101
  }
3077
3102
  render(sequence, parentPlaceIndicator) {
3078
3103
  if (this.rootComponent) {
@@ -3133,7 +3158,7 @@ class WorkspaceView {
3133
3158
  this.canvas.addEventListener('wheel', handler, listenerOptions$1);
3134
3159
  }
3135
3160
  destroy() {
3136
- window.removeEventListener('resize', this.onResizeHandler, false);
3161
+ window.removeEventListener('resize', this.onResize, false);
3137
3162
  }
3138
3163
  refreshSize() {
3139
3164
  Dom.attrs(this.canvas, {
@@ -3141,9 +3166,6 @@ class WorkspaceView {
3141
3166
  height: this.workspace.offsetHeight
3142
3167
  });
3143
3168
  }
3144
- onResize() {
3145
- this.refreshSize();
3146
- }
3147
3169
  }
3148
3170
 
3149
3171
  class MoveViewportBehavior {
@@ -3592,10 +3614,6 @@ class Workspace {
3592
3614
  : undefined);
3593
3615
  const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
3594
3616
  const workspace = new Workspace(view, designerContext.state, designerContext.behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, api.viewport, api.workspace, designerContext.services);
3595
- setTimeout(() => {
3596
- workspace.updateRootComponent();
3597
- api.viewport.resetViewport();
3598
- });
3599
3617
  designerContext.setWorkspaceController(workspace);
3600
3618
  designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
3601
3619
  race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
@@ -3605,6 +3623,7 @@ class Workspace {
3605
3623
  view.bindTouchStart(workspace.onClick, workspace.onPinchToZoom);
3606
3624
  view.bindWheel(workspace.onWheel);
3607
3625
  view.bindContextMenu(workspace.onContextMenu);
3626
+ workspace.scheduleInit();
3608
3627
  return workspace;
3609
3628
  }
3610
3629
  constructor(view, state, behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, viewportApi, workspaceApi, services) {
@@ -3621,6 +3640,7 @@ class Workspace {
3621
3640
  this.services = services;
3622
3641
  this.onRendered = new SimpleEvent();
3623
3642
  this.isValid = false;
3643
+ this.initTimeout = null;
3624
3644
  this.selectedStepComponent = null;
3625
3645
  this.validationErrorBadgeIndex = null;
3626
3646
  this.onClick = (position, target, buttonIndex, altKey) => {
@@ -3650,6 +3670,13 @@ class Workspace {
3650
3670
  this.view.setPositionAndScale(viewport.position, viewport.scale);
3651
3671
  };
3652
3672
  }
3673
+ scheduleInit() {
3674
+ this.initTimeout = setTimeout(() => {
3675
+ this.initTimeout = null;
3676
+ this.updateRootComponent();
3677
+ this.viewportApi.resetViewport();
3678
+ });
3679
+ }
3653
3680
  updateRootComponent() {
3654
3681
  this.selectedStepComponent = null;
3655
3682
  const rootSequence = this.workspaceApi.getRootSequence();
@@ -3701,6 +3728,10 @@ class Workspace {
3701
3728
  setTimeout(() => this.view.refreshSize());
3702
3729
  }
3703
3730
  destroy() {
3731
+ if (this.initTimeout) {
3732
+ clearTimeout(this.initTimeout);
3733
+ this.initTimeout = null;
3734
+ }
3704
3735
  this.contextMenuController.destroy();
3705
3736
  this.view.destroy();
3706
3737
  }
@@ -3798,8 +3829,8 @@ const SAFE_OFFSET = 10;
3798
3829
  class DefaultDraggedComponent {
3799
3830
  static create(parent, step, componentContext) {
3800
3831
  const canvas = Dom.svg('svg');
3801
- canvas.style.marginLeft = -SAFE_OFFSET + 'px';
3802
- canvas.style.marginTop = -SAFE_OFFSET + 'px';
3832
+ canvas.style.marginLeft = -10 + 'px';
3833
+ canvas.style.marginTop = -10 + 'px';
3803
3834
  parent.appendChild(canvas);
3804
3835
  const previewStepContext = {
3805
3836
  parentSequence: [],
@@ -4976,7 +5007,7 @@ exports.createTaskStepComponentViewFactory = createTaskStepComponentViewFactory;
4976
5007
  exports.getAbsolutePosition = getAbsolutePosition;
4977
5008
  exports.race = race;
4978
5009
  Object.keys(sequentialWorkflowModel).forEach(function (k) {
4979
- if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
5010
+ if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
4980
5011
  enumerable: true,
4981
5012
  get: function () { return sequentialWorkflowModel[k]; }
4982
5013
  });
package/lib/esm/index.js CHANGED
@@ -422,14 +422,16 @@ class DragStepView {
422
422
  class PlaceholderFinder {
423
423
  static create(placeholders, state) {
424
424
  const checker = new PlaceholderFinder(placeholders, state);
425
- state.onViewportChanged.subscribe(checker.clearCacheHandler);
426
- window.addEventListener('scroll', checker.clearCacheHandler, false);
425
+ state.onViewportChanged.subscribe(checker.clearCache);
426
+ window.addEventListener('scroll', checker.clearCache, false);
427
427
  return checker;
428
428
  }
429
429
  constructor(placeholders, state) {
430
430
  this.placeholders = placeholders;
431
431
  this.state = state;
432
- this.clearCacheHandler = () => this.clearCache();
432
+ this.clearCache = () => {
433
+ this.cache = undefined;
434
+ };
433
435
  }
434
436
  find(vLt, vWidth, vHeight) {
435
437
  var _a;
@@ -452,11 +454,8 @@ class PlaceholderFinder {
452
454
  })) === null || _a === void 0 ? void 0 : _a.placeholder;
453
455
  }
454
456
  destroy() {
455
- this.state.onViewportChanged.unsubscribe(this.clearCacheHandler);
456
- window.removeEventListener('scroll', this.clearCacheHandler, false);
457
- }
458
- clearCache() {
459
- this.cache = undefined;
457
+ this.state.onViewportChanged.unsubscribe(this.clearCache);
458
+ window.removeEventListener('scroll', this.clearCache, false);
460
459
  }
461
460
  }
462
461
 
@@ -1077,11 +1076,11 @@ class InputView {
1077
1076
  parent.appendChild(circle);
1078
1077
  return new InputView(circle);
1079
1078
  }
1080
- constructor(root) {
1081
- this.root = root;
1079
+ constructor(g) {
1080
+ this.g = g;
1082
1081
  }
1083
1082
  setIsHidden(isHidden) {
1084
- Dom.attrs(this.root, {
1083
+ Dom.attrs(this.g, {
1085
1084
  visibility: isHidden ? 'hidden' : 'visible'
1086
1085
  });
1087
1086
  }
@@ -1506,31 +1505,77 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
1506
1505
  };
1507
1506
 
1508
1507
  const COMPONENT_CLASS_NAME$1 = 'switch';
1508
+ function createView(g, width, height, joinX, viewContext, sequenceComponents, regionView, cfg) {
1509
+ let inputView = null;
1510
+ if (cfg.inputSize > 0) {
1511
+ const iconUrl = viewContext.getStepIconUrl();
1512
+ inputView = InputView.createRectInput(g, joinX, cfg.paddingTop1, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
1513
+ }
1514
+ return {
1515
+ g,
1516
+ width,
1517
+ height,
1518
+ joinX,
1519
+ placeholders: null,
1520
+ sequenceComponents,
1521
+ hasOutput: sequenceComponents ? sequenceComponents.some(c => c.hasOutput) : true,
1522
+ getClientPosition() {
1523
+ return regionView.getClientPosition();
1524
+ },
1525
+ resolveClick(click) {
1526
+ const result = regionView.resolveClick(click);
1527
+ return result === true || (result === null && g.contains(click.element)) ? true : result;
1528
+ },
1529
+ setIsDragging(isDragging) {
1530
+ if (cfg.autoHideInputOnDrag && inputView) {
1531
+ inputView.setIsHidden(isDragging);
1532
+ }
1533
+ },
1534
+ setIsSelected(isSelected) {
1535
+ regionView.setIsSelected(isSelected);
1536
+ },
1537
+ setIsDisabled(isDisabled) {
1538
+ Dom.toggleClass(g, isDisabled, 'sqd-disabled');
1539
+ }
1540
+ };
1541
+ }
1509
1542
  const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
1510
1543
  return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME$1, (g, regionViewBuilder) => {
1511
1544
  const step = stepContext.step;
1512
1545
  const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
1546
+ const name = viewContext.getStepName();
1547
+ const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
1513
1548
  const branchNames = Object.keys(step.branches);
1514
- const branchComponents = branchNames.map(branchName => {
1515
- return viewContext.createSequenceComponent(g, step.branches[branchName]);
1516
- });
1517
- const branchLabelViews = branchNames.map(branchName => {
1549
+ if (branchNames.length === 0) {
1550
+ const width = Math.max(nameLabelView.width, cfg.minBranchWidth) + cfg.paddingX * 2;
1551
+ const height = nameLabelView.height + paddingTop + cfg.noBranchPaddingBottom;
1552
+ const joinX = width / 2;
1553
+ const regionView = regionViewBuilder(g, [width], height);
1554
+ Dom.translate(nameLabelView.g, joinX, 0);
1555
+ JoinView.createStraightJoin(g, new Vector(joinX, 0), height);
1556
+ return createView(g, width, height, joinX, viewContext, null, regionView, cfg);
1557
+ }
1558
+ const branchComponents = [];
1559
+ const branchLabelViews = [];
1560
+ const branchSizes = [];
1561
+ let totalBranchesWidth = 0;
1562
+ let maxBranchesHeight = 0;
1563
+ branchNames.forEach(branchName => {
1564
+ const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
1518
1565
  const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1519
1566
  const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
1520
- return LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1521
- });
1522
- const name = viewContext.getStepName();
1523
- const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
1524
- let prevOffsetX = 0;
1525
- const branchSizes = branchComponents.map((component, i) => {
1526
- const halfOfWidestBranchElement = Math.max(branchLabelViews[i].width, cfg.minContainerWidth) / 2;
1567
+ const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1568
+ const halfOfWidestBranchElement = Math.max(labelView.width, cfg.minBranchWidth) / 2;
1527
1569
  const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
1528
1570
  const branchOffsetRight = Math.max(halfOfWidestBranchElement - (component.view.width - component.view.joinX), 0) + cfg.paddingX;
1529
1571
  const width = component.view.width + branchOffsetLeft + branchOffsetRight;
1530
1572
  const joinX = component.view.joinX + branchOffsetLeft;
1531
- const offsetX = prevOffsetX;
1532
- prevOffsetX += width;
1533
- return { width, branchOffsetLeft, offsetX, joinX };
1573
+ const offsetX = totalBranchesWidth;
1574
+ totalBranchesWidth += width;
1575
+ maxBranchesHeight = Math.max(maxBranchesHeight, component.view.height);
1576
+ branchComponents.push(component);
1577
+ branchLabelViews.push(labelView);
1578
+ branchSizes.push({ width, branchOffsetLeft, offsetX, joinX });
1534
1579
  });
1535
1580
  const centerBranchIndex = Math.floor(branchNames.length / 2);
1536
1581
  const centerBranchSize = branchSizes[centerBranchIndex];
@@ -1538,8 +1583,6 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1538
1583
  if (branchNames.length % 2 !== 0) {
1539
1584
  joinX += centerBranchSize.joinX;
1540
1585
  }
1541
- const totalBranchesWidth = branchSizes.reduce((result, s) => result + s.width, 0);
1542
- const maxBranchesHeight = Math.max(...branchComponents.map(s => s.view.height));
1543
1586
  const halfOfWidestSwitchElement = nameLabelView.width / 2 + cfg.paddingX;
1544
1587
  const switchOffsetLeft = Math.max(halfOfWidestSwitchElement - joinX, 0);
1545
1588
  const switchOffsetRight = Math.max(halfOfWidestSwitchElement - (totalBranchesWidth - joinX), 0);
@@ -1561,18 +1604,16 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1561
1604
  }
1562
1605
  }
1563
1606
  });
1564
- let inputView = null;
1565
- if (cfg.inputSize > 0) {
1566
- const iconUrl = viewContext.getStepIconUrl();
1567
- inputView = InputView.createRectInput(g, shiftedJoinX, cfg.paddingTop1, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
1568
- }
1569
1607
  JoinView.createStraightJoin(g, new Vector(shiftedJoinX, 0), paddingTop);
1570
- JoinView.createJoins(g, new Vector(shiftedJoinX, paddingTop + cfg.nameLabel.height), branchSizes.map(o => new Vector(switchOffsetLeft + o.offsetX + o.joinX, paddingTop + cfg.nameLabel.height + cfg.connectionHeight)));
1608
+ JoinView.createJoins(g, new Vector(shiftedJoinX, paddingTop + cfg.nameLabel.height), branchSizes.map(s => new Vector(switchOffsetLeft + s.offsetX + s.joinX, paddingTop + cfg.nameLabel.height + cfg.connectionHeight)));
1571
1609
  if (stepContext.isOutputConnected) {
1572
1610
  const ongoingSequenceIndexes = branchComponents
1573
1611
  .map((component, index) => (component.hasOutput ? index : null))
1574
1612
  .filter(index => index !== null);
1575
- const ongoingJoinTargets = ongoingSequenceIndexes.map((i) => new Vector(switchOffsetLeft + branchSizes[i].offsetX + branchSizes[i].joinX, paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight));
1613
+ const ongoingJoinTargets = ongoingSequenceIndexes.map((i) => {
1614
+ const branchSize = branchSizes[i];
1615
+ return new Vector(switchOffsetLeft + branchSize.offsetX + branchSize.joinX, paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight);
1616
+ });
1576
1617
  if (ongoingJoinTargets.length > 0) {
1577
1618
  JoinView.createJoins(g, new Vector(shiftedJoinX, viewHeight), ongoingJoinTargets);
1578
1619
  }
@@ -1581,33 +1622,7 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1581
1622
  regions[0] += switchOffsetLeft;
1582
1623
  regions[regions.length - 1] += switchOffsetRight;
1583
1624
  const regionView = regionViewBuilder(g, regions, viewHeight);
1584
- return {
1585
- g,
1586
- width: viewWidth,
1587
- height: viewHeight,
1588
- joinX: shiftedJoinX,
1589
- placeholders: null,
1590
- sequenceComponents: branchComponents,
1591
- hasOutput: branchComponents.some(c => c.hasOutput),
1592
- getClientPosition() {
1593
- return regionView.getClientPosition();
1594
- },
1595
- resolveClick(click) {
1596
- const result = regionView.resolveClick(click);
1597
- return result === true || (result === null && g.contains(click.element)) ? true : result;
1598
- },
1599
- setIsDragging(isDragging) {
1600
- if (cfg.autoHideInputOnDrag && inputView) {
1601
- inputView.setIsHidden(isDragging);
1602
- }
1603
- },
1604
- setIsSelected(isSelected) {
1605
- regionView.setIsSelected(isSelected);
1606
- },
1607
- setIsDisabled(isDisabled) {
1608
- Dom.toggleClass(g, isDisabled, 'sqd-disabled');
1609
- }
1610
- };
1625
+ return createView(g, viewWidth, viewHeight, shiftedJoinX, viewContext, branchComponents, regionView, cfg);
1611
1626
  });
1612
1627
  };
1613
1628
 
@@ -2132,11 +2147,12 @@ class ContainerStepExtension {
2132
2147
 
2133
2148
  const defaultConfiguration$2 = {
2134
2149
  view: {
2135
- minContainerWidth: 40,
2150
+ minBranchWidth: 88,
2136
2151
  paddingX: 20,
2137
2152
  paddingTop1: 0,
2138
2153
  paddingTop2: 22,
2139
- connectionHeight: 16,
2154
+ connectionHeight: 20,
2155
+ noBranchPaddingBottom: 24,
2140
2156
  inputSize: 18,
2141
2157
  inputIconSize: 14,
2142
2158
  inputRadius: 4,
@@ -3013,6 +3029,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
3013
3029
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
3014
3030
  PERFORMANCE OF THIS SOFTWARE.
3015
3031
  ***************************************************************************** */
3032
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
3033
+
3016
3034
 
3017
3035
  function __awaiter(thisArg, _arguments, P, generator) {
3018
3036
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -3022,7 +3040,12 @@ function __awaiter(thisArg, _arguments, P, generator) {
3022
3040
  function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
3023
3041
  step((generator = generator.apply(thisArg, _arguments || [])).next());
3024
3042
  });
3025
- }
3043
+ }
3044
+
3045
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
3046
+ var e = new Error(message);
3047
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
3048
+ };
3026
3049
 
3027
3050
  function isElementAttached(dom, element) {
3028
3051
  return !(dom.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
@@ -3060,7 +3083,7 @@ class WorkspaceView {
3060
3083
  workspace.appendChild(canvas);
3061
3084
  parent.appendChild(workspace);
3062
3085
  const view = new WorkspaceView(componentContext.shadowRoot, workspace, canvas, pattern, gridPattern, foreground, componentContext);
3063
- window.addEventListener('resize', view.onResizeHandler, false);
3086
+ window.addEventListener('resize', view.onResize, false);
3064
3087
  return view;
3065
3088
  }
3066
3089
  constructor(shadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
@@ -3071,7 +3094,9 @@ class WorkspaceView {
3071
3094
  this.gridPattern = gridPattern;
3072
3095
  this.foreground = foreground;
3073
3096
  this.context = context;
3074
- this.onResizeHandler = () => this.onResize();
3097
+ this.onResize = () => {
3098
+ this.refreshSize();
3099
+ };
3075
3100
  }
3076
3101
  render(sequence, parentPlaceIndicator) {
3077
3102
  if (this.rootComponent) {
@@ -3132,7 +3157,7 @@ class WorkspaceView {
3132
3157
  this.canvas.addEventListener('wheel', handler, listenerOptions$1);
3133
3158
  }
3134
3159
  destroy() {
3135
- window.removeEventListener('resize', this.onResizeHandler, false);
3160
+ window.removeEventListener('resize', this.onResize, false);
3136
3161
  }
3137
3162
  refreshSize() {
3138
3163
  Dom.attrs(this.canvas, {
@@ -3140,9 +3165,6 @@ class WorkspaceView {
3140
3165
  height: this.workspace.offsetHeight
3141
3166
  });
3142
3167
  }
3143
- onResize() {
3144
- this.refreshSize();
3145
- }
3146
3168
  }
3147
3169
 
3148
3170
  class MoveViewportBehavior {
@@ -3591,10 +3613,6 @@ class Workspace {
3591
3613
  : undefined);
3592
3614
  const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
3593
3615
  const workspace = new Workspace(view, designerContext.state, designerContext.behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, api.viewport, api.workspace, designerContext.services);
3594
- setTimeout(() => {
3595
- workspace.updateRootComponent();
3596
- api.viewport.resetViewport();
3597
- });
3598
3616
  designerContext.setWorkspaceController(workspace);
3599
3617
  designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
3600
3618
  race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
@@ -3604,6 +3622,7 @@ class Workspace {
3604
3622
  view.bindTouchStart(workspace.onClick, workspace.onPinchToZoom);
3605
3623
  view.bindWheel(workspace.onWheel);
3606
3624
  view.bindContextMenu(workspace.onContextMenu);
3625
+ workspace.scheduleInit();
3607
3626
  return workspace;
3608
3627
  }
3609
3628
  constructor(view, state, behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, viewportApi, workspaceApi, services) {
@@ -3620,6 +3639,7 @@ class Workspace {
3620
3639
  this.services = services;
3621
3640
  this.onRendered = new SimpleEvent();
3622
3641
  this.isValid = false;
3642
+ this.initTimeout = null;
3623
3643
  this.selectedStepComponent = null;
3624
3644
  this.validationErrorBadgeIndex = null;
3625
3645
  this.onClick = (position, target, buttonIndex, altKey) => {
@@ -3649,6 +3669,13 @@ class Workspace {
3649
3669
  this.view.setPositionAndScale(viewport.position, viewport.scale);
3650
3670
  };
3651
3671
  }
3672
+ scheduleInit() {
3673
+ this.initTimeout = setTimeout(() => {
3674
+ this.initTimeout = null;
3675
+ this.updateRootComponent();
3676
+ this.viewportApi.resetViewport();
3677
+ });
3678
+ }
3652
3679
  updateRootComponent() {
3653
3680
  this.selectedStepComponent = null;
3654
3681
  const rootSequence = this.workspaceApi.getRootSequence();
@@ -3700,6 +3727,10 @@ class Workspace {
3700
3727
  setTimeout(() => this.view.refreshSize());
3701
3728
  }
3702
3729
  destroy() {
3730
+ if (this.initTimeout) {
3731
+ clearTimeout(this.initTimeout);
3732
+ this.initTimeout = null;
3733
+ }
3703
3734
  this.contextMenuController.destroy();
3704
3735
  this.view.destroy();
3705
3736
  }
@@ -3797,8 +3828,8 @@ const SAFE_OFFSET = 10;
3797
3828
  class DefaultDraggedComponent {
3798
3829
  static create(parent, step, componentContext) {
3799
3830
  const canvas = Dom.svg('svg');
3800
- canvas.style.marginLeft = -SAFE_OFFSET + 'px';
3801
- canvas.style.marginTop = -SAFE_OFFSET + 'px';
3831
+ canvas.style.marginLeft = -10 + 'px';
3832
+ canvas.style.marginTop = -10 + 'px';
3802
3833
  parent.appendChild(canvas);
3803
3834
  const previewStepContext = {
3804
3835
  parentSequence: [],
package/lib/index.d.ts CHANGED
@@ -555,7 +555,7 @@ declare class ComponentDom {
555
555
  }
556
556
 
557
557
  declare class InputView {
558
- private readonly root;
558
+ readonly g: SVGElement;
559
559
  static createRectInput(parent: SVGElement, x: number, y: number, size: number, radius: number, iconSize: number, iconUrl: string | null): InputView;
560
560
  static createRoundInput(parent: SVGElement, x: number, y: number, size: number): InputView;
561
561
  private constructor();
@@ -654,7 +654,7 @@ interface LineGridConfiguration {
654
654
  }
655
655
 
656
656
  interface SwitchStepComponentViewConfiguration {
657
- minContainerWidth: number;
657
+ minBranchWidth: number;
658
658
  paddingX: number;
659
659
  /**
660
660
  * The distance between the top of the container and the center point of the input.
@@ -665,6 +665,10 @@ interface SwitchStepComponentViewConfiguration {
665
665
  */
666
666
  paddingTop2: number;
667
667
  connectionHeight: number;
668
+ /**
669
+ * The distance between the end of the label and the bottom of the container when there are no branches.
670
+ */
671
+ noBranchPaddingBottom: number;
668
672
  inputSize: number;
669
673
  inputIconSize: number;
670
674
  autoHideInputOnDrag: boolean;
@@ -1374,4 +1378,5 @@ declare class Designer<TDefinition extends Definition = Definition> {
1374
1378
  private getHistoryController;
1375
1379
  }
1376
1380
 
1377
- export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesDecorator, BadgesResult, BaseClickCommand, Behavior, BehaviorEndToken, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickBehaviorWrapper, ClickBehaviorWrapperExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentDom, ComponentView, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ContextMenuExtension, ContextMenuItem, ContextMenuItemsProvider, ControlBarApi, CustomAction, CustomActionController, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultRegionComponentViewExtension, DefaultRegionView, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerConfiguration, DefaultViewportControllerDesignerExtension, DefaultViewportControllerExtension, DefaultViewportControllerExtensionConfiguration, 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, NextScale, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, PreferenceStorage, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionComponentViewContentFactory, RegionComponentViewExtension, RegionView, RegionViewFactory, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepBehaviorEndToken, SelectStepClickCommand, SelectedStepIdProvider, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StartStopRootComponentDesignerExtension, StartStopRootComponentExtension, StartStopRootComponentExtensionConfiguration, StartStopRootComponentViewConfiguration, StateModifierDependency, StepBadgesDecoratorExtension, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TYPE, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportApi, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, WorkspaceRootSequence, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
1381
+ export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ComponentDom, ControlBarApi, CustomActionController, DefaultRegionComponentViewExtension, DefaultRegionView, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerDesignerExtension, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, KeyboardAction, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderDirection, RectPlaceholder, RectPlaceholderView, SelectStepBehaviorEndToken, ServicesResolver, SimpleEvent, StartStopRootComponentDesignerExtension, StartStopRootComponentExtension, StepComponent, StepExtensionResolver, StepsDesignerExtension, TYPE, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, ViewportApi, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
1382
+ export type { Attributes, Badge, BadgeExtension, BadgeView, BadgesDecorator, BadgesResult, BaseClickCommand, Behavior, BehaviorEndToken, ClickBehaviorWrapper, ClickBehaviorWrapperExtension, ClickCommand, ClickDetails, Component, ComponentView, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ContextMenuExtension, ContextMenuItem, ContextMenuItemsProvider, CustomAction, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultViewportControllerConfiguration, DefaultViewportControllerExtensionConfiguration, DefinitionChangedEvent, DesignerConfiguration, DesignerExtension, DraggedComponent, DraggedComponentExtension, EditorsConfiguration, FoundPlaceholders, Grid, GridExtension, I18n, KeyboardConfiguration, LineGridConfiguration, NextScale, OpenFolderClickCommand, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderExtension, PlaceholderView, PreferenceStorage, RectPlaceholderConfiguration, RegionComponentViewContentFactory, RegionComponentViewExtension, RegionView, RegionViewFactory, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SelectedStepIdProvider, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, SimpleEventListener, StartStopRootComponentExtensionConfiguration, StartStopRootComponentViewConfiguration, StateModifierDependency, StepBadgesDecoratorExtension, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtensionConfiguration, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceRootSequence };
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.28.0",
4
+ "version": "0.29.1",
5
5
  "type": "module",
6
6
  "main": "./lib/esm/index.js",
7
7
  "types": "./lib/index.d.ts",
@@ -78,7 +78,7 @@
78
78
  "sequential-workflow-model": "^0.2.0"
79
79
  },
80
80
  "devDependencies": {
81
- "@rollup/plugin-node-resolve": "^15.0.1",
81
+ "@rollup/plugin-node-resolve": "^16.0.1",
82
82
  "@types/jasmine": "^4.3.1",
83
83
  "@typescript-eslint/eslint-plugin": "^5.47.0",
84
84
  "@typescript-eslint/parser": "^5.47.0",
@@ -90,9 +90,9 @@
90
90
  "karma-typescript": "^5.5.3",
91
91
  "karma-typescript-es6-transform": "^5.5.3",
92
92
  "prettier": "^3.2.5",
93
- "rollup": "^3.18.0",
94
- "rollup-plugin-dts": "^5.2.0",
95
- "rollup-plugin-typescript2": "^0.34.1",
93
+ "rollup": "^4.40.0",
94
+ "rollup-plugin-dts": "^6.2.1",
95
+ "rollup-plugin-typescript2": "^0.36.0",
96
96
  "typescript": "^4.9.5",
97
97
  "sass": "^1.66.1"
98
98
  },