@antonioru I began this from the new Constants.js file you created for feature/canvas.

const getMouseEventPoint = (e) => ({ x: e.pageX, y: e.pageY });
const getTouchEventPoint = (e) => getMouseEventPoint(e.changedTouches[0]);
export const getEventPoint = isTouch ? getTouchEventPoint : getMouseEventPoint;

This now exposes the event point as an object instead of the usual array. I do like this as it's more explicit. However I started running into places where the array was still expected. I took the liberty of updating those areas to create/refer to an {x, y} object instead. Let me know if this makes sense or you'd rather revert to the [x, y] option.

*On another note I did notice that dragging the new canvas, creates a scroll. I had tackled something similar in the original PR #67 with touch-action: none; inside diagram.scss. But since you're still working on the canvas feature, didn't want to try and address.

Description

Add touch support for:

1. Dragging nodes
2. Dragging segments from nodes
3. Creating segments on touchend at new port

Related Issue

Closes #60 and replaces PR #67

Motivation and Context

Closes #60

How Has This Been Tested?

All existing tests are passing.
Tested on the Chrome mobile simulator on a mac and Safari on an iPad.