Skip to content

Commit 4864d91

Browse files
b4rtazb4rtaz
authored
0.24.4. (#165)
1 parent ad3b4b0 commit 4864d91

21 files changed

+92
-59
lines changed

‎CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# 0.24.4
2+
3+
Fixed event handling when the designer is placed in a shadow DOM.
4+
15
# 0.24.3
26

37
Fixed the placement of the context menu in the `documentBody` element if specified in the configuration.

‎README.md

+4-4
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.3/css/designer.css" rel="stylesheet">
107-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.3/css/designer-light.css" rel="stylesheet">
108-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.3/css/designer-dark.css" rel="stylesheet">
109-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.3/dist/index.umd.js"></script>
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>
110110
```
111111

112112
Call the designer by:

‎angular/designer/package.json

+2-2
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.3",
4+
"version": "0.24.4",
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.3"
18+
"sequential-workflow-designer": "^0.24.4"
1919
},
2020
"dependencies": {
2121
"tslib": "^2.3.0"

‎demos/angular-app/package.json

+2-2
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.3",
30-
"sequential-workflow-designer-angular": "^0.24.3",
29+
"sequential-workflow-designer": "^0.24.4",
30+
"sequential-workflow-designer-angular": "^0.24.4",
3131
"tslib": "^2.3.0",
3232
"zone.js": "~0.14.6"
3333
},

‎demos/angular-app/yarn.lock

+8-8
Original file line numberDiff line numberDiff line change
@@ -6744,17 +6744,17 @@ send@0.18.0:
67446744
range-parser "~1.2.1"
67456745
statuses "2.0.1"
67466746

6747-
sequential-workflow-designer-angular@^0.24.3:
6748-
version "0.24.3"
6749-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.24.3.tgz#9f130a321189a95a6ae735793bb906bce958d7fb"
6750-
integrity sha512-YRfm+cSrWAqHKvNRvuVOJxRtcmEKyX9alUGn+e6q8mW9czVKVZ5t+1jMZFPmkIYrUa/XwbzrR3zXgDXNO5l2oQ==
6747+
sequential-workflow-designer-angular@^0.24.4:
6748+
version "0.24.4"
6749+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.24.4.tgz#50842a31c9ac5c6d45733ba5ffd0704dda4cfe9a"
6750+
integrity sha512-kiIhcoOzpaRNGK4ii1rotZHu49/zosdTodD71mQRXIqDNbpqVHMS4CktWwEWdQ13LIsSQxEbfMnpZJJ5+eIW3w==
67516751
dependencies:
67526752
tslib "^2.3.0"
67536753

6754-
sequential-workflow-designer@^0.24.3:
6755-
version "0.24.3"
6756-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.24.3.tgz#0e72b89003eb69f3172396ac29a729924e5ffbae"
6757-
integrity sha512-Y11VuUpa+Uo9tNFWoBdKg9w53Q0UhWfKeFCrHfuWrEDogCcY5hp52SiRsdCBW8qOHEBIG58KvMwfr9vxBtmjJQ==
6754+
sequential-workflow-designer@^0.24.4:
6755+
version "0.24.4"
6756+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.24.4.tgz#68db6ec198ec7941a5e87994156f15ec91e83cc5"
6757+
integrity sha512-fIdZDT6nozMAuIXvJ6uOVVy4h9XA+DMTfIO63bM6+vi/5BmQlxyUJ+4uVFKOiHJ7Tx5MQI8eBchcWDtknBA8nQ==
67586758
dependencies:
67596759
sequential-workflow-model "^0.2.0"
67606760

‎demos/react-app/package.json

+2-2
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.3",
10-
"sequential-workflow-designer-react": "^0.24.3"
9+
"sequential-workflow-designer": "^0.24.4",
10+
"sequential-workflow-designer-react": "^0.24.4"
1111
},
1212
"devDependencies": {
1313
"@types/jest": "^29.2.5",

‎demos/svelte-app/package.json

+2-2
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.3",
20-
"sequential-workflow-designer-svelte": "^0.24.3"
19+
"sequential-workflow-designer": "^0.24.4",
20+
"sequential-workflow-designer-svelte": "^0.24.4"
2121
},
2222
"devDependencies": {
2323
"@sveltejs/adapter-static": "^2.0.3",

‎designer/package.json

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

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

+4
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ export class DesignerApi {
2121
);
2222

2323
return new DesignerApi(
24+
context.documentOrShadowRoot,
25+
context.documentBody,
2426
ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport),
2527
new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator),
2628
new EditorApi(context.state, context.definitionWalker, context.stateModifier),
@@ -33,6 +35,8 @@ export class DesignerApi {
3335
}
3436

3537
private constructor(
38+
public readonly documentOrShadowRoot: Document | ShadowRoot,
39+
public readonly documentBody: Node,
3640
public readonly controlBar: ControlBarApi,
3741
public readonly toolbox: ToolboxApi,
3842
public readonly editor: EditorApi,

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ export class BehaviorController {
1515
lastPosition?: Vector;
1616
};
1717

18+
public constructor(private readonly documentOrShadowRoot: DocumentOrShadowRoot) {}
19+
1820
public start(startPosition: Vector, behavior: Behavior) {
1921
if (this.state) {
2022
this.stop(true, null);
@@ -56,7 +58,7 @@ export class BehaviorController {
5658
}
5759

5860
const position = this.state.lastPosition ?? this.state.startPosition;
59-
const element = document.elementFromPoint(position.x, position.y);
61+
const element = this.documentOrShadowRoot.elementFromPoint(position.x, position.y);
6062
this.stop(false, element);
6163
};
6264

‎designer/src/component-context.ts

+9-6
Original file line numberDiff line numberDiff line change
@@ -10,41 +10,44 @@ import { StepExtensionResolver } from './workspace/step-extension-resolver';
1010

1111
export class ComponentContext {
1212
public static create(
13+
documentOrShadowRoot: Document | ShadowRoot,
14+
documentBody: Node,
1315
configuration: DesignerConfiguration,
1416
state: DesignerState,
1517
stepExtensionResolver: StepExtensionResolver,
1618
definitionWalker: DefinitionWalker,
1719
preferenceStorage: PreferenceStorage,
1820
placeholderController: PlaceholderController,
1921
i18n: I18n,
20-
services: Services,
21-
documentBody: Node
22+
services: Services
2223
): ComponentContext {
2324
const validator = new DefinitionValidator(configuration.validator, state);
2425
const iconProvider = new IconProvider(configuration.steps);
2526
const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
2627
return new ComponentContext(
28+
documentOrShadowRoot,
29+
documentBody,
2730
validator,
2831
iconProvider,
2932
placeholderController,
3033
stepComponentFactory,
3134
definitionWalker,
3235
services,
3336
preferenceStorage,
34-
i18n,
35-
documentBody
37+
i18n
3638
);
3739
}
3840

3941
private constructor(
42+
public readonly documentOrShadowRoot: Document | ShadowRoot,
43+
public readonly documentBody: Node,
4044
public readonly validator: DefinitionValidator,
4145
public readonly iconProvider: IconProvider,
4246
public readonly placeholderController: PlaceholderController,
4347
public readonly stepComponentFactory: StepComponentFactory,
4448
public readonly definitionWalker: DefinitionWalker,
4549
public readonly services: Services,
4650
public readonly preferenceStorage: PreferenceStorage,
47-
public readonly i18n: I18n,
48-
public readonly documentBody: Node
51+
public readonly i18n: I18n
4952
) {}
5053
}

‎designer/src/designer-configuration.ts

+5
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,11 @@ export interface DesignerConfiguration<TDefinition extends Definition = Definiti
8888
*/
8989
i18n?: I18n;
9090

91+
/**
92+
* @description The document or shadow root where the designer is rendered. By default, the designer will use the `document`.
93+
*/
94+
documentOrShadowRoot?: Document | ShadowRoot;
95+
9196
/**
9297
* @description The body of the document. By default, the designer will use the `document.body`.
9398
*/

‎designer/src/designer-context.ts

+7-3
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { PlaceholderController } from './designer-extension';
1616

1717
export class DesignerContext {
1818
public static create(
19+
documentOrShadowRoot: Document | ShadowRoot,
1920
documentBody: Node,
2021
parent: HTMLElement,
2122
startDefinition: Definition,
@@ -34,7 +35,7 @@ export class DesignerContext {
3435
const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
3536
const workspaceController = new WorkspaceControllerWrapper();
3637
const placeholderController = services.placeholderController.create();
37-
const behaviorController = new BehaviorController();
38+
const behaviorController = new BehaviorController(documentOrShadowRoot);
3839
const stepExtensionResolver = StepExtensionResolver.create(services);
3940
const definitionWalker = configuration.definitionWalker ?? new DefinitionWalker();
4041
const i18n: I18n = configuration.i18n ?? ((_, defaultValue) => defaultValue);
@@ -48,18 +49,20 @@ export class DesignerContext {
4849

4950
const preferenceStorage = configuration.preferenceStorage ?? new MemoryPreferenceStorage();
5051
const componentContext = ComponentContext.create(
52+
documentOrShadowRoot,
53+
documentBody,
5154
configuration,
5255
state,
5356
stepExtensionResolver,
5457
definitionWalker,
5558
preferenceStorage,
5659
placeholderController,
5760
i18n,
58-
services,
59-
documentBody
61+
services
6062
);
6163

6264
return new DesignerContext(
65+
documentOrShadowRoot,
6366
documentBody,
6467
theme,
6568
state,
@@ -79,6 +82,7 @@ export class DesignerContext {
7982
}
8083

8184
public constructor(
85+
public readonly documentOrShadowRoot: Document | ShadowRoot,
8286
public readonly documentBody: Node,
8387
public readonly theme: string,
8488
public readonly state: DesignerState,

‎designer/src/designer.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,14 @@ export class Designer<TDefinition extends Definition = Definition> {
3636
const config = configuration as DesignerConfiguration;
3737
validateConfiguration(config);
3838

39+
const documentOrShadowRoot = configuration.documentOrShadowRoot ?? document;
3940
const documentBody = configuration.documentBody ?? document.body;
4041
if (!isElementAttached(placeholder, documentBody)) {
4142
throw new Error('Placeholder is not attached to the DOM');
4243
}
4344

4445
const services = ServicesResolver.resolve(configuration.extensions, config);
45-
const designerContext = DesignerContext.create(documentBody, placeholder, startDefinition, config, services);
46+
const designerContext = DesignerContext.create(documentOrShadowRoot, documentBody, placeholder, startDefinition, config, services);
4647
const designerApi = DesignerApi.create(designerContext);
4748

4849
const view = DesignerView.create(placeholder, designerContext, designerApi);

‎designer/src/keyboard/keyboard-daemon.ts

+8-6
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,27 @@ const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
77

88
export class KeyboardDaemon implements Daemon {
99
public static create(api: DesignerApi, configuration: KeyboardConfiguration): KeyboardDaemon {
10-
const controller = new KeyboardDaemon(api.controlBar, configuration);
11-
document.addEventListener('keyup', controller.onKeyUp, false);
10+
const controller = new KeyboardDaemon(api.documentOrShadowRoot, api.controlBar, configuration);
11+
api.documentOrShadowRoot.addEventListener('keyup', controller.onKeyUp, false);
1212
return controller;
1313
}
1414

1515
private constructor(
16+
private readonly documentOrShadowRoot: Document | ShadowRoot,
1617
private readonly controlBarApi: ControlBarApi,
1718
private readonly configuration: KeyboardConfiguration
1819
) {}
1920

20-
private readonly onKeyUp = (e: KeyboardEvent) => {
21-
const action = detectAction(e);
21+
private readonly onKeyUp = (e: Event) => {
22+
const ke = e as KeyboardEvent;
23+
const action = detectAction(ke);
2224
if (!action) {
2325
return;
2426
}
2527
if (document.activeElement && ignoreTagNames.includes(document.activeElement.tagName)) {
2628
return;
2729
}
28-
if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action, e)) {
30+
if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action, ke)) {
2931
return;
3032
}
3133

@@ -39,7 +41,7 @@ export class KeyboardDaemon implements Daemon {
3941
};
4042

4143
public destroy() {
42-
document.removeEventListener('keyup', this.onKeyUp, false);
44+
this.documentOrShadowRoot.removeEventListener('keyup', this.onKeyUp, false);
4345
}
4446
}
4547

‎designer/src/test-tools/stubs.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,7 @@ export function createDesignerContextStub(): DesignerContext {
4848
const parent = document.createElement('div');
4949
const configuration = createDesignerConfigurationStub();
5050
const services = ServicesResolver.resolve([], configuration);
51-
const documentBody = document.body;
52-
return DesignerContext.create(documentBody, parent, createDefinitionStub(), createDesignerConfigurationStub(), services);
51+
return DesignerContext.create(document, document.body, parent, createDefinitionStub(), createDesignerConfigurationStub(), services);
5352
}
5453

5554
export function createComponentContextStub(): ComponentContext {

‎designer/src/workspace/context-menu/context-menu.ts

+10-10
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@ export class ContextMenu {
2626
}
2727

2828
const instance = new ContextMenu(documentBody, menu, elements, items, Date.now());
29-
document.addEventListener('mousedown', instance.mouseDown, false);
30-
document.addEventListener('mouseup', instance.mouseUp, false);
31-
document.addEventListener('touchstart', instance.mouseDown, false);
32-
document.addEventListener('touchend', instance.mouseUp, false);
29+
documentBody.addEventListener('mousedown', instance.mouseDown, false);
30+
documentBody.addEventListener('mouseup', instance.mouseUp, false);
31+
documentBody.addEventListener('touchstart', instance.mouseDown, false);
32+
documentBody.addEventListener('touchend', instance.mouseUp, false);
3333
documentBody.appendChild(menu);
3434
return instance;
3535
}
@@ -44,7 +44,7 @@ export class ContextMenu {
4444
private readonly startTime: number
4545
) {}
4646

47-
private readonly mouseDown = (e: MouseEvent | TouchEvent) => {
47+
private readonly mouseDown = (e: Event) => {
4848
const index = this.findIndex(e.target as HTMLElement);
4949
if (index === null) {
5050
this.tryDestroy();
@@ -54,7 +54,7 @@ export class ContextMenu {
5454
}
5555
};
5656

57-
private readonly mouseUp = (e: MouseEvent | TouchEvent) => {
57+
private readonly mouseUp = (e: Event) => {
5858
const dt = Date.now() - this.startTime;
5959
if (dt < 300) {
6060
e.preventDefault();
@@ -87,10 +87,10 @@ export class ContextMenu {
8787
public tryDestroy() {
8888
if (this.isAttached) {
8989
this.documentBody.removeChild(this.menu);
90-
document.removeEventListener('mousedown', this.mouseDown, false);
91-
document.removeEventListener('mouseup', this.mouseUp, false);
92-
document.removeEventListener('touchstart', this.mouseDown, false);
93-
document.removeEventListener('touchend', this.mouseUp, false);
90+
this.documentBody.removeEventListener('mousedown', this.mouseDown, false);
91+
this.documentBody.removeEventListener('mouseup', this.mouseUp, false);
92+
this.documentBody.removeEventListener('touchstart', this.mouseDown, false);
93+
this.documentBody.removeEventListener('touchend', this.mouseUp, false);
9494
this.isAttached = false;
9595
}
9696
}

0 commit comments

Comments
 (0)