pts 0.10.9 → 0.10.12

package/dist/es2015/_module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_module.js","sourceRoot":"","sources":["../../src/_module.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,OAAO,CAAC;AACtB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,MAAM,CAAC;AACrB,cAAc,SAAS,CAAC"}

package/dist/es2015/uheprng.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uheprng.js","sourceRoot":"","sources":["../../src/uheprng.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAwDb,SAAS,IAAI;IACT,IAAI,CAAC,GAAG,UAAU,CAAC;IACnB,IAAI,IAAI,GAAG,UAAU,IAAa;QAC9B,IAAI,IAAI,EAAE;YACN,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YACvB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAClC,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;gBACxB,IAAI,CAAC,GAAG,mBAAmB,GAAG,CAAC,CAAC;gBAChC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBACZ,CAAC,IAAI,CAAC,CAAC;gBACP,CAAC,IAAI,CAAC,CAAC;gBACP,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBACZ,CAAC,IAAI,CAAC,CAAC;gBACP,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC;aACxB;YACD,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,sBAAsB,CAAC;SAC7C;;YAAM,CAAC,GAAG,UAAU,CAAC;IAC1B,CAAC,CAAC;IACF,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,MAAM,CAAC,OAAO,WAAU,IAAY;IAChC,IAAI,CAAC,GAAG,EAAE,CAAC;IACX,IAAI,CAAC,GAAG,CAAC,CAAC;IACV,IAAI,CAAC,GAAG,CAAC,CAAC;IACV,IAAI,CAAC,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;IACrB,IAAI,CAAS,EACT,CAAS,EACT,CAAC,GAAG,CAAC,CAAC;IAKV,IAAI,IAAI,GAAG,IAAI,EAAE,CAAC;IAClB,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;QAAE,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC;IAM9D,SAAS,SAAS;QACd,IAAI,EAAE,CAAC;QACP,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;YAAE,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;QACzC,CAAC,GAAG,CAAC,CAAC;QACN,CAAC,GAAG,CAAC,CAAC;IACV,CAAC;IAMD,SAAS,WAAW,CAAC,KAAa;QAC9B,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;QAC7C,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;QAC3C,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QACnC,OAAO,KAAK,CAAC;IACjB,CAAC;IAID,SAAS,UAAU,CAAC,KAAa;QAC7B,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;QAC3B,IAAI,CAAC,KAAK,CAAC,CAAC;QACZ,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAE/B,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YACxB,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;gBAEpB,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;gBAC3B,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;oBAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;aAC3B;SACJ;IACL,CAAC;IAED,SAAS,EAAE,CAAC;IACZ,UAAU,CAAC,IAAI,CAAC,CAAC;IAEjB,OAAO;QASH,MAAM;YACF,IAAI,EAAE,CAAC,IAAI,CAAC;gBAAE,CAAC,GAAG,CAAC,CAAC;YACpB,IAAI,CAAC,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,sBAAsB,CAAC;YACpD,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACpC,CAAC;KACJ,CAAC;AACN,CAAC"}

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
- * pts.js 0.10.9 - Copyright © 2017-2021 William Ngan and contributors.
+ * pts.js 0.10.12 - Copyright © 2017-2022 William Ngan and contributors.
  * Licensed under Apache 2.0 License.
  * See https://github.com/williamngan/pts for details.
  */
@@ -378,7 +378,7 @@ class CanvasForm extends Form_1.VisualForm {
         }
     }
     get space() { return this._space; }
-    get ctx() { return this._space.ctx; }
+    get ctx() { return this._ctx; }
     useOffscreen(off = true, clear = false) {
         if (clear)
             this._space.clearOffscreen((typeof clear == "string") ? clear : null);
@@ -456,8 +456,8 @@ class CanvasForm extends Form_1.VisualForm {
             if (area2)
                 area2.map(a => a.abs());
             let grad = area2
-                ? this.ctx.createRadialGradient(area1[0][0], area1[0][1], area1[1][0], area2[0][0], area2[0][1], area2[1][0])
-                : this.ctx.createLinearGradient(area1[0][0], area1[0][1], area1[1][0], area1[1][1]);
+                ? this._ctx.createRadialGradient(area1[0][0], area1[0][1], area1[1][0], area2[0][0], area2[0][1], area2[1][0])
+                : this._ctx.createLinearGradient(area1[0][0], area1[0][1], area1[1][0], area1[1][1]);
             for (let i = 0, len = vals.length; i < len; i++) {
                 grad.addColorStop(vals[i][0], vals[i][1]);
             }
@@ -465,11 +465,11 @@ class CanvasForm extends Form_1.VisualForm {
         };
     }
     composite(mode = 'source-over') {
-        this.ctx.globalCompositeOperation = mode;
+        this._ctx.globalCompositeOperation = mode;
         return this;
     }
     clip() {
-        this.ctx.clip();
+        this._ctx.clip();
         return this;
     }
     dash(segments = true, offset = 0) {
@@ -2016,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) {
@@ -2056,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 => {
@@ -2119,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;
@@ -2143,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;
     }
@@ -2165,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;
 
@@ -2314,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)
@@ -2381,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];
@@ -5051,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() + " ", "") + " ]";
     }
@@ -5186,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;
@@ -5200,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++;
@@ -5228,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);
@@ -5300,20 +5409,33 @@ 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);
+    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);
     }
-    unbindCanvas(evt, callback, options = {}) {
-        this._canvas.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) {
-        if (_bind) {
+    bindMouse(bind = true, customTarget) {
+        if (bind) {
             this._mouseDown = this._mouseDown.bind(this);
             this._mouseUp = this._mouseUp.bind(this);
             this._mouseOver = this._mouseOver.bind(this);
@@ -5321,44 +5443,59 @@ class MultiTouchSpace extends Space {
             this._mouseMove = this._mouseMove.bind(this);
             this._mouseClick = this._mouseClick.bind(this);
             this._contextMenu = this._contextMenu.bind(this);
-            this.bindCanvas("mousedown", this._mouseDown);
-            this.bindCanvas("mouseup", this._mouseUp);
-            this.bindCanvas("mouseover", this._mouseOver);
-            this.bindCanvas("mouseout", this._mouseOut);
-            this.bindCanvas("mousemove", this._mouseMove);
-            this.bindCanvas("click", this._mouseClick);
-            this.bindCanvas("contextmenu", this._contextMenu);
+            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);
-            this.unbindCanvas("mouseup", this._mouseUp);
-            this.unbindCanvas("mouseover", this._mouseOver);
-            this.unbindCanvas("mouseout", this._mouseOut);
-            this.unbindCanvas("mousemove", this._mouseMove);
-            this.unbindCanvas("click", this._mouseClick);
-            this.unbindCanvas("contextmenu", this._contextMenu);
+            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 [];
@@ -5370,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) {
@@ -5455,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;
 
@@ -5917,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) {
@@ -6355,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 = [];