nocode-js · b4rtaz · Sep 16, 2024 · Sep 16, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 0.24.5
+
+Fixed another bug with event handling when the designer is placed in a shadow DOM.
+
 # 0.24.4
 
 Fixed event handling when the designer is placed in a shadow DOM.

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.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>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.5/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.5/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.5/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.5/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.4",
+	"version": "0.24.5",
 	"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.4"
+		"sequential-workflow-designer": "^0.24.5"
 	},
 	"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.4",
-		"sequential-workflow-designer-angular": "^0.24.4",
+		"sequential-workflow-designer": "^0.24.5",
+		"sequential-workflow-designer-angular": "^0.24.5",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.14.6"
 	},

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.4",
-		"sequential-workflow-designer-react": "^0.24.4"
+		"sequential-workflow-designer": "^0.24.5",
+		"sequential-workflow-designer-react": "^0.24.5"
 	},
 	"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.4",
-		"sequential-workflow-designer-svelte": "^0.24.4"
+		"sequential-workflow-designer": "^0.24.5",
+		"sequential-workflow-designer-svelte": "^0.24.5"
 	},
 	"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.4",
+	"version": "0.24.5",
 	"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,8 +21,7 @@ export class DesignerApi {
 		);
 
 		return new DesignerApi(
-			context.documentOrShadowRoot,
-			context.documentBody,
+			context.configuration.shadowRoot,
 			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),
