Skip to content

Commit 56c53d8

Browse files
b4rtazb4rtaz
authored
0.24.5. (#166)
1 parent 4864d91 commit 56c53d8

26 files changed

+120
-117
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# 0.24.5
2+
3+
Fixed another bug with event handling when the designer is placed in a shadow DOM.
4+
15
# 0.24.4
26

37
Fixed event handling when the designer is placed in a shadow DOM.

‎README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,10 @@ Add the below code to your head section in HTML document.
103103
```html
104104
<head>
105105
...
106-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.4/css/designer.css" rel="stylesheet">
107-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.4/css/designer-light.css" rel="stylesheet">
108-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.4/css/designer-dark.css" rel="stylesheet">
109-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.4/dist/index.umd.js"></script>
106+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.5/css/designer.css" rel="stylesheet">
107+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.5/css/designer-light.css" rel="stylesheet">
108+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.5/css/designer-dark.css" rel="stylesheet">
109+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.5/dist/index.umd.js"></script>
110110
```
111111

112112
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.24.4",
4+
"version": "0.24.5",
55
"author": {
66
"name": "NoCode JS",
77
"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
1515
"peerDependencies": {
1616
"@angular/common": "12 - 18",
1717
"@angular/core": "12 - 18",
18-
"sequential-workflow-designer": "^0.24.4"
18+
"sequential-workflow-designer": "^0.24.5"
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
@@ -26,8 +26,8 @@
2626
"@angular/platform-browser-dynamic": "^17.3.9",
2727
"@angular/router": "^17.3.9",
2828
"rxjs": "~7.8.0",
29-
"sequential-workflow-designer": "^0.24.4",
30-
"sequential-workflow-designer-angular": "^0.24.4",
29+
"sequential-workflow-designer": "^0.24.5",
30+
"sequential-workflow-designer-angular": "^0.24.5",
3131
"tslib": "^2.3.0",
3232
"zone.js": "~0.14.6"
3333
},

‎demos/react-app/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
"dependencies": {
77
"react": "^18.2.0",
88
"react-dom": "^18.2.0",
9-
"sequential-workflow-designer": "^0.24.4",
10-
"sequential-workflow-designer-react": "^0.24.4"
9+
"sequential-workflow-designer": "^0.24.5",
10+
"sequential-workflow-designer-react": "^0.24.5"
1111
},
1212
"devDependencies": {
1313
"@types/jest": "^29.2.5",

‎demos/svelte-app/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
"eslint": "eslint ./src --ext .ts"
1717
},
1818
"dependencies": {
19-
"sequential-workflow-designer": "^0.24.4",
20-
"sequential-workflow-designer-svelte": "^0.24.4"
19+
"sequential-workflow-designer": "^0.24.5",
20+
"sequential-workflow-designer-svelte": "^0.24.5"
2121
},
2222
"devDependencies": {
2323
"@sveltejs/adapter-static": "^2.0.3",

‎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.24.4",
4+
"version": "0.24.5",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",

‎designer/src/api/designer-api.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,7 @@ export class DesignerApi {
2121
);
2222

2323
return new DesignerApi(
24-
context.documentOrShadowRoot,
25-
context.documentBody,
24+
context.configuration.shadowRoot,
2625
ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport),
2726
new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator),
2827
new EditorApi(context.state, context.definitionWalker, context.stateModifier),
@@ -35,8 +34,7 @@ export class DesignerApi {
3534
}
3635

3736
private constructor(
38-
public readonly documentOrShadowRoot: Document | ShadowRoot,
39-
public readonly documentBody: Node,
37+
public readonly shadowRoot: ShadowRoot | undefined,
4038
public readonly controlBar: ControlBarApi,
4139
public readonly toolbox: ToolboxApi,
4240
public readonly editor: EditorApi,

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

Lines changed: 46 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,14 @@ export class BehaviorController {
1515
lastPosition?: Vector;
1616
};
1717

18-
public constructor(private readonly documentOrShadowRoot: DocumentOrShadowRoot) {}
18+
public static create(shadowRoot: ShadowRoot | undefined) {
19+
return new BehaviorController(shadowRoot ?? document, shadowRoot);
20+
}
21+
22+
private constructor(
23+
private readonly dom: Document | ShadowRoot,
24+
private readonly shadowRoot: ShadowRoot | undefined
25+
) {}
1926

2027
public start(startPosition: Vector, behavior: Behavior) {
2128
if (this.state) {
@@ -29,42 +36,62 @@ export class BehaviorController {
2936
};
3037
behavior.onStart(this.state.startPosition);
3138

32-
window.addEventListener('mousemove', this.onMouseMove, false);
33-
window.addEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
34-
window.addEventListener('mouseup', this.onMouseUp, false);
35-
window.addEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
36-
window.addEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
39+
if (this.shadowRoot) {
40+
this.bind(this.shadowRoot);
41+
}
42+
this.bind(window);
43+
}
44+
45+
private bind(target: EventTarget) {
46+
target.addEventListener('mousemove', this.onMouseMove, false);
47+
target.addEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
48+
target.addEventListener('mouseup', this.onMouseUp, false);
49+
target.addEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
50+
target.addEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
51+
}
52+
53+
private unbind(target: EventTarget) {
54+
target.removeEventListener('mousemove', this.onMouseMove, false);
55+
target.removeEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
56+
target.removeEventListener('mouseup', this.onMouseUp, false);
57+
target.removeEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
58+
target.removeEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
3759
}
3860

39-
private readonly onMouseMove = (e: MouseEvent) => {
61+
private readonly onMouseMove = (e: Event) => {
4062
e.preventDefault();
41-
this.move(readMousePosition(e));
63+
e.stopPropagation();
64+
this.move(readMousePosition(e as MouseEvent));
4265
};
4366

44-
private readonly onTouchMove = (e: TouchEvent) => {
67+
private readonly onTouchMove = (e: Event) => {
4568
e.preventDefault();
46-
this.move(readTouchPosition(e));
69+
e.stopPropagation();
70+
this.move(readTouchPosition(e as TouchEvent));
4771
};
4872

49-
private readonly onMouseUp = (e: MouseEvent) => {
73+
private readonly onMouseUp = (e: Event) => {
5074
e.preventDefault();
75+
e.stopPropagation();
5176
this.stop(false, e.target as Element | null);
5277
};
5378

54-
private readonly onTouchEnd = (e: TouchEvent) => {
79+
private readonly onTouchEnd = (e: Event) => {
5580
e.preventDefault();
81+
e.stopPropagation();
5682
if (!this.state) {
5783
throw new Error(notInitializedError);
5884
}
5985

6086
const position = this.state.lastPosition ?? this.state.startPosition;
61-
const element = this.documentOrShadowRoot.elementFromPoint(position.x, position.y);
87+
const element = this.dom.elementFromPoint(position.x, position.y);
6288
this.stop(false, element);
6389
};
6490

65-
private readonly onTouchStart = (e: TouchEvent) => {
91+
private readonly onTouchStart = (e: Event) => {
6692
e.preventDefault();
67-
if (e.touches.length !== 1) {
93+
e.stopPropagation();
94+
if ((e as TouchEvent).touches.length !== 1) {
6895
this.stop(true, null);
6996
}
7097
};
@@ -92,11 +119,10 @@ export class BehaviorController {
92119
throw new Error(notInitializedError);
93120
}
94121

95-
window.removeEventListener('mousemove', this.onMouseMove, false);
96-
window.removeEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
97-
window.removeEventListener('mouseup', this.onMouseUp, false);
98-
window.removeEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
99-
window.removeEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
122+
if (this.shadowRoot) {
123+
this.unbind(this.shadowRoot);
124+
}
125+
this.unbind(window);
100126

101127
this.state.behavior.onEnd(interrupt, element);
102128
this.state = undefined;

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,21 @@ import { DraggedComponent } from '../designer-extension';
66

77
export class DragStepView {
88
public static create(step: Step, theme: string, componentContext: ComponentContext): DragStepView {
9+
const body = componentContext.shadowRoot ?? document.body;
910
const layer = Dom.element('div', {
1011
class: `sqd-drag sqd-theme-${theme}`
1112
});
12-
componentContext.documentBody.appendChild(layer);
13+
body.appendChild(layer);
1314

1415
const component = componentContext.services.draggedComponent.create(layer, step, componentContext);
1516

16-
return new DragStepView(component, layer, componentContext.documentBody);
17+
return new DragStepView(component, layer, body);
1718
}
1819

1920
private constructor(
2021
public readonly component: DraggedComponent,
2122
private readonly layer: HTMLElement,
22-
private readonly documentBody: Node
23+
private readonly body: Node
2324
) {}
2425

2526
public setPosition(position: Vector) {
@@ -29,6 +30,6 @@ export class DragStepView {
2930

3031
public remove() {
3132
this.component.destroy();
32-
this.documentBody.removeChild(this.layer);
33+
this.body.removeChild(this.layer);
3334
}
3435
}

0 commit comments

Comments
 (0)