Skip to content

Commit a7fbf31

Browse files
b4rtazb4rtaz
authored
0.10.1. (#36)
1 parent db8da4f commit a7fbf31

34 files changed

+273
-117
lines changed

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
## 0.10.1
2+
3+
* Fixed the bug with the auto-hide feature in the smart editor.
4+
* Fixed the bug with rendering wide components in the sequence component.
5+
* Fixed the bug with dragging when the designer is attached to a scrolled page.
6+
17
## 0.10.0
28

39
Refactored the step component interface. Extracted the logic of the step validation to a separated layer called badges. This allowed to create a new type of badge: `counter`. The counter badge is available in the pro version.

‎README.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ Features:
3232
* [🌻 Rendering Test](https://nocode-js.github.io/sequential-workflow-designer/examples/rendering-test.html)
3333
* [🚄 Stress Test](https://nocode-js.github.io/sequential-workflow-designer/examples/stress-test.html)
3434
* [🚪 Editing Restrictions](https://nocode-js.github.io/sequential-workflow-designer/examples/editing-restrictions.html)
35+
* [📜 Scrollable Page](https://nocode-js.github.io/sequential-workflow-designer/examples/scrollable-page.html)
3536

3637
Pro:
3738

@@ -87,10 +88,10 @@ Add the below code to your head section in HTML document.
8788
```html
8889
<head>
8990
...
90-
<link href="https://cdn.jsdelivr.net/npm/[email protected].0/css/designer.css" rel="stylesheet">
91-
<link href="https://cdn.jsdelivr.net/npm/[email protected].0/css/designer-light.css" rel="stylesheet">
92-
<link href="https://cdn.jsdelivr.net/npm/[email protected].0/css/designer-dark.css" rel="stylesheet">
93-
<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/index.umd.js"></script>
91+
<link href="https://cdn.jsdelivr.net/npm/[email protected].1/css/designer.css" rel="stylesheet">
92+
<link href="https://cdn.jsdelivr.net/npm/[email protected].1/css/designer-light.css" rel="stylesheet">
93+
<link href="https://cdn.jsdelivr.net/npm/[email protected].1/css/designer-dark.css" rel="stylesheet">
94+
<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/index.umd.js"></script>
9495
```
9596

9697
Call the designer by:

‎angular/designer/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer-angular",
33
"description": "Angular wrapper for Sequential Workflow Designer component.",
4-
"version": "0.10.0",
4+
"version": "0.10.1",
55
"author": {
66
"name": "NoCode JS",
77
"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
1515
"peerDependencies": {
1616
"@angular/common": "12 - 15",
1717
"@angular/core": "12 - 15",
18-
"sequential-workflow-designer": "^0.10.0"
18+
"sequential-workflow-designer": "^0.10.1"
1919
},
2020
"dependencies": {
2121
"tslib": "^2.3.0"

‎demos/angular-app/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
"@angular/platform-browser-dynamic": "^15.2.2",
2525
"@angular/router": "^15.2.2",
2626
"rxjs": "~7.8.0",
27-
"sequential-workflow-designer": "^0.10.0",
28-
"sequential-workflow-designer-angular": "^0.10.0",
27+
"sequential-workflow-designer": "^0.10.1",
28+
"sequential-workflow-designer-angular": "^0.10.1",
2929
"tslib": "^2.3.0",
3030
"zone.js": "~0.13.0"
3131
},

‎demos/angular-app/yarn.lock‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5180,17 +5180,17 @@ [email protected]:
51805180
range-parser "~1.2.1"
51815181
statuses "2.0.1"
51825182

5183-
sequential-workflow-designer-angular@^0.10.0:
5184-
version "0.10.0"
5185-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.10.0.tgz#bccb2212f6bcf3114c13435291195e7346271f50"
5186-
integrity sha512-RivPz4H10wWyviJBfHciEGqy/EBf/mD/zPy2/2yzOXc8sI+NGTBTg9GJSTx0iHqa8LrOtWgv3JAhLrRr3X90/A==
5183+
sequential-workflow-designer-angular@^0.10.1:
5184+
version "0.10.1"
5185+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.10.1.tgz#ab4dd09d7b7e542b18ba5c3521d9687490213467"
5186+
integrity sha512-3vfKQd3IpJiaosDP7kmPz66EUH/w8O5tX/uoufPO8ymDg+TtFaM4owafq88VyvNb9Gy06W7+PM4aWP78cHgdqQ==
51875187
dependencies:
51885188
tslib "^2.3.0"
51895189

5190-
sequential-workflow-designer@^0.10.0:
5191-
version "0.10.0"
5192-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.10.0.tgz#c443f867c06cab82703dfc5a84a579392f268d9a"
5193-
integrity sha512-50A8bJBNNsHbdu48PbDIqwJk9YsWBNsCpVb7zY0IAJeNWM1yhk8w+h2vtPBqMIwkqoXAX2o/4em6QHkIofXR8A==
5190+
sequential-workflow-designer@^0.10.1:
5191+
version "0.10.1"
5192+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.10.1.tgz#44dfc4e5bb901f9e0fb95b627a0344cde8f25d44"
5193+
integrity sha512-OIR0Glck99alIjliweGo9HZhegXSnQmBwbnSzZjqr15QlVFAIuo4YePPy/PV5y/wTvQZoq02SVpSzgukIQDNGQ==
51945194
dependencies:
51955195
sequential-workflow-model "^0.1.1"
51965196

‎demos/react-app/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"dependencies": {
66
"react": "^18.2.0",
77
"react-dom": "^18.2.0",
8-
"sequential-workflow-designer": "^0.10.0",
9-
"sequential-workflow-designer-react": "^0.10.0"
8+
"sequential-workflow-designer": "^0.10.1",
9+
"sequential-workflow-designer-react": "^0.10.1"
1010
},
1111
"devDependencies": {
1212
"@types/jest": "^29.2.5",

‎designer/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer",
33
"description": "Customizable no-code component for building flow-based programming applications.",
4-
"version": "0.10.0",
4+
"version": "0.10.1",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",

‎designer/src/behaviors/behavior-controller.ts‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,11 @@ import { readMousePosition, readTouchPosition } from '../core/event-readers';
44

55
const notInitializedError = 'State is not initialized';
66

7-
export class BehaviorController {
8-
private readonly onMouseMoveHandler = (e: MouseEvent) => this.onMouseMove(e);
9-
private readonly onMouseUpHandler = (e: MouseEvent) => this.onMouseUp(e);
10-
private readonly onTouchMoveHandler = (e: TouchEvent) => this.onTouchMove(e);
11-
private readonly onTouchEndHandler = (e: TouchEvent) => this.onTouchEnd(e);
12-
private readonly onTouchStartHandler = (e: TouchEvent) => this.onTouchStart(e);
7+
const nonPassiveOptions: AddEventListenerOptions & EventListenerOptions = {
8+
passive: false
9+
};
1310

11+
export class BehaviorController {
1412
private state?: {
1513
startPosition: Vector;
1614
behavior: Behavior;
@@ -29,29 +27,29 @@ export class BehaviorController {
2927
};
3028
behavior.onStart(this.state.startPosition);
3129

32-
window.addEventListener('mousemove', this.onMouseMoveHandler, false);
33-
window.addEventListener('touchmove', this.onTouchMoveHandler, false);
34-
window.addEventListener('mouseup', this.onMouseUpHandler, false);
35-
window.addEventListener('touchend', this.onTouchEndHandler, false);
36-
window.addEventListener('touchstart', this.onTouchStartHandler, false);
30+
window.addEventListener('mousemove', this.onMouseMove, false);
31+
window.addEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
32+
window.addEventListener('mouseup', this.onMouseUp, false);
33+
window.addEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
34+
window.addEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
3735
}
3836

39-
private onMouseMove(e: MouseEvent) {
37+
private readonly onMouseMove = (e: MouseEvent) => {
4038
e.preventDefault();
4139
this.move(readMousePosition(e));
42-
}
40+
};
4341

44-
private onTouchMove(e: TouchEvent) {
42+
private readonly onTouchMove = (e: TouchEvent) => {
4543
e.preventDefault();
4644
this.move(readTouchPosition(e));
47-
}
45+
};
4846

49-
private onMouseUp(e: MouseEvent) {
47+
private readonly onMouseUp = (e: MouseEvent) => {
5048
e.preventDefault();
5149
this.stop(false, e.target as Element | null);
52-
}
50+
};
5351

54-
private onTouchEnd(e: TouchEvent) {
52+
private readonly onTouchEnd = (e: TouchEvent) => {
5553
e.preventDefault();
5654
if (!this.state) {
5755
throw new Error(notInitializedError);
@@ -60,14 +58,14 @@ export class BehaviorController {
6058
const position = this.state.lastPosition ?? this.state.startPosition;
6159
const element = document.elementFromPoint(position.x, position.y);
6260
this.stop(false, element);
63-
}
61+
};
6462

65-
private onTouchStart(e: TouchEvent) {
63+
private readonly onTouchStart = (e: TouchEvent) => {
6664
e.preventDefault();
6765
if (e.touches.length !== 1) {
6866
this.stop(true, null);
6967
}
70-
}
68+
};
7169

7270
private move(position: Vector) {
7371
if (!this.state) {
@@ -92,11 +90,11 @@ export class BehaviorController {
9290
throw new Error(notInitializedError);
9391
}
9492

95-
window.removeEventListener('mousemove', this.onMouseMoveHandler, false);
96-
window.removeEventListener('touchmove', this.onTouchMoveHandler, false);
97-
window.removeEventListener('mouseup', this.onMouseUpHandler, false);
98-
window.removeEventListener('touchend', this.onTouchEndHandler, false);
99-
window.removeEventListener('touchstart', this.onTouchEndHandler, false);
93+
window.removeEventListener('mousemove', this.onMouseMove, false);
94+
window.removeEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
95+
window.removeEventListener('mouseup', this.onMouseUp, false);
96+
window.removeEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
97+
window.removeEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
10098

10199
this.state.behavior.onEnd(interrupt, element);
102100
this.state = undefined;

‎designer/src/behaviors/drag-step-behavior.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,10 @@ export class DragStepBehavior implements Behavior {
4949
this.draggedStepComponent.view.width === this.view.component.width &&
5050
this.draggedStepComponent.view.height === this.view.component.height;
5151
if (hasSameSize) {
52+
const scroll = new Vector(window.scrollX, window.scrollY);
5253
// Mouse cursor will be positioned on the same place as the source component.
53-
const clientPosition = this.draggedStepComponent.view.getClientPosition();
54-
offset = position.subtract(clientPosition);
54+
const pagePosition = this.draggedStepComponent.view.getClientPosition().add(scroll);
55+
offset = position.subtract(pagePosition);
5556
}
5657
}
5758
if (!offset) {

‎designer/src/behaviors/placeholder-finder.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,14 @@ export class PlaceholderFinder {
2222

2323
public find(vLt: Vector, vWidth: number, vHeight: number): Placeholder | undefined {
2424
if (!this.cache) {
25+
const scroll = new Vector(window.scrollX, window.scrollY);
26+
2527
this.cache = this.placeholders.map(placeholder => {
26-
const rect = placeholder.getRect();
28+
const rect = placeholder.getClientRect();
2729
return {
2830
placeholder,
29-
lt: new Vector(rect.x, rect.y),
30-
br: new Vector(rect.x + rect.width, rect.y + rect.height)
31+
lt: new Vector(rect.x, rect.y).add(scroll),
32+
br: new Vector(rect.x + rect.width, rect.y + rect.height).add(scroll)
3133
};
3234
});
3335
this.cache.sort((a, b) => a.lt.y - b.lt.y);

0 commit comments

Comments
 (0)