component extensions.

Author: b4rtaz

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 0.3.0
+
+This version introduces component extensions. By this it's possible to create own components. Breaking changes:
+
+* Static method `Designer.utils.getParents()` is deleted. You should use the `getStepParents()` method from the `Designer` class. Example: `designer.getStepParents(needleStep)`
+* The `ComponentType` is not an enum anymore. It's type (`string`). This change doesn't affect serialized JSONs.
+
 ## 0.2.3
 
 Improved rendering of the switch step for 3 and more branches.

designer/package.json

@@ -22,8 +22,7 @@
 		"test:single": "karma start --single-run",
 		"eslint": "eslint ./src --ext .ts",
 		"prettier": "prettier --check ./src",
-		"prettier:fix": "prettier --write ./src",
-		"serve": "http-server ./"
+		"prettier:fix": "prettier --write ./src"
 	},
 	"author": "b4rtaz",
 	"license": "MIT",
@@ -32,7 +31,6 @@
 		"@typescript-eslint/eslint-plugin": "^5.40.0",
 		"@typescript-eslint/parser": "^5.40.0",
 		"eslint": "^8.25.0",
-		"http-server": "^14.1.1",
 		"karma": "^6.3.20",
 		"karma-chrome-launcher": "^3.1.1",
 		"karma-jasmine": "^5.0.1",

designer/src/behaviors/drag-step-behavior-view.spec.ts

