sequential-workflow-designer 0.26.0 → 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 +94 -56
  5. package/lib/cjs/index.cjs +94 -56
  6. package/lib/esm/index.js +94 -56
  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.0/css/designer.css" rel="stylesheet">
108
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.0/css/designer-light.css" rel="stylesheet">
109
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.0/css/designer-dark.css" rel="stylesheet">
110
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.0/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) {
@@ -1057,54 +1068,58 @@
1057
1068
  }
1058
1069
  }
1059
1070
 
1071
+ const EPS = 0.5; // Epsilon, a tiny offset to avoid rendering issues
1060
1072
  class JoinView {
1061
1073
  static createStraightJoin(parent, start, height) {
1074
+ const dy = Math.sign(height);
1062
1075
  const join = Dom.svg('line', {
1063
1076
  class: 'sqd-join',
1064
1077
  x1: start.x,
1065
- y1: start.y,
1078
+ y1: start.y - EPS * dy,
1066
1079
  x2: start.x,
1067
- y2: start.y + height
1080
+ y2: start.y + height + EPS * dy
1068
1081
  });
1069
1082
  parent.insertBefore(join, parent.firstChild);
1070
1083
  }
1071
1084
  static createJoins(parent, start, targets) {
1072
1085
  const firstTarget = targets[0];
1073
1086
  const h = Math.abs(firstTarget.y - start.y) / 2; // half height
1074
- const y = Math.sign(firstTarget.y - start.y); // y direction
1087
+ const dy = Math.sign(firstTarget.y - start.y); // direction y
1075
1088
  switch (targets.length) {
1076
1089
  case 1:
1077
1090
  if (start.x === targets[0].x) {
1078
- JoinView.createStraightJoin(parent, start, firstTarget.y * y);
1091
+ JoinView.createStraightJoin(parent, start, firstTarget.y * dy);
1079
1092
  }
1080
1093
  else {
1081
- appendCurvedJoins(parent, start, targets, h, y);
1094
+ appendCurvedJoins(parent, start, targets, h, dy);
1082
1095
  }
1083
1096
  break;
1084
1097
  case 2:
1085
- appendCurvedJoins(parent, start, targets, h, y);
1098
+ appendCurvedJoins(parent, start, targets, h, dy);
1086
1099
  break;
1087
1100
  default:
1088
1101
  {
1089
1102
  const f = targets[0]; // first
1090
1103
  const l = targets[targets.length - 1]; // last
1091
- appendJoin(parent, `M ${f.x} ${f.y} q ${h * 0.3} ${h * -y * 0.8} ${h} ${h * -y} ` +
1092
- `l ${l.x - f.x - h * 2} 0 q ${h * 0.8} ${-h * -y * 0.3} ${h} ${-h * -y}`);
1104
+ const eps = EPS * dy;
1105
+ appendJoin(parent, `M ${f.x} ${f.y + eps} l 0 ${-eps} q ${h * 0.3} ${h * -dy * 0.8} ${h} ${h * -dy} ` +
1106
+ `l ${l.x - f.x - h * 2} 0 q ${h * 0.8} ${-h * -dy * 0.3} ${h} ${-h * -dy} l 0 ${eps}`);
1093
1107
  for (let i = 1; i < targets.length - 1; i++) {
1094
- JoinView.createStraightJoin(parent, targets[i], h * -y);
1108
+ JoinView.createStraightJoin(parent, targets[i], h * -dy);
1095
1109
  }
1096
- JoinView.createStraightJoin(parent, start, h * y);
1110
+ JoinView.createStraightJoin(parent, start, h * dy);
1097
1111
  }
1098
1112
  break;
1099
1113
  }
1100
1114
  }
1101
1115
  }
