disable context menu.

Author: b4rtaz

src/toolbox/toolbox-item-view.ts

@@ -1,6 +1,4 @@
 import { Dom } from '../core/dom';
-import { readMousePosition } from '../core/event-readers';
-import { Vector } from '../core/vector';
 import { StepDefinition, StepsConfiguration } from '../designer-configuration';
 
 export class ToolboxItemView {
@@ -39,18 +37,15 @@ export class ToolboxItemView {
 
 	private constructor(private readonly root: HTMLElement) {}
 
-	public bindMousedown(handler: (position: Vector) => void) {
-		this.root.addEventListener(
-			'mousedown',
-			e => {
-				e.stopPropagation();
-				handler(readMousePosition(e));
-			},
-			false
-		);
+	public bindMousedown(handler: (e: MouseEvent) => void) {
+		this.root.addEventListener('mousedown', handler, false);
 	}
 
 	public bindTouchstart(handler: (e: TouchEvent) => void) {
 		this.root.addEventListener('touchstart', handler, false);
 	}
+
+	public bindContextMenu(handler: (e: MouseEvent) => void) {
+		this.root.addEventListener('contextmenu', handler, false);
+	}
 }

src/toolbox/toolbox-item.ts

@@ -1,5 +1,5 @@
 import { DragStepBehavior } from '../behaviors/drag-step-behavior';
-import { readTouchPosition } from '../core/event-readers';
+import { readMousePosition, readTouchPosition } from '../core/event-readers';
 import { ObjectCloner } from '../core/object-cloner';
 import { Uid } from '../core/uid';
 import { Vector } from '../core/vector';
@@ -14,6 +14,7 @@ export class ToolboxItem {
 		const item = new ToolboxItem(step, context);
 		view.bindMousedown(e => item.onMousedown(e));
 		view.bindTouchstart(e => item.onTouchstart(e));
+		view.bindContextMenu(e => item.onContextMenu(e));
 		return item;
 	}
 
@@ -26,8 +27,16 @@ export class ToolboxItem {
 		}
 	}
 
-	private onMousedown(position: Vector) {
-		this.startDrag(position);
+	private onMousedown(e: MouseEvent) {
+		e.stopPropagation();
+		const isPrimaryButton = e.button === 0;
+		if (isPrimaryButton) {
+			this.startDrag(readMousePosition(e));
+		}
+	}
+
+	private onContextMenu(e: MouseEvent) {
+		e.preventDefault();
 	}
 
 	private startDrag(position: Vector) {

src/workspace/workspace-view.ts

@@ -103,6 +103,10 @@ export class WorkspaceView {
 		this.canvas.addEventListener('touchstart', e => handler(readTouchPosition(e)), false);
 	}
 
+	public bindContextMenu(handler: (e: MouseEvent) => void) {
+		this.canvas.addEventListener('contextmenu', handler, false);
+	}
+
 	public bindWheel(handler: (e: WheelEvent) => void) {
 		this.canvas.addEventListener('wheel', handler, false);
 	}

src/workspace/workspace.ts

@@ -37,6 +37,7 @@ export class Workspace implements DesignerComponentProvider {
 
 		view.bindMouseDown((p, t, b) => workspace.onMouseDown(p, t, b));
 		view.bindTouchStart(e => workspace.onTouchStart(e));
+		view.bindContextMenu(e => workspace.onContextMenu(e));
 		view.bindWheel(e => workspace.onWheel(e));
 		return workspace;
 	}
@@ -105,8 +106,11 @@ export class Workspace implements DesignerComponentProvider {
 	}
 
 	private onMouseDown(position: Vector, target: Element, button: number) {
+		const isPrimaryButton = button === 0;
 		const isMiddleButton = button === 1;
-		this.startBehavior(target, position, isMiddleButton);
+		if (isPrimaryButton || isMiddleButton) {
+			this.startBehavior(target, position, isMiddleButton);
+		}
 	}
 
 	private onTouchStart(position: Vector) {
@@ -116,6 +120,10 @@ export class Workspace implements DesignerComponentProvider {
 		}
 	}
 
+	private onContextMenu(e: MouseEvent) {
+		e.preventDefault();
+	}
+
 	private startBehavior(target: Element, position: Vector, forceMoveMode: boolean) {
 		const clickedStep =
 			!forceMoveMode && !this.context.isMoveModeEnabled ? this.getRootComponent().findByElement(target as Element) : null;