@matthewscharles/multitouch-mapper

multitouch-mapper

This is work in progress and not really intented for external projects just yet!

purpose

• To pick up multitouch more effectively for digital musical instruments, where conventional DOM interactions might be restrictive.

• To enable canvas-based interactions with DOM elements sitting underneath (in an "underlay" layer) to support screen reader interactions.

CSS tip

To avoid issues with multitouch scrolling/pinching on mobile, incorporate this in the document body or appropriate container...

container{
    -webkit-touch-callout: none; 
    touch-action: none;
}

On iOS, this should allow up to four fingers to be used for multitouch before the default system behaviour (e.g. app switching) kicks in.

process

An instance of MultitouchMapper stores a buffer of items categorised by CSS selectors or strings (assuming, at present, that it is easiest to pick up the location of an object on the dom rather than fixed coordinates or other methods).

To make this happen, the object will:

• Assign "pointer-events:none" to all items that might get in the way, including the overlay canvas.
• Assign "pointer-events:auto" to items to pick up
• Assign itself as an event listener to the document

My preferred way of working with touch is to use an overlay e.g. a canvas as a blanket to prevent touch interactions, and also to provide a layer for annotations, animations etc. to happen over the relevant elements.

We may choose to have multiple instances of the object (or eventually, cover multiple targets within the same object)...for example if several canvas overlays are present on the page.

At the moment, the best way to implement appears to be to cover the whole document as the target. I would usually prefer to use a canvas as a target for picking up mouse / touch events, but this becomes problematic as pointer events need to be detected on said target, and therefore conflict with the object's search for the frontmost element.