0.21.0. (#143)

nocode-js · May 16, 2024 · 1b2d319 · 1b2d319
1 parent 879dfe3
commit 1b2d319
Show file tree

Hide file tree

Showing 38 changed files with 462 additions and 261 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.21.0
+
+This version introduces several changes related with the collapsible regions in the pro version.
+
 ## 0.20.0
 
 This version introduces the localization feature. Now you can localize the designer to any language you want.

diff --git a/README.md b/README.md
@@ -44,6 +44,7 @@ Pro:
 * [🍬 Custom Theme Flat](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-theme-flat.html)
 * [🌹 Custom Step Types](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-step-types.html)
 * [📺 Popup Editor](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/popup-editor.html)
+* [🔽 Collapsible Region](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/collapsible-region.html)
 * [💼 Copy Paste](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/copy-paste.html)
 * [👈 Goto](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/goto.html)
 * [📁 Folders](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/folders.html)
@@ -101,10 +102,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.20.0/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.20.0/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.20.0/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.20.0/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.21.0/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.21.0/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.21.0/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.21.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.20.0",
+	"version": "0.21.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.20.0"
+		"sequential-workflow-designer": "^0.21.0"
 	},
 	"dependencies": {
 		"tslib": "^2.3.0"

diff --git a/angular/designer/src/designer.component.ts b/angular/designer/src/designer.component.ts
@@ -29,7 +29,8 @@ import {
 	ToolboxConfiguration,
 	UidGenerator,
 	ValidatorConfiguration,
-	I18n
+	I18n,
+	PreferenceStorage
 } from 'sequential-workflow-designer';
 
 export interface RootEditorWrapper {
@@ -76,6 +77,8 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 	public contextMenu?: boolean;
 	@Input('keyboard')
 	public keyboard?: boolean | KeyboardConfiguration;
+	@Input('preferenceStorage')
+	public preferenceStorage?: PreferenceStorage;
 	@Input('extensions')
 	public extensions?: DesignerExtension[];
 	@Input('i18n')
@@ -220,6 +223,7 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 				controlBar: this.controlBar,
 				contextMenu: this.contextMenu,
 				keyboard: this.keyboard,
+				preferenceStorage: this.preferenceStorage,
 				extensions: this.extensions,
 				isReadonly: this.isReadonly,
 				i18n: this.i18n,

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.20.0",
-		"sequential-workflow-designer-angular": "^0.20.0",
+		"sequential-workflow-designer": "^0.21.0",
+		"sequential-workflow-designer-angular": "^0.21.0",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.13.0"
 	},
@@ -45,4 +45,4 @@
 		"prettier": "^3.2.5",
 		"typescript": "~4.9.5"
 	}
-}
+}
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.20.0:
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.20.0.tgz#abe658c0fe0911acc04506c32030fe5e1a0c6db2"
-  integrity sha512-dAV0U+Iw+xJUJfH5lva4Y0hNd3jcs8FfUDVQgohr8TTSYpnQRQlCDUN8oiI1zmZd59GInX3ckWR7Vfl0hE764Q==
+sequential-workflow-designer-angular@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.21.0.tgz#c18481347b4011dc2ce9c8f422027702382a33dc"
+  integrity sha512-MajrGNFskcG2V1OpiiL/OigP1MD1CJtdD8Nl+X8KClqeZ+kw+aqNRJqIBjC7zPdcoGsHyKGGORUyPzlwTWoLwg==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.20.0:
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.20.0.tgz#fb6a1fc15969e62e060251e57c9977c0b22cecd3"
-  integrity sha512-nndGqJuOR7KAmY5OasPBYt842KWeDC05DgJ3J/M+tQNxddqCHWlafy6rwHfO1cPB3Ui1m0b0sOrNNJmv1r6dWA==
+sequential-workflow-designer@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.21.0.tgz#34a461163634b140b12a46943cf9c1eb9443c7c7"
+  integrity sha512-P+LTR0umWwiZEWtwvaZ4ZhWAAwrF4vYJhY6ge32yrltJzsViiM951+wo9l3945i5Vv7GoLvgovSX4nhZDHDlSQ==
   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.20.0",
-		"sequential-workflow-designer-react": "^0.20.0"
+		"sequential-workflow-designer": "^0.21.0",
+		"sequential-workflow-designer-react": "^0.21.0"
 	},
 	"devDependencies": {
 		"@types/jest": "^29.2.5",
@@ -48,4 +48,4 @@
 			"last 1 safari version"
 		]
 	}
