npm - sequential-workflow-designer - Versions diffs - 0.24.3 → 0.24.5 - Mend

sequential-workflow-designer 0.24.3 → 0.24.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -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.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:

package/dist/index.umd.js CHANGED Viewed

@@ -405,17 +405,19 @@
 	class DragStepView {
 	    static create(step, theme, componentContext) {
+	        var _a;
+	        const body = (_a = componentContext.shadowRoot) !== null && _a !== void 0 ? _a : 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);
 	    }
-	    constructor(component, layer, documentBody) {
+	    constructor(component, layer, body) {
 	        this.component = component;
 	        this.layer = layer;
-	        this.documentBody = documentBody;
+	        this.body = body;
 	    }
 	    setPosition(position) {
 	        this.layer.style.top = position.y + 'px';
@@ -423,7 +425,7 @@
 	    }
 	    remove() {
 	        this.component.destroy();
-	        this.documentBody.removeChild(this.layer);
+	        this.body.removeChild(this.layer);
 	    }
 	}
@@ -728,9 +730,10 @@
 	        const viewportController = context.services.viewportController.create(workspace);
 	        const viewport = new ViewportApi(context.workspaceController, viewportController);
 	        const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.i18n, context.configuration.toolbox);
-	        return new DesignerApi(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), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
+	        return new DesignerApi(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), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
 	    }
-	    constructor(controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
+	    constructor(shadowRoot, controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
+	        this.shadowRoot = shadowRoot;
 	        this.controlBar = controlBar;
 	        this.toolbox = toolbox;
 	        this.editor = editor;
@@ -969,13 +972,14 @@
 	}
 	class ComponentContext {
-	    static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services, documentBody) {
+	    static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
 	        const validator = new DefinitionValidator(configuration.validator, state);
 	        const iconProvider = new IconProvider(configuration.steps);
 	        const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
-	        return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, documentBody);
+	        return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
 	    }
-	    constructor(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, documentBody) {
+	    constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
+	        this.shadowRoot = shadowRoot;
 	        this.validator = validator;
 	        this.iconProvider = iconProvider;
 	        this.placeholderController = placeholderController;
@@ -984,7 +988,6 @@
 	        this.services = services;
 	        this.preferenceStorage = preferenceStorage;
 	        this.i18n = i18n;
-	        this.documentBody = documentBody;
 	    }
 	}
@@ -2234,31 +2237,41 @@
 	    passive: false
 	};
 	class BehaviorController {
-	    constructor() {
+	    static create(shadowRoot) {
+	        return new BehaviorController(shadowRoot !== null && shadowRoot !== void 0 ? shadowRoot : document, shadowRoot);
+	    }
+	    constructor(dom, shadowRoot) {
+	        this.dom = dom;
+	        this.shadowRoot = shadowRoot;
 	        this.onMouseMove = (e) => {
 	            e.preventDefault();
+	            e.stopPropagation();
 	            this.move(readMousePosition(e));
 	        };
 	        this.onTouchMove = (e) => {
 	            e.preventDefault();
+	            e.stopPropagation();
 	            this.move(readTouchPosition(e));
 	        };
 	        this.onMouseUp = (e) => {
 	            e.preventDefault();
+	            e.stopPropagation();
 	            this.stop(false, e.target);
 	        };
 	        this.onTouchEnd = (e) => {
 	            var _a;
 	            e.preventDefault();
+	            e.stopPropagation();
 	            if (!this.state) {
 	                throw new Error(notInitializedError);
 	            }
 	            const position = (_a = this.state.lastPosition) !== null && _a !== void 0 ? _a : this.state.startPosition;
-	            const element = document.elementFromPoint(position.x, position.y);
+	            const element = this.dom.elementFromPoint(position.x, position.y);
 	            this.stop(false, element);
 	        };
 	        this.onTouchStart = (e) => {
 	            e.preventDefault();
+	            e.stopPropagation();
 	            if (e.touches.length !== 1) {
 	                this.stop(true, null);
 	            }
@@ -2274,11 +2287,24 @@
 	            behavior
 	        };
 	        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);
+	    }
+	    bind(target) {
+	        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);
+	    }
+	    unbind(target) {
+	        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);
 	    }
 	    move(position) {
 	        if (!this.state) {
@@ -2298,11 +2324,10 @@
 	        if (!this.state) {
 	            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;
 	    }
@@ -2665,11 +2690,11 @@
 	}
 	class LayoutController {
-	    constructor(parent) {
-	        this.parent = parent;
+	    constructor(placeholder) {
+	        this.placeholder = placeholder;
 	    }
 	    isMobile() {
-	        return this.parent.clientWidth < 400; // TODO
+	        return this.placeholder.clientWidth < 400; // TODO
 	    }
 	}
@@ -2726,18 +2751,18 @@
 	}
 	class DesignerContext {
-	    static create(documentBody, parent, startDefinition, configuration, services) {
+	    static create(placeholder, startDefinition, configuration, services) {
 	        var _a, _b, _c, _d, _e;
 	        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 ? (_a = configuration.toolbox.isCollapsed) !== null && _a !== void 0 ? _a : layoutController.isMobile() : false;
 	        const isEditorCollapsed = configuration.editors ? (_b = configuration.editors.isCollapsed) !== null && _b !== void 0 ? _b : layoutController.isMobile() : false;
 	        const theme = configuration.theme || 'light';
 	        const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
 	        const workspaceController = new WorkspaceControllerWrapper();
 	        const placeholderController = services.placeholderController.create();
-	        const behaviorController = new BehaviorController();
+	        const behaviorController = BehaviorController.create(configuration.shadowRoot);
 	        const stepExtensionResolver = StepExtensionResolver.create(services);
 	        const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new DefinitionWalker();
 	        const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
@@ -2748,11 +2773,10 @@
 	            historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
 	        }
 	        const preferenceStorage = (_e = configuration.preferenceStorage) !== null && _e !== void 0 ? _e : new MemoryPreferenceStorage();
-	        const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services, documentBody);
-	        return new DesignerContext(documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
+	        const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
+	        return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
 	    }
-	    constructor(documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
-	        this.documentBody = documentBody;
+	    constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
 	        this.theme = theme;
 	        this.state = state;
 	        this.configuration = configuration;
@@ -2798,8 +2822,8 @@
 	    });
 	}
