nocode-js · b4rtaz · Oct 5, 2023 · Oct 5, 2023
diff --git a/.github/workflows/examples.yml b/.github/workflows/examples.yml
@@ -33,6 +33,11 @@ jobs:
             cp -R examples _deploy
             cp -R demos/angular-app/dist/angular-app _deploy/angular-app
             cp -R demos/react-app/build _deploy/react-app
+      - name: Append Analytics
+        run: |
+            node scripts/append-ga.cjs _deploy/examples
+            node scripts/append-ga.cjs _deploy/react-app
+            node scripts/append-ga.cjs _deploy/angular-app
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -13,13 +13,12 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [16]
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v2
-      - name: Setup Node 16
+      - name: Setup Node
         uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: '18'
       - name: main.sh
         run: bash .github/workflows/main.sh
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,32 @@
+## 0.16.4
+
+This version introduces the `isAutoSelectDisabled` option. Now it's possible to disable the auto-select feature.
+
+```js
+const configuration = {
+  steps: {
+    isAutoSelectDisabled: true,
+    // ...
+  }
+};
+```
+
+Additionally, this version introduces possibility to initialize the designer with the undo stack from the previous session.
+
+```js
+const configuration = {
+  undoStackSize: 10,
+  undoStack: myUndoStack,
+  // ...
+};
+```
+
+To read the current stack you should use the `dumpUndoStack()` method.
+
+```js
+const myUndoStack = designer.dumpUndoStack();
+```
+
 ## 0.16.3
 
 This version adds: `isReadonly`, `selectedStepId`, `uidGenerator`, `isToolboxCollapsed` and `isEditorCollapsed` properties and `onIsToolboxCollapsedChanged` and `onIsEditorCollapsedChanged` events to the Angular package.