-}
+}
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.20.0",
-		"sequential-workflow-designer-svelte": "^0.20.0"
+		"sequential-workflow-designer": "^0.21.0",
+		"sequential-workflow-designer-svelte": "^0.21.0"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^2.0.3",
@@ -33,4 +33,4 @@
 		"@typescript-eslint/parser": "^5.47.0",
 		"eslint": "^8.30.0"
 	}
-}
+}
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.20.0",
+	"version": "0.21.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
@@ -104,4 +104,4 @@
 		"lowcode",
 		"flow"
 	]
-}
+}
diff --git a/designer/src/component-context.ts b/designer/src/component-context.ts
@@ -1,6 +1,7 @@
+import { DefinitionWalker } from 'sequential-workflow-model';
 import { DefinitionValidator } from './core/definition-validator';
 import { IconProvider } from './core/icon-provider';
-import { I18n, StepsConfiguration, ValidatorConfiguration } from './designer-configuration';
+import { DesignerConfiguration, I18n, PreferenceStorage } from './designer-configuration';
 import { PlaceholderController } from './designer-extension';
 import { DesignerState } from './designer-state';
 import { Services } from './services';
@@ -9,26 +10,38 @@ import { StepExtensionResolver } from './workspace/step-extension-resolver';
 
 export class ComponentContext {
 	public static create(
-		stepsConfiguration: StepsConfiguration,
-		validatorConfiguration: ValidatorConfiguration | undefined,
+		configuration: DesignerConfiguration,
 		state: DesignerState,
 		stepExtensionResolver: StepExtensionResolver,
+		definitionWalker: DefinitionWalker,
+		preferenceStorage: PreferenceStorage,
 		i18n: I18n,
 		services: Services
 	): ComponentContext {
-		const validator = new DefinitionValidator(validatorConfiguration, state);
-		const iconProvider = new IconProvider(stepsConfiguration);
+		const validator = new DefinitionValidator(configuration.validator, state);
+		const iconProvider = new IconProvider(configuration.steps);
 		const placeholderController = services.placeholderController.create();
 		const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
-		return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, i18n, services);
+		return new ComponentContext(
+			validator,
+			iconProvider,
+			placeholderController,
+			stepComponentFactory,
+			definitionWalker,
+			services,
+			preferenceStorage,
+			i18n
+		);
 	}
 
 	private constructor(
 		public readonly validator: DefinitionValidator,
 		public readonly iconProvider: IconProvider,
 		public readonly placeholderController: PlaceholderController,
 		public readonly stepComponentFactory: StepComponentFactory,
-		public readonly i18n: I18n,
-		public readonly services: Services
+		public readonly definitionWalker: DefinitionWalker,
+		public readonly services: Services,
+		public readonly preferenceStorage: PreferenceStorage,
+		public readonly i18n: I18n
 	) {}
 }
diff --git a/designer/src/core/memory-preference-storage.spec.ts b/designer/src/core/memory-preference-storage.spec.ts
@@ -0,0 +1,13 @@
+import { MemoryPreferenceStorage } from './memory-preference-storage';
+
+describe('MemoryPreferenceStorage', () => {
+	it('remember a value', () => {
+		const storage = new MemoryPreferenceStorage();
+
+		expect(storage.getItem('key0')).toBeNull();
+
+		storage.setItem('key0', 'value');
+
+		expect(storage.getItem('key0')).toBe('value');
+	});
+});
diff --git a/designer/src/core/memory-preference-storage.ts b/designer/src/core/memory-preference-storage.ts
@@ -0,0 +1,13 @@
+import { PreferenceStorage } from '../designer-configuration';
+
+export class MemoryPreferenceStorage implements PreferenceStorage {
+	private readonly map: Record<string, string> = {};
+
+	public setItem(key: string, value: string) {
+		this.map[key] = value;
+	}
+
+	public getItem(key: string): string | null {
+		return this.map[key] ?? null;
+	}
+}
diff --git a/designer/src/designer-configuration.ts b/designer/src/designer-configuration.ts
@@ -73,6 +73,11 @@ export interface DesignerConfiguration<TDefinition extends Definition = Definiti
 	 */
 	definitionWalker?: DefinitionWalker;
 
+	/**
+	 * @description Custom preference storage. By default, all preferences are stored in the memory.
+	 */
+	preferenceStorage?: PreferenceStorage;
+
 	/**
 	 * @description Custom generator of unique identifiers.
 	 */
@@ -144,6 +149,11 @@ export interface ToolboxGroupConfiguration {
 	steps: StepDefinition[];
 }
 
