sequential-workflow-designer 0.28.0 → 0.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md 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.0/css/designer.css" rel="stylesheet">
108
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.0/css/designer-light.css" rel="stylesheet">
109
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.0/css/designer-dark.css" rel="stylesheet">
110
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.0/dist/index.umd.js"></script>
111
111
  ```
112
112
 
113
113
  Call the designer by:
package/dist/index.umd.js CHANGED
@@ -1263,11 +1263,11 @@
1263
1263
  parent.appendChild(circle);
1264
1264
  return new InputView(circle);
1265
1265
  }
1266
- constructor(root) {
1267
- this.root = root;
1266
+ constructor(g) {
1267
+ this.g = g;
1268
1268
  }
1269
1269
  setIsHidden(isHidden) {
1270
- Dom.attrs(this.root, {
1270
+ Dom.attrs(this.g, {
1271
1271
  visibility: isHidden ? 'hidden' : 'visible'
1272
1272
  });
1273
1273
  }
@@ -1692,31 +1692,77 @@
1692
1692
  };
1693
1693
 
1694
1694
  const COMPONENT_CLASS_NAME$1 = 'switch';
1695
+ function createView(g, width, height, joinX, viewContext, sequenceComponents, regionView, cfg) {
1696
+ let inputView = null;
1697
+ if (cfg.inputSize > 0) {
1698
+ const iconUrl = viewContext.getStepIconUrl();
1699
+ inputView = InputView.createRectInput(g, joinX, cfg.paddingTop1, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
1700
+ }
1701
+ return {
1702
+ g,
1703
+ width,
1704
+ height,
1705
+ joinX,
1706
+ placeholders: null,
1707
+ sequenceComponents,
1708
+ hasOutput: sequenceComponents ? sequenceComponents.some(c => c.hasOutput) : true,
1709
+ getClientPosition() {
1710
+ return regionView.getClientPosition();
1711
+ },
1712
+ resolveClick(click) {
1713
+ const result = regionView.resolveClick(click);
1714
+ return result === true || (result === null && g.contains(click.element)) ? true : result;
1715
+ },
1716
+ setIsDragging(isDragging) {
1717
+ if (cfg.autoHideInputOnDrag && inputView) {
1718
+ inputView.setIsHidden(isDragging);
1719
+ }
1720
+ },
1721
+ setIsSelected(isSelected) {
1722
+ regionView.setIsSelected(isSelected);
1723
+ },
1724
+ setIsDisabled(isDisabled) {
1725
+ Dom.toggleClass(g, isDisabled, 'sqd-disabled');
1726
+ }
1727
+ };
1728
+ }
1695
1729
  const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
1696
1730
  return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME$1, (g, regionViewBuilder) => {
1697
1731
  const step = stepContext.step;
1698
1732
  const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
1733
+ const name = viewContext.getStepName();
1734
+ const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
1699
1735
  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 => {
1736
+ if (branchNames.length === 0) {
1737
+ const width = Math.max(nameLabelView.width, cfg.minBranchWidth) + cfg.paddingX * 2;
1738
+ const height = nameLabelView.height + paddingTop + cfg.noBranchPaddingBottom;
1739
+ const joinX = width / 2;
1740
+ const regionView = regionViewBuilder(g, [width], height);
1741
+ Dom.translate(nameLabelView.g, joinX, 0);
1742
+ JoinView.createStraightJoin(g, new Vector(joinX, 0), height);
1743
+ return createView(g, width, height, joinX, viewContext, null, regionView, cfg);
1744
+ }
1745
+ const branchComponents = [];
1746
+ const branchLabelViews = [];
1747
+ const branchSizes = [];
1748
+ let totalBranchesWidth = 0;
1749
+ let maxBranchesHeight = 0;
1750
+ branchNames.forEach(branchName => {
1751
+ const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
1704
1752
  const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1705
1753
  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;
1754
+ const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1755
+ const halfOfWidestBranchElement = Math.max(labelView.width, cfg.minBranchWidth) / 2;
1713
1756
  const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
1714
1757
  const branchOffsetRight = Math.max(halfOfWidestBranchElement - (component.view.width - component.view.joinX), 0) + cfg.paddingX;
1715
1758
  const width = component.view.width + branchOffsetLeft + branchOffsetRight;
1716
1759
  const joinX = component.view.joinX + branchOffsetLeft;
1717
- const offsetX = prevOffsetX;
1718
- prevOffsetX += width;
1719
- return { width, branchOffsetLeft, offsetX, joinX };
1760
+ const offsetX = totalBranchesWidth;
1761
+ totalBranchesWidth += width;
1762
+ maxBranchesHeight = Math.max(maxBranchesHeight, component.view.height);
1763
+ branchComponents.push(component);
1764
+ branchLabelViews.push(labelView);
1765
+ branchSizes.push({ width, branchOffsetLeft, offsetX, joinX });
1720
1766
  });
1721
1767
  const centerBranchIndex = Math.floor(branchNames.length / 2);
1722
1768
  const centerBranchSize = branchSizes[centerBranchIndex];
@@ -1724,8 +1770,6 @@
1724
1770
  if (branchNames.length % 2 !== 0) {
1725
1771
  joinX += centerBranchSize.joinX;
1726
1772
  }
1727
- const totalBranchesWidth = branchSizes.reduce((result, s) => result + s.width, 0);
1728
- const maxBranchesHeight = Math.max(...branchComponents.map(s => s.view.height));
1729
1773
  const halfOfWidestSwitchElement = nameLabelView.width / 2 + cfg.paddingX;
1730
1774
  const switchOffsetLeft = Math.max(halfOfWidestSwitchElement - joinX, 0);
1731
1775
  const switchOffsetRight = Math.max(halfOfWidestSwitchElement - (totalBranchesWidth - joinX), 0);
@@ -1747,18 +1791,16 @@
1747
1791
  }
1748
1792
  }
1749
1793
  });
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
1794
  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)));
1795
+ 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
1796
  if (stepContext.isOutputConnected) {
1758
1797
  const ongoingSequenceIndexes = branchComponents
1759
1798
  .map((component, index) => (component.hasOutput ? index : null))
1760
1799
  .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));
1800
+ const ongoingJoinTargets = ongoingSequenceIndexes.map((i) => {
1801
+ const branchSize = branchSizes[i];
1802
+ return new Vector(switchOffsetLeft + branchSize.offsetX + branchSize.joinX, paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight);
1803
+ });
1762
1804
  if (ongoingJoinTargets.length > 0) {
1763
1805
  JoinView.createJoins(g, new Vector(shiftedJoinX, viewHeight), ongoingJoinTargets);
1764
1806
  }
@@ -1767,33 +1809,7 @@
1767
1809
  regions[0] += switchOffsetLeft;
1768
1810
  regions[regions.length - 1] += switchOffsetRight;
1769
1811
  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
- };
1812
+ return createView(g, viewWidth, viewHeight, shiftedJoinX, viewContext, branchComponents, regionView, cfg);
1797
1813
  });
1798
1814
  };
1799
1815
 
@@ -2318,11 +2334,12 @@
2318
2334
 
2319
2335
  const defaultConfiguration$2 = {
2320
2336
  view: {
2321
- minContainerWidth: 40,
2337
+ minBranchWidth: 88,
2322
2338
  paddingX: 20,
2323
2339
  paddingTop1: 0,
2324
2340
  paddingTop2: 22,
2325
- connectionHeight: 16,
2341
+ connectionHeight: 20,
2342
+ noBranchPaddingBottom: 24,
2326
2343
  inputSize: 18,
2327
2344
  inputIconSize: 14,
2328
2345
  inputRadius: 4,
@@ -3199,6 +3216,8 @@
3199
3216
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
3200
3217
  PERFORMANCE OF THIS SOFTWARE.
3201
3218
  ***************************************************************************** */
3219
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
3220
+
3202
3221
 
3203
3222
  function __awaiter(thisArg, _arguments, P, generator) {
3204
3223
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -3208,7 +3227,12 @@
3208
3227
  function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
3209
3228
  step((generator = generator.apply(thisArg, _arguments || [])).next());
3210
3229
  });
3211
- }
3230
+ }
3231
+
3232
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
3233
+ var e = new Error(message);
3234
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
3235
+ };
3212
3236
 
3213
3237
  function isElementAttached(dom, element) {
3214
3238
  return !(dom.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
@@ -3777,10 +3801,6 @@
3777
3801
  : undefined);
3778
3802
  const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
3779
3803
  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
3804
  designerContext.setWorkspaceController(workspace);
3785
3805
  designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
3786
3806
  race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
@@ -3790,6 +3810,7 @@
3790
3810
  view.bindTouchStart(workspace.onClick, workspace.onPinchToZoom);
3791
3811
  view.bindWheel(workspace.onWheel);
3792
3812
  view.bindContextMenu(workspace.onContextMenu);
3813
+ workspace.scheduleInit();
3793
3814
  return workspace;
3794
3815
  }
3795
3816
  constructor(view, state, behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, viewportApi, workspaceApi, services) {
@@ -3806,6 +3827,7 @@
3806
3827
  this.services = services;
3807
3828
  this.onRendered = new SimpleEvent();
3808
3829
  this.isValid = false;
3830
+ this.initTimeout = null;
3809
3831
  this.selectedStepComponent = null;
3810
3832
  this.validationErrorBadgeIndex = null;
3811
3833
  this.onClick = (position, target, buttonIndex, altKey) => {
@@ -3835,6 +3857,13 @@
3835
3857
  this.view.setPositionAndScale(viewport.position, viewport.scale);
3836
3858
  };
3837
3859
  }
3860
+ scheduleInit() {
3861
+ this.initTimeout = setTimeout(() => {
3862
+ this.initTimeout = null;
3863
+ this.updateRootComponent();
3864
+ this.viewportApi.resetViewport();
3865
+ });
3866
+ }
3838
3867
  updateRootComponent() {
3839
3868
  this.selectedStepComponent = null;
3840
3869
  const rootSequence = this.workspaceApi.getRootSequence();
@@ -3886,6 +3915,10 @@
3886
3915
  setTimeout(() => this.view.refreshSize());
3887
3916
  }
3888
3917
  destroy() {
3918
+ if (this.initTimeout) {
3919
+ clearTimeout(this.initTimeout);
3920
+ this.initTimeout = null;
3921
+ }
3889
3922
  this.contextMenuController.destroy();
3890
3923
  this.view.destroy();
3891
3924
  }
@@ -3983,8 +4016,8 @@
3983
4016
  class DefaultDraggedComponent {
3984
4017
  static create(parent, step, componentContext) {
3985
4018
  const canvas = Dom.svg('svg');
3986
- canvas.style.marginLeft = -SAFE_OFFSET + 'px';
3987
- canvas.style.marginTop = -SAFE_OFFSET + 'px';
4019
+ canvas.style.marginLeft = -10 + 'px';
4020
+ canvas.style.marginTop = -10 + 'px';
3988
4021
  parent.appendChild(canvas);
3989
4022
  const previewStepContext = {
3990
4023
  parentSequence: [],
package/lib/cjs/index.cjs CHANGED
@@ -1078,11 +1078,11 @@ class InputView {
1078
1078
  parent.appendChild(circle);
1079
1079
  return new InputView(circle);
1080
1080
  }
1081
- constructor(root) {
1082
- this.root = root;
1081
+ constructor(g) {
1082
+ this.g = g;
1083
1083
  }
1084
1084
  setIsHidden(isHidden) {
1085
- Dom.attrs(this.root, {
1085
+ Dom.attrs(this.g, {
1086
1086
  visibility: isHidden ? 'hidden' : 'visible'
1087
1087
  });
1088
1088
  }
@@ -1507,31 +1507,77 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
1507
1507
  };
1508
1508
 
1509
1509
  const COMPONENT_CLASS_NAME$1 = 'switch';
1510
+ function createView(g, width, height, joinX, viewContext, sequenceComponents, regionView, cfg) {
1511
+ let inputView = null;
1512
+ if (cfg.inputSize > 0) {
1513
+ const iconUrl = viewContext.getStepIconUrl();
1514
+ inputView = InputView.createRectInput(g, joinX, cfg.paddingTop1, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
1515
+ }
1516
+ return {
1517
+ g,
1518
+ width,
1519
+ height,
1520
+ joinX,
1521
+ placeholders: null,
1522
+ sequenceComponents,
1523
+ hasOutput: sequenceComponents ? sequenceComponents.some(c => c.hasOutput) : true,
1524
+ getClientPosition() {
1525
+ return regionView.getClientPosition();
1526
+ },
1527
+ resolveClick(click) {
1528
+ const result = regionView.resolveClick(click);
1529
+ return result === true || (result === null && g.contains(click.element)) ? true : result;
1530
+ },
1531
+ setIsDragging(isDragging) {
1532
+ if (cfg.autoHideInputOnDrag && inputView) {
1533
+ inputView.setIsHidden(isDragging);
1534
+ }
1535
+ },
1536
+ setIsSelected(isSelected) {
1537
+ regionView.setIsSelected(isSelected);
1538
+ },
1539
+ setIsDisabled(isDisabled) {
1540
+ Dom.toggleClass(g, isDisabled, 'sqd-disabled');
1541
+ }
1542
+ };
1543
+ }
1510
1544
  const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
1511
1545
  return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME$1, (g, regionViewBuilder) => {
1512
1546
  const step = stepContext.step;
1513
1547
  const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
1548
+ const name = viewContext.getStepName();
1549
+ const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
1514
1550
  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 => {
1551
+ if (branchNames.length === 0) {
1552
+ const width = Math.max(nameLabelView.width, cfg.minBranchWidth) + cfg.paddingX * 2;
1553
+ const height = nameLabelView.height + paddingTop + cfg.noBranchPaddingBottom;
1554
+ const joinX = width / 2;
1555
+ const regionView = regionViewBuilder(g, [width], height);
1556
+ Dom.translate(nameLabelView.g, joinX, 0);
1557
+ JoinView.createStraightJoin(g, new Vector(joinX, 0), height);
1558
+ return createView(g, width, height, joinX, viewContext, null, regionView, cfg);
1559
+ }
1560
+ const branchComponents = [];
1561
+ const branchLabelViews = [];
1562
+ const branchSizes = [];
1563
+ let totalBranchesWidth = 0;
1564
+ let maxBranchesHeight = 0;
1565
+ branchNames.forEach(branchName => {
1566
+ const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
1519
1567
  const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1520
1568
  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;
1569
+ const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1570
+ const halfOfWidestBranchElement = Math.max(labelView.width, cfg.minBranchWidth) / 2;
1528
1571
  const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
1529
1572
  const branchOffsetRight = Math.max(halfOfWidestBranchElement - (component.view.width - component.view.joinX), 0) + cfg.paddingX;
1530
1573
  const width = component.view.width + branchOffsetLeft + branchOffsetRight;
1531
1574
  const joinX = component.view.joinX + branchOffsetLeft;
1532
- const offsetX = prevOffsetX;
1533
- prevOffsetX += width;
1534
- return { width, branchOffsetLeft, offsetX, joinX };
1575
+ const offsetX = totalBranchesWidth;
1576
+ totalBranchesWidth += width;
1577
+ maxBranchesHeight = Math.max(maxBranchesHeight, component.view.height);
1578
+ branchComponents.push(component);
1579
+ branchLabelViews.push(labelView);
1580
+ branchSizes.push({ width, branchOffsetLeft, offsetX, joinX });
1535
1581
  });
1536
1582
  const centerBranchIndex = Math.floor(branchNames.length / 2);
1537
1583
  const centerBranchSize = branchSizes[centerBranchIndex];
@@ -1539,8 +1585,6 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1539
1585
  if (branchNames.length % 2 !== 0) {
1540
1586
  joinX += centerBranchSize.joinX;
1541
1587
  }
1542
- const totalBranchesWidth = branchSizes.reduce((result, s) => result + s.width, 0);
1543
- const maxBranchesHeight = Math.max(...branchComponents.map(s => s.view.height));
1544
1588
  const halfOfWidestSwitchElement = nameLabelView.width / 2 + cfg.paddingX;
1545
1589
  const switchOffsetLeft = Math.max(halfOfWidestSwitchElement - joinX, 0);
1546
1590
  const switchOffsetRight = Math.max(halfOfWidestSwitchElement - (totalBranchesWidth - joinX), 0);
@@ -1562,18 +1606,16 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1562
1606
  }
1563
1607
  }
1564
1608
  });
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
1609
  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)));
1610
+ 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
1611
  if (stepContext.isOutputConnected) {
1573
1612
  const ongoingSequenceIndexes = branchComponents
1574
1613
  .map((component, index) => (component.hasOutput ? index : null))
1575
1614
  .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));
1615
+ const ongoingJoinTargets = ongoingSequenceIndexes.map((i) => {
1616
+ const branchSize = branchSizes[i];
1617
+ return new Vector(switchOffsetLeft + branchSize.offsetX + branchSize.joinX, paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight);
1618
+ });
1577
1619
  if (ongoingJoinTargets.length > 0) {
1578
1620
  JoinView.createJoins(g, new Vector(shiftedJoinX, viewHeight), ongoingJoinTargets);
1579
1621
  }
@@ -1582,33 +1624,7 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1582
1624
  regions[0] += switchOffsetLeft;
1583
1625
  regions[regions.length - 1] += switchOffsetRight;
1584
1626
  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
- };
1627
+ return createView(g, viewWidth, viewHeight, shiftedJoinX, viewContext, branchComponents, regionView, cfg);
1612
1628
  });
1613
1629
  };
1614
1630
 
@@ -2133,11 +2149,12 @@ class ContainerStepExtension {
2133
2149
 
2134
2150
  const defaultConfiguration$2 = {
2135
2151
  view: {
2136
- minContainerWidth: 40,
2152
+ minBranchWidth: 88,
2137
2153
  paddingX: 20,
2138
2154
  paddingTop1: 0,
2139
2155
  paddingTop2: 22,
2140
- connectionHeight: 16,
2156
+ connectionHeight: 20,
2157
+ noBranchPaddingBottom: 24,
2141
2158
  inputSize: 18,
2142
2159
  inputIconSize: 14,
2143
2160
  inputRadius: 4,
@@ -3014,6 +3031,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
3014
3031
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
3015
3032
  PERFORMANCE OF THIS SOFTWARE.
3016
3033
  ***************************************************************************** */
3034
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
3035
+
3017
3036
 
3018
3037
  function __awaiter(thisArg, _arguments, P, generator) {
3019
3038
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -3023,7 +3042,12 @@ function __awaiter(thisArg, _arguments, P, generator) {
3023
3042
  function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
3024
3043
  step((generator = generator.apply(thisArg, _arguments || [])).next());
3025
3044
  });
3026
- }
3045
+ }
3046
+
3047
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
3048
+ var e = new Error(message);
3049
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
3050
+ };
3027
3051
 
3028
3052
  function isElementAttached(dom, element) {
3029
3053
  return !(dom.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
@@ -3592,10 +3616,6 @@ class Workspace {
3592
3616
  : undefined);
3593
3617
  const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
3594
3618
  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
3619
  designerContext.setWorkspaceController(workspace);
3600
3620
  designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
3601
3621
  race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
@@ -3605,6 +3625,7 @@ class Workspace {
3605
3625
  view.bindTouchStart(workspace.onClick, workspace.onPinchToZoom);
3606
3626
  view.bindWheel(workspace.onWheel);
3607
3627
  view.bindContextMenu(workspace.onContextMenu);
3628
+ workspace.scheduleInit();
3608
3629
  return workspace;
3609
3630
  }
3610
3631
  constructor(view, state, behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, viewportApi, workspaceApi, services) {
@@ -3621,6 +3642,7 @@ class Workspace {
3621
3642
  this.services = services;
3622
3643
  this.onRendered = new SimpleEvent();
3623
3644
  this.isValid = false;
3645
+ this.initTimeout = null;
3624
3646
  this.selectedStepComponent = null;
3625
3647
  this.validationErrorBadgeIndex = null;
3626
3648
  this.onClick = (position, target, buttonIndex, altKey) => {
@@ -3650,6 +3672,13 @@ class Workspace {
3650
3672
  this.view.setPositionAndScale(viewport.position, viewport.scale);
3651
3673
  };
3652
3674
  }
3675
+ scheduleInit() {
3676
+ this.initTimeout = setTimeout(() => {
3677
+ this.initTimeout = null;
3678
+ this.updateRootComponent();
3679
+ this.viewportApi.resetViewport();
3680
+ });
3681
+ }
3653
3682
  updateRootComponent() {
3654
3683
  this.selectedStepComponent = null;
3655
3684
  const rootSequence = this.workspaceApi.getRootSequence();
@@ -3701,6 +3730,10 @@ class Workspace {
3701
3730
  setTimeout(() => this.view.refreshSize());
3702
3731
  }
3703
3732
  destroy() {
3733
+ if (this.initTimeout) {
3734
+ clearTimeout(this.initTimeout);
3735
+ this.initTimeout = null;
3736
+ }
3704
3737
  this.contextMenuController.destroy();
3705
3738
  this.view.destroy();
3706
3739
  }
@@ -3798,8 +3831,8 @@ const SAFE_OFFSET = 10;
3798
3831
  class DefaultDraggedComponent {
3799
3832
  static create(parent, step, componentContext) {
3800
3833
  const canvas = Dom.svg('svg');
3801
- canvas.style.marginLeft = -SAFE_OFFSET + 'px';
3802
- canvas.style.marginTop = -SAFE_OFFSET + 'px';
3834
+ canvas.style.marginLeft = -10 + 'px';
3835
+ canvas.style.marginTop = -10 + 'px';
3803
3836
  parent.appendChild(canvas);
3804
3837
  const previewStepContext = {
3805
3838
  parentSequence: [],
@@ -4976,7 +5009,7 @@ exports.createTaskStepComponentViewFactory = createTaskStepComponentViewFactory;
4976
5009
  exports.getAbsolutePosition = getAbsolutePosition;
4977
5010
  exports.race = race;
4978
5011
  Object.keys(sequentialWorkflowModel).forEach(function (k) {
4979
- if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
5012
+ if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
4980
5013
  enumerable: true,
4981
5014
  get: function () { return sequentialWorkflowModel[k]; }
4982
5015
  });
package/lib/esm/index.js CHANGED
@@ -1077,11 +1077,11 @@ class InputView {
1077
1077
  parent.appendChild(circle);
1078
1078
  return new InputView(circle);
1079
1079
  }
1080
- constructor(root) {
1081
- this.root = root;
1080
+ constructor(g) {
1081
+ this.g = g;
1082
1082
  }
1083
1083
  setIsHidden(isHidden) {
1084
- Dom.attrs(this.root, {
1084
+ Dom.attrs(this.g, {
1085
1085
  visibility: isHidden ? 'hidden' : 'visible'
1086
1086
  });
1087
1087
  }
@@ -1506,31 +1506,77 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
1506
1506
  };
1507
1507
 
1508
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
+ }
1509
1543
  const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
1510
1544
  return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME$1, (g, regionViewBuilder) => {
1511
1545
  const step = stepContext.step;
1512
1546
  const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
1547
+ const name = viewContext.getStepName();
1548
+ const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
1513
1549
  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 => {
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]);
1518
1566
  const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1519
1567
  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;
1568
+ const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1569
+ const halfOfWidestBranchElement = Math.max(labelView.width, cfg.minBranchWidth) / 2;
1527
1570
  const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
1528
1571
  const branchOffsetRight = Math.max(halfOfWidestBranchElement - (component.view.width - component.view.joinX), 0) + cfg.paddingX;
1529
1572
  const width = component.view.width + branchOffsetLeft + branchOffsetRight;
1530
1573
  const joinX = component.view.joinX + branchOffsetLeft;
1531
- const offsetX = prevOffsetX;
1532
- prevOffsetX += width;
1533
- 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 });
1534
1580
  });
1535
1581
  const centerBranchIndex = Math.floor(branchNames.length / 2);
1536
1582
  const centerBranchSize = branchSizes[centerBranchIndex];
@@ -1538,8 +1584,6 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1538
1584
  if (branchNames.length % 2 !== 0) {
1539
1585
  joinX += centerBranchSize.joinX;
1540
1586
  }
1541
- const totalBranchesWidth = branchSizes.reduce((result, s) => result + s.width, 0);
1542
- const maxBranchesHeight = Math.max(...branchComponents.map(s => s.view.height));
1543
1587
  const halfOfWidestSwitchElement = nameLabelView.width / 2 + cfg.paddingX;
1544
1588
  const switchOffsetLeft = Math.max(halfOfWidestSwitchElement - joinX, 0);
1545
1589
  const switchOffsetRight = Math.max(halfOfWidestSwitchElement - (totalBranchesWidth - joinX), 0);
@@ -1561,18 +1605,16 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1561
1605
  }
1562
1606
  }
1563
1607
  });
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
1608
  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)));
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)));
1571
1610
  if (stepContext.isOutputConnected) {
1572
1611
  const ongoingSequenceIndexes = branchComponents
1573
1612
  .map((component, index) => (component.hasOutput ? index : null))
1574
1613
  .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));
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
+ });
1576
1618
  if (ongoingJoinTargets.length > 0) {
1577
1619
  JoinView.createJoins(g, new Vector(shiftedJoinX, viewHeight), ongoingJoinTargets);
1578
1620
  }
@@ -1581,33 +1623,7 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1581
1623
  regions[0] += switchOffsetLeft;
1582
1624
  regions[regions.length - 1] += switchOffsetRight;
1583
1625
  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
- };
1626
+ return createView(g, viewWidth, viewHeight, shiftedJoinX, viewContext, branchComponents, regionView, cfg);
1611
1627
  });
1612
1628
  };
1613
1629
 
@@ -2132,11 +2148,12 @@ class ContainerStepExtension {
2132
2148
 
2133
2149
  const defaultConfiguration$2 = {
2134
2150
  view: {
2135
- minContainerWidth: 40,
2151
+ minBranchWidth: 88,
2136
2152
  paddingX: 20,
2137
2153
  paddingTop1: 0,
2138
2154
  paddingTop2: 22,
2139
- connectionHeight: 16,
2155
+ connectionHeight: 20,
2156
+ noBranchPaddingBottom: 24,
2140
2157
  inputSize: 18,
2141
2158
  inputIconSize: 14,
2142
2159
  inputRadius: 4,
@@ -3013,6 +3030,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
3013
3030
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
3014
3031
  PERFORMANCE OF THIS SOFTWARE.
3015
3032
  ***************************************************************************** */
3033
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
3034
+
3016
3035
 
3017
3036
  function __awaiter(thisArg, _arguments, P, generator) {
3018
3037
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -3022,7 +3041,12 @@ function __awaiter(thisArg, _arguments, P, generator) {
3022
3041
  function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
3023
3042
  step((generator = generator.apply(thisArg, _arguments || [])).next());
3024
3043
  });
3025
- }
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
+ };
3026
3050
 
3027
3051
  function isElementAttached(dom, element) {
3028
3052
  return !(dom.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
@@ -3591,10 +3615,6 @@ class Workspace {
3591
3615
  : undefined);
3592
3616
  const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
3593
3617
  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
3618
  designerContext.setWorkspaceController(workspace);
3599
3619
  designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
3600
3620
  race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
@@ -3604,6 +3624,7 @@ class Workspace {
3604
3624
  view.bindTouchStart(workspace.onClick, workspace.onPinchToZoom);
3605
3625
  view.bindWheel(workspace.onWheel);
3606
3626
  view.bindContextMenu(workspace.onContextMenu);
3627
+ workspace.scheduleInit();
3607
3628
  return workspace;
3608
3629
  }
3609
3630
  constructor(view, state, behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, viewportApi, workspaceApi, services) {
@@ -3620,6 +3641,7 @@ class Workspace {
3620
3641
  this.services = services;
3621
3642
  this.onRendered = new SimpleEvent();
3622
3643
  this.isValid = false;
3644
+ this.initTimeout = null;
3623
3645
  this.selectedStepComponent = null;
3624
3646
  this.validationErrorBadgeIndex = null;
3625
3647
  this.onClick = (position, target, buttonIndex, altKey) => {
@@ -3649,6 +3671,13 @@ class Workspace {
3649
3671
  this.view.setPositionAndScale(viewport.position, viewport.scale);
3650
3672
  };
3651
3673
  }
3674
+ scheduleInit() {
3675
+ this.initTimeout = setTimeout(() => {
3676
+ this.initTimeout = null;
3677
+ this.updateRootComponent();
3678
+ this.viewportApi.resetViewport();
3679
+ });
3680
+ }
3652
3681
  updateRootComponent() {
3653
3682
  this.selectedStepComponent = null;
3654
3683
  const rootSequence = this.workspaceApi.getRootSequence();
@@ -3700,6 +3729,10 @@ class Workspace {
3700
3729
  setTimeout(() => this.view.refreshSize());
3701
3730
  }
3702
3731
  destroy() {
3732
+ if (this.initTimeout) {
3733
+ clearTimeout(this.initTimeout);
3734
+ this.initTimeout = null;
3735
+ }
3703
3736
  this.contextMenuController.destroy();
3704
3737
  this.view.destroy();
3705
3738
  }
@@ -3797,8 +3830,8 @@ const SAFE_OFFSET = 10;
3797
3830
  class DefaultDraggedComponent {
3798
3831
  static create(parent, step, componentContext) {
3799
3832
  const canvas = Dom.svg('svg');
3800
- canvas.style.marginLeft = -SAFE_OFFSET + 'px';
3801
- canvas.style.marginTop = -SAFE_OFFSET + 'px';
3833
+ canvas.style.marginLeft = -10 + 'px';
3834
+ canvas.style.marginTop = -10 + 'px';
3802
3835
  parent.appendChild(canvas);
3803
3836
  const previewStepContext = {
3804
3837
  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.0",
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
  },