WIP: Support mobile events

packages/diagrams-demo-gallery/demos/demo-alternative-linking/DefaultState.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, TouchEvent } from 'react';
 import {
 	SelectingState,
 	State,
@@ -45,6 +45,28 @@ export class DefaultState extends State<DiagramEngine> {
 			})
 		);
 
+		this.registerAction(
+			new Action({
+				type: InputType.TOUCH_START,
+				fire: (event: ActionEvent<TouchEvent>) => {
+					const element = this.engine.getActionEventBus().getModelForEvent(event);
+
+					// the canvas was clicked on, transition to the dragging canvas state
+					if (!element) {
+						this.transitionWithEvent(this.dragCanvas, event);
+					}
+					// initiate dragging a new link
+					else if (element instanceof PortModel) {
+						return;
+					}
+					// move the items (and potentially link points)
+					else {
+						this.transitionWithEvent(this.dragItems, event);
+					}
+				}
+			})
+		);
+
 		this.registerAction(
 			new Action({
 				type: InputType.MOUSE_UP,

packages/react-canvas-core/src/CanvasEngine.ts

@@ -3,7 +3,7 @@ import { FactoryBank } from './core/FactoryBank';
 import { AbstractReactFactory } from './core/AbstractReactFactory';
 import { LayerModel } from './entities/layer/LayerModel';
 import { BaseListener, BaseObserver } from './core/BaseObserver';
-import { MouseEvent } from 'react';
+import { MouseEvent, TouchEvent } from 'react';
 import { BaseModel } from './core-models/BaseModel';
 import { Point } from '@projectstorm/geometry';
 import { ActionEventBus } from './core-actions/ActionEventBus';
@@ -149,7 +149,7 @@ export class CanvasEngine<
 		return this.canvas;
 	}
 
-	getMouseElement(event: MouseEvent): BaseModel {
+	getMouseElement(event: MouseEvent | TouchEvent): BaseModel {
 		return null;
 	}
 

packages/react-canvas-core/src/core-actions/Action.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, KeyboardEvent, WheelEvent, SyntheticEvent } from 'react';
+import { MouseEvent, KeyboardEvent, WheelEvent, TouchEvent, SyntheticEvent } from 'react';
 import { Toolkit } from '../Toolkit';
 import { CanvasEngine } from '../CanvasEngine';
 import { BaseModel } from '../core-models/BaseModel';
@@ -9,7 +9,10 @@ export enum InputType {
 	MOUSE_MOVE = 'mouse-move',
 	MOUSE_WHEEL = 'mouse-wheel',
 	KEY_DOWN = 'key-down',
-	KEY_UP = 'key-up'
+	KEY_UP = 'key-up',
+	TOUCH_START = 'touch-start',
+	TOUCH_MOVE = 'touch-move',
+	TOUCH_END = 'touch-end'
 }
 
 export interface Mapping {
@@ -19,6 +22,9 @@ export interface Mapping {
 	[InputType.MOUSE_WHEEL]: WheelEvent;
 	[InputType.KEY_DOWN]: KeyboardEvent;
 	[InputType.KEY_UP]: KeyboardEvent;
+	[InputType.TOUCH_START]: TouchEvent;
+	[InputType.TOUCH_MOVE]: TouchEvent;
+	[InputType.TOUCH_END]: TouchEvent;
 }
 
 export interface ActionEvent<Event extends SyntheticEvent = SyntheticEvent, Model extends BaseModel = BaseModel> {

packages/react-canvas-core/src/core-actions/ActionEventBus.ts

@@ -1,5 +1,5 @@
 import { Action, ActionEvent, InputType } from './Action';
-import { KeyboardEvent, MouseEvent } from 'react';
+import { KeyboardEvent, MouseEvent, TouchEvent } from 'react';
 import * as _ from 'lodash';
 import { CanvasEngine } from '../CanvasEngine';
 import { BaseModel } from '../core-models/BaseModel';
@@ -38,7 +38,7 @@ export class ActionEventBus {
 		});
 	}
 
-	getModelForEvent(actionEvent: ActionEvent<MouseEvent>): BaseModel {
+	getModelForEvent(actionEvent: ActionEvent): BaseModel {
 		if (actionEvent.model) {
 			return actionEvent.model;
 		}
@@ -49,8 +49,12 @@ export class ActionEventBus {
 		const { event } = actionEvent;
 		if (event.type === 'mousedown') {
 			return this.getActionsForType(InputType.MOUSE_DOWN);
+		} else if (event.type === 'touchstart') {
+			return this.getActionsForType(InputType.TOUCH_START);
 		} else if (event.type === 'mouseup') {
 			return this.getActionsForType(InputType.MOUSE_UP);
+		} else if (event.type === 'touchend') {
+			return this.getActionsForType(InputType.TOUCH_END);
 		} else if (event.type === 'keydown') {
 			// store the recorded key
 			this.keys[(event as KeyboardEvent).key.toLowerCase()] = true;
@@ -61,6 +65,8 @@ export class ActionEventBus {
 			return this.getActionsForType(InputType.KEY_UP);
 		} else if (event.type === 'mousemove') {
 			return this.getActionsForType(InputType.MOUSE_MOVE);
+		} else if (event.type === 'touchmove') {
+			return this.getActionsForType(InputType.TOUCH_MOVE);
 		} else if (event.type === 'wheel') {
 			return this.getActionsForType(InputType.MOUSE_WHEEL);
 		}

packages/react-canvas-core/src/core-state/AbstractDisplacementState.ts

@@ -7,7 +7,7 @@ export interface AbstractDisplacementStateEvent {
 	displacementY: number;
 	virtualDisplacementX: number;
 	virtualDisplacementY: number;
-	event: React.MouseEvent;
+	event: React.MouseEvent | React.TouchEvent;
 }
 
 export abstract class AbstractDisplacementState<E extends CanvasEngine = CanvasEngine> extends State<E> {
@@ -30,6 +30,21 @@ export abstract class AbstractDisplacementState<E extends CanvasEngine = CanvasE
 				}
 			})
 		);
+		this.registerAction(
+			new Action({
+				type: InputType.TOUCH_START,
+				fire: (actionEvent: ActionEvent<React.TouchEvent>) => {
+					this.initialX = actionEvent.event.touches[0].clientX;
+					this.initialY = actionEvent.event.touches[0].clientY;
+					const rel = this.engine.getRelativePoint(
+						actionEvent.event.touches[0].clientX,
+						actionEvent.event.touches[0].clientY
+					);
+					this.initialXRelative = rel.x;
+					this.initialYRelative = rel.y;
+				}
+			})
+		);
 		this.registerAction(
 			new Action({
 				type: InputType.MOUSE_MOVE,
@@ -45,6 +60,23 @@ export abstract class AbstractDisplacementState<E extends CanvasEngine = CanvasE
 				}
 			})
 		);
+		this.registerAction(
+			new Action({
+				type: InputType.TOUCH_MOVE,
+				fire: (actionEvent: ActionEvent<React.TouchEvent>) => {
+					const { event } = actionEvent;
+					this.fireMouseMoved({
+						displacementX: event.touches[0].clientX - this.initialX,
+						displacementY: event.touches[0].clientY - this.initialY,
+						virtualDisplacementX:
+							(event.touches[0].clientX - this.initialX) / (this.engine.getModel().getZoomLevel() / 100.0),
+						virtualDisplacementY:
+							(event.touches[0].clientY - this.initialY) / (this.engine.getModel().getZoomLevel() / 100.0),
+						event: event
+					});
+				}
+			})
+		);
 		this.registerAction(
 			new Action({
 				type: InputType.MOUSE_UP,
@@ -54,6 +86,15 @@ export abstract class AbstractDisplacementState<E extends CanvasEngine = CanvasE
 				}
 			})
 		);
+		this.registerAction(
+			new Action({
+				type: InputType.TOUCH_END,
+				fire: (event: ActionEvent<React.TouchEvent>) => {
+					// when the mouse if up, we eject this state
+					this.eject();
+				}
+			})
+		);
 	}
 
 	abstract fireMouseMoved(event: AbstractDisplacementStateEvent);

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx

