nocode-js · b4rtaz · Sep 15, 2024 · Sep 15, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 0.24.4
+
+Fixed event handling when the designer is placed in a shadow DOM.
+
 # 0.24.3
 
 Fixed the placement of the context menu in the `documentBody` element if specified in the configuration.

diff --git a/README.md b/README.md
@@ -103,10 +103,10 @@ Add the below code to your head section in HTML document.
 ```html
 <head>
 ...
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.3/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.3/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.3/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.3/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.4/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.4/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.4/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.4/dist/index.umd.js"></script>
 ```
 
 Call the designer by:

diff --git a/angular/designer/package.json b/angular/designer/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-angular",
 	"description": "Angular wrapper for Sequential Workflow Designer component.",
-	"version": "0.24.3",
+	"version": "0.24.4",
 	"author": {
 		"name": "NoCode JS",
 		"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
 	"peerDependencies": {
 		"@angular/common": "12 - 18",
 		"@angular/core": "12 - 18",
-		"sequential-workflow-designer": "^0.24.3"
+		"sequential-workflow-designer": "^0.24.4"
 	},
 	"dependencies": {
 		"tslib": "^2.3.0"

diff --git a/demos/angular-app/package.json b/demos/angular-app/package.json
@@ -26,8 +26,8 @@
 		"@angular/platform-browser-dynamic": "^17.3.9",
 		"@angular/router": "^17.3.9",
 		"rxjs": "~7.8.0",
-		"sequential-workflow-designer": "^0.24.3",
-		"sequential-workflow-designer-angular": "^0.24.3",
+		"sequential-workflow-designer": "^0.24.4",
+		"sequential-workflow-designer-angular": "^0.24.4",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.14.6"
 	},

diff --git a/demos/angular-app/yarn.lock b/demos/angular-app/yarn.lock
@@ -6744,17 +6744,17 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-sequential-workflow-designer-angular@^0.24.3:
-  version "0.24.3"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.24.3.tgz#9f130a321189a95a6ae735793bb906bce958d7fb"
-  integrity sha512-YRfm+cSrWAqHKvNRvuVOJxRtcmEKyX9alUGn+e6q8mW9czVKVZ5t+1jMZFPmkIYrUa/XwbzrR3zXgDXNO5l2oQ==
+sequential-workflow-designer-angular@^0.24.4:
+  version "0.24.4"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.24.4.tgz#50842a31c9ac5c6d45733ba5ffd0704dda4cfe9a"
+  integrity sha512-kiIhcoOzpaRNGK4ii1rotZHu49/zosdTodD71mQRXIqDNbpqVHMS4CktWwEWdQ13LIsSQxEbfMnpZJJ5+eIW3w==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.24.3:
-  version "0.24.3"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.24.3.tgz#0e72b89003eb69f3172396ac29a729924e5ffbae"
-  integrity sha512-Y11VuUpa+Uo9tNFWoBdKg9w53Q0UhWfKeFCrHfuWrEDogCcY5hp52SiRsdCBW8qOHEBIG58KvMwfr9vxBtmjJQ==
+sequential-workflow-designer@^0.24.4:
+  version "0.24.4"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.24.4.tgz#68db6ec198ec7941a5e87994156f15ec91e83cc5"
+  integrity sha512-fIdZDT6nozMAuIXvJ6uOVVy4h9XA+DMTfIO63bM6+vi/5BmQlxyUJ+4uVFKOiHJ7Tx5MQI8eBchcWDtknBA8nQ==
   dependencies:
     sequential-workflow-model "^0.2.0"
 

diff --git a/demos/react-app/package.json b/demos/react-app/package.json
@@ -6,8 +6,8 @@
 	"dependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.24.3",
-		"sequential-workflow-designer-react": "^0.24.3"
+		"sequential-workflow-designer": "^0.24.4",
+		"sequential-workflow-designer-react": "^0.24.4"
 	},
 	"devDependencies": {
 		"@types/jest": "^29.2.5",

diff --git a/demos/svelte-app/package.json b/demos/svelte-app/package.json
@@ -16,8 +16,8 @@
 		"eslint": "eslint ./src --ext .ts"
 	},
 	"dependencies": {
-		"sequential-workflow-designer": "^0.24.3",
-		"sequential-workflow-designer-svelte": "^0.24.3"
+		"sequential-workflow-designer": "^0.24.4",
+		"sequential-workflow-designer-svelte": "^0.24.4"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^2.0.3",

diff --git a/designer/package.json b/designer/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer",
 	"description": "Customizable no-code component for building flow-based programming applications.",
-	"version": "0.24.3",
+	"version": "0.24.4",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

diff --git a/designer/src/api/designer-api.ts b/designer/src/api/designer-api.ts
@@ -21,6 +21,8 @@ export class DesignerApi {
 		);
 
 		return new DesignerApi(
+			context.documentOrShadowRoot,
+			context.documentBody,
 			ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport),
 			new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator),
 			new EditorApi(context.state, context.definitionWalker, context.stateModifier),
