sequential-workflow-designer 0.16.3 → 0.16.5

package/lib/cjs/index.cjs

@@ -74,57 +74,6 @@ class ControlBarApi {
     }
 }
 
-class SimpleEvent {
-    constructor() {
-        this.listeners = [];
-    }
-    subscribe(listener) {
-        this.listeners.push(listener);
-    }
-    unsubscribe(listener) {
-        const index = this.listeners.indexOf(listener);
-        if (index >= 0) {
-            this.listeners.splice(index, 1);
-        }
-        else {
-            throw new Error('Unknown listener');
-        }
-    }
-    forward(value) {
-        if (this.listeners.length > 0) {
-            this.listeners.forEach(listener => listener(value));
-        }
-    }
-    count() {
-        return this.listeners.length;
-    }
-}
-
-class Vector {
-    constructor(x, y) {
-        this.x = x;
-        this.y = y;
-    }
-    add(v) {
-        return new Vector(this.x + v.x, this.y + v.y);
-    }
-    subtract(v) {
-        return new Vector(this.x - v.x, this.y - v.y);
-    }
-    multiplyByScalar(s) {
-        return new Vector(this.x * s, this.y * s);
-    }
-    divideByScalar(s) {
-        return new Vector(this.x / s, this.y / s);
-    }
-    round() {
-        return new Vector(Math.round(this.x), Math.round(this.y));
-    }
-    distance() {
-        return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
-    }
-}
-
 exports.DefinitionChangeType = void 0;
 (function (DefinitionChangeType) {
     DefinitionChangeType[DefinitionChangeType["stepNameChanged"] = 1] = "stepNameChanged";
@@ -135,88 +84,7 @@ exports.DefinitionChangeType = void 0;
     DefinitionChangeType[DefinitionChangeType["stepInserted"] = 6] = "stepInserted";
     DefinitionChangeType[DefinitionChangeType["globalPropertyChanged"] = 7] = "globalPropertyChanged";
     DefinitionChangeType[DefinitionChangeType["rootReplaced"] = 8] = "rootReplaced";
-})(exports.DefinitionChangeType || (exports.DefinitionChangeType = {}));
-class DesignerState {
-    constructor(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed) {
-        this.definition = definition;
-        this.isReadonly = isReadonly;
-        this.isToolboxCollapsed = isToolboxCollapsed;
-        this.isEditorCollapsed = isEditorCollapsed;
-        this.onViewportChanged = new SimpleEvent();
-        this.onSelectedStepIdChanged = new SimpleEvent();
-        this.onFolderPathChanged = new SimpleEvent();
-        this.onIsReadonlyChanged = new SimpleEvent();
-        this.onIsDraggingChanged = new SimpleEvent();
-        this.onIsDragDisabledChanged = new SimpleEvent();
-        this.onDefinitionChanged = new SimpleEvent();
-        this.onIsToolboxCollapsedChanged = new SimpleEvent();
-        this.onIsEditorCollapsedChanged = new SimpleEvent();
-        this.viewport = {
-            position: new Vector(0, 0),
-            scale: 1
-        };
-        this.selectedStepId = null;
-        this.folderPath = [];
-        this.isDragging = false;
-        this.isDragDisabled = false;
-    }
-    setSelectedStepId(stepId) {
-        if (this.selectedStepId !== stepId) {
-            this.selectedStepId = stepId;
-            this.onSelectedStepIdChanged.forward(stepId);
-        }
-    }
-    pushStepIdToFolderPath(stepId) {
-        this.folderPath.push(stepId);
-        this.onFolderPathChanged.forward(this.folderPath);
-    }
-    setFolderPath(path) {
-        this.folderPath = path;
-        this.onFolderPathChanged.forward(path);
-    }
-    tryGetLastStepIdFromFolderPath() {
-        return this.folderPath.length > 0 ? this.folderPath[this.folderPath.length - 1] : null;
-    }
-    setDefinition(definition) {
-        this.definition = definition;
-        this.notifyDefinitionChanged(exports.DefinitionChangeType.rootReplaced, null);
-    }
-    notifyDefinitionChanged(changeType, stepId) {
-        this.onDefinitionChanged.forward({ changeType, stepId });
-    }
-    setViewport(viewport) {
-        this.viewport = viewport;
-        this.onViewportChanged.forward(viewport);
-    }
-    setIsReadonly(isReadonly) {
-        if (this.isReadonly !== isReadonly) {
-            this.isReadonly = isReadonly;
-            this.onIsReadonlyChanged.forward(isReadonly);
-        }
-    }
-    setIsDragging(isDragging) {
-        if (this.isDragging !== isDragging) {
-            this.isDragging = isDragging;
-            this.onIsDraggingChanged.forward(isDragging);
-        }
-    }
-    toggleIsDragDisabled() {
-        this.isDragDisabled = !this.isDragDisabled;
-        this.onIsDragDisabledChanged.forward(this.isDragDisabled);
-    }
-    setIsToolboxCollapsed(isCollapsed) {
-        if (this.isToolboxCollapsed !== isCollapsed) {
-            this.isToolboxCollapsed = isCollapsed;
-            this.onIsToolboxCollapsedChanged.forward(isCollapsed);
-        }
-    }
-    setIsEditorCollapsed(isCollapsed) {
-        if (this.isEditorCollapsed !== isCollapsed) {
-            this.isEditorCollapsed = isCollapsed;
-            this.onIsEditorCollapsedChanged.forward(isCollapsed);
-        }
-    }
-}
+})(exports.DefinitionChangeType || (exports.DefinitionChangeType = {}));
 
 class Dom {
     static svg(name, attributes) {
@@ -306,6 +174,31 @@ class ObjectCloner {
     }
 }
 
+class Vector {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+    add(v) {
+        return new Vector(this.x + v.x, this.y + v.y);
+    }
+    subtract(v) {
+        return new Vector(this.x - v.x, this.y - v.y);
+    }
+    multiplyByScalar(s) {
+        return new Vector(this.x * s, this.y * s);
+    }
+    divideByScalar(s) {
+        return new Vector(this.x / s, this.y / s);
+    }
+    round() {
+        return new Vector(Math.round(this.x), Math.round(this.y));
+    }
+    distance() {
+        return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
+    }
+}
+
 class Uid {
     static next() {
         const bytes = new Uint8Array(16);
@@ -314,6 +207,32 @@ class Uid {
     }
 }
 
+class SimpleEvent {
+    constructor() {
+        this.listeners = [];
+    }
+    subscribe(listener) {
+        this.listeners.push(listener);
+    }
+    unsubscribe(listener) {
+        const index = this.listeners.indexOf(listener);
+        if (index >= 0) {
+            this.listeners.splice(index, 1);
+        }
+        else {
+            throw new Error('Unknown listener');
+        }
+    }
+    forward(value) {
+        if (this.listeners.length > 0) {
+            this.listeners.forEach(listener => listener(value));
+        }
+    }
+    count() {
+        return this.listeners.length;
+    }
+}
+
 function race(timeout, a, b, c) {
     const value = [undefined, undefined, undefined];
     const result = new SimpleEvent();
@@ -1091,7 +1010,7 @@ class ValidationErrorBadgeView {
         Dom.translate(circle, halfOfSize, halfOfSize);
         g.appendChild(circle);
         const icon = Icons.appendPath(g, 'sqd-validation-error-icon-path', Icons.alert, cfg.iconSize);
-        const offsetX = (cfg.size - cfg.iconSize) * 0.5;
+        const offsetX = (cfg.size - cfg.iconSize) / 2;
         const offsetY = offsetX * 1.5;
         Dom.translate(icon, offsetX, offsetY);
         parent.appendChild(g);
@@ -2172,7 +2091,9 @@ class DefinitionModifier {
         }
         SequenceModifier.insertStep(step, targetSequence, targetIndex);
         this.state.notifyDefinitionChanged(exports.DefinitionChangeType.stepInserted, step.id);
-        this.state.setSelectedStepId(step.id);
+        if (!this.configuration.steps.isAutoSelectDisabled) {
+            this.state.setSelectedStepId(step.id);
+        }
         return true;
     }
     isDraggable(step, parentSequence) {
@@ -2191,7 +2112,9 @@ class DefinitionModifier {
         }
         apply();
         this.state.notifyDefinitionChanged(exports.DefinitionChangeType.stepMoved, step.id);
-        this.state.setSelectedStepId(step.id);
+        if (!this.configuration.steps.isAutoSelectDisabled) {
+            this.state.setSelectedStepId(step.id);
+        }
         return true;
     }
     isDuplicable(step, parentSequence) {
@@ -2232,13 +2155,101 @@ class DefinitionModifier {
     }
 }
 
+class DesignerState {
+    constructor(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed) {
+        this.definition = definition;
+        this.isReadonly = isReadonly;
+        this.isToolboxCollapsed = isToolboxCollapsed;
+        this.isEditorCollapsed = isEditorCollapsed;
+        this.onViewportChanged = new SimpleEvent();
+        this.onSelectedStepIdChanged = new SimpleEvent();
+        this.onFolderPathChanged = new SimpleEvent();
+        this.onIsReadonlyChanged = new SimpleEvent();
+        this.onIsDraggingChanged = new SimpleEvent();
+        this.onIsDragDisabledChanged = new SimpleEvent();
+        this.onDefinitionChanged = new SimpleEvent();
+        this.onIsToolboxCollapsedChanged = new SimpleEvent();
+        this.onIsEditorCollapsedChanged = new SimpleEvent();
+        this.viewport = {
+            position: new Vector(0, 0),
+            scale: 1
+        };
+        this.selectedStepId = null;
+        this.folderPath = [];
+        this.isDragging = false;
+        this.isDragDisabled = false;
+    }
+    setSelectedStepId(stepId) {
+        if (this.selectedStepId !== stepId) {
+            this.selectedStepId = stepId;
+            this.onSelectedStepIdChanged.forward(stepId);
+        }
+    }
+    pushStepIdToFolderPath(stepId) {
+        this.folderPath.push(stepId);
+        this.onFolderPathChanged.forward(this.folderPath);
+    }
+    setFolderPath(path) {
+        this.folderPath = path;
+        this.onFolderPathChanged.forward(path);
+    }
+    tryGetLastStepIdFromFolderPath() {
+        return this.folderPath.length > 0 ? this.folderPath[this.folderPath.length - 1] : null;
+    }
+    setDefinition(definition) {
+        this.definition = definition;
+        this.notifyDefinitionChanged(exports.DefinitionChangeType.rootReplaced, null);
+    }
+    notifyDefinitionChanged(changeType, stepId) {
+        this.onDefinitionChanged.forward({ changeType, stepId });
+    }
+    setViewport(viewport) {
+        this.viewport = viewport;
+        this.onViewportChanged.forward(viewport);
+    }
+    setIsReadonly(isReadonly) {
+        if (this.isReadonly !== isReadonly) {
+            this.isReadonly = isReadonly;
+            this.onIsReadonlyChanged.forward(isReadonly);
+        }
+    }
+    setIsDragging(isDragging) {
+        if (this.isDragging !== isDragging) {
+            this.isDragging = isDragging;
+            this.onIsDraggingChanged.forward(isDragging);
+        }
+    }
+    toggleIsDragDisabled() {
+        this.isDragDisabled = !this.isDragDisabled;
+        this.onIsDragDisabledChanged.forward(this.isDragDisabled);
+    }
+    setIsToolboxCollapsed(isCollapsed) {
+        if (this.isToolboxCollapsed !== isCollapsed) {
+            this.isToolboxCollapsed = isCollapsed;
+            this.onIsToolboxCollapsedChanged.forward(isCollapsed);
+        }
+    }
+    setIsEditorCollapsed(isCollapsed) {
+        if (this.isEditorCollapsed !== isCollapsed) {
+            this.isEditorCollapsed = isCollapsed;
+            this.onIsEditorCollapsedChanged.forward(isCollapsed);
+        }
+    }
+}
+
 class HistoryController {
-    static create(state, definitionModifier, configuration) {
+    static create(initialStack, state, definitionModifier, configuration) {
         if (!configuration.undoStackSize || configuration.undoStackSize < 1) {
             throw new Error('Invalid undo stack size');
         }
-        const controller = new HistoryController(state, definitionModifier, configuration.undoStackSize);
-        controller.remember(exports.DefinitionChangeType.rootReplaced, null);
+        const stack = initialStack || {
+            index: 0,
+            items: []
+        };
+        const controller = new HistoryController(stack, state, definitionModifier, configuration.undoStackSize);
+        if (!initialStack) {
+            controller.remember(exports.DefinitionChangeType.rootReplaced, null);
+        }
         state.onDefinitionChanged.subscribe(event => {
             if (event.changeType !== exports.DefinitionChangeType.rootReplaced) {
                 controller.remember(event.changeType, event.stepId);
@@ -2246,49 +2257,51 @@ class HistoryController {
         });
         return controller;
     }
-    constructor(state, definitionModifier, stackSize) {
+    constructor(stack, state, definitionModifier, stackSize) {
+        this.stack = stack;
         this.state = state;
         this.definitionModifier = definitionModifier;
         this.stackSize = stackSize;
-        this.stack = [];
-        this.currentIndex = 0;
     }
     canUndo() {
-        return this.currentIndex > 1;
+        return this.stack.index > 1;
     }
     undo() {
-        this.currentIndex--;
+        this.stack.index--;
         this.commit();
     }
     canRedo() {
-        return this.currentIndex < this.stack.length;
+        return this.stack.index < this.stack.items.length;
     }
     redo() {
-        this.currentIndex++;
+        this.stack.index++;
         this.commit();
     }
+    dump() {
+        return Object.assign({}, this.stack);
+    }
     remember(changeType, stepId) {
         const definition = ObjectCloner.deepClone(this.state.definition);
-        if (this.stack.length > 0 && this.currentIndex === this.stack.length) {
-            const lastItem = this.stack[this.stack.length - 1];
+        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)) {
                 lastItem.definition = definition;
                 return;
             }
         }
-        this.stack.splice(this.currentIndex);
-        this.stack.push({
+        this.stack.items.splice(this.stack.index);
+        this.stack.items.push({
             definition,
             changeType,
             stepId
         });
-        if (this.stack.length > this.stackSize) {
-            this.stack.splice(0, this.stack.length - this.stackSize - 1);
+        if (this.stack.items.length > this.stackSize) {
+            this.stack.items.splice(0, this.stack.items.length - this.stackSize - 1);
         }
-        this.currentIndex = this.stack.length;
+        this.stack.index = this.stack.items.length;
     }
     commit() {
-        const definition = ObjectCloner.deepClone(this.stack[this.currentIndex - 1].definition);
+        const definition = ObjectCloner.deepClone(this.stack.items[this.stack.index - 1].definition);
         this.definitionModifier.replaceDefinition(definition);
     }
 }
@@ -2361,7 +2374,7 @@ class DesignerContext {
         const definitionModifier = new DefinitionModifier(definitionWalker, state, configuration);
         let historyController = undefined;
         if (configuration.undoStackSize) {
-            historyController = HistoryController.create(state, definitionModifier, configuration);
+            historyController = HistoryController.create(configuration.undoStack, state, definitionModifier, configuration);
         }
         const componentContext = ComponentContext.create(configuration.steps, configuration.validator, state, stepExtensionResolver, services);
         return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, definitionModifier, layoutController, workspaceController, behaviorController, historyController);
@@ -2389,6 +2402,9 @@ function isElementAttached(element) {
 }
 
 let lastGridPatternId = 0;
+const listenerOptions$1 = {
+    passive: false
+};
 class WorkspaceView {
     static create(parent, componentContext) {
         const patternId = 'sqd-grid-pattern-' + lastGridPatternId++;
@@ -2469,7 +2485,7 @@ class WorkspaceView {
                 const position = readTouchPosition(e);
                 handler(position, element, 0);
             }
-        }, { passive: false });
+        }, listenerOptions$1);
     }
     bindContextMenu(handler) {
         this.canvas.addEventListener('contextmenu', e => {
@@ -2478,7 +2494,7 @@ class WorkspaceView {
         }, false);
     }
     bindWheel(handler) {
-        this.canvas.addEventListener('wheel', handler, false);
+        this.canvas.addEventListener('wheel', handler, listenerOptions$1);
     }
     destroy() {
         window.removeEventListener('resize', this.onResizeHandler, false);
@@ -3377,7 +3393,7 @@ class ScrollBoxView {
         parent.appendChild(root);
         const view = new ScrollBoxView(root, viewport);
         window.addEventListener('resize', view.onResize, false);
-        root.addEventListener('wheel', e => view.onWheel(e), false);
+        root.addEventListener('wheel', e => view.onWheel(e), listenerOptions);
         root.addEventListener('touchstart', e => view.onTouchStart(e), listenerOptions);
         root.addEventListener('mousedown', e => view.onMouseDown(e), false);
         return view;
@@ -3441,6 +3457,7 @@ class ScrollBoxView {
         };
     }
     onWheel(e) {
+        e.preventDefault();
         e.stopPropagation();
         if (this.content) {
             const delta = e.deltaY > 0 ? -25 : 25;
@@ -4112,24 +4129,25 @@ class Designer {
         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.definitionWalker, 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));
         });
         designerContext.state.onSelectedStepIdChanged.subscribe(() => designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId));
-        designer.state.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
+        designerContext.state.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
             designer.onIsToolboxCollapsedChanged.forward(isCollapsed);
         });
-        designer.state.onIsEditorCollapsedChanged.subscribe(isCollapsed => {
+        designerContext.state.onIsEditorCollapsedChanged.subscribe(isCollapsed => {
             designer.onIsEditorCollapsedChanged.forward(isCollapsed);
         });
         return designer;
     }
-    constructor(view, state, walker, api) {
+    constructor(view, state, walker, historyController, api) {
         this.view = view;
         this.state = state;
         this.walker = walker;
+        this.historyController = historyController;
         this.api = api;
         /**
          * @description Fires when the designer is initialized and ready to use.
@@ -4242,6 +4260,15 @@ class Designer {
     setIsEditorCollapsed(isCollapsed) {
         this.state.setIsEditorCollapsed(isCollapsed);
     }
+    /**
+     * @description Dump the undo stack.
+     */
+    dumpUndoStack() {
+        if (!this.historyController) {
+            throw new Error('Undo feature is not activated');
+        }
+        return this.historyController.dump();
+    }
     /**
      * @param needle A step, a sequence or a step id.
      * @returns parent steps and branch names.