npm - sequential-workflow-designer - Versions diffs - 0.24.4 → 0.24.6 - Mend

sequential-workflow-designer 0.24.4 → 0.24.6

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.4/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.4/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.4/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.4/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.6/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.6/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.6/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.6/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,11 +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(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;
@@ -971,15 +972,14 @@
 	}
 	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;
@@ -1706,6 +1706,12 @@
 	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);
@@ -2237,32 +2243,41 @@
 	    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);
 	            }
@@ -2278,11 +2293,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) {
@@ -2302,11 +2330,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;
 	    }
@@ -2669,11 +2696,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
 	    }
 	}
@@ -2730,18 +2757,18 @@
 	}
 	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);
@@ -2752,12 +2779,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(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;
@@ -2803,8 +2828,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;
@@ -2838,12 +2863,12 @@
 	        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;
@@ -2884,9 +2909,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 = 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);
@@ -3069,7 +3096,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`;
@@ -3089,16 +3116,19 @@
 	            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;
@@ -3145,19 +3175,18 @@
 	    }
 	    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;
@@ -3171,7 +3200,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) {
@@ -3273,7 +3302,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();
@@ -3704,12 +3733,13 @@
 	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) => {
@@ -3733,7 +3763,7 @@
 	        };
 	    }
 	    destroy() {
-	        this.documentOrShadowRoot.removeEventListener('keyup', this.onKeyUp, false);
+	        this.dom.removeEventListener('keyup', this.onKeyUp, false);
 	    }
 	}
 	function detectAction(e) {
@@ -4581,7 +4611,7 @@
 	     * @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');
 	        }
@@ -4590,13 +4620,11 @@
 	        }
 	        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);
@@ -4695,6 +4723,12 @@
 	    setViewport(viewport) {
 	        this.state.setViewport(viewport);
 	    }
+	    /**
+	     * @description Resets the viewport.
+	     */
+	    resetViewport() {
+	        this.api.viewport.resetViewport();
+	    }
 	    /**
 	     * @description Unselects the selected step.
 	     */