npm - sequential-workflow-designer - Versions diffs - 0.16.3 → 0.16.5 - Mend

sequential-workflow-designer 0.16.3 → 0.16.5

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

@@ -27,12 +27,12 @@ Features:
 * [🔴 Particles](https://nocode-js.github.io/sequential-workflow-designer/examples/particles.html)
 * [⛅ Light Dark](https://nocode-js.github.io/sequential-workflow-designer/examples/light-dark.html)
 * [🤖 Code Generator](https://nocode-js.github.io/sequential-workflow-designer/examples/code-generator.html)
-* [📐 Simple Flow](https://nocode-js.github.io/sequential-workflow-designer/examples/simple-flow.html)
 * [🌻 Rendering Test](https://nocode-js.github.io/sequential-workflow-designer/examples/rendering-test.html)
 * [🚄 Stress Test](https://nocode-js.github.io/sequential-workflow-designer/examples/stress-test.html)
 * [🚪 Editing Restrictions](https://nocode-js.github.io/sequential-workflow-designer/examples/editing-restrictions.html)
 * [📜 Scrollable Page](https://nocode-js.github.io/sequential-workflow-designer/examples/scrollable-page.html)
 * [🌵 Multi-Conditional Switch](https://nocode-js.github.io/sequential-workflow-designer/examples/multi-conditional-switch.html)
+* [🌀 Auto-Select](https://nocode-js.github.io/sequential-workflow-designer/examples/auto-select.html)
 * [React Demo](https://nocode-js.github.io/sequential-workflow-designer/react-app/)
 * [Angular Demo](https://nocode-js.github.io/sequential-workflow-designer/angular-app/)
@@ -95,10 +95,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.3/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.3/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.3/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.3/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.5/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.5/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.5/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.5/dist/index.umd.js"></script>
 ```
 Call the designer by:

package/dist/index.umd.js CHANGED Viewed

@@ -76,57 +76,6 @@
 	    }
 	}
-	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";
@@ -137,88 +86,7 @@
 	    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) {
@@ -308,6 +176,31 @@
 	    }
 	}
+	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);
@@ -316,6 +209,32 @@
 	    }
 	}
+	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();
@@ -1093,7 +1012,7 @@
 	        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);
@@ -2357,7 +2276,9 @@
 	        }
 	        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) {
@@ -2376,7 +2297,9 @@
 	        }
 	        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) {
@@ -2417,13 +2340,101 @@
 	    }
 	}
+	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);
@@ -2431,49 +2442,51 @@
 	        });
 	        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);
 	    }
 	}
@@ -2546,7 +2559,7 @@
 	        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);
@@ -2574,6 +2587,9 @@
 	}
 	let lastGridPatternId = 0;
+	const listenerOptions$1 = {
+	    passive: false
+	};
 	class WorkspaceView {
 	    static create(parent, componentContext) {
 	        const patternId = 'sqd-grid-pattern-' + lastGridPatternId++;
@@ -2654,7 +2670,7 @@
 	                const position = readTouchPosition(e);
 	                handler(position, element, 0);
 	            }
-	        }, { passive: false });
+	        }, listenerOptions$1);
 	    }
 	    bindContextMenu(handler) {
 	        this.canvas.addEventListener('contextmenu', e => {
@@ -2663,7 +2679,7 @@
 	        }, false);
 	    }
 	    bindWheel(handler) {
-	        this.canvas.addEventListener('wheel', handler, false);
+	        this.canvas.addEventListener('wheel', handler, listenerOptions$1);
 	    }
 	    destroy() {
 	        window.removeEventListener('resize', this.onResizeHandler, false);
@@ -3562,7 +3578,7 @@
 	        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;
@@ -3626,6 +3642,7 @@
 	        };
 	    }
 	    onWheel(e) {
+	        e.preventDefault();
 	        e.stopPropagation();
 	        if (this.content) {
 	            const delta = e.deltaY > 0 ? -25 : 25;
@@ -4297,24 +4314,25 @@
 	        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.
@@ -4427,6 +4445,15 @@
 	    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.