pts 0.10.3 → 0.10.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * pts.js 0.10.3 - Copyright © 2017-2021 William Ngan and contributors.
2
+ * pts.js 0.10.7 - Copyright © 2017-2021 William Ngan and contributors.
3
3
  * Licensed under Apache 2.0 License.
4
4
  * See https://github.com/williamngan/pts for details.
5
5
  */
@@ -187,8 +187,7 @@ class CanvasSpace extends Space_1.MultiTouchSpace {
187
187
  callback(this.bound, this._canvas);
188
188
  }
189
189
  setup(opt) {
190
- if (opt.bgcolor)
191
- this._bgcolor = opt.bgcolor;
190
+ this._bgcolor = opt.bgcolor ? opt.bgcolor : "transparent";
192
191
  this.autoResize = (opt.resize != undefined) ? opt.resize : false;
193
192
  if (opt.retina !== false) {
194
193
  let r1 = window ? window.devicePixelRatio || 1 : 1;
@@ -203,6 +202,9 @@ class CanvasSpace extends Space_1.MultiTouchSpace {
203
202
  else {
204
203
  this._offscreen = false;
205
204
  }
205
+ if (opt.pixelDensity) {
206
+ this._pixelScale = opt.pixelDensity;
207
+ }
206
208
  return this;
207
209
  }
208
210
  set autoResize(auto) {
@@ -280,17 +282,15 @@ class CanvasSpace extends Space_1.MultiTouchSpace {
280
282
  if (bg)
281
283
  this._bgcolor = bg;
282
284
  const lastColor = this._ctx.fillStyle;
283
- if (this._bgcolor) {
284
- if (this._bgcolor === "transparent") {
285
+ if (!this._bgcolor || this._bgcolor === "transparent") {
286
+ this._ctx.clearRect(-1, -1, this._canvas.width + 1, this._canvas.height + 1);
287
+ }
288
+ else {
289
+ if (this._bgcolor.indexOf("rgba") === 0 || (this._bgcolor.length === 9 && this._bgcolor.indexOf("#") === 0)) {
285
290
  this._ctx.clearRect(-1, -1, this._canvas.width + 1, this._canvas.height + 1);
286
291
  }
287
- else {
288
- if (this._bgcolor.indexOf("rgba") === 0 || (this._bgcolor.length === 9 && this._bgcolor.indexOf("#") === 0)) {
289
- this._ctx.clearRect(-1, -1, this._canvas.width + 1, this._canvas.height + 1);
290
- }
291
- this._ctx.fillStyle = this._bgcolor;
292
- this._ctx.fillRect(-1, -1, this._canvas.width + 1, this._canvas.height + 1);
293
- }
292
+ this._ctx.fillStyle = this._bgcolor;
293
+ this._ctx.fillRect(-1, -1, this._canvas.width + 1, this._canvas.height + 1);
294
294
  }
295
295
  this._ctx.fillStyle = lastColor;
296
296
  return this;
@@ -327,6 +327,24 @@ class CanvasSpace extends Space_1.MultiTouchSpace {
327
327
  this.removeAll();
328
328
  return this;
329
329
  }
330
+ recorder(downloadOrCallback, filetype = "webm", bitrate = 15000000) {
331
+ let stream = this._canvas.captureStream();
332
+ const recorder = new MediaRecorder(stream, { mimeType: `video/${filetype}`, bitsPerSecond: bitrate });
333
+ recorder.ondataavailable = function (d) {
334
+ let url = URL.createObjectURL(new Blob([d.data], { type: `video/${filetype}` }));
335
+ if (typeof downloadOrCallback === "function") {
336
+ downloadOrCallback(url);
337
+ }
338
+ else if (downloadOrCallback) {
339
+ let a = document.createElement("a");
340
+ a.href = url;
341
+ a.download = `canvas_video.${filetype}`;
342
+ a.click();
343
+ a.remove();
344
+ }
345
+ };
346
+ return recorder;
347
+ }
330
348
  }
331
349
  exports.CanvasSpace = CanvasSpace;
332
350
  class CanvasForm extends Form_1.VisualForm {
@@ -337,15 +355,25 @@ class CanvasForm extends Form_1.VisualForm {
337
355
  lineWidth: 1, lineJoin: "bevel", lineCap: "butt",
338
356
  globalAlpha: 1
339
357
  };
340
- this._space = space;
341
- this._space.add({ start: () => {
342
- this._ctx = this._space.ctx;
343
- this._ctx.fillStyle = this._style.fillStyle;
344
- this._ctx.strokeStyle = this._style.strokeStyle;
345
- this._ctx.lineJoin = "bevel";
346
- this._ctx.font = this._font.value;
347
- this._ready = true;
348
- } });
358
+ if (!space)
359
+ return this;
360
+ const _setup = (ctx) => {
361
+ this._ctx = ctx;
362
+ this._ctx.fillStyle = this._style.fillStyle;
363
+ this._ctx.strokeStyle = this._style.strokeStyle;
364
+ this._ctx.lineJoin = "bevel";
365
+ this._ctx.font = this._font.value;
366
+ this._ready = true;
367
+ };
368
+ if (space instanceof CanvasRenderingContext2D) {
369
+ _setup(space);
370
+ }
371
+ else {
372
+ this._space = space;
373
+ this._space.add({ start: () => {
374
+ _setup(this._space.ctx);
375
+ } });
376
+ }
349
377
  }
350
378
  get space() { return this._space; }
351
379
  get ctx() { return this._space.ctx; }
@@ -511,17 +539,6 @@ class CanvasForm extends Form_1.VisualForm {
511
539
  if (this._stroked)
512
540
  this._ctx.stroke();
513
541
  }
514
- static paint(ctx, fn, fill, stroke, strokeWidth) {
515
- if (fill)
516
- ctx.fillStyle = fill;
517
- if (stroke)
518
- ctx.strokeStyle = stroke;
519
- if (strokeWidth)
520
- ctx.lineWidth = strokeWidth;
521
- fn(ctx);
522
- ctx.fill();
523
- ctx.stroke();
524
- }
525
542
  static point(ctx, p, radius = 5, shape = "square") {
526
543
  if (!p)
527
544
  return;
@@ -897,10 +914,10 @@ class Color extends Pt_1.Pt {
897
914
  return `#${_hex(this[0])}${_hex(this[1])}${_hex(this[2])}`;
898
915
  }
899
916
  else if (format == "rgba") {
900
- return `rgba(${Math.floor(this[0])},${Math.floor(this[1])},${Math.floor(this[2])},${this.alpha}`;
917
+ return `rgba(${Math.floor(this[0])},${Math.floor(this[1])},${Math.floor(this[2])},${this.alpha})`;
901
918
  }
902
919
  else if (format == "rgb") {
903
- return `rgb(${Math.floor(this[0])},${Math.floor(this[1])},${Math.floor(this[2])}`;
920
+ return `rgb(${Math.floor(this[0])},${Math.floor(this[1])},${Math.floor(this[2])})`;
904
921
  }
905
922
  else {
906
923
  return `${this._mode}(${this[0]},${this[1]},${this[2]},${this.alpha})`;
@@ -1034,12 +1051,12 @@ class Color extends Pt_1.Pt {
1034
1051
  static XYZtoRGB(xyz, normalizedInput = false, normalizedOutput = false) {
1035
1052
  let [x, y, z] = (!normalizedInput) ? xyz.$normalize() : xyz;
1036
1053
  let rgb = [
1037
- x * 3.2404542 + y * -1.5371385 + z * -0.4985314,
1038
- x * -0.9692660 + y * 1.8760108 + z * 0.0415560,
1039
- x * 0.0556434 + y * -0.2040259 + z * 1.0572252
1054
+ x * 3.2406254773200533 + y * -1.5372079722103187 + z * -0.4986285986982479,
1055
+ x * -0.9689307147293197 + y * 1.8757560608852415 + z * 0.041517523842953964,
1056
+ x * 0.055710120445510616 + y * -0.2040210505984867 + z * 1.0569959422543882
1040
1057
  ];
1041
1058
  for (let i = 0; i < 3; i++) {
1042
- 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]);
1059
+ rgb[i] = (rgb[i] > 0.0031308) ? (1.055 * Math.pow(rgb[i], 1 / 2.4) - 0.055) : (12.92 * rgb[i]);
1043
1060
  rgb[i] = Math.max(0, Math.min(1, rgb[i]));
1044
1061
  if (!normalizedOutput)
1045
1062
  rgb[i] = Math.round(rgb[i] * 255);
@@ -1049,8 +1066,10 @@ class Color extends Pt_1.Pt {
1049
1066
  }
1050
1067
  static XYZtoLAB(xyz, normalizedInput = false, normalizedOutput = false) {
1051
1068
  let c = (normalizedInput) ? xyz.$normalize(false) : xyz.clone();
1069
+ const eps = 0.00885645167;
1070
+ const kap = 903.296296296;
1052
1071
  c.divide(Color.D65);
1053
- let fn = (n) => (n > 0.008856) ? Math.pow(n, 1 / 3) : (7.787 * n) + 16 / 116;
1072
+ let fn = (n) => (n > eps) ? Math.pow(n, 1 / 3) : (kap * n + 16) / 116;
1054
1073
  let cy = fn(c[1]);
1055
1074
  let cc = Color.lab((116 * cy) - 16, 500 * (fn(c[0]) - cy), 200 * (cy - fn(c[2])), xyz.alpha);
1056
1075
  return (normalizedOutput) ? cc.normalize() : cc;
@@ -1060,12 +1079,12 @@ class Color extends Pt_1.Pt {
1060
1079
  let y = (c[0] + 16) / 116;
1061
1080
  let x = (c[1] / 500) + y;
1062
1081
  let z = y - c[2] / 200;
1063
- let fn = (n) => {
1064
- let nnn = n * n * n;
1065
- return (nnn > 0.008856) ? nnn : (n - 16 / 116) / 7.787;
1066
- };
1082
+ const eps = 0.00885645167;
1083
+ const kap = 903.296296296;
1067
1084
  let d = Color.D65;
1068
- 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);
1085
+ const xxx = Math.pow(x, 3);
1086
+ const zzz = Math.pow(z, 3);
1087
+ 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);
1069
1088
  return (normalizedOutput) ? cc.normalize() : cc;
1070
1089
  }
1071
1090
  static XYZtoLUV(xyz, normalizedInput = false, normalizedOutput = false) {
@@ -1140,11 +1159,11 @@ class Create {
1140
1159
  static distributeRandom(bound, count, dimensions = 2) {
1141
1160
  let pts = new Pt_1.Group();
1142
1161
  for (let i = 0; i < count; i++) {
1143
- let p = [bound.x + Math.random() * bound.width];
1162
+ let p = [bound.x + Num_1.Num.random() * bound.width];
1144
1163
  if (dimensions > 1)
1145
- p.push(bound.y + Math.random() * bound.height);
1164
+ p.push(bound.y + Num_1.Num.random() * bound.height);
1146
1165
  if (dimensions > 2)
1147
- p.push(bound.z + Math.random() * bound.depth);
1166
+ p.push(bound.z + Num_1.Num.random() * bound.depth);
1148
1167
  pts.push(new Pt_1.Pt(p));
1149
1168
  }
1150
1169
  return pts;
@@ -1190,7 +1209,7 @@ class Create {
1190
1209
  return g;
1191
1210
  }
1192
1211
  static noisePts(pts, dx = 0.01, dy = 0.01, rows = 0, columns = 0) {
1193
- let seed = Math.random();
1212
+ let seed = Num_1.Num.random();
1194
1213
  let g = new Pt_1.Group();
1195
1214
  let i = 0;
1196
1215
  for (let p of pts) {
@@ -1986,12 +2005,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
1986
2005
  exports.Img = void 0;
1987
2006
  const Pt_1 = __webpack_require__(/*! ./Pt */ "./src/Pt.ts");
1988
2007
  class Img {
1989
- constructor(editable = false, pixelScale = 1) {
2008
+ constructor(editable = false, pixelScale = 1, crossOrigin) {
1990
2009
  this._scale = 1;
1991
2010
  this._loaded = false;
1992
2011
  this._editable = editable;
1993
2012
  this._scale = pixelScale;
1994
2013
  this._img = new Image();
2014
+ if (crossOrigin)
2015
+ this._img.crossOrigin = "Anonymous";
1995
2016
  }
1996
2017
  static load(src, editable = false, pixelScale = 1, ready) {
1997
2018
  let img = new Img(editable, pixelScale);
@@ -2072,15 +2093,41 @@ class Img {
2072
2093
  }
2073
2094
  filter(css) {
2074
2095
  this._ctx.filter = css;
2096
+ this._ctx.drawImage(this._cv, 0, 0);
2097
+ this._ctx.filter = "none";
2075
2098
  return this;
2076
2099
  }
2077
- static fromBlob(blob, editable = false) {
2100
+ cleanup() {
2101
+ if (this._cv)
2102
+ this._cv.remove();
2103
+ if (this._img)
2104
+ this._img.remove();
2105
+ this._data = null;
2106
+ }
2107
+ static fromBlob(blob, editable = false, pixelScale = 1) {
2078
2108
  let url = URL.createObjectURL(blob);
2079
- return new Img(editable).load(url);
2109
+ return new Img(editable, pixelScale).load(url);
2110
+ }
2111
+ static imageDataToBlob(data) {
2112
+ return new Promise(function (resolve) {
2113
+ let cv = document.createElement("canvas");
2114
+ cv.width = data.width;
2115
+ cv.height = data.height;
2116
+ cv.getContext("2d").putImageData(data, 0, 0);
2117
+ cv.toBlob(blob => {
2118
+ resolve(blob);
2119
+ cv.remove();
2120
+ });
2121
+ });
2080
2122
  }
2081
2123
  toBase64() {
2082
2124
  return this._cv.toDataURL();
2083
2125
  }
2126
+ toBlob() {
2127
+ return new Promise((resolve) => {
2128
+ this._cv.toBlob(blob => resolve(blob));
2129
+ });
2130
+ }
2084
2131
  get current() {
2085
2132
  return this._editable ? this._cv : this._img;
2086
2133
  }
@@ -2397,6 +2444,7 @@ const Util_1 = __webpack_require__(/*! ./Util */ "./src/Util.ts");
2397
2444
  const Op_1 = __webpack_require__(/*! ./Op */ "./src/Op.ts");
2398
2445
  const Pt_1 = __webpack_require__(/*! ./Pt */ "./src/Pt.ts");
2399
2446
  const LinearAlgebra_1 = __webpack_require__(/*! ./LinearAlgebra */ "./src/LinearAlgebra.ts");
2447
+ const uheprng_1 = __webpack_require__(/*! ./uheprng */ "./src/uheprng.ts");
2400
2448
  class Num {
2401
2449
  static equals(a, b, threshold = 0.00001) {
2402
2450
  return Math.abs(a - b) < threshold;
@@ -2421,14 +2469,14 @@ class Num {
2421
2469
  }
2422
2470
  static randomRange(a, b = 0) {
2423
2471
  let r = (a > b) ? (a - b) : (b - a);
2424
- return a + Math.random() * r;
2472
+ return a + Num.random() * r;
2425
2473
  }
2426
2474
  static randomPt(a, b) {
2427
2475
  let p = new Pt_1.Pt(a.length);
2428
2476
  let range = b ? LinearAlgebra_1.Vec.subtract(b, a) : a;
2429
2477
  let start = b ? a : new Pt_1.Pt(a.length).fill(0);
2430
2478
  for (let i = 0, len = p.length; i < len; i++) {
2431
- p[i] = Math.random() * range[i] + start[i];
2479
+ p[i] = Num.random() * range[i] + start[i];
2432
2480
  }
2433
2481
  return p;
2434
2482
  }
@@ -2459,6 +2507,14 @@ class Num {
2459
2507
  let max = Math.max(targetA, targetB);
2460
2508
  return Num.normalizeValue(n, currA, currB) * (max - min) + min;
2461
2509
  }
2510
+ static seed(seed) {
2511
+ this.generator = uheprng_1.default(seed);
2512
+ }
2513
+ static random() {
2514
+ return this.generator
2515
+ ? this.generator.random()
2516
+ : Math.random();
2517
+ }
2462
2518
  }
2463
2519
  exports.Num = Num;
2464
2520
  class Geom {
@@ -4650,7 +4706,7 @@ class Pt extends Float32Array {
4650
4706
  p.fill(defaultValue);
4651
4707
  if (randomize) {
4652
4708
  for (let i = 0, len = p.length; i < len; i++) {
4653
- p[i] = p[i] * Math.random();
4709
+ p[i] = p[i] * Num_1.Num.random();
4654
4710
  }
4655
4711
  }
4656
4712
  return new Pt(p);
@@ -5238,8 +5294,8 @@ class MultiTouchSpace extends Space {
5238
5294
  bindCanvas(evt, callback, options = {}) {
5239
5295
  this._canvas.addEventListener(evt, callback, options);
5240
5296
  }
5241
- unbindCanvas(evt, callback) {
5242
- this._canvas.removeEventListener(evt, callback);
5297
+ unbindCanvas(evt, callback, options = {}) {
5298
+ this._canvas.removeEventListener(evt, callback, options);
5243
5299
  }
5244
5300
  bindMouse(_bind = true) {
5245
5301
  if (_bind) {
@@ -5264,18 +5320,18 @@ class MultiTouchSpace extends Space {
5264
5320
  }
5265
5321
  return this;
5266
5322
  }
5267
- bindTouch(_bind = true) {
5268
- if (_bind) {
5269
- this.bindCanvas("touchstart", this._touchStart.bind(this), { passive: true });
5323
+ bindTouch(bind = true, passive = false) {
5324
+ if (bind) {
5325
+ this.bindCanvas("touchstart", this._touchStart.bind(this), { passive: passive });
5270
5326
  this.bindCanvas("touchend", this._mouseUp.bind(this));
5271
- this.bindCanvas("touchmove", this._touchMove.bind(this), { passive: true });
5327
+ this.bindCanvas("touchmove", this._touchMove.bind(this), { passive: passive });
5272
5328
  this.bindCanvas("touchcancel", this._mouseOut.bind(this));
5273
5329
  this._hasTouch = true;
5274
5330
  }
5275
5331
  else {
5276
- this.unbindCanvas("touchstart", this._touchStart.bind(this));
5332
+ this.unbindCanvas("touchstart", this._touchStart.bind(this), { passive: passive });
5277
5333
  this.unbindCanvas("touchend", this._mouseUp.bind(this));
5278
- this.unbindCanvas("touchmove", this._touchMove.bind(this));
5334
+ this.unbindCanvas("touchmove", this._touchMove.bind(this), { passive: passive });
5279
5335
  this.unbindCanvas("touchcancel", this._mouseOut.bind(this));
5280
5336
  this._hasTouch = false;
5281
5337
  }
@@ -6119,6 +6175,7 @@ exports.UIDragger = UIDragger;
6119
6175
  /*! Source code licensed under Apache License 2.0. Copyright © 2017-current William Ngan and contributors. (https://github.com/williamngan/pts) */
6120
6176
  Object.defineProperty(exports, "__esModule", { value: true });
6121
6177
  exports.Util = exports.Const = void 0;
6178
+ const Num_1 = __webpack_require__(/*! ./Num */ "./src/Num.ts");
6122
6179
  const Pt_1 = __webpack_require__(/*! ./Pt */ "./src/Pt.ts");
6123
6180
  exports.Const = {
6124
6181
  xy: "xy",
@@ -6190,7 +6247,7 @@ class Util {
6190
6247
  }
6191
6248
  static randomInt(range, start = 0) {
6192
6249
  Util.warn("Util.randomInt is deprecated. Please use `Num.randomRange`");
6193
- return Math.floor(Math.random() * range) + start;
6250
+ return Math.floor(Num_1.Num.random() * range) + start;
6194
6251
  }
6195
6252
  static split(pts, size, stride, loopBack = false, matchSize = true) {
6196
6253
  let chunks = [];
@@ -6344,6 +6401,89 @@ __exportStar(__webpack_require__(/*! ./Typography */ "./src/Typography.ts"), exp
6344
6401
  __exportStar(__webpack_require__(/*! ./Physics */ "./src/Physics.ts"), exports);
6345
6402
  __exportStar(__webpack_require__(/*! ./Play */ "./src/Play.ts"), exports);
6346
6403
  __exportStar(__webpack_require__(/*! ./UI */ "./src/UI.ts"), exports);
6404
+ __exportStar(__webpack_require__(/*! ./Image */ "./src/Image.ts"), exports);
6405
+
6406
+
6407
+ /***/ }),
6408
+
6409
+ /***/ "./src/uheprng.ts":
6410
+ /*!************************!*\
6411
+ !*** ./src/uheprng.ts ***!
6412
+ \************************/
6413
+ /*! no static exports found */
6414
+ /***/ (function(module, exports, __webpack_require__) {
6415
+
6416
+ "use strict";
6417
+
6418
+ Object.defineProperty(exports, "__esModule", { value: true });
6419
+ function Mash() {
6420
+ var n = 0xefc8249d;
6421
+ var mash = function (data) {
6422
+ if (data) {
6423
+ data = data.toString();
6424
+ for (var i = 0; i < data.length; i++) {
6425
+ n += data.charCodeAt(i);
6426
+ var h = 0.02519603282416938 * n;
6427
+ n = h >>> 0;
6428
+ h -= n;
6429
+ h *= n;
6430
+ n = h >>> 0;
6431
+ h -= n;
6432
+ n += h * 0x100000000;
6433
+ }
6434
+ return (n >>> 0) * 2.3283064365386963e-10;
6435
+ }
6436
+ else
6437
+ n = 0xefc8249d;
6438
+ };
6439
+ return mash;
6440
+ }
6441
+ function default_1(seed) {
6442
+ var o = 48;
6443
+ var c = 1;
6444
+ var p = o;
6445
+ var s = new Array(o);
6446
+ var i, j, k = 0;
6447
+ var mash = Mash();
6448
+ for (i = 0; i < o; i++)
6449
+ s[i] = mash(Math.random().toString());
6450
+ function initState() {
6451
+ mash();
6452
+ for (i = 0; i < o; i++)
6453
+ s[i] = mash(' ');
6454
+ c = 1;
6455
+ p = o;
6456
+ }
6457
+ function cleanString(inStr) {
6458
+ inStr = inStr.replace(/(^\s*)|(\s*$)/gi, '');
6459
+ inStr = inStr.replace(/[\x00-\x1F]/gi, '');
6460
+ inStr = inStr.replace(/\n /, '\n');
6461
+ return inStr;
6462
+ }
6463
+ function hashString(inStr) {
6464
+ inStr = cleanString(inStr);
6465
+ mash(inStr);
6466
+ for (i = 0; i < inStr.length; i++) {
6467
+ k = inStr.charCodeAt(i);
6468
+ for (j = 0; j < o; j++) {
6469
+ s[j] -= mash(k.toString());
6470
+ if (s[j] < 0)
6471
+ s[j] += 1;
6472
+ }
6473
+ }
6474
+ }
6475
+ initState();
6476
+ hashString(seed);
6477
+ return {
6478
+ random() {
6479
+ if (++p >= o)
6480
+ p = 0;
6481
+ var t = 1768863 * s[p] + c * 2.3283064365386963e-10;
6482
+ return (s[p] = t - (c = t | 0));
6483
+ }
6484
+ };
6485
+ }
6486
+ exports.default = default_1;
6347
6487
 
6348
6488
 
6349
6489
  /***/ })
package/dist/pts.d.ts CHANGED
@@ -16,12 +16,7 @@ export class CanvasSpace extends MultiTouchSpace {
16
16
  protected _initialResize: boolean;
17
17
  constructor(elem: string | Element, callback?: Function);
18
18
  protected _createElement(elem: string, id: any): HTMLElement;
19
- setup(opt: {
20
- bgcolor?: string;
21
- resize?: boolean;
22
- retina?: boolean;
23
- offscreen?: boolean;
24
- }): this;
19
+ setup(opt: CanvasSpaceOptions): this;
25
20
  set autoResize(auto: boolean);
26
21
  get autoResize(): boolean;
27
22
  resize(b: Bound, evt?: Event): this;
@@ -41,13 +36,14 @@ export class CanvasSpace extends MultiTouchSpace {
41
36
  clearOffscreen(bg?: string): this;
42
37
  protected playItems(time: number): void;
43
38
  dispose(): this;
39
+ recorder(downloadOrCallback: boolean | ((blobURL: string) => {}), filetype?: string, bitrate?: number): MediaRecorder;
44
40
  }
45
41
  export class CanvasForm extends VisualForm {
46
42
  protected _space: CanvasSpace;
47
43
  protected _ctx: CanvasRenderingContext2D;
48
44
  protected _estimateTextWidth: (string: any) => number;
49
45
  protected _style: DefaultFormStyle;
50
- constructor(space: CanvasSpace);
46
+ constructor(space: CanvasSpace | CanvasRenderingContext2D);
51
47
  get space(): CanvasSpace;
52
48
  get ctx(): PtsCanvasRenderingContext2D;
53
49
  useOffscreen(off?: boolean, clear?: boolean | string): this;
@@ -66,7 +62,6 @@ export class CanvasForm extends VisualForm {
66
62
  protected _textAlign(box: PtLikeIterable, vertical: string, offset?: PtLike, center?: Pt): Pt;
67
63
  reset(): this;
68
64
  protected _paint(): void;
69
- static paint(ctx: CanvasRenderingContext2D, fn: (ctx: any) => {}, fill?: string, stroke?: string, strokeWidth?: number): void;
70
65
  static point(ctx: CanvasRenderingContext2D, p: PtLike, radius?: number, shape?: string): void;
71
66
  point(p: PtLike, radius?: number, shape?: string): this;
72
67
  static circle(ctx: CanvasRenderingContext2D, pt: PtLike, radius?: number): void;
@@ -340,7 +335,7 @@ export class Img {
340
335
  protected _scale: number;
341
336
  protected _loaded: boolean;
342
337
  protected _editable: boolean;
343
- constructor(editable?: boolean, pixelScale?: number);
338
+ constructor(editable?: boolean, pixelScale?: number, crossOrigin?: boolean);
344
339
  static load(src: string, editable?: boolean, pixelScale?: number, ready?: (img: any) => {}): Img;
345
340
  load(src: string): Promise<Img>;
346
341
  protected _drawToScale(canvasScale: number | PtLike, img: CanvasImageSource): void;
@@ -351,8 +346,11 @@ export class Img {
351
346
  resize(sizeOrScale: PtLike, asScale?: boolean): this;
352
347
  crop(box: Bound): ImageData;
353
348
  filter(css: string): this;
354
- static fromBlob(blob: Blob, editable?: boolean): Promise<Img>;
349
+ cleanup(): void;
350
+ static fromBlob(blob: Blob, editable?: boolean, pixelScale?: number): Promise<Img>;
351
+ static imageDataToBlob(data: ImageData): Promise<Blob>;
355
352
  toBase64(): string;
353
+ toBlob(): Promise<Blob>;
356
354
  get current(): CanvasImageSource;
357
355
  get image(): HTMLImageElement;
358
356
  get canvas(): HTMLCanvasElement;
@@ -407,6 +405,7 @@ export class Mat {
407
405
  }
408
406
 
409
407
  export class Num {
408
+ static generator: any;
410
409
  static equals(a: number, b: number, threshold?: number): boolean;
411
410
  static lerp(a: number, b: number, t: number): number;
412
411
  static clamp(val: number, min: number, max: number): number;
@@ -419,6 +418,8 @@ export class Num {
419
418
  static average(pts: PtLikeIterable): Pt;
420
419
  static cycle(t: number, method?: (t: number) => number): number;
421
420
  static mapToRange(n: number, currA: number, currB: number, targetA: number, targetB: number): number;
421
+ static seed(seed: string): void;
422
+ static random(): number;
422
423
  }
423
424
  export class Geom {
424
425
  static boundAngle(angle: number): number;
@@ -959,9 +960,9 @@ export abstract class MultiTouchSpace extends Space {
959
960
  protected _canvas: EventTarget;
960
961
  get pointer(): Pt;
961
962
  bindCanvas(evt: string, callback: EventListener, options?: any): void;
962
- unbindCanvas(evt: string, callback: EventListener): void;
963
+ unbindCanvas(evt: string, callback: EventListener, options?: any): void;
963
964
  bindMouse(_bind?: boolean): this;
964
- bindTouch(_bind?: boolean): this;
965
+ bindTouch(bind?: boolean, passive?: boolean): this;
965
966
  touchesToPoints(evt: TouchEvent, which?: TouchPointsKey): Pt[];
966
967
  protected _mouseAction(type: string, evt: MouseEvent | TouchEvent): void;
967
968
  protected _mouseDown(evt: MouseEvent | TouchEvent): boolean;
@@ -1078,6 +1079,13 @@ export interface PtsCanvasRenderingContext2D extends CanvasRenderingContext2D {
1078
1079
  oBackingStorePixelRatio?: number;
1079
1080
  backingStorePixelRatio?: number;
1080
1081
  }
1082
+ export type CanvasSpaceOptions = {
1083
+ bgcolor?: string;
1084
+ resize?: boolean;
1085
+ retina?: boolean;
1086
+ offscreen?: boolean;
1087
+ pixelDensity?: number;
1088
+ };
1081
1089
  export type ColorType = "rgb" | "hsl" | "hsb" | "lab" | "lch" | "luv" | "xyz";
1082
1090
  export type DelaunayShape = {
1083
1091
  i: number;
@@ -1145,6 +1153,10 @@ export class Typography {
1145
1153
  static fontSizeToThreshold(threshold: number, direction?: number): (a: number, b: number) => number;
1146
1154
  }
1147
1155
 
1156
+ export default function (seed: string): {
1157
+ random(): number;
1158
+ };
1159
+
1148
1160
  export const UIShape: {
1149
1161
  rectangle: string;
1150
1162
  circle: string;