Input System

Unified pointer events, gestures, and coordinate transformation.

Object-Level Events

import { ElementObject } from "@snap-engine/core";

const object = new ElementObject(engine);
object.element = myElement;

object.event.input.pointerDown = (props) => {
  console.log(props.position.x, props.position.y);
};

object.event.input.pointerMove = (props) => {
  console.log(props.position.cameraX, props.position.cameraY);
};

object.event.input.pointerUp = (props) => {
  console.log(props.position.screenX, props.position.screenY);
};

object.event.input.mouseWheel = (props) => {
  console.log(props.delta);
};

Global Events

object.event.global.pointerMove = (props) => {
  console.log(props.position.x, props.position.y);
};

object.event.global.mouseWheel = (props) => {
  console.log(props.delta);
};

Drag Gestures

object.event.input.dragStart = (props) => {
  console.log(props.start.x, props.start.y);
};

object.event.input.drag = (props) => {
  console.log(props.position.x, props.position.y);
  console.log(props.delta.x, props.delta.y);
};

object.event.input.dragEnd = (props) => {
  console.log(props.end.x, props.end.y);
};

Pinch Gestures

object.event.input.pinchStart = (props) => {
  console.log(props.start.distance);
  console.log(props.start.pointerList);
};

object.event.input.pinch = (props) => {
  const scale = props.distance / props.start.distance;
  console.log(scale);
};

object.event.input.pinchEnd = (props) => {
  console.log(props.end.pointerList);
};

Event Position

PropertyDescription
screenX, screenYBrowser viewport coordinates.
cameraX, cameraYCoordinates relative to the engine container.
x, yWorld coordinates after camera conversion.

Event Names

EventScope
pointerDownObject and global
pointerMoveObject and global
pointerUpObject and global
mouseWheelObject and global
dragStartObject and global
dragObject and global
dragEndObject and global
pinchStartObject and global
pinchObject and global
pinchEndObject and global