Events & Methods

React to clicks, collisions, and more

Formulas define relationships. Events define reactions. When a user clicks a button or two shapes collide, event handlers run your code.

Available events

Writing event handlers

Select a node. Open the code editor (events section in properties panel). Choose an event from the dropdown. Write JavaScript:

// click handler — toggle visibility
if (this.opacity === 1) {
  this.opacity = 0.3
} else {
  this.opacity = 1
}

// collide handler — destroy on bullet hit
if (event.target.is("bullet")) {
  this.destroy()
}

// mouseenter handler — scale up on hover
this.width = 120
this.height = 120

this binding

Inside event handlers, this refers to the node that owns the event. this.x, this.width, this.destroy() all work.

event object

The event parameter provides event-specific data. For collision events, event.normal has {x, y} for the contact normal, event.point has {x, y} for the contact position.

Methods

Methods are reusable functions you define on a node. Call them from events or formulas.

Define a method "reset":

this.x = 100
this.y = 100
this.velocityX = 0
this.velocityY = 0

Call from an event handler:

this.reset()

Call from another node's formula:

Ball.reset()

Code editor features

The multiline code editor (DraggableDialog) supports:

• Tab — indent / Shift+Tab dedent (multi-line)
• Ctrl+D — duplicate line
• Ctrl+/ — toggle comment
• Ctrl+Shift+K — delete line
• Ctrl+Enter — commit and close
• Shift+Enter — apply without closing
• Ctrl+F — search
• Syntax highlighting with per-node colors
• Autocomplete for node names, properties, event object fields
• Auto-indent and smart bracket closing

Compilation

Event handlers compile with the event compile mode. The compiler:

1. Parses the handler body as statements (not a single expression)
2. Transforms node references and method calls
3. Generates source maps for DevTools debugging
4. Wraps in a function receiving (self, ctx, event)

Compile errors log to console with line/column information. If compilation fails, the previous working handler is removed — broken code never runs.

title: "Click counter"
description: "A shape that counts clicks and displays the count"
nodes:
  - type: RECT, name: "Button", x: 200, y: 200, w: 150, h: 60, fill: "#3498DB", cornerRadius: 8
  - type: RECT, name: "Counter", x: 200, y: 300, w: 50, h: 50, fill: "#E74C3C"
formulas:
  - node: "Counter", prop: "width", value: "Counter.x"
events:
  - node: "Button", event: "click", code: "Counter.x = Counter.x + 10"
tools_visible: [select, play]
ui_visible: [properties, formulas]

→ Back to formulas → Formula compiler → Physics collisions