Event

Handling hooks and events.

app.on(“update”, callback)

The update event is fired repeatedly until app.stop is called after calling app.start. For example, to draw a moving rect:

let x = 0;

function update() {
  app.append(cm.rect, {
    x: x++,
    y: 0,
    width: 100,
    height: 50,
  });
}

app.on("update", update);

app.on(“mouseDown”, callback)

The mouseDown event is fired when a mouse button is pressed. For example, to change the background color:

let background = "red";

function mouseDown() {
  background = "blue";
}

app.on("mouseDown", mouseDown);

app.on(“mouseUp”, callback)

The mouseUp event is fired when a mouse button is released. For example, to change the background color:

let background = "red";

function mouseUp() {
  background = "blue";
}

app.on("mouseUp", mouseUp);

app.on(“mouseClick”, callback)

The mouseClick event is fired when a mouse button is clicked. For example, to change the background color:

let background = "red";

function mouseClick() {
  background = "blue";
}

app.on("mouseClick", mouseClick);

app.on(“beforeEach”, callback)

The beforeEach event is fired before each update event is fired. For example, to begin measuring frame rate by stats.js:

function measure(app) {
  // ...
  app.on("beforeEach", () => {
    stats.begin();
  });
}

app.call(measure);

app.on(“afterEach”, callback)

The afterEach event is fired after each update event is fired. For example, to end measuring frame rate by stats.js:

function measure(app) {
  // ...
  app.on("afterEach", () => {
    stats.end();
  });
}

app.call(measure);

app.on(“beforeAll”, callback)

The beforeAll event is fired before calling app.start. For example, to construct a Stats instance from stats.js:

function measure(app) {
  let stats;

  //...
  app.on("beforeAll", () => {
    const container = document.getElementById("tool");
    stats = new Stats();
    stats.dom.style.position = "inherit";
    stats.dom.style.marginLeft = "1em";
    container.appendChild(stats.dom);
  });
}

app.call(measure);

app.on(“afterAll”, callback)

The afterAll event is fired after calling app.dispose. For example, to remove the DOM of a Stats instance from stats.js:

function measure(app) {
  let stats;

  //...
  app.on("afterAll", () => {
    stats.dom.remove();
  });
}

app.call(measure);