modern-canvas 0.7.0 → 0.7.2

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.cjs CHANGED
@@ -1081,7 +1081,7 @@ class Vector extends modernIdoc.EventEmitter {
1081
1081
  get length() {
1082
1082
  return this.dim;
1083
1083
  }
1084
- _operate(operator, target, output) {
1084
+ operate(operator, target, output) {
1085
1085
  const { dim: length, _array: array } = this;
1086
1086
  let targetArray;
1087
1087
  if (typeof target === "number") {
@@ -1167,29 +1167,41 @@ class Vector extends modernIdoc.EventEmitter {
1167
1167
  }
1168
1168
  return outputObject?.set(outputArray) ?? outputArray;
1169
1169
  }
1170
- add(value, output) {
1171
- return this._operate("+", value, output);
1170
+ add(value, ...args) {
1171
+ if (args.length && typeof value === "number") {
1172
+ value = [value, ...args];
1173
+ }
1174
+ return this.operate("+", value);
1172
1175
  }
1173
- sub(value, output) {
1174
- return this._operate("-", value, output);
1176
+ sub(value, ...args) {
1177
+ if (args.length && typeof value === "number") {
1178
+ value = [value, ...args];
1179
+ }
1180
+ return this.operate("-", value);
1175
1181
  }
1176
- multiply(value, output) {
1177
- return this._operate("*", value, output);
1182
+ multiply(value, ...args) {
1183
+ if (args.length && typeof value === "number") {
1184
+ value = [value, ...args];
1185
+ }
1186
+ return this.operate("*", value);
1178
1187
  }
1179
- divide(value, output) {
1180
- return this._operate("/", value, output);
1188
+ divide(value, ...args) {
1189
+ if (args.length && typeof value === "number") {
1190
+ value = [value, ...args];
1191
+ }
1192
+ return this.operate("/", value);
1181
1193
  }
1182
1194
  rotate(angle) {
1183
- return this._operate("rot", angle);
1195
+ return this.operate("rot", angle);
1184
1196
  }
1185
1197
  set(value, ...args) {
1186
1198
  if (args.length && typeof value === "number") {
1187
1199
  value = [value, ...args];
1188
1200
  }
1189
- return this._operate("=", value);
1201
+ return this.operate("=", value);
1190
1202
  }
1191
1203
  equals(value) {
1192
- return this._operate("==", value);
1204
+ return this.operate("==", value);
1193
1205
  }
1194
1206
  copy(value) {
1195
1207
  return this.set(value);
@@ -1201,11 +1213,14 @@ class Vector extends modernIdoc.EventEmitter {
1201
1213
  }
1202
1214
  _onUpdate(_array) {
1203
1215
  }
1216
+ toName() {
1217
+ return `Vector${this.dim}`;
1218
+ }
1204
1219
  toArray() {
1205
1220
  return this._array.slice();
1206
1221
  }
1207
- toName() {
1208
- return `Vector${this.dim}`;
1222
+ toJSON() {
1223
+ return this.toArray();
1209
1224
  }
1210
1225
  }
1211
1226
 
@@ -1225,7 +1240,7 @@ class Matrix extends modernIdoc.EventEmitter {
1225
1240
  get length() {
1226
1241
  return this.cols * this.rows;
1227
1242
  }
1228
- _operate(operator, target, output) {
1243
+ operate(operator, target, output) {
1229
1244
  const { cols, rows, length, _array: array } = this;
1230
1245
  let targetArray;
1231
1246
  if (typeof target === "number") {
@@ -1312,7 +1327,7 @@ class Matrix extends modernIdoc.EventEmitter {
1312
1327
  return this.set(array);
1313
1328
  }
1314
1329
  set(value) {
1315
- return this._operate("=", value);
1330
+ return this.operate("=", value);
1316
1331
  }
1317
1332
  copy(value) {
1318
1333
  return this.set(value);
@@ -1323,7 +1338,7 @@ class Matrix extends modernIdoc.EventEmitter {
1323
1338
  return cloned;
1324
1339
  }
1325
1340
  multiply(value, output) {
1326
- return this._operate("*", value, output);
1341
+ return this.operate("*", value, output);
1327
1342
  }
1328
1343
  _onUpdate(_array) {
1329
1344
  this.dirtyId++;
@@ -1345,7 +1360,7 @@ class Matrix extends modernIdoc.EventEmitter {
1345
1360
  return `Matrix${this.rows}(${this.rows}x${this.cols})`;
1346
1361
  }
1347
1362
  toJSON() {
1348
- return this._array;
1363
+ return this._array.slice();
1349
1364
  }
1350
1365
  }
1351
1366
 
@@ -1357,7 +1372,7 @@ class Matrix4 extends Matrix {
1357
1372
 
1358
1373
  const DEG_TO_RAD = PI / 180;
1359
1374
  const RAD_TO_DEG = 180 / PI;
1360
- function clamp(min, val, max) {
1375
+ function clamp(val, min, max) {
1361
1376
  return Math.max(min, Math.min(val, max));
1362
1377
  }
1363
1378
  function lerp(a, b, weight) {
@@ -1386,7 +1401,7 @@ const curves = {
1386
1401
  class Vector4 extends Vector {
1387
1402
  constructor(x = 0, y = 0, z = 0, m = 0) {
1388
1403
  super(4);
1389
- this.set([x, y, z, m]);
1404
+ this.set(x, y, z, m);
1390
1405
  }
1391
1406
  }
1392
1407
 
@@ -1527,7 +1542,7 @@ class ColorMatrix extends Matrix {
1527
1542
  ]);
1528
1543
  }
1529
1544
  sepia(amount = 1) {
1530
- const v = clamp(0, amount, 1);
1545
+ const v = clamp(amount, 0, 1);
1531
1546
  return this.multiply([
1532
1547
  lerp(1, 0.393, v),
1533
1548
  lerp(0, 0.7689999, v),
@@ -1576,7 +1591,7 @@ class ColorMatrix extends Matrix {
1576
1591
  ]);
1577
1592
  }
1578
1593
  grayscale(amount = 1) {
1579
- const v = clamp(0, amount, 1);
1594
+ const v = clamp(amount, 0, 1);
1580
1595
  const r = lerp(1, 0.3, v);
1581
1596
  const rr = lerp(0, 0.3, v);
1582
1597
  const g = lerp(1, 0.59, v);
@@ -1839,7 +1854,7 @@ class Vector2 extends Vector {
1839
1854
  return this;
1840
1855
  }
1841
1856
  static lerp(a, b, t) {
1842
- return new Vector2(b).clone().sub(new Vector2(a)).multiply(t).add(new Vector2(a));
1857
+ return new Vector2(b).clone().sub(a).multiply(t).add(a);
1843
1858
  }
1844
1859
  }
1845
1860
 
@@ -2087,13 +2102,13 @@ class Vector3 extends Vector {
2087
2102
  }
2088
2103
  }
2089
2104
 
2090
- var __defProp$Q = Object.defineProperty;
2105
+ var __defProp$P = Object.defineProperty;
2091
2106
  var __decorateClass$Z = (decorators, target, key, kind) => {
2092
2107
  var result = void 0 ;
2093
2108
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
2094
2109
  if (decorator = decorators[i])
2095
2110
  result = (decorator(target, key, result) ) || result;
2096
- if (result) __defProp$Q(target, key, result);
2111
+ if (result) __defProp$P(target, key, result);
2097
2112
  return result;
2098
2113
  };
2099
2114
  class MainLoop extends CoreObject {
@@ -4331,13 +4346,13 @@ class Geometry extends Resource {
4331
4346
  }
4332
4347
  }
4333
4348
 
4334
- var __defProp$P = Object.defineProperty;
4349
+ var __defProp$O = Object.defineProperty;
4335
4350
  var __decorateClass$Y = (decorators, target, key, kind) => {
4336
4351
  var result = void 0 ;
4337
4352
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
4338
4353
  if (decorator = decorators[i])
4339
4354
  result = (decorator(target, key, result) ) || result;
4340
- if (result) __defProp$P(target, key, result);
4355
+ if (result) __defProp$O(target, key, result);
4341
4356
  return result;
4342
4357
  };
4343
4358
  class IndexBuffer extends Resource {
@@ -4388,13 +4403,13 @@ __decorateClass$Y([
4388
4403
  modernIdoc.property({ protected: true, fallback: false })
4389
4404
  ], IndexBuffer.prototype, "dynamic");
4390
4405
 
4391
- var __defProp$O = Object.defineProperty;
4406
+ var __defProp$N = Object.defineProperty;
4392
4407
  var __decorateClass$X = (decorators, target, key, kind) => {
4393
4408
  var result = void 0 ;
4394
4409
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
4395
4410
  if (decorator = decorators[i])
4396
4411
  result = (decorator(target, key, result) ) || result;
4397
- if (result) __defProp$O(target, key, result);
4412
+ if (result) __defProp$N(target, key, result);
4398
4413
  return result;
4399
4414
  };
4400
4415
  class VertexBuffer extends Resource {
@@ -4445,13 +4460,13 @@ __decorateClass$X([
4445
4460
  modernIdoc.property({ protected: true, fallback: false })
4446
4461
  ], VertexBuffer.prototype, "dynamic");
4447
4462
 
4448
- var __defProp$N = Object.defineProperty;
4463
+ var __defProp$M = Object.defineProperty;
4449
4464
  var __decorateClass$W = (decorators, target, key, kind) => {
4450
4465
  var result = void 0 ;
4451
4466
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
4452
4467
  if (decorator = decorators[i])
4453
4468
  result = (decorator(target, key, result) ) || result;
4454
- if (result) __defProp$N(target, key, result);
4469
+ if (result) __defProp$M(target, key, result);
4455
4470
  return result;
4456
4471
  };
4457
4472
  class VertexAttribute extends Resource {
@@ -4747,13 +4762,13 @@ class UvGeometry extends Geometry {
4747
4762
  }
4748
4763
  }
4749
4764
 
4750
- var __defProp$M = Object.defineProperty;
4765
+ var __defProp$L = Object.defineProperty;
4751
4766
  var __decorateClass$V = (decorators, target, key, kind) => {
4752
4767
  var result = void 0 ;
4753
4768
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
4754
4769
  if (decorator = decorators[i])
4755
4770
  result = (decorator(target, key, result) ) || result;
4756
- if (result) __defProp$M(target, key, result);
4771
+ if (result) __defProp$L(target, key, result);
4757
4772
  return result;
4758
4773
  };
4759
4774
  class Texture2D extends Resource {
@@ -4924,13 +4939,13 @@ class AnimatedTexture extends Resource {
4924
4939
  }
4925
4940
  }
4926
4941
 
4927
- var __defProp$L = Object.defineProperty;
4942
+ var __defProp$K = Object.defineProperty;
4928
4943
  var __decorateClass$U = (decorators, target, key, kind) => {
4929
4944
  var result = void 0 ;
4930
4945
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
4931
4946
  if (decorator = decorators[i])
4932
4947
  result = (decorator(target, key, result) ) || result;
4933
- if (result) __defProp$L(target, key, result);
4948
+ if (result) __defProp$K(target, key, result);
4934
4949
  return result;
4935
4950
  };
4936
4951
  class CanvasTexture extends Texture2D {
@@ -5169,13 +5184,13 @@ class PixelsTexture extends Texture2D {
5169
5184
  }
5170
5185
  }
5171
5186
 
5172
- var __defProp$K = Object.defineProperty;
5187
+ var __defProp$J = Object.defineProperty;
5173
5188
  var __decorateClass$T = (decorators, target, key, kind) => {
5174
5189
  var result = void 0 ;
5175
5190
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
5176
5191
  if (decorator = decorators[i])
5177
5192
  result = (decorator(target, key, result) ) || result;
5178
- if (result) __defProp$K(target, key, result);
5193
+ if (result) __defProp$J(target, key, result);
5179
5194
  return result;
5180
5195
  };
5181
5196
  function resolveOptions(options) {
@@ -5652,14 +5667,14 @@ class Children extends Array {
5652
5667
  }
5653
5668
  }
5654
5669
 
5655
- var __defProp$J = Object.defineProperty;
5670
+ var __defProp$I = Object.defineProperty;
5656
5671
  var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
5657
5672
  var __decorateClass$S = (decorators, target, key, kind) => {
5658
5673
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$J(target, key) : target;
5659
5674
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
5660
5675
  if (decorator = decorators[i])
5661
5676
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
5662
- if (kind && result) __defProp$J(target, key, result);
5677
+ if (kind && result) __defProp$I(target, key, result);
5663
5678
  return result;
5664
5679
  };
5665
5680
  const iidMap = {};
@@ -6171,14 +6186,14 @@ exports.Node = __decorateClass$S([
6171
6186
  customNode("Node")
6172
6187
  ], exports.Node);
6173
6188
 
6174
- var __defProp$I = Object.defineProperty;
6189
+ var __defProp$H = Object.defineProperty;
6175
6190
  var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
6176
6191
  var __decorateClass$R = (decorators, target, key, kind) => {
6177
6192
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
6178
6193
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
6179
6194
  if (decorator = decorators[i])
6180
6195
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
6181
- if (kind && result) __defProp$I(target, key, result);
6196
+ if (kind && result) __defProp$H(target, key, result);
6182
6197
  return result;
6183
6198
  };
6184
6199
  exports.TimelineNode = class TimelineNode extends exports.Node {
@@ -6200,7 +6215,7 @@ exports.TimelineNode = class TimelineNode extends exports.Node {
6200
6215
  return this._parent?.startTime ?? 0;
6201
6216
  }
6202
6217
  get currentTime() {
6203
- return clamp(0, this._currentTime, this.computedDuration);
6218
+ return clamp(this._currentTime, 0, this.computedDuration);
6204
6219
  }
6205
6220
  get startTime() {
6206
6221
  return this._startTime;
@@ -6213,7 +6228,7 @@ exports.TimelineNode = class TimelineNode extends exports.Node {
6213
6228
  return this._startTime + this.computedDuration;
6214
6229
  }
6215
6230
  get currentTimeProgress() {
6216
- return this.computedDuration ? clamp(0, this._currentTime / this.computedDuration, 1) : 0;
6231
+ return this.computedDuration ? clamp(this._currentTime / this.computedDuration, 0, 1) : 0;
6217
6232
  }
6218
6233
  isInsideTimeRange() {
6219
6234
  const current = this._currentTime;
@@ -6254,14 +6269,14 @@ exports.TimelineNode = __decorateClass$R([
6254
6269
  customNode("TimelineNode")
6255
6270
  ], exports.TimelineNode);
6256
6271
 
6257
- var __defProp$H = Object.defineProperty;
6272
+ var __defProp$G = Object.defineProperty;
6258
6273
  var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
6259
6274
  var __decorateClass$Q = (decorators, target, key, kind) => {
6260
6275
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
6261
6276
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
6262
6277
  if (decorator = decorators[i])
6263
6278
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
6264
- if (kind && result) __defProp$H(target, key, result);
6279
+ if (kind && result) __defProp$G(target, key, result);
6265
6280
  return result;
6266
6281
  };
6267
6282
  exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
@@ -6335,7 +6350,7 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
6335
6350
  }
6336
6351
  _updateGlobalOpacity() {
6337
6352
  this._parentGlobalOpacity = this.getParent()?.opacity;
6338
- const globalOpacity = clamp(0, this.opacity, 1) * (this._parentGlobalOpacity ?? 1);
6353
+ const globalOpacity = clamp(this.opacity, 0, 1) * (this._parentGlobalOpacity ?? 1);
6339
6354
  if (this._globalOpacity !== globalOpacity) {
6340
6355
  this._globalOpacity = globalOpacity;
6341
6356
  this.requestRepaint();
@@ -6429,14 +6444,14 @@ exports.CanvasItem = __decorateClass$Q([
6429
6444
  customNode("CanvasItem")
6430
6445
  ], exports.CanvasItem);
6431
6446
 
6432
- var __defProp$G = Object.defineProperty;
6447
+ var __defProp$F = Object.defineProperty;
6433
6448
  var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
6434
6449
  var __decorateClass$P = (decorators, target, key, kind) => {
6435
6450
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
6436
6451
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
6437
6452
  if (decorator = decorators[i])
6438
6453
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
6439
- if (kind && result) __defProp$G(target, key, result);
6454
+ if (kind && result) __defProp$F(target, key, result);
6440
6455
  return result;
6441
6456
  };
6442
6457
  exports.Viewport = class Viewport extends exports.Node {
@@ -6593,14 +6608,14 @@ exports.Viewport = __decorateClass$P([
6593
6608
  customNode("Viewport")
6594
6609
  ], exports.Viewport);
6595
6610
 
6596
- var __defProp$F = Object.defineProperty;
6611
+ var __defProp$E = Object.defineProperty;
6597
6612
  var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
6598
6613
  var __decorateClass$O = (decorators, target, key, kind) => {
6599
6614
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
6600
6615
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
6601
6616
  if (decorator = decorators[i])
6602
6617
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
6603
- if (kind && result) __defProp$F(target, key, result);
6618
+ if (kind && result) __defProp$E(target, key, result);
6604
6619
  return result;
6605
6620
  };
6606
6621
  exports.Effect = class Effect extends exports.TimelineNode {
@@ -6884,14 +6899,14 @@ class RenderStack {
6884
6899
  }
6885
6900
  }
6886
6901
 
6887
- var __defProp$E = Object.defineProperty;
6902
+ var __defProp$D = Object.defineProperty;
6888
6903
  var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
6889
6904
  var __decorateClass$N = (decorators, target, key, kind) => {
6890
6905
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
6891
6906
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
6892
6907
  if (decorator = decorators[i])
6893
6908
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
6894
- if (kind && result) __defProp$E(target, key, result);
6909
+ if (kind && result) __defProp$D(target, key, result);
6895
6910
  return result;
6896
6911
  };
6897
6912
  exports.Timeline = class Timeline extends exports.Node {
@@ -6926,7 +6941,7 @@ exports.Timeline = class Timeline extends exports.Node {
6926
6941
  if (this.loop && current > end) {
6927
6942
  current = start + current % end;
6928
6943
  }
6929
- current = clamp(start, current, end);
6944
+ current = clamp(current, start, end);
6930
6945
  this.currentTime = current;
6931
6946
  this.emit("updateCurrentTime", current, delta);
6932
6947
  return this;
@@ -6967,13 +6982,13 @@ exports.Window = __decorateClass$M([
6967
6982
  customNode("Window")
6968
6983
  ], exports.Window);
6969
6984
 
6970
- var __defProp$D = Object.defineProperty;
6985
+ var __defProp$C = Object.defineProperty;
6971
6986
  var __decorateClass$L = (decorators, target, key, kind) => {
6972
6987
  var result = void 0 ;
6973
6988
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
6974
6989
  if (decorator = decorators[i])
6975
6990
  result = (decorator(target, key, result) ) || result;
6976
- if (result) __defProp$D(target, key, result);
6991
+ if (result) __defProp$C(target, key, result);
6977
6992
  return result;
6978
6993
  };
6979
6994
  class SceneTree extends MainLoop {
@@ -7077,14 +7092,14 @@ exports.Transition = __decorateClass$K([
7077
7092
  })
7078
7093
  ], exports.Transition);
7079
7094
 
7080
- var __defProp$C = Object.defineProperty;
7095
+ var __defProp$B = Object.defineProperty;
7081
7096
  var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
7082
7097
  var __decorateClass$J = (decorators, target, key, kind) => {
7083
7098
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
7084
7099
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
7085
7100
  if (decorator = decorators[i])
7086
7101
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
7087
- if (kind && result) __defProp$C(target, key, result);
7102
+ if (kind && result) __defProp$B(target, key, result);
7088
7103
  return result;
7089
7104
  };
7090
7105
  exports.Node2D = class Node2D extends exports.CanvasItem {
@@ -7197,22 +7212,36 @@ exports.Node2D = __decorateClass$J([
7197
7212
  customNode("Node2D")
7198
7213
  ], exports.Node2D);
7199
7214
 
7200
- var __defProp$B = Object.defineProperty;
7201
7215
  var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
7202
7216
  var __decorateClass$I = (decorators, target, key, kind) => {
7203
7217
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
7204
7218
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
7205
7219
  if (decorator = decorators[i])
7206
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
7207
- if (kind && result) __defProp$B(target, key, result);
7220
+ result = (decorator(result)) || result;
7208
7221
  return result;
7209
7222
  };
7210
7223
  exports.Camera2D = class Camera2D extends exports.Node2D {
7211
7224
  zoom = new Vector2(1, 1).on("update", () => this.updateCanvasTransform());
7225
+ maxZoom = new Vector2(6, 6);
7226
+ minZoom = new Vector2(0.1, 0.1);
7212
7227
  constructor(properties, nodes = []) {
7213
7228
  super();
7214
7229
  this.setProperties(properties).append(nodes);
7215
7230
  }
7231
+ addZoom(x, y = x) {
7232
+ this.zoom.set(
7233
+ clamp(this.zoom.x + x, this.minZoom.x, this.maxZoom.x),
7234
+ clamp(this.zoom.y + y, this.minZoom.y, this.maxZoom.y)
7235
+ );
7236
+ return this;
7237
+ }
7238
+ setZoom(x, y = x) {
7239
+ this.zoom.set(
7240
+ clamp(x, this.minZoom.x, this.maxZoom.x),
7241
+ clamp(y, this.minZoom.y, this.maxZoom.y)
7242
+ );
7243
+ return this;
7244
+ }
7216
7245
  _input(event, key) {
7217
7246
  super._input(event, key);
7218
7247
  if (key === "wheel") {
@@ -7221,24 +7250,17 @@ exports.Camera2D = class Camera2D extends exports.Node2D {
7221
7250
  const isTouchPad = e.wheelDeltaY ? Math.abs(Math.abs(e.wheelDeltaY) - Math.abs(3 * e.deltaY)) < 3 : e.deltaMode === 0;
7222
7251
  if (!isTouchPad) {
7223
7252
  e.preventDefault();
7224
- const value = this.zoom.x + e.deltaY * -0.015;
7225
- const zoom = Math.min(this.maxZoom, Math.max(this.minZoom, value));
7226
- const ratio = 1 - zoom / this.zoom.x;
7227
- this.zoom.set([
7228
- zoom,
7229
- zoom
7230
- ]);
7231
- this.position.add([
7253
+ const oldZoom = this.zoom.x;
7254
+ this.addZoom(e.deltaY * -0.015);
7255
+ const ratio = 1 - this.zoom.x / oldZoom;
7256
+ this.position.add(
7232
7257
  (e.screenX - this.position.x) * ratio,
7233
7258
  (e.screenY - this.position.y) * ratio
7234
- ]);
7259
+ );
7235
7260
  }
7236
7261
  } else {
7237
7262
  e.preventDefault();
7238
- this.position.add([
7239
- -e.deltaX,
7240
- -e.deltaY
7241
- ]);
7263
+ this.position.add(-e.deltaX, -e.deltaY);
7242
7264
  }
7243
7265
  }
7244
7266
  }
@@ -7251,16 +7273,14 @@ exports.Camera2D = class Camera2D extends exports.Node2D {
7251
7273
  if (!viewport)
7252
7274
  return;
7253
7275
  viewport.canvasTransform.identity().scale(this.zoom.x, this.zoom.y).translate(this.position.x, this.position.y);
7276
+ this.emit("updateCanvasTransform");
7254
7277
  }
7255
7278
  };
7256
- __decorateClass$I([
7257
- modernIdoc.property({ fallback: 6 })
7258
- ], exports.Camera2D.prototype, "maxZoom", 2);
7259
- __decorateClass$I([
7260
- modernIdoc.property({ fallback: 0.1 })
7261
- ], exports.Camera2D.prototype, "minZoom", 2);
7262
7279
  exports.Camera2D = __decorateClass$I([
7263
- customNode("Camera2D")
7280
+ customNode("Camera2D", {
7281
+ processMode: "disabled",
7282
+ renderMode: "disabled"
7283
+ })
7264
7284
  ], exports.Camera2D);
7265
7285
 
7266
7286
  const defaultFilters = {
@@ -9292,6 +9312,14 @@ class BaseElement2DBackground extends BaseElement2DFill {
9292
9312
  modernIdoc.isNone(properties) ? void 0 : modernIdoc.normalizeBackground(properties)
9293
9313
  );
9294
9314
  }
9315
+ _updateProperty(key, value, oldValue, declaration) {
9316
+ super._updateProperty(key, value, oldValue, declaration);
9317
+ switch (key) {
9318
+ case "fillWithShape":
9319
+ this.parent.requestRedraw();
9320
+ break;
9321
+ }
9322
+ }
9295
9323
  }
9296
9324
  __decorateClass$r([
9297
9325
  modernIdoc.property()
@@ -9312,6 +9340,14 @@ class BaseElement2DForeground extends BaseElement2DFill {
9312
9340
  modernIdoc.isNone(properties) ? void 0 : modernIdoc.normalizeForeground(properties)
9313
9341
  );
9314
9342
  }
9343
+ _updateProperty(key, value, oldValue, declaration) {
9344
+ super._updateProperty(key, value, oldValue, declaration);
9345
+ switch (key) {
9346
+ case "fillWithShape":
9347
+ this.parent.requestRedraw();
9348
+ break;
9349
+ }
9350
+ }
9315
9351
  }
9316
9352
  __decorateClass$q([
9317
9353
  modernIdoc.property()
@@ -9919,7 +9955,11 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
9919
9955
  }
9920
9956
  if (this._background.canDraw()) {
9921
9957
  this._tree?.log(this.name, "background drawing");
9922
- this._shape.drawRect();
9958
+ if (this._background.fillWithShape) {
9959
+ this._shape.draw();
9960
+ } else {
9961
+ this._shape.drawRect();
9962
+ }
9923
9963
  this._background.draw();
9924
9964
  }
9925
9965
  if (this._fill.canDraw()) {
@@ -9934,7 +9974,11 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
9934
9974
  }
9935
9975
  if (this._foreground.canDraw()) {
9936
9976
  this._tree?.log(this.name, "foreground drawing");
9937
- this._shape.drawRect();
9977
+ if (this._foreground.fillWithShape) {
9978
+ this._shape.draw();
9979
+ } else {
9980
+ this._shape.drawRect();
9981
+ }
9938
9982
  this._foreground.draw();
9939
9983
  }
9940
9984
  if (this._text.canDraw()) {
@@ -9978,10 +10022,14 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
9978
10022
  case "pointermove":
9979
10023
  case "pointerup": {
9980
10024
  if (this.canPointerEvents()) {
9981
- const { screenX, screenY } = event;
10025
+ let { screenX, screenY } = event;
9982
10026
  if (screenX && screenY) {
9983
- const [x, y] = this.globalTransform.inverse().applyToPoint(screenX, screenY);
9984
- if (this._pointerInput({ x, y }, key)) {
10027
+ const viewport = this.getViewport();
10028
+ if (viewport) {
10029
+ [screenX, screenY] = viewport.canvasTransform.inverse().applyToPoint(screenX, screenY);
10030
+ }
10031
+ [screenX, screenY] = this.globalTransform.inverse().applyToPoint(screenX, screenY);
10032
+ if (this._pointerInput({ x: screenX, y: screenY }, key)) {
9985
10033
  if (!event.target) {
9986
10034
  event.target = this;
9987
10035
  }
@@ -10938,7 +10986,7 @@ exports.Animation = class Animation extends exports.TimelineNode {
10938
10986
  const offset = 1 / targets.length;
10939
10987
  const progress = this.currentTimeProgress;
10940
10988
  targets.forEach((target, i) => {
10941
- const tiem = offset === 1 ? progress : clamp(0, Math.max(0, progress - offset * i) / offset, 1);
10989
+ const tiem = offset === 1 ? progress : clamp(Math.max(0, progress - offset * i) / offset, 0, 1);
10942
10990
  const startProps = this._cachedProps.get(target);
10943
10991
  if (!startProps)
10944
10992
  return;
@@ -11104,13 +11152,13 @@ exports.Animation = class Animation extends exports.TimelineNode {
11104
11152
  }
11105
11153
  };
11106
11154
  __decorateClass$e([
11107
- modernIdoc.property()
11155
+ modernIdoc.property({ fallback: "parent" })
11108
11156
  ], exports.Animation.prototype, "effectMode", 2);
11109
11157
  __decorateClass$e([
11110
- modernIdoc.property()
11158
+ modernIdoc.property({ fallback: false })
11111
11159
  ], exports.Animation.prototype, "loop", 2);
11112
11160
  __decorateClass$e([
11113
- modernIdoc.property()
11161
+ modernIdoc.property({ default: () => [] })
11114
11162
  ], exports.Animation.prototype, "keyframes", 2);
11115
11163
  __decorateClass$e([
11116
11164
  modernIdoc.property()
@@ -12770,7 +12818,7 @@ exports.Scaler = class Scaler extends exports.Node {
12770
12818
  case "scale":
12771
12819
  case "min":
12772
12820
  case "max": {
12773
- this.scale = clamp(this.minScale, this.scale, this.maxScale);
12821
+ this.scale = clamp(this.scale, this.minScale, this.maxScale);
12774
12822
  this._updateTarget();
12775
12823
  break;
12776
12824
  }