-	function isElementAttached(element, documentBody) {
-	    return !(documentBody.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
+	function isElementAttached(dom, element) {
+	    return !(dom.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
 	}
 	let lastGridPatternId = 0;
@@ -2833,11 +2857,12 @@
 	        canvas.appendChild(foreground);
 	        workspace.appendChild(canvas);
 	        parent.appendChild(workspace);
-	        const view = new WorkspaceView(workspace, canvas, pattern, gridPattern, foreground, componentContext);
+	        const view = new WorkspaceView(componentContext.shadowRoot, workspace, canvas, pattern, gridPattern, foreground, componentContext);
 	        window.addEventListener('resize', view.onResizeHandler, false);
 	        return view;
 	    }
-	    constructor(workspace, canvas, pattern, gridPattern, foreground, context) {
+	    constructor(shadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
+	        this.shadowRoot = shadowRoot;
 	        this.workspace = workspace;
 	        this.canvas = canvas;
 	        this.pattern = pattern;
@@ -2878,9 +2903,11 @@
 	            handler(readMousePosition(e), e.target, e.button, e.altKey);
 	        }, false);
 	        this.canvas.addEventListener('touchstart', e => {
+	            var _a;
 	            e.preventDefault();
 	            const clientPosition = readTouchClientPosition(e);
-	            const element = document.elementFromPoint(clientPosition.x, clientPosition.y);
+	            const dom = (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : document;
+	            const element = dom.elementFromPoint(clientPosition.x, clientPosition.y);
 	            if (element) {
 	                const position = readTouchPosition(e);
 	                handler(position, element, 0, false);
@@ -3063,7 +3090,7 @@
 	}
 	class ContextMenu {
-	    static create(documentBody, position, theme, items) {
+	    static create(shadowRoot, position, theme, items) {
 	        const menu = document.createElement('div');
 	        menu.style.left = `${position.x}px`;
 	        menu.style.top = `${position.y}px`;
@@ -3083,16 +3110,19 @@
 	            elements.push(element);
 	            menu.appendChild(element);
 	        }
-	        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.appendChild(menu);
+	        const body = shadowRoot !== null && shadowRoot !== void 0 ? shadowRoot : document.body;
+	        const dom = shadowRoot !== null && shadowRoot !== void 0 ? shadowRoot : document;
+	        const instance = new ContextMenu(body, dom, menu, elements, items, Date.now());
+	        dom.addEventListener('mousedown', instance.mouseDown, false);
+	        dom.addEventListener('mouseup', instance.mouseUp, false);
+	        dom.addEventListener('touchstart', instance.mouseDown, false);
+	        dom.addEventListener('touchend', instance.mouseUp, false);
+	        body.appendChild(menu);
 	        return instance;
 	    }
-	    constructor(documentBody, menu, elements, items, startTime) {
-	        this.documentBody = documentBody;
+	    constructor(body, dom, menu, elements, items, startTime) {
+	        this.body = body;
+	        this.dom = dom;
 	        this.menu = menu;
 	        this.elements = elements;
 	        this.items = items;
@@ -3139,19 +3169,18 @@
 	    }
 	    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.body.removeChild(this.menu);
+	            this.dom.removeEventListener('mousedown', this.mouseDown, false);
+	            this.dom.removeEventListener('mouseup', this.mouseUp, false);
+	            this.dom.removeEventListener('touchstart', this.mouseDown, false);
+	            this.dom.removeEventListener('touchend', this.mouseUp, false);
 	            this.isAttached = false;
 	        }
 	    }
 	}
 	class ContextMenuController {
-	    constructor(documentBody, theme, configuration, itemsBuilder) {
-	        this.documentBody = documentBody;
+	    constructor(theme, configuration, itemsBuilder) {
 	        this.theme = theme;
 	        this.configuration = configuration;
 	        this.itemsBuilder = itemsBuilder;
@@ -3165,7 +3194,7 @@
 	            this.current.tryDestroy();
 	        }
 	        const items = this.itemsBuilder.build(commandOrNull);
-	        this.current = ContextMenu.create(this.documentBody, position, this.theme, items);
+	        this.current = ContextMenu.create(this.configuration.shadowRoot, position, this.theme, items);
 	    }
 	    destroy() {
 	        if (this.current) {
@@ -3267,7 +3296,7 @@
 	        const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
 	            ? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
 	            : undefined);
-	        const contextMenuController = new ContextMenuController(designerContext.documentBody, designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
+	        const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
 	        const workspace = new Workspace(view, designerContext.definitionWalker, designerContext.state, designerContext.behaviorController, wheelController, contextMenuController, clickBehaviorResolver, api.viewport, designerContext.services);
 	        setTimeout(() => {
 	            workspace.updateRootComponent();
@@ -3698,22 +3727,25 @@
 	const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
 	class KeyboardDaemon {
 	    static create(api, configuration) {
-	        const controller = new KeyboardDaemon(api.controlBar, configuration);
-	        document.addEventListener('keyup', controller.onKeyUp, false);
+	        const dom = api.shadowRoot || document;
+	        const controller = new KeyboardDaemon(dom, api.controlBar, configuration);
+	        dom.addEventListener('keyup', controller.onKeyUp, false);
 	        return controller;
 	    }
-	    constructor(controlBarApi, configuration) {
+	    constructor(dom, controlBarApi, configuration) {
+	        this.dom = dom;
 	        this.controlBarApi = controlBarApi;
 	        this.configuration = configuration;
 	        this.onKeyUp = (e) => {
-	            const action = detectAction(e);
+	            const ke = e;
+	            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;
 	            }
 	            const isDeletable = this.controlBarApi.canDelete();
@@ -3725,7 +3757,7 @@
 	        };
 	    }
 	    destroy() {
-	        document.removeEventListener('keyup', this.onKeyUp, false);
+	        this.dom.removeEventListener('keyup', this.onKeyUp, false);
 	    }
 	}
 	function detectAction(e) {
@@ -4582,12 +4614,11 @@
 	        }
 	        const config = configuration;
 	        validateConfiguration(config);
-	        const documentBody = (_a = configuration.documentBody) !== null && _a !== void 0 ? _a : document.body;
-	        if (!isElementAttached(placeholder, documentBody)) {
+	        if (!isElementAttached((_a = config.shadowRoot) !== null && _a !== void 0 ? _a : document, placeholder)) {
 	            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(placeholder, startDefinition, config, services);
 	        const designerApi = DesignerApi.create(designerContext);
 	        const view = DesignerView.create(placeholder, designerContext, designerApi);
 	        const designer = new Designer(view, designerContext.state, designerContext.stateModifier, designerContext.definitionWalker, designerContext.historyController, designerApi);

package/lib/cjs/index.cjs CHANGED Viewed

@@ -403,17 +403,19 @@ class PathBarApi {
 class DragStepView {
     static create(step, theme, componentContext) {
+        var _a;
+        const body = (_a = componentContext.shadowRoot) !== null && _a !== void 0 ? _a : 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);
     }
-    constructor(component, layer, documentBody) {
+    constructor(component, layer, body) {
         this.component = component;
         this.layer = layer;
-        this.documentBody = documentBody;
+        this.body = body;
     }
     setPosition(position) {
         this.layer.style.top = position.y + 'px';
@@ -421,7 +423,7 @@ class DragStepView {
     }
     remove() {
         this.component.destroy();
-        this.documentBody.removeChild(this.layer);
+        this.body.removeChild(this.layer);
     }
 }
@@ -726,9 +728,10 @@ class DesignerApi {
         const viewportController = context.services.viewportController.create(workspace);
         const viewport = new ViewportApi(context.workspaceController, viewportController);
         const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.i18n, context.configuration.toolbox);
-        return new DesignerApi(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), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
+        return new DesignerApi(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), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
     }
-    constructor(controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
+    constructor(shadowRoot, controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
+        this.shadowRoot = shadowRoot;
         this.controlBar = controlBar;
         this.toolbox = toolbox;
         this.editor = editor;
@@ -967,13 +970,14 @@ class StepComponentFactory {
 }
 class ComponentContext {
-    static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services, documentBody) {
+    static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
         const validator = new DefinitionValidator(configuration.validator, state);
         const iconProvider = new IconProvider(configuration.steps);
         const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
-        return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, documentBody);
+        return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
     }
-    constructor(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, documentBody) {
+    constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
+        this.shadowRoot = shadowRoot;
         this.validator = validator;
         this.iconProvider = iconProvider;
         this.placeholderController = placeholderController;
@@ -982,7 +986,6 @@ class ComponentContext {
         this.services = services;
         this.preferenceStorage = preferenceStorage;
         this.i18n = i18n;
-        this.documentBody = documentBody;
     }
 }
@@ -2049,31 +2052,41 @@ const nonPassiveOptions = {
     passive: false
 };
 class BehaviorController {
-    constructor() {
+    static create(shadowRoot) {
+        return new BehaviorController(shadowRoot !== null && shadowRoot !== void 0 ? shadowRoot : document, shadowRoot);
+    }
+    constructor(dom, shadowRoot) {
+        this.dom = dom;
+        this.shadowRoot = shadowRoot;
         this.onMouseMove = (e) => {
             e.preventDefault();
+            e.stopPropagation();
             this.move(readMousePosition(e));
         };
         this.onTouchMove = (e) => {
             e.preventDefault();
+            e.stopPropagation();
             this.move(readTouchPosition(e));
         };
         this.onMouseUp = (e) => {
             e.preventDefault();
+            e.stopPropagation();
             this.stop(false, e.target);
         };
         this.onTouchEnd = (e) => {
             var _a;
             e.preventDefault();
+            e.stopPropagation();
             if (!this.state) {
                 throw new Error(notInitializedError);
             }
             const position = (_a = this.state.lastPosition) !== null && _a !== void 0 ? _a : this.state.startPosition;
-            const element = document.elementFromPoint(position.x, position.y);
+            const element = this.dom.elementFromPoint(position.x, position.y);
             this.stop(false, element);
         };
         this.onTouchStart = (e) => {
             e.preventDefault();
+            e.stopPropagation();
             if (e.touches.length !== 1) {
                 this.stop(true, null);
             }
@@ -2089,11 +2102,24 @@ class BehaviorController {
             behavior
         };
         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);
+    }
+    bind(target) {
+        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);
+    }
+    unbind(target) {
+        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);
     }
     move(position) {
         if (!this.state) {
@@ -2113,11 +2139,10 @@ class BehaviorController {
         if (!this.state) {
             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;
     }
@@ -2480,11 +2505,11 @@ function areItemsEqual(item, changeType, stepId) {
 }
 class LayoutController {
-    constructor(parent) {
-        this.parent = parent;
+    constructor(placeholder) {
+        this.placeholder = placeholder;
     }
     isMobile() {
-        return this.parent.clientWidth < 400; // TODO
+        return this.placeholder.clientWidth < 400; // TODO
     }
 }
@@ -2541,18 +2566,18 @@ class MemoryPreferenceStorage {
 }
 class DesignerContext {
-    static create(documentBody, parent, startDefinition, configuration, services) {
+    static create(placeholder, startDefinition, configuration, services) {
         var _a, _b, _c, _d, _e;
         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 ? (_a = configuration.toolbox.isCollapsed) !== null && _a !== void 0 ? _a : layoutController.isMobile() : false;
         const isEditorCollapsed = configuration.editors ? (_b = configuration.editors.isCollapsed) !== null && _b !== void 0 ? _b : layoutController.isMobile() : false;
         const theme = configuration.theme || 'light';
         const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
         const workspaceController = new WorkspaceControllerWrapper();
         const placeholderController = services.placeholderController.create();
-        const behaviorController = new BehaviorController();
+        const behaviorController = BehaviorController.create(configuration.shadowRoot);
         const stepExtensionResolver = StepExtensionResolver.create(services);
         const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new sequentialWorkflowModel.DefinitionWalker();
         const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
@@ -2563,11 +2588,10 @@ class DesignerContext {
             historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
         }
         const preferenceStorage = (_e = configuration.preferenceStorage) !== null && _e !== void 0 ? _e : new MemoryPreferenceStorage();
-        const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services, documentBody);
-        return new DesignerContext(documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
+        const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
+        return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
     }
-    constructor(documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
-        this.documentBody = documentBody;
+    constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
         this.theme = theme;
         this.state = state;
         this.configuration = configuration;
@@ -2613,8 +2637,8 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
-function isElementAttached(element, documentBody) {
-    return !(documentBody.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
+function isElementAttached(dom, element) {
+    return !(dom.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
 }
 let lastGridPatternId = 0;
@@ -2648,11 +2672,12 @@ class WorkspaceView {
         canvas.appendChild(foreground);
         workspace.appendChild(canvas);
         parent.appendChild(workspace);
-        const view = new WorkspaceView(workspace, canvas, pattern, gridPattern, foreground, componentContext);
+        const view = new WorkspaceView(componentContext.shadowRoot, workspace, canvas, pattern, gridPattern, foreground, componentContext);
         window.addEventListener('resize', view.onResizeHandler, false);
         return view;
     }
-    constructor(workspace, canvas, pattern, gridPattern, foreground, context) {
+    constructor(shadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
+        this.shadowRoot = shadowRoot;
         this.workspace = workspace;
         this.canvas = canvas;
         this.pattern = pattern;
@@ -2693,9 +2718,11 @@ class WorkspaceView {
             handler(readMousePosition(e), e.target, e.button, e.altKey);
         }, false);
         this.canvas.addEventListener('touchstart', e => {
+            var _a;
             e.preventDefault();
             const clientPosition = readTouchClientPosition(e);
-            const element = document.elementFromPoint(clientPosition.x, clientPosition.y);
+            const dom = (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : document;
+            const element = dom.elementFromPoint(clientPosition.x, clientPosition.y);
             if (element) {
                 const position = readTouchPosition(e);
                 handler(position, element, 0, false);
@@ -2878,7 +2905,7 @@ function findValidationBadgeIndex(extensions) {
 }
 class ContextMenu {
-    static create(documentBody, position, theme, items) {
+    static create(shadowRoot, position, theme, items) {
         const menu = document.createElement('div');
         menu.style.left = `${position.x}px`;
         menu.style.top = `${position.y}px`;
@@ -2898,16 +2925,19 @@ class ContextMenu {
             elements.push(element);
             menu.appendChild(element);
         }
-        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.appendChild(menu);
+        const body = shadowRoot !== null && shadowRoot !== void 0 ? shadowRoot : document.body;
+        const dom = shadowRoot !== null && shadowRoot !== void 0 ? shadowRoot : document;
+        const instance = new ContextMenu(body, dom, menu, elements, items, Date.now());
+        dom.addEventListener('mousedown', instance.mouseDown, false);
+        dom.addEventListener('mouseup', instance.mouseUp, false);
+        dom.addEventListener('touchstart', instance.mouseDown, false);
+        dom.addEventListener('touchend', instance.mouseUp, false);
+        body.appendChild(menu);
         return instance;
     }
-    constructor(documentBody, menu, elements, items, startTime) {
-        this.documentBody = documentBody;
+    constructor(body, dom, menu, elements, items, startTime) {
+        this.body = body;
+        this.dom = dom;
         this.menu = menu;
         this.elements = elements;
         this.items = items;
@@ -2954,19 +2984,18 @@ class ContextMenu {
     }
     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.body.removeChild(this.menu);
+            this.dom.removeEventListener('mousedown', this.mouseDown, false);
+            this.dom.removeEventListener('mouseup', this.mouseUp, false);
+            this.dom.removeEventListener('touchstart', this.mouseDown, false);
+            this.dom.removeEventListener('touchend', this.mouseUp, false);
             this.isAttached = false;
         }
     }
 }
 class ContextMenuController {
-    constructor(documentBody, theme, configuration, itemsBuilder) {
-        this.documentBody = documentBody;
+    constructor(theme, configuration, itemsBuilder) {
         this.theme = theme;
         this.configuration = configuration;
         this.itemsBuilder = itemsBuilder;
@@ -2980,7 +3009,7 @@ class ContextMenuController {
             this.current.tryDestroy();
         }
         const items = this.itemsBuilder.build(commandOrNull);
-        this.current = ContextMenu.create(this.documentBody, position, this.theme, items);
+        this.current = ContextMenu.create(this.configuration.shadowRoot, position, this.theme, items);
     }
     destroy() {
         if (this.current) {
@@ -3082,7 +3111,7 @@ class Workspace {
         const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
             ? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
             : undefined);
-        const contextMenuController = new ContextMenuController(designerContext.documentBody, designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
+        const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
         const workspace = new Workspace(view, designerContext.definitionWalker, designerContext.state, designerContext.behaviorController, wheelController, contextMenuController, clickBehaviorResolver, api.viewport, designerContext.services);
         setTimeout(() => {
             workspace.updateRootComponent();
@@ -3513,22 +3542,25 @@ class ControlBarExtension {
 const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
 class KeyboardDaemon {
     static create(api, configuration) {
-        const controller = new KeyboardDaemon(api.controlBar, configuration);
-        document.addEventListener('keyup', controller.onKeyUp, false);
+        const dom = api.shadowRoot || document;
+        const controller = new KeyboardDaemon(dom, api.controlBar, configuration);
+        dom.addEventListener('keyup', controller.onKeyUp, false);
         return controller;
     }
-    constructor(controlBarApi, configuration) {
+    constructor(dom, controlBarApi, configuration) {
+        this.dom = dom;
         this.controlBarApi = controlBarApi;
         this.configuration = configuration;
         this.onKeyUp = (e) => {
-            const action = detectAction(e);
+            const ke = e;
+            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;
             }
             const isDeletable = this.controlBarApi.canDelete();
@@ -3540,7 +3572,7 @@ class KeyboardDaemon {
         };
     }
     destroy() {
-        document.removeEventListener('keyup', this.onKeyUp, false);
+        this.dom.removeEventListener('keyup', this.onKeyUp, false);
     }
 }
 function detectAction(e) {
@@ -4397,12 +4429,11 @@ class Designer {
         }
         const config = configuration;
         validateConfiguration(config);
-        const documentBody = (_a = configuration.documentBody) !== null && _a !== void 0 ? _a : document.body;
-        if (!isElementAttached(placeholder, documentBody)) {
+        if (!isElementAttached((_a = config.shadowRoot) !== null && _a !== void 0 ? _a : document, placeholder)) {
             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(placeholder, startDefinition, config, services);
         const designerApi = DesignerApi.create(designerContext);
         const view = DesignerView.create(placeholder, designerContext, designerApi);
         const designer = new Designer(view, designerContext.state, designerContext.stateModifier, designerContext.definitionWalker, designerContext.historyController, designerApi);

package/lib/esm/index.js CHANGED Viewed

@@ -402,17 +402,19 @@ class PathBarApi {
 class DragStepView {
     static create(step, theme, componentContext) {
+        var _a;
+        const body = (_a = componentContext.shadowRoot) !== null && _a !== void 0 ? _a : 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);
     }
-    constructor(component, layer, documentBody) {
+    constructor(component, layer, body) {
         this.component = component;
         this.layer = layer;
-        this.documentBody = documentBody;
+        this.body = body;
     }
     setPosition(position) {
         this.layer.style.top = position.y + 'px';
@@ -420,7 +422,7 @@ class DragStepView {
     }
     remove() {
         this.component.destroy();
-        this.documentBody.removeChild(this.layer);
+        this.body.removeChild(this.layer);
     }
 }
@@ -725,9 +727,10 @@ class DesignerApi {
         const viewportController = context.services.viewportController.create(workspace);
         const viewport = new ViewportApi(context.workspaceController, viewportController);
         const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.i18n, context.configuration.toolbox);
-        return new DesignerApi(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), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
+        return new DesignerApi(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), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
     }
-    constructor(controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
+    constructor(shadowRoot, controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
+        this.shadowRoot = shadowRoot;
         this.controlBar = controlBar;
         this.toolbox = toolbox;
         this.editor = editor;
@@ -966,13 +969,14 @@ class StepComponentFactory {
 }
 class ComponentContext {
-    static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services, documentBody) {
+    static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
         const validator = new DefinitionValidator(configuration.validator, state);
         const iconProvider = new IconProvider(configuration.steps);
         const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
-        return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, documentBody);
+        return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
     }
-    constructor(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, documentBody) {
+    constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
+        this.shadowRoot = shadowRoot;
         this.validator = validator;
         this.iconProvider = iconProvider;
         this.placeholderController = placeholderController;
@@ -981,7 +985,6 @@ class ComponentContext {
         this.services = services;
         this.preferenceStorage = preferenceStorage;
         this.i18n = i18n;
-        this.documentBody = documentBody;
     }
 }
@@ -2048,31 +2051,41 @@ const nonPassiveOptions = {
     passive: false
 };
 class BehaviorController {
-    constructor() {
+    static create(shadowRoot) {
+        return new BehaviorController(shadowRoot !== null && shadowRoot !== void 0 ? shadowRoot : document, shadowRoot);
+    }
+    constructor(dom, shadowRoot) {
+        this.dom = dom;
+        this.shadowRoot = shadowRoot;
         this.onMouseMove = (e) => {
             e.preventDefault();
+            e.stopPropagation();
             this.move(readMousePosition(e));
         };
         this.onTouchMove = (e) => {
             e.preventDefault();
+            e.stopPropagation();
             this.move(readTouchPosition(e));
         };
         this.onMouseUp = (e) => {
             e.preventDefault();
+            e.stopPropagation();
             this.stop(false, e.target);
         };
         this.onTouchEnd = (e) => {
             var _a;
             e.preventDefault();
+            e.stopPropagation();
             if (!this.state) {
                 throw new Error(notInitializedError);
             }
             const position = (_a = this.state.lastPosition) !== null && _a !== void 0 ? _a : this.state.startPosition;
-            const element = document.elementFromPoint(position.x, position.y);
+            const element = this.dom.elementFromPoint(position.x, position.y);
             this.stop(false, element);
         };
         this.onTouchStart = (e) => {
             e.preventDefault();
+            e.stopPropagation();
             if (e.touches.length !== 1) {
                 this.stop(true, null);
             }
@@ -2088,11 +2101,24 @@ class BehaviorController {
             behavior
         };
         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);
+    }
+    bind(target) {
+        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);
+    }
+    unbind(target) {
+        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);
     }
     move(position) {
         if (!this.state) {
@@ -2112,11 +2138,10 @@ class BehaviorController {
         if (!this.state) {
             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;
     }
@@ -2479,11 +2504,11 @@ function areItemsEqual(item, changeType, stepId) {
 }
 class LayoutController {
-    constructor(parent) {
-        this.parent = parent;
+    constructor(placeholder) {
+        this.placeholder = placeholder;
     }
     isMobile() {
-        return this.parent.clientWidth < 400; // TODO
+        return this.placeholder.clientWidth < 400; // TODO
     }
 }
@@ -2540,18 +2565,18 @@ class MemoryPreferenceStorage {
 }
 class DesignerContext {
-    static create(documentBody, parent, startDefinition, configuration, services) {
+    static create(placeholder, startDefinition, configuration, services) {
         var _a, _b, _c, _d, _e;
         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 ? (_a = configuration.toolbox.isCollapsed) !== null && _a !== void 0 ? _a : layoutController.isMobile() : false;
         const isEditorCollapsed = configuration.editors ? (_b = configuration.editors.isCollapsed) !== null && _b !== void 0 ? _b : layoutController.isMobile() : false;
         const theme = configuration.theme || 'light';
         const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
         const workspaceController = new WorkspaceControllerWrapper();
         const placeholderController = services.placeholderController.create();
-        const behaviorController = new BehaviorController();
+        const behaviorController = BehaviorController.create(configuration.shadowRoot);
         const stepExtensionResolver = StepExtensionResolver.create(services);
         const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new DefinitionWalker();
         const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
@@ -2562,11 +2587,10 @@ class DesignerContext {
             historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
         }
         const preferenceStorage = (_e = configuration.preferenceStorage) !== null && _e !== void 0 ? _e : new MemoryPreferenceStorage();
-        const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services, documentBody);
-        return new DesignerContext(documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
+        const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
+        return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
     }
-    constructor(documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
-        this.documentBody = documentBody;
+    constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
         this.theme = theme;
         this.state = state;
         this.configuration = configuration;
@@ -2612,8 +2636,8 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
-function isElementAttached(element, documentBody) {
-    return !(documentBody.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
+function isElementAttached(dom, element) {
+    return !(dom.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
 }
 let lastGridPatternId = 0;
@@ -2647,11 +2671,12 @@ class WorkspaceView {
         canvas.appendChild(foreground);
         workspace.appendChild(canvas);
         parent.appendChild(workspace);
-        const view = new WorkspaceView(workspace, canvas, pattern, gridPattern, foreground, componentContext);
+        const view = new WorkspaceView(componentContext.shadowRoot, workspace, canvas, pattern, gridPattern, foreground, componentContext);
         window.addEventListener('resize', view.onResizeHandler, false);
         return view;
     }
-    constructor(workspace, canvas, pattern, gridPattern, foreground, context) {
+    constructor(shadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
+        this.shadowRoot = shadowRoot;
         this.workspace = workspace;
         this.canvas = canvas;
         this.pattern = pattern;
@@ -2692,9 +2717,11 @@ class WorkspaceView {
             handler(readMousePosition(e), e.target, e.button, e.altKey);
         }, false);
         this.canvas.addEventListener('touchstart', e => {
+            var _a;
             e.preventDefault();
             const clientPosition = readTouchClientPosition(e);
-            const element = document.elementFromPoint(clientPosition.x, clientPosition.y);
+            const dom = (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : document;
+            const element = dom.elementFromPoint(clientPosition.x, clientPosition.y);
             if (element) {
                 const position = readTouchPosition(e);
                 handler(position, element, 0, false);
@@ -2877,7 +2904,7 @@ function findValidationBadgeIndex(extensions) {
 }
 class ContextMenu {
-    static create(documentBody, position, theme, items) {
+    static create(shadowRoot, position, theme, items) {
         const menu = document.createElement('div');
         menu.style.left = `${position.x}px`;
         menu.style.top = `${position.y}px`;
@@ -2897,16 +2924,19 @@ class ContextMenu {
             elements.push(element);
             menu.appendChild(element);
         }
-        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.appendChild(menu);
+        const body = shadowRoot !== null && shadowRoot !== void 0 ? shadowRoot : document.body;
+        const dom = shadowRoot !== null && shadowRoot !== void 0 ? shadowRoot : document;
+        const instance = new ContextMenu(body, dom, menu, elements, items, Date.now());
+        dom.addEventListener('mousedown', instance.mouseDown, false);
+        dom.addEventListener('mouseup', instance.mouseUp, false);
+        dom.addEventListener('touchstart', instance.mouseDown, false);
+        dom.addEventListener('touchend', instance.mouseUp, false);
+        body.appendChild(menu);
         return instance;
     }
-    constructor(documentBody, menu, elements, items, startTime) {
-        this.documentBody = documentBody;
+    constructor(body, dom, menu, elements, items, startTime) {
+        this.body = body;
+        this.dom = dom;
         this.menu = menu;
         this.elements = elements;
         this.items = items;
@@ -2953,19 +2983,18 @@ class ContextMenu {
     }
     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.body.removeChild(this.menu);
+            this.dom.removeEventListener('mousedown', this.mouseDown, false);
+            this.dom.removeEventListener('mouseup', this.mouseUp, false);
+            this.dom.removeEventListener('touchstart', this.mouseDown, false);
+            this.dom.removeEventListener('touchend', this.mouseUp, false);
             this.isAttached = false;
         }
     }
 }
 class ContextMenuController {
-    constructor(documentBody, theme, configuration, itemsBuilder) {
-        this.documentBody = documentBody;
+    constructor(theme, configuration, itemsBuilder) {
         this.theme = theme;
         this.configuration = configuration;
         this.itemsBuilder = itemsBuilder;
@@ -2979,7 +3008,7 @@ class ContextMenuController {
             this.current.tryDestroy();
         }
         const items = this.itemsBuilder.build(commandOrNull);
-        this.current = ContextMenu.create(this.documentBody, position, this.theme, items);
+        this.current = ContextMenu.create(this.configuration.shadowRoot, position, this.theme, items);
     }
     destroy() {
         if (this.current) {
@@ -3081,7 +3110,7 @@ class Workspace {
         const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
             ? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
             : undefined);
-        const contextMenuController = new ContextMenuController(designerContext.documentBody, designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
+        const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
         const workspace = new Workspace(view, designerContext.definitionWalker, designerContext.state, designerContext.behaviorController, wheelController, contextMenuController, clickBehaviorResolver, api.viewport, designerContext.services);
         setTimeout(() => {
             workspace.updateRootComponent();
@@ -3512,22 +3541,25 @@ class ControlBarExtension {
 const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
 class KeyboardDaemon {
     static create(api, configuration) {
-        const controller = new KeyboardDaemon(api.controlBar, configuration);
-        document.addEventListener('keyup', controller.onKeyUp, false);
+        const dom = api.shadowRoot || document;
+        const controller = new KeyboardDaemon(dom, api.controlBar, configuration);
+        dom.addEventListener('keyup', controller.onKeyUp, false);
         return controller;
     }
-    constructor(controlBarApi, configuration) {
+    constructor(dom, controlBarApi, configuration) {
+        this.dom = dom;
         this.controlBarApi = controlBarApi;
         this.configuration = configuration;
         this.onKeyUp = (e) => {
-            const action = detectAction(e);
+            const ke = e;
+            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;
             }
             const isDeletable = this.controlBarApi.canDelete();
@@ -3539,7 +3571,7 @@ class KeyboardDaemon {
         };
     }
     destroy() {
-        document.removeEventListener('keyup', this.onKeyUp, false);
+        this.dom.removeEventListener('keyup', this.onKeyUp, false);
     }
 }
 function detectAction(e) {
@@ -4396,12 +4428,11 @@ class Designer {
         }
         const config = configuration;
         validateConfiguration(config);
-        const documentBody = (_a = configuration.documentBody) !== null && _a !== void 0 ? _a : document.body;
-        if (!isElementAttached(placeholder, documentBody)) {
+        if (!isElementAttached((_a = config.shadowRoot) !== null && _a !== void 0 ? _a : document, placeholder)) {
             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(placeholder, startDefinition, config, services);
         const designerApi = DesignerApi.create(designerContext);
         const view = DesignerView.create(placeholder, designerContext, designerApi);
         const designer = new Designer(view, designerContext.state, designerContext.stateModifier, designerContext.definitionWalker, designerContext.historyController, designerApi);

package/lib/index.d.ts CHANGED Viewed

@@ -75,8 +75,14 @@ interface Behavior {
 }
 declare class BehaviorController {
+    private readonly dom;
+    private readonly shadowRoot;
     private state?;
+    static create(shadowRoot: ShadowRoot | undefined): BehaviorController;
+    private constructor();
     start(startPosition: Vector, behavior: Behavior): void;
+    private bind;
+    private unbind;
     private readonly onMouseMove;
     private readonly onTouchMove;
     private readonly onMouseUp;
@@ -271,6 +277,7 @@ declare class StepComponentFactory {
 }
 declare class ComponentContext {
+    readonly shadowRoot: ShadowRoot | undefined;
     readonly validator: DefinitionValidator;
     readonly iconProvider: IconProvider;
     readonly placeholderController: PlaceholderController;
@@ -279,8 +286,7 @@ declare class ComponentContext {
     readonly services: Services;
     readonly preferenceStorage: PreferenceStorage;
     readonly i18n: I18n;
-    readonly documentBody: Node;
-    static create(configuration: DesignerConfiguration, state: DesignerState, stepExtensionResolver: StepExtensionResolver, definitionWalker: DefinitionWalker, preferenceStorage: PreferenceStorage, placeholderController: PlaceholderController, i18n: I18n, services: Services, documentBody: Node): ComponentContext;
+    static create(configuration: DesignerConfiguration, state: DesignerState, stepExtensionResolver: StepExtensionResolver, definitionWalker: DefinitionWalker, preferenceStorage: PreferenceStorage, placeholderController: PlaceholderController, i18n: I18n, services: Services): ComponentContext;
     private constructor();
 }
@@ -313,8 +319,8 @@ declare class HistoryController {
 }
 declare class LayoutController {
-    private readonly parent;
-    constructor(parent: HTMLElement);
+    private readonly placeholder;
+    constructor(placeholder: HTMLElement);
     isMobile(): boolean;
 }
@@ -343,7 +349,6 @@ declare class WorkspaceControllerWrapper implements WorkspaceController {
 }
 declare class DesignerContext {
-    readonly documentBody: Node;
     readonly theme: string;
     readonly state: DesignerState;
     readonly configuration: DesignerConfiguration;
@@ -358,8 +363,8 @@ declare class DesignerContext {
     readonly behaviorController: BehaviorController;
     readonly customActionController: CustomActionController;
     readonly historyController: HistoryController | undefined;
-    static create(documentBody: Node, parent: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration, services: Services): DesignerContext;
-    constructor(documentBody: Node, theme: string, state: DesignerState, configuration: DesignerConfiguration, services: Services, componentContext: ComponentContext, definitionWalker: DefinitionWalker, i18n: I18n, stateModifier: StateModifier, layoutController: LayoutController, workspaceController: WorkspaceControllerWrapper, placeholderController: PlaceholderController, behaviorController: BehaviorController, customActionController: CustomActionController, historyController: HistoryController | undefined);
+    static create(placeholder: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration, services: Services): DesignerContext;
+    constructor(theme: string, state: DesignerState, configuration: DesignerConfiguration, services: Services, componentContext: ComponentContext, definitionWalker: DefinitionWalker, i18n: I18n, stateModifier: StateModifier, layoutController: LayoutController, workspaceController: WorkspaceControllerWrapper, placeholderController: PlaceholderController, behaviorController: BehaviorController, customActionController: CustomActionController, historyController: HistoryController | undefined);
     setWorkspaceController(controller: WorkspaceController): void;
 }
@@ -479,6 +484,7 @@ declare class WorkspaceApi {
 }
 declare class DesignerApi {
+    readonly shadowRoot: ShadowRoot | undefined;
     readonly controlBar: ControlBarApi;
     readonly toolbox: ToolboxApi;
     readonly editor: EditorApi;
@@ -938,9 +944,9 @@ interface DesignerConfiguration<TDefinition extends Definition = Definition> {
      */
     i18n?: I18n;
     /**
-     * @description The body of the document. By default, the designer will use the `document.body`.
+     * @description Pass the shadow root of the shadow root to the designer if the designer is placed inside the shadow DOM.
      */
-    documentBody?: Node;
+    shadowRoot?: ShadowRoot;
 }
 type UidGenerator = () => string;
 type I18n = (key: string, defaultValue: string) => string;

package/package.json CHANGED Viewed

@@ -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.5",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",