0.19.0. (#123)

nocode-js · Feb 18, 2024 · 58f6241 · 58f6241
1 parent b01321f
commit 58f6241
Show file tree

Hide file tree

Showing 50 changed files with 471 additions and 289 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 0.19.0
+
+* Added the `isSelectable` callback to the `StepsConfiguration` interface. Now it's possible to disable the selection of steps.
+* Deleted deprecated methods and interfaces.
+
 ## 0.18.5
 
 This version fixes a bug with unintended selection of HTML elements in Apple Vision Pro.

diff --git a/README.md b/README.md
@@ -98,10 +98,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.18.5/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.5/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.5/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.5/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.0/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.0/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.0/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.0/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.18.5",
+	"version": "0.19.0",
 	"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.18.5"
+		"sequential-workflow-designer": "^0.19.0"
 	},
 	"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.18.5",
-		"sequential-workflow-designer-angular": "^0.18.5",
+		"sequential-workflow-designer": "^0.19.0",
+		"sequential-workflow-designer-angular": "^0.19.0",
 		"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 @@ [email protected]:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-sequential-workflow-designer-angular@^0.18.5:
-  version "0.18.5"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.18.5.tgz#b7cf9bc43c747d49fc1f1aac0f36d317571aa0a2"
-  integrity sha512-IgFTYrLThzGX+4QO3GyHl0diNI2hTe9F5u2zoDRQxcuSYvO5L9OQ+y1TZnS3q1b5WLQSSx2tOXJrheDkWkOyGA==
+sequential-workflow-designer-angular@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.19.0.tgz#3ec9bd1584e69615ae293baa987560125e374751"
+  integrity sha512-nvUWQevPaS/FOzaDlDZk43pL4A+b0CjZOKGziMmdlBXzS1dBAhK3HlImM8sg7ZXfgDuvBn3FuLUJp/M24VmjhA==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.18.5:
-  version "0.18.5"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.18.5.tgz#5254e77c7a347e620b3b06fbb47e50bb48ec7245"
-  integrity sha512-Yk8jW6QICKdmFJNDUw6ynYjnKSTxXTi9yM6a8jP+B4I8I2Xq31R4BSPR6MVW5UiOZi0OwGo5ngajDO6iu3m90g==
+sequential-workflow-designer@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.19.0.tgz#988eac7b97ee7dedd23db4d3d324ee7e6366dbcb"
+  integrity sha512-p0Cipp+4URv8Fo4i4t/nscVbIoNO0NmxF6w/siv64eRe3Vm4+6Rewn+UApBiamnhYwmyqYl97U830f89+OfuqA==
   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.18.5",
