pts 0.10.3 → 0.10.7

package/dist/pts.js

@@ -1,5 +1,5 @@
 /*!
- * pts.js 0.10.3 - Copyright © 2017-2021 William Ngan and contributors.
+ * pts.js 0.10.7 - Copyright © 2017-2021 William Ngan and contributors.
  * Licensed under Apache 2.0 License.
  * See https://github.com/williamngan/pts for details.
  */
@@ -187,8 +187,7 @@ class CanvasSpace extends Space_1.MultiTouchSpace {
             callback(this.bound, this._canvas);
     }
     setup(opt) {
-        if (opt.bgcolor)
-            this._bgcolor = opt.bgcolor;
+        this._bgcolor = opt.bgcolor ? opt.bgcolor : "transparent";
         this.autoResize = (opt.resize != undefined) ? opt.resize : false;
         if (opt.retina !== false) {
             let r1 = window ? window.devicePixelRatio || 1 : 1;
@@ -203,6 +202,9 @@ class CanvasSpace extends Space_1.MultiTouchSpace {
         else {
             this._offscreen = false;
         }
+        if (opt.pixelDensity) {
+            this._pixelScale = opt.pixelDensity;
+        }
         return this;
     }
     set autoResize(auto) {
@@ -280,17 +282,15 @@ class CanvasSpace extends Space_1.MultiTouchSpace {
         if (bg)
             this._bgcolor = bg;
         const lastColor = this._ctx.fillStyle;
-        if (this._bgcolor) {
-            if (this._bgcolor === "transparent") {
+        if (!this._bgcolor || this._bgcolor === "transparent") {
+            this._ctx.clearRect(-1, -1, this._canvas.width + 1, this._canvas.height + 1);
+        }
+        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);
             }
-            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.fillStyle = this._bgcolor;
-                this._ctx.fillRect(-1, -1, this._canvas.width + 1, this._canvas.height + 1);
-            }
+            this._ctx.fillStyle = this._bgcolor;
+            this._ctx.fillRect(-1, -1, this._canvas.width + 1, this._canvas.height + 1);
         }
         this._ctx.fillStyle = lastColor;
         return this;
@@ -327,6 +327,24 @@ class CanvasSpace extends Space_1.MultiTouchSpace {
         this.removeAll();
         return this;
     }
+    recorder(downloadOrCallback, filetype = "webm", bitrate = 15000000) {
+        let stream = this._canvas.captureStream();
+        const recorder = new MediaRecorder(stream, { mimeType: `video/${filetype}`, bitsPerSecond: bitrate });
+        recorder.ondataavailable = function (d) {
+            let url = URL.createObjectURL(new Blob([d.data], { type: `video/${filetype}` }));
+            if (typeof downloadOrCallback === "function") {
+                downloadOrCallback(url);
+            }
+            else if (downloadOrCallback) {
+                let a = document.createElement("a");
+                a.href = url;
+                a.download = `canvas_video.${filetype}`;
+                a.click();
+                a.remove();
+            }
+        };
+        return recorder;
+    }
 }
 exports.CanvasSpace = CanvasSpace;
 class CanvasForm extends Form_1.VisualForm {
@@ -337,15 +355,25 @@ class CanvasForm extends Form_1.VisualForm {
             lineWidth: 1, lineJoin: "bevel", lineCap: "butt",
             globalAlpha: 1
         };
-        this._space = space;
-        this._space.add({ start: () => {
-                this._ctx = this._space.ctx;
-                this._ctx.fillStyle = this._style.fillStyle;
-                this._ctx.strokeStyle = this._style.strokeStyle;
-                this._ctx.lineJoin = "bevel";
-                this._ctx.font = this._font.value;
-                this._ready = true;
-            } });
+        if (!space)
+            return this;
+        const _setup = (ctx) => {
+            this._ctx = ctx;
+            this._ctx.fillStyle = this._style.fillStyle;
+            this._ctx.strokeStyle = this._style.strokeStyle;
+            this._ctx.lineJoin = "bevel";
+            this._ctx.font = this._font.value;
+            this._ready = true;
+        };
+        if (space instanceof CanvasRenderingContext2D) {
+            _setup(space);
+        }
+        else {
+            this._space = space;
+            this._space.add({ start: () => {
+                    _setup(this._space.ctx);
+                } });
+        }
     }
     get space() { return this._space; }
     get ctx() { return this._space.ctx; }
@@ -511,17 +539,6 @@ class CanvasForm extends Form_1.VisualForm {
         if (this._stroked)
             this._ctx.stroke();
     }
-    static paint(ctx, fn, fill, stroke, strokeWidth) {
-        if (fill)
-            ctx.fillStyle = fill;
-        if (stroke)
-            ctx.strokeStyle = stroke;
-        if (strokeWidth)
-            ctx.lineWidth = strokeWidth;
-        fn(ctx);
-        ctx.fill();
-        ctx.stroke();
-    }
     static point(ctx, p, radius = 5, shape = "square") {
         if (!p)
             return;
@@ -897,10 +914,10 @@ class Color extends Pt_1.Pt {
             return `#${_hex(this[0])}${_hex(this[1])}${_hex(this[2])}`;
         }
         else if (format == "rgba") {
-            return `rgba(${Math.floor(this[0])},${Math.floor(this[1])},${Math.floor(this[2])},${this.alpha}`;
+            return `rgba(${Math.floor(this[0])},${Math.floor(this[1])},${Math.floor(this[2])},${this.alpha})`;
         }
         else if (format == "rgb") {
-            return `rgb(${Math.floor(this[0])},${Math.floor(this[1])},${Math.floor(this[2])}`;
+            return `rgb(${Math.floor(this[0])},${Math.floor(this[1])},${Math.floor(this[2])})`;
         }
         else {
             return `${this._mode}(${this[0]},${this[1]},${this[2]},${this.alpha})`;
@@ -1034,12 +1051,12 @@ class Color extends Pt_1.Pt {
     static XYZtoRGB(xyz, normalizedInput = false, normalizedOutput = false) {
         let [x, y, z] = (!normalizedInput) ? xyz.$normalize() : xyz;
         let rgb = [
-            x * 3.2404542 + y * -1.5371385 + z * -0.4985314,
-            x * -0.9692660 + y * 1.8760108 + z * 0.0415560,
-            x * 0.0556434 + y * -0.2040259 + z * 1.0572252
+            x * 3.2406254773200533 + y * -1.5372079722103187 + z * -0.4986285986982479,
+            x * -0.9689307147293197 + y * 1.8757560608852415 + z * 0.041517523842953964,
+            x * 0.055710120445510616 + y * -0.2040210505984867 + z * 1.0569959422543882
         ];
         for (let i = 0; i < 3; i++) {
-            rgb[i] = (rgb[i] < 0) ? 0 : (rgb[i] > 0.0031308) ? (1.055 * Math.pow(rgb[i], 1 / 2.4) - 0.055) : (12.92 * rgb[i]);
+            rgb[i] = (rgb[i] > 0.0031308) ? (1.055 * Math.pow(rgb[i], 1 / 2.4) - 0.055) : (12.92 * rgb[i]);
             rgb[i] = Math.max(0, Math.min(1, rgb[i]));
             if (!normalizedOutput)
                 rgb[i] = Math.round(rgb[i] * 255);
@@ -1049,8 +1066,10 @@ class Color extends Pt_1.Pt {
     }
     static XYZtoLAB(xyz, normalizedInput = false, normalizedOutput = false) {
         let c = (normalizedInput) ? xyz.$normalize(false) : xyz.clone();
+        const eps = 0.00885645167;
+        const kap = 903.296296296;
         c.divide(Color.D65);
-        let fn = (n) => (n > 0.008856) ? Math.pow(n, 1 / 3) : (7.787 * n) + 16 / 116;
+        let fn = (n) => (n > eps) ? Math.pow(n, 1 / 3) : (kap * n + 16) / 116;
         let cy = fn(c[1]);
         let cc = Color.lab((116 * cy) - 16, 500 * (fn(c[0]) - cy), 200 * (cy - fn(c[2])), xyz.alpha);
         return (normalizedOutput) ? cc.normalize() : cc;
@@ -1060,12 +1079,12 @@ class Color extends Pt_1.Pt {
         let y = (c[0] + 16) / 116;
         let x = (c[1] / 500) + y;
         let z = y - c[2] / 200;
-        let fn = (n) => {
-            let nnn = n * n * n;
-            return (nnn > 0.008856) ? nnn : (n - 16 / 116) / 7.787;
-        };
+        const eps = 0.00885645167;
+        const kap = 903.296296296;
         let d = Color.D65;
-        let cc = Color.xyz(Math.max(0, d[0] * fn(x)), Math.max(0, d[1] * fn(y)), Math.max(0, d[2] * fn(z)), lab.alpha);
+        const xxx = Math.pow(x, 3);
+        const zzz = Math.pow(z, 3);
+        let cc = Color.xyz(d[0] * ((xxx > eps) ? xxx : (116 * x - 16) / kap), d[1] * ((c[0] > kap * eps) ? Math.pow((c[0] + 16) / 116, 3) : c[0] / kap), d[2] * ((zzz > eps) ? zzz : (116 * z - 16) / kap), lab.alpha);
         return (normalizedOutput) ? cc.normalize() : cc;
     }
     static XYZtoLUV(xyz, normalizedInput = false, normalizedOutput = false) {
@@ -1140,11 +1159,11 @@ class Create {
     static distributeRandom(bound, count, dimensions = 2) {
         let pts = new Pt_1.Group();
         for (let i = 0; i < count; i++) {
-            let p = [bound.x + Math.random() * bound.width];
+            let p = [bound.x + Num_1.Num.random() * bound.width];
             if (dimensions > 1)
-                p.push(bound.y + Math.random() * bound.height);
+                p.push(bound.y + Num_1.Num.random() * bound.height);
             if (dimensions > 2)
-                p.push(bound.z + Math.random() * bound.depth);
+                p.push(bound.z + Num_1.Num.random() * bound.depth);
             pts.push(new Pt_1.Pt(p));
         }
         return pts;
@@ -1190,7 +1209,7 @@ class Create {
         return g;
     }
     static noisePts(pts, dx = 0.01, dy = 0.01, rows = 0, columns = 0) {
-        let seed = Math.random();
+        let seed = Num_1.Num.random();
         let g = new Pt_1.Group();
         let i = 0;
         for (let p of pts) {
@@ -1986,12 +2005,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Img = void 0;
 const Pt_1 = __webpack_require__(/*! ./Pt */ "./src/Pt.ts");
 class Img {
-    constructor(editable = false, pixelScale = 1) {
+    constructor(editable = false, pixelScale = 1, crossOrigin) {
         this._scale = 1;
         this._loaded = false;
         this._editable = editable;
         this._scale = pixelScale;
         this._img = new Image();
+        if (crossOrigin)
+            this._img.crossOrigin = "Anonymous";
     }
     static load(src, editable = false, pixelScale = 1, ready) {
         let img = new Img(editable, pixelScale);
@@ -2072,15 +2093,41 @@ class Img {
     }
     filter(css) {
         this._ctx.filter = css;
+        this._ctx.drawImage(this._cv, 0, 0);
+        this._ctx.filter = "none";
         return this;
     }
-    static fromBlob(blob, editable = false) {
+    cleanup() {
+        if (this._cv)
+            this._cv.remove();
+        if (this._img)
+            this._img.remove();
+        this._data = null;
+    }
+    static fromBlob(blob, editable = false, pixelScale = 1) {
         let url = URL.createObjectURL(blob);
-        return new Img(editable).load(url);
+        return new Img(editable, pixelScale).load(url);
+    }
+    static imageDataToBlob(data) {
+        return new Promise(function (resolve) {
+            let cv = document.createElement("canvas");
+            cv.width = data.width;
+            cv.height = data.height;
+            cv.getContext("2d").putImageData(data, 0, 0);
+            cv.toBlob(blob => {
+                resolve(blob);
+                cv.remove();
+            });
+        });
     }
     toBase64() {
         return this._cv.toDataURL();
     }
+    toBlob() {
+        return new Promise((resolve) => {
+            this._cv.toBlob(blob => resolve(blob));
+        });
+    }
     get current() {
         return this._editable ? this._cv : this._img;
     }
@@ -2397,6 +2444,7 @@ const Util_1 = __webpack_require__(/*! ./Util */ "./src/Util.ts");
 const Op_1 = __webpack_require__(/*! ./Op */ "./src/Op.ts");
 const Pt_1 = __webpack_require__(/*! ./Pt */ "./src/Pt.ts");
 const LinearAlgebra_1 = __webpack_require__(/*! ./LinearAlgebra */ "./src/LinearAlgebra.ts");
+const uheprng_1 = __webpack_require__(/*! ./uheprng */ "./src/uheprng.ts");
 class Num {
     static equals(a, b, threshold = 0.00001) {
         return Math.abs(a - b) < threshold;
@@ -2421,14 +2469,14 @@ class Num {
     }
     static randomRange(a, b = 0) {
         let r = (a > b) ? (a - b) : (b - a);
-        return a + Math.random() * r;
+        return a + Num.random() * r;
     }
     static randomPt(a, b) {
         let p = new Pt_1.Pt(a.length);
         let range = b ? LinearAlgebra_1.Vec.subtract(b, a) : a;
         let start = b ? a : new Pt_1.Pt(a.length).fill(0);
         for (let i = 0, len = p.length; i < len; i++) {
-            p[i] = Math.random() * range[i] + start[i];
+            p[i] = Num.random() * range[i] + start[i];
         }
         return p;
     }
@@ -2459,6 +2507,14 @@ class Num {
         let max = Math.max(targetA, targetB);
         return Num.normalizeValue(n, currA, currB) * (max - min) + min;
     }
+    static seed(seed) {
+        this.generator = uheprng_1.default(seed);
+    }
+    static random() {
+        return this.generator
+            ? this.generator.random()
+            : Math.random();
+    }
 }
 exports.Num = Num;
 class Geom {
@@ -4650,7 +4706,7 @@ class Pt extends Float32Array {
             p.fill(defaultValue);
         if (randomize) {
             for (let i = 0, len = p.length; i < len; i++) {
-                p[i] = p[i] * Math.random();
+                p[i] = p[i] * Num_1.Num.random();
             }
         }
         return new Pt(p);
@@ -5238,8 +5294,8 @@ class MultiTouchSpace extends Space {
     bindCanvas(evt, callback, options = {}) {
         this._canvas.addEventListener(evt, callback, options);
     }
-    unbindCanvas(evt, callback) {
-        this._canvas.removeEventListener(evt, callback);
+    unbindCanvas(evt, callback, options = {}) {
+        this._canvas.removeEventListener(evt, callback, options);
     }
     bindMouse(_bind = true) {
         if (_bind) {
@@ -5264,18 +5320,18 @@ class MultiTouchSpace extends Space {
         }
         return this;
     }
-    bindTouch(_bind = true) {
-        if (_bind) {
-            this.bindCanvas("touchstart", this._touchStart.bind(this), { passive: true });
+    bindTouch(bind = true, passive = false) {
+        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: true });
+            this.bindCanvas("touchmove", this._touchMove.bind(this), { passive: passive });
             this.bindCanvas("touchcancel", this._mouseOut.bind(this));
             this._hasTouch = true;
         }
         else {
-            this.unbindCanvas("touchstart", this._touchStart.bind(this));
+            this.unbindCanvas("touchstart", this._touchStart.bind(this), { passive: passive });
             this.unbindCanvas("touchend", this._mouseUp.bind(this));
-            this.unbindCanvas("touchmove", this._touchMove.bind(this));
+            this.unbindCanvas("touchmove", this._touchMove.bind(this), { passive: passive });
             this.unbindCanvas("touchcancel", this._mouseOut.bind(this));
             this._hasTouch = false;
         }
@@ -6134,6 +6190,7 @@ exports.UIDragger = UIDragger;
 /*! Source code 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");
 const Pt_1 = __webpack_require__(/*! ./Pt */ "./src/Pt.ts");
 exports.Const = {
     xy: "xy",
@@ -6205,7 +6262,7 @@ class Util {
     }
     static randomInt(range, start = 0) {
         Util.warn("Util.randomInt is deprecated. Please use `Num.randomRange`");
-        return Math.floor(Math.random() * range) + start;
+        return Math.floor(Num_1.Num.random() * range) + start;
     }
     static split(pts, size, stride, loopBack = false, matchSize = true) {
         let chunks = [];
@@ -6392,6 +6449,88 @@ let quickStart = (id, bg = "#9ab") => {
 exports.quickStart = quickStart;
 
 
+/***/ }),
+
+/***/ "./src/uheprng.ts":
+/*!************************!*\
+  !*** ./src/uheprng.ts ***!
+  \************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+function Mash() {
+    var n = 0xefc8249d;
+    var mash = function (data) {
+        if (data) {
+            data = data.toString();
+            for (var i = 0; i < data.length; i++) {
+                n += data.charCodeAt(i);
+                var h = 0.02519603282416938 * n;
+                n = h >>> 0;
+                h -= n;
+                h *= n;
+                n = h >>> 0;
+                h -= n;
+                n += h * 0x100000000;
+            }
+            return (n >>> 0) * 2.3283064365386963e-10;
+        }
+        else
+            n = 0xefc8249d;
+    };
+    return mash;
+}
+function default_1(seed) {
+    var o = 48;
+    var c = 1;
+    var p = o;
+    var s = new Array(o);
+    var i, j, k = 0;
+    var mash = Mash();
+    for (i = 0; i < o; i++)
+        s[i] = mash(Math.random().toString());
+    function initState() {
+        mash();
+        for (i = 0; i < o; i++)
+            s[i] = mash(' ');
+        c = 1;
+        p = o;
+    }
+    function cleanString(inStr) {
+        inStr = inStr.replace(/(^\s*)|(\s*$)/gi, '');
+        inStr = inStr.replace(/[\x00-\x1F]/gi, '');
+        inStr = inStr.replace(/\n /, '\n');
+        return inStr;
+    }
+    function hashString(inStr) {
+        inStr = cleanString(inStr);
+        mash(inStr);
+        for (i = 0; i < inStr.length; i++) {
+            k = inStr.charCodeAt(i);
+            for (j = 0; j < o; j++) {
+                s[j] -= mash(k.toString());
+                if (s[j] < 0)
+                    s[j] += 1;
+            }
+        }
+    }
+    initState();
+    hashString(seed);
+    return {
+        random() {
+            if (++p >= o)
+                p = 0;
+            var t = 1768863 * s[p] + c * 2.3283064365386963e-10;
+            return (s[p] = t - (c = t | 0));
+        }
+    };
+}
+exports.default = default_1;
+
+
 /***/ })
 
 /******/ });