basic keyboard support.

b4rtaz · b4rtaz · commit 70cea0288016 · 2022-07-16T17:32:28.000+02:00
diff --git a/README.md b/README.md
@@ -83,10 +83,11 @@ const placeholder = document.getElementById('placeholder');
 
 const definition = {
   properties: {
-    // global properties
+    'myProperty': 'my-value',
+    // global properties...
   },
   sequence: [
-    // root steps
+    // root steps...
   ]
 };
 
diff --git a/css/designer.css b/css/designer.css
@@ -30,6 +30,7 @@
 	box-sizing: border-box;
 	border-radius: 10px;
 	width: 130px;
+	user-select: none;
 }
 .sqd-toolbox-header {
 	position: relative;
@@ -149,6 +150,7 @@
 	flex: 1;
 	position: relative;
 	display: block;
+	user-select: none;
 }
 .sqd-workspace-canvas {
 	position: absolute;
diff --git a/examples/assets/fullscreen.js b/examples/assets/fullscreen.js
@@ -1,22 +1,18 @@
 /* global document, sequentialWorkflowDesigner, console */
 
-function uid() {
-	return Math.ceil(Math.random() * 10**16).toString(16);
-}
-
-function createTaskStep(type, name) {
+function createTaskStep(id, type, name) {
 	return {
-		id: uid(),
+		id,
 		componentType: 'task',
 		type,
 		name,
 		properties: {}
 	};
 }
 
-function createIfStep(_true, _false) {
+function createIfStep(id, _true, _false) {
 	return {
-		id: uid(),
+		id,
 		componentType: 'switch',
 		type: 'if',
 		name: 'If',
@@ -28,9 +24,9 @@ function createIfStep(_true, _false) {
 	};
 }
 
-function createContainerStep(steps) {
+function createContainerStep(id, steps) {
 	return {
-		id: uid(),
+		id,
 		componentType: 'container',
 		type: 'loop',
 		name: 'Loop',
@@ -43,11 +39,11 @@ function toolboxGroup(name) {
 	return {
 		name,
 		steps: [
-			createTaskStep('save', 'Save file'),
-			createTaskStep('text', 'Send email'),
-			createTaskStep('task', 'Create task'),
-			createIfStep([], []),
-			createContainerStep([])
+			createTaskStep(null, 'save', 'Save file'),
+			createTaskStep(null, 'text', 'Send email'),
+			createTaskStep(null, 'task', 'Create task'),
+			createIfStep(null, [], []),
+			createContainerStep(null, [])
 		]
 	};
 }
@@ -102,18 +98,18 @@ const configuration = {
 const startDefinition = {
 	properties: {},
 	sequence: [
-		createIfStep(
-			[ createTaskStep('save', 'Save file') ],
-			[ createTaskStep('text', 'Send email') ]
+		createIfStep('00000000000000000000000000000001',
+			[ createTaskStep('00000000000000000000000000000002', 'save', 'Save file') ],
+			[ createTaskStep('00000000000000000000000000000003', 'text', 'Send email') ]
 		),
-		createContainerStep([
-			createTaskStep('task', 'Create task')
+		createContainerStep('00000000000000000000000000000004', [
+			createTaskStep('00000000000000000000000000000005', 'task', 'Create task')
 		])
 	]
 };
 
 const placeholder = document.getElementById('designer');
 designer = sequentialWorkflowDesigner.create(placeholder, startDefinition, configuration);
-designer.onDefinitionChanged.subscribe(() => {
-	console.log('the definition has changed');
+designer.onDefinitionChanged.subscribe((newDefinition) => {
+	console.log('the definition has changed', newDefinition);
 });
diff --git a/examples/assets/image-filter.js b/examples/assets/image-filter.js
@@ -79,9 +79,9 @@ async function renderImage(definition) {
 	context.putImageData(imageData, 0, 0);
 }
 
-function createTaskStep(type, name) {
+function createTaskStep(id, type, name) {
 	return {
-		id: '0x0',
+		id,
 		componentType: 'task',
 		type,
 		name,
@@ -98,10 +98,10 @@ const configuration = {
 			{
 				name: 'Filters',
 				steps: [
-					createTaskStep('grayscale', 'Grayscale'),
-					createTaskStep('reverse-color', 'Reverse color'),
-					createTaskStep('contrast', 'Contrast'),
-					createTaskStep('shift-color', 'Shift color')
+					createTaskStep(null, 'grayscale', 'Grayscale'),
+					createTaskStep(null, 'reverse-color', 'Reverse color'),
+					createTaskStep(null, 'contrast', 'Contrast'),
+					createTaskStep(null, 'shift-color', 'Shift color')
 				]
 			}
 		]
@@ -129,7 +129,7 @@ const configuration = {
 const startDefinition = {
 	properties: {},
 	sequence: [
-		createTaskStep('contrast', 'Contrast')
+		createTaskStep('00000000000000000000000000000001', 'contrast', 'Contrast')
 	]
 };
 
diff --git a/examples/assets/light-dark.js b/examples/assets/light-dark.js
@@ -1,8 +1,8 @@
 /* global window, document, sequentialWorkflowDesigner */
 
-function createStep() {
+function createStep(id) {
 	return {
-		id: '0x0',
+		id,
 		componentType: 'task',
 		type: 'task',
 		name: 'Open TCP port',
@@ -13,7 +13,7 @@ function createStep() {
 function install(placeholder, theme) {
 	const definition = {
 		sequence: [
-			createStep()
+			createStep('00000000000000000000000000000000')
 		],
 		properties: {}
 	};
@@ -25,7 +25,7 @@ function install(placeholder, theme) {
 				{
 					name: 'Tasks',
 					steps: [
-						createStep()
+						createStep(null)
 					]
 				}
 			]
diff --git a/src/control-bar/control-bar.ts b/src/control-bar/control-bar.ts
@@ -1,4 +1,3 @@
-import { SequenceModifier } from '../core/sequence-modifier';
 import { DesignerContext } from '../designer-context';
 import { ControlBarView } from './control-bar-view';
 
@@ -40,11 +39,7 @@ export class ControlBar {
 
 	private onDeleteButtonClicked() {
 		if (this.context.selectedStep) {
-			const parentSequence = this.context.getSelectedStepParentSequence();
-			SequenceModifier.deleteStep(this.context.selectedStep, parentSequence);
-
-			this.context.setSelectedStep(null);
-			this.context.notifiyDefinitionChanged();
+			this.context.deleteStepById(this.context.selectedStep.id);
 		}
 	}
 
diff --git a/src/designer-configuration.ts b/src/designer-configuration.ts
@@ -14,9 +14,11 @@ export interface ToolboxConfiguration {
 	groups: ToolboxGroupConfiguration[];
 }
 
+export type StepDefinition = Omit<Step, 'id'>;
+
 export interface ToolboxGroupConfiguration {
 	name: string;
-	steps: Step[];
+	steps: StepDefinition[];
 }
 
 export interface StepsConfiguration {
diff --git a/src/designer-context.ts b/src/designer-context.ts
@@ -1,8 +1,9 @@
 import { BehaviorController } from './behaviors/behavior-controller';
 import { animate, Animation } from './core/animation';
+import { SequenceModifier } from './core/sequence-modifier';
 import { SimpleEvent } from './core/simple-event';
 import { Vector } from './core/vector';
-import { Definition, Sequence, Step } from './definition';
+import { Definition, Step } from './definition';
 import { DesignerConfiguration } from './designer-configuration';
 import { LayoutController } from './layout-controller';
 import { Placeholder, StepComponent } from './workspace/component';
@@ -98,15 +99,18 @@ export class DesignerContext {
 		}
 	}
 
-	public getSelectedStepParentSequence(): Sequence {
-		if (!this.selectedStep) {
-			throw new Error('No selected step');
-		}
-		const component = this.getProvider().findStepComponentById(this.selectedStep.id);
+	public deleteStepById(stepId: string) {
+		const component = this.getProvider().findStepComponentById(stepId);
 		if (!component) {
 			throw new Error('Cannot find component');
 		}
-		return component.parentSequence;
+		if (this.selectedStep?.id === stepId) {
+			this.setSelectedStep(null);
+		}
+
+		SequenceModifier.deleteStep(component.step, component.parentSequence);
+
+		this.notifiyDefinitionChanged();
 	}
 
 	public setIsReadonly(isReadonly: boolean) {
diff --git a/src/designer-view.ts b/src/designer-view.ts
@@ -33,6 +33,7 @@ export class DesignerView {
 	}
 
 	private readonly onResizeHandler = () => this.onResize();
+	private readonly onKeyUpHandlers: KeyUpHandler[] = [];
 
 	public constructor(
 		private readonly root: HTMLElement,
@@ -41,7 +42,15 @@ export class DesignerView {
 		private readonly toolbox?: Toolbox
 	) {}
 
+	public bindKeyUp(handler: KeyUpHandler) {
+		document.addEventListener('keyup', handler, false);
+		this.onKeyUpHandlers.push(handler);
+	}
+
 	public destroy() {
+		window.removeEventListener('resize', this.onResizeHandler, false);
+		this.onKeyUpHandlers.forEach(h => document.removeEventListener('keyup', h, false));
+
 		this.workspace.destroy();
 		this.toolbox?.destroy();
 
@@ -58,3 +67,5 @@ export class DesignerView {
 		Dom.toggleClass(this.root, isMobile, 'sqd-layout-mobile');
 	}
 }
+
+export type KeyUpHandler = (e: KeyboardEvent) => void;
diff --git a/src/designer.ts b/src/designer.ts
@@ -18,6 +18,7 @@ export default class Designer {
 
 		const view = DesignerView.create(parent, context, configuration);
 		const designer = new Designer(view, context);
+		view.bindKeyUp(e => designer.onKeyUp(e));
 		context.onDefinitionChanged.subscribe(d => designer.onDefinitionChanged.forward(d));
 		return designer;
 	}
@@ -69,4 +70,22 @@ export default class Designer {
 	public destroy() {
 		this.view.destroy();
 	}
+
+	private onKeyUp(e: KeyboardEvent) {
+		const supportedKeys = ['Backspace', 'Delete'];
+		if (!supportedKeys.includes(e.key)) {
+			return;
+		}
+		const ignoreTagNames = ['input', 'textarea'];
+		if (document.activeElement && ignoreTagNames.includes(document.activeElement.tagName.toLowerCase())) {
+			return;
+		}
+		if (!this.context.selectedStep || this.context.isReadonly || this.context.isDragging) {
+			return;
+		}
+
+		e.preventDefault();
+		e.stopPropagation();
+		this.context.deleteStepById(this.context.selectedStep.id);
+	}
 }
diff --git a/src/toolbox/scrollbox-view.ts b/src/toolbox/scrollbox-view.ts
@@ -74,7 +74,6 @@ export class ScrollBoxView {
 	}
 
 	private onWheel(e: WheelEvent) {
-		e.preventDefault();
 		e.stopPropagation();
 
 		if (this.content) {
@@ -85,12 +84,10 @@ export class ScrollBoxView {
 	}
 
 	private onTouchStart(e: TouchEvent) {
-		e.preventDefault();
 		this.startScroll(readTouchPosition(e));
 	}
 
 	private onMouseDown(e: MouseEvent) {
-		e.preventDefault();
 		this.startScroll(readMousePosition(e));
 	}
 
diff --git a/src/toolbox/toolbox-item-view.ts b/src/toolbox/toolbox-item-view.ts
@@ -1,11 +1,10 @@
 import { Dom } from '../core/dom';
 import { readMousePosition } from '../core/event-readers';
 import { Vector } from '../core/vector';
-import { Step } from '../definition';
-import { StepsConfiguration } from '../designer-configuration';
+import { StepDefinition, StepsConfiguration } from '../designer-configuration';
 
 export class ToolboxItemView {
-	public static create(parent: HTMLElement, step: Step, configuration: StepsConfiguration): ToolboxItemView {
+	public static create(parent: HTMLElement, step: StepDefinition, configuration: StepsConfiguration): ToolboxItemView {
 		const root = Dom.element('div', {
 			class: 'sqd-toolbox-item',
 			title: step.name
@@ -44,7 +43,7 @@ export class ToolboxItemView {
 		this.root.addEventListener(
 			'mousedown',
 			e => {
-				e.preventDefault();
+				e.stopPropagation();
 				handler(readMousePosition(e));
 			},
 			false
diff --git a/src/toolbox/toolbox-item.ts b/src/toolbox/toolbox-item.ts
@@ -4,23 +4,23 @@ import { ObjectCloner } from '../core/object-cloner';
 import { Uid } from '../core/uid';
 import { Vector } from '../core/vector';
 import { Step } from '../definition';
+import { StepDefinition } from '../designer-configuration';
 import { DesignerContext } from '../designer-context';
 import { ToolboxItemView } from './toolbox-item-view';
 
 export class ToolboxItem {
-	public static create(parent: HTMLElement, step: Step, context: DesignerContext): ToolboxItem {
+	public static create(parent: HTMLElement, step: StepDefinition, context: DesignerContext): ToolboxItem {
 		const view = ToolboxItemView.create(parent, step, context.configuration.steps);
 		const item = new ToolboxItem(step, context);
 		view.bindMousedown(e => item.onMousedown(e));
 		view.bindTouchstart(e => item.onTouchstart(e));
 		return item;
 	}
 
-	private constructor(private readonly step: Step, private readonly context: DesignerContext) {}
+	private constructor(private readonly step: StepDefinition, private readonly context: DesignerContext) {}
 
 	private onTouchstart(e: TouchEvent) {
 		if (e.touches.length === 1) {
-			e.preventDefault();
 			e.stopPropagation();
 			this.startDrag(readTouchPosition(e));
 		}
@@ -32,9 +32,14 @@ export class ToolboxItem {
 
 	private startDrag(position: Vector) {
 		if (!this.context.isReadonly) {
-			const newStep = ObjectCloner.deepClone(this.step);
-			newStep.id = Uid.next();
+			const newStep = createStep(this.step);
 			this.context.behaviorController.start(position, DragStepBehavior.create(this.context, newStep));
 		}
 	}
 }
+
+function createStep(step: StepDefinition): Step {
+	const newStep = ObjectCloner.deepClone(step) as Step;
+	newStep.id = Uid.next();
+	return newStep;
+}
diff --git a/src/workspace/workspace-view.ts b/src/workspace/workspace-view.ts

Original file line number	Diff line number	Diff line change
`@@ -79,9 +79,9 @@ async function renderImage(definition) {`
`79`	`79`	`context.putImageData(imageData, 0, 0);`
`80`	`80`	`}`
`81`	`81`
`82`		`-function createTaskStep(type, name) {`
	`82`	`+function createTaskStep(id, type, name) {`
`83`	`83`	`return {`
`84`		`- id: '0x0',`
	`84`	`+ id,`
`85`	`85`	`componentType: 'task',`
`86`	`86`	`type,`
`87`	`87`	`name,`
`@@ -98,10 +98,10 @@ const configuration = {`
`98`	`98`	`{`
`99`	`99`	`name: 'Filters',`
`100`	`100`	`steps: [`
`101`		`- createTaskStep('grayscale', 'Grayscale'),`
`102`		`- createTaskStep('reverse-color', 'Reverse color'),`
`103`		`- createTaskStep('contrast', 'Contrast'),`
`104`		`- createTaskStep('shift-color', 'Shift color')`
	`101`	`+ createTaskStep(null, 'grayscale', 'Grayscale'),`
	`102`	`+ createTaskStep(null, 'reverse-color', 'Reverse color'),`
	`103`	`+ createTaskStep(null, 'contrast', 'Contrast'),`
	`104`	`+ createTaskStep(null, 'shift-color', 'Shift color')`
`105`	`105`	`]`
`106`	`106`	`}`
`107`	`107`	`]`
`@@ -129,7 +129,7 @@ const configuration = {`
`129`	`129`	`const startDefinition = {`
`130`	`130`	`properties: {},`
`131`	`131`	`sequence: [`
`132`		`- createTaskStep('contrast', 'Contrast')`
	`132`	`+ createTaskStep('00000000000000000000000000000001', 'contrast', 'Contrast')`
`133`	`133`	`]`
`134`	`134`	`};`
`135`	`135`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import { SequenceModifier } from '../core/sequence-modifier';`
`2`	`1`	`import { DesignerContext } from '../designer-context';`
`3`	`2`	`import { ControlBarView } from './control-bar-view';`
`4`	`3`
`@@ -40,11 +39,7 @@ export class ControlBar {`
`40`	`39`
`41`	`40`	`private onDeleteButtonClicked() {`
`42`	`41`	`if (this.context.selectedStep) {`
`43`		`- const parentSequence = this.context.getSelectedStepParentSequence();`
`44`		`- SequenceModifier.deleteStep(this.context.selectedStep, parentSequence);`
`45`		`-`
`46`		`- this.context.setSelectedStep(null);`
`47`		`- this.context.notifiyDefinitionChanged();`
	`42`	`+ this.context.deleteStepById(this.context.selectedStep.id);`
`48`	`43`	`}`
`49`	`44`	`}`
`50`	`45`
Original file line number	Diff line number	Diff line change
`@@ -14,9 +14,11 @@ export interface ToolboxConfiguration {`
`14`	`14`	`groups: ToolboxGroupConfiguration[];`
`15`	`15`	`}`
`16`	`16`
	`17`	`+export type StepDefinition = Omit<Step, 'id'>;`
	`18`	`+`
`17`	`19`	`export interface ToolboxGroupConfiguration {`
`18`	`20`	`name: string;`
`19`		`- steps: Step[];`
	`21`	`+ steps: StepDefinition[];`
`20`	`22`	`}`
`21`	`23`
`22`	`24`	`export interface StepsConfiguration {`