-		"sequential-workflow-designer-react": "^0.18.5"
+		"sequential-workflow-designer": "^0.19.0",
+		"sequential-workflow-designer-react": "^0.19.0"
 	},
 	"devDependencies": {
 		"@types/jest": "^29.2.5",

diff --git a/demos/svelte-app/package.json b/demos/svelte-app/package.json
@@ -16,8 +16,8 @@
 		"eslint": "eslint ./src --ext .ts"
 	},
 	"dependencies": {
-		"sequential-workflow-designer": "^0.18.5",
-		"sequential-workflow-designer-svelte": "^0.18.5"
+		"sequential-workflow-designer": "^0.19.0",
+		"sequential-workflow-designer-svelte": "^0.19.0"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^2.0.3",

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.18.5",
+	"version": "0.19.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

diff --git a/designer/src/api/control-bar-api.ts b/designer/src/api/control-bar-api.ts
@@ -1,5 +1,5 @@
 import { SimpleEvent } from '../core';
-import { DefinitionModifier } from '../definition-modifier';
+import { StateModifier } from '../modifier/state-modifier';
 import { DesignerState } from '../designer-state';
 import { HistoryController } from '../history-controller';
 import { ViewportApi } from './viewport-api';
@@ -8,10 +8,10 @@ export class ControlBarApi {
 	public static create(
 		state: DesignerState,
 		historyController: HistoryController | undefined,
-		definitionModifier: DefinitionModifier,
+		stateModifier: StateModifier,
 		viewportApi: ViewportApi
 	): ControlBarApi {
-		const api = new ControlBarApi(state, historyController, definitionModifier, viewportApi);
+		const api = new ControlBarApi(state, historyController, stateModifier, viewportApi);
 		state.onIsReadonlyChanged.subscribe(api.onStateChanged.forward);
 		state.onSelectedStepIdChanged.subscribe(api.onStateChanged.forward);
 		state.onIsDragDisabledChanged.subscribe(api.onStateChanged.forward);
@@ -24,19 +24,12 @@ export class ControlBarApi {
 	private constructor(
 		private readonly state: DesignerState,
 		private readonly historyController: HistoryController | undefined,
-		private readonly definitionModifier: DefinitionModifier,
+		private readonly stateModifier: StateModifier,
 		private readonly viewportApi: ViewportApi
 	) {}
 
 	public readonly onStateChanged = new SimpleEvent<unknown>();
 
-	/**
-	 * @deprecated Don't use this method
-	 */
-	public subscribe(handler: () => void) {
-		this.onStateChanged.subscribe(handler);
-	}
-
 	public resetViewport() {
 		this.viewportApi.resetViewport();
 	}
@@ -87,7 +80,7 @@ export class ControlBarApi {
 
 	public tryDelete(): boolean {
 		if (this.canDelete() && this.state.selectedStepId) {
-			this.definitionModifier.tryDelete(this.state.selectedStepId);
+			this.stateModifier.tryDelete(this.state.selectedStepId);
 			return true;
 		}
 		return false;
@@ -98,7 +91,7 @@ export class ControlBarApi {
 			!!this.state.selectedStepId &&
 			!this.state.isReadonly &&
 			!this.state.isDragging &&
-			this.definitionModifier.isDeletable(this.state.selectedStepId)
+			this.stateModifier.isDeletable(this.state.selectedStepId)
 		);
 	}
 }
diff --git a/designer/src/api/designer-api.ts b/designer/src/api/designer-api.ts
@@ -6,6 +6,7 @@ import { ToolboxApi } from './toolbox-api';
 import { ToolboxDataProvider } from '../toolbox/toolbox-data-provider';
 import { ViewportApi } from './viewport-api';
 import { WorkspaceApi } from './workspace-api';
+import { DefinitionWalker } from '../definition';
 
 export class DesignerApi {
 	public static create(context: DesignerContext): DesignerApi {
@@ -15,12 +16,13 @@ export class DesignerApi {
 		const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.configuration.toolbox);
 
 		return new DesignerApi(
-			ControlBarApi.create(context.state, context.historyController, context.definitionModifier, viewport),
+			ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport),
 			new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator),
-			new EditorApi(context.state, context.definitionWalker, context.definitionModifier),
+			new EditorApi(context.state, context.definitionWalker, context.stateModifier),
 			workspace,
 			viewport,
-			new PathBarApi(context.state, context.definitionWalker)
+			new PathBarApi(context.state, context.definitionWalker),
+			context.definitionWalker
 		);
 	}
 
@@ -30,6 +32,7 @@ export class DesignerApi {
 		public readonly editor: EditorApi,
 		public readonly workspace: WorkspaceApi,
 		public readonly viewport: ViewportApi,
-		public readonly pathBar: PathBarApi
+		public readonly pathBar: PathBarApi,
+		public readonly definitionWalker: DefinitionWalker
 	) {}
 }
diff --git a/designer/src/api/editor-api.ts b/designer/src/api/editor-api.ts
@@ -1,15 +1,21 @@
 import { DesignerState } from '../designer-state';
-import { DefinitionModifier } from '../definition-modifier';
+import { StateModifier } from '../modifier/state-modifier';
 import { DefinitionChangeType, RootEditorContext, StepEditorContext } from '../designer-configuration';
 import { EditorRenderer, EditorRendererHandler } from './editor-renderer';
 import { Definition, DefinitionWalker } from '../definition';
-import { SimpleEventListener } from '../core';
+import { SimpleEvent, SimpleEventListener } from '../core';
+import { StateModifierDependency } from '../modifier';
+
+export interface SelectedStepIdProvider {
+	onSelectedStepIdChanged: SimpleEvent<string | null>;
+	selectedStepId: string | null;
+}
 
 export class EditorApi {
 	public constructor(
 		private readonly state: DesignerState,
 		private readonly definitionWalker: DefinitionWalker,
-		private readonly definitionModifier: DefinitionModifier
+		private readonly stateModifier: StateModifier
 	) {}
 
 	public isCollapsed(): boolean {
@@ -32,8 +38,16 @@ export class EditorApi {
 		return this.state.definition;
 	}
 
-	public runRenderer(rendererHandler: EditorRendererHandler): EditorRenderer {
-		return EditorRenderer.create(this.state, this.definitionWalker, rendererHandler);
+	public addDefinitionModifierDependency(dependency: StateModifierDependency) {
+		this.stateModifier.addDependency(dependency);
+	}
+
+	public runRenderer(
+		rendererHandler: EditorRendererHandler,
+		customSelectedStepIdProvider: SelectedStepIdProvider | null
+	): EditorRenderer {
+		const selectedStepIdProvider = customSelectedStepIdProvider || this.state;
+		return EditorRenderer.create(this.state, selectedStepIdProvider, this.definitionWalker, rendererHandler);
 	}
 
 	public createStepEditorContext(stepId: string): StepEditorContext {
@@ -49,7 +63,7 @@ export class EditorApi {
 			},
 			notifyChildrenChanged: () => {
 				this.state.notifyDefinitionChanged(DefinitionChangeType.stepChildrenChanged, stepId);
-				this.definitionModifier.updateDependantFields();
+				this.stateModifier.updateDependencies();
 			}
 		};
 	}

diff --git a/designer/src/api/editor-renderer.spec.ts b/designer/src/api/editor-renderer.spec.ts
@@ -28,7 +28,7 @@ describe('EditorRenderer', () => {
 	});
 
 	function createRenderer() {
-		return EditorRenderer.create(state, walker, callback);
+		return EditorRenderer.create(state, state, walker, callback);
 	}
 
 	it('calls callbacks with null if any step is not selected at start', () => {

diff --git a/designer/src/api/editor-renderer.ts b/designer/src/api/editor-renderer.ts
@@ -2,24 +2,31 @@ import { DefinitionWalker, Step } from '../definition';
 import { SimpleEvent, race } from '../core';
 import { DefinitionChangedEvent, DesignerState } from '../designer-state';
 import { DefinitionChangeType } from '../designer-configuration';
+import { SelectedStepIdProvider } from './editor-api';
 
 export type EditorRendererHandler = (step: Step | null) => void;
 
 type RaceEventArgs = [(DefinitionChangedEvent | undefined)?, (string | null | undefined)?, (boolean | undefined)?];
 
 export class EditorRenderer {
-	public static create(state: DesignerState, definitionWalker: DefinitionWalker, handler: EditorRendererHandler): EditorRenderer {
-		const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged, state.onIsReadonlyChanged);
-		const listener = new EditorRenderer(state, definitionWalker, handler, raceEvent);
+	public static create(
+		state: DesignerState,
+		selectedStepIdProvider: SelectedStepIdProvider,
+		definitionWalker: DefinitionWalker,
+		handler: EditorRendererHandler
+	): EditorRenderer {
+		const raceEvent = race(0, state.onDefinitionChanged, selectedStepIdProvider.onSelectedStepIdChanged, state.onIsReadonlyChanged);
+		const listener = new EditorRenderer(state, selectedStepIdProvider, definitionWalker, handler, raceEvent);
 		raceEvent.subscribe(listener.raceEventHandler);
-		listener.renderIfStepChanged(state.selectedStepId);
+		listener.renderIfStepChanged(selectedStepIdProvider.selectedStepId);
 		return listener;
 	}
 
 	private currentStepId: string | null | undefined = undefined;
 
 	private constructor(
 		private readonly state: DesignerState,
+		private readonly selectedStepIdProvider: SelectedStepIdProvider,
 		private readonly definitionWalker: DefinitionWalker,
 		private readonly handler: EditorRendererHandler,
 		private readonly raceEvent: SimpleEvent<RaceEventArgs>
@@ -43,12 +50,12 @@ export class EditorRenderer {
 
 	private readonly raceEventHandler = ([definitionChanged, selectedStepId, isReadonlyChanged]: RaceEventArgs) => {
 		if (isReadonlyChanged !== undefined) {
-			this.render(this.state.selectedStepId);
+			this.render(this.selectedStepIdProvider.selectedStepId);
 		} else if (definitionChanged) {
 			if (definitionChanged.changeType === DefinitionChangeType.rootReplaced) {
-				this.render(this.state.selectedStepId);
+				this.render(this.selectedStepIdProvider.selectedStepId);
 			} else {
-				this.renderIfStepChanged(this.state.selectedStepId);
+				this.renderIfStepChanged(this.selectedStepIdProvider.selectedStepId);
 			}
 		} else if (selectedStepId !== undefined) {
 			this.renderIfStepChanged(selectedStepId);

diff --git a/designer/src/api/path-bar-api.ts b/designer/src/api/path-bar-api.ts
@@ -7,13 +7,6 @@ export class PathBarApi {
 
 	public readonly onStateChanged = race(0, this.state.onFolderPathChanged, this.state.onDefinitionChanged);
 
-	/**
-	 * @deprecated Don't use this method
-	 */
-	public subscribe(handler: () => void) {
-		this.onStateChanged.subscribe(handler);
-	}
-
 	public setFolderPath(path: string[]) {
 		this.state.setFolderPath(path);
 	}

diff --git a/designer/src/behaviors/click-behavior-resolver.ts b/designer/src/behaviors/click-behavior-resolver.ts
@@ -1,5 +1,4 @@
 import { DesignerContext } from '../designer-context';
-import { DesignerState } from '../designer-state';
 import { ClickCommand, ClickCommandType } from '../workspace';
 import { Behavior } from './behavior';
 import { MoveViewportBehavior } from './move-viewport-behavior';
@@ -10,27 +9,27 @@ import { OpenFolderPressingBehaviorHandler } from './pressing-behaviors/open-fol
 import { TriggerCustomActionPressingBehaviorHandler } from './pressing-behaviors/trigger-custom-action-pressing-behavior-handler';
 
 export class ClickBehaviorResolver {
-	public constructor(private readonly designerContext: DesignerContext, private readonly state: DesignerState) {}
+	public constructor(private readonly context: DesignerContext) {}
 
 	public resolve(commandOrNull: ClickCommand | null, element: Element, isMiddleButton: boolean): Behavior {
 		if (!commandOrNull) {
-			return MoveViewportBehavior.create(this.state, !isMiddleButton);
+			return MoveViewportBehavior.create(!isMiddleButton, this.context);
 		}
 
 		switch (commandOrNull.type) {
 			case ClickCommandType.selectStep:
-				return SelectStepBehavior.create(commandOrNull.component, isMiddleButton, this.designerContext);
+				return SelectStepBehavior.create(commandOrNull.component, isMiddleButton, this.context);
 
 			case ClickCommandType.rerenderStep:
-				return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.designerContext));
+				return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.context));
 
 			case ClickCommandType.openFolder:
-				return PressingBehavior.create(element, new OpenFolderPressingBehaviorHandler(commandOrNull, this.designerContext));
+				return PressingBehavior.create(element, new OpenFolderPressingBehaviorHandler(commandOrNull, this.context));
 
 			case ClickCommandType.triggerCustomAction:
 				return PressingBehavior.create(
 					element,
-					new TriggerCustomActionPressingBehaviorHandler(commandOrNull, this.designerContext)
+					new TriggerCustomActionPressingBehaviorHandler(commandOrNull, this.context.customActionController)
 				);
 
 			default: