npm - sequential-workflow-designer - Versions diffs - 0.16.8 → 0.16.10 - Mend

sequential-workflow-designer 0.16.8 → 0.16.10

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

@@ -96,10 +96,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.16.8/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.8/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.8/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.8/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.10/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.10/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.10/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.10/dist/index.umd.js"></script>
 ```
 Call the designer by:

package/dist/index.umd.js CHANGED Viewed

@@ -76,6 +76,10 @@
 	    }
 	}
+	exports.KeyboardAction = void 0;
+	(function (KeyboardAction) {
+	    KeyboardAction["delete"] = "delete";
+	})(exports.KeyboardAction || (exports.KeyboardAction = {}));
 	exports.DefinitionChangeType = void 0;
 	(function (DefinitionChangeType) {
 	    DefinitionChangeType[DefinitionChangeType["stepNameChanged"] = 1] = "stepNameChanged";
@@ -267,27 +271,29 @@
 	class EditorRenderer {
 	    static create(state, definitionWalker, handler) {
-	        const listener = new EditorRenderer(state, definitionWalker, handler);
-	        race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged).subscribe(r => {
-	            const [definitionChanged, selectedStepId] = r;
-	            if (definitionChanged) {
-	                listener.onDefinitionChanged(definitionChanged);
-	            }
-	            else if (selectedStepId !== undefined) {
-	                listener.onSelectedStepIdChanged(selectedStepId);
-	            }
-	        });
+	        const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged);
+	        const listener = new EditorRenderer(state, definitionWalker, handler, raceEvent);
+	        raceEvent.subscribe(listener.raceEventHandler);
 	        listener.tryRender(state.selectedStepId);
 	        return listener;
 	    }
-	    constructor(state, definitionWalker, handler) {
+	    constructor(state, definitionWalker, handler, raceEvent) {
 	        this.state = state;
 	        this.definitionWalker = definitionWalker;
 	        this.handler = handler;
+	        this.raceEvent = raceEvent;
 	        this.currentStepId = undefined;
+	        this.raceEventHandler = ([definitionChanged, selectedStepId]) => {
+	            if (definitionChanged) {
+	                this.onDefinitionChanged(definitionChanged);
+	            }
+	            else if (selectedStepId !== undefined) {
+	                this.onSelectedStepIdChanged(selectedStepId);
+	            }
+	        };
 	    }
 	    destroy() {
-	        // TODO: unsubscribe from events
+	        this.raceEvent.unsubscribe(this.raceEventHandler);
 	    }
 	    render(stepId) {
 	        const step = stepId ? this.definitionWalker.getById(this.state.definition, stepId) : null;
@@ -3451,23 +3457,27 @@
 	    }
 	}
-	const supportedKeys = ['Backspace', 'Delete'];
-	const ignoreTagNames = ['INPUT', 'TEXTAREA'];
+	const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
 	class KeyboardDaemon {
-	    static create(api) {
-	        const controller = new KeyboardDaemon(api.controlBar);
+	    static create(api, configuration) {
+	        const controller = new KeyboardDaemon(api.controlBar, configuration);
 	        document.addEventListener('keyup', controller.onKeyUp, false);
 	        return controller;
 	    }
-	    constructor(controlBarApi) {
+	    constructor(controlBarApi, configuration) {
 	        this.controlBarApi = controlBarApi;
+	        this.configuration = configuration;
 	        this.onKeyUp = (e) => {
-	            if (!supportedKeys.includes(e.key)) {
+	            const action = detectAction(e);
+	            if (!action) {
 	                return;
 	            }
 	            if (document.activeElement && ignoreTagNames.includes(document.activeElement.tagName)) {
 	                return;
 	            }
+	            if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action, e)) {
+	                return;
+	            }
 	            const isDeletable = this.controlBarApi.canDelete();
 	            if (isDeletable) {
 	                e.preventDefault();
@@ -3479,11 +3489,26 @@
 	    destroy() {
 	        document.removeEventListener('keyup', this.onKeyUp, false);
 	    }
+	}
+	function detectAction(e) {
+	    if (e.key === 'Backspace' || e.key === 'Delete') {
+	        return exports.KeyboardAction.delete;
+	    }
+	    return null;
 	}
 	class KeyboardDaemonExtension {
-	    constructor() {
-	        this.create = KeyboardDaemon.create;
+	    static create(configuration) {
+	        if (configuration === undefined || configuration === true) {
+	            configuration = {};
+	        }
+	        return new KeyboardDaemonExtension(configuration);
+	    }
+	    constructor(configuration) {
+	        this.configuration = configuration;
+	    }
+	    create(api) {
+	        return KeyboardDaemon.create(api, this.configuration);
 	    }
 	}
@@ -4263,7 +4288,9 @@
 	    if (!services.daemons) {
 	        services.daemons = [];
 	    }
-	    services.daemons.push(new KeyboardDaemonExtension());
+	    if (configuration.keyboard === undefined || configuration.keyboard) {
+	        services.daemons.push(KeyboardDaemonExtension.create(configuration.keyboard));
+	    }
 	}
 	function throwDepreciatedError(propertyName, groupName) {
@@ -4316,10 +4343,17 @@
 	        const view = DesignerView.create(placeholder, designerContext, designerApi);
 	        const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
 	        view.workspace.onReady.subscribe(() => designer.onReady.forward());
-	        designerContext.state.onDefinitionChanged.subscribe(() => {
-	            setTimeout(() => designer.onDefinitionChanged.forward(designerContext.state.definition));
+	        race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
+	            if (definition !== undefined) {
+	                designer.onDefinitionChanged.forward(designerContext.state.definition);
+	            }
+	            if (selectedStepId !== undefined) {
+	                designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
+	            }
+	        });
+	        designerContext.state.onViewportChanged.subscribe(viewPort => {
+	            designer.onViewportChanged.forward(viewPort);
 	        });
-	        designerContext.state.onSelectedStepIdChanged.subscribe(() => designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId));
 	        designerContext.state.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
 	            designer.onIsToolboxCollapsedChanged.forward(isCollapsed);
 	        });
@@ -4342,6 +4376,10 @@
 	         * @description Fires when the definition has changed.
 	         */
 	        this.onDefinitionChanged = new SimpleEvent();
+	        /**
+	         * @description Fires when the viewport has changed.
+	         */
+	        this.onViewportChanged = new SimpleEvent();
 	        /**
 	         * @description Fires when the selected step has changed.
 	         */
@@ -4391,6 +4429,19 @@
 	    selectStepById(stepId) {
 	        this.state.setSelectedStepId(stepId);
 	    }
+	    /**
+	     * @returns the current viewport.
+	     */
+	    getViewport() {
+	        return this.state.viewport;
+	    }
+	    /**
+	     * @description Sets the viewport.
+	     * @param viewport Viewport.
+	     */
+	    setViewport(viewport) {
+	        this.state.setViewport(viewport);
+	    }
 	    /**
 	     * @description Unselects the selected step.
 	     */

package/lib/cjs/index.cjs CHANGED Viewed

@@ -74,6 +74,10 @@ class ControlBarApi {
     }
 }
+exports.KeyboardAction = void 0;
+(function (KeyboardAction) {
+    KeyboardAction["delete"] = "delete";
+})(exports.KeyboardAction || (exports.KeyboardAction = {}));
 exports.DefinitionChangeType = void 0;
 (function (DefinitionChangeType) {
     DefinitionChangeType[DefinitionChangeType["stepNameChanged"] = 1] = "stepNameChanged";
@@ -265,27 +269,29 @@ function race(timeout, a, b, c) {
 class EditorRenderer {
     static create(state, definitionWalker, handler) {
-        const listener = new EditorRenderer(state, definitionWalker, handler);
-        race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged).subscribe(r => {
-            const [definitionChanged, selectedStepId] = r;
-            if (definitionChanged) {
-                listener.onDefinitionChanged(definitionChanged);
-            }
-            else if (selectedStepId !== undefined) {
-                listener.onSelectedStepIdChanged(selectedStepId);
-            }
-        });
+        const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged);
+        const listener = new EditorRenderer(state, definitionWalker, handler, raceEvent);
+        raceEvent.subscribe(listener.raceEventHandler);
         listener.tryRender(state.selectedStepId);
         return listener;
     }
-    constructor(state, definitionWalker, handler) {
+    constructor(state, definitionWalker, handler, raceEvent) {
         this.state = state;
         this.definitionWalker = definitionWalker;
         this.handler = handler;
+        this.raceEvent = raceEvent;
         this.currentStepId = undefined;
+        this.raceEventHandler = ([definitionChanged, selectedStepId]) => {
+            if (definitionChanged) {
+                this.onDefinitionChanged(definitionChanged);
+            }
+            else if (selectedStepId !== undefined) {
+                this.onSelectedStepIdChanged(selectedStepId);
+            }
+        };
     }
     destroy() {
-        // TODO: unsubscribe from events
+        this.raceEvent.unsubscribe(this.raceEventHandler);
     }
     render(stepId) {
         const step = stepId ? this.definitionWalker.getById(this.state.definition, stepId) : null;
@@ -3266,23 +3272,27 @@ class ControlBarExtension {
     }
 }
-const supportedKeys = ['Backspace', 'Delete'];
-const ignoreTagNames = ['INPUT', 'TEXTAREA'];
+const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
 class KeyboardDaemon {
-    static create(api) {
-        const controller = new KeyboardDaemon(api.controlBar);
+    static create(api, configuration) {
+        const controller = new KeyboardDaemon(api.controlBar, configuration);
         document.addEventListener('keyup', controller.onKeyUp, false);
         return controller;
     }
-    constructor(controlBarApi) {
+    constructor(controlBarApi, configuration) {
         this.controlBarApi = controlBarApi;
+        this.configuration = configuration;
         this.onKeyUp = (e) => {
-            if (!supportedKeys.includes(e.key)) {
+            const action = detectAction(e);
+            if (!action) {
                 return;
             }
             if (document.activeElement && ignoreTagNames.includes(document.activeElement.tagName)) {
                 return;
             }
+            if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action, e)) {
+                return;
+            }
             const isDeletable = this.controlBarApi.canDelete();
             if (isDeletable) {
                 e.preventDefault();
@@ -3294,11 +3304,26 @@ class KeyboardDaemon {
     destroy() {
         document.removeEventListener('keyup', this.onKeyUp, false);
     }
+}
+function detectAction(e) {
+    if (e.key === 'Backspace' || e.key === 'Delete') {
+        return exports.KeyboardAction.delete;
+    }
+    return null;
 }
 class KeyboardDaemonExtension {
-    constructor() {
-        this.create = KeyboardDaemon.create;
+    static create(configuration) {
+        if (configuration === undefined || configuration === true) {
+            configuration = {};
+        }
+        return new KeyboardDaemonExtension(configuration);
+    }
+    constructor(configuration) {
+        this.configuration = configuration;
+    }
+    create(api) {
+        return KeyboardDaemon.create(api, this.configuration);
     }
 }
@@ -4078,7 +4103,9 @@ function setDefault(services, configuration) {
     if (!services.daemons) {
         services.daemons = [];
     }
-    services.daemons.push(new KeyboardDaemonExtension());
+    if (configuration.keyboard === undefined || configuration.keyboard) {
+        services.daemons.push(KeyboardDaemonExtension.create(configuration.keyboard));
+    }
 }
 function throwDepreciatedError(propertyName, groupName) {
@@ -4131,10 +4158,17 @@ class Designer {
         const view = DesignerView.create(placeholder, designerContext, designerApi);
         const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
         view.workspace.onReady.subscribe(() => designer.onReady.forward());
-        designerContext.state.onDefinitionChanged.subscribe(() => {
-            setTimeout(() => designer.onDefinitionChanged.forward(designerContext.state.definition));
+        race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
+            if (definition !== undefined) {
+                designer.onDefinitionChanged.forward(designerContext.state.definition);
+            }
+            if (selectedStepId !== undefined) {
+                designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
+            }
+        });
+        designerContext.state.onViewportChanged.subscribe(viewPort => {
+            designer.onViewportChanged.forward(viewPort);
         });
-        designerContext.state.onSelectedStepIdChanged.subscribe(() => designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId));
         designerContext.state.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
             designer.onIsToolboxCollapsedChanged.forward(isCollapsed);
         });
@@ -4157,6 +4191,10 @@ class Designer {
          * @description Fires when the definition has changed.
          */
         this.onDefinitionChanged = new SimpleEvent();
+        /**
+         * @description Fires when the viewport has changed.
+         */
+        this.onViewportChanged = new SimpleEvent();
         /**
          * @description Fires when the selected step has changed.
          */
@@ -4206,6 +4244,19 @@ class Designer {
     selectStepById(stepId) {
         this.state.setSelectedStepId(stepId);
     }
+    /**
+     * @returns the current viewport.
+     */
+    getViewport() {
+        return this.state.viewport;
+    }
+    /**
+     * @description Sets the viewport.
+     * @param viewport Viewport.
+     */
+    setViewport(viewport) {
+        this.state.setViewport(viewport);
+    }
     /**
      * @description Unselects the selected step.
      */

package/lib/esm/index.js CHANGED Viewed

@@ -73,6 +73,10 @@ class ControlBarApi {
     }
 }
+var KeyboardAction;
+(function (KeyboardAction) {
+    KeyboardAction["delete"] = "delete";
+})(KeyboardAction || (KeyboardAction = {}));
 var DefinitionChangeType;
 (function (DefinitionChangeType) {
     DefinitionChangeType[DefinitionChangeType["stepNameChanged"] = 1] = "stepNameChanged";
@@ -264,27 +268,29 @@ function race(timeout, a, b, c) {
 class EditorRenderer {
     static create(state, definitionWalker, handler) {
-        const listener = new EditorRenderer(state, definitionWalker, handler);
-        race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged).subscribe(r => {
-            const [definitionChanged, selectedStepId] = r;
-            if (definitionChanged) {
-                listener.onDefinitionChanged(definitionChanged);
-            }
-            else if (selectedStepId !== undefined) {
-                listener.onSelectedStepIdChanged(selectedStepId);
-            }
-        });
+        const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged);
+        const listener = new EditorRenderer(state, definitionWalker, handler, raceEvent);
+        raceEvent.subscribe(listener.raceEventHandler);
         listener.tryRender(state.selectedStepId);
         return listener;
     }
-    constructor(state, definitionWalker, handler) {
+    constructor(state, definitionWalker, handler, raceEvent) {
         this.state = state;
         this.definitionWalker = definitionWalker;
         this.handler = handler;
+        this.raceEvent = raceEvent;
         this.currentStepId = undefined;
+        this.raceEventHandler = ([definitionChanged, selectedStepId]) => {
+            if (definitionChanged) {
+                this.onDefinitionChanged(definitionChanged);
+            }
+            else if (selectedStepId !== undefined) {
+                this.onSelectedStepIdChanged(selectedStepId);
+            }
+        };
     }
     destroy() {
-        // TODO: unsubscribe from events
+        this.raceEvent.unsubscribe(this.raceEventHandler);
     }
     render(stepId) {
         const step = stepId ? this.definitionWalker.getById(this.state.definition, stepId) : null;
@@ -3265,23 +3271,27 @@ class ControlBarExtension {
     }
 }
-const supportedKeys = ['Backspace', 'Delete'];
-const ignoreTagNames = ['INPUT', 'TEXTAREA'];
+const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
 class KeyboardDaemon {
-    static create(api) {
-        const controller = new KeyboardDaemon(api.controlBar);
+    static create(api, configuration) {
+        const controller = new KeyboardDaemon(api.controlBar, configuration);
         document.addEventListener('keyup', controller.onKeyUp, false);
         return controller;
     }
-    constructor(controlBarApi) {
+    constructor(controlBarApi, configuration) {
         this.controlBarApi = controlBarApi;
+        this.configuration = configuration;
         this.onKeyUp = (e) => {
-            if (!supportedKeys.includes(e.key)) {
+            const action = detectAction(e);
+            if (!action) {
                 return;
             }
             if (document.activeElement && ignoreTagNames.includes(document.activeElement.tagName)) {
                 return;
             }
+            if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action, e)) {
+                return;
+            }
             const isDeletable = this.controlBarApi.canDelete();
             if (isDeletable) {
                 e.preventDefault();
@@ -3293,11 +3303,26 @@ class KeyboardDaemon {
     destroy() {
         document.removeEventListener('keyup', this.onKeyUp, false);
     }
+}
+function detectAction(e) {
+    if (e.key === 'Backspace' || e.key === 'Delete') {
+        return KeyboardAction.delete;
+    }
+    return null;
 }
 class KeyboardDaemonExtension {
-    constructor() {
-        this.create = KeyboardDaemon.create;
+    static create(configuration) {
+        if (configuration === undefined || configuration === true) {
+            configuration = {};
+        }
+        return new KeyboardDaemonExtension(configuration);
+    }
+    constructor(configuration) {
+        this.configuration = configuration;
+    }
+    create(api) {
+        return KeyboardDaemon.create(api, this.configuration);
     }
 }
@@ -4077,7 +4102,9 @@ function setDefault(services, configuration) {
     if (!services.daemons) {
         services.daemons = [];
     }
-    services.daemons.push(new KeyboardDaemonExtension());
+    if (configuration.keyboard === undefined || configuration.keyboard) {
+        services.daemons.push(KeyboardDaemonExtension.create(configuration.keyboard));
+    }
 }
 function throwDepreciatedError(propertyName, groupName) {
@@ -4130,10 +4157,17 @@ class Designer {
         const view = DesignerView.create(placeholder, designerContext, designerApi);
         const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
         view.workspace.onReady.subscribe(() => designer.onReady.forward());
-        designerContext.state.onDefinitionChanged.subscribe(() => {
-            setTimeout(() => designer.onDefinitionChanged.forward(designerContext.state.definition));
+        race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
+            if (definition !== undefined) {
+                designer.onDefinitionChanged.forward(designerContext.state.definition);
+            }
+            if (selectedStepId !== undefined) {
+                designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
+            }
+        });
+        designerContext.state.onViewportChanged.subscribe(viewPort => {
+            designer.onViewportChanged.forward(viewPort);
         });
-        designerContext.state.onSelectedStepIdChanged.subscribe(() => designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId));
         designerContext.state.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
             designer.onIsToolboxCollapsedChanged.forward(isCollapsed);
         });
@@ -4156,6 +4190,10 @@ class Designer {
          * @description Fires when the definition has changed.
          */
         this.onDefinitionChanged = new SimpleEvent();
+        /**
+         * @description Fires when the viewport has changed.
+         */
+        this.onViewportChanged = new SimpleEvent();
         /**
          * @description Fires when the selected step has changed.
          */
@@ -4205,6 +4243,19 @@ class Designer {
     selectStepById(stepId) {
         this.state.setSelectedStepId(stepId);
     }
+    /**
+     * @returns the current viewport.
+     */
+    getViewport() {
+        return this.state.viewport;
+    }
+    /**
+     * @description Sets the viewport.
+     * @param viewport Viewport.
+     */
+    setViewport(viewport) {
+        this.state.setViewport(viewport);
+    }
     /**
      * @description Unselects the selected step.
      */
@@ -4317,4 +4368,4 @@ class StepsDesignerExtension {
 class StepsExtension extends StepsDesignerExtension {
 }
-export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ControlBarApi, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderDirection, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderView, RegionView, ServicesResolver, SimpleEvent, StepComponent, StepExtensionResolver, StepsDesignerExtension, StepsExtension, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, race };
+export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ControlBarApi, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, KeyboardAction, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderDirection, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderView, RegionView, ServicesResolver, SimpleEvent, StepComponent, StepExtensionResolver, StepsDesignerExtension, StepsExtension, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, race };

package/lib/index.d.ts CHANGED Viewed

@@ -361,12 +361,14 @@ declare class EditorRenderer {
     private readonly state;
     private readonly definitionWalker;
     private readonly handler;
+    private readonly raceEvent;
     static create(state: DesignerState, definitionWalker: DefinitionWalker, handler: EditorRendererHandler): EditorRenderer;
     private currentStepId;
     private constructor();
     destroy(): void;
     private render;
     private tryRender;
+    private readonly raceEventHandler;
     private onDefinitionChanged;
     private onSelectedStepIdChanged;
 }
@@ -798,8 +800,8 @@ interface ViewportController {
     focusOnComponent(componentPosition: Vector, componentSize: Vector): void;
 }
 interface Viewport {
-    position: Vector;
-    scale: number;
+    readonly position: Vector;
+    readonly scale: number;
 }
 interface DaemonExtension {
     create(api: DesignerApi): Daemon;
@@ -850,6 +852,10 @@ interface DesignerConfiguration<TDefinition extends Definition = Definition> {
      * @description The configuration of validators.
      */
     validator?: ValidatorConfiguration;
+    /**
+     * @description The configuration of the keyboard shortcuts. By default, the keyboard shortcuts are enabled (`true`). If `false`, the keyboard shortcuts are disabled.
+     */
+    keyboard?: boolean | KeyboardConfiguration;
     /**
      * @description The handler that handles custom actions.
      */
@@ -932,6 +938,12 @@ interface ValidatorConfiguration {
 }
 type StepValidator = (step: Step, parentSequence: Sequence, definition: Definition) => boolean;
 type RootValidator = (definition: Definition) => boolean;
+interface KeyboardConfiguration {
+    canHandleKey?: (action: KeyboardAction, event: KeyboardEvent) => boolean;
+}
+declare enum KeyboardAction {
+    delete = "delete"
+}
 interface EditorsConfiguration<TDefinition extends Definition = Definition> {
     isCollapsed?: boolean;
     stepEditorProvider: StepEditorProvider<TDefinition>;
@@ -1040,6 +1052,10 @@ declare class Designer<TDefinition extends Definition = Definition> {
      * @description Fires when the definition has changed.
      */
     readonly onDefinitionChanged: SimpleEvent<TDefinition>;
+    /**
+     * @description Fires when the viewport has changed.
+     */
+    readonly onViewportChanged: SimpleEvent<Viewport>;
     /**
      * @description Fires when the selected step has changed.
      */
@@ -1076,6 +1092,15 @@ declare class Designer<TDefinition extends Definition = Definition> {
      * @description Selects a step by the id.
      */
     selectStepById(stepId: string): void;
+    /**
+     * @returns the current viewport.
+     */
+    getViewport(): Viewport;
+    /**
+     * @description Sets the viewport.
+     * @param viewport Viewport.
+     */
+    setViewport(viewport: Viewport): void;
     /**
      * @description Unselects the selected step.
      */
@@ -1169,4 +1194,4 @@ declare class StepsExtension extends StepsDesignerExtension {
 interface StepsExtensionConfiguration extends StepsDesignerExtensionConfiguration {
 }
-export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesResult, BaseClickCommand, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentView, ContainerStep, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ControlBarApi, CustomAction, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, GlobalEditorContext, GlobalEditorProvider, Grid, GridExtension, Icons, InputView, JoinView, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionView, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, StepsExtension, StepsExtensionConfiguration, SwitchStep, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStep, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, race };
+export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesResult, BaseClickCommand, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentView, ContainerStep, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ControlBarApi, CustomAction, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, GlobalEditorContext, GlobalEditorProvider, Grid, GridExtension, Icons, InputView, JoinView, KeyboardAction, KeyboardConfiguration, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionView, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, StepsExtension, StepsExtensionConfiguration, SwitchStep, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStep, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, race };

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.16.8",
+	"version": "0.16.10",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",