sequential-workflow-designer 0.26.1 → 0.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +4 -4
  2. package/css/designer-dark.css +3 -0
  3. package/css/designer-light.css +3 -0
  4. package/dist/index.umd.js +74 -37
  5. package/lib/cjs/index.cjs +74 -37
  6. package/lib/esm/index.js +74 -37
  7. package/lib/index.d.ts +22 -5
  8. package/package.json +1 -1
  9. package/sass/designer-theme.scss +6 -0
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.26.1/css/designer.css" rel="stylesheet">
108
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.1/css/designer-light.css" rel="stylesheet">
109
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.1/css/designer-dark.css" rel="stylesheet">
110
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.1/dist/index.umd.js"></script>
107
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.27.0/css/designer.css" rel="stylesheet">
108
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.27.0/css/designer-light.css" rel="stylesheet">
109
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.27.0/css/designer-dark.css" rel="stylesheet">
110
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.27.0/dist/index.umd.js"></script>
111
111
  ```
112
112
 
113
113
  Call the designer by:
package/css/designer-dark.css CHANGED
@@ -2,6 +2,7 @@
2
2
  .sqd-theme-dark .sqd-toolbox {
3
3
  background: #3f3f3f;
4
4
  box-shadow: none;
5
+ border: none;
5
6
  border-radius: 10px;
6
7
  }
7
8
  .sqd-theme-dark .sqd-toolbox-header-title {
@@ -41,6 +42,7 @@
41
42
  .sqd-theme-dark .sqd-control-bar {
42
43
  background: #3f3f3f;
43
44
  box-shadow: none;
45
+ border: none;
44
46
  border-radius: 10px;
45
47
  }
46
48
  .sqd-theme-dark .sqd-control-bar-button {
@@ -71,6 +73,7 @@
71
73
  .sqd-theme-dark.sqd-context-menu {
72
74
  background: #3f3f3f;
73
75
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
76
+ border: none;
74
77
  border-radius: 4px;
75
78
  }
76
79
 
package/css/designer-light.css CHANGED
@@ -2,6 +2,7 @@
2
2
  .sqd-theme-light .sqd-toolbox {
3
3
  background: #fff;
4
4
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15);
5
+ border: none;
5
6
  border-radius: 10px;
6
7
  }
7
8
  .sqd-theme-light .sqd-toolbox-header-title {
@@ -41,6 +42,7 @@
41
42
  .sqd-theme-light .sqd-control-bar {
42
43
  background: #fff;
43
44
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15);
45
+ border: none;
44
46
  border-radius: 10px;
45
47
  }
46
48
  .sqd-theme-light .sqd-control-bar-button {
@@ -71,6 +73,7 @@
71
73
  .sqd-theme-light.sqd-context-menu {
72
74
  background: #fff;
73
75
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
76
+ border: none;
74
77
  border-radius: 4px;
75
78
  }
76
79
 
package/dist/index.umd.js CHANGED
@@ -830,24 +830,48 @@
830
830
  }
831
831
 
832
832
  const BADGE_GAP = 4;
833
+ class DefaultBadgesDecorator {
834
+ constructor(position, badges, g) {
835
+ this.position = position;
836
+ this.badges = badges;
837
+ this.g = g;
838
+ }
839
+ update() {
840
+ let offsetX = 0;
841
+ let maxHeight = 0;
842
+ let j = 0;
843
+ for (let i = 0; i < this.badges.length; i++) {
844
+ const badge = this.badges[i];
845
+ if (badge && badge.view) {
846
+ offsetX += j === 0 ? badge.view.width / 2 : badge.view.width;
847
+ maxHeight = Math.max(maxHeight, badge.view.height);
848
+ Dom.translate(badge.view.g, -offsetX, 0);
849
+ offsetX += BADGE_GAP;
850
+ j++;
851
+ }
852
+ }
853
+ Dom.translate(this.g, this.position.x, this.position.y + -maxHeight / 2);
854
+ }
855
+ }
856
+
833
857
  class Badges {
834
858
  static createForStep(stepContext, view, componentContext) {
835
859
  const g = createG(view.g);
836
860
  const badges = componentContext.services.badges.map(ext => ext.createForStep(g, view, stepContext, componentContext));
837
- const position = new Vector(view.width, 0);
838
- return new Badges(g, position, badges);
861
+ const decorator = componentContext.services.stepBadgesDecorator.create(g, view, badges);
862
+ return new Badges(badges, decorator);
839
863
  }
840
864
  static createForRoot(parentElement, position, componentContext) {
841
865
  const g = createG(parentElement);
842
866
  const badges = componentContext.services.badges.map(ext => {
843
867
  return ext.createForRoot ? ext.createForRoot(g, componentContext) : null;
844
868
  });
845
- return new Badges(g, position, badges);
869
+ const decorator = new DefaultBadgesDecorator(position, badges, g);
870
+ return new Badges(badges, decorator);
846
871
  }
847
- constructor(g, position, badges) {
848
- this.g = g;
849
- this.position = position;
872
+ constructor(badges, decorator) {
850
873
  this.badges = badges;
874
+ this.decorator = decorator;
851
875
  }
852
876
  update(result) {
853
877
  const count = this.badges.length;
@@ -857,20 +881,7 @@
857
881
  result[i] = badge.update(result[i]);
858
882
  }
859
883
  }
860
- let offsetX = 0;
861
- let maxHeight = 0;
862
- let j = 0;
863
- for (let i = 0; i < count; i++) {
864
- const badge = this.badges[i];
865
- if (badge && badge.view) {
866
- offsetX += j === 0 ? badge.view.width / 2 : badge.view.width;
867
- maxHeight = Math.max(maxHeight, badge.view.height);
868
- Dom.translate(badge.view.g, -offsetX, 0);
869
- offsetX += BADGE_GAP;
870
- j++;
871
- }
872
- }
873
- Dom.translate(this.g, this.position.x, this.position.y + -maxHeight / 2);
884
+ this.decorator.update();
874
885
  }
875
886
  resolveClick(click) {
876
887
  for (const badge of this.badges) {
@@ -1012,7 +1023,7 @@
1012
1023
  }
1013
1024
 
1014
1025
  class InputView {
1015
- static createRectInput(parent, x, y, size, iconSize, iconUrl) {
1026
+ static createRectInput(parent, x, y, size, radius, iconSize, iconUrl) {
1016
1027
  const g = Dom.svg('g');
1017
1028
  parent.appendChild(g);
1018
1029
  const rect = Dom.svg('rect', {
@@ -1021,8 +1032,8 @@
1021
1032
  height: size,
1022
1033
  x: x - size / 2,
1023
1034
  y: y + size / -2 + 0.5,
1024
- rx: 4,
1025
- ry: 4
1035
+ rx: radius,
1036
+ ry: radius
1026
1037
  });
1027
1038
  g.appendChild(rect);
1028
1039
  if (iconUrl) {
@@ -1438,8 +1449,11 @@
1438
1449
  const joinX = sequenceComponent.view.joinX + offsetLeft;
1439
1450
  Dom.translate(labelView.g, joinX, 0);
1440
1451
  Dom.translate(sequenceComponent.view.g, offsetLeft, cfg.paddingTop + cfg.label.height);
1441
- const iconUrl = viewContext.getStepIconUrl();
1442
- const inputView = InputView.createRectInput(g, joinX, 0, cfg.inputSize, cfg.inputIconSize, iconUrl);
1452
+ let inputView = null;
1453
+ if (cfg.inputSize > 0) {
1454
+ const iconUrl = viewContext.getStepIconUrl();
1455
+ inputView = InputView.createRectInput(g, joinX, 0, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
1456
+ }
1443
1457
  JoinView.createStraightJoin(g, new Vector(joinX, 0), cfg.paddingTop);
1444
1458
  const regionView = regionViewBuilder(g, [width], height);
1445
1459
  return {
@@ -1458,7 +1472,9 @@
1458
1472
  return result === true || (result === null && g.contains(click.element)) ? true : result;
1459
1473
  },
1460
1474
  setIsDragging(isDragging) {
1461
- inputView.setIsHidden(isDragging);
1475
+ if (cfg.autoHideInputOnDrag && inputView) {
1476
+ inputView.setIsHidden(isDragging);
1477
+ }
1462
1478
  },
1463
1479
  setIsSelected(isSelected) {
1464
1480
  regionView.setIsSelected(isSelected);
@@ -1474,17 +1490,18 @@
1474
1490
  const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
1475
1491
  return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME$1, (g, regionViewBuilder) => {
1476
1492
  const step = stepContext.step;
1493
+ const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
1477
1494
  const branchNames = Object.keys(step.branches);
1478
1495
  const branchComponents = branchNames.map(branchName => {
1479
1496
  return viewContext.createSequenceComponent(g, step.branches[branchName]);
1480
1497
  });
1481
1498
  const branchLabelViews = branchNames.map(branchName => {
1482
- const labelY = cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1499
+ const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1483
1500
  const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
1484
1501
  return LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1485
1502
  });
1486
1503
  const name = viewContext.getStepName();
1487
- const nameLabelView = LabelView.create(g, cfg.paddingTop, cfg.nameLabel, name, 'primary');
1504
+ const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
1488
1505
  let prevOffsetX = 0;
1489
1506
  const branchSizes = branchComponents.map((component, i) => {
1490
1507
  const halfOfWidestBranchElement = Math.max(branchLabelViews[i].width, cfg.minContainerWidth) / 2;
@@ -1508,17 +1525,17 @@
1508
1525
  const switchOffsetLeft = Math.max(halfOfWidestSwitchElement - joinX, 0);
1509
1526
  const switchOffsetRight = Math.max(halfOfWidestSwitchElement - (totalBranchesWidth - joinX), 0);
1510
1527
  const viewWidth = switchOffsetLeft + totalBranchesWidth + switchOffsetRight;
1511
- const viewHeight = maxBranchesHeight + cfg.paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight * 2;
1528
+ const viewHeight = maxBranchesHeight + paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight * 2;
1512
1529
  const shiftedJoinX = switchOffsetLeft + joinX;
1513
1530
  Dom.translate(nameLabelView.g, shiftedJoinX, 0);
1514
- const branchOffsetTop = cfg.paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight;
1531
+ const branchOffsetTop = paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight;
1515
1532
  branchComponents.forEach((component, i) => {
1516
1533
  const branchSize = branchSizes[i];
1517
1534
  const branchOffsetLeft = switchOffsetLeft + branchSize.offsetX + branchSize.branchOffsetLeft;
1518
1535
  Dom.translate(branchLabelViews[i].g, switchOffsetLeft + branchSize.offsetX + branchSize.joinX, 0);
1519
1536
  Dom.translate(component.view.g, branchOffsetLeft, branchOffsetTop);
1520
1537
  if (component.hasOutput && stepContext.isOutputConnected) {
1521
- const endOffsetTopOfComponent = cfg.paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight + component.view.height;
1538
+ const endOffsetTopOfComponent = paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight + component.view.height;
1522
1539
  const missingHeight = viewHeight - endOffsetTopOfComponent - cfg.connectionHeight;
1523
1540
  if (missingHeight > 0) {
1524
1541
  JoinView.createStraightJoin(g, new Vector(switchOffsetLeft + branchSize.offsetX + branchSize.joinX, endOffsetTopOfComponent), missingHeight);
@@ -1528,15 +1545,15 @@
1528
1545
  let inputView = null;
1529
1546
  if (cfg.inputSize > 0) {
1530
1547
  const iconUrl = viewContext.getStepIconUrl();
1531
- inputView = InputView.createRectInput(g, shiftedJoinX, 0, cfg.inputSize, cfg.inputIconSize, iconUrl);
1548
+ inputView = InputView.createRectInput(g, shiftedJoinX, cfg.paddingTop1, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
1532
1549
  }
1533
- JoinView.createStraightJoin(g, new Vector(shiftedJoinX, 0), cfg.paddingTop);
1534
- JoinView.createJoins(g, new Vector(shiftedJoinX, cfg.paddingTop + cfg.nameLabel.height), branchSizes.map(o => new Vector(switchOffsetLeft + o.offsetX + o.joinX, cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight)));
1550
+ JoinView.createStraightJoin(g, new Vector(shiftedJoinX, 0), paddingTop);
1551
+ 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)));
1535
1552
  if (stepContext.isOutputConnected) {
1536
1553
  const ongoingSequenceIndexes = branchComponents
1537
1554
  .map((component, index) => (component.hasOutput ? index : null))
1538
1555
  .filter(index => index !== null);
1539
- const ongoingJoinTargets = ongoingSequenceIndexes.map((i) => new Vector(switchOffsetLeft + branchSizes[i].offsetX + branchSizes[i].joinX, cfg.paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight));
1556
+ const ongoingJoinTargets = ongoingSequenceIndexes.map((i) => new Vector(switchOffsetLeft + branchSizes[i].offsetX + branchSizes[i].joinX, paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight));
1540
1557
  if (ongoingJoinTargets.length > 0) {
1541
1558
  JoinView.createJoins(g, new Vector(shiftedJoinX, viewHeight), ongoingJoinTargets);
1542
1559
  }
@@ -1561,7 +1578,9 @@
1561
1578
  return result === true || (result === null && g.contains(click.element)) ? true : result;
1562
1579
  },
1563
1580
  setIsDragging(isDragging) {
1564
- inputView === null || inputView === void 0 ? void 0 : inputView.setIsHidden(isDragging);
1581
+ if (cfg.autoHideInputOnDrag && inputView) {
1582
+ inputView.setIsHidden(isDragging);
1583
+ }
1565
1584
  },
1566
1585
  setIsSelected(isSelected) {
1567
1586
  regionView.setIsSelected(isSelected);
@@ -2070,7 +2089,9 @@
2070
2089
  paddingTop: 20,
2071
2090
  paddingX: 20,
2072
2091
  inputSize: 18,
2092
+ inputRadius: 4,
2073
2093
  inputIconSize: 14,
2094
+ autoHideInputOnDrag: true,
2074
2095
  label: {
2075
2096
  height: 22,
2076
2097
  paddingX: 10,
@@ -2094,10 +2115,13 @@
2094
2115
  view: {
2095
2116
  minContainerWidth: 40,
2096
2117
  paddingX: 20,
2097
- paddingTop: 20,
2118
+ paddingTop1: 0,
2119
+ paddingTop2: 22,
2098
2120
  connectionHeight: 16,
2099
2121
  inputSize: 18,
2100
2122
  inputIconSize: 14,
2123
+ inputRadius: 4,
2124
+ autoHideInputOnDrag: true,
2101
2125
  branchNameLabel: {
2102
2126
  height: 22,
2103
2127
  paddingX: 10,
@@ -4685,6 +4709,13 @@
4685
4709
  }
4686
4710
  }
4687
4711
 
4712
+ class DefaultStepBadgesDecoratorExtension {
4713
+ create(g, view, badges) {
4714
+ const position = new Vector(view.width, 0);
4715
+ return new DefaultBadgesDecorator(position, badges, g);
4716
+ }
4717
+ }
4718
+
4688
4719
  class ServicesResolver {
4689
4720
  static resolve(extensions, configuration) {
4690
4721
  const services = {};
@@ -4701,6 +4732,9 @@
4701
4732
  if (ext.stepComponentViewWrapper) {
4702
4733
  services.stepComponentViewWrapper = ext.stepComponentViewWrapper;
4703
4734
  }
4735
+ if (ext.stepBadgesDecorator) {
4736
+ services.stepBadgesDecorator = ext.stepBadgesDecorator;
4737
+ }
4704
4738
  if (ext.clickBehaviorWrapperExtension) {
4705
4739
  services.clickBehaviorWrapperExtension = ext.clickBehaviorWrapperExtension;
4706
4740
  }
@@ -4755,6 +4789,9 @@
4755
4789
  if (!services.stepComponentViewWrapper) {
4756
4790
  services.stepComponentViewWrapper = new DefaultStepComponentViewWrapperExtension();
4757
4791
  }
4792
+ if (!services.stepBadgesDecorator) {
4793
+ services.stepBadgesDecorator = new DefaultStepBadgesDecoratorExtension();
4794
+ }
4758
4795
  if (!services.clickBehaviorWrapperExtension) {
4759
4796
  services.clickBehaviorWrapperExtension = new DefaultClickBehaviorWrapperExtension();
4760
4797
  }
package/lib/cjs/index.cjs CHANGED
@@ -828,24 +828,48 @@ class SelectStepBehaviorEndToken {
828
828
  }
829
829
 
830
830
  const BADGE_GAP = 4;
831
+ class DefaultBadgesDecorator {
832
+ constructor(position, badges, g) {
833
+ this.position = position;
834
+ this.badges = badges;
835
+ this.g = g;
836
+ }
837
+ update() {
838
+ let offsetX = 0;
839
+ let maxHeight = 0;
840
+ let j = 0;
841
+ for (let i = 0; i < this.badges.length; i++) {
842
+ const badge = this.badges[i];
843
+ if (badge && badge.view) {
844
+ offsetX += j === 0 ? badge.view.width / 2 : badge.view.width;
845
+ maxHeight = Math.max(maxHeight, badge.view.height);
846
+ Dom.translate(badge.view.g, -offsetX, 0);
847
+ offsetX += BADGE_GAP;
848
+ j++;
849
+ }
850
+ }
851
+ Dom.translate(this.g, this.position.x, this.position.y + -maxHeight / 2);
852
+ }
853
+ }
854
+
831
855
  class Badges {
832
856
  static createForStep(stepContext, view, componentContext) {
833
857
  const g = createG(view.g);
834
858
  const badges = componentContext.services.badges.map(ext => ext.createForStep(g, view, stepContext, componentContext));
835
- const position = new Vector(view.width, 0);
836
- return new Badges(g, position, badges);
859
+ const decorator = componentContext.services.stepBadgesDecorator.create(g, view, badges);
860
+ return new Badges(badges, decorator);
837
861
  }
838
862
  static createForRoot(parentElement, position, componentContext) {
839
863
  const g = createG(parentElement);
840
864
  const badges = componentContext.services.badges.map(ext => {
841
865
  return ext.createForRoot ? ext.createForRoot(g, componentContext) : null;
842
866
  });
843
- return new Badges(g, position, badges);
867
+ const decorator = new DefaultBadgesDecorator(position, badges, g);
868
+ return new Badges(badges, decorator);
844
869
  }
845
- constructor(g, position, badges) {
846
- this.g = g;
847
- this.position = position;
870
+ constructor(badges, decorator) {
848
871
  this.badges = badges;
872
+ this.decorator = decorator;
849
873
  }
850
874
  update(result) {
851
875
  const count = this.badges.length;
@@ -855,20 +879,7 @@ class Badges {
855
879
  result[i] = badge.update(result[i]);
856
880
  }
857
881
  }
858
- let offsetX = 0;
859
- let maxHeight = 0;
860
- let j = 0;
861
- for (let i = 0; i < count; i++) {
862
- const badge = this.badges[i];
863
- if (badge && badge.view) {
864
- offsetX += j === 0 ? badge.view.width / 2 : badge.view.width;
865
- maxHeight = Math.max(maxHeight, badge.view.height);
866
- Dom.translate(badge.view.g, -offsetX, 0);
867
- offsetX += BADGE_GAP;
868
- j++;
869
- }
870
- }
871
- Dom.translate(this.g, this.position.x, this.position.y + -maxHeight / 2);
882
+ this.decorator.update();
872
883
  }
873
884
  resolveClick(click) {
874
885
  for (const badge of this.badges) {
@@ -1010,7 +1021,7 @@ class ComponentDom {
1010
1021
  }
1011
1022
 
1012
1023
  class InputView {
1013
- static createRectInput(parent, x, y, size, iconSize, iconUrl) {
1024
+ static createRectInput(parent, x, y, size, radius, iconSize, iconUrl) {
1014
1025
  const g = Dom.svg('g');
1015
1026
  parent.appendChild(g);
1016
1027
  const rect = Dom.svg('rect', {
@@ -1019,8 +1030,8 @@ class InputView {
1019
1030
  height: size,
1020
1031
  x: x - size / 2,
1021
1032
  y: y + size / -2 + 0.5,
1022
- rx: 4,
1023
- ry: 4
1033
+ rx: radius,
1034
+ ry: radius
1024
1035
  });
1025
1036
  g.appendChild(rect);
1026
1037
  if (iconUrl) {
@@ -1436,8 +1447,11 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
1436
1447
  const joinX = sequenceComponent.view.joinX + offsetLeft;
1437
1448
  Dom.translate(labelView.g, joinX, 0);
1438
1449
  Dom.translate(sequenceComponent.view.g, offsetLeft, cfg.paddingTop + cfg.label.height);
1439
- const iconUrl = viewContext.getStepIconUrl();
1440
- const inputView = InputView.createRectInput(g, joinX, 0, cfg.inputSize, cfg.inputIconSize, iconUrl);
1450
+ let inputView = null;
1451
+ if (cfg.inputSize > 0) {
1452
+ const iconUrl = viewContext.getStepIconUrl();
1453
+ inputView = InputView.createRectInput(g, joinX, 0, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
1454
+ }
1441
1455
  JoinView.createStraightJoin(g, new Vector(joinX, 0), cfg.paddingTop);
1442
1456
  const regionView = regionViewBuilder(g, [width], height);
1443
1457
  return {
@@ -1456,7 +1470,9 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
1456
1470
  return result === true || (result === null && g.contains(click.element)) ? true : result;
1457
1471
  },
1458
1472
  setIsDragging(isDragging) {
1459
- inputView.setIsHidden(isDragging);
1473
+ if (cfg.autoHideInputOnDrag && inputView) {
1474
+ inputView.setIsHidden(isDragging);
1475
+ }
1460
1476
  },
1461
1477
  setIsSelected(isSelected) {
1462
1478
  regionView.setIsSelected(isSelected);
@@ -1472,17 +1488,18 @@ const COMPONENT_CLASS_NAME$1 = 'switch';
1472
1488
  const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
1473
1489
  return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME$1, (g, regionViewBuilder) => {
1474
1490
  const step = stepContext.step;
1491
+ const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
1475
1492
  const branchNames = Object.keys(step.branches);
1476
1493
  const branchComponents = branchNames.map(branchName => {
1477
1494
  return viewContext.createSequenceComponent(g, step.branches[branchName]);
1478
1495
  });
1479
1496
  const branchLabelViews = branchNames.map(branchName => {
1480
- const labelY = cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1497
+ const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1481
1498
  const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
1482
1499
  return LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1483
1500
  });
1484
1501
  const name = viewContext.getStepName();
1485
- const nameLabelView = LabelView.create(g, cfg.paddingTop, cfg.nameLabel, name, 'primary');
1502
+ const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
1486
1503
  let prevOffsetX = 0;
1487
1504
  const branchSizes = branchComponents.map((component, i) => {
1488
1505
  const halfOfWidestBranchElement = Math.max(branchLabelViews[i].width, cfg.minContainerWidth) / 2;
@@ -1506,17 +1523,17 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1506
1523
  const switchOffsetLeft = Math.max(halfOfWidestSwitchElement - joinX, 0);
1507
1524
  const switchOffsetRight = Math.max(halfOfWidestSwitchElement - (totalBranchesWidth - joinX), 0);
1508
1525
  const viewWidth = switchOffsetLeft + totalBranchesWidth + switchOffsetRight;
1509
- const viewHeight = maxBranchesHeight + cfg.paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight * 2;
1526
+ const viewHeight = maxBranchesHeight + paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight * 2;
1510
1527
  const shiftedJoinX = switchOffsetLeft + joinX;
1511
1528
  Dom.translate(nameLabelView.g, shiftedJoinX, 0);
1512
- const branchOffsetTop = cfg.paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight;
1529
+ const branchOffsetTop = paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight;
1513
1530
  branchComponents.forEach((component, i) => {
1514
1531
  const branchSize = branchSizes[i];
1515
1532
  const branchOffsetLeft = switchOffsetLeft + branchSize.offsetX + branchSize.branchOffsetLeft;
1516
1533
  Dom.translate(branchLabelViews[i].g, switchOffsetLeft + branchSize.offsetX + branchSize.joinX, 0);
1517
1534
  Dom.translate(component.view.g, branchOffsetLeft, branchOffsetTop);
1518
1535
  if (component.hasOutput && stepContext.isOutputConnected) {
1519
- const endOffsetTopOfComponent = cfg.paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight + component.view.height;
1536
+ const endOffsetTopOfComponent = paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight + component.view.height;
1520
1537
  const missingHeight = viewHeight - endOffsetTopOfComponent - cfg.connectionHeight;
1521
1538
  if (missingHeight > 0) {
1522
1539
  JoinView.createStraightJoin(g, new Vector(switchOffsetLeft + branchSize.offsetX + branchSize.joinX, endOffsetTopOfComponent), missingHeight);
@@ -1526,15 +1543,15 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1526
1543
  let inputView = null;
1527
1544
  if (cfg.inputSize > 0) {
1528
1545
  const iconUrl = viewContext.getStepIconUrl();
1529
- inputView = InputView.createRectInput(g, shiftedJoinX, 0, cfg.inputSize, cfg.inputIconSize, iconUrl);
1546
+ inputView = InputView.createRectInput(g, shiftedJoinX, cfg.paddingTop1, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
1530
1547
  }
1531
- JoinView.createStraightJoin(g, new Vector(shiftedJoinX, 0), cfg.paddingTop);
1532
- JoinView.createJoins(g, new Vector(shiftedJoinX, cfg.paddingTop + cfg.nameLabel.height), branchSizes.map(o => new Vector(switchOffsetLeft + o.offsetX + o.joinX, cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight)));
1548
+ JoinView.createStraightJoin(g, new Vector(shiftedJoinX, 0), paddingTop);
1549
+ 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)));
1533
1550
  if (stepContext.isOutputConnected) {
1534
1551
  const ongoingSequenceIndexes = branchComponents
1535
1552
  .map((component, index) => (component.hasOutput ? index : null))
1536
1553
  .filter(index => index !== null);
1537
- const ongoingJoinTargets = ongoingSequenceIndexes.map((i) => new Vector(switchOffsetLeft + branchSizes[i].offsetX + branchSizes[i].joinX, cfg.paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight));
1554
+ const ongoingJoinTargets = ongoingSequenceIndexes.map((i) => new Vector(switchOffsetLeft + branchSizes[i].offsetX + branchSizes[i].joinX, paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight));
1538
1555
  if (ongoingJoinTargets.length > 0) {
1539
1556
  JoinView.createJoins(g, new Vector(shiftedJoinX, viewHeight), ongoingJoinTargets);
1540
1557
  }
@@ -1559,7 +1576,9 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1559
1576
  return result === true || (result === null && g.contains(click.element)) ? true : result;
1560
1577
  },
1561
1578
  setIsDragging(isDragging) {
1562
- inputView === null || inputView === void 0 ? void 0 : inputView.setIsHidden(isDragging);
1579
+ if (cfg.autoHideInputOnDrag && inputView) {
1580
+ inputView.setIsHidden(isDragging);
1581
+ }
1563
1582
  },
1564
1583
  setIsSelected(isSelected) {
1565
1584
  regionView.setIsSelected(isSelected);
@@ -2068,7 +2087,9 @@ const defaultConfiguration$3 = {
2068
2087
  paddingTop: 20,
2069
2088
  paddingX: 20,
2070
2089
  inputSize: 18,
2090
+ inputRadius: 4,
2071
2091
  inputIconSize: 14,
2092
+ autoHideInputOnDrag: true,
2072
2093
  label: {
2073
2094
  height: 22,
2074
2095
  paddingX: 10,
@@ -2092,10 +2113,13 @@ const defaultConfiguration$2 = {
2092
2113
  view: {
2093
2114
  minContainerWidth: 40,
2094
2115
  paddingX: 20,
2095
- paddingTop: 20,
2116
+ paddingTop1: 0,
2117
+ paddingTop2: 22,
2096
2118
  connectionHeight: 16,
2097
2119
  inputSize: 18,
2098
2120
  inputIconSize: 14,
2121
+ inputRadius: 4,
2122
+ autoHideInputOnDrag: true,
2099
2123
  branchNameLabel: {
2100
2124
  height: 22,
2101
2125
  paddingX: 10,
@@ -4500,6 +4524,13 @@ class DefaultClickBehaviorWrapperExtension {
4500
4524
  }
4501
4525
  }
4502
4526
 
4527
+ class DefaultStepBadgesDecoratorExtension {
4528
+ create(g, view, badges) {
4529
+ const position = new Vector(view.width, 0);
4530
+ return new DefaultBadgesDecorator(position, badges, g);
4531
+ }
4532
+ }
4533
+
4503
4534
  class ServicesResolver {
4504
4535
  static resolve(extensions, configuration) {
4505
4536
  const services = {};
@@ -4516,6 +4547,9 @@ function merge(services, extensions) {
4516
4547
  if (ext.stepComponentViewWrapper) {
4517
4548
  services.stepComponentViewWrapper = ext.stepComponentViewWrapper;
4518
4549
  }
4550
+ if (ext.stepBadgesDecorator) {
4551
+ services.stepBadgesDecorator = ext.stepBadgesDecorator;
4552
+ }
4519
4553
  if (ext.clickBehaviorWrapperExtension) {
4520
4554
  services.clickBehaviorWrapperExtension = ext.clickBehaviorWrapperExtension;
4521
4555
  }
@@ -4570,6 +4604,9 @@ function setDefaults(services, configuration) {
4570
4604
  if (!services.stepComponentViewWrapper) {
4571
4605
  services.stepComponentViewWrapper = new DefaultStepComponentViewWrapperExtension();
4572
4606
  }
4607
+ if (!services.stepBadgesDecorator) {
4608
+ services.stepBadgesDecorator = new DefaultStepBadgesDecoratorExtension();
4609
+ }
4573
4610
  if (!services.clickBehaviorWrapperExtension) {
4574
4611
  services.clickBehaviorWrapperExtension = new DefaultClickBehaviorWrapperExtension();
4575
4612
  }
package/lib/esm/index.js CHANGED
@@ -827,24 +827,48 @@ class SelectStepBehaviorEndToken {
827
827
  }
828
828
 
829
829
  const BADGE_GAP = 4;
830
+ class DefaultBadgesDecorator {
831
+ constructor(position, badges, g) {
832
+ this.position = position;
833
+ this.badges = badges;
834
+ this.g = g;
835
+ }
836
+ update() {
837
+ let offsetX = 0;
838
+ let maxHeight = 0;
839
+ let j = 0;
840
+ for (let i = 0; i < this.badges.length; i++) {
841
+ const badge = this.badges[i];
842
+ if (badge && badge.view) {
843
+ offsetX += j === 0 ? badge.view.width / 2 : badge.view.width;
844
+ maxHeight = Math.max(maxHeight, badge.view.height);
845
+ Dom.translate(badge.view.g, -offsetX, 0);
846
+ offsetX += BADGE_GAP;
847
+ j++;
848
+ }
849
+ }
850
+ Dom.translate(this.g, this.position.x, this.position.y + -maxHeight / 2);
851
+ }
852
+ }
853
+
830
854
  class Badges {
831
855
  static createForStep(stepContext, view, componentContext) {
832
856
  const g = createG(view.g);
833
857
  const badges = componentContext.services.badges.map(ext => ext.createForStep(g, view, stepContext, componentContext));
834
- const position = new Vector(view.width, 0);
835
- return new Badges(g, position, badges);
858
+ const decorator = componentContext.services.stepBadgesDecorator.create(g, view, badges);
859
+ return new Badges(badges, decorator);
836
860
  }
837
861
  static createForRoot(parentElement, position, componentContext) {
838
862
  const g = createG(parentElement);
839
863
  const badges = componentContext.services.badges.map(ext => {
840
864
  return ext.createForRoot ? ext.createForRoot(g, componentContext) : null;
841
865
  });
842
- return new Badges(g, position, badges);
866
+ const decorator = new DefaultBadgesDecorator(position, badges, g);
867
+ return new Badges(badges, decorator);
843
868
  }
844
- constructor(g, position, badges) {
845
- this.g = g;
846
- this.position = position;
869
+ constructor(badges, decorator) {
847
870
  this.badges = badges;
871
+ this.decorator = decorator;
848
872
  }
849
873
  update(result) {
850
874
  const count = this.badges.length;
@@ -854,20 +878,7 @@ class Badges {
854
878
  result[i] = badge.update(result[i]);
855
879
  }
856
880
  }
857
- let offsetX = 0;
858
- let maxHeight = 0;
859
- let j = 0;
860
- for (let i = 0; i < count; i++) {
861
- const badge = this.badges[i];
862
- if (badge && badge.view) {
863
- offsetX += j === 0 ? badge.view.width / 2 : badge.view.width;
864
- maxHeight = Math.max(maxHeight, badge.view.height);
865
- Dom.translate(badge.view.g, -offsetX, 0);
866
- offsetX += BADGE_GAP;
867
- j++;
868
- }
869
- }
870
- Dom.translate(this.g, this.position.x, this.position.y + -maxHeight / 2);
881
+ this.decorator.update();
871
882
  }
872
883
  resolveClick(click) {
873
884
  for (const badge of this.badges) {
@@ -1009,7 +1020,7 @@ class ComponentDom {
1009
1020
  }
1010
1021
 
1011
1022
  class InputView {
1012
- static createRectInput(parent, x, y, size, iconSize, iconUrl) {
1023
+ static createRectInput(parent, x, y, size, radius, iconSize, iconUrl) {
1013
1024
  const g = Dom.svg('g');
1014
1025
  parent.appendChild(g);
1015
1026
  const rect = Dom.svg('rect', {
@@ -1018,8 +1029,8 @@ class InputView {
1018
1029
  height: size,
1019
1030
  x: x - size / 2,
1020
1031
  y: y + size / -2 + 0.5,
1021
- rx: 4,
1022
- ry: 4
1032
+ rx: radius,
1033
+ ry: radius
1023
1034
  });
1024
1035
  g.appendChild(rect);
1025
1036
  if (iconUrl) {
@@ -1435,8 +1446,11 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
1435
1446
  const joinX = sequenceComponent.view.joinX + offsetLeft;
1436
1447
  Dom.translate(labelView.g, joinX, 0);
1437
1448
  Dom.translate(sequenceComponent.view.g, offsetLeft, cfg.paddingTop + cfg.label.height);
1438
- const iconUrl = viewContext.getStepIconUrl();
1439
- const inputView = InputView.createRectInput(g, joinX, 0, cfg.inputSize, cfg.inputIconSize, iconUrl);
1449
+ let inputView = null;
1450
+ if (cfg.inputSize > 0) {
1451
+ const iconUrl = viewContext.getStepIconUrl();
1452
+ inputView = InputView.createRectInput(g, joinX, 0, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
1453
+ }
1440
1454
  JoinView.createStraightJoin(g, new Vector(joinX, 0), cfg.paddingTop);
1441
1455
  const regionView = regionViewBuilder(g, [width], height);
1442
1456
  return {
@@ -1455,7 +1469,9 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
1455
1469
  return result === true || (result === null && g.contains(click.element)) ? true : result;
1456
1470
  },
1457
1471
  setIsDragging(isDragging) {
1458
- inputView.setIsHidden(isDragging);
1472
+ if (cfg.autoHideInputOnDrag && inputView) {
1473
+ inputView.setIsHidden(isDragging);
1474
+ }
1459
1475
  },
1460
1476
  setIsSelected(isSelected) {
1461
1477
  regionView.setIsSelected(isSelected);
@@ -1471,17 +1487,18 @@ const COMPONENT_CLASS_NAME$1 = 'switch';
1471
1487
  const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
1472
1488
  return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME$1, (g, regionViewBuilder) => {
1473
1489
  const step = stepContext.step;
1490
+ const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
1474
1491
  const branchNames = Object.keys(step.branches);
1475
1492
  const branchComponents = branchNames.map(branchName => {
1476
1493
  return viewContext.createSequenceComponent(g, step.branches[branchName]);
1477
1494
  });
1478
1495
  const branchLabelViews = branchNames.map(branchName => {
1479
- const labelY = cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1496
+ const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1480
1497
  const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
1481
1498
  return LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1482
1499
  });
1483
1500
  const name = viewContext.getStepName();
1484
- const nameLabelView = LabelView.create(g, cfg.paddingTop, cfg.nameLabel, name, 'primary');
1501
+ const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
1485
1502
  let prevOffsetX = 0;
1486
1503
  const branchSizes = branchComponents.map((component, i) => {
1487
1504
  const halfOfWidestBranchElement = Math.max(branchLabelViews[i].width, cfg.minContainerWidth) / 2;
@@ -1505,17 +1522,17 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1505
1522
  const switchOffsetLeft = Math.max(halfOfWidestSwitchElement - joinX, 0);
1506
1523
  const switchOffsetRight = Math.max(halfOfWidestSwitchElement - (totalBranchesWidth - joinX), 0);
1507
1524
  const viewWidth = switchOffsetLeft + totalBranchesWidth + switchOffsetRight;
1508
- const viewHeight = maxBranchesHeight + cfg.paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight * 2;
1525
+ const viewHeight = maxBranchesHeight + paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight * 2;
1509
1526
  const shiftedJoinX = switchOffsetLeft + joinX;
1510
1527
  Dom.translate(nameLabelView.g, shiftedJoinX, 0);
1511
- const branchOffsetTop = cfg.paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight;
1528
+ const branchOffsetTop = paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight;
1512
1529
  branchComponents.forEach((component, i) => {
1513
1530
  const branchSize = branchSizes[i];
1514
1531
  const branchOffsetLeft = switchOffsetLeft + branchSize.offsetX + branchSize.branchOffsetLeft;
1515
1532
  Dom.translate(branchLabelViews[i].g, switchOffsetLeft + branchSize.offsetX + branchSize.joinX, 0);
1516
1533
  Dom.translate(component.view.g, branchOffsetLeft, branchOffsetTop);
1517
1534
  if (component.hasOutput && stepContext.isOutputConnected) {
1518
- const endOffsetTopOfComponent = cfg.paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight + component.view.height;
1535
+ const endOffsetTopOfComponent = paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight + component.view.height;
1519
1536
  const missingHeight = viewHeight - endOffsetTopOfComponent - cfg.connectionHeight;
1520
1537
  if (missingHeight > 0) {
1521
1538
  JoinView.createStraightJoin(g, new Vector(switchOffsetLeft + branchSize.offsetX + branchSize.joinX, endOffsetTopOfComponent), missingHeight);
@@ -1525,15 +1542,15 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1525
1542
  let inputView = null;
1526
1543
  if (cfg.inputSize > 0) {
1527
1544
  const iconUrl = viewContext.getStepIconUrl();
1528
- inputView = InputView.createRectInput(g, shiftedJoinX, 0, cfg.inputSize, cfg.inputIconSize, iconUrl);
1545
+ inputView = InputView.createRectInput(g, shiftedJoinX, cfg.paddingTop1, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
1529
1546
  }
1530
- JoinView.createStraightJoin(g, new Vector(shiftedJoinX, 0), cfg.paddingTop);
1531
- JoinView.createJoins(g, new Vector(shiftedJoinX, cfg.paddingTop + cfg.nameLabel.height), branchSizes.map(o => new Vector(switchOffsetLeft + o.offsetX + o.joinX, cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight)));
1547
+ JoinView.createStraightJoin(g, new Vector(shiftedJoinX, 0), paddingTop);
1548
+ 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)));
1532
1549
  if (stepContext.isOutputConnected) {
1533
1550
  const ongoingSequenceIndexes = branchComponents
1534
1551
  .map((component, index) => (component.hasOutput ? index : null))
1535
1552
  .filter(index => index !== null);
1536
- const ongoingJoinTargets = ongoingSequenceIndexes.map((i) => new Vector(switchOffsetLeft + branchSizes[i].offsetX + branchSizes[i].joinX, cfg.paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight));
1553
+ const ongoingJoinTargets = ongoingSequenceIndexes.map((i) => new Vector(switchOffsetLeft + branchSizes[i].offsetX + branchSizes[i].joinX, paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight));
1537
1554
  if (ongoingJoinTargets.length > 0) {
1538
1555
  JoinView.createJoins(g, new Vector(shiftedJoinX, viewHeight), ongoingJoinTargets);
1539
1556
  }
@@ -1558,7 +1575,9 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1558
1575
  return result === true || (result === null && g.contains(click.element)) ? true : result;
1559
1576
  },
1560
1577
  setIsDragging(isDragging) {
1561
- inputView === null || inputView === void 0 ? void 0 : inputView.setIsHidden(isDragging);
1578
+ if (cfg.autoHideInputOnDrag && inputView) {
1579
+ inputView.setIsHidden(isDragging);
1580
+ }
1562
1581
  },
1563
1582
  setIsSelected(isSelected) {
1564
1583
  regionView.setIsSelected(isSelected);
@@ -2067,7 +2086,9 @@ const defaultConfiguration$3 = {
2067
2086
  paddingTop: 20,
2068
2087
  paddingX: 20,
2069
2088
  inputSize: 18,
2089
+ inputRadius: 4,
2070
2090
  inputIconSize: 14,
2091
+ autoHideInputOnDrag: true,
2071
2092
  label: {
2072
2093
  height: 22,
2073
2094
  paddingX: 10,
@@ -2091,10 +2112,13 @@ const defaultConfiguration$2 = {
2091
2112
  view: {
2092
2113
  minContainerWidth: 40,
2093
2114
  paddingX: 20,
2094
- paddingTop: 20,
2115
+ paddingTop1: 0,
2116
+ paddingTop2: 22,
2095
2117
  connectionHeight: 16,
2096
2118
  inputSize: 18,
2097
2119
  inputIconSize: 14,
2120
+ inputRadius: 4,
2121
+ autoHideInputOnDrag: true,
2098
2122
  branchNameLabel: {
2099
2123
  height: 22,
2100
2124
  paddingX: 10,
@@ -4499,6 +4523,13 @@ class DefaultClickBehaviorWrapperExtension {
4499
4523
  }
4500
4524
  }
4501
4525
 
4526
+ class DefaultStepBadgesDecoratorExtension {
4527
+ create(g, view, badges) {
4528
+ const position = new Vector(view.width, 0);
4529
+ return new DefaultBadgesDecorator(position, badges, g);
4530
+ }
4531
+ }
4532
+
4502
4533
  class ServicesResolver {
4503
4534
  static resolve(extensions, configuration) {
4504
4535
  const services = {};
@@ -4515,6 +4546,9 @@ function merge(services, extensions) {
4515
4546
  if (ext.stepComponentViewWrapper) {
4516
4547
  services.stepComponentViewWrapper = ext.stepComponentViewWrapper;
4517
4548
  }
4549
+ if (ext.stepBadgesDecorator) {
4550
+ services.stepBadgesDecorator = ext.stepBadgesDecorator;
4551
+ }
4518
4552
  if (ext.clickBehaviorWrapperExtension) {
4519
4553
  services.clickBehaviorWrapperExtension = ext.clickBehaviorWrapperExtension;
4520
4554
  }
@@ -4569,6 +4603,9 @@ function setDefaults(services, configuration) {
4569
4603
  if (!services.stepComponentViewWrapper) {
4570
4604
  services.stepComponentViewWrapper = new DefaultStepComponentViewWrapperExtension();
4571
4605
  }
4606
+ if (!services.stepBadgesDecorator) {
4607
+ services.stepBadgesDecorator = new DefaultStepBadgesDecoratorExtension();
4608
+ }
4572
4609
  if (!services.clickBehaviorWrapperExtension) {
4573
4610
  services.clickBehaviorWrapperExtension = new DefaultClickBehaviorWrapperExtension();
4574
4611
  }
package/lib/index.d.ts CHANGED
@@ -515,9 +515,8 @@ declare class SelectStepBehaviorEndToken implements BehaviorEndToken {
515
515
  }
516
516
 
517
517
  declare class Badges {
518
- private readonly g;
519
- private readonly position;
520
518
  private readonly badges;
519
+ private readonly decorator;
521
520
  static createForStep(stepContext: StepContext, view: StepComponentView, componentContext: ComponentContext): Badges;
522
521
  static createForRoot(parentElement: SVGGElement, position: Vector, componentContext: ComponentContext): Badges;
523
522
  private constructor();
@@ -550,7 +549,7 @@ declare class ComponentDom {
550
549
 
551
550
  declare class InputView {
552
551
  private readonly root;
553
- static createRectInput(parent: SVGElement, x: number, y: number, size: number, iconSize: number, iconUrl: string | null): InputView;
552
+ static createRectInput(parent: SVGElement, x: number, y: number, size: number, radius: number, iconSize: number, iconUrl: string | null): InputView;
554
553
  static createRoundInput(parent: SVGElement, x: number, y: number, size: number): InputView;
555
554
  private constructor();
556
555
  setIsHidden(isHidden: boolean): void;
@@ -630,7 +629,9 @@ interface ContainerStepComponentViewConfiguration {
630
629
  paddingTop: number;
631
630
  paddingX: number;
632
631
  inputSize: number;
632
+ inputRadius: number;
633
633
  inputIconSize: number;
634
+ autoHideInputOnDrag: boolean;
634
635
  label: LabelViewConfiguration;
635
636
  }
636
637
 
@@ -648,10 +649,19 @@ interface LineGridConfiguration {
648
649
  interface SwitchStepComponentViewConfiguration {
649
650
  minContainerWidth: number;
650
651
  paddingX: number;
651
- paddingTop: number;
652
+ /**
653
+ * The distance between the top of the container and the center point of the input.
654
+ */
655
+ paddingTop1: number;
656
+ /**
657
+ * The distance between the center point of the input and the name label.
658
+ */
659
+ paddingTop2: number;
652
660
  connectionHeight: number;
653
661
  inputSize: number;
654
662
  inputIconSize: number;
663
+ autoHideInputOnDrag: boolean;
664
+ inputRadius: number;
655
665
  nameLabel: LabelViewConfiguration;
656
666
  branchNameLabel: LabelViewConfiguration;
657
667
  }
@@ -770,6 +780,7 @@ declare class DefaultRegionComponentViewExtension implements RegionComponentView
770
780
  interface DesignerExtension {
771
781
  steps?: StepExtension[];
772
782
  stepComponentViewWrapper?: StepComponentViewWrapperExtension;
783
+ stepBadgesDecorator?: StepBadgesDecoratorExtension;
773
784
  clickBehaviorWrapperExtension?: ClickBehaviorWrapperExtension;
774
785
  badges?: BadgeExtension[];
775
786
  uiComponents?: UiComponentExtension[];
@@ -819,6 +830,12 @@ interface SequenceContext {
819
830
  interface StepComponentViewWrapperExtension {
820
831
  wrap(view: StepComponentView, stepContext: StepContext): StepComponentView;
821
832
  }
833
+ interface StepBadgesDecoratorExtension {
834
+ create(g: SVGGElement, view: StepComponentView, badges: (Badge | null)[]): BadgesDecorator;
835
+ }
836
+ interface BadgesDecorator {
837
+ update(): void;
838
+ }
822
839
  interface ClickBehaviorWrapperExtension {
823
840
  create(customActionController: CustomActionController): ClickBehaviorWrapper;
824
841
  }
@@ -1349,4 +1366,4 @@ declare class Designer<TDefinition extends Definition = Definition> {
1349
1366
  private getHistoryController;
1350
1367
  }
1351
1368
 
1352
- export { Attributes, Badge, BadgeExtension, BadgeView, Badges, 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, 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, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
1369
+ 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, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "sequential-workflow-designer",
3
3
  "description": "Customizable no-code component for building flow-based programming applications.",
4
- "version": "0.26.1",
4
+ "version": "0.27.0",
5
5
  "type": "module",
6
6
  "main": "./lib/esm/index.js",
7
7
  "types": "./lib/index.d.ts",
package/sass/designer-theme.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  $panelBackgroundColor: #fff,
4
4
  $panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15)),
5
5
  $panelBorderRadius: 10px,
6
+ $panelBorder: none,
6
7
  $headerTextColor: #000,
7
8
  $filterBackground: #fff,
8
9
  $filterTextColor: #000,
@@ -17,6 +18,7 @@
17
18
  .sqd-toolbox {
18
19
  background: $panelBackgroundColor;
19
20
  box-shadow: $panelBoxShadow;
21
+ border: $panelBorder;
20
22
  border-radius: $panelBorderRadius;
21
23
  }
22
24
  .sqd-toolbox-header-title {
@@ -75,6 +77,7 @@
75
77
  $panelBackgroundColor: #fff,
76
78
  $panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15)),
77
79
  $panelBorderRadius: 10px,
80
+ $panelBorder: none,
78
81
  $buttonBackground: #fff,
79
82
  $buttonBackgroundHovered: #fff,
80
83
  $buttonBorder: (1px solid #c3c3c3),
@@ -87,6 +90,7 @@
87
90
  .sqd-control-bar {
88
91
  background: $panelBackgroundColor;
89
92
  box-shadow: $panelBoxShadow;
93
+ border: $panelBorder;
90
94
  border-radius: $panelBorderRadius;
91
95
  }
92
96
  .sqd-control-bar-button {
@@ -131,6 +135,7 @@
131
135
  $panelBackgroundColor: #fff,
132
136
  $panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.2)),
133
137
  $panelBorderRadius: 4px,
138
+ $panelBorder: none,
134
139
  $groupTextColor: #888,
135
140
  $itemTextColor: #000,
136
141
  $itemBackgroundColorHovered: #eee,
@@ -139,6 +144,7 @@
139
144
  .sqd-theme-#{$theme}.sqd-context-menu {
140
145
  background: $panelBackgroundColor;
141
146
  box-shadow: $panelBoxShadow;
147
+ border: $panelBorder;
142
148
  border-radius: $panelBorderRadius;
143
149
  }
144
150
  .sqd-theme-#{$theme} .sqd-context-menu-group {