@@ -33,6 +35,8 @@ export class DesignerApi {
 	}
 
 	private constructor(
+		public readonly documentOrShadowRoot: Document | ShadowRoot,
+		public readonly documentBody: Node,
 		public readonly controlBar: ControlBarApi,
 		public readonly toolbox: ToolboxApi,
 		public readonly editor: EditorApi,

diff --git a/designer/src/behaviors/behavior-controller.ts b/designer/src/behaviors/behavior-controller.ts
@@ -15,6 +15,8 @@ export class BehaviorController {
 		lastPosition?: Vector;
 	};
 
+	public constructor(private readonly documentOrShadowRoot: DocumentOrShadowRoot) {}
+
 	public start(startPosition: Vector, behavior: Behavior) {
 		if (this.state) {
 			this.stop(true, null);
@@ -56,7 +58,7 @@ export class BehaviorController {
 		}
 
 		const position = this.state.lastPosition ?? this.state.startPosition;
-		const element = document.elementFromPoint(position.x, position.y);
+		const element = this.documentOrShadowRoot.elementFromPoint(position.x, position.y);
 		this.stop(false, element);
 	};
 

diff --git a/designer/src/component-context.ts b/designer/src/component-context.ts
@@ -10,41 +10,44 @@ import { StepExtensionResolver } from './workspace/step-extension-resolver';
 
 export class ComponentContext {
 	public static create(
+		documentOrShadowRoot: Document | ShadowRoot,
+		documentBody: Node,
 		configuration: DesignerConfiguration,
 		state: DesignerState,
 		stepExtensionResolver: StepExtensionResolver,
 		definitionWalker: DefinitionWalker,
 		preferenceStorage: PreferenceStorage,
 		placeholderController: PlaceholderController,
 		i18n: I18n,
-		services: Services,
-		documentBody: Node
+		services: Services
 	): ComponentContext {
 		const validator = new DefinitionValidator(configuration.validator, state);
 		const iconProvider = new IconProvider(configuration.steps);
 		const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
 		return new ComponentContext(
+			documentOrShadowRoot,
+			documentBody,
 			validator,
 			iconProvider,
 			placeholderController,
 			stepComponentFactory,
 			definitionWalker,
 			services,
 			preferenceStorage,
-			i18n,
-			documentBody
+			i18n
 		);
 	}
 
 	private constructor(
+		public readonly documentOrShadowRoot: Document | ShadowRoot,
+		public readonly documentBody: Node,
 		public readonly validator: DefinitionValidator,
 		public readonly iconProvider: IconProvider,
 		public readonly placeholderController: PlaceholderController,
 		public readonly stepComponentFactory: StepComponentFactory,
 		public readonly definitionWalker: DefinitionWalker,
 		public readonly services: Services,
 		public readonly preferenceStorage: PreferenceStorage,
-		public readonly i18n: I18n,
-		public readonly documentBody: Node
+		public readonly i18n: I18n
 	) {}
 }
diff --git a/designer/src/designer-configuration.ts b/designer/src/designer-configuration.ts
@@ -88,6 +88,11 @@ export interface DesignerConfiguration<TDefinition extends Definition = Definiti
 	 */
 	i18n?: I18n;
 
+	/**
+	 * @description The document or shadow root where the designer is rendered. By default, the designer will use the `document`.
+	 */
+	documentOrShadowRoot?: Document | ShadowRoot;
+
 	/**
 	 * @description The body of the document. By default, the designer will use the `document.body`.
 	 */

diff --git a/designer/src/designer-context.ts b/designer/src/designer-context.ts
@@ -16,6 +16,7 @@ import { PlaceholderController } from './designer-extension';
 
 export class DesignerContext {
 	public static create(
+		documentOrShadowRoot: Document | ShadowRoot,
 		documentBody: Node,
 		parent: HTMLElement,
 		startDefinition: Definition,
@@ -34,7 +35,7 @@ export class DesignerContext {
 		const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
 		const workspaceController = new WorkspaceControllerWrapper();
 		const placeholderController = services.placeholderController.create();
-		const behaviorController = new BehaviorController();
+		const behaviorController = new BehaviorController(documentOrShadowRoot);
 		const stepExtensionResolver = StepExtensionResolver.create(services);
 		const definitionWalker = configuration.definitionWalker ?? new DefinitionWalker();
 		const i18n: I18n = configuration.i18n ?? ((_, defaultValue) => defaultValue);
@@ -48,18 +49,20 @@ export class DesignerContext {
 
 		const preferenceStorage = configuration.preferenceStorage ?? new MemoryPreferenceStorage();
 		const componentContext = ComponentContext.create(
+			documentOrShadowRoot,
+			documentBody,
 			configuration,
 			state,
 			stepExtensionResolver,
 			definitionWalker,
 			preferenceStorage,
 			placeholderController,
 			i18n,
-			services,
-			documentBody
+			services
 		);
 
 		return new DesignerContext(
+			documentOrShadowRoot,
 			documentBody,
 			theme,
 			state,
@@ -79,6 +82,7 @@ export class DesignerContext {
 	}
 
 	public constructor(
+		public readonly documentOrShadowRoot: Document | ShadowRoot,
 		public readonly documentBody: Node,
 		public readonly theme: string,
 		public readonly state: DesignerState,

diff --git a/designer/src/designer.ts b/designer/src/designer.ts
@@ -36,13 +36,14 @@ export class Designer<TDefinition extends Definition = Definition> {
 		const config = configuration as DesignerConfiguration;
 		validateConfiguration(config);
 
+		const documentOrShadowRoot = configuration.documentOrShadowRoot ?? document;
 		const documentBody = configuration.documentBody ?? document.body;
 		if (!isElementAttached(placeholder, documentBody)) {
 			throw new Error('Placeholder is not attached to the DOM');
 		}
 
 		const services = ServicesResolver.resolve(configuration.extensions, config);
-		const designerContext = DesignerContext.create(documentBody, placeholder, startDefinition, config, services);
+		const designerContext = DesignerContext.create(documentOrShadowRoot, documentBody, placeholder, startDefinition, config, services);
 		const designerApi = DesignerApi.create(designerContext);
 
 		const view = DesignerView.create(placeholder, designerContext, designerApi);

diff --git a/designer/src/keyboard/keyboard-daemon.ts b/designer/src/keyboard/keyboard-daemon.ts
@@ -7,25 +7,27 @@ const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
 
 export class KeyboardDaemon implements Daemon {
 	public static create(api: DesignerApi, configuration: KeyboardConfiguration): KeyboardDaemon {
-		const controller = new KeyboardDaemon(api.controlBar, configuration);
-		document.addEventListener('keyup', controller.onKeyUp, false);
+		const controller = new KeyboardDaemon(api.documentOrShadowRoot, api.controlBar, configuration);
+		api.documentOrShadowRoot.addEventListener('keyup', controller.onKeyUp, false);
 		return controller;
 	}
 
 	private constructor(
+		private readonly documentOrShadowRoot: Document | ShadowRoot,
 		private readonly controlBarApi: ControlBarApi,
 		private readonly configuration: KeyboardConfiguration
 	) {}
 
-	private readonly onKeyUp = (e: KeyboardEvent) => {
-		const action = detectAction(e);
+	private readonly onKeyUp = (e: Event) => {
+		const ke = e as KeyboardEvent;
+		const action = detectAction(ke);
 		if (!action) {
 			return;
 		}
 		if (document.activeElement && ignoreTagNames.includes(document.activeElement.tagName)) {
 			return;
 		}
-		if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action, e)) {
+		if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action, ke)) {
 			return;
 		}
 
@@ -39,7 +41,7 @@ export class KeyboardDaemon implements Daemon {
 	};
 
 	public destroy() {
-		document.removeEventListener('keyup', this.onKeyUp, false);
+		this.documentOrShadowRoot.removeEventListener('keyup', this.onKeyUp, false);
 	}
 }
 

diff --git a/designer/src/test-tools/stubs.ts b/designer/src/test-tools/stubs.ts
@@ -48,8 +48,7 @@ export function createDesignerContextStub(): DesignerContext {
 	const parent = document.createElement('div');
 	const configuration = createDesignerConfigurationStub();
 	const services = ServicesResolver.resolve([], configuration);
-	const documentBody = document.body;
-	return DesignerContext.create(documentBody, parent, createDefinitionStub(), createDesignerConfigurationStub(), services);
+	return DesignerContext.create(document, document.body, parent, createDefinitionStub(), createDesignerConfigurationStub(), services);
 }
 
 export function createComponentContextStub(): ComponentContext {

diff --git a/designer/src/workspace/context-menu/context-menu.ts b/designer/src/workspace/context-menu/context-menu.ts
@@ -26,10 +26,10 @@ export class ContextMenu {
 		}
 
 		const instance = new ContextMenu(documentBody, menu, elements, items, Date.now());
-		document.addEventListener('mousedown', instance.mouseDown, false);
-		document.addEventListener('mouseup', instance.mouseUp, false);
-		document.addEventListener('touchstart', instance.mouseDown, false);
-		document.addEventListener('touchend', instance.mouseUp, false);
+		documentBody.addEventListener('mousedown', instance.mouseDown, false);
+		documentBody.addEventListener('mouseup', instance.mouseUp, false);
+		documentBody.addEventListener('touchstart', instance.mouseDown, false);
+		documentBody.addEventListener('touchend', instance.mouseUp, false);
 		documentBody.appendChild(menu);
 		return instance;
 	}
@@ -44,7 +44,7 @@ export class ContextMenu {
 		private readonly startTime: number
 	) {}
 
-	private readonly mouseDown = (e: MouseEvent | TouchEvent) => {
+	private readonly mouseDown = (e: Event) => {
 		const index = this.findIndex(e.target as HTMLElement);
 		if (index === null) {
 			this.tryDestroy();
@@ -54,7 +54,7 @@ export class ContextMenu {
 		}
 	};
 
-	private readonly mouseUp = (e: MouseEvent | TouchEvent) => {
+	private readonly mouseUp = (e: Event) => {
 		const dt = Date.now() - this.startTime;
 		if (dt < 300) {
 			e.preventDefault();
@@ -87,10 +87,10 @@ export class ContextMenu {
 	public tryDestroy() {
 		if (this.isAttached) {
 			this.documentBody.removeChild(this.menu);
-			document.removeEventListener('mousedown', this.mouseDown, false);
-			document.removeEventListener('mouseup', this.mouseUp, false);
-			document.removeEventListener('touchstart', this.mouseDown, false);
-			document.removeEventListener('touchend', this.mouseUp, false);
+			this.documentBody.removeEventListener('mousedown', this.mouseDown, false);
+			this.documentBody.removeEventListener('mouseup', this.mouseUp, false);
+			this.documentBody.removeEventListener('touchstart', this.mouseDown, false);
+			this.documentBody.removeEventListener('touchend', this.mouseUp, false);
 			this.isAttached = false;
 		}
 	}