pts 0.11.4 → 0.11.6

package/dist/index.d.ts

@@ -22,6 +22,8 @@ declare const UIPointerActions: {
     click: string;
     keydown: string;
     keyup: string;
+    pointerdown: string;
+    pointerup: string;
     contextmenu: string;
     all: string;
 };
@@ -464,9 +466,11 @@ declare abstract class MultiTouchSpace extends Space {
     bindTouch(bind?: boolean, passive?: boolean, customTarget?: Element): this;
     bindKeyboard(bind?: boolean): this;
     touchesToPoints(evt: TouchEvent, which?: TouchPointsKey): Pt[];
-    protected _mouseAction(type: string, evt: MouseEvent | TouchEvent): void;
+    protected _mouseAction(type: string, evt: MouseEvent | TouchEvent | PointerEvent): void;
     protected _mouseDown(evt: MouseEvent | TouchEvent): boolean;
+    protected _pointerDown(evt: PointerEvent): boolean;
     protected _mouseUp(evt: MouseEvent | TouchEvent): boolean;
+    protected _pointerUp(evt: PointerEvent): boolean;
     protected _mouseMove(evt: MouseEvent | TouchEvent): boolean;
     protected _mouseOver(evt: MouseEvent | TouchEvent): boolean;
     protected _mouseOut(evt: MouseEvent | TouchEvent): boolean;
@@ -619,14 +623,16 @@ declare class CanvasForm extends VisualForm {
     protected _ctx: CanvasRenderingContext2D;
     protected _estimateTextWidth: (string: any) => number;
     protected _style: DefaultFormStyle;
-    constructor(space: CanvasSpace | CanvasRenderingContext2D);
+    constructor(space?: CanvasSpace | CanvasRenderingContext2D);
     get space(): CanvasSpace;
     get ctx(): PtsCanvasRenderingContext2D;
     useOffscreen(off?: boolean, clear?: boolean | string): this;
     renderOffscreen(offset?: PtLike): void;
     alpha(a: number): this;
     fill(c: string | boolean | CanvasGradient | CanvasPattern): this;
+    fillOnly(c: string | boolean | CanvasGradient | CanvasPattern): this;
     stroke(c: string | boolean | CanvasGradient | CanvasPattern, width?: number, linejoin?: CanvasLineJoin, linecap?: CanvasLineCap): this;
+    strokeOnly(c: string | boolean | CanvasGradient | CanvasPattern, width?: number, linejoin?: CanvasLineJoin, linecap?: CanvasLineCap): this;
     applyFillStroke(filled?: boolean | string, stroked?: boolean | string, strokeWidth?: number): this;
     gradient(stops: [number, string][] | string[]): ((area1: GroupLike, area2?: GroupLike) => CanvasGradient);
     composite(mode?: GlobalCompositeOperation): this;

package/dist/index.js

@@ -2178,7 +2178,7 @@ var Num = class {
    */
   static randomPt(a, b) {
     let p = new Pt(a.length);
-    let range = b ? Vec.subtract(b, a) : a;
+    let range = b ? Vec.subtract(b.slice(), a) : a;
     let start = b ? a : new Pt(a.length).fill(0);
     for (let i = 0, len = p.length; i < len; i++) {
       p[i] = Num.random() * range[i] + start[i];
@@ -4300,6 +4300,8 @@ var UIPointerActions = {
   click: "click",
   keydown: "keydown",
   keyup: "keyup",
+  pointerdown: "pointerdown",
+  pointerup: "pointerup",
   contextmenu: "contextmenu",
   all: "all"
 };
@@ -4775,7 +4777,7 @@ var Space = class {
   add(p) {
     let player = typeof p == "function" ? { animate: p } : p;
     let k = this.playerCount++;
-    let pid = this.id + k;
+    let pid = player.animateID || this.id + k;
     this.players[pid] = player;
     player.animateID = pid;
     if (player.resize && this.bound.inited)
@@ -5012,9 +5014,13 @@ var MultiTouchSpace = class extends Space {
       this._mouseOut = this._mouseOut.bind(this);
       this._mouseMove = this._mouseMove.bind(this);
       this._mouseClick = this._mouseClick.bind(this);
+      this._pointerDown = this._pointerDown.bind(this);
+      this._pointerUp = this._pointerUp.bind(this);
       this._contextMenu = this._contextMenu.bind(this);
       this.bindCanvas("mousedown", this._mouseDown, {}, customTarget);
+      this.bindCanvas("pointerdown", this._pointerDown, {}, customTarget);
       this.bindCanvas("mouseup", this._mouseUp, {}, customTarget);
+      this.bindCanvas("pointerup", this._pointerUp, {}, customTarget);
       this.bindCanvas("mouseover", this._mouseOver, {}, customTarget);
       this.bindCanvas("mouseout", this._mouseOut, {}, customTarget);
       this.bindCanvas("mousemove", this._mouseMove, {}, customTarget);
@@ -5023,7 +5029,9 @@ var MultiTouchSpace = class extends Space {
       this._hasMouse = true;
     } else {
       this.unbindCanvas("mousedown", this._mouseDown, {}, customTarget);
+      this.unbindCanvas("pointerdown", this._pointerDown, {}, customTarget);
       this.unbindCanvas("mouseup", this._mouseUp, {}, customTarget);
+      this.unbindCanvas("pointerup", this._pointerUp, {}, customTarget);
       this.unbindCanvas("mouseover", this._mouseOver, {}, customTarget);
       this.unbindCanvas("mouseout", this._mouseOut, {}, customTarget);
       this.unbindCanvas("mousemove", this._mouseMove, {}, customTarget);
@@ -5135,6 +5143,13 @@ var MultiTouchSpace = class extends Space {
     this._pressed = true;
     return false;
   }
+  _pointerDown(evt) {
+    this._mouseAction(UIPointerActions.pointerdown, evt);
+    if (evt.target instanceof Element) {
+      evt.target.setPointerCapture(evt.pointerId);
+    }
+    return false;
+  }
   /**
   * MouseUp handler.
   * @param evt 
@@ -5149,6 +5164,16 @@ var MultiTouchSpace = class extends Space {
     this._dragged = false;
     return false;
   }
+  _pointerUp(evt) {
+    this._mouseAction(UIPointerActions.pointerup, evt);
+    if (evt.target instanceof Element) {
+      evt.target.releasePointerCapture(evt.pointerId);
+      if (this._dragged)
+        this._mouseAction(UIPointerActions.drop, evt);
+      this._dragged = false;
+    }
+    return false;
+  }
   /**
   * MouseMove handler.
   * @param evt 
@@ -6254,6 +6279,14 @@ var CanvasForm = class extends VisualForm {
     return this;
   }
   /**
+  * Set current fill style and remove stroke style.
+  * @param c fill color which can be as color, gradient, or pattern. (See [canvas documentation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle))
+  */
+  fillOnly(c) {
+    this.stroke(false);
+    return this.fill(c);
+  }
+  /**
   * Set current stroke style. Provide a valid color string or `false` to specify no stroke color.
   * @example `form.stroke("#F90")`, `form.stroke("rgba(0,0,0,.5")`, `form.stroke(false)`, `form.stroke("#000", 0.5, 'round', 'square')`
   * @param c stroke color which can be as color, gradient, or pattern. (See [canvas documentation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle))
@@ -6283,6 +6316,17 @@ var CanvasForm = class extends VisualForm {
     }
     return this;
   }
+  /**
+  * Set stroke style and remove fill style.
+  * @param c stroke color which can be as color, gradient, or pattern. (See [canvas documentation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle))
+  * @param width Optional value (can be floating point) to set line width
+  * @param linejoin Optional string to set line joint style. Can be "miter", "bevel", or "round".
+  * @param linecap Optional string to set line cap style. Can be "butt", "round", or "square".
+  */
+  strokeOnly(c, width, linejoin, linecap) {
+    this.fill(false);
+    return this.stroke(c, width, linejoin, linecap);
+  }
   /**
    * A convenient function to apply fill and/or stroke after custom drawings using canvas context (eg, `form.ctx.ellipse(...)`). 
    * You don't need to call this function if you're using Pts' drawing functions like `form.point` or `form.rect`
@@ -10302,7 +10346,9 @@ var Sound = class {
         reject("Error loading sound");
       });
       s._source.addEventListener("canplaythrough", function() {
-        s._node = s._ctx.createMediaElementSource(s._source);
+        if (!s._node) {
+          s._node = s._ctx.createMediaElementSource(s._source);
+        }
         resolve(s);
       });
     });

package/dist/index.mjs

@@ -2110,7 +2110,7 @@ var Num = class {
    */
   static randomPt(a, b) {
     let p = new Pt(a.length);
-    let range = b ? Vec.subtract(b, a) : a;
+    let range = b ? Vec.subtract(b.slice(), a) : a;
     let start = b ? a : new Pt(a.length).fill(0);
     for (let i = 0, len = p.length; i < len; i++) {
       p[i] = Num.random() * range[i] + start[i];
@@ -4232,6 +4232,8 @@ var UIPointerActions = {
   click: "click",
   keydown: "keydown",
   keyup: "keyup",
+  pointerdown: "pointerdown",
+  pointerup: "pointerup",
   contextmenu: "contextmenu",
   all: "all"
 };
@@ -4707,7 +4709,7 @@ var Space = class {
   add(p) {
     let player = typeof p == "function" ? { animate: p } : p;
     let k = this.playerCount++;
-    let pid = this.id + k;
+    let pid = player.animateID || this.id + k;
     this.players[pid] = player;
     player.animateID = pid;
     if (player.resize && this.bound.inited)
@@ -4944,9 +4946,13 @@ var MultiTouchSpace = class extends Space {
       this._mouseOut = this._mouseOut.bind(this);
       this._mouseMove = this._mouseMove.bind(this);
       this._mouseClick = this._mouseClick.bind(this);
+      this._pointerDown = this._pointerDown.bind(this);
+      this._pointerUp = this._pointerUp.bind(this);
       this._contextMenu = this._contextMenu.bind(this);
       this.bindCanvas("mousedown", this._mouseDown, {}, customTarget);
+      this.bindCanvas("pointerdown", this._pointerDown, {}, customTarget);
       this.bindCanvas("mouseup", this._mouseUp, {}, customTarget);
+      this.bindCanvas("pointerup", this._pointerUp, {}, customTarget);
       this.bindCanvas("mouseover", this._mouseOver, {}, customTarget);
       this.bindCanvas("mouseout", this._mouseOut, {}, customTarget);
       this.bindCanvas("mousemove", this._mouseMove, {}, customTarget);
@@ -4955,7 +4961,9 @@ var MultiTouchSpace = class extends Space {
       this._hasMouse = true;
     } else {
       this.unbindCanvas("mousedown", this._mouseDown, {}, customTarget);
+      this.unbindCanvas("pointerdown", this._pointerDown, {}, customTarget);
       this.unbindCanvas("mouseup", this._mouseUp, {}, customTarget);
+      this.unbindCanvas("pointerup", this._pointerUp, {}, customTarget);
       this.unbindCanvas("mouseover", this._mouseOver, {}, customTarget);
       this.unbindCanvas("mouseout", this._mouseOut, {}, customTarget);
       this.unbindCanvas("mousemove", this._mouseMove, {}, customTarget);
@@ -5067,6 +5075,13 @@ var MultiTouchSpace = class extends Space {
     this._pressed = true;
     return false;
   }
+  _pointerDown(evt) {
+    this._mouseAction(UIPointerActions.pointerdown, evt);
+    if (evt.target instanceof Element) {
+      evt.target.setPointerCapture(evt.pointerId);
+    }
+    return false;
+  }
   /**
   * MouseUp handler.
   * @param evt 
@@ -5081,6 +5096,16 @@ var MultiTouchSpace = class extends Space {
     this._dragged = false;
     return false;
   }
+  _pointerUp(evt) {
+    this._mouseAction(UIPointerActions.pointerup, evt);
+    if (evt.target instanceof Element) {
+      evt.target.releasePointerCapture(evt.pointerId);
+      if (this._dragged)
+        this._mouseAction(UIPointerActions.drop, evt);
+      this._dragged = false;
+    }
+    return false;
+  }
   /**
   * MouseMove handler.
   * @param evt 
@@ -6186,6 +6211,14 @@ var CanvasForm = class extends VisualForm {
     return this;
   }
   /**
+  * Set current fill style and remove stroke style.
+  * @param c fill color which can be as color, gradient, or pattern. (See [canvas documentation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle))
+  */
+  fillOnly(c) {
+    this.stroke(false);
+    return this.fill(c);
+  }
+  /**
   * Set current stroke style. Provide a valid color string or `false` to specify no stroke color.
   * @example `form.stroke("#F90")`, `form.stroke("rgba(0,0,0,.5")`, `form.stroke(false)`, `form.stroke("#000", 0.5, 'round', 'square')`
   * @param c stroke color which can be as color, gradient, or pattern. (See [canvas documentation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle))
@@ -6215,6 +6248,17 @@ var CanvasForm = class extends VisualForm {
     }
     return this;
   }
+  /**
+  * Set stroke style and remove fill style.
+  * @param c stroke color which can be as color, gradient, or pattern. (See [canvas documentation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle))
+  * @param width Optional value (can be floating point) to set line width
+  * @param linejoin Optional string to set line joint style. Can be "miter", "bevel", or "round".
+  * @param linecap Optional string to set line cap style. Can be "butt", "round", or "square".
+  */
+  strokeOnly(c, width, linejoin, linecap) {
+    this.fill(false);
+    return this.stroke(c, width, linejoin, linecap);
+  }
   /**
    * A convenient function to apply fill and/or stroke after custom drawings using canvas context (eg, `form.ctx.ellipse(...)`). 
    * You don't need to call this function if you're using Pts' drawing functions like `form.point` or `form.rect`
@@ -10234,7 +10278,9 @@ var Sound = class {
         reject("Error loading sound");
       });
       s._source.addEventListener("canplaythrough", function() {
-        s._node = s._ctx.createMediaElementSource(s._source);
+        if (!s._node) {
+          s._node = s._ctx.createMediaElementSource(s._source);
+        }
         resolve(s);
       });
     });

package/dist/pts.js

@@ -1,4 +1,4 @@
-/* Copyright © 2017-2023 William Ngan and contributors.
+/* Copyright © 2017-2024 William Ngan and contributors.
 Licensed under Apache 2.0 License.
 See https://github.com/williamngan/pts for details. */
 (() => {
@@ -2188,7 +2188,7 @@ See https://github.com/williamngan/pts for details. */
      */
     static randomPt(a, b) {
       let p = new Pt(a.length);
-      let range = b ? Vec.subtract(b, a) : a;
+      let range = b ? Vec.subtract(b.slice(), a) : a;
       let start = b ? a : new Pt(a.length).fill(0);
       for (let i = 0, len = p.length; i < len; i++) {
         p[i] = Num.random() * range[i] + start[i];
@@ -4318,6 +4318,8 @@ See https://github.com/williamngan/pts for details. */
     click: "click",
     keydown: "keydown",
     keyup: "keyup",
+    pointerdown: "pointerdown",
+    pointerup: "pointerup",
     contextmenu: "contextmenu",
     all: "all"
   };
@@ -4793,7 +4795,7 @@ See https://github.com/williamngan/pts for details. */
     add(p) {
       let player = typeof p == "function" ? { animate: p } : p;
       let k = this.playerCount++;
-      let pid = this.id + k;
+      let pid = player.animateID || this.id + k;
       this.players[pid] = player;
       player.animateID = pid;
       if (player.resize && this.bound.inited)
@@ -5030,9 +5032,13 @@ See https://github.com/williamngan/pts for details. */
         this._mouseOut = this._mouseOut.bind(this);
         this._mouseMove = this._mouseMove.bind(this);
         this._mouseClick = this._mouseClick.bind(this);
+        this._pointerDown = this._pointerDown.bind(this);
+        this._pointerUp = this._pointerUp.bind(this);
         this._contextMenu = this._contextMenu.bind(this);
         this.bindCanvas("mousedown", this._mouseDown, {}, customTarget);
+        this.bindCanvas("pointerdown", this._pointerDown, {}, customTarget);
         this.bindCanvas("mouseup", this._mouseUp, {}, customTarget);
+        this.bindCanvas("pointerup", this._pointerUp, {}, customTarget);
         this.bindCanvas("mouseover", this._mouseOver, {}, customTarget);
         this.bindCanvas("mouseout", this._mouseOut, {}, customTarget);
         this.bindCanvas("mousemove", this._mouseMove, {}, customTarget);
@@ -5041,7 +5047,9 @@ See https://github.com/williamngan/pts for details. */
         this._hasMouse = true;
       } else {
         this.unbindCanvas("mousedown", this._mouseDown, {}, customTarget);
+        this.unbindCanvas("pointerdown", this._pointerDown, {}, customTarget);
         this.unbindCanvas("mouseup", this._mouseUp, {}, customTarget);
+        this.unbindCanvas("pointerup", this._pointerUp, {}, customTarget);
         this.unbindCanvas("mouseover", this._mouseOver, {}, customTarget);
         this.unbindCanvas("mouseout", this._mouseOut, {}, customTarget);
         this.unbindCanvas("mousemove", this._mouseMove, {}, customTarget);
@@ -5153,6 +5161,13 @@ See https://github.com/williamngan/pts for details. */
       this._pressed = true;
       return false;
     }
+    _pointerDown(evt) {
+      this._mouseAction(UIPointerActions.pointerdown, evt);
+      if (evt.target instanceof Element) {
+        evt.target.setPointerCapture(evt.pointerId);
+      }
+      return false;
+    }
     /**
     * MouseUp handler.
     * @param evt 
@@ -5167,6 +5182,16 @@ See https://github.com/williamngan/pts for details. */
       this._dragged = false;
       return false;
     }
+    _pointerUp(evt) {
+      this._mouseAction(UIPointerActions.pointerup, evt);
+      if (evt.target instanceof Element) {
+        evt.target.releasePointerCapture(evt.pointerId);
+        if (this._dragged)
+          this._mouseAction(UIPointerActions.drop, evt);
+        this._dragged = false;
+      }
+      return false;
+    }
     /**
     * MouseMove handler.
     * @param evt 
@@ -6286,6 +6311,14 @@ See https://github.com/williamngan/pts for details. */
       return this;
     }
     /**
+    * Set current fill style and remove stroke style.
+    * @param c fill color which can be as color, gradient, or pattern. (See [canvas documentation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle))
+    */
+    fillOnly(c) {
+      this.stroke(false);
+      return this.fill(c);
+    }
+    /**
     * Set current stroke style. Provide a valid color string or `false` to specify no stroke color.
     * @example `form.stroke("#F90")`, `form.stroke("rgba(0,0,0,.5")`, `form.stroke(false)`, `form.stroke("#000", 0.5, 'round', 'square')`
     * @param c stroke color which can be as color, gradient, or pattern. (See [canvas documentation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle))
@@ -6315,6 +6348,17 @@ See https://github.com/williamngan/pts for details. */
       }
       return this;
     }
+    /**
+    * Set stroke style and remove fill style.
+    * @param c stroke color which can be as color, gradient, or pattern. (See [canvas documentation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle))
+    * @param width Optional value (can be floating point) to set line width
+    * @param linejoin Optional string to set line joint style. Can be "miter", "bevel", or "round".
+    * @param linecap Optional string to set line cap style. Can be "butt", "round", or "square".
+    */
+    strokeOnly(c, width, linejoin, linecap) {
+      this.fill(false);
+      return this.stroke(c, width, linejoin, linecap);
+    }
     /**
      * A convenient function to apply fill and/or stroke after custom drawings using canvas context (eg, `form.ctx.ellipse(...)`). 
      * You don't need to call this function if you're using Pts' drawing functions like `form.point` or `form.rect`
@@ -10366,7 +10410,9 @@ See https://github.com/williamngan/pts for details. */
           reject("Error loading sound");
         });
         s._source.addEventListener("canplaythrough", function() {
-          s._node = s._ctx.createMediaElementSource(s._source);
+          if (!s._node) {
+            s._node = s._ctx.createMediaElementSource(s._source);
+          }
           resolve(s);
         });
       });