modern-canvas 0.7.10 → 0.7.12

package/dist/index.cjs

@@ -338,76 +338,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;
@@ -415,11 +398,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() {
@@ -435,12 +419,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() {
@@ -449,24 +433,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];
@@ -479,10 +470,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;
@@ -499,6 +486,10 @@ const TOUCH_TO_POINTER = {
   touchcancel: "pointercancel"
 };
 class Input extends modernIdoc.EventEmitter {
+  /**
+   * Current event
+   */
+  event;
   target;
   cursor = "default";
   cursorStyles = {
@@ -506,10 +497,6 @@ class Input extends modernIdoc.EventEmitter {
     pointer: "pointer"
   };
   setuped = false;
-  /**
-   * Current event
-   */
-  event;
   enableMoveEvent = true;
   enableWheelEvent = true;
   enableClickEvent = true;
@@ -530,24 +517,27 @@ class Input extends modernIdoc.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;
   }
@@ -565,24 +555,27 @@ class Input extends modernIdoc.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) {
@@ -652,26 +645,8 @@ class Input extends modernIdoc.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;
@@ -684,7 +659,7 @@ class Input extends modernIdoc.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;
@@ -699,12 +674,23 @@ class Input extends modernIdoc.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;
@@ -719,10 +705,40 @@ class Input extends modernIdoc.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;
     }
@@ -761,36 +777,71 @@ class Input extends modernIdoc.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")
@@ -802,17 +853,23 @@ class Input extends modernIdoc.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);
     }
   };
 }
@@ -2103,13 +2160,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 {
@@ -4304,13 +4361,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 {
@@ -4361,13 +4418,13 @@ __decorateClass$Y([
   modernIdoc.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 {
@@ -4418,13 +4475,13 @@ __decorateClass$X([
   modernIdoc.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 {
@@ -4720,13 +4777,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 {
@@ -4897,13 +4954,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 {
@@ -5142,13 +5199,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) {
@@ -5631,14 +5688,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 = {};
@@ -5912,10 +5969,16 @@ exports.Node = class Node 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() {
@@ -6150,14 +6213,14 @@ exports.Node = __decorateClass$S([
   customNode("Node")
 ], exports.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;
 };
 exports.TimelineNode = class TimelineNode extends exports.Node {
@@ -6233,14 +6296,14 @@ exports.TimelineNode = __decorateClass$R([
   customNode("TimelineNode")
 ], exports.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;
 };
 exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
@@ -6408,14 +6471,14 @@ exports.CanvasItem = __decorateClass$Q([
   customNode("CanvasItem")
 ], exports.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;
 };
 exports.Viewport = class Viewport extends exports.Node {
@@ -6572,14 +6635,14 @@ exports.Viewport = __decorateClass$P([
   customNode("Viewport")
 ], exports.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;
 };
 exports.Effect = class Effect extends exports.TimelineNode {
@@ -6863,14 +6926,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;
 };
 exports.Timeline = class Timeline extends exports.Node {
@@ -6946,13 +7009,13 @@ exports.Window = __decorateClass$M([
   customNode("Window")
 ], exports.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 {
@@ -7056,14 +7119,14 @@ exports.Transition = __decorateClass$K([
   })
 ], exports.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;
 };
 exports.Node2D = class Node2D extends exports.CanvasItem {
@@ -7176,18 +7239,21 @@ exports.Node2D = __decorateClass$J([
   customNode("Node2D")
 ], exports.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;
 };
 exports.Camera2D = class Camera2D extends exports.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);
@@ -7208,24 +7274,65 @@ exports.Camera2D = class Camera2D extends exports.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
-          );
+      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 || e.button === 1)) {
+        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;
+        if (this.spaceKey) {
+          e.cursor = "grab";
+        } else {
+          e.cursor = "default";
         }
-      } else {
+      }
+    } 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() {
@@ -7240,6 +7347,12 @@ exports.Camera2D = class Camera2D extends exports.Node2D {
     this.emit("updateCanvasTransform");
   }
 };
+__decorateClass$I([
+  modernIdoc.property({ protected: true, fallback: false })
+], exports.Camera2D.prototype, "spaceKey", 2);
+__decorateClass$I([
+  modernIdoc.property({ protected: true, fallback: false })
+], exports.Camera2D.prototype, "grabbing", 2);
 exports.Camera2D = __decorateClass$I([
   customNode("Camera2D", {
     processMode: "disabled",
@@ -9337,6 +9450,8 @@ class BaseElement2DOutline extends BaseElement2DFill {
     switch (key) {
       case "width":
       case "style":
+      case "lineCap":
+      case "lineJoin":
       case "enabled":
         this.parent.requestRedraw();
         break;
@@ -9353,7 +9468,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 });
   }
 }
@@ -9366,6 +9482,12 @@ __decorateClass$p([
 __decorateClass$p([
   modernIdoc.property({ fallback: "solid" })
 ], BaseElement2DOutline.prototype, "style");
+__decorateClass$p([
+  modernIdoc.property({ fallback: "butt" })
+], BaseElement2DOutline.prototype, "lineCap");
+__decorateClass$p([
+  modernIdoc.property({ fallback: "miter" })
+], BaseElement2DOutline.prototype, "lineJoin");
 
 var __defProp$h = Object.defineProperty;
 var __decorateClass$o = (decorators, target, key, kind) => {
@@ -13854,7 +13976,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);
@@ -14032,6 +14157,7 @@ exports.IndexBuffer = IndexBuffer;
 exports.Input = Input;
 exports.InputEvent = InputEvent;
 exports.JSONLoader = JSONLoader;
+exports.KeyboardInputEvent = KeyboardInputEvent;
 exports.Loader = Loader;
 exports.LottieLoader = LottieLoader;
 exports.MainLoop = MainLoop;