@@ -90,6 +90,18 @@ export class CanvasWidget extends React.Component<DiagramProps> {
 				}}
 				onMouseMove={event => {
 					this.props.engine.getActionEventBus().fireAction({ event });
+				}}
+				onTouchMove={event => {
+					this.props.engine.getActionEventBus().fireAction({ event });
+				}}
+				onTouchStart={event => {
+					this.props.engine.getActionEventBus().fireAction({ event });
+				}}
+				onTouchMove={event => {
+					this.props.engine.getActionEventBus().fireAction({ event });
+				}}
+				onTouchEnd={event => {
+					this.props.engine.getActionEventBus().fireAction({ event });
 				}}>
 				{model.getLayers().map(layer => {
 					return (

packages/react-canvas-core/src/states/MoveItemsState.ts

@@ -31,6 +31,19 @@ export class MoveItemsState<E extends CanvasEngine = CanvasEngine> extends Abstr
 				}
 			})
 		);
+		this.registerAction(
+			new Action({
+				type: InputType.TOUCH_START,
+				fire: (event: ActionEvent<React.TouchEvent>) => {
+					const element = this.engine.getActionEventBus().getModelForEvent(event);
+					if (!element.isSelected()) {
+						this.engine.getModel().clearSelection();
+					}
+					element.setSelected(true);
+					this.engine.repaintCanvas();
+				}
+			})
+		);
 	}
 
 	activated(previous: State) {

packages/react-diagrams-core/src/DiagramEngine.ts

@@ -3,7 +3,7 @@ import { PortModel } from './entities/port/PortModel';
 import { LinkModel } from './entities/link/LinkModel';
 import { LabelModel } from './entities/label/LabelModel';
 import { Point, Rectangle } from '@projectstorm/geometry';
-import { MouseEvent } from 'react';
+import { MouseEvent, TouchEvent } from 'react';
 import {
 	AbstractModelFactory,
 	AbstractReactFactory,
@@ -58,7 +58,21 @@ export class DiagramEngine extends CanvasEngine<CanvasEngineListener, DiagramMod
 	 */
 	getMouseElement(event: MouseEvent): BaseModel {
 		var target = event.target as Element;
-		var diagramModel = this.model;
+
+		return this.getElement(target);
+	}
+
+	getTouchElement(event: TouchEvent): BaseModel {
+		let x = event.touches.length > 0 ? event.touches[0].clientX : event.changedTouches[0].clientX;
+		let y = event.touches.length > 0 ? event.touches[0].clientY : event.changedTouches[0].clientY;
+
+		const target = document.elementFromPoint(x, y);
+
+		return this.getElement(target);
+	}
+
+	getElement(target: Element): BaseModel {
+		const diagramModel = this.model;
 
 		//is it a port
 		var element = Toolkit.closest(target, '.port[data-name]');

packages/react-diagrams-core/src/states/DefaultDiagramState.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, TouchEvent } from 'react';
 import {
 	SelectingState,
 	State,
@@ -48,5 +48,25 @@ export class DefaultDiagramState extends State<DiagramEngine> {
 				}
 			})
 		);