diff --git a/README.md b/README.md
@@ -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.4/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.4/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.4/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.4/dist/index.umd.js"></script>
 ```
 
 Call the designer by:

diff --git a/angular/designer/package.json b/angular/designer/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-angular",
 	"description": "Angular wrapper for Sequential Workflow Designer component.",
-	"version": "0.16.3",
+	"version": "0.16.4",
 	"author": {
 		"name": "NoCode JS",
 		"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
 	"peerDependencies": {
 		"@angular/common": "12 - 16",
 		"@angular/core": "12 - 16",
-		"sequential-workflow-designer": "^0.16.3"
+		"sequential-workflow-designer": "^0.16.4"
 	},
 	"dependencies": {
 		"tslib": "^2.3.0"

diff --git a/demos/angular-app/package.json b/demos/angular-app/package.json
@@ -26,8 +26,8 @@
 		"@angular/platform-browser-dynamic": "^15.2.9",
 		"@angular/router": "^15.2.9",
 		"rxjs": "~7.8.0",
-		"sequential-workflow-designer": "^0.16.3",
-		"sequential-workflow-designer-angular": "^0.16.3",
+		"sequential-workflow-designer": "^0.16.4",
+		"sequential-workflow-designer-angular": "^0.16.4",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.13.0"
 	},

diff --git a/demos/angular-app/yarn.lock b/demos/angular-app/yarn.lock
@@ -5956,17 +5956,17 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-sequential-workflow-designer-angular@^0.16.3:
-  version "0.16.3"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.16.3.tgz#ad10976164b7c4e85bcb73c0585fb73701761648"
-  integrity sha512-kTRUPodVsfYpvFZ4ljMkGqM+VWC4xCay+jyWiGD9N2ifnQ7vuKcapMk6DQ+pSSTNCqqOugwdqD5snnWwCeWOYw==
+sequential-workflow-designer-angular@^0.16.4:
+  version "0.16.4"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.16.4.tgz#fc4d958e4ee7ce9344faa192ba0b13c8b3ae898d"
+  integrity sha512-G+JntoXICmgoILYEbD5AF9+NW0XxzZRCNT6YH5FbuWvH0GgIwv831hD2gQxGwKTAGXj+vSRIfBrVSHKagY08Qw==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.16.3:
-  version "0.16.3"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.16.3.tgz#899559b3a5ea3b5f0be931a071af67169ec65cb5"
-  integrity sha512-4M37SXOVfQ8YzLB+1PSDCB7NRXgipOSyBu127CBx2BdAt2dc7CnA0cyOYlVHtL3WX7xGfLXeIKKG7eSfQvjlWg==
+sequential-workflow-designer@^0.16.4:
+  version "0.16.4"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.16.4.tgz#53ebf0e607f9503eb1bd99c8d8cd0cf347021a3d"
+  integrity sha512-BHL9zqvwkCVOGIldxdKArsAuC1tVOCq1YQdr77o3bgbntA6VDv9K8kW1Oj8MBQw+Er6IHWhLDQ7yEsVSFWyJfQ==
   dependencies:
     sequential-workflow-model "^0.2.0"
 

diff --git a/demos/react-app/package.json b/demos/react-app/package.json
@@ -6,8 +6,8 @@
 	"dependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.16.3",
-		"sequential-workflow-designer-react": "^0.16.3"
+		"sequential-workflow-designer": "^0.16.4",
+		"sequential-workflow-designer-react": "^0.16.4"
 	},
 	"devDependencies": {
 		"@types/jest": "^29.2.5",

diff --git a/designer/package.json b/designer/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer",
 	"description": "Customizable no-code component for building flow-based programming applications.",
-	"version": "0.16.3",
+	"version": "0.16.4",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

diff --git a/designer/src/api/editor-api.ts b/designer/src/api/editor-api.ts
@@ -1,6 +1,6 @@
-import { DefinitionChangeType, DesignerState } from '../designer-state';
+import { DesignerState } from '../designer-state';
 import { DefinitionModifier } from '../definition-modifier';
-import { GlobalEditorContext, StepEditorContext } from '../designer-configuration';
+import { DefinitionChangeType, GlobalEditorContext, StepEditorContext } from '../designer-configuration';
 import { EditorRenderer, EditorRendererHandler } from './editor-renderer';
 import { Definition, DefinitionWalker } from '../definition';
 import { SimpleEventListener } from '../core';

diff --git a/designer/src/api/editor-renderer.spec.ts b/designer/src/api/editor-renderer.spec.ts
@@ -1,6 +1,7 @@
-import { DefinitionChangeType, DesignerState } from '../designer-state';
+import { DesignerState } from '../designer-state';
 import { EditorRenderer } from './editor-renderer';
 import { Definition, DefinitionWalker, Step } from '../definition';
+import { DefinitionChangeType } from '../designer-configuration';
 
 const step: Step = {
 	componentType: 'task',

diff --git a/designer/src/api/editor-renderer.ts b/designer/src/api/editor-renderer.ts
@@ -1,6 +1,7 @@
 import { DefinitionWalker, Step } from '../definition';
 import { race } from '../core';
-import { DefinitionChangedEvent, DefinitionChangeType, DesignerState } from '../designer-state';
+import { DefinitionChangedEvent, DesignerState } from '../designer-state';
+import { DefinitionChangeType } from '../designer-configuration';
 
 export type EditorRendererHandler = (step: Step | null) => void;
 

diff --git a/designer/src/behaviors/pressing-behaviors/trigger-custom-action-pressing-behavior-handler.ts b/designer/src/behaviors/pressing-behaviors/trigger-custom-action-pressing-behavior-handler.ts
@@ -1,6 +1,5 @@
-import { CustomActionHandlerContext } from '../../designer-configuration';
+import { CustomActionHandlerContext, DefinitionChangeType } from '../../designer-configuration';
 import { DesignerContext } from '../../designer-context';
-import { DefinitionChangeType } from '../../designer-state';
 import { TriggerCustomActionClickCommand } from '../../workspace';
 import { PressingBehaviorHandler } from './pressing-behavior';
 

diff --git a/designer/src/core/step-duplicator.spec.ts b/designer/src/core/step-duplicator.spec.ts
@@ -1,4 +1,4 @@
-import { BranchedStep, DefinitionWalker, SequentialStep, Step } from 'sequential-workflow-model';
+import { BranchedStep, DefinitionWalker, SequentialStep, Step } from '../definition';
 import { StepDuplicator } from './step-duplicator';
 import { Uid } from './uid';
 

diff --git a/designer/src/definition-modifier.ts b/designer/src/definition-modifier.ts
@@ -2,8 +2,8 @@ import { Uid } from './core';
 import { SequenceModifier } from './core/sequence-modifier';
 import { StepDuplicator } from './core/step-duplicator';
 import { Definition, DefinitionWalker, Sequence, Step } from './definition';
-import { DesignerConfiguration } from './designer-configuration';
-import { DefinitionChangeType, DesignerState } from './designer-state';
+import { DefinitionChangeType, DesignerConfiguration } from './designer-configuration';
+import { DesignerState } from './designer-state';
 
 export class DefinitionModifier {
 	public constructor(
@@ -47,7 +47,10 @@ export class DefinitionModifier {
 
 		SequenceModifier.insertStep(step, targetSequence, targetIndex);
 		this.state.notifyDefinitionChanged(DefinitionChangeType.stepInserted, step.id);
-		this.state.setSelectedStepId(step.id);
+
+		if (!this.configuration.steps.isAutoSelectDisabled) {
+			this.state.setSelectedStepId(step.id);
+		}
 		return true;
 	}
 
@@ -70,7 +73,10 @@ export class DefinitionModifier {
 
 		apply();
 		this.state.notifyDefinitionChanged(DefinitionChangeType.stepMoved, step.id);
-		this.state.setSelectedStepId(step.id);
+
+		if (!this.configuration.steps.isAutoSelectDisabled) {
+			this.state.setSelectedStepId(step.id);
+		}
 		return true;
 	}
 

diff --git a/designer/src/designer-configuration.ts b/designer/src/designer-configuration.ts
@@ -18,6 +18,11 @@ export interface DesignerConfiguration<TDefinition extends Definition = Definiti
 	 */
 	undoStackSize?: number;
 
+	/**
+	 * @description The initial undo stack. If not set, the undo stack will be empty.
+	 */
+	undoStack?: UndoStack;
+
 	/**
 	 * @description The common configuration of the steps.
 	 */
@@ -135,6 +140,11 @@ export interface StepsConfiguration {
 	canDeleteStep?: (step: Step, parentSequence: Sequence) => boolean;
 	isDuplicable?: (step: Step, parentSequence: Sequence) => boolean;
 
+	/**
+	 * @description The designer automatically selects the step after it is dropped. If true, the step will not be selected.
+	 */
+	isAutoSelectDisabled?: boolean;
+
 	iconUrlProvider?: StepIconUrlProvider;
 }
 
@@ -174,3 +184,25 @@ export type GlobalEditorProvider<TDefinition extends Definition = Definition> =
 	definition: TDefinition,
 	context: GlobalEditorContext
 ) => HTMLElement;
+
+export interface UndoStack {
+	index: number;
+	items: UndoStackItem[];
+}
+
+export interface UndoStackItem {
+	definition: Definition;
+	changeType: DefinitionChangeType;
+	stepId: string | null;
+}
+
+export enum DefinitionChangeType {
+	stepNameChanged = 1,
+	stepPropertyChanged,
+	stepChildrenChanged,
+	stepDeleted,
+	stepMoved,
+	stepInserted,
+	globalPropertyChanged,
+	rootReplaced
+}
diff --git a/designer/src/designer-context.ts b/designer/src/designer-context.ts
@@ -36,7 +36,7 @@ export class DesignerContext {
 
 		let historyController: HistoryController | undefined = undefined;
 		if (configuration.undoStackSize) {
-			historyController = HistoryController.create(state, definitionModifier, configuration);
+			historyController = HistoryController.create(configuration.undoStack, state, definitionModifier, configuration);
 		}
 
 		const componentContext = ComponentContext.create(

diff --git a/designer/src/designer-state.ts b/designer/src/designer-state.ts
@@ -1,24 +1,14 @@
 import { SimpleEvent } from './core/simple-event';
 import { Vector } from './core/vector';
 import { Definition } from './definition';
+import { DefinitionChangeType } from './designer-configuration';
 import { Viewport } from './designer-extension';
 
 export interface DefinitionChangedEvent {
 	changeType: DefinitionChangeType;
 	stepId: string | null;
 }
 
-export enum DefinitionChangeType {
-	stepNameChanged = 1,
-	stepPropertyChanged,
-	stepChildrenChanged,
-	stepDeleted,
-	stepMoved,
-	stepInserted,
-	globalPropertyChanged,
-	rootReplaced
-}
-
 export class DesignerState {
 	public readonly onViewportChanged = new SimpleEvent<Viewport>();
 	public readonly onSelectedStepIdChanged = new SimpleEvent<string | null>();

diff --git a/designer/src/designer.ts b/designer/src/designer.ts
@@ -1,13 +1,14 @@
 import { SimpleEvent } from './core/simple-event';
 import { isElementAttached } from './core/is-element-attached';
 import { Definition, DefinitionWalker, Sequence, Step, StepOrName } from './definition';
-import { DesignerConfiguration } from './designer-configuration';
+import { DesignerConfiguration, UndoStack } from './designer-configuration';
 import { DesignerContext } from './designer-context';
 import { DesignerView } from './designer-view';
 import { DesignerState } from './designer-state';
 import { ServicesResolver } from './services';
 import { validateConfiguration } from './core/designer-configuration-validator';
 import { DesignerApi } from './api';
+import { HistoryController } from './history-controller';
 
 export class Designer<TDefinition extends Definition = Definition> {
 	/**
@@ -43,7 +44,13 @@ export class Designer<TDefinition extends Definition = Definition> {
 		const designerApi = DesignerApi.create(designerContext);
 
 		const view = DesignerView.create(placeholder, designerContext, designerApi);
-		const designer = new Designer<TDef>(view, designerContext.state, designerContext.definitionWalker, designerApi);
+		const designer = new Designer<TDef>(
+			view,
+			designerContext.state,
+			designerContext.definitionWalker,
+			designerContext.historyController,
+			designerApi
+		);
 		view.workspace.onReady.subscribe(() => designer.onReady.forward());
 
 		designerContext.state.onDefinitionChanged.subscribe(() => {
@@ -52,10 +59,10 @@ export class Designer<TDefinition extends Definition = 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;
@@ -65,6 +72,7 @@ export class Designer<TDefinition extends Definition = Definition> {
 		private readonly view: DesignerView,
 		private readonly state: DesignerState,
 		private readonly walker: DefinitionWalker,
+		private readonly historyController: HistoryController | undefined,
 		private readonly api: DesignerApi
 	) {}
 
@@ -198,6 +206,16 @@ export class Designer<TDefinition extends Definition = Definition> {
 		this.state.setIsEditorCollapsed(isCollapsed);
 	}
 
+	/**
+	 * @description Dump the undo stack.
+	 */
+	public dumpUndoStack(): UndoStack {
+		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.