pts 0.12.7 → 0.12.9

package/dist/index.mjs

@@ -824,11 +824,11 @@ var Rectangle = class _Rectangle {
   /**
    * Create a new circle that either fits within or encloses the rectangle. Same as [`Circle.fromRect`](#link).
    * @param pts a Group or an Iterable<Pt> with 2 Pt representing a rectangle
-   * @param within if `true`, the circle will be within the rectangle. If `false`, the circle will enclose the rectangle. 
+   * @param enclose if `true`, the circle will enclose the rectangle. If `false`, the circle will fit inside the rectangle. 
    * @returns a Group that represents a circle
    */
-  static toCircle(pts, within = true) {
-    return Circle.fromRect(pts, within);
+  static toCircle(pts, enclose = true) {
+    return Circle.fromRect(pts, enclose);
   }
   /**
    * Create a square that either fits within or encloses a rectangle.
@@ -4024,8 +4024,6 @@ var Bound = class _Bound extends Group {
     super(...args);
     this._center = new Pt();
     this._size = new Pt();
-    this._topLeft = new Pt();
-    this._bottomRight = new Pt();
     this._inited = false;
     this.init();
   }
@@ -4059,10 +4057,6 @@ var Bound = class _Bound extends Group {
       this._inited = true;
     }
     if (this.p1 && this.p2) {
-      const a = this.p1;
-      const b = this.p2;
-      this.topLeft = a.$min(b);
-      this._bottomRight = a.$max(b);
       this._updateSize();
       this._inited = true;
     }
@@ -4071,33 +4065,33 @@ var Bound = class _Bound extends Group {
    * Clone this bound and return a new one.
    */
   clone() {
-    return new _Bound(this._topLeft.clone(), this._bottomRight.clone());
+    return new _Bound(this.topLeft.clone(), this.bottomRight.clone());
   }
   /**
    * Recalculte size and center.
    */
   _updateSize() {
-    this._size = this._bottomRight.$subtract(this._topLeft).abs();
+    this._size = this.bottomRight.$subtract(this.topLeft).abs();
     this._updateCenter();
   }
   /**
    * Recalculate center.
    */
   _updateCenter() {
-    this._center = this._size.$multiply(0.5).add(this._topLeft);
+    this._center = this._size.$multiply(0.5).add(this.topLeft);
   }
   /**
    * Recalculate based on top-left position and size.
    */
   _updatePosFromTop() {
-    this._bottomRight = this._topLeft.$add(this._size);
+    this.bottomRight = this.topLeft.$add(this._size);
     this._updateCenter();
   }
   /**
    * Recalculate based on bottom-right position and size.
    */
   _updatePosFromBottom() {
-    this._topLeft = this._bottomRight.$subtract(this._size);
+    this.topLeft = this.bottomRight.$subtract(this._size);
     this._updateCenter();
   }
   /**
@@ -4105,8 +4099,8 @@ var Bound = class _Bound extends Group {
    */
   _updatePosFromCenter() {
     const half = this._size.$multiply(0.5);
-    this._topLeft = this._center.$subtract(half);
-    this._bottomRight = this._center.$add(half);
+    this.topLeft = this._center.$subtract(half);
+    this.bottomRight = this._center.$add(half);
   }
   /**
    * Size of this Bound
@@ -4132,22 +4126,20 @@ var Bound = class _Bound extends Group {
    * Top-left position of this Bound
    */
   get topLeft() {
-    return new Pt(this._topLeft);
+    return new Pt(this[0]);
   }
   set topLeft(p) {
-    this._topLeft = new Pt(p);
-    this[0] = this._topLeft;
+    this[0] = new Pt(p);
     this._updateSize();
   }
   /**
    * Bottom-right position of this Bound
    */
   get bottomRight() {
-    return new Pt(this._bottomRight);
+    return new Pt(this[1]);
   }
   set bottomRight(p) {
-    this._bottomRight = new Pt(p);
-    this[1] = this._bottomRight;
+    this[1] = new Pt(p);
     this._updateSize();
   }
   /**
@@ -4209,8 +4201,8 @@ var Bound = class _Bound extends Group {
    * It's simpler and preferable to change the Bound's properties (eg, topLeft, bottomRight) instead of updating the Bound's Pts.
    */
   update() {
-    this._topLeft = this[0];
-    this._bottomRight = this[1];
+    this.topLeft = this[0];
+    this.bottomRight = this[1];
     this._updateSize();
     return this;
   }
@@ -5795,9 +5787,9 @@ var CanvasSpace2 = class extends MultiTouchSpace {
   constructor(elem, callback) {
     super();
     this._pixelScale = 1;
-    this._autoResize = true;
     this._bgcolor = "#e1e9f0";
     this._offscreen = false;
+    this._autoResize = true;
     this._initialResize = false;
     let _selector = null;
     let _existed = false;
@@ -5888,8 +5880,7 @@ var CanvasSpace2 = class extends MultiTouchSpace {
     this.autoResize = opt.resize != void 0 ? opt.resize : false;
     if (opt.retina !== false) {
       const r1 = window ? window.devicePixelRatio || 1 : 1;
-      const r2 = this._ctx.webkitBackingStorePixelRatio || this._ctx.mozBackingStorePixelRatio || this._ctx.msBackingStorePixelRatio || this._ctx.oBackingStorePixelRatio || this._ctx.backingStorePixelRatio || 1;
-      this._pixelScale = Math.max(1, r1 / r2);
+      this._pixelScale = Math.max(1, r1);
     }
     if (opt.offscreen) {
       this._offscreen = true;
@@ -5908,13 +5899,15 @@ var CanvasSpace2 = class extends MultiTouchSpace {
   * @param auto a boolean value indicating if auto size is set
   */
   set autoResize(auto) {
-    if (!window)
-      return;
     this._autoResize = auto;
     if (auto) {
-      window.addEventListener("resize", this._resizeHandler.bind(this));
+      this._resizeObserver = new ResizeObserver((entries) => {
+        this._resizeHandler(null);
+      });
+      this._resizeObserver.observe(this._container);
     } else {
-      window.removeEventListener("resize", this._resizeHandler.bind(this));
+      if (this._resizeObserver)
+        this._resizeObserver.disconnect();
     }
   }
   get autoResize() {
@@ -5959,12 +5952,10 @@ var CanvasSpace2 = class extends MultiTouchSpace {
   * @param evt 
   */
   _resizeHandler(evt) {
-    if (!window)
-      return;
     const b = this._autoResize || this._initialResize ? this._container.getBoundingClientRect() : this._canvas.getBoundingClientRect();
     if (b) {
       const box = Bound.fromBoundingRect(b);
-      box.center = box.center.add(window.pageXOffset, window.pageYOffset);
+      box.center = box.center.add((window == null ? void 0 : window.scrollX) || 0, (window == null ? void 0 : window.scrollY) || 0);
       this.resize(box, evt);
     }
   }
@@ -6091,9 +6082,7 @@ var CanvasSpace2 = class extends MultiTouchSpace {
   * Dispose of browser resources held by this space and remove all players. Call this before unmounting the canvas.
   */
   dispose() {
-    if (!window)
-      return;
-    window.removeEventListener("resize", this._resizeHandler.bind(this));
+    this._resizeObserver.disconnect();
     this.stop();
     this.removeAll();
     return this;

package/dist/pts.js

@@ -902,11 +902,11 @@ See https://github.com/williamngan/pts for details. */
     /**
      * Create a new circle that either fits within or encloses the rectangle. Same as [`Circle.fromRect`](#link).
      * @param pts a Group or an Iterable<Pt> with 2 Pt representing a rectangle
-     * @param within if `true`, the circle will be within the rectangle. If `false`, the circle will enclose the rectangle. 
+     * @param enclose if `true`, the circle will enclose the rectangle. If `false`, the circle will fit inside the rectangle. 
      * @returns a Group that represents a circle
      */
-    static toCircle(pts, within = true) {
-      return Circle.fromRect(pts, within);
+    static toCircle(pts, enclose = true) {
+      return Circle.fromRect(pts, enclose);
     }
     /**
      * Create a square that either fits within or encloses a rectangle.
@@ -4102,8 +4102,6 @@ See https://github.com/williamngan/pts for details. */
       super(...args);
       this._center = new Pt();
       this._size = new Pt();
-      this._topLeft = new Pt();
-      this._bottomRight = new Pt();
       this._inited = false;
       this.init();
     }
@@ -4137,10 +4135,6 @@ See https://github.com/williamngan/pts for details. */
         this._inited = true;
       }
       if (this.p1 && this.p2) {
-        const a = this.p1;
-        const b = this.p2;
-        this.topLeft = a.$min(b);
-        this._bottomRight = a.$max(b);
         this._updateSize();
         this._inited = true;
       }
@@ -4149,33 +4143,33 @@ See https://github.com/williamngan/pts for details. */
      * Clone this bound and return a new one.
      */
     clone() {
-      return new _Bound(this._topLeft.clone(), this._bottomRight.clone());
+      return new _Bound(this.topLeft.clone(), this.bottomRight.clone());
     }
     /**
      * Recalculte size and center.
      */
     _updateSize() {
-      this._size = this._bottomRight.$subtract(this._topLeft).abs();
+      this._size = this.bottomRight.$subtract(this.topLeft).abs();
       this._updateCenter();
     }
     /**
      * Recalculate center.
      */
     _updateCenter() {
-      this._center = this._size.$multiply(0.5).add(this._topLeft);
+      this._center = this._size.$multiply(0.5).add(this.topLeft);
     }
     /**
      * Recalculate based on top-left position and size.
      */
     _updatePosFromTop() {
-      this._bottomRight = this._topLeft.$add(this._size);
+      this.bottomRight = this.topLeft.$add(this._size);
       this._updateCenter();
     }
     /**
      * Recalculate based on bottom-right position and size.
      */
     _updatePosFromBottom() {
-      this._topLeft = this._bottomRight.$subtract(this._size);
+      this.topLeft = this.bottomRight.$subtract(this._size);
       this._updateCenter();
     }
     /**
@@ -4183,8 +4177,8 @@ See https://github.com/williamngan/pts for details. */
      */
     _updatePosFromCenter() {
       const half = this._size.$multiply(0.5);
-      this._topLeft = this._center.$subtract(half);
-      this._bottomRight = this._center.$add(half);
+      this.topLeft = this._center.$subtract(half);
+      this.bottomRight = this._center.$add(half);
     }
     /**
      * Size of this Bound
@@ -4210,22 +4204,20 @@ See https://github.com/williamngan/pts for details. */
      * Top-left position of this Bound
      */
     get topLeft() {
-      return new Pt(this._topLeft);
+      return new Pt(this[0]);
     }
     set topLeft(p) {
-      this._topLeft = new Pt(p);
-      this[0] = this._topLeft;
+      this[0] = new Pt(p);
       this._updateSize();
     }
     /**
      * Bottom-right position of this Bound
      */
     get bottomRight() {
-      return new Pt(this._bottomRight);
+      return new Pt(this[1]);
     }
     set bottomRight(p) {
-      this._bottomRight = new Pt(p);
-      this[1] = this._bottomRight;
+      this[1] = new Pt(p);
       this._updateSize();
     }
     /**
@@ -4287,8 +4279,8 @@ See https://github.com/williamngan/pts for details. */
      * It's simpler and preferable to change the Bound's properties (eg, topLeft, bottomRight) instead of updating the Bound's Pts.
      */
     update() {
-      this._topLeft = this[0];
-      this._bottomRight = this[1];
+      this.topLeft = this[0];
+      this.bottomRight = this[1];
       this._updateSize();
       return this;
     }
@@ -5895,9 +5887,9 @@ See https://github.com/williamngan/pts for details. */
     constructor(elem, callback) {
       super();
       this._pixelScale = 1;
-      this._autoResize = true;
       this._bgcolor = "#e1e9f0";
       this._offscreen = false;
+      this._autoResize = true;
       this._initialResize = false;
       let _selector = null;
       let _existed = false;
@@ -5988,8 +5980,7 @@ See https://github.com/williamngan/pts for details. */
       this.autoResize = opt.resize != void 0 ? opt.resize : false;
       if (opt.retina !== false) {
         const r1 = window ? window.devicePixelRatio || 1 : 1;
-        const r2 = this._ctx.webkitBackingStorePixelRatio || this._ctx.mozBackingStorePixelRatio || this._ctx.msBackingStorePixelRatio || this._ctx.oBackingStorePixelRatio || this._ctx.backingStorePixelRatio || 1;
-        this._pixelScale = Math.max(1, r1 / r2);
+        this._pixelScale = Math.max(1, r1);
       }
       if (opt.offscreen) {
         this._offscreen = true;
@@ -6008,13 +5999,15 @@ See https://github.com/williamngan/pts for details. */
     * @param auto a boolean value indicating if auto size is set
     */
     set autoResize(auto) {
-      if (!window)
-        return;
       this._autoResize = auto;
       if (auto) {
-        window.addEventListener("resize", this._resizeHandler.bind(this));
+        this._resizeObserver = new ResizeObserver((entries) => {
+          this._resizeHandler(null);
+        });
+        this._resizeObserver.observe(this._container);
       } else {
-        window.removeEventListener("resize", this._resizeHandler.bind(this));
+        if (this._resizeObserver)
+          this._resizeObserver.disconnect();
       }
     }
     get autoResize() {
@@ -6059,12 +6052,10 @@ See https://github.com/williamngan/pts for details. */
     * @param evt 
     */
     _resizeHandler(evt) {
-      if (!window)
-        return;
       const b = this._autoResize || this._initialResize ? this._container.getBoundingClientRect() : this._canvas.getBoundingClientRect();
       if (b) {
         const box = Bound.fromBoundingRect(b);
-        box.center = box.center.add(window.pageXOffset, window.pageYOffset);
+        box.center = box.center.add((window == null ? void 0 : window.scrollX) || 0, (window == null ? void 0 : window.scrollY) || 0);
         this.resize(box, evt);
       }
     }
@@ -6191,9 +6182,7 @@ See https://github.com/williamngan/pts for details. */
     * Dispose of browser resources held by this space and remove all players. Call this before unmounting the canvas.
     */
     dispose() {
-      if (!window)
-        return;
-      window.removeEventListener("resize", this._resizeHandler.bind(this));
+      this._resizeObserver.disconnect();
       this.stop();
       this.removeAll();
       return this;