+		this.registerAction(
+			new Action({
+				type: InputType.TOUCH_START,
+				fire: (event: ActionEvent<TouchEvent>) => {
+					const element = this.engine.getActionEventBus().getModelForEvent(event);
+					// the canvas was clicked on, transition to the dragging canvas state
+					if (!element) {
+						this.transitionWithEvent(this.dragCanvas, event);
+					}
+					// initiate dragging a new link
+					else if (element instanceof PortModel) {
+						this.transitionWithEvent(this.dragNewLink, event);
+					}
+					// move the items (and potentially link points)
+					else {
+						this.transitionWithEvent(this.dragItems, event);
+					}
+				}
+			})
+		);
 	}
 }

packages/react-diagrams-core/src/states/DragDiagramItemsState.ts

@@ -3,7 +3,7 @@ import * as _ from 'lodash';
 import { PointModel } from '../entities/link/PointModel';
 import { DiagramEngine } from '../DiagramEngine';
 import { PortModel } from '../entities/port/PortModel';
-import { MouseEvent } from 'react';
+import { MouseEvent, TouchEvent } from 'react';
 import { LinkModel } from '../entities/link/LinkModel';
 
 export class DragDiagramItemsState extends MoveItemsState<DiagramEngine> {
@@ -34,5 +34,30 @@ export class DragDiagramItemsState extends MoveItemsState<DiagramEngine> {
 				}
 			})
 		);
+
+		this.registerAction(
+			new Action({
+				type: InputType.TOUCH_END,
+				fire: (event: ActionEvent<TouchEvent>) => {
+					const item = this.engine.getMouseElement(event.event);
+					if (item instanceof PortModel) {
+						_.forEach(this.initialPositions, position => {
+							if (position.item instanceof PointModel) {
+								const link = position.item.getParent();
+								// only care about the last links
+								if (link.getLastPoint() !== position.item) {
+									return;
+								}
+								if (link.getSourcePort().canLinkToPort(item)) {
+									link.setTargetPort(item);
+									item.reportPosition();
+									this.engine.repaintCanvas();
+								}
+							}
+						});
+					}
+				}
+			})
+		);
 	}
 }