Provided By
All Implemented Interfaces

Handles mouse and keyboard events occurring in a LabCanvas; either forwards events to an EventHandler, or does LabView panning (moving the content of the LabView with the mouse).

Key Events

Key events are forwarded to the EventHandler, but only when the selected target on web page is the LabCanvas, or there is no selected target (document.body is the target in that case). This avoids forwarding key events intended for some other target, for example a text edit area.

Mouse Events

If LabView panning is in effect (see below), then mouse events are sent to the ViewPanner that was created. Otherwise, SimController calls MouseTracker.findNearestDragable() which returns a MouseTracker instance that processes the mouse events before (possibly) sending them to the EventHandler.

The MouseTracker forwards the mouse events to the EventHandler along with information such as: the mouse position in simulation coordinates of the LabView; the nearest dragable DisplayObject; the initial offset between the mouse and the DisplayObject.

Even if no dragable DisplayObject is found (and LabView panning is not occurring) then the MouseTracker still forwards the event to the EventHandler with the mouse position in simulation coordinates of the focus LabView of the LabCanvas.

Touch Events

The policy is to treat single touch events in canvas like mouse events, but allow multiple touch events like 'pinch to zoom' or 'two finger pan' by ignoring them and letting system process them.

Single touch events are handled like mouse events. Multiple touch events are ignored and left for the system to respond to (for example two finger zoom or pan on iOS). Because people are inexact about putting all their fingers on the screen at the same exact moment, most multiple touch events start as a single touch, followed quickly by a multiple touch event. The typical sequence is:

  1. A single-touch touchStart comes thru, and we start dragging an object. We allow the event to also be processed by the system (otherwise many multi-touch events are not processed by the system).

  2. A single-touch touchMove event or two occurs, which causes some mouse dragging to happen.

  3. A multi-touch touchStart event occurs. We call #finishDrag to stop mouse dragging. The multi-touch touchStart is then handled by the system.

Note that allowing the first touchStart to be processed by the system results in the canvas being highlighted (on iOS, probably others). To prevent that highlighting you can add this bit of CSS code:

canvas {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

There are other such CSS options for other browsers.

LabView Panning

When specified modifier keys are pressed (such as control key) then mouse drag events will directly pan the focus LabView instead of sending events to the EventHandler. This modifies the simulation rectangle of the LabView by calling myphysicslab.lab.view.LabView#setSimRect. An instance of is created to handle the LabView panning.

If LabView panning is enabled, it only occurs when the specified combination of modifier keys are down during the mouse event, given in the panModifier parameter. Here is an example where LabView panning happens when no modifier keys are pressed:

new SimController(graphCanvas, null, {alt:false, control:false, meta:false, shift:false})

Here is an example where LabView panning happens when both the meta and alt keys are down:

new SimController(labCanvas, eventHandler, {alt:true, control:false, meta:true, shift:false})

Note that the exact combination of modifier keys must be pressed to enable LabView panning; for example, if only the control key is specified, then when both control and shift modifiers are down LabView panning will not occur.

Technical Note

Sept 7 2016: To deal with some NTI errors about touches I tried to use UIEvent instead of, but under advanced compile in BrachistoApp when clicking in the canvas I get a TypeError with message "a.preventDefault is not a function".

new SimController( labCanvas, eventHandler, panModifier )


the LabCanvas to process events for.


the EventHandler to forward events to; or null or undefined to just do LabView panning.

panModifier({alt: boolean, control: boolean, meta: boolean, shift: boolean}|null|undefined)

which modifier keys are needed for LabView panning; if null, then LabView panning will not be done; if undefined then default is to do LabView panning when alt key is pressed.

Instance Methods

Type Definitions