sequential-workflow-designer 0.18.3 → 0.18.5

package/lib/cjs/index.cjs

@@ -2,94 +2,6 @@
 
 var sequentialWorkflowModel = require('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));
-    }
-}
-
-exports.KeyboardAction = void 0;
-(function (KeyboardAction) {
-    KeyboardAction["delete"] = "delete";
-})(exports.KeyboardAction || (exports.KeyboardAction = {}));
-exports.DefinitionChangeType = void 0;
-(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";
-})(exports.DefinitionChangeType || (exports.DefinitionChangeType = {}));
-
 class Dom {
     static svg(name, attributes) {
         const element = document.createElementNS('http://www.w3.org/2000/svg', name);
@@ -219,6 +131,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);
@@ -232,14 +149,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) {
@@ -272,6 +193,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));
+    }
+}
+
+exports.KeyboardAction = void 0;
+(function (KeyboardAction) {
+    KeyboardAction["delete"] = "delete";
+})(exports.KeyboardAction || (exports.KeyboardAction = {}));
+exports.DefinitionChangeType = void 0;
+(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";
+})(exports.DefinitionChangeType || (exports.DefinitionChangeType = {}));
+
 class EditorRenderer {
     static create(state, definitionWalker, handler) {
         const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged, state.onIsReadonlyChanged);
@@ -372,13 +386,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);
@@ -698,7 +712,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;
@@ -2258,11 +2272,11 @@ class HistoryController {
         };
         const controller = new HistoryController(stack, state, definitionModifier, configuration.undoStackSize);
         if (!initialStack) {
-            controller.remember(exports.DefinitionChangeType.rootReplaced, null);
+            controller.rememberCurrent(exports.DefinitionChangeType.rootReplaced, null);
         }
         state.onDefinitionChanged.subscribe(event => {
             if (event.changeType !== exports.DefinitionChangeType.rootReplaced) {
-                controller.remember(event.changeType, event.stepId);
+                controller.rememberCurrent(event.changeType, event.stepId);
             }
         });
         return controller;
@@ -2290,8 +2304,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, exports.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)) {
@@ -2316,7 +2340,7 @@ class HistoryController {
     }
 }
 function areItemsEqual(item, changeType, stepId) {
-    return item.changeType === changeType && item.stepId === stepId;
+    return changeType !== exports.DefinitionChangeType.rootReplaced && item.changeType === changeType && item.stepId === stepId;
 }
 
 class LayoutController {
@@ -2407,6 +2431,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);
 }
@@ -2861,7 +2910,6 @@ class Workspace {
         setTimeout(() => {
             workspace.updateRootComponent();
             api.viewport.resetViewport();
-            workspace.onReady.forward();
         });
         designerContext.setWorkspaceController(workspace);
         designerContext.state.onViewportChanged.subscribe(vp => workspace.onViewportChanged(vp));
@@ -2884,7 +2932,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;
@@ -2913,6 +2961,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);
@@ -3208,7 +3257,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());
@@ -4163,7 +4212,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);
@@ -4172,15 +4221,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) {
@@ -4321,10 +4364,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.
@@ -4345,6 +4398,12 @@ class Designer {
     destroy() {
         this.view.destroy();
     }
+    getHistoryController() {
+        if (!this.historyController) {
+            throw new Error('Undo feature is not activated');
+        }
+        return this.historyController;
+    }
 }
 
 class LineGridDesignerExtension {