@@ -1,4 +1,4 @@
-import { createDesignerConfigurationStub, createStepStub } from '../test-tools/stubs';
+import { createComponentContextStub, createDesignerConfigurationStub, createStepStub } from '../test-tools/stubs';
 import { DragStepView } from './drag-step-behavior-view';
 
 describe('DragStepView', () => {
@@ -7,8 +7,9 @@ describe('DragStepView', () => {
 
 		const step = createStepStub();
 		const configuration = createDesignerConfigurationStub();
+		const context = createComponentContextStub();
 
-		const component = DragStepView.create(step, configuration);
+		const component = DragStepView.create(step, configuration, context);
 
 		expect(component).toBeDefined();
 		expect(appendChildSpy).toHaveBeenCalled();

designer/src/behaviors/drag-step-behavior-view.ts

@@ -2,12 +2,12 @@ import { Dom } from '../core/dom';
 import { Vector } from '../core/vector';
 import { Sequence, Step } from '../definition';
 import { DesignerConfiguration } from '../designer-configuration';
-import { StepComponentFactory } from '../workspace/step-component-factory';
+import { ComponentContext } from '../workspace/component-context';
 
 const SAFE_OFFSET = 10;
 
 export class DragStepView {
-	public static create(step: Step, configuration: DesignerConfiguration): DragStepView {
+	public static create(step: Step, configuration: DesignerConfiguration, context: ComponentContext): DragStepView {
 		const theme = configuration.theme || 'light';
 		const layer = Dom.element('div', {
 			class: `sqd-drag sqd-theme-${theme}`
@@ -18,7 +18,7 @@ export class DragStepView {
 		layer.appendChild(canvas);
 
 		const fakeSequence: Sequence = [];
-		const stepComponent = StepComponentFactory.create(canvas, step, fakeSequence, configuration.steps);
+		const stepComponent = context.stepComponentFactory.create(canvas, step, fakeSequence, context);
 
 		Dom.attrs(canvas, {
 			width: stepComponent.view.width + SAFE_OFFSET * 2,

designer/src/behaviors/drag-step-behavior.ts

@@ -8,16 +8,22 @@ import { PlaceholderFinder } from './placeholder-finder';
 import { DesignerState } from '../designer-state';
 import { DefinitionModifier } from '../definition-modifier';
 import { WorkspaceController } from '../workspace/workspace-controller';
+import { ComponentContext } from '../workspace/component-context';
 
 export class DragStepBehavior implements Behavior {
-	public static create(context: DesignerContext, step: Step, movingStepComponent?: StepComponent): DragStepBehavior {
-		const view = DragStepView.create(step, context.configuration);
+	public static create(
+		designerContext: DesignerContext,
+		componentContext: ComponentContext,
+		step: Step,
+		movingStepComponent?: StepComponent
+	): DragStepBehavior {
+		const view = DragStepView.create(step, designerContext.configuration, componentContext);
 		return new DragStepBehavior(
 			view,
-			context.workspaceController,
-			context.state,
+			designerContext.workspaceController,
+			designerContext.state,
 			step,
-			context.definitionModifier,
+			designerContext.definitionModifier,
 			movingStepComponent
 		);
 	}

designer/src/behaviors/select-step-behavior.spec.ts

@@ -1,5 +1,5 @@
 import { Step } from '../definition';
-import { createDesignerContextStub, createStepStub } from '../test-tools/stubs';
+import { createComponentContextStub, createDesignerContextStub, createStepStub } from '../test-tools/stubs';
 import { StepComponent } from '../workspace/component';
 import { SelectStepBehavior } from './select-step-behavior';
 
@@ -11,10 +11,11 @@ describe('SelectStepBehavior', () => {
 		const stepComponent = jasmine.createSpyObj<StepComponent>('StepComponent', ['setState'], {
 			step
 		});
-		const context = createDesignerContextStub();
-		context.state.onSelectedStepChanged.subscribe(s => (selectedStep = s));
+		const designerContext = createDesignerContextStub();
+		const componentContext = createComponentContextStub();
+		designerContext.state.onSelectedStepChanged.subscribe(s => (selectedStep = s));
 
-		const behavior = SelectStepBehavior.create(stepComponent, context);
+		const behavior = SelectStepBehavior.create(stepComponent, designerContext, componentContext);
 
 		behavior.onStart();
 		behavior.onEnd(false);

designer/src/behaviors/select-step-behavior.ts

@@ -2,17 +2,23 @@ import { Vector } from '../core/vector';
 import { DesignerContext } from '../designer-context';
 import { DesignerState } from '../designer-state';
 import { StepComponent } from '../workspace/component';
+import { ComponentContext } from '../workspace/component-context';
 import { Behavior } from './behavior';
 import { DragStepBehavior } from './drag-step-behavior';
 
 export class SelectStepBehavior implements Behavior {
-	public static create(pressedStepComponent: StepComponent, context: DesignerContext): SelectStepBehavior {
-		return new SelectStepBehavior(pressedStepComponent, context, context.state);
+	public static create(
+		pressedStepComponent: StepComponent,
+		designerContext: DesignerContext,
+		componentContext: ComponentContext
+	): SelectStepBehavior {
+		return new SelectStepBehavior(pressedStepComponent, designerContext, componentContext, designerContext.state);
 	}
 
 	private constructor(
 		private readonly pressedStepComponent: StepComponent,
-		private readonly context: DesignerContext,
+		private readonly designerContext: DesignerContext,
+		private readonly componentContext: ComponentContext,
 		private readonly state: DesignerState
 	) {}
 
@@ -23,7 +29,12 @@ export class SelectStepBehavior implements Behavior {
 	public onMove(delta: Vector): Behavior | void {
 		if (!this.state.isReadonly && delta.distance() > 2) {
 			this.state.setSelectedStep(null);
-			return DragStepBehavior.create(this.context, this.pressedStepComponent.step, this.pressedStepComponent);
+			return DragStepBehavior.create(
+				this.designerContext,
+				this.componentContext,
+				this.pressedStepComponent.step,
+				this.pressedStepComponent
+			);
 		}
 	}
 

designer/src/core/sequence-modifier.spec.ts

@@ -1,32 +1,32 @@
-import { Sequence, ComponentType, TaskStep } from '../definition';
+import { Sequence, TaskStep } from '../definition';
 import { SequenceModifier } from './sequence-modifier';
 
 describe('SequenceModifier', () => {
 	const A: TaskStep = {
 		id: '0x1',
 		name: 'A',
-		componentType: ComponentType.task,
+		componentType: 'task',
 		type: 'a',
 		properties: {}
 	};
 	const B: TaskStep = {
 		id: '0x2',
 		name: 'B',
-		componentType: ComponentType.task,
+		componentType: 'task',
 		type: 'b',
 		properties: {}
 	};
 	const C: TaskStep = {
 		id: '0x3',
 		name: 'C',
-		componentType: ComponentType.task,
+		componentType: 'task',
 		type: 'c',
 		properties: {}
 	};
 	const D: TaskStep = {
 		id: '0x4',
 		name: 'D',
-		componentType: ComponentType.task,
+		componentType: 'task',
 		type: 'd',
 		properties: {}
 	};

designer/src/core/steps-traverser.spec.ts

@@ -1,10 +1,11 @@
-import { ComponentType, ContainerStep, Step, SwitchStep, TaskStep } from '../definition';
+import { ContainerStep, Step, SwitchStep, TaskStep } from '../definition';
+import { StepExtensionsResolver } from '../workspace/step-extensions-resolver';
 import { StepsTraverser } from './steps-traverser';
 
 describe('StepsTraverser', () => {
 	function createIf(name: string, falseStep: Step): SwitchStep {
 		return {
-			componentType: ComponentType.switch,
+			componentType: 'switch',
 			id: 'if' + name,
 			type: 'if' + name,
 			name,
@@ -18,7 +19,7 @@ describe('StepsTraverser', () => {
 
 	function createTask(name: string): TaskStep {
 		return {
-			componentType: ComponentType.task,
+			componentType: 'task',
 			id: 'task' + name,
 			type: 'task' + name,
 			name,
@@ -30,7 +31,7 @@ describe('StepsTraverser', () => {
 	const ifAlfa = createIf('beta', taskFoo);
 	const ifBeta = createIf('alfa', ifAlfa);
 	const loop = {
-		componentType: ComponentType.container,
+		componentType: 'container',
 		id: 'loop',
 		name: 'loop',
 		type: 'loop',
@@ -45,9 +46,16 @@ describe('StepsTraverser', () => {
 		properties: {}
 	};
 
+	let traverser: StepsTraverser;
+
+	beforeAll(() => {
+		const extensions = StepExtensionsResolver.resolve({});
+		traverser = new StepsTraverser(extensions);
+	});
+
 	describe('getParents', () => {
 		it('returns task parents', () => {
-			const parents = StepsTraverser.getParents(definition, taskFoo);
+			const parents = traverser.getParents(definition, taskFoo);
 			expect(parents.length).toEqual(6);
 			expect(parents[0]).toEqual(loop);
 			expect(parents[1]).toEqual(ifBeta);
@@ -58,37 +66,37 @@ describe('StepsTraverser', () => {
 		});
 
 		it('returns alfa parents', () => {
-			const parents = StepsTraverser.getParents(definition, ifBeta);
+			const parents = traverser.getParents(definition, ifBeta);
 			expect(parents.length).toEqual(2);
 			expect(parents[0]).toEqual(loop);
 			expect(parents[1]).toEqual(ifBeta);
 		});
 
 		it('returns loop parents', () => {
-			const parents = StepsTraverser.getParents(definition, loop);
+			const parents = traverser.getParents(definition, loop);
 			expect(parents.length).toEqual(1);
 			expect(parents[0]).toEqual(loop);
 		});
 	});
 
 	describe('findById', () => {
 		it('returns null when stepId not exists', () => {
-			const found = StepsTraverser.findById(definition, 'undefined');
+			const found = traverser.findById(definition, 'undefined');
 			expect(found).toBeNull();
 		});
 
 		it('returns task step', () => {
-			const found = StepsTraverser.findById(definition, taskFoo.id);
+			const found = traverser.findById(definition, taskFoo.id);
 			expect(found).toEqual(taskFoo);
 		});
 
 		it('returns container step', () => {
-			const found = StepsTraverser.findById(definition, loop.id);
+			const found = traverser.findById(definition, loop.id);
 			expect(found).toEqual(loop);
 		});
 
 		it('returns switch step', () => {
-			const found = StepsTraverser.findById(definition, ifBeta.id);
+			const found = traverser.findById(definition, ifBeta.id);
 			expect(found).toEqual(ifBeta);
 		});
 	});