pts 0.10.7 → 0.10.10

package/dist/es5.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) */
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -234,13 +234,13 @@ var CanvasSpace = function (_Space_1$MultiTouchSp) {
         key: "resize",
         value: function 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);
@@ -279,14 +279,15 @@ var CanvasSpace = function (_Space_1$MultiTouchSp) {
         value: function clear(bg) {
             if (bg) this._bgcolor = bg;
             var lastColor = this._ctx.fillStyle;
+            var 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;
@@ -295,11 +296,12 @@ var CanvasSpace = function (_Space_1$MultiTouchSp) {
         key: "clearOffscreen",
         value: function clearOffscreen(bg) {
             if (this._offscreen) {
+                var 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;
@@ -513,6 +515,23 @@ var CanvasForm = function (_Form_1$VisualForm) {
             }
             return this;
         }
+    }, {
+        key: "applyFillStroke",
+        value: function applyFillStroke() {
+            var filled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+            var stroked = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+            var strokeWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 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;
+        }
     }, {
         key: "gradient",
         value: function gradient(stops) {
@@ -999,7 +1018,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) */
 
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
@@ -1620,7 +1639,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) */
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -2028,7 +2047,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) */
 
 var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
 
@@ -2637,7 +2656,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) */
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -2836,14 +2855,43 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+var __awaiter = undefined && undefined.__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;
+var Canvas_1 = __webpack_require__(/*! ./Canvas */ "./src/Canvas.ts");
 var Pt_1 = __webpack_require__(/*! ./Pt */ "./src/Pt.ts");
+var LinearAlgebra_1 = __webpack_require__(/*! ./LinearAlgebra */ "./src/LinearAlgebra.ts");
 
 var Img = function () {
     function Img() {
         var editable = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-        var pixelScale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+        var space = arguments[1];
         var crossOrigin = arguments[2];
 
         _classCallCheck(this, Img);
@@ -2851,7 +2899,8 @@ var Img = function () {
         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";
     }
@@ -2862,6 +2911,9 @@ var Img = function () {
             var _this = this;
 
             return new Promise(function (resolve, reject) {
+                if (_this._editable && !document) {
+                    reject("Cannot create html canvas element. document not found.");
+                }
                 _this._img.src = src;
                 _this._img.onload = function () {
                     if (_this._editable) {
@@ -2880,14 +2932,27 @@ var Img = function () {
     }, {
         key: "_drawToScale",
         value: function _drawToScale(canvasScale, img) {
-            var cms = typeof canvasScale === 'number' ? [canvasScale, canvasScale] : canvasScale;
             var nw = img.width;
             var 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);
         }
+    }, {
+        key: "initCanvas",
+        value: function initCanvas(width, height) {
+            var canvasScale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 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");
+            var 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;
+        }
     }, {
         key: "bitmap",
         value: function bitmap(size) {
@@ -2895,6 +2960,15 @@ var Img = function () {
             var h = size ? size[1] : this._cv.height;
             return createImageBitmap(this._cv, 0, 0, w, h);
         }
+    }, {
+        key: "pattern",
+        value: function pattern() {
+            var reptition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'repeat';
+            var dynamic = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+            if (!this._space) throw "Cannot find CanvasSpace ctx to create image pattern";
+            return this._space.ctx.createPattern(dynamic ? this._cv : this._img, reptition);
+        }
     }, {
         key: "sync",
         value: function sync() {
@@ -2965,6 +3039,14 @@ var Img = function () {
                 });
             });
         }
+    }, {
+        key: "getForm",
+        value: function 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;
+        }
     }, {
         key: "current",
         get: function get() {
@@ -3003,26 +3085,98 @@ var Img = function () {
     }, {
         key: "imageSize",
         get: function get() {
-            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);
+            }
         }
     }, {
         key: "canvasSize",
         get: function get() {
             return new Pt_1.Pt(this._cv.width, this._cv.height);
         }
+    }, {
+        key: "scaledMatrix",
+        get: function get() {
+            var s = 1 / this._scale;
+            return new LinearAlgebra_1.Mat().scale2D([s, s]);
+        }
     }], [{
         key: "load",
         value: function load(src) {
             var editable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-            var pixelScale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+            var space = arguments[2];
             var ready = arguments[3];
 
-            var img = new Img(editable, pixelScale);
+            var img = new Img(editable, space);
             img.load(src).then(function (res) {
                 if (ready) ready(res);
             });
             return img;
         }
+    }, {
+        key: "loadAsync",
+        value: function loadAsync(src) {
+            var editable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+            var space = arguments[2];
+
+            return __awaiter(this, void 0, void 0, regeneratorRuntime.mark(function _callee() {
+                var img;
+                return regeneratorRuntime.wrap(function _callee$(_context) {
+                    while (1) {
+                        switch (_context.prev = _context.next) {
+                            case 0:
+                                _context.next = 2;
+                                return new Img(editable, space).load(src);
+
+                            case 2:
+                                img = _context.sent;
+                                return _context.abrupt("return", img);
+
+                            case 4:
+                            case "end":
+                                return _context.stop();
+                        }
+                    }
+                }, _callee, this);
+            }));
+        }
+    }, {
+        key: "loadPattern",
+        value: function loadPattern(src, space) {
+            var repeat = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'repeat';
+            var editable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+
+            return __awaiter(this, void 0, void 0, regeneratorRuntime.mark(function _callee2() {
+                var img;
+                return regeneratorRuntime.wrap(function _callee2$(_context2) {
+                    while (1) {
+                        switch (_context2.prev = _context2.next) {
+                            case 0:
+                                _context2.next = 2;
+                                return Img.loadAsync(src, editable, space);
+
+                            case 2:
+                                img = _context2.sent;
+                                return _context2.abrupt("return", img.pattern(repeat));
+
+                            case 4:
+                            case "end":
+                                return _context2.stop();
+                        }
+                    }
+                }, _callee2, this);
+            }));
+        }
+    }, {
+        key: "blank",
+        value: function blank(size, space, scale) {
+            var img = new Img(true, space);
+            var s = scale ? scale : space.pixelScale;
+            img.initCanvas(size[0], size[1], s);
+            return img;
+        }
     }, {
         key: "getPixel",
         value: function getPixel(imgData, p) {
@@ -3037,15 +3191,18 @@ var Img = function () {
         key: "fromBlob",
         value: function fromBlob(blob) {
             var editable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-            var pixelScale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+            var space = arguments[2];
 
             var url = URL.createObjectURL(blob);
-            return new Img(editable, pixelScale).load(url);
+            return new Img(editable, space).load(url);
         }
     }, {
         key: "imageDataToBlob",
         value: function imageDataToBlob(data) {
-            return new Promise(function (resolve) {
+            return new Promise(function (resolve, reject) {
+                if (!document) {
+                    reject("Cannot create html canvas element. document not found.");
+                }
                 var cv = document.createElement("canvas");
                 cv.width = data.width;
                 cv.height = data.height;
@@ -3074,7 +3231,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) */
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -3255,9 +3412,60 @@ exports.Vec = Vec;
 var Mat = function () {
     function Mat() {
         _classCallCheck(this, Mat);
+
+        this.reset();
     }
 
-    _createClass(Mat, null, [{
+    _createClass(Mat, [{
+        key: "reset",
+        value: function reset() {
+            this._33 = Mat.scale2DMatrix(1, 1);
+        }
+    }, {
+        key: "scale2D",
+        value: function scale2D(val) {
+            var at = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
+
+            var m = Mat.scaleAt2DMatrix(val[0] || 1, val[1] || 1, at);
+            this._33 = Mat.multiply(this._33, m);
+            return this;
+        }
+    }, {
+        key: "rotate2D",
+        value: function rotate2D(ang) {
+            var at = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
+
+            var m = Mat.rotateAt2DMatrix(Math.cos(ang), Math.sin(ang), at);
+            this._33 = Mat.multiply(this._33, m);
+            return this;
+        }
+    }, {
+        key: "translate2D",
+        value: function translate2D(val) {
+            var m = Mat.translate2DMatrix(val[0] || 0, val[1] || 0);
+            this._33 = Mat.multiply(this._33, m);
+            return this;
+        }
+    }, {
+        key: "shear2D",
+        value: function shear2D(val) {
+            var at = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
+
+            var m = Mat.shearAt2DMatrix(Math.tan(val[0] || 0), Math.tan(val[1] || 1), at);
+            this._33 = Mat.multiply(this._33, m);
+            return this;
+        }
+    }, {
+        key: "value",
+        get: function get() {
+            return this._33;
+        }
+    }, {
+        key: "domMatrix",
+        get: function get() {
+            return new DOMMatrix(Mat.toDOMMatrix(this._33));
+        }
+    }], [{
         key: "add",
         value: function add(a, b) {
             if (typeof b != "number") {
@@ -3338,6 +3546,11 @@ var Mat = function () {
 
             return Mat.zip(g, defaultValue, useLongest);
         }
+    }, {
+        key: "toDOMMatrix",
+        value: function toDOMMatrix(m) {
+            return [m[0][0], m[0][1], m[1][0], m[1][1], m[2][0], m[2][1]];
+        }
     }, {
         key: "transform2D",
         value: function transform2D(pt, m) {
@@ -3421,7 +3634,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) */
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -4211,7 +4424,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) */
 
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
@@ -5574,7 +5787,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) */
 
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
@@ -6746,7 +6959,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) */
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -7501,6 +7714,11 @@ var Group = function (_extendableBuiltin4) {
 
             return LinearAlgebra_1.Mat.zip(this, defaultValue, useLongest);
         }
+    }, {
+        key: "toBound",
+        value: function toBound() {
+            return Bound.fromGroup(this);
+        }
     }, {
         key: "toString",
         value: function toString() {
@@ -7799,7 +8017,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) */
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -7820,7 +8038,7 @@ var Space = function () {
 
         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;
@@ -7837,6 +8055,13 @@ var Space = function () {
             this._refresh = b;
             return this;
         }
+    }, {
+        key: "minFrameTime",
+        value: function minFrameTime() {
+            var ms = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+            this._time.min = ms;
+        }
     }, {
         key: "add",
         value: function add(p) {
@@ -7872,6 +8097,7 @@ var Space = function () {
             this._animID = requestAnimationFrame(this.play.bind(this));
             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);
@@ -7930,7 +8156,7 @@ var Space = function () {
     }, {
         key: "playOnce",
         value: function playOnce() {
-            var duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 5000;
+            var duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
 
             this.play();
             this.stop(duration);
@@ -8004,6 +8230,7 @@ var MultiTouchSpace = function (_Space) {
         _this._dragged = false;
         _this._hasMouse = false;
         _this._hasTouch = false;
+        _this._hasKeyboard = false;
         return _this;
     }
 
@@ -8011,38 +8238,68 @@ var MultiTouchSpace = function (_Space) {
         key: "bindCanvas",
         value: function bindCanvas(evt, callback) {
             var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+            var customTarget = arguments[3];
 
-            this._canvas.addEventListener(evt, callback, options);
+            var target = customTarget ? customTarget : this._canvas;
+            target.addEventListener(evt, callback, options);
         }
     }, {
         key: "unbindCanvas",
         value: function unbindCanvas(evt, callback) {
             var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+            var customTarget = arguments[3];
 
-            this._canvas.removeEventListener(evt, callback, options);
+            var target = customTarget ? customTarget : this._canvas;
+            target.removeEventListener(evt, callback, options);
+        }
+    }, {
+        key: "bindDoc",
+        value: function bindDoc(evt, callback) {
+            var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+            if (document) {
+                document.addEventListener(evt, callback, options);
+            }
+        }
+    }, {
+        key: "unbindDoc",
+        value: function unbindDoc(evt, callback) {
+            var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+            if (document) {
+                document.removeEventListener(evt, callback, options);
+            }
         }
     }, {
         key: "bindMouse",
         value: function bindMouse() {
-            var _bind = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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));
+            var bind = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+            var customTarget = arguments[1];
+
+            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;
@@ -8052,22 +8309,41 @@ var MultiTouchSpace = function (_Space) {
         value: function bindTouch() {
             var bind = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
             var passive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+            var customTarget = arguments[2];
 
             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;
         }
+    }, {
+        key: "bindKeyboard",
+        value: function bindKeyboard() {
+            var bind = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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;
+        }
     }, {
         key: "touchesToPoints",
         value: function touchesToPoints(evt) {
@@ -8084,6 +8360,7 @@ var MultiTouchSpace = function (_Space) {
     }, {
         key: "_mouseAction",
         value: function _mouseAction(type, evt) {
+            if (!this.isPlaying) return;
             var px = 0,
                 py = 0;
             if (evt instanceof MouseEvent) {
@@ -8183,6 +8460,29 @@ var MultiTouchSpace = function (_Space) {
             evt.preventDefault();
             return false;
         }
+    }, {
+        key: "_keyDown",
+        value: function _keyDown(evt) {
+            this._keyboardAction(UI_1.UIPointerActions.keydown, evt);
+            return false;
+        }
+    }, {
+        key: "_keyUp",
+        value: function _keyUp(evt) {
+            this._keyboardAction(UI_1.UIPointerActions.keyup, evt);
+            return false;
+        }
+    }, {
+        key: "_keyboardAction",
+        value: function _keyboardAction(type, evt) {
+            if (!this.isPlaying) return;
+            for (var k in this.players) {
+                if (this.players.hasOwnProperty(k)) {
+                    var v = this.players[k];
+                    if (v.action) v.action(type, evt.shiftKey ? 1 : 0, evt.altKey ? 1 : 0, evt);
+                }
+            }
+        }
     }, {
         key: "pointer",
         get: function get() {
@@ -8208,7 +8508,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) */
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -8716,7 +9016,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) */
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -8801,7 +9101,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) */
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -8821,7 +9121,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"
 };
 
 var UI = function () {
@@ -9189,7 +9493,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) */
 
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
@@ -9392,6 +9696,25 @@ var Util = function () {
             };
             request.send();
         }
+    }, {
+        key: "download",
+        value: function download(space) {
+            var filename = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'pts_canvas_image';
+            var filetype = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "png";
+            var quality = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+
+            var ftype = filetype === 'jpg' ? 'jpeg' : filetype;
+            space.element.toBlob(function (blob) {
+                var link = document.createElement('a');
+                var 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);
+        }
     }, {
         key: "performance",
         value: function performance() {