0.5.1.

b4rtaz · b4rtaz · commit b90a07c7a823 · 2023-01-08T11:44:17.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 0.5.1
+
+* Fixed calculation of label width in the switch step.
+* Added an exclamation mark to the warning icon.
+
 ## 0.5.0
 
 * Fixed losing the disabled state during dragging.
@@ -82,7 +87,7 @@ const config = {
 
 #### Editor's Context
 
-We've changed an approach how the editors should notify the designer about changes in the definition. We've deleted `revalidate()` and `notifiyDefinitionChanged()` methods from the `Designer` class. Instead of this, now editors receive an editor's context.
+We've changed an approach how the editors should notify the designer about changes in the definition. We've deleted `revalidate()` and `notifyDefinitionChanged()` methods from the `Designer` class. Instead of this, now editors receive an editor's context.
 
 ```ts
 interface StepEditorContext {
@@ -111,7 +116,7 @@ const config = {
 };
 ```
 
-#### Type Requirments
+#### Type Requirements
 
 The `type` of a step cannot contain special characters from now. Check [the type validator](src/core/type-validator.ts).
 
diff --git a/README.md b/README.md
@@ -51,7 +51,7 @@ To import the package:
 import { Designer } from 'sequential-workflow-designer';
 ```
 
-If you use [css-loader](https://webpack.js.org/loaders/css-loader/) or similar, you can add CSS files to your boundle:
+If you use [css-loader](https://webpack.js.org/loaders/css-loader/) or similar, you can add CSS files to your bundle:
 
 ```ts
 import 'sequential-workflow-designer/css/designer.css';
@@ -73,10 +73,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.5.0/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.0/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.0/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.0/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.1/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.1/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.1/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.1/dist/index.umd.js"></script>
 ```
 
 Call the designer by:
diff --git a/designer/css/designer-dark.css b/designer/css/designer-dark.css
@@ -162,3 +162,6 @@
 .sqd-theme-dark .sqd-validation-error {
 	fill: #FFA200;
 }
+.sqd-theme-dark .sqd-validation-error-icon-path {
+	fill: #000;
+}
diff --git a/designer/css/designer-light.css b/designer/css/designer-light.css
@@ -162,3 +162,6 @@
 .sqd-theme-light .sqd-validation-error {
 	fill: #FFA200;
 }
+.sqd-theme-light .sqd-validation-error-icon-path {
+	fill: #000;
+}
diff --git a/designer/package.json b/designer/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "sequential-workflow-designer",
-	"version": "0.5.0",
+	"version": "0.5.1",
 	"main": "./lib/index.mjs",
 	"types": "./lib/index.d.ts",
 	"repository": {
diff --git a/designer/src/core/icons.ts b/designer/src/core/icons.ts
@@ -25,6 +25,8 @@ export class Icons {
 	public static options =
 		'm19.4 44-1-6.3q-.95-.35-2-.95t-1.85-1.25l-5.9 2.7L4 30l5.4-3.95q-.1-.45-.125-1.025Q9.25 24.45 9.25 24q0-.45.025-1.025T9.4 21.95L4 18l4.65-8.2 5.9 2.7q.8-.65 1.85-1.25t2-.9l1-6.35h9.2l1 6.3q.95.35 2.025.925Q32.7 11.8 33.45 12.5l5.9-2.7L44 18l-5.4 3.85q.1.5.125 1.075.025.575.025 1.075t-.025 1.05q-.025.55-.125 1.05L44 30l-4.65 8.2-5.9-2.7q-.8.65-1.825 1.275-1.025.625-2.025.925l-1 6.3ZM24 30.5q2.7 0 4.6-1.9 1.9-1.9 1.9-4.6 0-2.7-1.9-4.6-1.9-1.9-4.6-1.9-2.7 0-4.6 1.9-1.9 1.9-1.9 4.6 0 2.7 1.9 4.6 1.9 1.9 4.6 1.9Z';
 	public static expand = 'm24 30.75-12-12 2.15-2.15L24 26.5l9.85-9.85L36 18.8Z';
+	public static alert =
+		'M24 42q-1.45 0-2.475-1.025Q20.5 39.95 20.5 38.5q0-1.45 1.025-2.475Q22.55 35 24 35q1.45 0 2.475 1.025Q27.5 37.05 27.5 38.5q0 1.45-1.025 2.475Q25.45 42 24 42Zm-3.5-12V6h7v24Z';
 
 	public static appendPath(parent: SVGElement, pathClassName: string, d: string, size: number): SVGGElement {
 		const g = Dom.svg('g');
diff --git a/designer/src/core/steps-traverser.spec.ts b/designer/src/core/steps-traverser.spec.ts
@@ -1,5 +1,5 @@
 import { ContainerStep, Step, SwitchStep, TaskStep } from '../definition';
-import { StepExtensionsResolver } from '../workspace/step-extensions-resolver';
+import { StepExtensionResolver } from '../workspace/step-extension-resolver';
 import { StepsTraverser } from './steps-traverser';
 
 describe('StepsTraverser', () => {
@@ -49,7 +49,7 @@ describe('StepsTraverser', () => {
 	let traverser: StepsTraverser;
 
 	beforeAll(() => {
-		const extensions = StepExtensionsResolver.resolve([]);
+		const extensions = StepExtensionResolver.create([]);
 		traverser = new StepsTraverser(extensions);
 	});
 
diff --git a/designer/src/core/steps-traverser.ts b/designer/src/core/steps-traverser.ts
@@ -1,6 +1,6 @@
 import { Branches, Definition, Sequence, Step } from '../definition';
 import { StepChildrenType, StepChildren } from '../designer-configuration';
-import { StepExtensionDictionary } from '../workspace/component-context';
+import { StepExtensionResolver } from '../workspace/step-extension-resolver';
 
 export interface StepWithParentSequence {
 	step: Step;
@@ -22,14 +22,11 @@ export interface StepWithParentAndChildSequences {
 }
 
 export class StepsTraverser {
-	public constructor(private readonly stepExtensions: StepExtensionDictionary) {}
+	public constructor(private readonly stepExtensionResolver: StepExtensionResolver) {}
 
 	private getChildren(step: Step): StepChildren | null {
-		const extension = this.stepExtensions[step.componentType];
-		if (!extension) {
-			throw new Error(`Not supported component type: ${step.componentType}`);
-		}
-		return extension.getChildren(step);
+		const stepExtension = this.stepExtensionResolver.resolve(step.componentType);
+		return stepExtension.getChildren(step);
 	}
 
 	private find(
diff --git a/designer/src/designer-context.ts b/designer/src/designer-context.ts
@@ -7,15 +7,15 @@ import { DesignerConfiguration } from './designer-configuration';
 import { DesignerState } from './designer-state';
 import { HistoryController } from './history-controller';
 import { LayoutController } from './layout-controller';
-import { StepExtensionDictionary } from './workspace/component-context';
+import { StepExtensionResolver } from './workspace/step-extension-resolver';
 import { WorkspaceController, WorkspaceControllerWrapper } from './workspace/workspace-controller';
 
 export class DesignerContext {
 	public static create(
 		parent: HTMLElement,
 		startDefinition: Definition,
 		configuration: DesignerConfiguration,
-		stepExtensions: StepExtensionDictionary
+		stepExtensionResolver: StepExtensionResolver
 	): DesignerContext {
 		const definition = ObjectCloner.deepClone(startDefinition);
 
@@ -26,7 +26,7 @@ export class DesignerContext {
 		const state = new DesignerState(definition, isReadonly, isMobile, isMobile);
 		const workspaceController = new WorkspaceControllerWrapper();
 		const behaviorController = new BehaviorController();
-		const stepsTraverser = new StepsTraverser(stepExtensions);
+		const stepsTraverser = new StepsTraverser(stepExtensionResolver);
 		const definitionModifier = new DefinitionModifier(stepsTraverser, state, configuration);
 
 		let historyController: HistoryController | undefined = undefined;
diff --git a/designer/src/designer.ts b/designer/src/designer.ts
@@ -7,7 +7,7 @@ import { DesignerState } from './designer-state';
 import { DefinitionModifier } from './definition-modifier';
 import { WorkspaceController } from './workspace/workspace-controller';
 import { ComponentContext } from './workspace/component-context';
-import { StepExtensionsResolver } from './workspace/step-extensions-resolver';
+import { StepExtensionResolver } from './workspace/step-extension-resolver';
 import { StepOrName, StepsTraverser } from './core/steps-traverser';
 
 export class Designer {
@@ -19,10 +19,10 @@ export class Designer {
 	 * @returns An instance of a designer.
 	 */
 	public static create(placeholder: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration): Designer {
-		const stepExtensions = StepExtensionsResolver.resolve(configuration.extensions);
+		const stepExtensionResolver = StepExtensionResolver.create(configuration.extensions);
 
-		const designerContext = DesignerContext.create(placeholder, startDefinition, configuration, stepExtensions);
-		const componentContext = ComponentContext.create(configuration.steps, stepExtensions);
+		const designerContext = DesignerContext.create(placeholder, startDefinition, configuration, stepExtensionResolver);
+		const componentContext = ComponentContext.create(configuration.steps, stepExtensionResolver);
 
 		const view = DesignerView.create(placeholder, designerContext, componentContext, designerContext.layoutController, configuration);
 		const designer = new Designer(
diff --git a/designer/src/test-tools/stubs.ts b/designer/src/test-tools/stubs.ts
@@ -2,7 +2,7 @@ import { Definition, Step } from '../definition';
 import { DesignerConfiguration } from '../designer-configuration';
 import { DesignerContext } from '../designer-context';
 import { ComponentContext } from '../workspace/component-context';
-import { StepExtensionsResolver } from '../workspace/step-extensions-resolver';
+import { StepExtensionResolver } from '../workspace/step-extension-resolver';
 
 export function createDesignerConfigurationStub(): DesignerConfiguration {
 	return {
@@ -36,11 +36,11 @@ export function createDefinitionStub(): Definition {
 
 export function createDesignerContextStub(): DesignerContext {
 	const parent = document.createElement('div');
-	const extensions = StepExtensionsResolver.resolve([]);
-	return DesignerContext.create(parent, createDefinitionStub(), createDesignerConfigurationStub(), extensions);
+	const resolver = StepExtensionResolver.create([]);
+	return DesignerContext.create(parent, createDefinitionStub(), createDesignerConfigurationStub(), resolver);
 }
 
 export function createComponentContextStub(): ComponentContext {
-	const extensions = StepExtensionsResolver.resolve([]);
-	return ComponentContext.create(createDesignerConfigurationStub().steps, extensions);
+	const resolver = StepExtensionResolver.create([]);
+	return ComponentContext.create(createDesignerConfigurationStub().steps, resolver);
 }
diff --git a/designer/src/workspace/common-views/validation-error-view.spec.ts b/designer/src/workspace/common-views/validation-error-view.spec.ts
@@ -2,9 +2,21 @@ import { Dom } from '../../core/dom';
 import { ValidationErrorView } from './validation-error-view';
 
 describe('ValidationErrorView', () => {
-	it('create() creates view', () => {
+	it('shows and hides view', () => {
 		const parent = Dom.svg('svg');
-		ValidationErrorView.create(parent, 10, 10);
-		expect(parent.children.length).not.toEqual(0);
+		const view = ValidationErrorView.create(parent, 10, 10);
+
+		expect(parent.children.length).toEqual(0);
+
+		view.setIsHidden(false);
+		expect(parent.children.length).toEqual(1);
+		const g = parent.children[0];
+
+		view.setIsHidden(false);
+		expect(parent.children.length).toEqual(1);
+		expect(parent.children[0]).toEqual(g);
+
+		view.setIsHidden(true);
+		expect(parent.children.length).toEqual(0);
 	});
 });
diff --git a/designer/src/workspace/common-views/validation-error-view.ts b/designer/src/workspace/common-views/validation-error-view.ts
@@ -1,27 +1,41 @@
+import { Icons } from '../../core';
 import { Dom } from '../../core/dom';
 
-const SIZE = 20;
+const SIZE = 22;
+const ICON_SIZE = 12;
 
 export class ValidationErrorView {
 	public static create(parent: SVGElement, x: number, y: number): ValidationErrorView {
-		const g = Dom.svg('g', {
-			class: 'sqd-hidden'
-		});
-		Dom.translate(g, x, y);
-
-		const circle = Dom.svg('path', {
-			class: 'sqd-validation-error',
-			d: `M 0 ${-SIZE / 2} l ${SIZE / 2} ${SIZE} l ${-SIZE} 0 Z`
-		});
-
-		g.appendChild(circle);
-		parent.appendChild(g);
-		return new ValidationErrorView(g);
+		return new ValidationErrorView(parent, x, y);
 	}
 
-	public constructor(private readonly g: SVGElement) {}
+	private g?: SVGElement;
+
+	public constructor(private readonly parent: SVGElement, private readonly x: number, private readonly y: number) {}
 
 	public setIsHidden(isHidden: boolean) {
-		Dom.toggleClass(this.g, isHidden, 'sqd-hidden');
+		if (isHidden) {
+			if (this.g) {
+				this.parent.removeChild(this.g);
+				this.g = undefined;
+			}
+		} else if (!this.g) {
+			this.g = Dom.svg('g');
+			Dom.translate(this.g, this.x, this.y);
+
+			const halfOfSize = SIZE / 2;
+			const circle = Dom.svg('path', {
+				class: 'sqd-validation-error',
+				d: `M 0 ${-halfOfSize} l ${halfOfSize} ${SIZE} l ${-SIZE} 0 Z`
+			});
+			this.g.appendChild(circle);
+
+			const icon = Icons.appendPath(this.g, 'sqd-validation-error-icon-path', Icons.alert, ICON_SIZE);
+			const offsetX = (SIZE - ICON_SIZE) * 0.5;
+			const offsetY = offsetX * 1.5; // 0.5 * 1.5 = 0.75
+			Dom.translate(icon, -halfOfSize + offsetX, -halfOfSize + offsetY);
+
+			this.parent.appendChild(this.g);
+		}
 	}
 }
diff --git a/designer/src/workspace/component-context.ts b/designer/src/workspace/component-context.ts
@@ -1,11 +1,10 @@
-import { StepExtension, StepsConfiguration } from '../designer-configuration';
+import { StepsConfiguration } from '../designer-configuration';
 import { StepComponentFactory } from './step-component-factory';
-
-export type StepExtensionDictionary = Record<string, StepExtension>;
+import { StepExtensionResolver } from './step-extension-resolver';
 
 export class ComponentContext {
-	public static create(configuration: StepsConfiguration, stepExtensions: StepExtensionDictionary): ComponentContext {
-		return new ComponentContext(configuration, new StepComponentFactory(stepExtensions));
+	public static create(configuration: StepsConfiguration, stepExtensionResolver: StepExtensionResolver): ComponentContext {
+		return new ComponentContext(configuration, new StepComponentFactory(stepExtensionResolver));
 	}
 
 	private constructor(public readonly configuration: StepsConfiguration, public readonly stepComponentFactory: StepComponentFactory) {}
diff --git a/designer/src/workspace/step-component-factory.ts b/designer/src/workspace/step-component-factory.ts
@@ -1,15 +1,13 @@
 import { Sequence, Step } from '../definition';
 import { StepComponent } from './component';
-import { ComponentContext, StepExtensionDictionary } from './component-context';
+import { ComponentContext } from './component-context';
+import { StepExtensionResolver } from './step-extension-resolver';
 
 export class StepComponentFactory {
-	public constructor(private readonly extensions: StepExtensionDictionary) {}
+	public constructor(private readonly stepExtensionResolver: StepExtensionResolver) {}
 
 	public create(parentElement: SVGElement, step: Step, parentSequence: Sequence, context: ComponentContext): StepComponent {
-		const extension = this.extensions[step.componentType];
-		if (!extension) {
-			throw new Error(`Unknown component type: ${step.componentType}`);
-		}
-		return extension.createComponent(parentElement, step, parentSequence, context);
+		const stepExtension = this.stepExtensionResolver.resolve(step.componentType);
+		return stepExtension.createComponent(parentElement, step, parentSequence, context);
 	}
 }
diff --git a/designer/src/workspace/step-extension-resolver.spec.ts b/designer/src/workspace/step-extension-resolver.spec.ts
@@ -0,0 +1,46 @@
+import { Step } from '../definition';
+import { StepComponent } from './component';
+import { DesignerExtension, StepExtension } from '../designer-configuration';
+import { StepExtensionResolver } from './step-extension-resolver';
+
+class OwnTaskStepExtension implements StepExtension<Step> {
+	public readonly componentType = 'task';
+
+	public createComponent(): StepComponent {
+		throw new Error('Not implemented');
+	}
+	public getChildren() {
+		return null;
+	}
+}
+
+const ownTaskStepExtension = new OwnTaskStepExtension();
+
+class OwnTaskDesignerExtension implements DesignerExtension {
+	public readonly name: string = 'test';
+	public steps: StepExtension<Step>[] = [ownTaskStepExtension];
+}
+
+describe('StepExtensionsResolver', () => {
+	describe('default resolver', () => {
+		const resolver = StepExtensionResolver.create([]);
+
+		it('resolves task', () => {
+			expect(resolver.resolve('task')).toBeDefined();
+		});
+
+		it('resolves switch', () => {
+			expect(resolver.resolve('switch')).toBeDefined();
+		});
+
+		it('resolves container', () => {
+			expect(resolver.resolve('container')).toBeDefined();
+		});
+	});
+
+	it('can replace default extension', () => {
+		const resolver = StepExtensionResolver.create([new OwnTaskDesignerExtension()]);
+
+		expect(resolver.resolve('task')).toEqual(ownTaskStepExtension);
+	});
+});
diff --git a/designer/src/workspace/step-extension-resolver.ts b/designer/src/workspace/step-extension-resolver.ts
@@ -0,0 +1,32 @@
+import { ComponentType, Step } from '../definition';
+import { DesignerExtension, StepExtension } from '../designer-configuration';
+import { ContainerStepExtension } from './container-step/container-step-extension';
+import { SwitchStepExtension } from './switch-step/switch-step-extension';
+import { TaskStepExtension } from './task-step/task-step-extension';
+
+type StepExtensionDictionary = Record<string, StepExtension>;
+
+export class StepExtensionResolver {
+	public static create(extensions: DesignerExtension[] | undefined): StepExtensionResolver {
+		const dict: StepExtensionDictionary = {};
+		dict['task'] = new TaskStepExtension();
+		dict['switch'] = new SwitchStepExtension();
+		dict['container'] = new ContainerStepExtension();
+		if (extensions) {
+			for (const extension of extensions) {
+				extension.steps.forEach(stepExt => (dict[stepExt.componentType] = stepExt));
+			}
+		}
+		return new StepExtensionResolver(dict);
+	}
+
+	private constructor(private readonly dict: StepExtensionDictionary) {}
+
+	public resolve(componentType: ComponentType): StepExtension<Step> {
+		const extension = this.dict[componentType];
+		if (!extension) {
+			throw new Error(`Not supported component type: ${componentType}`);
+		}
+		return extension;
+	}
+}
diff --git a/designer/src/workspace/step-extensions-resolver.ts b/designer/src/workspace/step-extensions-resolver.ts
diff --git a/designer/src/workspace/switch-step/switch-step-component-view.ts b/designer/src/workspace/switch-step/switch-step-component-view.ts
diff --git a/examples/assets/lib.js b/examples/assets/lib.js
diff --git a/examples/assets/light-dark.js b/examples/assets/light-dark.js

-Original file line number
+Diff line change
 import { Designer } from 'sequential-workflow-designer';
 ```
 -If you use [css-loader](https://webpack.js.org/loaders/css-loader/) or similar, you can add CSS files to your boundle:
 +If you use [css-loader](https://webpack.js.org/loaders/css-loader/) or similar, you can add CSS files to your bundle:
 ```ts
 import 'sequential-workflow-designer/css/designer.css';
 ```html
 <head>
 ...
 -<link href="https://cdn.jsdelivr.net/npm/[email protected].0/css/designer.css" rel="stylesheet">
 -<link href="https://cdn.jsdelivr.net/npm/[email protected].0/css/designer-light.css" rel="stylesheet">
 -<link href="https://cdn.jsdelivr.net/npm/[email protected].0/css/designer-dark.css" rel="stylesheet">
 -<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/index.umd.js"></script>
 +<link href="https://cdn.jsdelivr.net/npm/[email protected].1/css/designer.css" rel="stylesheet">
 +<link href="https://cdn.jsdelivr.net/npm/[email protected].1/css/designer-light.css" rel="stylesheet">
 +<link href="https://cdn.jsdelivr.net/npm/[email protected].1/css/designer-dark.css" rel="stylesheet">
 +<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/index.umd.js"></script>
 ```
 Call the designer by:
Original file line number	Diff line number	Diff line change
`@@ -162,3 +162,6 @@`
`162`	`162`	`.sqd-theme-dark .sqd-validation-error {`
`163`	`163`	`fill: #FFA200;`
`164`	`164`	`}`
	`165`	`+.sqd-theme-dark .sqd-validation-error-icon-path {`
	`166`	`+ fill: #000;`
	`167`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "sequential-workflow-designer",`
`3`		`- "version": "0.5.0",`
	`3`	`+ "version": "0.5.1",`
`4`	`4`	`"main": "./lib/index.mjs",`
`5`	`5`	`"types": "./lib/index.d.ts",`
`6`	`6`	`"repository": {`