Skip to content

Commit b227fad

Browse files
b4rtazb4rtaz
committed
0.2.3.
1 parent b7dd86e commit b227fad

File tree

7 files changed

+77
-35
lines changed

7 files changed

+77
-35
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## 0.2.3
2+
3+
Improved rendering of the switch step for 3 and more branches.
4+
15
## 0.2.2
26

37
Added the `notifyChildrenChanged()` method to the `StepEditorContext` interface.

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,10 @@ Add the below code to your head section in HTML document.
6262
```html
6363
<head>
6464
...
65-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.2/css/designer.css" rel="stylesheet">
66-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.2/css/designer-light.css" rel="stylesheet">
67-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.2/css/designer-dark.css" rel="stylesheet">
68-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.2/lib/designer.js"></script>
65+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.3/css/designer.css" rel="stylesheet">
66+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.3/css/designer-light.css" rel="stylesheet">
67+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.3/css/designer-dark.css" rel="stylesheet">
68+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.3/lib/designer.js"></script>
6969
```
7070

7171
Call the designer by:

‎examples/assets/lib.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function embedStylesheet(url) {
1616

1717
const baseUrl = isTestEnv()
1818
? '..'
19-
: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.2';
19+
: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.3';
2020

2121
embedScript(`${baseUrl}/lib/designer.js`);
2222
embedStylesheet(`${baseUrl}/css/designer.css`);

‎package-lock.json‎

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "sequential-workflow-designer",
3-
"version": "0.2.2",
3+
"version": "0.2.3",
44
"main": "./lib/designer.js",
55
"types": "./lib/designer.d.ts",
66
"repository": {

‎src/workspace/common-views/join-view.ts‎

Lines changed: 47 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,53 @@ export class JoinView {
1414
}
1515

1616
public static createJoins(parent: SVGElement, start: Vector, targets: Vector[]) {
17-
for (const target of targets) {
18-
const c = Math.abs(start.y - target.y) / 2; // size of a corner
19-
const l = Math.abs(start.x - target.x) - c * 2; // size of the line between corners
20-
21-
const x = start.x > target.x ? -1 : 1;
22-
const y = start.y > target.y ? -1 : 1;
23-
24-
const join = Dom.svg('path', {
25-
class: 'sqd-join',
26-
fill: 'none',
27-
d: `M ${start.x} ${start.y} q ${x * c * 0.3} ${y * c * 0.8} ${x * c} ${y * c} l ${x * l} 0 q ${x * c * 0.7} ${
28-
y * c * 0.2
29-
} ${x * c} ${y * c}`
30-
});
31-
parent.insertBefore(join, parent.firstChild);
17+
const firstTarget = targets[0];
18+
const h = Math.abs(firstTarget.y - start.y) / 2; // half height
19+
const y = Math.sign(firstTarget.y - start.y); // y direction
20+
21+
switch (targets.length) {
22+
case 1:
23+
JoinView.createStraightJoin(parent, start, firstTarget.y * y);
24+
break;
25+
26+
case 2:
27+
for (const target of targets) {
28+
const l = Math.abs(target.x - start.x) - h * 2; // line size
29+
const x = Math.sign(target.x - start.x); // x direction
30+
31+
appendJoin(
32+
parent,
33+
`M ${start.x} ${start.y} q ${x * h * 0.3} ${y * h * 0.8} ${x * h} ${y * h} ` +
34+
`l ${x * l} 0 q ${x * h * 0.7} ${y * h * 0.2} ${x * h} ${y * h}`
35+
);
36+
}
37+
break;
38+
39+
default:
40+
{
41+
const f = targets[0]; // first
42+
const l = targets[targets.length - 1]; // last
43+
appendJoin(
44+
parent,
45+
`M ${f.x} ${f.y} q ${h * 0.3} ${h * -y * 0.8} ${h} ${h * -y} ` +
46+
`l ${l.x - f.x - h * 2} 0 q ${h * 0.8} ${-h * -y * 0.3} ${h} ${-h * -y}`
47+
);
48+
49+
for (let i = 1; i < targets.length - 1; i++) {
50+
JoinView.createStraightJoin(parent, targets[i], h * -y);
51+
}
52+
JoinView.createStraightJoin(parent, start, h * y);
53+
}
54+
break;
3255
}
3356
}
3457
}
58+
59+
function appendJoin(parent: SVGElement, d: string) {
60+
const join = Dom.svg('path', {
61+
class: 'sqd-join',
62+
fill: 'none',
63+
d
64+
});
65+
parent.insertBefore(join, parent.firstChild);
66+
}

‎src/workspace/switch-step/switch-step-component-view.ts‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,12 @@ export class SwitchStepComponentView implements ComponentView {
4040
totalX += containerWidths[i];
4141
}
4242

43+
const centerBranchIndex = Math.floor(branchNames.length / 2);
44+
let joinX = containerOffsets[centerBranchIndex];
45+
if (branchNames.length % 2 !== 0) {
46+
joinX += joinXs[centerBranchIndex] + PADDING_X;
47+
}
48+
4349
branchNames.forEach((branchName, i) => {
4450
const sequence = sequenceComponents[i];
4551
const offsetX = containerOffsets[i];
@@ -58,22 +64,22 @@ export class SwitchStepComponentView implements ComponentView {
5864
Dom.translate(sequence.view.g, sequenceX, sequenceY);
5965
});
6066

61-
LabelView.create(g, containerWidths[0], PADDING_TOP, step.name);
67+
LabelView.create(g, joinX, PADDING_TOP, step.name);
6268

63-
JoinView.createStraightJoin(g, new Vector(containerWidths[0], 0), PADDING_TOP);
69+
JoinView.createStraightJoin(g, new Vector(joinX, 0), PADDING_TOP);
6470

6571
const iconUrl = configuration.iconUrlProvider ? configuration.iconUrlProvider(step.componentType, step.type) : null;
66-
const inputView = InputView.createRectInput(g, containerWidths[0], 0, iconUrl);
72+
const inputView = InputView.createRectInput(g, joinX, 0, iconUrl);
6773

6874
JoinView.createJoins(
6975
g,
70-
new Vector(containerWidths[0], PADDING_TOP + LABEL_HEIGHT),
76+
new Vector(joinX, PADDING_TOP + LABEL_HEIGHT),
7177
containerOffsets.map((o, i) => new Vector(o + joinXs[i] + PADDING_X, PADDING_TOP + LABEL_HEIGHT + CONNECTION_HEIGHT))
7278
);
7379

7480
JoinView.createJoins(
7581
g,
76-
new Vector(containerWidths[0], containerHeight),
82+
new Vector(joinX, containerHeight),
7783
containerOffsets.map(
7884
(o, i) => new Vector(o + joinXs[i] + PADDING_X, PADDING_TOP + CONNECTION_HEIGHT + LABEL_HEIGHT * 2 + maxChildHeight)
7985
)
@@ -87,7 +93,7 @@ export class SwitchStepComponentView implements ComponentView {
8793
g,
8894
containersWidth,
8995
containerHeight,
90-
containerWidths[0],
96+
joinX,
9197
sequenceComponents,
9298
regionView,
9399
inputView,

0 commit comments

Comments
 (0)