sequential-workflow-designer 0.24.4 → 0.24.6

package/lib/esm/index.js

@@ -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,11 +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(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;
@@ -968,15 +969,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;
@@ -1703,6 +1703,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);
@@ -2051,32 +2057,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);
             }
@@ -2092,11 +2107,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) {
@@ -2116,11 +2144,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;
     }
@@ -2483,11 +2510,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
     }
 }
 
@@ -2544,18 +2571,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 DefinitionWalker();
         const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
@@ -2566,12 +2593,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;
@@ -2617,8 +2642,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;
@@ -2652,12 +2677,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;
@@ -2698,9 +2723,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);
@@ -2883,7 +2910,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`;
@@ -2903,16 +2930,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;
@@ -2959,19 +2989,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;
@@ -2985,7 +3014,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) {
@@ -3087,7 +3116,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();
@@ -3518,12 +3547,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) => {
@@ -3547,7 +3577,7 @@ class KeyboardDaemon {
         };
     }
     destroy() {
-        this.documentOrShadowRoot.removeEventListener('keyup', this.onKeyUp, false);
+        this.dom.removeEventListener('keyup', this.onKeyUp, false);
     }
 }
 function detectAction(e) {
@@ -4395,7 +4425,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');
         }
@@ -4404,13 +4434,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);
@@ -4509,6 +4537,12 @@ class Designer {
     setViewport(viewport) {
         this.state.setViewport(viewport);
     }
+    /**
+     * @description Resets the viewport.
+     */
+    resetViewport() {
+        this.api.viewport.resetViewport();
+    }
     /**
      * @description Unselects the selected step.
      */

package/lib/index.d.ts

@@ -75,10 +75,14 @@ interface Behavior {
 }
 
 declare class BehaviorController {
-    private readonly documentOrShadowRoot;
+    private readonly dom;
+    private readonly shadowRoot;
     private state?;
-    constructor(documentOrShadowRoot: DocumentOrShadowRoot);
+    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;
@@ -273,8 +277,7 @@ declare class StepComponentFactory {
 }
 
 declare class ComponentContext {
-    readonly documentOrShadowRoot: Document | ShadowRoot;
-    readonly documentBody: Node;
+    readonly shadowRoot: ShadowRoot | undefined;
     readonly validator: DefinitionValidator;
     readonly iconProvider: IconProvider;
     readonly placeholderController: PlaceholderController;
@@ -283,7 +286,7 @@ declare class ComponentContext {
     readonly services: Services;
     readonly preferenceStorage: PreferenceStorage;
     readonly i18n: I18n;
-    static create(documentOrShadowRoot: Document | ShadowRoot, documentBody: Node, configuration: DesignerConfiguration, state: DesignerState, stepExtensionResolver: StepExtensionResolver, definitionWalker: DefinitionWalker, preferenceStorage: PreferenceStorage, placeholderController: PlaceholderController, i18n: I18n, services: Services): ComponentContext;
+    static create(configuration: DesignerConfiguration, state: DesignerState, stepExtensionResolver: StepExtensionResolver, definitionWalker: DefinitionWalker, preferenceStorage: PreferenceStorage, placeholderController: PlaceholderController, i18n: I18n, services: Services): ComponentContext;
     private constructor();
 }
 
@@ -316,8 +319,8 @@ declare class HistoryController {
 }
 
 declare class LayoutController {
-    private readonly parent;
-    constructor(parent: HTMLElement);
+    private readonly placeholder;
+    constructor(placeholder: HTMLElement);
     isMobile(): boolean;
 }
 
@@ -346,8 +349,6 @@ declare class WorkspaceControllerWrapper implements WorkspaceController {
 }
 
 declare class DesignerContext {
-    readonly documentOrShadowRoot: Document | ShadowRoot;
-    readonly documentBody: Node;
     readonly theme: string;
     readonly state: DesignerState;
     readonly configuration: DesignerConfiguration;
@@ -362,8 +363,8 @@ declare class DesignerContext {
     readonly behaviorController: BehaviorController;
     readonly customActionController: CustomActionController;
     readonly historyController: HistoryController | undefined;
-    static create(documentOrShadowRoot: Document | ShadowRoot, documentBody: Node, parent: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration, services: Services): DesignerContext;
-    constructor(documentOrShadowRoot: Document | ShadowRoot, 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;
 }
 
@@ -483,8 +484,7 @@ declare class WorkspaceApi {
 }
 
 declare class DesignerApi {
-    readonly documentOrShadowRoot: Document | ShadowRoot;
-    readonly documentBody: Node;
+    readonly shadowRoot: ShadowRoot | undefined;
     readonly controlBar: ControlBarApi;
     readonly toolbox: ToolboxApi;
     readonly editor: EditorApi;
@@ -944,13 +944,9 @@ interface DesignerConfiguration<TDefinition extends Definition = Definition> {
      */
     i18n?: I18n;
     /**
-     * @description The document or shadow root where the designer is rendered. By default, the designer will use the `document`.
-     */
-    documentOrShadowRoot?: Document | ShadowRoot;
-    /**
-     * @description The body of the document. By default, the designer will use the `document.body`.
+     * @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;
@@ -1189,6 +1185,10 @@ declare class Designer<TDefinition extends Definition = Definition> {
      * @param viewport Viewport.
      */
     setViewport(viewport: Viewport): void;
+    /**
+     * @description Resets the viewport.
+     */
+    resetViewport(): void;
     /**
      * @description Unselects the selected step.
      */

package/package.json

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