pts 0.10.7 → 0.10.10

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
- * pts.js 0.10.7 - Copyright © 2017-2021 William Ngan and contributors.
+ * pts.js 0.10.10 - Copyright © 2017-2022 William Ngan and contributors.
  * Licensed under Apache 2.0 License.
  * See https://github.com/williamngan/pts for details.
  */
@@ -110,7 +110,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 "use strict";
 
-/*! Source code licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
+/*! Pts.js is licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CanvasForm = exports.CanvasSpace = void 0;
 const Space_1 = __webpack_require__(/*! ./Space */ "./src/Space.ts");
@@ -221,13 +221,13 @@ class CanvasSpace extends Space_1.MultiTouchSpace {
     get autoResize() { return this._autoResize; }
     resize(b, evt) {
         this.bound = b;
-        this._canvas.width = this.bound.size.x * this._pixelScale;
-        this._canvas.height = this.bound.size.y * this._pixelScale;
-        this._canvas.style.width = Math.floor(this.bound.size.x) + "px";
-        this._canvas.style.height = Math.floor(this.bound.size.y) + "px";
+        this._canvas.width = Math.ceil(this.bound.size.x) * this._pixelScale;
+        this._canvas.height = Math.ceil(this.bound.size.y) * this._pixelScale;
+        this._canvas.style.width = Math.ceil(this.bound.size.x) + "px";
+        this._canvas.style.height = Math.ceil(this.bound.size.y) + "px";
         if (this._offscreen) {
-            this._offCanvas.width = this.bound.size.x * this._pixelScale;
-            this._offCanvas.height = this.bound.size.y * this._pixelScale;
+            this._offCanvas.width = Math.ceil(this.bound.size.x) * this._pixelScale;
+            this._offCanvas.height = Math.ceil(this.bound.size.y) * this._pixelScale;
         }
         if (this._pixelScale != 1) {
             this._ctx.scale(this._pixelScale, this._pixelScale);
@@ -282,27 +282,29 @@ class CanvasSpace extends Space_1.MultiTouchSpace {
         if (bg)
             this._bgcolor = bg;
         const lastColor = this._ctx.fillStyle;
+        const px = Math.ceil(this.pixelScale);
         if (!this._bgcolor || this._bgcolor === "transparent") {
-            this._ctx.clearRect(-1, -1, this._canvas.width + 1, this._canvas.height + 1);
+            this._ctx.clearRect(-px, -px, this._canvas.width + px, this._canvas.height + px);
         }
         else {
             if (this._bgcolor.indexOf("rgba") === 0 || (this._bgcolor.length === 9 && this._bgcolor.indexOf("#") === 0)) {
-                this._ctx.clearRect(-1, -1, this._canvas.width + 1, this._canvas.height + 1);
+                this._ctx.clearRect(-px, -px, this._canvas.width + px, this._canvas.height + px);
             }
             this._ctx.fillStyle = this._bgcolor;
-            this._ctx.fillRect(-1, -1, this._canvas.width + 1, this._canvas.height + 1);
+            this._ctx.fillRect(-px, -px, this._canvas.width + px, this._canvas.height + px);
         }
         this._ctx.fillStyle = lastColor;
         return this;
     }
     clearOffscreen(bg) {
         if (this._offscreen) {
+            const px = Math.ceil(this.pixelScale);
             if (bg) {
                 this._offCtx.fillStyle = bg;
-                this._offCtx.fillRect(-1, -1, this._canvas.width + 1, this._canvas.height + 1);
+                this._offCtx.fillRect(-px, -px, this._canvas.width + px, this._canvas.height + px);
             }
             else {
-                this._offCtx.clearRect(-1, -1, this._offCanvas.width + 1, this._offCanvas.height + 1);
+                this._offCtx.clearRect(-px, -px, this._offCanvas.width + px, this._offCanvas.height + px);
             }
         }
         return this;
@@ -427,6 +429,19 @@ class CanvasForm extends Form_1.VisualForm {
         }
         return this;
     }
+    applyFillStroke(filled = true, stroked = true, strokeWidth = 1) {
+        if (filled) {
+            if (typeof filled === 'string')
+                this.fill(filled);
+            this._ctx.fill();
+        }
+        if (stroked) {
+            if (typeof stroked === 'string')
+                this.stroke(stroked, strokeWidth);
+            this._ctx.stroke();
+        }
+        return this;
+    }
     gradient(stops) {
         let vals = [];
         if (stops.length < 2)
@@ -795,7 +810,7 @@ exports.CanvasForm = CanvasForm;
 
 "use strict";
 
-/*! Source code licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
+/*! Pts.js is licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Color = void 0;
 const Pt_1 = __webpack_require__(/*! ./Pt */ "./src/Pt.ts");
@@ -1147,7 +1162,7 @@ Color.ranges = {
 
 "use strict";
 
-/*! Source code licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
+/*! Pts.js is licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Delaunay = exports.Noise = exports.Create = void 0;
 const Pt_1 = __webpack_require__(/*! ./Pt */ "./src/Pt.ts");
@@ -1439,7 +1454,7 @@ exports.Delaunay = Delaunay;
 
 "use strict";
 
-/*! Source code licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
+/*! Pts.js is licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HTMLForm = exports.HTMLSpace = exports.DOMSpace = void 0;
 const Space_1 = __webpack_require__(/*! ./Space */ "./src/Space.ts");
@@ -1904,7 +1919,7 @@ HTMLForm.domID = 0;
 
 "use strict";
 
-/*! Source code licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
+/*! Pts.js is licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Font = exports.VisualForm = exports.Form = void 0;
 class Form {
@@ -2001,29 +2016,62 @@ exports.Font = Font;
 
 "use strict";
 
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Img = void 0;
+const Canvas_1 = __webpack_require__(/*! ./Canvas */ "./src/Canvas.ts");
 const Pt_1 = __webpack_require__(/*! ./Pt */ "./src/Pt.ts");
+const LinearAlgebra_1 = __webpack_require__(/*! ./LinearAlgebra */ "./src/LinearAlgebra.ts");
 class Img {
-    constructor(editable = false, pixelScale = 1, crossOrigin) {
+    constructor(editable = false, space, crossOrigin) {
         this._scale = 1;
         this._loaded = false;
         this._editable = editable;
-        this._scale = pixelScale;
+        this._space = space;
+        this._scale = this._space ? this._space.pixelScale : 1;
         this._img = new Image();
         if (crossOrigin)
             this._img.crossOrigin = "Anonymous";
     }
-    static load(src, editable = false, pixelScale = 1, ready) {
-        let img = new Img(editable, pixelScale);
+    static load(src, editable = false, space, ready) {
+        const img = new Img(editable, space);
         img.load(src).then(res => {
             if (ready)
                 ready(res);
         });
         return img;
     }
+    static loadAsync(src, editable = false, space) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const img = yield new Img(editable, space).load(src);
+            return img;
+        });
+    }
+    static loadPattern(src, space, repeat = 'repeat', editable = false) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const img = yield Img.loadAsync(src, editable, space);
+            return img.pattern(repeat);
+        });
+    }
+    static blank(size, space, scale) {
+        let img = new Img(true, space);
+        const s = scale ? scale : space.pixelScale;
+        img.initCanvas(size[0], size[1], s);
+        return img;
+    }
     load(src) {
         return new Promise((resolve, reject) => {
+            if (this._editable && !document) {
+                reject("Cannot create html canvas element. document not found.");
+            }
             this._img.src = src;
             this._img.onload = () => {
                 if (this._editable) {
@@ -2041,20 +2089,35 @@ class Img {
         });
     }
     _drawToScale(canvasScale, img) {
-        const cms = (typeof canvasScale === 'number') ? [canvasScale, canvasScale] : canvasScale;
         const nw = img.width;
         const nh = img.height;
-        this._cv.width = nw * cms[0];
-        this._cv.height = nh * cms[1];
-        this._ctx = this._cv.getContext('2d');
+        this.initCanvas(nw, nh, canvasScale);
         if (img)
             this._ctx.drawImage(img, 0, 0, nw, nh, 0, 0, this._cv.width, this._cv.height);
     }
+    initCanvas(width, height, canvasScale = 1) {
+        if (!this._editable) {
+            console.error('Cannot initiate canvas because this Img is not set to be editable');
+            return;
+        }
+        if (!this._cv)
+            this._cv = document.createElement("canvas");
+        const cms = (typeof canvasScale === 'number') ? [canvasScale, canvasScale] : canvasScale;
+        this._cv.width = width * cms[0];
+        this._cv.height = height * cms[1];
+        this._ctx = this._cv.getContext('2d');
+        this._loaded = true;
+    }
     bitmap(size) {
         const w = (size) ? size[0] : this._cv.width;
         const h = (size) ? size[1] : this._cv.height;
         return createImageBitmap(this._cv, 0, 0, w, h);
     }
+    pattern(reptition = 'repeat', dynamic = false) {
+        if (!this._space)
+            throw "Cannot find CanvasSpace ctx to create image pattern";
+        return this._space.ctx.createPattern(dynamic ? this._cv : this._img, reptition);
+    }
     sync() {
         if (this._scale !== 1) {
             this.bitmap().then(b => {
@@ -2104,12 +2167,15 @@ class Img {
             this._img.remove();
         this._data = null;
     }
-    static fromBlob(blob, editable = false, pixelScale = 1) {
+    static fromBlob(blob, editable = false, space) {
         let url = URL.createObjectURL(blob);
-        return new Img(editable, pixelScale).load(url);
+        return new Img(editable, space).load(url);
     }
     static imageDataToBlob(data) {
-        return new Promise(function (resolve) {
+        return new Promise(function (resolve, reject) {
+            if (!document) {
+                reject("Cannot create html canvas element. document not found.");
+            }
             let cv = document.createElement("canvas");
             cv.width = data.width;
             cv.height = data.height;
@@ -2128,6 +2194,12 @@ class Img {
             this._cv.toBlob(blob => resolve(blob));
         });
     }
+    getForm() {
+        if (!this._editable) {
+            console.error("Cannot get a CanvasForm because this Img is not editable");
+        }
+        return this._ctx ? new Canvas_1.CanvasForm(this._ctx) : undefined;
+    }
     get current() {
         return this._editable ? this._cv : this._img;
     }
@@ -2150,11 +2222,20 @@ class Img {
         return this._scale;
     }
     get imageSize() {
-        return new Pt_1.Pt(this._img.width, this._img.height);
+        if (!this._img.width || !this._img.height) {
+            return this.canvasSize.$divide(this._scale);
+        }
+        else {
+            return new Pt_1.Pt(this._img.width, this._img.height);
+        }
     }
     get canvasSize() {
         return new Pt_1.Pt(this._cv.width, this._cv.height);
     }
+    get scaledMatrix() {
+        const s = 1 / this._scale;
+        return new LinearAlgebra_1.Mat().scale2D([s, s]);
+    }
 }
 exports.Img = Img;
 
@@ -2170,7 +2251,7 @@ exports.Img = Img;
 
 "use strict";
 
-/*! Source code licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
+/*! Pts.js is licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Mat = exports.Vec = void 0;
 const Pt_1 = __webpack_require__(/*! ./Pt */ "./src/Pt.ts");
@@ -2299,6 +2380,38 @@ class Vec {
 }
 exports.Vec = Vec;
 class Mat {
+    constructor() {
+        this.reset();
+    }
+    get value() {
+        return this._33;
+    }
+    get domMatrix() {
+        return new DOMMatrix(Mat.toDOMMatrix(this._33));
+    }
+    reset() {
+        this._33 = Mat.scale2DMatrix(1, 1);
+    }
+    scale2D(val, at = [0, 0]) {
+        const m = Mat.scaleAt2DMatrix(val[0] || 1, val[1] || 1, at);
+        this._33 = Mat.multiply(this._33, m);
+        return this;
+    }
+    rotate2D(ang, at = [0, 0]) {
+        const m = Mat.rotateAt2DMatrix(Math.cos(ang), Math.sin(ang), at);
+        this._33 = Mat.multiply(this._33, m);
+        return this;
+    }
+    translate2D(val) {
+        const m = Mat.translate2DMatrix(val[0] || 0, val[1] || 0);
+        this._33 = Mat.multiply(this._33, m);
+        return this;
+    }
+    shear2D(val, at = [0, 0]) {
+        const m = Mat.shearAt2DMatrix(Math.tan(val[0] || 0), Math.tan(val[1] || 1), at);
+        this._33 = Mat.multiply(this._33, m);
+        return this;
+    }
     static add(a, b) {
         if (typeof b != "number") {
             if (a[0].length != b[0].length)
@@ -2366,6 +2479,9 @@ class Mat {
     static transpose(g, defaultValue = false, useLongest = false) {
         return Mat.zip(g, defaultValue, useLongest);
     }
+    static toDOMMatrix(m) {
+        return [m[0][0], m[0][1], m[1][0], m[1][1], m[2][0], m[2][1]];
+    }
     static transform2D(pt, m) {
         let x = pt[0] * m[0][0] + pt[1] * m[1][0] + m[2][0];
         let y = pt[0] * m[0][1] + pt[1] * m[1][1] + m[2][1];
@@ -2437,7 +2553,7 @@ exports.Mat = Mat;
 
 "use strict";
 
-/*! Source code licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
+/*! Pts.js is licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Range = exports.Shaping = exports.Geom = exports.Num = void 0;
 const Util_1 = __webpack_require__(/*! ./Util */ "./src/Util.ts");
@@ -2932,7 +3048,7 @@ exports.Range = Range;
 
 "use strict";
 
-/*! Source code licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
+/*! Pts.js is licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Curve = exports.Polygon = exports.Triangle = exports.Circle = exports.Rectangle = exports.Line = void 0;
 const Util_1 = __webpack_require__(/*! ./Util */ "./src/Util.ts");
@@ -3930,7 +4046,7 @@ exports.Curve = Curve;
 
 "use strict";
 
-/*! Source code licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
+/*! Pts.js is licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Body = exports.Particle = exports.World = void 0;
 const Pt_1 = __webpack_require__(/*! ./Pt */ "./src/Pt.ts");
@@ -4685,7 +4801,7 @@ exports.Sound = Sound;
 
 "use strict";
 
-/*! Source code licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
+/*! Pts.js is licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Bound = exports.Group = exports.Pt = void 0;
 const Util_1 = __webpack_require__(/*! ./Util */ "./src/Util.ts");
@@ -5036,6 +5152,9 @@ class Group extends Array {
     $zip(defaultValue = undefined, useLongest = false) {
         return LinearAlgebra_1.Mat.zip(this, defaultValue, useLongest);
     }
+    toBound() {
+        return Bound.fromGroup(this);
+    }
     toString() {
         return "Group[ " + this.reduce((p, c) => p + c.toString() + " ", "") + " ]";
     }
@@ -5162,7 +5281,7 @@ exports.Bound = Bound;
 
 "use strict";
 
-/*! Source code licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
+/*! Pts.js is licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultiTouchSpace = exports.Space = void 0;
 const Pt_1 = __webpack_require__(/*! ./Pt */ "./src/Pt.ts");
@@ -5171,7 +5290,7 @@ class Space {
     constructor() {
         this.id = "space";
         this.bound = new Pt_1.Bound();
-        this._time = { prev: 0, diff: 0, end: -1 };
+        this._time = { prev: 0, diff: 0, end: -1, min: 0 };
         this.players = {};
         this.playerCount = 0;
         this._animID = -1;
@@ -5185,6 +5304,9 @@ class Space {
         this._refresh = b;
         return this;
     }
+    minFrameTime(ms = 0) {
+        this._time.min = ms;
+    }
     add(p) {
         let player = (typeof p == "function") ? { animate: p } : p;
         let k = this.playerCount++;
@@ -5213,6 +5335,8 @@ class Space {
         if (this._pause)
             return this;
         this._time.diff = time - this._time.prev;
+        if (this._time.diff < this._time.min)
+            return this;
         this._time.prev = time;
         try {
             this.playItems(time);
@@ -5257,7 +5381,7 @@ class Space {
         this._time.end = t;
         return this;
     }
-    playOnce(duration = 5000) {
+    playOnce(duration = 0) {
         this.play();
         this.stop(duration);
         return this;
@@ -5285,58 +5409,93 @@ class MultiTouchSpace extends Space {
         this._dragged = false;
         this._hasMouse = false;
         this._hasTouch = false;
+        this._hasKeyboard = false;
     }
     get pointer() {
         let p = this._pointer.clone();
         p.id = this._pointer.id;
         return p;
     }
-    bindCanvas(evt, callback, options = {}) {
-        this._canvas.addEventListener(evt, callback, options);
-    }
-    unbindCanvas(evt, callback, options = {}) {
-        this._canvas.removeEventListener(evt, callback, options);
-    }
-    bindMouse(_bind = true) {
-        if (_bind) {
-            this.bindCanvas("mousedown", this._mouseDown.bind(this));
-            this.bindCanvas("mouseup", this._mouseUp.bind(this));
-            this.bindCanvas("mouseover", this._mouseOver.bind(this));
-            this.bindCanvas("mouseout", this._mouseOut.bind(this));
-            this.bindCanvas("mousemove", this._mouseMove.bind(this));
-            this.bindCanvas("click", this._mouseClick.bind(this));
-            this.bindCanvas("contextmenu", this._contextMenu.bind(this));
+    bindCanvas(evt, callback, options = {}, customTarget) {
+        const target = customTarget ? customTarget : this._canvas;
+        target.addEventListener(evt, callback, options);
+    }
+    unbindCanvas(evt, callback, options = {}, customTarget) {
+        const target = customTarget ? customTarget : this._canvas;
+        target.removeEventListener(evt, callback, options);
+    }
+    bindDoc(evt, callback, options = {}) {
+        if (document) {
+            document.addEventListener(evt, callback, options);
+        }
+    }
+    unbindDoc(evt, callback, options = {}) {
+        if (document) {
+            document.removeEventListener(evt, callback, options);
+        }
+    }
+    bindMouse(bind = true, customTarget) {
+        if (bind) {
+            this._mouseDown = this._mouseDown.bind(this);
+            this._mouseUp = this._mouseUp.bind(this);
+            this._mouseOver = this._mouseOver.bind(this);
+            this._mouseOut = this._mouseOut.bind(this);
+            this._mouseMove = this._mouseMove.bind(this);
+            this._mouseClick = this._mouseClick.bind(this);
+            this._contextMenu = this._contextMenu.bind(this);
+            this.bindCanvas("mousedown", this._mouseDown, {}, customTarget);
+            this.bindCanvas("mouseup", this._mouseUp, {}, customTarget);
+            this.bindCanvas("mouseover", this._mouseOver, {}, customTarget);
+            this.bindCanvas("mouseout", this._mouseOut, {}, customTarget);
+            this.bindCanvas("mousemove", this._mouseMove, {}, customTarget);
+            this.bindCanvas("click", this._mouseClick, {}, customTarget);
+            this.bindCanvas("contextmenu", this._contextMenu, {}, customTarget);
             this._hasMouse = true;
         }
         else {
-            this.unbindCanvas("mousedown", this._mouseDown.bind(this));
-            this.unbindCanvas("mouseup", this._mouseUp.bind(this));
-            this.unbindCanvas("mouseover", this._mouseOver.bind(this));
-            this.unbindCanvas("mouseout", this._mouseOut.bind(this));
-            this.unbindCanvas("mousemove", this._mouseMove.bind(this));
-            this.unbindCanvas("click", this._mouseClick.bind(this));
-            this.unbindCanvas("contextmenu", this._contextMenu.bind(this));
+            this.unbindCanvas("mousedown", this._mouseDown, {}, customTarget);
+            this.unbindCanvas("mouseup", this._mouseUp, {}, customTarget);
+            this.unbindCanvas("mouseover", this._mouseOver, {}, customTarget);
+            this.unbindCanvas("mouseout", this._mouseOut, {}, customTarget);
+            this.unbindCanvas("mousemove", this._mouseMove, {}, customTarget);
+            this.unbindCanvas("click", this._mouseClick, {}, customTarget);
+            this.unbindCanvas("contextmenu", this._contextMenu, {}, customTarget);
             this._hasMouse = false;
         }
         return this;
     }
-    bindTouch(bind = true, passive = false) {
+    bindTouch(bind = true, passive = false, customTarget) {
         if (bind) {
-            this.bindCanvas("touchstart", this._touchStart.bind(this), { passive: passive });
-            this.bindCanvas("touchend", this._mouseUp.bind(this));
-            this.bindCanvas("touchmove", this._touchMove.bind(this), { passive: passive });
-            this.bindCanvas("touchcancel", this._mouseOut.bind(this));
+            this.bindCanvas("touchstart", this._touchStart.bind(this), { passive: passive }, customTarget);
+            this.bindCanvas("touchend", this._mouseUp.bind(this), {}, customTarget);
+            this.bindCanvas("touchmove", this._touchMove.bind(this), { passive: passive }, customTarget);
+            this.bindCanvas("touchcancel", this._mouseOut.bind(this), {}, customTarget);
             this._hasTouch = true;
         }
         else {
-            this.unbindCanvas("touchstart", this._touchStart.bind(this), { passive: passive });
-            this.unbindCanvas("touchend", this._mouseUp.bind(this));
-            this.unbindCanvas("touchmove", this._touchMove.bind(this), { passive: passive });
-            this.unbindCanvas("touchcancel", this._mouseOut.bind(this));
+            this.unbindCanvas("touchstart", this._touchStart.bind(this), { passive: passive }, customTarget);
+            this.unbindCanvas("touchend", this._mouseUp.bind(this), {}, customTarget);
+            this.unbindCanvas("touchmove", this._touchMove.bind(this), { passive: passive }, customTarget);
+            this.unbindCanvas("touchcancel", this._mouseOut.bind(this), {}, customTarget);
             this._hasTouch = false;
         }
         return this;
     }
+    bindKeyboard(bind = true) {
+        if (bind) {
+            this._keyDownBind = this._keyDown.bind(this);
+            this._keyUpBind = this._keyUp.bind(this);
+            this.bindDoc("keydown", this._keyDownBind, {});
+            this.bindDoc("keyup", this._keyUpBind, {});
+            this._hasKeyboard = true;
+        }
+        else {
+            this.unbindDoc("keydown", this._keyDownBind, {});
+            this.unbindDoc("keyup", this._keyUpBind, {});
+            this._hasKeyboard = false;
+        }
+        return this;
+    }
     touchesToPoints(evt, which = "touches") {
         if (!evt || !evt[which])
             return [];
@@ -5348,6 +5507,8 @@ class MultiTouchSpace extends Space {
         return ts;
     }
     _mouseAction(type, evt) {
+        if (!this.isPlaying)
+            return;
         let px = 0, py = 0;
         if (evt instanceof MouseEvent) {
             for (let k in this.players) {
@@ -5433,6 +5594,25 @@ class MultiTouchSpace extends Space {
         evt.preventDefault();
         return false;
     }
+    _keyDown(evt) {
+        this._keyboardAction(UI_1.UIPointerActions.keydown, evt);
+        return false;
+    }
+    _keyUp(evt) {
+        this._keyboardAction(UI_1.UIPointerActions.keyup, evt);
+        return false;
+    }
+    _keyboardAction(type, evt) {
+        if (!this.isPlaying)
+            return;
+        for (let k in this.players) {
+            if (this.players.hasOwnProperty(k)) {
+                let v = this.players[k];
+                if (v.action)
+                    v.action(type, evt.shiftKey ? 1 : 0, evt.altKey ? 1 : 0, evt);
+            }
+        }
+    }
 }
 exports.MultiTouchSpace = MultiTouchSpace;
 
@@ -5448,7 +5628,7 @@ exports.MultiTouchSpace = MultiTouchSpace;
 
 "use strict";
 
-/*! Source code licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
+/*! Pts.js is licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SVGForm = exports.SVGSpace = void 0;
 const Form_1 = __webpack_require__(/*! ./Form */ "./src/Form.ts");
@@ -5831,7 +6011,7 @@ SVGForm.domID = 0;
 
 "use strict";
 
-/*! Source code licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
+/*! Pts.js is licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Typography = void 0;
 const Pt_1 = __webpack_require__(/*! ./Pt */ "./src/Pt.ts");
@@ -5886,7 +6066,7 @@ exports.Typography = Typography;
 
 "use strict";
 
-/*! Source code licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
+/*! Pts.js is licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UIDragger = exports.UIButton = exports.UI = exports.UIPointerActions = exports.UIShape = void 0;
 const Pt_1 = __webpack_require__(/*! ./Pt */ "./src/Pt.ts");
@@ -5895,7 +6075,11 @@ exports.UIShape = {
     rectangle: "rectangle", circle: "circle", polygon: "polygon", polyline: "polyline", line: "line"
 };
 exports.UIPointerActions = {
-    up: "up", down: "down", move: "move", drag: "drag", uidrag: "uidrag", drop: "drop", uidrop: "uidrop", over: "over", out: "out", enter: "enter", leave: "leave", click: "click", contextmenu: "contextmenu", all: "all"
+    up: "up", down: "down", move: "move",
+    drag: "drag", uidrag: "uidrag", drop: "drop", uidrop: "uidrop",
+    over: "over", out: "out", enter: "enter", leave: "leave", click: "click",
+    keydown: 'keydown', keyup: 'keyup',
+    contextmenu: "contextmenu", all: "all"
 };
 class UI {
     constructor(group, shape, states = {}, id) {
@@ -6172,7 +6356,7 @@ exports.UIDragger = UIDragger;
 
 "use strict";
 
-/*! Source code licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
+/*! Pts.js is licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Util = exports.Const = void 0;
 const Num_1 = __webpack_require__(/*! ./Num */ "./src/Num.ts");
@@ -6333,6 +6517,19 @@ class Util {
         };
         request.send();
     }
+    static download(space, filename = 'pts_canvas_image', filetype = "png", quality = 1) {
+        const ftype = filetype === 'jpg' ? 'jpeg' : filetype;
+        space.element.toBlob(function (blob) {
+            const link = document.createElement('a');
+            const url = URL.createObjectURL(blob);
+            link.href = url;
+            link.download = `${filename}.${filetype}`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            URL.revokeObjectURL(url);
+        }, `image/${ftype}`, quality);
+    }
     static performance(avgFrames = 10) {
         let last = Date.now();
         let avg = [];