Since the correct handling of the divergent browser specific multitouch
implementations is a difficult and recurring task we decided to encapsulate
all related handlers for TouchEvent (WebKit, Mozilla) and
PointerEvent (IE, Edge, Chrome) in
a single delegate pattern.
The main differences are that PointerEvent are fired for each
touch point, whereas the TouchEvent collects multiple
TouchPoints into a single event. The basic PointMap and Interaction
classes unify this behavior by collecting all contact points regardless
of their original mouse, touch, or pointer events.
The touch and pointer positions are collected in PointMaps which provide
access to the positions via stringified touch and pointer ids. For mouse events the
special id "mouse" is used. PointMaps can be cloned and pretty printed. In addition
they provide auxiliary methods like mean and farthests
which can be used to simplify the computation of gestures. In general
mean can be used to compute the "center of interaction", i.e. the
best guess of the anchor point for rotation and scaling operations.
If more than two touch points are involved it may be best to look for the pair of points which are farthest away from each other. These points will represent the fingers farthest away from each other, a more simple substitute for 3, 4 or 5 touch points. Here we add a third point to our example touches and test whether the maximal distant points are found:
Interaction objects extend the idea of mapping touch ids to points to multiple target objects. Each touch id is mapped not only to the changing points of this touch but also to the object that has been hit by the starting touch point. This object is the target of the interaction and remains for the whole duration of the multitouch gesture.
The delegator registers all needed TouchEvent,
PointerEvent, and MouseEvent
handlers on a provided DOM elememt for a given target object, ensures that the
events are captured by the target and boils the event handling down to simple
onStart, onMove, onEnd events.
Let's look at an example of an InteractionDelegate and a target object that
implements the IInteractionTarget interface. Typically you setup
the delegator in the constructor of the class that uses the interation.
We can now check whether the promised interface methods are implemented by the class:
If we define an InteractionTarget that violates the IInteractionTarget interface we get an error. The following example of an interaction target uses an InteractionDelegate but does not implement the necessary methods:
Often we need to assign UI elements to touch and pointer events. This is supported by a special InteractionMapper delegate. A InteractionMapper maps events to specific parts of a container interaction target. The InteractionTarget must implement a findTarget method that returns an object implementing the IInteractionTarget interface.
If the InteractionTarget also implements a mapPositionToPoint method this
is used to map the points to the local coordinate space of the the target.
This makes it easier to lookup elements and relate events to local
positions.
Let's see an example. A graph that uses an InterationMapper for it´s child
objects:
Now we simulate a sequence of onStart, onMove, onEnd events by calling
the registered event handlers programmatically. Note that the defined
event handlers log their calls.
Drag & Drop is a common interaction pattern. This behavior can be accomplished by a class that implements IInteractionMapperTarget as well as IInteractionTarget. You can grab the blue circle with touches or mouse and drag it around.
Multitouch-Events (simultaneous events) in browsers cannot be used by default. Even libraries like jQuery do not fix this problem. The static method "on" of the InteractionMapper allows simultaneous events and thus multitouch. The following events (and their specializations) can be used in addition to the default browser events: tap, doubletap, press, pan, swipe, pinch and rotate. See http://hammerjs.github.io for more details.