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/sequential-workflow-designer@0.10.0/css/designer.css" rel="stylesheet">
91-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.10.0/css/designer-light.css" rel="stylesheet">
92-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.10.0/css/designer-dark.css" rel="stylesheet">
93-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.10.0/dist/index.umd.js"></script>
91+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.10.1/css/designer.css" rel="stylesheet">
92+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.10.1/css/designer-light.css" rel="stylesheet">
93+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.10.1/css/designer-dark.css" rel="stylesheet">
94+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.10.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 @@ send@0.18.0:
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);

‎designer/src/core/event-readers.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
11
import { Vector } from './vector';
22

33
export function readMousePosition(e: MouseEvent): Vector {
4-
return new Vector(e.clientX, e.clientY);
4+
return new Vector(e.pageX, e.pageY);
55
}
66

7-
export function readTouchPosition(e: TouchEvent): Vector {
7+
export function readTouchClientPosition(e: TouchEvent): Vector {
88
if (e.touches.length > 0) {
99
const touch = e.touches[0];
1010
return new Vector(touch.clientX, touch.clientY);
1111
}
1212
throw new Error('Unknown touch position');
1313
}
14+
15+
export function readTouchPosition(e: TouchEvent): Vector {
16+
if (e.touches.length > 0) {
17+
const touch = e.touches[0];
18+
return new Vector(touch.pageX, touch.pageY);
19+
}
20+
throw new Error('Unknown touch position');
21+
}

‎designer/src/smart-editor/smart-editor.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import { EditorsConfiguration } from '../designer-configuration';
77
export class SmartEditor implements UiComponent {
88
public static create(parent: HTMLElement, api: DesignerApi, configuration: EditorsConfiguration): SmartEditor {
99
const view = SmartEditorView.create(parent, api, configuration);
10-
view.setIsCollapsed(api.editor.isVisibleAtStart());
1110

1211
const editor = new SmartEditor(view, api.workspace);
1312
view.bindToggleIsCollapsedClick(() => editor.toggleIsCollapsedClick());
1413

14+
editor.setIsCollapsed(api.editor.isVisibleAtStart());
1515
return editor;
1616
}
1717

‎designer/src/toolbox/scrollbox-view.ts

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ import { Dom } from '../core/dom';
22
import { readMousePosition, readTouchPosition } from '../core/event-readers';
33
import { Vector } from '../core/vector';
44

5+
const listenerOptions: AddEventListenerOptions & EventListenerOptions = {
6+
passive: false
7+
};
8+
59
export class ScrollBoxView {
610
public static create(parent: HTMLElement, viewport: HTMLElement): ScrollBoxView {
711
const root = Dom.element('div', {
@@ -10,19 +14,13 @@ export class ScrollBoxView {
1014
parent.appendChild(root);
1115

1216
const view = new ScrollBoxView(root, viewport);
13-
window.addEventListener('resize', view.onResizeHandler, false);
17+
window.addEventListener('resize', view.onResize, false);
1418
root.addEventListener('wheel', e => view.onWheel(e), false);
15-
root.addEventListener('touchstart', e => view.onTouchStart(e), false);
19+
root.addEventListener('touchstart', e => view.onTouchStart(e), listenerOptions);
1620
root.addEventListener('mousedown', e => view.onMouseDown(e), false);
1721
return view;
1822
}
1923

20-
private readonly onResizeHandler = () => this.onResize();
21-
private readonly onTouchMoveHandler = (e: TouchEvent) => this.onTouchMove(e);
22-
private readonly onMouseMoveHandler = (e: MouseEvent) => this.onMouseMove(e);
23-
private readonly onTouchEndHandler = (e: TouchEvent) => this.onTouchEnd(e);
24-
private readonly onMouseUpHandler = (e: MouseEvent) => this.onMouseUp(e);
25-
2624
private content?: {
2725
element: HTMLElement;
2826
height: number;
@@ -50,7 +48,7 @@ export class ScrollBoxView {
5048
}
5149

5250
public destroy() {
53-
window.removeEventListener('resize', this.onResizeHandler, false);
51+
window.removeEventListener('resize', this.onResize, false);
5452
}
5553

5654
private reload(element: HTMLElement) {
@@ -69,9 +67,9 @@ export class ScrollBoxView {
6967
};
7068
}
7169

72-
private onResize() {
70+
private readonly onResize = () => {
7371
this.refresh();
74-
}
72+
};
7573

7674
private onWheel(e: WheelEvent) {
7775
e.stopPropagation();
@@ -83,41 +81,41 @@ export class ScrollBoxView {
8381
}
8482
}
8583

86-
private onTouchStart(e: TouchEvent) {
84+
private readonly onTouchStart = (e: TouchEvent) => {
8785
e.preventDefault();
8886
this.startScroll(readTouchPosition(e));
89-
}
87+
};
9088

91-
private onMouseDown(e: MouseEvent) {
89+
private readonly onMouseDown = (e: MouseEvent) => {
9290
this.startScroll(readMousePosition(e));
93-
}
91+
};
9492

95-
private onTouchMove(e: TouchEvent) {
93+
private readonly onTouchMove = (e: TouchEvent) => {
9694
e.preventDefault();
9795
this.moveScroll(readTouchPosition(e));
98-
}
96+
};
9997

100-
private onMouseMove(e: MouseEvent) {
98+
private readonly onMouseMove = (e: MouseEvent) => {
10199
e.preventDefault();
102100
this.moveScroll(readMousePosition(e));
103-
}
101+
};
104102

105-
private onTouchEnd(e: TouchEvent) {
103+
private readonly onTouchEnd = (e: TouchEvent) => {
106104
e.preventDefault();
107105
this.stopScroll();
108-
}
106+
};
109107

110-
private onMouseUp(e: MouseEvent) {
108+
private readonly onMouseUp = (e: MouseEvent) => {
111109
e.preventDefault();
112110
this.stopScroll();
113-
}
111+
};
114112

115113
private startScroll(startPosition: Vector) {
116114
if (!this.scroll) {
117-
window.addEventListener('touchmove', this.onTouchMoveHandler, false);
118-
window.addEventListener('mousemove', this.onMouseMoveHandler, false);
119-
window.addEventListener('touchend', this.onTouchEndHandler, false);
120-
window.addEventListener('mouseup', this.onMouseUpHandler, false);
115+
window.addEventListener('touchmove', this.onTouchMove, listenerOptions);
116+
window.addEventListener('mousemove', this.onMouseMove, false);
117+
window.addEventListener('touchend', this.onTouchEnd, listenerOptions);
118+
window.addEventListener('mouseup', this.onMouseUp, false);
121119
}
122120

123121
this.scroll = {
@@ -135,10 +133,10 @@ export class ScrollBoxView {
135133

136134
private stopScroll() {
137135
if (this.scroll) {
138-
window.removeEventListener('touchmove', this.onTouchMoveHandler, false);
139-
window.removeEventListener('mousemove', this.onMouseMoveHandler, false);
140-
window.removeEventListener('touchend', this.onTouchEndHandler, false);
141-
window.removeEventListener('mouseup', this.onMouseUpHandler, false);
136+
window.removeEventListener('touchmove', this.onTouchMove, listenerOptions);
137+
window.removeEventListener('mousemove', this.onMouseMove, false);
138+
window.removeEventListener('touchend', this.onTouchEnd, listenerOptions);
139+
window.removeEventListener('mouseup', this.onMouseUp, false);
142140
this.scroll = undefined;
143141
}
144142
}

0 commit comments

Comments
 (0)