+export interface PreferenceStorage {
+	setItem(key: string, value: string): void;
+	getItem(key: string): string | null;
+}
+
 export interface StepsConfiguration {
 	isSelectable?: (step: Step, parentSequence: Sequence) => boolean;
 	canInsertStep?: (step: Step, targetSequence: Sequence, targetIndex: number) => boolean;

diff --git a/designer/src/designer-context.ts b/designer/src/designer-context.ts
@@ -11,6 +11,7 @@ import { LayoutController } from './layout-controller';
 import { Services } from './services';
 import { StepExtensionResolver } from './workspace/step-extension-resolver';
 import { WorkspaceController, WorkspaceControllerWrapper } from './workspace/workspace-controller';
+import { MemoryPreferenceStorage } from './core/memory-preference-storage';
 
 export class DesignerContext {
 	public static create(
@@ -42,11 +43,13 @@ export class DesignerContext {
 			historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
 		}
 
+		const preferenceStorage = configuration.preferenceStorage ?? new MemoryPreferenceStorage();
 		const componentContext = ComponentContext.create(
-			configuration.steps,
-			configuration.validator,
+			configuration,
 			state,
 			stepExtensionResolver,
+			definitionWalker,
+			preferenceStorage,
 			i18n,
 			services
 		);

diff --git a/designer/src/designer-extension.ts b/designer/src/designer-extension.ts
@@ -5,7 +5,16 @@ import { Vector } from './core';
 import { CustomActionController } from './custom-action-controller';
 import { ComponentType, Sequence, Step } from './definition';
 import { I18n } from './designer-configuration';
-import { Badge, Component, Placeholder, PlaceholderDirection, SequenceComponent, StepComponentView } from './workspace';
+import {
+	Badge,
+	ClickCommand,
+	ClickDetails,
+	Component,
+	Placeholder,
+	PlaceholderDirection,
+	SequenceComponent,
+	StepComponentView
+} from './workspace';
 
 export interface DesignerExtension {
 	steps?: StepExtension[];
@@ -17,6 +26,7 @@ export interface DesignerExtension {
 	viewportController?: ViewportControllerExtension;
 	placeholderController?: PlaceholderControllerExtension;
 	placeholder?: PlaceholderExtension;
+	regionComponentView?: RegionComponentViewExtension;
 	grid?: GridExtension;
 	rootComponent?: RootComponentExtension;
 	sequenceComponent?: SequenceComponentExtension;
@@ -34,6 +44,7 @@ export interface StepExtension<S extends Step = Step> {
 export type StepComponentViewFactory = StepExtension['createComponentView'];
 
 export interface StepComponentViewContext {
+	i18n: I18n;
 	getStepName(): string;
 	getStepIconUrl(): string | null;
 	createSequenceComponent(parentElement: SVGElement, sequence: Sequence): SequenceComponent;
@@ -44,7 +55,13 @@ export interface StepComponentViewContext {
 		sequence: Sequence,
 		index: number
 	): Placeholder;
-	i18n: I18n;
+	createRegionComponentView(
+		parentElement: SVGElement,
+		componentClassName: string,
+		contentFactory: RegionComponentViewContentFactory
+	): StepComponentView;
+	getPreference(key: string): string | null;
+	setPreference(key: string, value: string): void;
 }
 
 export interface StepContext<S extends Step = Step> {
@@ -71,7 +88,7 @@ export interface StepComponentViewWrapperExtension {
 
 export interface BadgeExtension {
 	id: string;
-	createForStep(parentElement: SVGElement, stepContext: StepContext, componentContext: ComponentContext): Badge;
+	createForStep(parentElement: SVGElement, view: StepComponentView, stepContext: StepContext, componentContext: ComponentContext): Badge;
 	createForRoot?: (parentElement: SVGElement, componentContext: ComponentContext) => Badge;
 	createStartValue(): unknown;
 }
@@ -202,3 +219,28 @@ export interface DaemonExtension {
 export interface Daemon {
 	destroy(): void;
 }
+
+// RegionComponentViewExtension
+
+export interface RegionView {
+	getClientPosition(): Vector;
+	/**
+	 * @returns `true` if the click is inside the region, `null` if it's outside. The view may return a command to be executed.
+	 */
+	resolveClick(click: ClickDetails): true | ClickCommand | null;
+	setIsSelected(isSelected: boolean): void;
+}
+
+export type RegionViewFactory = (parent: SVGElement, widths: number[], height: number) => RegionView;
+
+export type RegionComponentViewContentFactory = (g: SVGGElement, regionViewFactory: RegionViewFactory) => StepComponentView;
+
+export interface RegionComponentViewExtension {
+	create(
+		parentElement: SVGElement,
+		componentClassName: string,
+		stepContext: StepContext,
+		viewContext: StepComponentViewContext,
+		contentFactory: RegionComponentViewContentFactory
+	): StepComponentView;
+}