Canvas event handling
The FlightGear forum has a subforum related to: Canvas |
The Canvas event handling system is heavily inspired by the DOM Event Model. If you have already worked with events in HTML and JavaScript most concepts of the Canvas event system should be already familiar to you.
Listen for events
To receive events callback function can be added to elements on a Canvas as well as to the Canvas itself:
canvas.addEventListener("<type>", <func>);
canvas_element.addEventListener("<type>", <func>);
For each placement of a Canvas handling events can be enabled or disabled. A Canvas placed in a PUI widget or as standalone GUI window receive events by default, whereas Canvases placed onto the aircraft model or in the scenery do not receive any events by default.
For standalone GUI windows setting capture-events to 0 or 1 enables or disables handling of events respectively. For a Canvas placed onto a 3d model setting capture-events inside the placement can be used to activate event handling:
var dlg = canvas.Window.new([152,74]);
# Disable event handling for this window. Events will pass through
# and can reach any window or also object covered by the window.
dlg.setBool("capture-events", 0);
# Place the canvas onto the PFD and enable receiving events
my_canvas.addPlacement({"node": "PFD-Screen", "capture-events": 1});
Event classes
var Event = {
# Name of event type [read-only]
type: <typename>,
# Target element [read-only]
target: <target-element>,
# Stop further propagation of event (stop
# bubbling up to its parents)
stopPropagation: func()
};
var MouseEvent = {
parents: [Event],
# Position in screen coordinates [read-only]
screenX: <screen-x>,
screenY: <screen-y>,
# Position in window/canvas coordinates [read-only]
clientX: <client-x>,
clientY: <client-y>,
# Distance to position of previous event [read-only]
deltaX: <delta-x>,
deltaY: <delta-y>,
# Current click count (number of clicks within a certain
# time limit. max. 3) [read-only]
click_count: <click-count>
};
Event types
Type | Description | DOM equivalent event | Notes |
---|---|---|---|
mousedown | Mouse button pressed | mousedown | |
mouseup | Mouse button released | mouseup | |
click | mousedown + mouseup have been triggered for this element without moving more than a certain maximum distance | click | |
dblclick | Two click events have been triggered for this element without moving more than a certain maximum distance and time limit | dblclick | |
drag | The mouse has been moved with a button down. After dragging has started above an element, all consecutive drag events are send to this element even if the mouse leaves its area | ||
wheel | Mouse wheel rotated (see deltaY for direction) | wheel | |
mouseover | TODO | mouseover | |
mouseout | TODO | mouseout | |
mouseleave | TODO | mouseleave |