@@ -35,8 +34,7 @@ export class DesignerApi {
 	}
 
 	private constructor(
-		public readonly documentOrShadowRoot: Document | ShadowRoot,
-		public readonly documentBody: Node,
+		public readonly shadowRoot: ShadowRoot | undefined,
 		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,7 +15,14 @@ export class BehaviorController {
 		lastPosition?: Vector;
 	};
 
-	public constructor(private readonly documentOrShadowRoot: DocumentOrShadowRoot) {}
+	public static create(shadowRoot: ShadowRoot | undefined) {
+		return new BehaviorController(shadowRoot ?? document, shadowRoot);
+	}
+
+	private constructor(
+		private readonly dom: Document | ShadowRoot,
+		private readonly shadowRoot: ShadowRoot | undefined
+	) {}
 
 	public start(startPosition: Vector, behavior: Behavior) {
 		if (this.state) {
@@ -29,42 +36,62 @@ export class BehaviorController {
 		};
 		behavior.onStart(this.state.startPosition);
 
-		window.addEventListener('mousemove', this.onMouseMove, false);
-		window.addEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
-		window.addEventListener('mouseup', this.onMouseUp, false);
-		window.addEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
-		window.addEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
+		if (this.shadowRoot) {
+			this.bind(this.shadowRoot);
+		}
+		this.bind(window);
+	}
+
+	private bind(target: EventTarget) {
+		target.addEventListener('mousemove', this.onMouseMove, false);
+		target.addEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
+		target.addEventListener('mouseup', this.onMouseUp, false);
+		target.addEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
+		target.addEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
+	}
+
+	private unbind(target: EventTarget) {
+		target.removeEventListener('mousemove', this.onMouseMove, false);
+		target.removeEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
+		target.removeEventListener('mouseup', this.onMouseUp, false);
+		target.removeEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
+		target.removeEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
 	}
 
-	private readonly onMouseMove = (e: MouseEvent) => {
+	private readonly onMouseMove = (e: Event) => {
 		e.preventDefault();
-		this.move(readMousePosition(e));
+		e.stopPropagation();
+		this.move(readMousePosition(e as MouseEvent));
 	};
 
-	private readonly onTouchMove = (e: TouchEvent) => {
+	private readonly onTouchMove = (e: Event) => {
 		e.preventDefault();
-		this.move(readTouchPosition(e));
+		e.stopPropagation();
+		this.move(readTouchPosition(e as TouchEvent));
 	};
 
-	private readonly onMouseUp = (e: MouseEvent) => {
+	private readonly onMouseUp = (e: Event) => {
 		e.preventDefault();
+		e.stopPropagation();
 		this.stop(false, e.target as Element | null);
 	};
 
-	private readonly onTouchEnd = (e: TouchEvent) => {
+	private readonly onTouchEnd = (e: Event) => {
 		e.preventDefault();
+		e.stopPropagation();
 		if (!this.state) {
 			throw new Error(notInitializedError);
 		}
 
 		const position = this.state.lastPosition ?? this.state.startPosition;
-		const element = this.documentOrShadowRoot.elementFromPoint(position.x, position.y);
+		const element = this.dom.elementFromPoint(position.x, position.y);
 		this.stop(false, element);
 	};
 
-	private readonly onTouchStart = (e: TouchEvent) => {
+	private readonly onTouchStart = (e: Event) => {
 		e.preventDefault();
-		if (e.touches.length !== 1) {
+		e.stopPropagation();
+		if ((e as TouchEvent).touches.length !== 1) {
 			this.stop(true, null);
 		}
 	};
@@ -92,11 +119,10 @@ export class BehaviorController {
 			throw new Error(notInitializedError);
 		}
 
-		window.removeEventListener('mousemove', this.onMouseMove, false);
-		window.removeEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
-		window.removeEventListener('mouseup', this.onMouseUp, false);
-		window.removeEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
-		window.removeEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
+		if (this.shadowRoot) {
+			this.unbind(this.shadowRoot);
+		}
+		this.unbind(window);
 
 		this.state.behavior.onEnd(interrupt, element);
 		this.state = undefined;

diff --git a/designer/src/behaviors/drag-step-behavior-view.ts b/designer/src/behaviors/drag-step-behavior-view.ts
@@ -6,20 +6,21 @@ import { DraggedComponent } from '../designer-extension';
 
 export class DragStepView {
 	public static create(step: Step, theme: string, componentContext: ComponentContext): DragStepView {
+		const body = componentContext.shadowRoot ?? document.body;
 		const layer = Dom.element('div', {
 			class: `sqd-drag sqd-theme-${theme}`
 		});
-		componentContext.documentBody.appendChild(layer);
+		body.appendChild(layer);
 
 		const component = componentContext.services.draggedComponent.create(layer, step, componentContext);
 
-		return new DragStepView(component, layer, componentContext.documentBody);
+		return new DragStepView(component, layer, body);
 	}
 
 	private constructor(
 		public readonly component: DraggedComponent,
 		private readonly layer: HTMLElement,
-		private readonly documentBody: Node
+		private readonly body: Node
 	) {}
 
 	public setPosition(position: Vector) {
@@ -29,6 +30,6 @@ export class DragStepView {
 
 	public remove() {
 		this.component.destroy();
-		this.documentBody.removeChild(this.layer);
+		this.body.removeChild(this.layer);
 	}
 }
diff --git a/designer/src/component-context.ts b/designer/src/component-context.ts
@@ -10,8 +10,6 @@ import { StepExtensionResolver } from './workspace/step-extension-resolver';
 
 export class ComponentContext {
 	public static create(
-		documentOrShadowRoot: Document | ShadowRoot,
-		documentBody: Node,
 		configuration: DesignerConfiguration,
 		state: DesignerState,
 		stepExtensionResolver: StepExtensionResolver,
@@ -25,8 +23,7 @@ export class ComponentContext {
 		const iconProvider = new IconProvider(configuration.steps);
 		const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
 		return new ComponentContext(
-			documentOrShadowRoot,
-			documentBody,
+			configuration.shadowRoot,
 			validator,
 			iconProvider,
 			placeholderController,
@@ -39,8 +36,7 @@ export class ComponentContext {
 	}
 
 	private constructor(
-		public readonly documentOrShadowRoot: Document | ShadowRoot,
-		public readonly documentBody: Node,
+		public readonly shadowRoot: ShadowRoot | undefined,
 		public readonly validator: DefinitionValidator,
 		public readonly iconProvider: IconProvider,
 		public readonly placeholderController: PlaceholderController,

diff --git a/designer/src/core/is-element-attached.spec.ts b/designer/src/core/is-element-attached.spec.ts
@@ -1,21 +1,19 @@
 import { isElementAttached } from './is-element-attached';
 
 describe('isElementAttached', () => {
-	const documentBody = document.body;
-
 	it('returns true if attached', () => {
 		const element = document.createElement('h2');
 
 		document.body.appendChild(element);
 
-		expect(isElementAttached(element, documentBody)).toBe(true);
+		expect(isElementAttached(document, element)).toBe(true);
 
 		document.body.removeChild(element);
 	});
 
 	it('returns false if not attached', () => {
 		const element = document.createElement('h2');
 
-		expect(isElementAttached(element, documentBody)).toBe(false);
+		expect(isElementAttached(document, element)).toBe(false);
 	});
 });
diff --git a/designer/src/core/is-element-attached.ts b/designer/src/core/is-element-attached.ts
@@ -1,3 +1,3 @@
-export function isElementAttached(element: HTMLElement, documentBody: Node): boolean {
-	return !(documentBody.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
+export function isElementAttached(dom: Document | ShadowRoot, element: HTMLElement): boolean {
+	return !(dom.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
 }
diff --git a/designer/src/designer-configuration.ts b/designer/src/designer-configuration.ts
@@ -89,14 +89,9 @@ 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`.
+	 * @description Pass the shadow root of the shadow root to the designer if the designer is placed inside the shadow DOM.
 	 */
-	documentOrShadowRoot?: Document | ShadowRoot;
-
-	/**
-	 * @description The body of the document. By default, the designer will use the `document.body`.
-	 */
-	documentBody?: Node;
+	shadowRoot?: ShadowRoot;
 }
 
 export type UidGenerator = () => string;

diff --git a/designer/src/designer-context.ts b/designer/src/designer-context.ts
@@ -16,17 +16,15 @@ import { PlaceholderController } from './designer-extension';
 
 export class DesignerContext {
 	public static create(
-		documentOrShadowRoot: Document | ShadowRoot,
-		documentBody: Node,
-		parent: HTMLElement,
+		placeholder: HTMLElement,
 		startDefinition: Definition,
 		configuration: DesignerConfiguration,
 		services: Services
 	): DesignerContext {
 		const definition = ObjectCloner.deepClone(startDefinition);
 
-		const layoutController = new LayoutController(parent);
-		const isReadonly = !!configuration.isReadonly;
+		const layoutController = new LayoutController(placeholder);
+		const isReadonly = Boolean(configuration.isReadonly);
 
 		const isToolboxCollapsed = configuration.toolbox ? configuration.toolbox.isCollapsed ?? layoutController.isMobile() : false;
 		const isEditorCollapsed = configuration.editors ? configuration.editors.isCollapsed ?? layoutController.isMobile() : false;
@@ -35,7 +33,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(documentOrShadowRoot);
+		const behaviorController = BehaviorController.create(configuration.shadowRoot);
 		const stepExtensionResolver = StepExtensionResolver.create(services);
 		const definitionWalker = configuration.definitionWalker ?? new DefinitionWalker();
 		const i18n: I18n = configuration.i18n ?? ((_, defaultValue) => defaultValue);
@@ -49,8 +47,6 @@ export class DesignerContext {
 
 		const preferenceStorage = configuration.preferenceStorage ?? new MemoryPreferenceStorage();
 		const componentContext = ComponentContext.create(
-			documentOrShadowRoot,
-			documentBody,
 			configuration,
 			state,
 			stepExtensionResolver,
@@ -62,8 +58,6 @@ export class DesignerContext {
 		);
 
 		return new DesignerContext(
-			documentOrShadowRoot,
-			documentBody,
 			theme,
 			state,
 			configuration,
@@ -82,8 +76,6 @@ export class DesignerContext {
 	}
 
 	public constructor(
-		public readonly documentOrShadowRoot: Document | ShadowRoot,
-		public readonly documentBody: Node,
 		public readonly theme: string,
 		public readonly state: DesignerState,
 		public readonly configuration: DesignerConfiguration,

diff --git a/designer/src/designer.ts b/designer/src/designer.ts
@@ -36,14 +36,12 @@ 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)) {
+		if (!isElementAttached(config.shadowRoot ?? document, placeholder)) {
 			throw new Error('Placeholder is not attached to the DOM');
 		}
 
 		const services = ServicesResolver.resolve(configuration.extensions, config);
-		const designerContext = DesignerContext.create(documentOrShadowRoot, documentBody, placeholder, startDefinition, config, services);
+		const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
 		const designerApi = DesignerApi.create(designerContext);
 
 		const view = DesignerView.create(placeholder, designerContext, designerApi);