sequential-workflow-designer 0.18.3 → 0.18.5

package/lib/esm/index.js

@@ -1,94 +1,6 @@
 import { DefinitionWalker, StepChildrenType } from 'sequential-workflow-model';
 export * from 'sequential-workflow-model';
 
-class ControlBarApi {
-    constructor(state, historyController, definitionModifier, viewportApi) {
-        this.state = state;
-        this.historyController = historyController;
-        this.definitionModifier = definitionModifier;
-        this.viewportApi = viewportApi;
-    }
-    /**
-     * @deprecated Don't use this method
-     */
-    subscribe(handler) {
-        // TODO: this should be refactored
-        this.state.onIsReadonlyChanged.subscribe(handler);
-        this.state.onSelectedStepIdChanged.subscribe(handler);
-        this.state.onIsDragDisabledChanged.subscribe(handler);
-        if (this.isUndoRedoSupported()) {
-            this.state.onDefinitionChanged.subscribe(handler);
-        }
-    }
-    resetViewport() {
-        this.viewportApi.resetViewport();
-    }
-    zoomIn() {
-        this.viewportApi.zoom(true);
-    }
-    zoomOut() {
-        this.viewportApi.zoom(false);
-    }
-    isDragDisabled() {
-        return this.state.isDragDisabled;
-    }
-    toggleIsDragDisabled() {
-        this.state.toggleIsDragDisabled();
-    }
-    isUndoRedoSupported() {
-        return !!this.historyController;
-    }
-    tryUndo() {
-        if (this.canUndo() && this.historyController) {
-            this.historyController.undo();
-            return true;
-        }
-        return false;
-    }
-    canUndo() {
-        return !!this.historyController && this.historyController.canUndo() && !this.state.isReadonly && !this.state.isDragging;
-    }
-    tryRedo() {
-        if (this.canRedo() && this.historyController) {
-            this.historyController.redo();
-            return true;
-        }
-        return false;
-    }
-    canRedo() {
-        return !!this.historyController && this.historyController.canRedo() && !this.state.isReadonly && !this.state.isDragging;
-    }
-    tryDelete() {
-        if (this.canDelete() && this.state.selectedStepId) {
-            this.definitionModifier.tryDelete(this.state.selectedStepId);
-            return true;
-        }
-        return false;
-    }
-    canDelete() {
-        return (!!this.state.selectedStepId &&
-            !this.state.isReadonly &&
-            !this.state.isDragging &&
-            this.definitionModifier.isDeletable(this.state.selectedStepId));
-    }
-}
-
-var KeyboardAction;
-(function (KeyboardAction) {
-    KeyboardAction["delete"] = "delete";
-})(KeyboardAction || (KeyboardAction = {}));
-var DefinitionChangeType;
-(function (DefinitionChangeType) {
-    DefinitionChangeType[DefinitionChangeType["stepNameChanged"] = 1] = "stepNameChanged";
-    DefinitionChangeType[DefinitionChangeType["stepPropertyChanged"] = 2] = "stepPropertyChanged";
-    DefinitionChangeType[DefinitionChangeType["stepChildrenChanged"] = 3] = "stepChildrenChanged";
-    DefinitionChangeType[DefinitionChangeType["stepDeleted"] = 4] = "stepDeleted";
-    DefinitionChangeType[DefinitionChangeType["stepMoved"] = 5] = "stepMoved";
-    DefinitionChangeType[DefinitionChangeType["stepInserted"] = 6] = "stepInserted";
-    DefinitionChangeType[DefinitionChangeType["rootPropertyChanged"] = 7] = "rootPropertyChanged";
-    DefinitionChangeType[DefinitionChangeType["rootReplaced"] = 8] = "rootReplaced";
-})(DefinitionChangeType || (DefinitionChangeType = {}));
-
 class Dom {
     static svg(name, attributes) {
         const element = document.createElementNS('http://www.w3.org/2000/svg', name);
@@ -218,6 +130,11 @@ class Uid {
 class SimpleEvent {
     constructor() {
         this.listeners = [];
+        this.forward = (value) => {
+            if (this.listeners.length > 0) {
+                this.listeners.forEach(listener => listener(value));
+            }
+        };
     }
     subscribe(listener) {
         this.listeners.push(listener);
@@ -231,14 +148,18 @@ class SimpleEvent {
             throw new Error('Unknown listener');
         }
     }
-    forward(value) {
-        if (this.listeners.length > 0) {
-            this.listeners.forEach(listener => listener(value));
-        }
-    }
     count() {
         return this.listeners.length;
     }
+    first() {
+        return new Promise(resolve => {
+            const handler = (value) => {
+                this.unsubscribe(handler);
+                resolve(value);
+            };
+            this.subscribe(handler);
+        });
+    }
 }
 
 function race(timeout, a, b, c) {
@@ -271,6 +192,99 @@ function race(timeout, a, b, c) {
     return result;
 }
 
+class ControlBarApi {
+    static create(state, historyController, definitionModifier, viewportApi) {
+        const api = new ControlBarApi(state, historyController, definitionModifier, viewportApi);
+        state.onIsReadonlyChanged.subscribe(api.onStateChanged.forward);
+        state.onSelectedStepIdChanged.subscribe(api.onStateChanged.forward);
+        state.onIsDragDisabledChanged.subscribe(api.onStateChanged.forward);
+        if (api.isUndoRedoSupported()) {
+            state.onDefinitionChanged.subscribe(api.onStateChanged.forward);
+        }
+        return api;
+    }
+    constructor(state, historyController, definitionModifier, viewportApi) {
+        this.state = state;
+        this.historyController = historyController;
+        this.definitionModifier = definitionModifier;
+        this.viewportApi = viewportApi;
+        this.onStateChanged = new SimpleEvent();
+    }
+    /**
+     * @deprecated Don't use this method
+     */
+    subscribe(handler) {
+        this.onStateChanged.subscribe(handler);
+    }
+    resetViewport() {
+        this.viewportApi.resetViewport();
+    }
+    zoomIn() {
+        this.viewportApi.zoom(true);
+    }
+    zoomOut() {
+        this.viewportApi.zoom(false);
+    }
+    isDragDisabled() {
+        return this.state.isDragDisabled;
+    }
+    toggleIsDragDisabled() {
+        this.state.toggleIsDragDisabled();
+    }
+    isUndoRedoSupported() {
+        return !!this.historyController;
+    }
+    tryUndo() {
+        if (this.canUndo() && this.historyController) {
+            this.historyController.undo();
+            return true;
+        }
+        return false;
+    }
+    canUndo() {
+        return !!this.historyController && this.historyController.canUndo() && !this.state.isReadonly && !this.state.isDragging;
+    }
+    tryRedo() {
+        if (this.canRedo() && this.historyController) {
+            this.historyController.redo();
+            return true;
+        }
+        return false;
+    }
+    canRedo() {
+        return !!this.historyController && this.historyController.canRedo() && !this.state.isReadonly && !this.state.isDragging;
+    }
+    tryDelete() {
+        if (this.canDelete() && this.state.selectedStepId) {
+            this.definitionModifier.tryDelete(this.state.selectedStepId);
+            return true;
+        }
+        return false;
+    }
+    canDelete() {
+        return (!!this.state.selectedStepId &&
+            !this.state.isReadonly &&
+            !this.state.isDragging &&
+            this.definitionModifier.isDeletable(this.state.selectedStepId));
+    }
+}
+
+var KeyboardAction;
+(function (KeyboardAction) {
+    KeyboardAction["delete"] = "delete";
+})(KeyboardAction || (KeyboardAction = {}));
+var DefinitionChangeType;
+(function (DefinitionChangeType) {
+    DefinitionChangeType[DefinitionChangeType["stepNameChanged"] = 1] = "stepNameChanged";
+    DefinitionChangeType[DefinitionChangeType["stepPropertyChanged"] = 2] = "stepPropertyChanged";
+    DefinitionChangeType[DefinitionChangeType["stepChildrenChanged"] = 3] = "stepChildrenChanged";
+    DefinitionChangeType[DefinitionChangeType["stepDeleted"] = 4] = "stepDeleted";
+    DefinitionChangeType[DefinitionChangeType["stepMoved"] = 5] = "stepMoved";
+    DefinitionChangeType[DefinitionChangeType["stepInserted"] = 6] = "stepInserted";
+    DefinitionChangeType[DefinitionChangeType["rootPropertyChanged"] = 7] = "rootPropertyChanged";
+    DefinitionChangeType[DefinitionChangeType["rootReplaced"] = 8] = "rootReplaced";
+})(DefinitionChangeType || (DefinitionChangeType = {}));
+
 class EditorRenderer {
     static create(state, definitionWalker, handler) {
         const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged, state.onIsReadonlyChanged);
@@ -371,13 +385,13 @@ class PathBarApi {
     constructor(state, definitionWalker) {
         this.state = state;
         this.definitionWalker = definitionWalker;
+        this.onStateChanged = race(0, this.state.onFolderPathChanged, this.state.onDefinitionChanged);
     }
     /**
      * @deprecated Don't use this method
      */
     subscribe(handler) {
-        // TODO: this should be refactored
-        race(0, this.state.onFolderPathChanged, this.state.onDefinitionChanged).subscribe(handler);
+        this.onStateChanged.subscribe(handler);
     }
     setFolderPath(path) {
         this.state.setFolderPath(path);
@@ -697,7 +711,7 @@ class DesignerApi {
         const viewportController = context.services.viewportController.create(workspace);
         const viewport = new ViewportApi(context.workspaceController, viewportController);
         const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.configuration.toolbox);
-        return new DesignerApi(new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.definitionModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker));
+        return new DesignerApi(ControlBarApi.create(context.state, context.historyController, context.definitionModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.definitionModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker));
     }
     constructor(controlBar, toolbox, editor, workspace, viewport, pathBar) {
         this.controlBar = controlBar;
@@ -2257,11 +2271,11 @@ class HistoryController {
         };
         const controller = new HistoryController(stack, state, definitionModifier, configuration.undoStackSize);
         if (!initialStack) {
-            controller.remember(DefinitionChangeType.rootReplaced, null);
+            controller.rememberCurrent(DefinitionChangeType.rootReplaced, null);
         }
         state.onDefinitionChanged.subscribe(event => {
             if (event.changeType !== DefinitionChangeType.rootReplaced) {
-                controller.remember(event.changeType, event.stepId);
+                controller.rememberCurrent(event.changeType, event.stepId);
             }
         });
         return controller;
@@ -2289,8 +2303,18 @@ class HistoryController {
     dump() {
         return Object.assign({}, this.stack);
     }
-    remember(changeType, stepId) {
-        const definition = ObjectCloner.deepClone(this.state.definition);
+    replaceDefinition(definition) {
+        if (definition == this.state.definition) {
+            throw new Error('Cannot use the same instance of definition');
+        }
+        this.remember(definition, DefinitionChangeType.rootReplaced, null);
+        this.commit();
+    }
+    rememberCurrent(changeType, stepId) {
+        this.remember(this.state.definition, changeType, stepId);
+    }
+    remember(sourceDefinition, changeType, stepId) {
+        const definition = ObjectCloner.deepClone(sourceDefinition);
         if (this.stack.items.length > 0 && this.stack.index === this.stack.items.length) {
             const lastItem = this.stack.items[this.stack.items.length - 1];
             if (areItemsEqual(lastItem, changeType, stepId)) {
@@ -2315,7 +2339,7 @@ class HistoryController {
     }
 }
 function areItemsEqual(item, changeType, stepId) {
-    return item.changeType === changeType && item.stepId === stepId;
+    return changeType !== DefinitionChangeType.rootReplaced && item.changeType === changeType && item.stepId === stepId;
 }
 
 class LayoutController {
@@ -2406,6 +2430,31 @@ class DesignerContext {
     }
 }
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 function isElementAttached(element) {
     return !(document.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
 }
@@ -2860,7 +2909,6 @@ class Workspace {
         setTimeout(() => {
             workspace.updateRootComponent();
             api.viewport.resetViewport();
-            workspace.onReady.forward();
         });
         designerContext.setWorkspaceController(workspace);
         designerContext.state.onViewportChanged.subscribe(vp => workspace.onViewportChanged(vp));
@@ -2883,7 +2931,7 @@ class Workspace {
         this.clickBehaviorResolver = clickBehaviorResolver;
         this.viewportApi = viewportApi;
         this.services = services;
-        this.onReady = new SimpleEvent();
+        this.onRendered = new SimpleEvent();
         this.isValid = false;
         this.selectedStepComponent = null;
         this.validationErrorBadgeIndex = null;
@@ -2912,6 +2960,7 @@ class Workspace {
         this.view.render(sequence, parentSequencePlaceIndicator);
         this.trySelectStepComponent(this.state.selectedStepId);
         this.updateBadges();
+        this.onRendered.forward();
     }
     updateBadges() {
         const result = BadgesResultFactory.create(this.services);
@@ -3207,7 +3256,7 @@ class ControlBar {
         view.bindZoomOutButtonClick(() => bar.onZoomOutButtonClicked());
         view.bindDisableDragButtonClick(() => bar.onMoveButtonClicked());
         view.bindDeleteButtonClick(() => bar.onDeleteButtonClicked());
-        api.controlBar.subscribe(() => bar.refreshButtons());
+        api.controlBar.onStateChanged.subscribe(() => bar.refreshButtons());
         if (isUndoRedoSupported) {
             view.bindUndoButtonClick(() => bar.onUndoButtonClicked());
             view.bindRedoButtonClick(() => bar.onRedoButtonClicked());
@@ -4162,7 +4211,7 @@ class Designer {
         const designerApi = DesignerApi.create(designerContext);
         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());
+        view.workspace.onRendered.first().then(designer.onReady.forward);
         race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
             if (definition !== undefined) {
                 designer.onDefinitionChanged.forward(designerContext.state.definition);
@@ -4171,15 +4220,9 @@ class Designer {
                 designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
             }
         });
-        designerContext.state.onViewportChanged.subscribe(viewPort => {
-            designer.onViewportChanged.forward(viewPort);
-        });
-        designerContext.state.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
-            designer.onIsToolboxCollapsedChanged.forward(isCollapsed);
-        });
-        designerContext.state.onIsEditorCollapsedChanged.subscribe(isCollapsed => {
-            designer.onIsEditorCollapsedChanged.forward(isCollapsed);
-        });
+        designerContext.state.onViewportChanged.subscribe(designer.onViewportChanged.forward);
+        designerContext.state.onIsToolboxCollapsedChanged.subscribe(designer.onIsToolboxCollapsedChanged.forward);
+        designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.forward);
         return designer;
     }
     constructor(view, state, walker, historyController, api) {
@@ -4320,10 +4363,20 @@ class Designer {
      * @description Dump the undo stack.
      */
     dumpUndoStack() {
-        if (!this.historyController) {
-            throw new Error('Undo feature is not activated');
-        }
-        return this.historyController.dump();
+        return this.getHistoryController().dump();
+    }
+    /**
+     * Replaces the current definition with a new one and adds the previous definition to the undo stack.
+     * @param definition A new definition.
+     */
+    replaceDefinition(definition) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.getHistoryController().replaceDefinition(definition);
+            yield Promise.all([
+                this.view.workspace.onRendered.first(),
+                this.onDefinitionChanged.first()
+            ]);
+        });
     }
     /**
      * @param needle A step, a sequence or a step id.
@@ -4344,6 +4397,12 @@ class Designer {
     destroy() {
         this.view.destroy();
     }
+    getHistoryController() {
+        if (!this.historyController) {
+            throw new Error('Undo feature is not activated');
+        }
+        return this.historyController;
+    }
 }
 
 class LineGridDesignerExtension {

package/lib/index.d.ts

@@ -1,6 +1,73 @@
 import { Step, BranchedStep, SequentialStep, Definition, Sequence, ComponentType, DefinitionWalker, StepOrName } from 'sequential-workflow-model';
 export * from 'sequential-workflow-model';
 
+declare class Icons {
+    static folderIn: string;
+    static folderOut: string;
+    static center: string;
+    static zoomIn: string;
+    static zoomOut: string;
+    static undo: string;
+    static redo: string;
+    static move: string;
+    static delete: string;
+    static folderUp: string;
+    static close: string;
+    static options: string;
+    static expand: string;
+    static alert: string;
+    static play: string;
+    static stop: string;
+    static folder: string;
+    static appendPath(parent: SVGElement, pathClassName: string, d: string, size: number): SVGGElement;
+    static createSvg(className: string, d: string): SVGElement;
+}
+
+declare class ObjectCloner {
+    static deepClone<T>(instance: T): T;
+}
+
+interface Attributes {
+    [name: string]: string | number;
+}
+declare class Dom {
+    static svg<K extends keyof SVGElementTagNameMap>(name: K, attributes?: Attributes): SVGElementTagNameMap[K];
+    static translate(element: SVGElement, x: number, y: number): void;
+    static attrs(element: Element, attributes: Attributes): void;
+    static element<T extends keyof HTMLElementTagNameMap>(name: T, attributes?: Attributes): HTMLElementTagNameMap[T];
+    static toggleClass(element: Element, isEnabled: boolean, className: string): void;
+}
+
+declare class Vector {
+    readonly x: number;
+    readonly y: number;
+    constructor(x: number, y: number);
+    add(v: Vector): Vector;
+    subtract(v: Vector): Vector;
+    multiplyByScalar(s: number): Vector;
+    divideByScalar(s: number): Vector;
+    round(): Vector;
+    distance(): number;
+}
+
+declare function getAbsolutePosition(element: Element): Vector;
+
+declare class Uid {
+    static next(): string;
+}
+
+declare class SimpleEvent<T> {
+    private readonly listeners;
+    subscribe(listener: SimpleEventListener<T>): void;
+    unsubscribe(listener: SimpleEventListener<T>): void;
+    readonly forward: (value: T) => void;
+    count(): number;
+    first(): Promise<T>;
+}
+type SimpleEventListener<T> = (value: T) => void;
+
+declare function race<A, B, C>(timeout: number, a: SimpleEvent<A>, b: SimpleEvent<B>, c?: SimpleEvent<C>): SimpleEvent<[A?, B?, C?]>;
+
 /**
  * @deprecated Use {@link Step} instead.
  */
@@ -20,18 +87,6 @@ interface ContainerStep extends SequentialStep {
     componentType: 'container';
 }
 
-declare class Vector {
-    readonly x: number;
-    readonly y: number;
-    constructor(x: number, y: number);
-    add(v: Vector): Vector;
-    subtract(v: Vector): Vector;
-    multiplyByScalar(s: number): Vector;
-    divideByScalar(s: number): Vector;
-    round(): Vector;
-    distance(): number;
-}
-
 interface Behavior {
     onStart(position: Vector): void;
     onMove(delta: Vector): Behavior | void;
@@ -50,15 +105,6 @@ declare class BehaviorController {
     private stop;
 }
 
-declare class SimpleEvent<T> {
-    private readonly listeners;
-    subscribe(listener: SimpleEventListener<T>): void;
-    unsubscribe(listener: SimpleEventListener<T>): void;
-    forward(value: T): void;
-    count(): number;
-}
-type SimpleEventListener<T> = (value: T) => void;
-
 interface DefinitionChangedEvent {
     changeType: DefinitionChangeType;
     stepId: string | null;
@@ -262,6 +308,8 @@ declare class HistoryController {
     canRedo(): boolean;
     redo(): void;
     dump(): UndoStack;
+    replaceDefinition(definition: Definition): void;
+    private rememberCurrent;
     private remember;
     private commit;
 }
@@ -272,51 +320,6 @@ declare class LayoutController {
     isMobile(): boolean;
 }
 
-declare class Icons {
-    static folderIn: string;
-    static folderOut: string;
-    static center: string;
-    static zoomIn: string;
-    static zoomOut: string;
-    static undo: string;
-    static redo: string;
-    static move: string;
-    static delete: string;
-    static folderUp: string;
-    static close: string;
-    static options: string;
-    static expand: string;
-    static alert: string;
-    static play: string;
-    static stop: string;
-    static folder: string;
-    static appendPath(parent: SVGElement, pathClassName: string, d: string, size: number): SVGGElement;
-    static createSvg(className: string, d: string): SVGElement;
-}
-
-declare class ObjectCloner {
-    static deepClone<T>(instance: T): T;
-}
-
-interface Attributes {
-    [name: string]: string | number;
-}
-declare class Dom {
-    static svg<K extends keyof SVGElementTagNameMap>(name: K, attributes?: Attributes): SVGElementTagNameMap[K];
-    static translate(element: SVGElement, x: number, y: number): void;
-    static attrs(element: Element, attributes: Attributes): void;
-    static element<T extends keyof HTMLElementTagNameMap>(name: T, attributes?: Attributes): HTMLElementTagNameMap[T];
-    static toggleClass(element: Element, isEnabled: boolean, className: string): void;
-}
-
-declare function getAbsolutePosition(element: Element): Vector;
-
-declare class Uid {
-    static next(): string;
-}
-
-declare function race<A, B, C>(timeout: number, a: SimpleEvent<A>, b: SimpleEvent<B>, c?: SimpleEvent<C>): SimpleEvent<[A?, B?, C?]>;
-
 interface WorkspaceController {
     getPlaceholders(): Placeholder[];
     getComponentByStepId(stepId: string): StepComponent;
@@ -392,6 +395,7 @@ declare class PathBarApi {
     private readonly state;
     private readonly definitionWalker;
     constructor(state: DesignerState, definitionWalker: DefinitionWalker);
+    readonly onStateChanged: SimpleEvent<[(string[] | undefined)?, (DefinitionChangedEvent | undefined)?, unknown?]>;
     /**
      * @deprecated Don't use this method
      */
@@ -1001,7 +1005,9 @@ declare class ControlBarApi {
     private readonly historyController;
     private readonly definitionModifier;
     private readonly viewportApi;
-    constructor(state: DesignerState, historyController: HistoryController | undefined, definitionModifier: DefinitionModifier, viewportApi: ViewportApi);
+    static create(state: DesignerState, historyController: HistoryController | undefined, definitionModifier: DefinitionModifier, viewportApi: ViewportApi): ControlBarApi;
+    private constructor();
+    readonly onStateChanged: SimpleEvent<unknown>;
     /**
      * @deprecated Don't use this method
      */
@@ -1140,6 +1146,11 @@ declare class Designer<TDefinition extends Definition = Definition> {
      * @description Dump the undo stack.
      */
     dumpUndoStack(): UndoStack;
+    /**
+     * Replaces the current definition with a new one and adds the previous definition to the undo stack.
+     * @param definition A new definition.
+     */
+    replaceDefinition(definition: TDefinition): Promise<void>;
     /**
      * @param needle A step, a sequence or a step id.
      * @returns parent steps and branch names.
@@ -1153,6 +1164,7 @@ declare class Designer<TDefinition extends Definition = Definition> {
      * @description Destroys the designer and deletes all nodes from the placeholder.
      */
     destroy(): void;
+    private getHistoryController;
 }
 
 declare class LineGrid implements Grid {

package/package.json

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

package/sass/designer.scss

@@ -33,6 +33,7 @@
 	z-index: 20;
 	box-sizing: border-box;
 	width: 130px;
+	-webkit-user-select: none;
 	user-select: none;
 }
 .sqd-toolbox-header {
@@ -222,6 +223,7 @@
 	flex: 1;
 	position: relative;
 	display: block;
+	-webkit-user-select: none;
 	user-select: none;
 }
 .sqd-workspace-canvas {