1102
- function appendCurvedJoins(parent, start, targets, h, y) {
1116
+ function appendCurvedJoins(parent, start, targets, h, dy) {
1117
+ const eps = EPS * dy;
1103
1118
  for (const target of targets) {
1104
- const l = Math.abs(target.x - start.x) - h * 2; // line size
1105
- const x = Math.sign(target.x - start.x); // x direction
1106
- appendJoin(parent, `M ${start.x} ${start.y} q ${x * h * 0.3} ${y * h * 0.8} ${x * h} ${y * h} ` +
1107
- `l ${x * l} 0 q ${x * h * 0.7} ${y * h * 0.2} ${x * h} ${y * h}`);
1119
+ const l = Math.abs(target.x - start.x) - h * 2; // straight line length
1120
+ const dx = Math.sign(target.x - start.x); // direction x
1121
+ appendJoin(parent, `M ${start.x} ${start.y - eps} l 0 ${eps} q ${dx * h * 0.3} ${dy * h * 0.8} ${dx * h} ${dy * h} ` +
1122
+ `l ${dx * l} 0 q ${dx * h * 0.7} ${dy * h * 0.2} ${dx * h} ${dy * h} l 0 ${eps}`);
1108
1123
  }
1109
1124
  }
1110
1125
  function appendJoin(parent, d) {
@@ -1434,8 +1449,11 @@
1434
1449
  const joinX = sequenceComponent.view.joinX + offsetLeft;
1435
1450
  Dom.translate(labelView.g, joinX, 0);
1436
1451
  Dom.translate(sequenceComponent.view.g, offsetLeft, cfg.paddingTop + cfg.label.height);
1437
- const iconUrl = viewContext.getStepIconUrl();
1438
- 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
+ }
1439
1457
  JoinView.createStraightJoin(g, new Vector(joinX, 0), cfg.paddingTop);
1440
1458
  const regionView = regionViewBuilder(g, [width], height);
1441
1459
  return {
@@ -1454,7 +1472,9 @@
1454
1472
  return result === true || (result === null && g.contains(click.element)) ? true : result;
1455
1473
  },
1456
1474
  setIsDragging(isDragging) {
1457
- inputView.setIsHidden(isDragging);
1475
+ if (cfg.autoHideInputOnDrag && inputView) {
1476
+ inputView.setIsHidden(isDragging);
1477
+ }
1458
1478
  },
1459
1479
  setIsSelected(isSelected) {
1460
1480
  regionView.setIsSelected(isSelected);
@@ -1470,17 +1490,18 @@
1470
1490
  const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
1471
1491
  return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME$1, (g, regionViewBuilder) => {
1472
1492
  const step = stepContext.step;
1493
+ const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
1473
1494
  const branchNames = Object.keys(step.branches);
1474
1495
  const branchComponents = branchNames.map(branchName => {
1475
1496
  return viewContext.createSequenceComponent(g, step.branches[branchName]);
1476
1497
  });
1477
1498
  const branchLabelViews = branchNames.map(branchName => {
1478
- const labelY = cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1499
+ const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1479
1500
  const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
1480
1501
  return LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1481
1502
  });
1482
1503
  const name = viewContext.getStepName();
1483
- const nameLabelView = LabelView.create(g, cfg.paddingTop, cfg.nameLabel, name, 'primary');
1504
+ const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
1484
1505
  let prevOffsetX = 0;
1485
1506
  const branchSizes = branchComponents.map((component, i) => {
1486
1507
  const halfOfWidestBranchElement = Math.max(branchLabelViews[i].width, cfg.minContainerWidth) / 2;
@@ -1504,17 +1525,17 @@
1504
1525
  const switchOffsetLeft = Math.max(halfOfWidestSwitchElement - joinX, 0);
1505
1526
  const switchOffsetRight = Math.max(halfOfWidestSwitchElement - (totalBranchesWidth - joinX), 0);
1506
1527
  const viewWidth = switchOffsetLeft + totalBranchesWidth + switchOffsetRight;
1507
- 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;
1508
1529
  const shiftedJoinX = switchOffsetLeft + joinX;
1509
1530
  Dom.translate(nameLabelView.g, shiftedJoinX, 0);
1510
- const branchOffsetTop = cfg.paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight;
1531
+ const branchOffsetTop = paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight;
1511
1532
  branchComponents.forEach((component, i) => {
1512
1533
  const branchSize = branchSizes[i];
1513
1534
  const branchOffsetLeft = switchOffsetLeft + branchSize.offsetX + branchSize.branchOffsetLeft;
1514
1535
  Dom.translate(branchLabelViews[i].g, switchOffsetLeft + branchSize.offsetX + branchSize.joinX, 0);
1515
1536
  Dom.translate(component.view.g, branchOffsetLeft, branchOffsetTop);
1516
1537
  if (component.hasOutput && stepContext.isOutputConnected) {
1517
- 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;
1518
1539
  const missingHeight = viewHeight - endOffsetTopOfComponent - cfg.connectionHeight;
1519
1540
  if (missingHeight > 0) {
1520
1541
  JoinView.createStraightJoin(g, new Vector(switchOffsetLeft + branchSize.offsetX + branchSize.joinX, endOffsetTopOfComponent), missingHeight);
@@ -1524,15 +1545,15 @@
1524
1545
  let inputView = null;
1525
1546
  if (cfg.inputSize > 0) {
1526
1547
  const iconUrl = viewContext.getStepIconUrl();
1527
- 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);
1528
1549
  }
1529
- JoinView.createStraightJoin(g, new Vector(shiftedJoinX, 0), cfg.paddingTop);
1530
- 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)));
1531
1552
  if (stepContext.isOutputConnected) {
1532
1553
  const ongoingSequenceIndexes = branchComponents
1533
1554
  .map((component, index) => (component.hasOutput ? index : null))
1534
1555
  .filter(index => index !== null);
1535
- 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));
1536
1557
  if (ongoingJoinTargets.length > 0) {
1537
1558
  JoinView.createJoins(g, new Vector(shiftedJoinX, viewHeight), ongoingJoinTargets);
1538
1559
  }
@@ -1557,7 +1578,9 @@
1557
1578
  return result === true || (result === null && g.contains(click.element)) ? true : result;
1558
1579
  },
1559
1580
  setIsDragging(isDragging) {
1560
- inputView === null || inputView === void 0 ? void 0 : inputView.setIsHidden(isDragging);
1581
+ if (cfg.autoHideInputOnDrag && inputView) {
1582
+ inputView.setIsHidden(isDragging);
1583
+ }
1561
1584
  },
1562
1585
  setIsSelected(isSelected) {
1563
1586
  regionView.setIsSelected(isSelected);
@@ -2066,7 +2089,9 @@
2066
2089
  paddingTop: 20,
2067
2090
  paddingX: 20,
2068
2091
  inputSize: 18,
2092
+ inputRadius: 4,
2069
2093
  inputIconSize: 14,
2094
+ autoHideInputOnDrag: true,
2070
2095
  label: {
2071
2096
  height: 22,
2072
2097
  paddingX: 10,
@@ -2090,10 +2115,13 @@
2090
2115
  view: {
2091
2116
  minContainerWidth: 40,
2092
2117
  paddingX: 20,
2093
- paddingTop: 20,
2118
+ paddingTop1: 0,
2119
+ paddingTop2: 22,
2094
2120
  connectionHeight: 16,
2095
2121
  inputSize: 18,
2096
2122
  inputIconSize: 14,
2123
+ inputRadius: 4,
2124
+ autoHideInputOnDrag: true,
2097
2125
  branchNameLabel: {
2098
2126
  height: 22,
2099
2127
  paddingX: 10,
@@ -3658,10 +3686,7 @@
3658
3686
  const zoomRealPoint = zoomPoint
3659
3687
  .divideByScalar(this.state.lastViewport.scale)
3660
3688
  .subtract(this.state.lastViewport.position.divideByScalar(this.state.lastViewport.scale));
3661
- const position = zoomRealPoint
3662
- .multiplyByScalar(-scale)
3663
- .add(zoomPoint)
3664
- .add(deltaCenterPoint.divideByScalar(this.state.lastViewport.scale));
3689
+ const position = zoomRealPoint.multiplyByScalar(-scale).add(zoomPoint).add(deltaCenterPoint);
3665
3690
  const newViewport = {
3666
3691
  position,
3667
3692
  scale
@@ -4684,6 +4709,13 @@
4684
4709
  }
4685
4710
  }
4686
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
+
4687
4719
  class ServicesResolver {
4688
4720
  static resolve(extensions, configuration) {
4689
4721
  const services = {};
@@ -4700,6 +4732,9 @@
4700
4732
  if (ext.stepComponentViewWrapper) {
4701
4733
  services.stepComponentViewWrapper = ext.stepComponentViewWrapper;
4702
4734
  }
4735
+ if (ext.stepBadgesDecorator) {
4736
+ services.stepBadgesDecorator = ext.stepBadgesDecorator;
4737
+ }
4703
4738
  if (ext.clickBehaviorWrapperExtension) {
4704
4739
  services.clickBehaviorWrapperExtension = ext.clickBehaviorWrapperExtension;
4705
4740
  }
@@ -4754,6 +4789,9 @@
4754
4789
  if (!services.stepComponentViewWrapper) {
4755
4790
  services.stepComponentViewWrapper = new DefaultStepComponentViewWrapperExtension();
4756
4791
  }
4792
+ if (!services.stepBadgesDecorator) {
4793
+ services.stepBadgesDecorator = new DefaultStepBadgesDecoratorExtension();
4794
+ }
4757
4795
  if (!services.clickBehaviorWrapperExtension) {
4758
4796
  services.clickBehaviorWrapperExtension = new DefaultClickBehaviorWrapperExtension();
4759
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) {
@@ -1055,54 +1066,58 @@ class InputView {
1055
1066
  }
1056
1067
  }
1057
1068
 
1069
+ const EPS = 0.5; // Epsilon, a tiny offset to avoid rendering issues
1058
1070
  class JoinView {
1059
1071
  static createStraightJoin(parent, start, height) {
1072
+ const dy = Math.sign(height);
1060
1073
  const join = Dom.svg('line', {
1061
1074
  class: 'sqd-join',
1062
1075
  x1: start.x,
1063
- y1: start.y,
1076
+ y1: start.y - EPS * dy,
1064
1077
  x2: start.x,
1065
- y2: start.y + height
1078
+ y2: start.y + height + EPS * dy
1066
1079
  });
1067
1080
  parent.insertBefore(join, parent.firstChild);
1068
1081
  }
1069
1082
  static createJoins(parent, start, targets) {
1070
1083
  const firstTarget = targets[0];
1071
1084
  const h = Math.abs(firstTarget.y - start.y) / 2; // half height
1072
- const y = Math.sign(firstTarget.y - start.y); // y direction
1085
+ const dy = Math.sign(firstTarget.y - start.y); // direction y
1073
1086
  switch (targets.length) {
1074
1087
  case 1:
1075
1088
  if (start.x === targets[0].x) {
1076
- JoinView.createStraightJoin(parent, start, firstTarget.y * y);
1089
+ JoinView.createStraightJoin(parent, start, firstTarget.y * dy);
1077
1090
  }
1078
1091
  else {
1079
- appendCurvedJoins(parent, start, targets, h, y);
1092
+ appendCurvedJoins(parent, start, targets, h, dy);
1080
1093
  }
1081
1094
  break;
1082
1095
  case 2:
1083
- appendCurvedJoins(parent, start, targets, h, y);
1096
+ appendCurvedJoins(parent, start, targets, h, dy);
1084
1097
  break;
1085
1098
  default:
1086
1099
  {
1087
1100
  const f = targets[0]; // first
1088
1101
  const l = targets[targets.length - 1]; // last
1089
- appendJoin(parent, `M ${f.x} ${f.y} q ${h * 0.3} ${h * -y * 0.8} ${h} ${h * -y} ` +
1090
- `l ${l.x - f.x - h * 2} 0 q ${h * 0.8} ${-h * -y * 0.3} ${h} ${-h * -y}`);
1102
+ const eps = EPS * dy;
1103
+ appendJoin(parent, `M ${f.x} ${f.y + eps} l 0 ${-eps} q ${h * 0.3} ${h * -dy * 0.8} ${h} ${h * -dy} ` +
1104
+ `l ${l.x - f.x - h * 2} 0 q ${h * 0.8} ${-h * -dy * 0.3} ${h} ${-h * -dy} l 0 ${eps}`);
1091
1105
  for (let i = 1; i < targets.length - 1; i++) {
1092
- JoinView.createStraightJoin(parent, targets[i], h * -y);
1106
+ JoinView.createStraightJoin(parent, targets[i], h * -dy);
1093
1107
  }
1094
- JoinView.createStraightJoin(parent, start, h * y);
1108
+ JoinView.createStraightJoin(parent, start, h * dy);
1095
1109
  }
1096
1110
  break;
1097
1111
  }
1098
1112
  }
1099
1113
  }
1100
- function appendCurvedJoins(parent, start, targets, h, y) {
1114
+ function appendCurvedJoins(parent, start, targets, h, dy) {
1115
+ const eps = EPS * dy;
1101
1116
  for (const target of targets) {
1102
- const l = Math.abs(target.x - start.x) - h * 2; // line size
1103
- const x = Math.sign(target.x - start.x); // x direction
1104
- appendJoin(parent, `M ${start.x} ${start.y} q ${x * h * 0.3} ${y * h * 0.8} ${x * h} ${y * h} ` +
1105
- `l ${x * l} 0 q ${x * h * 0.7} ${y * h * 0.2} ${x * h} ${y * h}`);
1117
+ const l = Math.abs(target.x - start.x) - h * 2; // straight line length
1118
+ const dx = Math.sign(target.x - start.x); // direction x
1119
+ appendJoin(parent, `M ${start.x} ${start.y - eps} l 0 ${eps} q ${dx * h * 0.3} ${dy * h * 0.8} ${dx * h} ${dy * h} ` +
1120
+ `l ${dx * l} 0 q ${dx * h * 0.7} ${dy * h * 0.2} ${dx * h} ${dy * h} l 0 ${eps}`);
1106
1121
  }
1107
1122
  }
1108
1123
  function appendJoin(parent, d) {
@@ -1432,8 +1447,11 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
1432
1447
  const joinX = sequenceComponent.view.joinX + offsetLeft;
1433
1448
  Dom.translate(labelView.g, joinX, 0);
1434
1449
  Dom.translate(sequenceComponent.view.g, offsetLeft, cfg.paddingTop + cfg.label.height);
1435
- const iconUrl = viewContext.getStepIconUrl();
1436
- 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
+ }
1437
1455
  JoinView.createStraightJoin(g, new Vector(joinX, 0), cfg.paddingTop);
1438
1456
  const regionView = regionViewBuilder(g, [width], height);
1439
1457
  return {
@@ -1452,7 +1470,9 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
1452
1470
  return result === true || (result === null && g.contains(click.element)) ? true : result;
1453
1471
  },
1454
1472
  setIsDragging(isDragging) {
1455
- inputView.setIsHidden(isDragging);
1473
+ if (cfg.autoHideInputOnDrag && inputView) {
1474
+ inputView.setIsHidden(isDragging);
1475
+ }
1456
1476
  },
1457
1477
  setIsSelected(isSelected) {
1458
1478
  regionView.setIsSelected(isSelected);
@@ -1468,17 +1488,18 @@ const COMPONENT_CLASS_NAME$1 = 'switch';
1468
1488
  const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
1469
1489
  return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME$1, (g, regionViewBuilder) => {
1470
1490
  const step = stepContext.step;
1491
+ const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
1471
1492
  const branchNames = Object.keys(step.branches);
1472
1493
  const branchComponents = branchNames.map(branchName => {
1473
1494
  return viewContext.createSequenceComponent(g, step.branches[branchName]);
1474
1495
  });
1475
1496
  const branchLabelViews = branchNames.map(branchName => {
1476
- const labelY = cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1497
+ const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1477
1498
  const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
1478
1499
  return LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1479
1500
  });
1480
1501
  const name = viewContext.getStepName();
1481
- const nameLabelView = LabelView.create(g, cfg.paddingTop, cfg.nameLabel, name, 'primary');
1502
+ const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
1482
1503
  let prevOffsetX = 0;
1483
1504
  const branchSizes = branchComponents.map((component, i) => {
1484
1505
  const halfOfWidestBranchElement = Math.max(branchLabelViews[i].width, cfg.minContainerWidth) / 2;
@@ -1502,17 +1523,17 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1502
1523
  const switchOffsetLeft = Math.max(halfOfWidestSwitchElement - joinX, 0);
1503
1524
  const switchOffsetRight = Math.max(halfOfWidestSwitchElement - (totalBranchesWidth - joinX), 0);
1504
1525
  const viewWidth = switchOffsetLeft + totalBranchesWidth + switchOffsetRight;
1505
- 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;
1506
1527
  const shiftedJoinX = switchOffsetLeft + joinX;
1507
1528
  Dom.translate(nameLabelView.g, shiftedJoinX, 0);
1508
- const branchOffsetTop = cfg.paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight;
1529
+ const branchOffsetTop = paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight;
1509
1530
  branchComponents.forEach((component, i) => {
1510
1531
  const branchSize = branchSizes[i];
1511
1532
  const branchOffsetLeft = switchOffsetLeft + branchSize.offsetX + branchSize.branchOffsetLeft;
1512
1533
  Dom.translate(branchLabelViews[i].g, switchOffsetLeft + branchSize.offsetX + branchSize.joinX, 0);
1513
1534
  Dom.translate(component.view.g, branchOffsetLeft, branchOffsetTop);
1514
1535
  if (component.hasOutput && stepContext.isOutputConnected) {
1515
- 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;
1516
1537
  const missingHeight = viewHeight - endOffsetTopOfComponent - cfg.connectionHeight;
1517
1538
  if (missingHeight > 0) {
1518
1539
  JoinView.createStraightJoin(g, new Vector(switchOffsetLeft + branchSize.offsetX + branchSize.joinX, endOffsetTopOfComponent), missingHeight);
@@ -1522,15 +1543,15 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1522
1543
  let inputView = null;
1523
1544
  if (cfg.inputSize > 0) {
1524
1545
  const iconUrl = viewContext.getStepIconUrl();
1525
- 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);
1526
1547
  }
1527
- JoinView.createStraightJoin(g, new Vector(shiftedJoinX, 0), cfg.paddingTop);
1528
- 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)));
1529
1550
  if (stepContext.isOutputConnected) {
1530
1551
  const ongoingSequenceIndexes = branchComponents
1531
1552
  .map((component, index) => (component.hasOutput ? index : null))
1532
1553
  .filter(index => index !== null);
1533
- 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));
1534
1555
  if (ongoingJoinTargets.length > 0) {
1535
1556
  JoinView.createJoins(g, new Vector(shiftedJoinX, viewHeight), ongoingJoinTargets);
1536
1557
  }
@@ -1555,7 +1576,9 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1555
1576
  return result === true || (result === null && g.contains(click.element)) ? true : result;
1556
1577
  },
1557
1578
  setIsDragging(isDragging) {
1558
- inputView === null || inputView === void 0 ? void 0 : inputView.setIsHidden(isDragging);
1579
+ if (cfg.autoHideInputOnDrag && inputView) {
1580
+ inputView.setIsHidden(isDragging);
1581
+ }
1559
1582
  },
1560
1583
  setIsSelected(isSelected) {
1561
1584
  regionView.setIsSelected(isSelected);
@@ -2064,7 +2087,9 @@ const defaultConfiguration$3 = {
2064
2087
  paddingTop: 20,
2065
2088
  paddingX: 20,
2066
2089
  inputSize: 18,
2090
+ inputRadius: 4,
2067
2091
  inputIconSize: 14,
2092
+ autoHideInputOnDrag: true,
2068
2093
  label: {
2069
2094
  height: 22,
2070
2095
  paddingX: 10,
@@ -2088,10 +2113,13 @@ const defaultConfiguration$2 = {
2088
2113
  view: {
2089
2114
  minContainerWidth: 40,
2090
2115
  paddingX: 20,
2091
- paddingTop: 20,
2116
+ paddingTop1: 0,
2117
+ paddingTop2: 22,
2092
2118
  connectionHeight: 16,
2093
2119
  inputSize: 18,
2094
2120
  inputIconSize: 14,
2121
+ inputRadius: 4,
2122
+ autoHideInputOnDrag: true,
2095
2123
  branchNameLabel: {
2096
2124
  height: 22,
2097
2125
  paddingX: 10,
@@ -3473,10 +3501,7 @@ class PinchToZoomController {
3473
3501
  const zoomRealPoint = zoomPoint
3474
3502
  .divideByScalar(this.state.lastViewport.scale)
3475
3503
  .subtract(this.state.lastViewport.position.divideByScalar(this.state.lastViewport.scale));
3476
- const position = zoomRealPoint
3477
- .multiplyByScalar(-scale)
3478
- .add(zoomPoint)
3479
- .add(deltaCenterPoint.divideByScalar(this.state.lastViewport.scale));
3504
+ const position = zoomRealPoint.multiplyByScalar(-scale).add(zoomPoint).add(deltaCenterPoint);
3480
3505
  const newViewport = {
3481
3506
  position,
3482
3507
  scale
@@ -4499,6 +4524,13 @@ class DefaultClickBehaviorWrapperExtension {
4499
4524
  }
4500
4525
  }
4501
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
+
4502
4534
  class ServicesResolver {
4503
4535
  static resolve(extensions, configuration) {
4504
4536
  const services = {};
@@ -4515,6 +4547,9 @@ function merge(services, extensions) {
4515
4547
  if (ext.stepComponentViewWrapper) {
4516
4548
  services.stepComponentViewWrapper = ext.stepComponentViewWrapper;
4517
4549
  }
4550
+ if (ext.stepBadgesDecorator) {
4551
+ services.stepBadgesDecorator = ext.stepBadgesDecorator;
4552
+ }
4518
4553
  if (ext.clickBehaviorWrapperExtension) {
4519
4554
  services.clickBehaviorWrapperExtension = ext.clickBehaviorWrapperExtension;
4520
4555
  }
@@ -4569,6 +4604,9 @@ function setDefaults(services, configuration) {
4569
4604
  if (!services.stepComponentViewWrapper) {
4570
4605
  services.stepComponentViewWrapper = new DefaultStepComponentViewWrapperExtension();
4571
4606
  }
4607
+ if (!services.stepBadgesDecorator) {
4608
+ services.stepBadgesDecorator = new DefaultStepBadgesDecoratorExtension();
4609
+ }
4572
4610
  if (!services.clickBehaviorWrapperExtension) {
4573
4611
  services.clickBehaviorWrapperExtension = new DefaultClickBehaviorWrapperExtension();
4574
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) {
@@ -1054,54 +1065,58 @@ class InputView {
1054
1065
  }
1055
1066
  }
1056
1067
 
1068
+ const EPS = 0.5; // Epsilon, a tiny offset to avoid rendering issues
1057
1069
  class JoinView {
1058
1070
  static createStraightJoin(parent, start, height) {
1071
+ const dy = Math.sign(height);
1059
1072
  const join = Dom.svg('line', {
1060
1073
  class: 'sqd-join',
1061
1074
  x1: start.x,
1062
- y1: start.y,
1075
+ y1: start.y - EPS * dy,
1063
1076
  x2: start.x,
1064
- y2: start.y + height
1077
+ y2: start.y + height + EPS * dy
1065
1078
  });
1066
1079
  parent.insertBefore(join, parent.firstChild);
1067
1080
  }
1068
1081
  static createJoins(parent, start, targets) {
1069
1082
  const firstTarget = targets[0];
1070
1083
  const h = Math.abs(firstTarget.y - start.y) / 2; // half height
1071
- const y = Math.sign(firstTarget.y - start.y); // y direction
1084
+ const dy = Math.sign(firstTarget.y - start.y); // direction y
1072
1085
  switch (targets.length) {
1073
1086
  case 1:
1074
1087
  if (start.x === targets[0].x) {
1075
- JoinView.createStraightJoin(parent, start, firstTarget.y * y);
1088
+ JoinView.createStraightJoin(parent, start, firstTarget.y * dy);
1076
1089
  }
1077
1090
  else {
1078
- appendCurvedJoins(parent, start, targets, h, y);
1091
+ appendCurvedJoins(parent, start, targets, h, dy);
1079
1092
  }
1080
1093
  break;
1081
1094
  case 2:
1082
- appendCurvedJoins(parent, start, targets, h, y);
1095
+ appendCurvedJoins(parent, start, targets, h, dy);
1083
1096
  break;
1084
1097
  default:
1085
1098
  {
1086
1099
  const f = targets[0]; // first
1087
1100
  const l = targets[targets.length - 1]; // last
1088
- appendJoin(parent, `M ${f.x} ${f.y} q ${h * 0.3} ${h * -y * 0.8} ${h} ${h * -y} ` +
1089
- `l ${l.x - f.x - h * 2} 0 q ${h * 0.8} ${-h * -y * 0.3} ${h} ${-h * -y}`);
1101
+ const eps = EPS * dy;
1102
+ appendJoin(parent, `M ${f.x} ${f.y + eps} l 0 ${-eps} q ${h * 0.3} ${h * -dy * 0.8} ${h} ${h * -dy} ` +
1103
+ `l ${l.x - f.x - h * 2} 0 q ${h * 0.8} ${-h * -dy * 0.3} ${h} ${-h * -dy} l 0 ${eps}`);
1090
1104
  for (let i = 1; i < targets.length - 1; i++) {
1091
- JoinView.createStraightJoin(parent, targets[i], h * -y);
1105
+ JoinView.createStraightJoin(parent, targets[i], h * -dy);
1092
1106
  }
1093
- JoinView.createStraightJoin(parent, start, h * y);
1107
+ JoinView.createStraightJoin(parent, start, h * dy);
1094
1108
  }
1095
1109
  break;
1096
1110
  }
1097
1111
  }
1098
1112
  }
1099
- function appendCurvedJoins(parent, start, targets, h, y) {
1113
+ function appendCurvedJoins(parent, start, targets, h, dy) {
1114
+ const eps = EPS * dy;
1100
1115
  for (const target of targets) {
1101
- const l = Math.abs(target.x - start.x) - h * 2; // line size
1102
- const x = Math.sign(target.x - start.x); // x direction
1103
- appendJoin(parent, `M ${start.x} ${start.y} q ${x * h * 0.3} ${y * h * 0.8} ${x * h} ${y * h} ` +
1104
- `l ${x * l} 0 q ${x * h * 0.7} ${y * h * 0.2} ${x * h} ${y * h}`);
1116
+ const l = Math.abs(target.x - start.x) - h * 2; // straight line length
1117
+ const dx = Math.sign(target.x - start.x); // direction x
1118
+ appendJoin(parent, `M ${start.x} ${start.y - eps} l 0 ${eps} q ${dx * h * 0.3} ${dy * h * 0.8} ${dx * h} ${dy * h} ` +
1119
+ `l ${dx * l} 0 q ${dx * h * 0.7} ${dy * h * 0.2} ${dx * h} ${dy * h} l 0 ${eps}`);
1105
1120
  }
1106
1121
  }
1107
1122
  function appendJoin(parent, d) {
@@ -1431,8 +1446,11 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
1431
1446
  const joinX = sequenceComponent.view.joinX + offsetLeft;
1432
1447
  Dom.translate(labelView.g, joinX, 0);
1433
1448
  Dom.translate(sequenceComponent.view.g, offsetLeft, cfg.paddingTop + cfg.label.height);
1434
- const iconUrl = viewContext.getStepIconUrl();
1435
- 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
+ }
1436
1454
  JoinView.createStraightJoin(g, new Vector(joinX, 0), cfg.paddingTop);
1437
1455
  const regionView = regionViewBuilder(g, [width], height);
1438
1456
  return {
@@ -1451,7 +1469,9 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
1451
1469
  return result === true || (result === null && g.contains(click.element)) ? true : result;
1452
1470
  },
1453
1471
  setIsDragging(isDragging) {
1454
- inputView.setIsHidden(isDragging);
1472
+ if (cfg.autoHideInputOnDrag && inputView) {
1473
+ inputView.setIsHidden(isDragging);
1474
+ }
1455
1475
  },
1456
1476
  setIsSelected(isSelected) {
1457
1477
  regionView.setIsSelected(isSelected);
@@ -1467,17 +1487,18 @@ const COMPONENT_CLASS_NAME$1 = 'switch';
1467
1487
  const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
1468
1488
  return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME$1, (g, regionViewBuilder) => {
1469
1489
  const step = stepContext.step;
1490
+ const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
1470
1491
  const branchNames = Object.keys(step.branches);
1471
1492
  const branchComponents = branchNames.map(branchName => {
1472
1493
  return viewContext.createSequenceComponent(g, step.branches[branchName]);
1473
1494
  });
1474
1495
  const branchLabelViews = branchNames.map(branchName => {
1475
- const labelY = cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1496
+ const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1476
1497
  const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
1477
1498
  return LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1478
1499
  });
1479
1500
  const name = viewContext.getStepName();
1480
- const nameLabelView = LabelView.create(g, cfg.paddingTop, cfg.nameLabel, name, 'primary');
1501
+ const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
1481
1502
  let prevOffsetX = 0;
1482
1503
  const branchSizes = branchComponents.map((component, i) => {
1483
1504
  const halfOfWidestBranchElement = Math.max(branchLabelViews[i].width, cfg.minContainerWidth) / 2;
@@ -1501,17 +1522,17 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1501
1522
  const switchOffsetLeft = Math.max(halfOfWidestSwitchElement - joinX, 0);
1502
1523
  const switchOffsetRight = Math.max(halfOfWidestSwitchElement - (totalBranchesWidth - joinX), 0);
1503
1524
  const viewWidth = switchOffsetLeft + totalBranchesWidth + switchOffsetRight;
1504
- 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;
1505
1526
  const shiftedJoinX = switchOffsetLeft + joinX;
1506
1527
  Dom.translate(nameLabelView.g, shiftedJoinX, 0);
1507
- const branchOffsetTop = cfg.paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight;
1528
+ const branchOffsetTop = paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight;
1508
1529
  branchComponents.forEach((component, i) => {
1509
1530
  const branchSize = branchSizes[i];
1510
1531
  const branchOffsetLeft = switchOffsetLeft + branchSize.offsetX + branchSize.branchOffsetLeft;
1511
1532
  Dom.translate(branchLabelViews[i].g, switchOffsetLeft + branchSize.offsetX + branchSize.joinX, 0);
1512
1533
  Dom.translate(component.view.g, branchOffsetLeft, branchOffsetTop);
1513
1534
  if (component.hasOutput && stepContext.isOutputConnected) {
1514
- 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;
1515
1536
  const missingHeight = viewHeight - endOffsetTopOfComponent - cfg.connectionHeight;
1516
1537
  if (missingHeight > 0) {
1517
1538
  JoinView.createStraightJoin(g, new Vector(switchOffsetLeft + branchSize.offsetX + branchSize.joinX, endOffsetTopOfComponent), missingHeight);
@@ -1521,15 +1542,15 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1521
1542
  let inputView = null;
1522
1543
  if (cfg.inputSize > 0) {
1523
1544
  const iconUrl = viewContext.getStepIconUrl();
1524
- 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);
1525
1546
  }
1526
- JoinView.createStraightJoin(g, new Vector(shiftedJoinX, 0), cfg.paddingTop);
1527
- 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)));
1528
1549
  if (stepContext.isOutputConnected) {
1529
1550
  const ongoingSequenceIndexes = branchComponents
1530
1551
  .map((component, index) => (component.hasOutput ? index : null))
1531
1552
  .filter(index => index !== null);
1532
- 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));
1533
1554
  if (ongoingJoinTargets.length > 0) {
1534
1555
  JoinView.createJoins(g, new Vector(shiftedJoinX, viewHeight), ongoingJoinTargets);
1535
1556
  }
@@ -1554,7 +1575,9 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1554
1575
  return result === true || (result === null && g.contains(click.element)) ? true : result;
1555
1576
  },
1556
1577
  setIsDragging(isDragging) {
1557
- inputView === null || inputView === void 0 ? void 0 : inputView.setIsHidden(isDragging);
1578
+ if (cfg.autoHideInputOnDrag && inputView) {
1579
+ inputView.setIsHidden(isDragging);
1580
+ }
1558
1581
  },
1559
1582
  setIsSelected(isSelected) {
1560
1583
  regionView.setIsSelected(isSelected);
@@ -2063,7 +2086,9 @@ const defaultConfiguration$3 = {
2063
2086
  paddingTop: 20,
2064
2087
  paddingX: 20,
2065
2088
  inputSize: 18,
2089
+ inputRadius: 4,
2066
2090
  inputIconSize: 14,
2091
+ autoHideInputOnDrag: true,
2067
2092
  label: {
2068
2093
  height: 22,
2069
2094
  paddingX: 10,
@@ -2087,10 +2112,13 @@ const defaultConfiguration$2 = {
2087
2112
  view: {
2088
2113
  minContainerWidth: 40,
2089
2114
  paddingX: 20,
2090
- paddingTop: 20,
2115
+ paddingTop1: 0,
2116
+ paddingTop2: 22,
2091
2117
  connectionHeight: 16,
2092
2118
  inputSize: 18,
2093
2119
  inputIconSize: 14,
2120
+ inputRadius: 4,
2121
+ autoHideInputOnDrag: true,
2094
2122
  branchNameLabel: {
2095
2123
  height: 22,
2096
2124
  paddingX: 10,
@@ -3472,10 +3500,7 @@ class PinchToZoomController {
3472
3500
  const zoomRealPoint = zoomPoint
3473
3501
  .divideByScalar(this.state.lastViewport.scale)
3474
3502
  .subtract(this.state.lastViewport.position.divideByScalar(this.state.lastViewport.scale));
3475
- const position = zoomRealPoint
3476
- .multiplyByScalar(-scale)
3477
- .add(zoomPoint)
3478
- .add(deltaCenterPoint.divideByScalar(this.state.lastViewport.scale));
3503
+ const position = zoomRealPoint.multiplyByScalar(-scale).add(zoomPoint).add(deltaCenterPoint);
3479
3504
  const newViewport = {
3480
3505
  position,
3481
3506
  scale
@@ -4498,6 +4523,13 @@ class DefaultClickBehaviorWrapperExtension {
4498
4523
  }
4499
4524
  }
4500
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
+
4501
4533
  class ServicesResolver {
4502
4534
  static resolve(extensions, configuration) {
4503
4535
  const services = {};
@@ -4514,6 +4546,9 @@ function merge(services, extensions) {
4514
4546
  if (ext.stepComponentViewWrapper) {
4515
4547
  services.stepComponentViewWrapper = ext.stepComponentViewWrapper;
4516
4548
  }
4549
+ if (ext.stepBadgesDecorator) {
4550
+ services.stepBadgesDecorator = ext.stepBadgesDecorator;
4551
+ }
4517
4552
  if (ext.clickBehaviorWrapperExtension) {
4518
4553
  services.clickBehaviorWrapperExtension = ext.clickBehaviorWrapperExtension;
4519
4554
  }
@@ -4568,6 +4603,9 @@ function setDefaults(services, configuration) {
4568
4603
  if (!services.stepComponentViewWrapper) {
4569
4604
  services.stepComponentViewWrapper = new DefaultStepComponentViewWrapperExtension();
4570
4605
  }
4606
+ if (!services.stepBadgesDecorator) {
4607
+ services.stepBadgesDecorator = new DefaultStepBadgesDecoratorExtension();
4608
+ }
4571
4609
  if (!services.clickBehaviorWrapperExtension) {
4572
4610
  services.clickBehaviorWrapperExtension = new DefaultClickBehaviorWrapperExtension();
4573
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.0",
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 {