sequential-workflow-designer 0.24.4 → 0.24.6

package/lib/cjs/index.cjs

@@ -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,11 +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(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), 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(documentOrShadowRoot, documentBody, controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
-        this.documentOrShadowRoot = documentOrShadowRoot;
-        this.documentBody = documentBody;
+    constructor(shadowRoot, controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
+        this.shadowRoot = shadowRoot;
         this.controlBar = controlBar;
         this.toolbox = toolbox;
         this.editor = editor;
@@ -969,15 +970,14 @@ class StepComponentFactory {
 }
 
 class ComponentContext {
-    static create(documentOrShadowRoot, documentBody, configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
+    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(documentOrShadowRoot, documentBody, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
+        return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
     }
-    constructor(documentOrShadowRoot, documentBody, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
-        this.documentOrShadowRoot = documentOrShadowRoot;
-        this.documentBody = documentBody;
+    constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
+        this.shadowRoot = shadowRoot;
         this.validator = validator;
         this.iconProvider = iconProvider;
         this.placeholderController = placeholderController;
@@ -1704,6 +1704,12 @@ const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElemen
 
 class CenteredViewportCalculator {
     static center(margin, canvasSize, rootComponentSize) {
+        if (canvasSize.x === 0 || canvasSize.y === 0) {
+            return {
+                position: new Vector(0, 0),
+                scale: 1
+            };
+        }
         const canvasSafeWidth = Math.max(canvasSize.x - margin * 2, 0);
         const canvasSafeHeight = Math.max(canvasSize.y - margin * 2, 0);
         const scale = Math.min(Math.min(canvasSafeWidth / rootComponentSize.x, canvasSafeHeight / rootComponentSize.y), 1);
@@ -2052,32 +2058,41 @@ const nonPassiveOptions = {
     passive: false
 };
 class BehaviorController {
-    constructor(documentOrShadowRoot) {
-        this.documentOrShadowRoot = documentOrShadowRoot;
+    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 = this.documentOrShadowRoot.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);
             }
@@ -2093,11 +2108,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) {
@@ -2117,11 +2145,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;
     }
@@ -2484,11 +2511,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
     }
 }
 
@@ -2545,18 +2572,18 @@ class MemoryPreferenceStorage {
 }
 
 class DesignerContext {
-    static create(documentOrShadowRoot, 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(documentOrShadowRoot);
+        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);
@@ -2567,12 +2594,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(documentOrShadowRoot, documentBody, configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
-        return new DesignerContext(documentOrShadowRoot, 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(documentOrShadowRoot, documentBody, theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
-        this.documentOrShadowRoot = documentOrShadowRoot;
-        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;
@@ -2618,8 +2643,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;
@@ -2653,12 +2678,12 @@ class WorkspaceView {
         canvas.appendChild(foreground);
         workspace.appendChild(canvas);
         parent.appendChild(workspace);
-        const view = new WorkspaceView(componentContext.documentOrShadowRoot, 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(documentOrShadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
-        this.documentOrShadowRoot = documentOrShadowRoot;
+    constructor(shadowRoot, workspace, canvas, pattern, gridPattern, foreground, context) {
+        this.shadowRoot = shadowRoot;
         this.workspace = workspace;
         this.canvas = canvas;
         this.pattern = pattern;
@@ -2699,9 +2724,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 = this.documentOrShadowRoot.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);
@@ -2884,7 +2911,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`;
@@ -2904,16 +2931,19 @@ class ContextMenu {
             elements.push(element);
             menu.appendChild(element);
         }
-        const instance = new ContextMenu(documentBody, menu, elements, items, Date.now());
-        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);
+        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;
@@ -2960,19 +2990,18 @@ class ContextMenu {
     }
     tryDestroy() {
         if (this.isAttached) {
-            this.documentBody.removeChild(this.menu);
-            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.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;
@@ -2986,7 +3015,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) {
@@ -3088,7 +3117,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();
@@ -3519,12 +3548,13 @@ class ControlBarExtension {
 const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
 class KeyboardDaemon {
     static create(api, configuration) {
-        const controller = new KeyboardDaemon(api.documentOrShadowRoot, api.controlBar, configuration);
-        api.documentOrShadowRoot.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(documentOrShadowRoot, controlBarApi, configuration) {
-        this.documentOrShadowRoot = documentOrShadowRoot;
+    constructor(dom, controlBarApi, configuration) {
+        this.dom = dom;
         this.controlBarApi = controlBarApi;
         this.configuration = configuration;
         this.onKeyUp = (e) => {
@@ -3548,7 +3578,7 @@ class KeyboardDaemon {
         };
     }
     destroy() {
-        this.documentOrShadowRoot.removeEventListener('keyup', this.onKeyUp, false);
+        this.dom.removeEventListener('keyup', this.onKeyUp, false);
     }
 }
 function detectAction(e) {
@@ -4396,7 +4426,7 @@ class Designer {
      * @returns An instance of the designer.
      */
     static create(placeholder, startDefinition, configuration) {
-        var _a, _b;
+        var _a;
         if (!placeholder) {
             throw new Error('Placeholder is not defined');
         }
@@ -4405,13 +4435,11 @@ class Designer {
         }
         const config = configuration;
         validateConfiguration(config);
-        const documentOrShadowRoot = (_a = configuration.documentOrShadowRoot) !== null && _a !== void 0 ? _a : document;
-        const documentBody = (_b = configuration.documentBody) !== null && _b !== void 0 ? _b : 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(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);
         const designer = new Designer(view, designerContext.state, designerContext.stateModifier, designerContext.definitionWalker, designerContext.historyController, designerApi);
@@ -4510,6 +4538,12 @@ class Designer {
     setViewport(viewport) {
         this.state.setViewport(viewport);
     }
+    /**
+     * @description Resets the viewport.
+     */
+    resetViewport() {
+        this.api.viewport.resetViewport();
+    }
     /**
      * @description Unselects the selected step.
      */