0.13.5. (#61)

b4rtaz · web-flow · commit 622cb460b48a · 2023-07-05T22:49:12.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+## 0.13.5
+
+We have added a third parameter, `definition`, to the step editor provider.
+
+```js
+function stepEditorProvider(step, stepContext, definition) { /* ... */ }
+```
+
 ## 0.13.4
 
 The `getStepParents` method of the `Designer` class supports now a step id as an argument. It is possible to get parents of a step by its id. The method still supports a step object or a sequence as an argument.
diff --git a/README.md b/README.md
@@ -90,10 +90,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.13.4/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.4/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.4/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.4/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.5/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.5/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.5/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.5/dist/index.umd.js"></script>
 ```
 
 Call the designer by:
@@ -186,7 +186,7 @@ const configuration = {
       // ...
       return editor;
     },
-    stepEditorProvider: (step, stepContext) => {
+    stepEditorProvider: (step, stepContext, definition) => {
       const editor = document.createElement('div');
       // ...
       return editor;
diff --git a/angular/designer/README.md b/angular/designer/README.md
@@ -135,6 +135,7 @@ Create a template for the step editor. The value of the `editor` variable implem
 ```ts
 interface StepEditorWrapper {
   step: Step;
+  definition: Definition;
   context: StepEditorContext;
 }
 ```
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.13.4",
+	"version": "0.13.5",
 	"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.13.4"
+		"sequential-workflow-designer": "^0.13.5"
 	},
 	"dependencies": {
 		"tslib": "^2.3.0"
diff --git a/angular/designer/src/designer.component.ts b/angular/designer/src/designer.component.ts
@@ -32,6 +32,7 @@ export interface GlobalEditorWrapper {
 
 export interface StepEditorWrapper {
 	step: Step;
+	definition: Definition;
 	context: StepEditorContext;
 }
 
@@ -163,12 +164,13 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 		});
 	};
 
-	private readonly stepEditorProvider = (step: Step, context: StepEditorContext) => {
+	private readonly stepEditorProvider = (step: Step, context: StepEditorContext, definition: Definition) => {
 		if (!this.stepEditor) {
 			throw new Error('Input "stepEditor" is not set');
 		}
 		return this.editorProvider<StepEditorWrapper>(this.stepEditor, {
 			step,
+			definition,
 			context
 		});
 	};
diff --git a/demos/angular-app/package.json b/demos/angular-app/package.json
@@ -24,8 +24,8 @@
 		"@angular/platform-browser-dynamic": "^15.2.2",
 		"@angular/router": "^15.2.2",
 		"rxjs": "~7.8.0",
-		"sequential-workflow-designer": "^0.13.4",
-		"sequential-workflow-designer-angular": "^0.13.4",
+		"sequential-workflow-designer": "^0.13.5",
+		"sequential-workflow-designer-angular": "^0.13.5",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.13.0"
 	},
diff --git a/demos/angular-app/yarn.lock b/demos/angular-app/yarn.lock
@@ -5180,17 +5180,17 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-sequential-workflow-designer-angular@^0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.13.4.tgz#99921f1cff60ab9d2e31b2f01af9706335d534eb"
-  integrity sha512-w/N6JdX0SxaYnlVyze8O7CNj/dmHnhOHjFwgtzx9I7YTsqfdg2IRIY/bmWo3Wf61L4m3YS4z84ugMFLrWHp10g==
+sequential-workflow-designer-angular@^0.13.5:
+  version "0.13.5"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.13.5.tgz#67b50f31ab17aa553246bb284fb3be09ae5b11da"
+  integrity sha512-XkKq58tzzo6wt7Z/Mf7JBU4dLP9WgFlINzwwodJ5Ac2A1cIpPlNJ1Xsulqk0Sw2/3iUG/RxYE6G2UHABU+yfqQ==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.13.4.tgz#bd4c7ba1fe4b6408ce12fe9fcf4df81bd0e98e6c"
-  integrity sha512-wKbV1hgr8VFVEC7z0sQfMT1VUTUyZ2tbLBxQs5VBAD/FS5UVgeQrVf0iuUD2+WvRSaQ1pADfKBJuJ7JJkb/wow==
+sequential-workflow-designer@^0.13.5:
+  version "0.13.5"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.13.5.tgz#9e0485d233d890c03675e0a59057eba8abd4e09d"
+  integrity sha512-MyG/p7EF+AskWsEHRXt3hSYfJNr5SEmQfUDHqT1Oqt7jBJb4RH6E+nD7XwiPwZ0HMJRIlMX6jiC6eV/Ieq/AXQ==
   dependencies:
     sequential-workflow-model "^0.1.4"
 
diff --git a/demos/react-app/package.json b/demos/react-app/package.json
@@ -5,8 +5,8 @@
 	"dependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.13.4",
-		"sequential-workflow-designer-react": "^0.13.4"
+		"sequential-workflow-designer": "^0.13.5",
+		"sequential-workflow-designer-react": "^0.13.5"
 	},
 	"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.13.4",
+	"version": "0.13.5",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
diff --git a/designer/src/designer-configuration.ts b/designer/src/designer-configuration.ts
@@ -142,7 +142,7 @@ export type RootValidator = (definition: Definition) => boolean;
 
 export interface EditorsConfiguration<TDefinition extends Definition = Definition> {
 	isCollapsed?: boolean;
-	stepEditorProvider: StepEditorProvider;
+	stepEditorProvider: StepEditorProvider<TDefinition>;
 	globalEditorProvider: GlobalEditorProvider<TDefinition>;
 }
 
@@ -152,7 +152,11 @@ export interface StepEditorContext {
 	notifyChildrenChanged(): void;
 }
 
-export type StepEditorProvider = (step: Step, context: StepEditorContext) => HTMLElement;
+export type StepEditorProvider<TDefinition extends Definition = Definition> = (
+	step: Step,
+	context: StepEditorContext,
+	definition: TDefinition
+) => HTMLElement;
 
 export interface GlobalEditorContext {
 	notifyPropertiesChanged(): void;
diff --git a/designer/src/smart-editor/editor.spec.ts b/designer/src/smart-editor/editor.spec.ts
@@ -0,0 +1,54 @@
+import { DefinitionWalker } from '../definition';
+import { EditorApi } from '../api';
+import { DesignerState } from '../designer-state';
+import { createDefinitionStub, createDesignerConfigurationStub, createStepStub } from '../test-tools/stubs';
+import { DefinitionModifier } from '../definition-modifier';
+import { Editor } from './editor';
+
+describe('Editor', () => {
+	const step = createStepStub();
+	const definition = createDefinitionStub();
+	definition.sequence.push(step);
+
+	let parent: HTMLElement;
+	let state: DesignerState;
+	let api: EditorApi;
+	let stepEditorProvider: jasmine.Spy;
+	let globalEditorProvider: jasmine.Spy;
+
+	function createEditor() {
+		Editor.create(parent, api, 'test-step', stepEditorProvider, 'test-global', globalEditorProvider);
+	}
+
+	beforeEach(() => {
+		parent = document.createElement('div');
+
+		const configuration = createDesignerConfigurationStub();
+		state = new DesignerState(definition, false, false, false);
+
+		const walker = new DefinitionWalker();
+		const modifier = new DefinitionModifier(walker, state, configuration);
+		api = new EditorApi(state, walker, modifier);
+
+		stepEditorProvider = jasmine.createSpy().and.returnValue(document.createElement('div'));
+		globalEditorProvider = jasmine.createSpy().and.returnValue(document.createElement('div'));
+	});
+
+	it('calls step editor provider when step is selected', () => {
+		state.setSelectedStepId('0x0');
+
+		createEditor();
+
+		expect(stepEditorProvider).toHaveBeenCalledWith(step, jasmine.anything(), definition);
+		expect(globalEditorProvider).not.toHaveBeenCalled();
+	});
+
+	it('calls global editor provider when step is not selected', () => {
+		state.setSelectedStepId(null);
+
+		createEditor();
+
+		expect(stepEditorProvider).not.toHaveBeenCalled();
+		expect(globalEditorProvider).toHaveBeenCalledWith(definition, jasmine.anything());
+	});
+});
diff --git a/designer/src/smart-editor/editor.ts b/designer/src/smart-editor/editor.ts
@@ -1,13 +1,13 @@
 import { Step } from '../definition';
-import { DesignerApi } from '../api/designer-api';
 import { EditorRenderer } from '../api/editor-renderer';
 import { EditorView } from './editor-view';
 import { GlobalEditorProvider, StepEditorProvider } from '../designer-configuration';
+import { EditorApi } from '../api';
 
 export class Editor {
 	public static create(
 		parent: HTMLElement,
-		api: DesignerApi,
+		api: EditorApi,
 		stepEditorClassName: string,
 		stepEditorProvider: StepEditorProvider,
 		globalEditorClassName: string,
@@ -16,21 +16,22 @@ export class Editor {
 		const view = EditorView.create(parent);
 
 		function render(step: Step | null) {
+			const definition = api.getDefinition();
 			let content: HTMLElement;
 			let className: string;
 			if (step) {
-				const stepContext = api.editor.createStepEditorContext(step.id);
-				content = stepEditorProvider(step, stepContext);
+				const stepContext = api.createStepEditorContext(step.id);
+				content = stepEditorProvider(step, stepContext, definition);
 				className = stepEditorClassName;
 			} else {
-				const globalContext = api.editor.createGlobalEditorContext();
-				content = globalEditorProvider(api.editor.getDefinition(), globalContext);
+				const globalContext = api.createGlobalEditorContext();
+				content = globalEditorProvider(definition, globalContext);
 				className = globalEditorClassName;
 			}
 			view.setContent(content, className);
 		}
 
-		const renderer = api.editor.runRenderer(step => render(step));
+		const renderer = api.runRenderer(step => render(step));
 		return new Editor(view, renderer);
 	}
 
diff --git a/designer/src/smart-editor/smart-editor-view.spec.ts b/designer/src/smart-editor/smart-editor-view.spec.ts
@@ -8,7 +8,7 @@ describe('SmartEditorView', () => {
 		const api = createDesignerApiStub();
 		const configuration = getEditorsConfigurationStub();
 
-		const view = SmartEditorView.create(parent, api, configuration);
+		const view = SmartEditorView.create(parent, api.editor, configuration);
 
 		expect(view).toBeDefined();
 		expect(parent.children.length).not.toEqual(0);
diff --git a/designer/src/smart-editor/smart-editor-view.ts b/designer/src/smart-editor/smart-editor-view.ts
@@ -1,11 +1,11 @@
-import { DesignerApi } from '../api/designer-api';
+import { EditorApi } from '../api';
 import { Dom } from '../core/dom';
 import { Icons } from '../core/icons';
 import { EditorsConfiguration } from '../designer-configuration';
 import { Editor } from './editor';
 
 export class SmartEditorView {
-	public static create(parent: HTMLElement, api: DesignerApi, configuration: EditorsConfiguration): SmartEditorView {
+	public static create(parent: HTMLElement, api: EditorApi, configuration: EditorsConfiguration): SmartEditorView {
 		const root = Dom.element('div', {
 			class: 'sqd-smart-editor'
 		});
diff --git a/designer/src/smart-editor/smart-editor.ts b/designer/src/smart-editor/smart-editor.ts
@@ -7,7 +7,7 @@ import { EditorApi } from '../api';
 
 export class SmartEditor implements UiComponent {
 	public static create(parent: HTMLElement, api: DesignerApi, configuration: EditorsConfiguration): SmartEditor {
-		const view = SmartEditorView.create(parent, api, configuration);
+		const view = SmartEditorView.create(parent, api.editor, configuration);
 
 		const editor = new SmartEditor(view, api.editor, api.workspace);
 		editor.updateVisibility();
diff --git a/designer/src/toolbox/toolbox-item-view.ts b/designer/src/toolbox/toolbox-item-view.ts
@@ -4,9 +4,10 @@ import { StepDefinition } from '../designer-configuration';
 
 export class ToolboxItemView {
 	public static create(parent: HTMLElement, step: StepDefinition, api: ToolboxApi): ToolboxItemView {
+		const label = api.getLabel(step);
 		const root = Dom.element('div', {
 			class: `sqd-toolbox-item sqd-type-${step.type}`,
-			title: step.name
+			title: label
 		});
 
 		const iconUrl = api.tryGetIconUrl(step);
@@ -28,7 +29,7 @@ export class ToolboxItemView {
 		const text = Dom.element('div', {
 			class: 'sqd-toolbox-item-text'
 		});
-		text.textContent = api.getLabel(step);
+		text.textContent = label;
 
 		root.appendChild(icon);
 		root.appendChild(text);
diff --git a/examples/assets/lib.js b/examples/assets/lib.js
@@ -19,7 +19,7 @@ function embedStylesheet(url) {
 
 const baseUrl = isTestEnv()
 	? '../designer'
-	: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.4';
+	: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.13.5';
 
 embedScript(`${baseUrl}/dist/index.umd.js`);
 embedStylesheet(`${baseUrl}/css/designer.css`);
diff --git a/react/README.md b/react/README.md
@@ -63,7 +63,7 @@ Create the global editor component:
 
 ```tsx
 function GlobalEditor() {
-  const { properties, setProperty } = useGlobalEditor();
+  const { properties, setProperty, definition } = useGlobalEditor();
 
   function onSpeedChanged(e) {
     setProperty('speed', e.target.value);
@@ -82,7 +82,7 @@ Create the step editor component:
 
 ```tsx
 function StepEditor() {
-  const { type, componentType, name, setName, properties, setProperty } = useStepEditor();
+  const { type, componentType, name, setName, properties, setProperty, definition } = useStepEditor();
 
   function onNameChanged(e) {
     setName(e.target.value);
diff --git a/react/package.json b/react/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-react",
 	"description": "React wrapper for Sequential Workflow Designer component.",
-	"version": "0.13.4",
+	"version": "0.13.5",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
@@ -47,7 +47,7 @@
 	"peerDependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.13.4"
+		"sequential-workflow-designer": "^0.13.5"
 	},
 	"devDependencies": {
 		"@rollup/plugin-node-resolve": "^15.0.1",
@@ -63,7 +63,7 @@
 		"prettier": "^2.8.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.13.4",
+		"sequential-workflow-designer": "^0.13.5",
 		"rollup": "^3.18.0",
 		"rollup-plugin-dts": "^5.2.0",
 		"rollup-plugin-typescript2": "^0.34.1",
diff --git a/react/src/GlobalEditorWrapper.spec.tsx b/react/src/GlobalEditorWrapper.spec.tsx
diff --git a/react/src/GlobalEditorWrapper.tsx b/react/src/GlobalEditorWrapper.tsx
diff --git a/react/src/SequentialWorkflowDesigner.tsx b/react/src/SequentialWorkflowDesigner.tsx
diff --git a/react/src/StepEditorWrapper.spec.tsx b/react/src/StepEditorWrapper.spec.tsx
diff --git a/react/src/StepEditorWrapper.tsx b/react/src/StepEditorWrapper.tsx

Original file line number	Diff line number	Diff line change
@@ -135,6 +135,7 @@ Create a template for the step editor. The value of the `editor` variable implem
`135`	`135`	```ts
`136`	`136`	`interface StepEditorWrapper {`
`137`	`137`	`step: Step;`
	`138`	`+ definition: Definition;`
`138`	`139`	`context: StepEditorContext;`
`139`	`140`	`}`
`140`	`141`	```
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "sequential-workflow-designer",`
`3`	`3`	`"description": "Customizable no-code component for building flow-based programming applications.",`
`4`		`- "version": "0.13.4",`
	`4`	`+ "version": "0.13.5",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "./lib/esm/index.js",`
`7`	`7`	`"types": "./lib/index.d.ts",`