better mobile experience.

b4rtaz · b4rtaz · commit 9e51faf5c228 · 2022-07-10T23:12:02.000+02:00
diff --git a/examples/assets/lib.js b/examples/assets/lib.js
@@ -1,7 +1,8 @@
 /* global location, document */
 
-function isLocalhost() {
-	return location.hostname.toLowerCase() === 'localhost';
+function isTestEnv() {
+	return location.hostname.toLowerCase() === 'localhost' ||
+		location.hostname.startsWith('192.168.');
 }
 
 function embedScript(url) {
@@ -12,7 +13,7 @@ function embedStylesheet(url) {
 	document.write(`<link href="${url}" rel="stylesheet">`);
 }
 
-const baseUrl = isLocalhost()
+const baseUrl = isTestEnv()
 	? '..'
 	: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.1.5';
 
diff --git a/src/behaviors/behavior-controller.ts b/src/behaviors/behavior-controller.ts
@@ -4,9 +4,10 @@ import { readMousePosition, readTouchPosition } from '../core/event-readers';
 
 export class BehaviorController {
 	private readonly onMouseMoveHandler = (e: MouseEvent) => this.onMouseMove(e);
-	private readonly onTouchMoveHandler = (e: TouchEvent) => this.onTouchMove(e);
 	private readonly onMouseUpHandler = (e: MouseEvent) => this.onMouseUp(e);
+	private readonly onTouchMoveHandler = (e: TouchEvent) => this.onTouchMove(e);
 	private readonly onTouchEndHandler = (e: TouchEvent) => this.onTouchEnd(e);
+	private readonly onTouchStartHandler = (e: TouchEvent) => this.onTouchStart(e);
 
 	private state?: {
 		startPosition: Vector;
@@ -15,7 +16,7 @@ export class BehaviorController {
 
 	public start(startPosition: Vector, behavior: Behavior) {
 		if (this.state) {
-			this.stop();
+			this.stop(true);
 			return;
 		}
 
@@ -25,10 +26,11 @@ export class BehaviorController {
 		};
 		behavior.onStart(this.state.startPosition);
 
-		window.addEventListener('mousemove', this.onMouseMoveHandler);
-		window.addEventListener('touchmove', this.onTouchMoveHandler);
-		window.addEventListener('mouseup', this.onMouseUpHandler);
-		window.addEventListener('touchend', this.onTouchEndHandler);
+		window.addEventListener('mousemove', this.onMouseMoveHandler, false);
+		window.addEventListener('touchmove', this.onTouchMoveHandler, false);
+		window.addEventListener('mouseup', this.onMouseUpHandler, false);
+		window.addEventListener('touchend', this.onTouchEndHandler, false);
+		window.addEventListener('touchstart', this.onTouchStartHandler, false);
 	}
 
 	private onMouseMove(e: MouseEvent) {
@@ -43,12 +45,19 @@ export class BehaviorController {
 
 	private onMouseUp(e: MouseEvent) {
 		e.preventDefault();
-		this.stop();
+		this.stop(false);
 	}
 
 	private onTouchEnd(e: TouchEvent) {
 		e.preventDefault();
-		this.stop();
+		this.stop(false);
+	}
+
+	private onTouchStart(e: TouchEvent) {
+		e.preventDefault();
+		if (e.touches.length !== 1) {
+			this.stop(true);
+		}
 	}
 
 	private move(position: Vector) {
@@ -60,25 +69,26 @@ export class BehaviorController {
 
 		const newBehavior = this.state.behavior.onMove(delta);
 		if (newBehavior) {
-			this.state.behavior.onEnd();
+			this.state.behavior.onEnd(true);
 
 			this.state.behavior = newBehavior;
 			this.state.startPosition = position;
 			this.state.behavior.onStart(this.state.startPosition);
 		}
 	}
 
-	private stop() {
+	private stop(interrupt: boolean) {
 		if (!this.state) {
 			throw new Error('State is empty');
 		}
 
-		window.removeEventListener('mousemove', this.onMouseMoveHandler);
-		window.removeEventListener('touchmove', this.onTouchMoveHandler);
-		window.removeEventListener('mouseup', this.onMouseUpHandler);
-		window.removeEventListener('touchend', this.onTouchEndHandler);
+		window.removeEventListener('mousemove', this.onMouseMoveHandler, false);
+		window.removeEventListener('touchmove', this.onTouchMoveHandler, false);
+		window.removeEventListener('mouseup', this.onMouseUpHandler, false);
+		window.removeEventListener('touchend', this.onTouchEndHandler, false);
+		window.removeEventListener('touchstart', this.onTouchEndHandler, false);
 
-		this.state.behavior.onEnd();
+		this.state.behavior.onEnd(interrupt);
 		this.state = undefined;
 	}
 }
diff --git a/src/behaviors/behavior.ts b/src/behaviors/behavior.ts
@@ -3,5 +3,5 @@ import { Vector } from '../core/vector';
 export interface Behavior {
 	onStart(position: Vector): void;
 	onMove(delta: Vector): Behavior | void;
-	onEnd(): void;
+	onEnd(interrupt: boolean): void;
 }
diff --git a/src/behaviors/drag-step-behavior.ts b/src/behaviors/drag-step-behavior.ts
@@ -67,11 +67,11 @@ export class DragStepBehavior implements Behavior {
 		}
 	}
 
-	public onEnd() {
+	public onEnd(interrupt: boolean) {
 		this.view.remove();
 		this.context.setIsDragging(false);
 
-		if (this.currentPlaceholder) {
+		if (!interrupt && this.currentPlaceholder) {
 			if (this.pressedStepComponent) {
 				SequenceModifier.moveStep(
 					this.pressedStepComponent.parentSequence,
@@ -87,6 +87,9 @@ export class DragStepBehavior implements Behavior {
 			if (this.pressedStepComponent) {
 				this.pressedStepComponent.setState(StepComponentState.default);
 			}
+			if (this.currentPlaceholder) {
+				this.currentPlaceholder.setIsHover(false);
+			}
 		}
 		this.currentPlaceholder = undefined;
 
diff --git a/src/behaviors/placeholder-finder.ts b/src/behaviors/placeholder-finder.ts
@@ -6,7 +6,7 @@ export class PlaceholderFinder {
 	public static create(placeholders: Placeholder[], context: DesignerContext): PlaceholderFinder {
 		const checker = new PlaceholderFinder(placeholders, context);
 		context.onViewPortChanged.subscribe(checker.clearCacheHandler);
-		window.addEventListener('scroll', checker.clearCacheHandler);
+		window.addEventListener('scroll', checker.clearCacheHandler, false);
 		return checker;
 	}
 
@@ -42,7 +42,7 @@ export class PlaceholderFinder {
 
 	public destroy() {
 		this.context.onViewPortChanged.unsubscribe(this.clearCacheHandler);
-		window.removeEventListener('scroll', this.clearCacheHandler);
+		window.removeEventListener('scroll', this.clearCacheHandler, false);
 	}
 
 	private clearCache() {
diff --git a/src/behaviors/select-step-behavior.spec.ts b/src/behaviors/select-step-behavior.spec.ts
@@ -17,7 +17,7 @@ describe('SelectStepBehavior', () => {
 		const behavior = SelectStepBehavior.create(stepComponent, context);
 
 		behavior.onStart();
-		behavior.onEnd();
+		behavior.onEnd(false);
 
 		expect<Step | null>(selectedStep).toEqual(step);
 	});
diff --git a/src/behaviors/select-step-behavior.ts b/src/behaviors/select-step-behavior.ts
@@ -9,8 +9,6 @@ export class SelectStepBehavior implements Behavior {
 		return new SelectStepBehavior(pressedStepComponent, context);
 	}
 
-	private isCanceled = false;
-
 	private constructor(private readonly pressedStepComponent: StepComponent, private readonly context: DesignerContext) {}
 
 	public onStart() {
@@ -19,14 +17,13 @@ export class SelectStepBehavior implements Behavior {
 
 	public onMove(delta: Vector): Behavior | void {
 		if (!this.context.isReadonly && delta.distance() > 2) {
-			this.isCanceled = true;
 			this.context.setSelectedStep(null);
 			return DragStepBehavior.create(this.context, this.pressedStepComponent.step, this.pressedStepComponent);
 		}
 	}
 
-	public onEnd() {
-		if (!this.isCanceled) {
+	public onEnd(interrupt: boolean) {
+		if (!interrupt) {
 			this.context.setSelectedStep(this.pressedStepComponent.step);
 		}
 	}
diff --git a/src/control-bar/control-bar-view.ts b/src/control-bar/control-bar-view.ts
@@ -65,10 +65,14 @@ export class ControlBarView {
 }
 
 function bindClick(element: HTMLElement, handler: () => void) {
-	element.addEventListener('click', e => {
-		e.preventDefault();
-		handler();
-	});
+	element.addEventListener(
+		'click',
+		e => {
+			e.preventDefault();
+			handler();
+		},
+		false
+	);
 }
 
 function createButton(iconContent: string, title: string): HTMLElement {
diff --git a/src/designer-view.ts b/src/designer-view.ts
@@ -28,7 +28,7 @@ export class DesignerView {
 		}
 		const view = new DesignerView(root, context.layoutController, workspace, toolbox);
 		view.reloadLayout();
-		window.addEventListener('resize', view.onResizeHandler);
+		window.addEventListener('resize', view.onResizeHandler, false);
 		return view;
 	}
 
diff --git a/src/smart-editor/smart-editor-view.ts b/src/smart-editor/smart-editor-view.ts
@@ -30,10 +30,14 @@ export class SmartEditorView {
 	) {}
 
 	public bindToggleIsCollapsedClick(handler: () => void) {
-		this.toggle.addEventListener('click', e => {
-			e.preventDefault();
-			handler();
-		});
+		this.toggle.addEventListener(
+			'click',
+			e => {
+				e.preventDefault();
+				handler();
+			},
+			false
+		);
 	}
 
 	public setIsCollapsed(isCollapsed: boolean) {
diff --git a/src/toolbox/scrollbox-view.ts b/src/toolbox/scrollbox-view.ts
@@ -10,10 +10,10 @@ export class ScrollBoxView {
 		parent.appendChild(root);
 
 		const view = new ScrollBoxView(root, viewport);
-		window.addEventListener('resize', view.onResizeHandler);
-		root.addEventListener('wheel', e => view.onWheel(e));
-		root.addEventListener('touchstart', e => view.onTouchStart(e));
-		root.addEventListener('mousedown', e => view.onMouseDown(e));
+		window.addEventListener('resize', view.onResizeHandler, false);
+		root.addEventListener('wheel', e => view.onWheel(e), false);
+		root.addEventListener('touchstart', e => view.onTouchStart(e), false);
+		root.addEventListener('mousedown', e => view.onMouseDown(e), false);
 		return view;
 	}
 
@@ -50,7 +50,7 @@ export class ScrollBoxView {
 	}
 
 	public destroy() {
-		window.removeEventListener('resize', this.onResizeHandler);
+		window.removeEventListener('resize', this.onResizeHandler, false);
 	}
 
 	private reload(element: HTMLElement) {
@@ -115,15 +115,13 @@ export class ScrollBoxView {
 	}
 
 	private startScroll(startPosition: Vector) {
-		if (this.scroll) {
-			this.stopScroll();
-			return;
+		if (!this.scroll) {
+			window.addEventListener('touchmove', this.onTouchMoveHandler, false);
+			window.addEventListener('mousemove', this.onMouseMoveHandler, false);
+			window.addEventListener('touchend', this.onTouchEndHandler, false);
+			window.addEventListener('mouseup', this.onMouseUpHandler, false);
 		}
 
-		window.addEventListener('touchmove', this.onTouchMoveHandler);
-		window.addEventListener('mousemove', this.onMouseMoveHandler);
-		window.addEventListener('touchend', this.onTouchEndHandler);
-		window.addEventListener('mouseup', this.onMouseUpHandler);
 		this.scroll = {
 			startPositionY: startPosition.y,
 			startScrollTop: this.getScrollTop()
@@ -139,10 +137,10 @@ export class ScrollBoxView {
 
 	private stopScroll() {
 		if (this.scroll) {
-			window.removeEventListener('touchmove', this.onTouchMoveHandler);
-			window.removeEventListener('mousemove', this.onMouseMoveHandler);
-			window.removeEventListener('touchend', this.onTouchEndHandler);
-			window.removeEventListener('mouseup', this.onMouseUpHandler);
+			window.removeEventListener('touchmove', this.onTouchMoveHandler, false);
+			window.removeEventListener('mousemove', this.onMouseMoveHandler, false);
+			window.removeEventListener('touchend', this.onTouchEndHandler, false);
+			window.removeEventListener('mouseup', this.onMouseUpHandler, false);
 			this.scroll = undefined;
 		}
 	}
diff --git a/src/toolbox/toolbox-item-view.ts b/src/toolbox/toolbox-item-view.ts
@@ -1,4 +1,6 @@
 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';
 
@@ -38,11 +40,18 @@ export class ToolboxItemView {
 
 	private constructor(private readonly root: HTMLElement) {}
 
-	public bindMousedown(handler: (e: MouseEvent) => void) {
-		this.root.addEventListener('mousedown', handler);
+	public bindMousedown(handler: (position: Vector) => void) {
+		this.root.addEventListener(
+			'mousedown',
+			e => {
+				e.preventDefault();
+				handler(readMousePosition(e));
+			},
+			false
+		);
 	}
 
 	public bindTouchstart(handler: (e: TouchEvent) => void) {
-		this.root.addEventListener('touchstart', handler);
+		this.root.addEventListener('touchstart', handler, false);
 	}
 }
diff --git a/src/toolbox/toolbox-item.ts b/src/toolbox/toolbox-item.ts
@@ -1,5 +1,5 @@
 import { DragStepBehavior } from '../behaviors/drag-step-behavior';
-import { readMousePosition, readTouchPosition } from '../core/event-readers';
+import { readTouchPosition } from '../core/event-readers';
 import { ObjectCloner } from '../core/object-cloner';
 import { Uid } from '../core/uid';
 import { Vector } from '../core/vector';
@@ -19,15 +19,15 @@ export class ToolboxItem {
 	private constructor(private readonly step: Step, private readonly context: DesignerContext) {}
 
 	private onTouchstart(e: TouchEvent) {
-		e.preventDefault();
-		e.stopPropagation();
-		this.startDrag(readTouchPosition(e));
+		if (e.touches.length === 1) {
+			e.preventDefault();
+			e.stopPropagation();
+			this.startDrag(readTouchPosition(e));
+		}
 	}
 
-	private onMousedown(e: MouseEvent) {
-		e.preventDefault();
-		e.stopPropagation();
-		this.startDrag(readMousePosition(e));
+	private onMousedown(position: Vector) {
+		this.startDrag(position);
 	}
 
 	private startDrag(position: Vector) {
diff --git a/src/toolbox/toolbox-view.ts b/src/toolbox/toolbox-view.ts
@@ -52,18 +52,19 @@ export class ToolboxView {
 	) {}
 
 	public bindToggleIsCollapsedClick(handler: () => void) {
-		this.header.addEventListener('click', e => {
+		function forward(e: Event) {
 			e.preventDefault();
 			handler();
-		});
+		}
+		this.header.addEventListener('click', forward, false);
 	}
 
 	public bindFilterInputChange(handler: (value: string) => void) {
 		function forward(e: Event) {
 			handler((e.target as HTMLInputElement).value);
 		}
-		this.filterInput.addEventListener('keyup', forward);
-		this.filterInput.addEventListener('blur', forward);
+		this.filterInput.addEventListener('keyup', forward, false);
+		this.filterInput.addEventListener('blur', forward, false);
 	}
 
 	public setIsCollapsed(isCollapsed: boolean) {
diff --git a/src/workspace/workspace-view.ts b/src/workspace/workspace-view.ts
diff --git a/src/workspace/workspace.ts b/src/workspace/workspace.ts

Original file line number	Diff line number	Diff line change
`@@ -3,5 +3,5 @@ import { Vector } from '../core/vector';`
`3`	`3`	`export interface Behavior {`
`4`	`4`	`onStart(position: Vector): void;`
`5`	`5`	`onMove(delta: Vector): Behavior \| void;`
`6`		`- onEnd(): void;`
	`6`	`+ onEnd(interrupt: boolean): void;`
`7`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -67,11 +67,11 @@ export class DragStepBehavior implements Behavior {`
`67`	`67`	`}`
`68`	`68`	`}`
`69`	`69`
`70`		`- public onEnd() {`
	`70`	`+ public onEnd(interrupt: boolean) {`
`71`	`71`	`this.view.remove();`
`72`	`72`	`this.context.setIsDragging(false);`
`73`	`73`
`74`		`- if (this.currentPlaceholder) {`
	`74`	`+ if (!interrupt && this.currentPlaceholder) {`
`75`	`75`	`if (this.pressedStepComponent) {`
`76`	`76`	`SequenceModifier.moveStep(`
`77`	`77`	`this.pressedStepComponent.parentSequence,`
`@@ -87,6 +87,9 @@ export class DragStepBehavior implements Behavior {`
`87`	`87`	`if (this.pressedStepComponent) {`
`88`	`88`	`this.pressedStepComponent.setState(StepComponentState.default);`
`89`	`89`	`}`
	`90`	`+ if (this.currentPlaceholder) {`
	`91`	`+ this.currentPlaceholder.setIsHover(false);`
	`92`	`+ }`
`90`	`93`	`}`
`91`	`94`	`this.currentPlaceholder = undefined;`
`92`	`95`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ export class PlaceholderFinder {`
`6`	`6`	`public static create(placeholders: Placeholder[], context: DesignerContext): PlaceholderFinder {`
`7`	`7`	`const checker = new PlaceholderFinder(placeholders, context);`
`8`	`8`	`context.onViewPortChanged.subscribe(checker.clearCacheHandler);`
`9`		`- window.addEventListener('scroll', checker.clearCacheHandler);`
	`9`	`+ window.addEventListener('scroll', checker.clearCacheHandler, false);`
`10`	`10`	`return checker;`
`11`	`11`	`}`
`12`	`12`
`@@ -42,7 +42,7 @@ export class PlaceholderFinder {`
`42`	`42`
`43`	`43`	`public destroy() {`
`44`	`44`	`this.context.onViewPortChanged.unsubscribe(this.clearCacheHandler);`
`45`		`- window.removeEventListener('scroll', this.clearCacheHandler);`
	`45`	`+ window.removeEventListener('scroll', this.clearCacheHandler, false);`
`46`	`46`	`}`
`47`	`47`
`48`	`48`	`private clearCache() {`
Original file line number	Diff line number	Diff line change
`@@ -9,8 +9,6 @@ export class SelectStepBehavior implements Behavior {`
`9`	`9`	`return new SelectStepBehavior(pressedStepComponent, context);`
`10`	`10`	`}`
`11`	`11`
`12`		`- private isCanceled = false;`
`13`		`-`
`14`	`12`	`private constructor(private readonly pressedStepComponent: StepComponent, private readonly context: DesignerContext) {}`
`15`	`13`
`16`	`14`	`public onStart() {`
`@@ -19,14 +17,13 @@ export class SelectStepBehavior implements Behavior {`
`19`	`17`
`20`	`18`	`public onMove(delta: Vector): Behavior \| void {`
`21`	`19`	`if (!this.context.isReadonly && delta.distance() > 2) {`
`22`		`- this.isCanceled = true;`
`23`	`20`	`this.context.setSelectedStep(null);`
`24`	`21`	`return DragStepBehavior.create(this.context, this.pressedStepComponent.step, this.pressedStepComponent);`
`25`	`22`	`}`
`26`	`23`	`}`
`27`	`24`
`28`		`- public onEnd() {`
`29`		`- if (!this.isCanceled) {`
	`25`	`+ public onEnd(interrupt: boolean) {`
	`26`	`+ if (!interrupt) {`
`30`	`27`	`this.context.setSelectedStep(this.pressedStepComponent.step);`
`31`	`28`	`}`
`32`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ export class DesignerView {`
`28`	`28`	`}`
`29`	`29`	`const view = new DesignerView(root, context.layoutController, workspace, toolbox);`
`30`	`30`	`view.reloadLayout();`
`31`		`- window.addEventListener('resize', view.onResizeHandler);`
	`31`	`+ window.addEventListener('resize', view.onResizeHandler, false);`
`32`	`32`	`return view;`
`33`	`33`	`}`
`34`	`34`