Interaction
Make a script react to hover, clicks, drags and right-click menus.
A script makes shapes interactive by declaring hit areas in draw. Events then carry the id of the hit under the pointer.
Hits
g.hit(`print-${i}`, { type: "Circle", x, y, radius });
g.hit("level", { type: "Line", x0: 0, y0: y, x1: frame.width, y1: y }, { cursor: "ns-resize", draggable: true });- Shapes:
Rect,Circle,Line(withintolerancepx, 4 when omitted),Polygon. - Hits count for the frame they were drawn in. Later hits are on top.
cursoris a CSS cursor,"pointer"when omitted.- Encode what you need to find the object again in the id: an index or a time.
Events
| Handler | When | Returns |
|---|---|---|
onHover(s, event, ctx) | the hit under the pointer changed. event is null when the pointer left all hits | a tooltip: text, { title, rows } or a widget, or null |
onClick(s, event, ctx) | chart surfaces: a click on a hit. Canvas: every click | |
onDoubleClick | like onClick | |
onDrag(s, event, ctx) | a draggable hit is dragged: Start, Move, End, Cancel | |
onContextMenu(s, event, ctx) | right click in the script's pane. hitId is null off hits | menu entries { label, onSelect } |
onKey(s, event, ctx) | a key while the chart has focus and no text field | |
onCrosshair(s, event, ctx) | the crosshair moved. null when it left the chart |
Pointer events on chart surfaces carry x, y, time and price, on a Canvas only x and y. All carry hitId and modifiers.
Not available yet
The chart does not call onDoubleClick and onKey yet. modifiers are always false, and onCrosshair only sees this chart's crosshair (source: "Local").
Event handlers may change state. The chart redraws after them.
Dragging
onDrag: (s, event) => {
if (event.hitId !== "level") return;
switch (event.type) {
case "Start":
s.dragFrom = s.price;
s.price = event.price;
return;
case "Move":
case "End":
s.price = event.price;
return;
case "Cancel":
s.price = s.dragFrom; // the browser took the pointer: restore
return;
}
},While dragging, the chart does not pan and keeps its price range.
Clicks on an empty chart
On chart surfaces onClick fires only on hits, so clicks on the empty chart still pan and select. A Canvas has no chart behind it and gets every click.
See Whale prints (hover and drag) and Delta histogram (context menu).