modern-canvas 0.7.10 → 0.7.11

package/dist/index.mjs

@@ -332,76 +332,59 @@ class RawWeakMap {
 }
 
 class InputEvent {
-  bubbles = true;
+  cursor;
+  // Event
+  bubbles = false;
+  cancelBubble = false;
   cancelable = false;
-  which;
-  cancelBubble = true;
-  returnValue;
-  srcElement;
   composed = false;
-  currentTarget;
   defaultPrevented = false;
   eventPhase = InputEvent.prototype.NONE;
-  isTrusted;
-  target;
-  timeStamp;
-  type;
-  nativeEvent;
-  originalEvent;
-  propagationStopped = false;
-  propagationImmediatelyStopped = false;
-  path;
-  detail;
-  view;
-  layer = { x: 0, y: 0 };
-  get layerX() {
-    return this.layer.x;
-  }
-  get layerY() {
-    return this.layer.y;
-  }
-  page = { x: 0, y: 0 };
-  get pageX() {
-    return this.page.x;
-  }
-  get pageY() {
-    return this.page.y;
+  isTrusted = false;
+  timeStamp = 0;
+  type = "";
+  composedPath() {
+    return this.path;
   }
   initEvent(..._args) {
     throw new Error("initEvent() is a legacy DOM API. It is not implemented in the Federated Events API.");
   }
-  initUIEvent(..._args) {
-    throw new Error("initUIEvent() is a legacy DOM API. It is not implemented in the Federated Events API.");
-  }
-  composedPath() {
-    return this.path;
-  }
   preventDefault() {
-    if (this.nativeEvent instanceof Event && this.nativeEvent.cancelable) {
+    if ("preventDefault" in this.nativeEvent && this.nativeEvent.cancelable) {
       this.nativeEvent.preventDefault();
     }
     this.defaultPrevented = true;
   }
+  propagationImmediatelyStopped = false;
   stopImmediatePropagation() {
     this.propagationImmediatelyStopped = true;
   }
+  propagationStopped = false;
   stopPropagation() {
+    if ("stopPropagation" in this.nativeEvent) {
+      this.nativeEvent.stopPropagation();
+    }
     this.propagationStopped = true;
   }
   NONE = 0;
   CAPTURING_PHASE = 1;
   AT_TARGET = 2;
   BUBBLING_PHASE = 3;
+  initUIEvent(..._args) {
+    throw new Error("initUIEvent() is a legacy DOM API. It is not implemented in the Federated Events API.");
+  }
+}
+
+class KeyboardInputEvent extends InputEvent {
+  getModifierState(..._args) {
+    throw new Error("getModifierState() is a legacy DOM API. It is not implemented in the Federated Events API.");
+  }
+  initKeyboardEvent(..._args) {
+    throw new Error("initKeyboardEvent() is a legacy DOM API. It is not implemented in the Federated Events API.");
+  }
 }
 
 class MouseInputEvent extends InputEvent {
-  altKey;
-  button;
-  buttons;
-  ctrlKey;
-  metaKey;
-  relatedTarget;
-  shiftKey;
   client = { x: 0, y: 0 };
   get clientX() {
     return this.client.x;
@@ -409,11 +392,12 @@ class MouseInputEvent extends InputEvent {
   get clientY() {
     return this.client.y;
   }
-  get x() {
-    return this.clientX;
+  layer = { x: 0, y: 0 };
+  get layerX() {
+    return this.layer.x;
   }
-  get y() {
-    return this.clientY;
+  get layerY() {
+    return this.layer.y;
   }
   movement = { x: 0, y: 0 };
   get movementX() {
@@ -429,12 +413,12 @@ class MouseInputEvent extends InputEvent {
   get offsetY() {
     return this.offset.y;
   }
-  global = { x: 0, y: 0 };
-  get globalX() {
-    return this.global.x;
+  page = { x: 0, y: 0 };
+  get pageX() {
+    return this.page.x;
   }
-  get globalY() {
-    return this.global.y;
+  get pageY() {
+    return this.page.y;
   }
   screen = { x: 0, y: 0 };
   get screenX() {
@@ -443,24 +427,31 @@ class MouseInputEvent extends InputEvent {
   get screenY() {
     return this.screen.y;
   }
+  get x() {
+    return this.clientX;
+  }
+  get y() {
+    return this.clientY;
+  }
   getModifierState(key) {
     return "getModifierState" in this.nativeEvent && this.nativeEvent.getModifierState(key);
   }
   initMouseEvent(..._args) {
     throw new Error("Method not implemented.");
   }
+  global = { x: 0, y: 0 };
+  get globalX() {
+    return this.global.x;
+  }
+  get globalY() {
+    return this.global.y;
+  }
 }
 
 class PointerInputEvent extends MouseInputEvent {
   width = 0;
   height = 0;
   isPrimary = false;
-  pointerType;
-  pressure;
-  tangentialPressure;
-  tiltX;
-  tiltY;
-  twist;
   getCoalescedEvents() {
     if (this.type === "pointermove" || this.type === "mousemove" || this.type === "touchmove") {
       return [this];
@@ -473,10 +464,6 @@ class PointerInputEvent extends MouseInputEvent {
 }
 
 class WheelInputEvent extends MouseInputEvent {
-  deltaMode;
-  deltaX;
-  deltaY;
-  deltaZ;
   static DOM_DELTA_PIXEL = 0;
   DOM_DELTA_PIXEL = 0;
   static DOM_DELTA_LINE = 1;
@@ -493,6 +480,10 @@ const TOUCH_TO_POINTER = {
   touchcancel: "pointercancel"
 };
 class Input extends EventEmitter {
+  /**
+   * Current event
+   */
+  event;
   target;
   cursor = "default";
   cursorStyles = {
@@ -500,10 +491,6 @@ class Input extends EventEmitter {
     pointer: "pointer"
   };
   setuped = false;
-  /**
-   * Current event
-   */
-  event;
   enableMoveEvent = true;
   enableWheelEvent = true;
   enableClickEvent = true;
@@ -524,24 +511,27 @@ class Input extends EventEmitter {
       style.touchAction = "";
     }
     if (SUPPORTS_POINTER_EVENTS) {
-      this.target.removeEventListener("pointerdown", this.onPointerDown);
-      this.target.removeEventListener("pointerleave", this.onPointerOver);
-      this.target.removeEventListener("pointerover", this.onPointerOver);
-      this.target.removeEventListener("pointermove", this.onPointerMove);
-      this.target.removeEventListener("pointerup", this.onPointerUp);
+      this.target.removeEventListener("pointerdown", this._onPointerDown);
+      this.target.removeEventListener("pointerleave", this._onPointerOver);
+      this.target.removeEventListener("pointerover", this._onPointerOver);
+      this.target.removeEventListener("pointermove", this._onPointerMove);
+      this.target.removeEventListener("pointerup", this._onPointerUp);
     } else {
-      this.target.removeEventListener("mousedown", this.onPointerDown);
-      this.target.removeEventListener("mouseout", this.onPointerOver);
-      this.target.removeEventListener("mouseover", this.onPointerOver);
-      this.target.removeEventListener("mousemove", this.onPointerMove);
-      this.target.removeEventListener("mouseup", this.onPointerUp);
+      this.target.removeEventListener("mousedown", this._onPointerDown);
+      this.target.removeEventListener("mouseout", this._onPointerOver);
+      this.target.removeEventListener("mouseover", this._onPointerOver);
+      this.target.removeEventListener("mousemove", this._onPointerMove);
+      this.target.removeEventListener("mouseup", this._onPointerUp);
     }
     if (SUPPORTS_TOUCH_EVENTS) {
-      this.target.removeEventListener("touchstart", this.onPointerDown);
-      this.target.removeEventListener("touchmove", this.onPointerMove);
-      this.target.removeEventListener("touchend", this.onPointerUp);
-    }
-    this.target.removeEventListener("wheel", this.onWheel);
+      this.target.removeEventListener("touchstart", this._onPointerDown);
+      this.target.removeEventListener("touchmove", this._onPointerMove);
+      this.target.removeEventListener("touchend", this._onPointerUp);
+    }
+    this.target.removeEventListener("wheel", this._onWheel);
+    document.removeEventListener("keydown", this._onKeyDown);
+    document.removeEventListener("keypress", this._onKeyPress);
+    document.removeEventListener("keyup", this._onKeyUp);
     this.target = void 0;
     this.setuped = false;
   }
@@ -559,24 +549,27 @@ class Input extends EventEmitter {
       }
     }
     if (SUPPORTS_POINTER_EVENTS) {
-      this.target.addEventListener("pointerdown", this.onPointerDown);
-      this.target.addEventListener("pointerleave", this.onPointerOver);
-      this.target.addEventListener("pointerover", this.onPointerOver);
-      this.target.addEventListener("pointermove", this.onPointerMove);
-      this.target.addEventListener("pointerup", this.onPointerUp);
+      this.target.addEventListener("pointerdown", this._onPointerDown);
+      this.target.addEventListener("pointerleave", this._onPointerOver);
+      this.target.addEventListener("pointerover", this._onPointerOver);
+      this.target.addEventListener("pointermove", this._onPointerMove);
+      this.target.addEventListener("pointerup", this._onPointerUp);
     } else {
-      this.target.addEventListener("mousedown", this.onPointerDown);
-      this.target.addEventListener("mouseout", this.onPointerOver);
-      this.target.addEventListener("mouseover", this.onPointerOver);
-      this.target.addEventListener("mousemove", this.onPointerMove);
-      this.target.addEventListener("mouseup", this.onPointerUp);
+      this.target.addEventListener("mousedown", this._onPointerDown);
+      this.target.addEventListener("mouseout", this._onPointerOver);
+      this.target.addEventListener("mouseover", this._onPointerOver);
+      this.target.addEventListener("mousemove", this._onPointerMove);
+      this.target.addEventListener("mouseup", this._onPointerUp);
     }
     if (SUPPORTS_TOUCH_EVENTS) {
-      this.target.addEventListener("touchstart", this.onPointerDown);
-      this.target.addEventListener("touchmove", this.onPointerMove);
-      this.target.addEventListener("touchend", this.onPointerUp);
-    }
-    this.target.addEventListener("wheel", this.onWheel);
+      this.target.addEventListener("touchstart", this._onPointerDown);
+      this.target.addEventListener("touchmove", this._onPointerMove);
+      this.target.addEventListener("touchend", this._onPointerUp);
+    }
+    this.target.addEventListener("wheel", this._onWheel);
+    document.addEventListener("keydown", this._onKeyDown);
+    document.addEventListener("keypress", this._onKeyPress);
+    document.addEventListener("keyup", this._onKeyUp);
     this.setuped = true;
   }
   normalize(event) {
@@ -646,26 +639,8 @@ class Input extends EventEmitter {
     }
     return events;
   }
-  cloneWheelEvent(nativeEvent) {
-    const event = new WheelInputEvent();
-    this.copyMouseEvent(event, nativeEvent);
-    event.wheelDeltaY = nativeEvent.wheelDeltaY;
-    event.deltaX = nativeEvent.deltaX;
-    event.deltaY = nativeEvent.deltaY;
-    event.deltaZ = nativeEvent.deltaZ;
-    event.deltaMode = nativeEvent.deltaMode;
-    this.mapPositionToPoint(event.screen, nativeEvent.clientX, nativeEvent.clientY);
-    event.global.x = event.screen.x;
-    event.global.y = event.screen.y;
-    event.offset.x = event.screen.x;
-    event.offset.y = event.screen.y;
-    event.nativeEvent = nativeEvent;
-    event.type = nativeEvent.type;
-    return event;
-  }
-  clonePointerEvent(nativeEvent) {
+  _clonePointerEvent(nativeEvent) {
     const event = new PointerInputEvent();
-    event.originalEvent = null;
     event.nativeEvent = nativeEvent;
     event.pointerId = nativeEvent.pointerId;
     event.width = nativeEvent.width;
@@ -678,7 +653,7 @@ class Input extends EventEmitter {
     event.tiltY = nativeEvent.tiltY;
     event.twist = nativeEvent.twist;
     event.isTrusted = nativeEvent.isTrusted;
-    this.copyMouseEvent(event, nativeEvent);
+    this._copyMouseEvent(event, nativeEvent);
     this.mapPositionToPoint(event.screen, nativeEvent.clientX, nativeEvent.clientY);
     event.global.x = event.screen.x;
     event.global.y = event.screen.y;
@@ -693,12 +668,23 @@ class Input extends EventEmitter {
     }
     return event;
   }
-  copyMouseEvent(event, nativeEvent) {
-    event.preventDefault = nativeEvent.preventDefault.bind(nativeEvent);
-    event.stopPropagation = nativeEvent.stopPropagation.bind(nativeEvent);
+  _copyInputEvent(event, nativeEvent) {
+    event.nativeEvent = nativeEvent;
+    event.bubbles = nativeEvent.bubbles;
+    event.cancelBubble = nativeEvent.cancelBubble;
+    event.cancelable = nativeEvent.cancelable;
+    event.composed = nativeEvent.composed;
+    event.currentTarget = nativeEvent.currentTarget;
+    event.defaultPrevented = nativeEvent.defaultPrevented;
+    event.eventPhase = nativeEvent.eventPhase;
     event.isTrusted = nativeEvent.isTrusted;
-    event.timeStamp = performance.now();
+    event.returnValue = nativeEvent.returnValue;
+    event.srcElement = nativeEvent.srcElement;
+    event.timeStamp = nativeEvent.timeStamp;
     event.type = nativeEvent.type;
+  }
+  _copyMouseEvent(event, nativeEvent) {
+    this._copyInputEvent(event, nativeEvent);
     event.altKey = nativeEvent.altKey;
     event.button = nativeEvent.button;
     event.buttons = nativeEvent.buttons;
@@ -713,10 +699,40 @@ class Input extends EventEmitter {
     event.relatedTarget = null;
     event.shiftKey = nativeEvent.shiftKey;
   }
-  setCursor(mode) {
+  _cloneWheelEvent(nativeEvent) {
+    const event = new WheelInputEvent();
+    this._copyMouseEvent(event, nativeEvent);
+    event.wheelDeltaY = nativeEvent.wheelDeltaY;
+    event.deltaX = nativeEvent.deltaX;
+    event.deltaY = nativeEvent.deltaY;
+    event.deltaZ = nativeEvent.deltaZ;
+    event.deltaMode = nativeEvent.deltaMode;
+    this.mapPositionToPoint(event.screen, nativeEvent.clientX, nativeEvent.clientY);
+    event.global.x = event.screen.x;
+    event.global.y = event.screen.y;
+    event.offset.x = event.screen.x;
+    event.offset.y = event.screen.y;
+    return event;
+  }
+  _cloneKeyboardEvent(nativeEvent) {
+    const event = new KeyboardInputEvent();
+    this._copyInputEvent(event, nativeEvent);
+    event.altKey = nativeEvent.altKey;
+    event.charCode = nativeEvent.charCode;
+    event.code = nativeEvent.code;
+    event.ctrlKey = nativeEvent.ctrlKey;
+    event.isComposing = nativeEvent.isComposing;
+    event.key = nativeEvent.key;
+    event.keyCode = nativeEvent.keyCode;
+    event.location = nativeEvent.location;
+    event.metaKey = nativeEvent.metaKey;
+    event.repeat = nativeEvent.repeat;
+    event.shiftKey = nativeEvent.shiftKey;
+    return event;
+  }
+  setCursor(mode = "default") {
     if (!this.target)
       return;
-    mode = mode || "default";
     if (this.cursor === mode) {
       return;
     }
@@ -755,36 +771,71 @@ class Input extends EventEmitter {
     point.x = (x - rect.left) * (width / rect.width) * multiplier;
     point.y = (y - rect.top) * (height / rect.height) * multiplier;
   }
-  onPointerDown = (nativeEvent) => {
+  _onKeyDown = (nativeEvent) => {
+    const events = this.normalize(nativeEvent);
+    for (let i = 0, len = events.length; i < len; i++) {
+      this.emit("keydown", this.event = this._cloneKeyboardEvent(events[i]));
+    }
+    if (this.event?.cursor) {
+      this.setCursor(this.event.cursor);
+    }
+  };
+  _onKeyPress = (nativeEvent) => {
+    const events = this.normalize(nativeEvent);
+    for (let i = 0, len = events.length; i < len; i++) {
+      this.emit("keypress", this.event = this._cloneKeyboardEvent(events[i]));
+    }
+    if (this.event?.cursor) {
+      this.setCursor(this.event.cursor);
+    }
+  };
+  _onKeyUp = (nativeEvent) => {
+    const events = this.normalize(nativeEvent);
+    for (let i = 0, len = events.length; i < len; i++) {
+      this.emit("keyup", this.event = this._cloneKeyboardEvent(events[i]));
+    }
+    if (this.event?.cursor) {
+      this.setCursor(this.event.cursor);
+    }
+  };
+  _onPointerDown = (nativeEvent) => {
     if (SUPPORTS_TOUCH_EVENTS && nativeEvent.pointerType === "touch")
       return;
     const events = this.normalize(nativeEvent);
     for (let i = 0, len = events.length; i < len; i++) {
-      this.emit("pointerdown", this.event = this.clonePointerEvent(events[i]));
+      this.emit("pointerdown", this.event = this._clonePointerEvent(events[i]));
+    }
+    if (this.event?.cursor) {
+      this.setCursor(this.event.cursor);
     }
-    this.setCursor(this.cursor);
   };
-  onPointerOver = (nativeEvent) => {
+  _onPointerOver = (nativeEvent) => {
     if (!this.enableClickEvent)
       return;
     if (SUPPORTS_TOUCH_EVENTS && nativeEvent.pointerType === "touch")
       return;
     const events = this.normalize(nativeEvent);
     for (let i = 0, len = events.length; i < len; i++) {
-      this.emit("pointerover", this.event = this.clonePointerEvent(events[i]));
+      this.emit("pointerover", this.event = this._clonePointerEvent(events[i]));
+    }
+    if (this.event?.cursor) {
+      this.setCursor(this.event.cursor);
     }
   };
-  onPointerMove = (nativeEvent) => {
+  _onPointerMove = (nativeEvent) => {
     if (!this.enableMoveEvent)
       return;
     if (SUPPORTS_TOUCH_EVENTS && nativeEvent.pointerType === "touch")
       return;
     const events = this.normalize(nativeEvent);
     for (let i = 0, len = events.length; i < len; i++) {
-      this.emit("pointermove", this.event = this.clonePointerEvent(events[i]));
+      this.emit("pointermove", this.event = this._clonePointerEvent(events[i]));
+    }
+    if (this.event?.cursor) {
+      this.setCursor(this.event.cursor);
     }
   };
-  onPointerUp = (nativeEvent) => {
+  _onPointerUp = (nativeEvent) => {
     if (!this.enableClickEvent)
       return;
     if (SUPPORTS_TOUCH_EVENTS && nativeEvent.pointerType === "touch")
@@ -796,17 +847,23 @@ class Input extends EventEmitter {
     const outside = target !== this.target ? "outside" : "";
     const events = this.normalize(nativeEvent);
     for (let i = 0, len = events.length; i < len; i++) {
-      const event = this.clonePointerEvent(events[i]);
+      const event = this._clonePointerEvent(events[i]);
       event.type += outside;
       this.emit("pointerup", this.event = event);
     }
+    if (this.event?.cursor) {
+      this.setCursor(this.event.cursor);
+    }
   };
-  onWheel = (nativeEvent) => {
+  _onWheel = (nativeEvent) => {
     if (!this.enableWheelEvent)
       return;
     const events = this.normalize(nativeEvent);
     for (let i = 0, len = events.length; i < len; i++) {
-      this.emit("wheel", this.event = this.cloneWheelEvent(events[i]));
+      this.emit("wheel", this.event = this._cloneWheelEvent(events[i]));
+    }
+    if (this.event?.cursor) {
+      this.setCursor(this.event.cursor);
     }
   };
 }
@@ -2097,13 +2154,13 @@ class Vector3 extends Vector {
   }
 }
 
-var __defProp$P = Object.defineProperty;
+var __defProp$Q = Object.defineProperty;
 var __decorateClass$Z = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$P(target, key, result);
+  if (result) __defProp$Q(target, key, result);
   return result;
 };
 class MainLoop extends CoreObject {
@@ -4298,13 +4355,13 @@ class Geometry extends Resource {
   }
 }
 
-var __defProp$O = Object.defineProperty;
+var __defProp$P = Object.defineProperty;
 var __decorateClass$Y = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$O(target, key, result);
+  if (result) __defProp$P(target, key, result);
   return result;
 };
 class IndexBuffer extends Resource {
@@ -4355,13 +4412,13 @@ __decorateClass$Y([
   property({ protected: true, fallback: false })
 ], IndexBuffer.prototype, "dynamic");
 
-var __defProp$N = Object.defineProperty;
+var __defProp$O = Object.defineProperty;
 var __decorateClass$X = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$N(target, key, result);
+  if (result) __defProp$O(target, key, result);
   return result;
 };
 class VertexBuffer extends Resource {
@@ -4412,13 +4469,13 @@ __decorateClass$X([
   property({ protected: true, fallback: false })
 ], VertexBuffer.prototype, "dynamic");
 
-var __defProp$M = Object.defineProperty;
+var __defProp$N = Object.defineProperty;
 var __decorateClass$W = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$M(target, key, result);
+  if (result) __defProp$N(target, key, result);
   return result;
 };
 class VertexAttribute extends Resource {
@@ -4714,13 +4771,13 @@ class UvGeometry extends Geometry {
   }
 }
 
-var __defProp$L = Object.defineProperty;
+var __defProp$M = Object.defineProperty;
 var __decorateClass$V = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$L(target, key, result);
+  if (result) __defProp$M(target, key, result);
   return result;
 };
 class Texture2D extends Resource {
@@ -4891,13 +4948,13 @@ class AnimatedTexture extends Resource {
   }
 }
 
-var __defProp$K = Object.defineProperty;
+var __defProp$L = Object.defineProperty;
 var __decorateClass$U = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$K(target, key, result);
+  if (result) __defProp$L(target, key, result);
   return result;
 };
 class CanvasTexture extends Texture2D {
@@ -5136,13 +5193,13 @@ class PixelsTexture extends Texture2D {
   }
 }
 
-var __defProp$J = Object.defineProperty;
+var __defProp$K = Object.defineProperty;
 var __decorateClass$T = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$J(target, key, result);
+  if (result) __defProp$K(target, key, result);
   return result;
 };
 function resolveOptions(options) {
@@ -5625,14 +5682,14 @@ class Children extends Array {
   }
 }
 
-var __defProp$I = Object.defineProperty;
+var __defProp$J = Object.defineProperty;
 var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
 var __decorateClass$S = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$J(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$I(target, key, result);
+  if (kind && result) __defProp$J(target, key, result);
   return result;
 };
 const iidMap = {};
@@ -5906,10 +5963,16 @@ let Node = class extends CoreObject {
     }
   }
   input(event, key) {
+    if (event.propagationStopped) {
+      return;
+    }
     const array = this._children.internal;
     for (let i = array.length - 1; i >= 0; i--) {
       array[i].input(event, key);
     }
+    if (event.propagationStopped) {
+      return;
+    }
     this._input(event, key);
   }
   getIndex() {
@@ -6144,14 +6207,14 @@ Node = __decorateClass$S([
   customNode("Node")
 ], Node);
 
-var __defProp$H = Object.defineProperty;
+var __defProp$I = Object.defineProperty;
 var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
 var __decorateClass$R = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$H(target, key, result);
+  if (kind && result) __defProp$I(target, key, result);
   return result;
 };
 let TimelineNode = class extends Node {
@@ -6227,14 +6290,14 @@ TimelineNode = __decorateClass$R([
   customNode("TimelineNode")
 ], TimelineNode);
 
-var __defProp$G = Object.defineProperty;
+var __defProp$H = Object.defineProperty;
 var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
 var __decorateClass$Q = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$G(target, key, result);
+  if (kind && result) __defProp$H(target, key, result);
   return result;
 };
 let CanvasItem = class extends TimelineNode {
@@ -6402,14 +6465,14 @@ CanvasItem = __decorateClass$Q([
   customNode("CanvasItem")
 ], CanvasItem);
 
-var __defProp$F = Object.defineProperty;
+var __defProp$G = Object.defineProperty;
 var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
 var __decorateClass$P = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$F(target, key, result);
+  if (kind && result) __defProp$G(target, key, result);
   return result;
 };
 let Viewport = class extends Node {
@@ -6566,14 +6629,14 @@ Viewport = __decorateClass$P([
   customNode("Viewport")
 ], Viewport);
 
-var __defProp$E = Object.defineProperty;
+var __defProp$F = Object.defineProperty;
 var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
 var __decorateClass$O = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$E(target, key, result);
+  if (kind && result) __defProp$F(target, key, result);
   return result;
 };
 let Effect = class extends TimelineNode {
@@ -6857,14 +6920,14 @@ class RenderStack {
   }
 }
 
-var __defProp$D = Object.defineProperty;
+var __defProp$E = Object.defineProperty;
 var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
 var __decorateClass$N = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$D(target, key, result);
+  if (kind && result) __defProp$E(target, key, result);
   return result;
 };
 let Timeline = class extends Node {
@@ -6940,13 +7003,13 @@ Window = __decorateClass$M([
   customNode("Window")
 ], Window);
 
-var __defProp$C = Object.defineProperty;
+var __defProp$D = Object.defineProperty;
 var __decorateClass$L = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$C(target, key, result);
+  if (result) __defProp$D(target, key, result);
   return result;
 };
 class SceneTree extends MainLoop {
@@ -7050,14 +7113,14 @@ Transition = __decorateClass$K([
   })
 ], Transition);
 
-var __defProp$B = Object.defineProperty;
+var __defProp$C = Object.defineProperty;
 var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
 var __decorateClass$J = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$B(target, key, result);
+  if (kind && result) __defProp$C(target, key, result);
   return result;
 };
 let Node2D = class extends CanvasItem {
@@ -7170,18 +7233,21 @@ Node2D = __decorateClass$J([
   customNode("Node2D")
 ], Node2D);
 
+var __defProp$B = Object.defineProperty;
 var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
 var __decorateClass$I = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (decorator(result)) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$B(target, key, result);
   return result;
 };
 let Camera2D = class extends Node2D {
   zoom = new Vector2(1, 1).on("update", () => this.updateCanvasTransform());
   maxZoom = new Vector2(6, 6);
   minZoom = new Vector2(0.1, 0.1);
+  _screenOffset = { x: 0, y: 0 };
   constructor(properties, nodes = []) {
     super();
     this.setProperties(properties).append(nodes);
@@ -7202,24 +7268,61 @@ let Camera2D = class extends Node2D {
   }
   _input(event, key) {
     super._input(event, key);
-    if (key === "wheel") {
+    if (key === "keydown") {
       const e = event;
-      if (e.ctrlKey) {
-        const isTouchPad = e.wheelDeltaY ? Math.abs(Math.abs(e.wheelDeltaY) - Math.abs(3 * e.deltaY)) < 3 : e.deltaMode === 0;
-        if (!isTouchPad) {
-          e.preventDefault();
-          const oldZoom = this.zoom.x;
-          this.addZoom(e.deltaY * -0.015);
-          const ratio = 1 - this.zoom.x / oldZoom;
-          this.position.add(
-            (e.screenX - this.position.x) * ratio,
-            (e.screenY - this.position.y) * ratio
-          );
-        }
-      } else {
+      if (!this.spaceKey && e.code === "Space") {
+        e.cursor = "grab";
+        this.spaceKey = true;
+      }
+    } else if (key === "keyup") {
+      const e = event;
+      if (e.code === "Space") {
+        e.cursor = "default";
+        this.spaceKey = false;
+        this.grabbing = false;
+      }
+    } else if (key === "pointerdown") {
+      const e = event;
+      if (!this.grabbing && this.spaceKey) {
+        this.grabbing = true;
+        e.cursor = "grabbing";
+        this._screenOffset = { x: e.screenX, y: e.screenY };
+      }
+    } else if (key === "pointermove") {
+      const e = event;
+      if (this.grabbing) {
+        this.position.add(
+          -(this._screenOffset.x - e.screenX),
+          -(this._screenOffset.y - e.screenY)
+        );
+        this._screenOffset = { x: e.screenX, y: e.screenY };
+      }
+    } else if (key === "pointerup") {
+      const e = event;
+      if (this.grabbing) {
+        this.grabbing = false;
+        e.cursor = "grab";
+      }
+    } else if (key === "wheel") {
+      this._onWheel(event);
+    }
+  }
+  _onWheel(e) {
+    if (e.ctrlKey) {
+      const isTouchPad = e.wheelDeltaY ? Math.abs(Math.abs(e.wheelDeltaY) - Math.abs(3 * e.deltaY)) < 3 : e.deltaMode === 0;
+      if (!isTouchPad) {
         e.preventDefault();
-        this.position.add(-e.deltaX, -e.deltaY);
+        const oldZoom = this.zoom.x;
+        this.addZoom(e.deltaY * -0.015);
+        const ratio = 1 - this.zoom.x / oldZoom;
+        this.position.add(
+          (e.screenX - this.position.x) * ratio,
+          (e.screenY - this.position.y) * ratio
+        );
       }
+    } else {
+      e.preventDefault();
+      this.position.add(-e.deltaX, -e.deltaY);
     }
   }
   updateTransform() {
@@ -7234,6 +7337,12 @@ let Camera2D = class extends Node2D {
     this.emit("updateCanvasTransform");
   }
 };
+__decorateClass$I([
+  property({ protected: true, fallback: false })
+], Camera2D.prototype, "spaceKey", 2);
+__decorateClass$I([
+  property({ protected: true, fallback: false })
+], Camera2D.prototype, "grabbing", 2);
 Camera2D = __decorateClass$I([
   customNode("Camera2D", {
     processMode: "disabled",
@@ -9331,6 +9440,8 @@ class BaseElement2DOutline extends BaseElement2DFill {
     switch (key) {
       case "width":
       case "style":
+      case "lineCap":
+      case "lineJoin":
       case "enabled":
         this.parent.requestRedraw();
         break;
@@ -9347,7 +9458,8 @@ class BaseElement2DOutline extends BaseElement2DFill {
     ctx.lineWidth = this.width || 1;
     ctx.uvTransform = uvTransform;
     ctx.strokeStyle = this._texture ?? this.color;
-    ctx.strokeAlignment = 0;
+    ctx.lineCap = this.lineCap;
+    ctx.lineJoin = this.lineJoin;
     ctx.stroke({ disableWrapMode });
   }
 }
@@ -9360,6 +9472,12 @@ __decorateClass$p([
 __decorateClass$p([
   property({ fallback: "solid" })
 ], BaseElement2DOutline.prototype, "style");
+__decorateClass$p([
+  property({ fallback: "butt" })
+], BaseElement2DOutline.prototype, "lineCap");
+__decorateClass$p([
+  property({ fallback: "miter" })
+], BaseElement2DOutline.prototype, "lineJoin");
 
 var __defProp$h = Object.defineProperty;
 var __decorateClass$o = (decorators, target, key, kind) => {
@@ -13848,7 +13966,10 @@ class Engine extends SceneTree {
         "pointerover",
         "pointermove",
         "pointerup",
-        "wheel"
+        "wheel",
+        "keydown",
+        "keypress",
+        "keyup"
       ].forEach((key) => {
         this.input.on(key, (event) => {
           this.root.input(event, key);
@@ -13987,4 +14108,4 @@ async function render(options) {
   });
 }
 
-export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DShape, BaseElement2DStyle, BaseElement2DText, Camera2D, CanvasContext, CanvasItem, CanvasItemEditor, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GIFLoader, GaussianBlurEffect, Geometry, GlitchEffect, GodrayEffect, GradientTexture, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JSONLoader, KawaseBlurEffect, KawaseTransition, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, SceneTree, ScrollBar, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, Window, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, frag$1 as frag, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, render, timingFunctions, uid };
+export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DShape, BaseElement2DStyle, BaseElement2DText, Camera2D, CanvasContext, CanvasItem, CanvasItemEditor, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GIFLoader, GaussianBlurEffect, Geometry, GlitchEffect, GodrayEffect, GradientTexture, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JSONLoader, KawaseBlurEffect, KawaseTransition, KeyboardInputEvent, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, SceneTree, ScrollBar, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, Window, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, frag$1 as frag, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, render, timingFunctions, uid };