microboard-temp 0.5.134 → 0.5.136

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.
Files changed (8) hide show
  1. package/dist/cjs/browser.js +56 -24
  2. package/dist/cjs/index.js +56 -24
  3. package/dist/cjs/node.js +56 -24
  4. package/dist/esm/browser.js +56 -24
  5. package/dist/esm/index.js +56 -24
  6. package/dist/esm/node.js +56 -24
  7. package/dist/types/Camera/Camera.d.ts +3 -1
  8. package/package.json +1 -1
package/dist/cjs/browser.js CHANGED
@@ -49324,6 +49324,8 @@ class Camera {
49324
49324
  isAnimating = false;
49325
49325
  isTrackingAnimation = false;
49326
49326
  trackingAnimationId = null;
49327
+ trackingTarget = null;
49328
+ lastTrackingTime = null;
49327
49329
  constructor(boardPointer = new Pointer) {
49328
49330
  this.boardPointer = boardPointer;
49329
49331
  this.subject.subscribe((_camera) => {
@@ -49477,43 +49479,73 @@ class Camera {
49477
49479
  this.matrix = new Matrix2(matrix.translateX, matrix.translateY, matrix.scaleX, matrix.scaleY, matrix.shearX, matrix.shearY);
49478
49480
  this.subject.publish(this);
49479
49481
  }
49480
- animateToMatrix(target, duration = 130) {
49482
+ animateToMatrix(target) {
49483
+ if (this.trackingTarget) {
49484
+ this.trackingTarget.translateX = target.translateX;
49485
+ this.trackingTarget.translateY = target.translateY;
49486
+ this.trackingTarget.scaleX = target.scaleX;
49487
+ this.trackingTarget.scaleY = target.scaleY;
49488
+ this.trackingTarget.shearX = target.shearX;
49489
+ this.trackingTarget.shearY = target.shearY;
49490
+ } else {
49491
+ this.trackingTarget = new Matrix2(target.translateX, target.translateY, target.scaleX, target.scaleY, target.shearX, target.shearY);
49492
+ }
49481
49493
  if (this.trackingAnimationId !== null) {
49482
- cancelAnimationFrame(this.trackingAnimationId);
49483
- this.trackingAnimationId = null;
49494
+ return;
49484
49495
  }
49485
- const startTranslateX = this.matrix.translateX;
49486
- const startTranslateY = this.matrix.translateY;
49487
- const startScaleX = this.matrix.scaleX;
49488
- const startScaleY = this.matrix.scaleY;
49489
- const startShearX = this.matrix.shearX;
49490
- const startShearY = this.matrix.shearY;
49491
49496
  this.isTrackingAnimation = true;
49492
- const startTime = performance.now();
49493
- const animate = () => {
49494
- const progress = Math.min((performance.now() - startTime) / duration, 1);
49495
- const t3 = this.easeOutQuad(progress);
49496
- this.matrix.translateX = this.lerp(startTranslateX, target.translateX, t3);
49497
- this.matrix.translateY = this.lerp(startTranslateY, target.translateY, t3);
49498
- this.matrix.scaleX = this.lerp(startScaleX, target.scaleX, t3);
49499
- this.matrix.scaleY = this.lerp(startScaleY, target.scaleY, t3);
49500
- this.matrix.shearX = this.lerp(startShearX, target.shearX, t3);
49501
- this.matrix.shearY = this.lerp(startShearY, target.shearY, t3);
49502
- this.subject.publish(this);
49503
- if (progress < 1) {
49504
- this.trackingAnimationId = safeRequestAnimationFrame(animate) || null;
49505
- } else {
49497
+ this.lastTrackingTime = null;
49498
+ const SMOOTHING = 7;
49499
+ const SNAP_PX = 2;
49500
+ const SNAP_SCALE = 0.0005;
49501
+ const loop = () => {
49502
+ const t3 = this.trackingTarget;
49503
+ if (!t3) {
49504
+ this.trackingAnimationId = null;
49505
+ this.isTrackingAnimation = false;
49506
+ return;
49507
+ }
49508
+ const now = performance.now();
49509
+ const dt = this.lastTrackingTime !== null ? Math.min(now - this.lastTrackingTime, 50) : 16;
49510
+ this.lastTrackingTime = now;
49511
+ const factor = 1 - Math.exp(-SMOOTHING * dt / 1000);
49512
+ const dTx = t3.translateX - this.matrix.translateX;
49513
+ const dTy = t3.translateY - this.matrix.translateY;
49514
+ const dSx = t3.scaleX - this.matrix.scaleX;
49515
+ const dSy = t3.scaleY - this.matrix.scaleY;
49516
+ const dHx = t3.shearX - this.matrix.shearX;
49517
+ const dHy = t3.shearY - this.matrix.shearY;
49518
+ if (Math.abs(dTx) < SNAP_PX && Math.abs(dTy) < SNAP_PX && Math.abs(dSx) < SNAP_SCALE && Math.abs(dSy) < SNAP_SCALE) {
49519
+ this.matrix.translateX = t3.translateX;
49520
+ this.matrix.translateY = t3.translateY;
49521
+ this.matrix.scaleX = t3.scaleX;
49522
+ this.matrix.scaleY = t3.scaleY;
49523
+ this.matrix.shearX = t3.shearX;
49524
+ this.matrix.shearY = t3.shearY;
49525
+ this.subject.publish(this);
49526
+ this.trackingTarget = null;
49506
49527
  this.trackingAnimationId = null;
49507
49528
  this.isTrackingAnimation = false;
49529
+ return;
49508
49530
  }
49531
+ this.matrix.translateX += dTx * factor;
49532
+ this.matrix.translateY += dTy * factor;
49533
+ this.matrix.scaleX += dSx * factor;
49534
+ this.matrix.scaleY += dSy * factor;
49535
+ this.matrix.shearX += dHx * factor;
49536
+ this.matrix.shearY += dHy * factor;
49537
+ this.subject.publish(this);
49538
+ this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
49509
49539
  };
49510
- this.trackingAnimationId = safeRequestAnimationFrame(animate) || null;
49540
+ this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
49511
49541
  }
49512
49542
  cancelTrackingAnimation() {
49513
49543
  if (this.trackingAnimationId !== null) {
49514
49544
  cancelAnimationFrame(this.trackingAnimationId);
49515
49545
  this.trackingAnimationId = null;
49516
49546
  }
49547
+ this.trackingTarget = null;
49548
+ this.lastTrackingTime = null;
49517
49549
  this.isTrackingAnimation = false;
49518
49550
  }
49519
49551
  useSavedSnapshot(optionalMatrix) {
package/dist/cjs/index.js CHANGED
@@ -49324,6 +49324,8 @@ class Camera {
49324
49324
  isAnimating = false;
49325
49325
  isTrackingAnimation = false;
49326
49326
  trackingAnimationId = null;
49327
+ trackingTarget = null;
49328
+ lastTrackingTime = null;
49327
49329
  constructor(boardPointer = new Pointer) {
49328
49330
  this.boardPointer = boardPointer;
49329
49331
  this.subject.subscribe((_camera) => {
@@ -49477,43 +49479,73 @@ class Camera {
49477
49479
  this.matrix = new Matrix2(matrix.translateX, matrix.translateY, matrix.scaleX, matrix.scaleY, matrix.shearX, matrix.shearY);
49478
49480
  this.subject.publish(this);
49479
49481
  }
49480
- animateToMatrix(target, duration = 130) {
49482
+ animateToMatrix(target) {
49483
+ if (this.trackingTarget) {
49484
+ this.trackingTarget.translateX = target.translateX;
49485
+ this.trackingTarget.translateY = target.translateY;
49486
+ this.trackingTarget.scaleX = target.scaleX;
49487
+ this.trackingTarget.scaleY = target.scaleY;
49488
+ this.trackingTarget.shearX = target.shearX;
49489
+ this.trackingTarget.shearY = target.shearY;
49490
+ } else {
49491
+ this.trackingTarget = new Matrix2(target.translateX, target.translateY, target.scaleX, target.scaleY, target.shearX, target.shearY);
49492
+ }
49481
49493
  if (this.trackingAnimationId !== null) {
49482
- cancelAnimationFrame(this.trackingAnimationId);
49483
- this.trackingAnimationId = null;
49494
+ return;
49484
49495
  }
49485
- const startTranslateX = this.matrix.translateX;
49486
- const startTranslateY = this.matrix.translateY;
49487
- const startScaleX = this.matrix.scaleX;
49488
- const startScaleY = this.matrix.scaleY;
49489
- const startShearX = this.matrix.shearX;
49490
- const startShearY = this.matrix.shearY;
49491
49496
  this.isTrackingAnimation = true;
49492
- const startTime = performance.now();
49493
- const animate = () => {
49494
- const progress = Math.min((performance.now() - startTime) / duration, 1);
49495
- const t3 = this.easeOutQuad(progress);
49496
- this.matrix.translateX = this.lerp(startTranslateX, target.translateX, t3);
49497
- this.matrix.translateY = this.lerp(startTranslateY, target.translateY, t3);
49498
- this.matrix.scaleX = this.lerp(startScaleX, target.scaleX, t3);
49499
- this.matrix.scaleY = this.lerp(startScaleY, target.scaleY, t3);
49500
- this.matrix.shearX = this.lerp(startShearX, target.shearX, t3);
49501
- this.matrix.shearY = this.lerp(startShearY, target.shearY, t3);
49502
- this.subject.publish(this);
49503
- if (progress < 1) {
49504
- this.trackingAnimationId = safeRequestAnimationFrame(animate) || null;
49505
- } else {
49497
+ this.lastTrackingTime = null;
49498
+ const SMOOTHING = 7;
49499
+ const SNAP_PX = 2;
49500
+ const SNAP_SCALE = 0.0005;
49501
+ const loop = () => {
49502
+ const t3 = this.trackingTarget;
49503
+ if (!t3) {
49504
+ this.trackingAnimationId = null;
49505
+ this.isTrackingAnimation = false;
49506
+ return;
49507
+ }
49508
+ const now = performance.now();
49509
+ const dt = this.lastTrackingTime !== null ? Math.min(now - this.lastTrackingTime, 50) : 16;
49510
+ this.lastTrackingTime = now;
49511
+ const factor = 1 - Math.exp(-SMOOTHING * dt / 1000);
49512
+ const dTx = t3.translateX - this.matrix.translateX;
49513
+ const dTy = t3.translateY - this.matrix.translateY;
49514
+ const dSx = t3.scaleX - this.matrix.scaleX;
49515
+ const dSy = t3.scaleY - this.matrix.scaleY;
49516
+ const dHx = t3.shearX - this.matrix.shearX;
49517
+ const dHy = t3.shearY - this.matrix.shearY;
49518
+ if (Math.abs(dTx) < SNAP_PX && Math.abs(dTy) < SNAP_PX && Math.abs(dSx) < SNAP_SCALE && Math.abs(dSy) < SNAP_SCALE) {
49519
+ this.matrix.translateX = t3.translateX;
49520
+ this.matrix.translateY = t3.translateY;
49521
+ this.matrix.scaleX = t3.scaleX;
49522
+ this.matrix.scaleY = t3.scaleY;
49523
+ this.matrix.shearX = t3.shearX;
49524
+ this.matrix.shearY = t3.shearY;
49525
+ this.subject.publish(this);
49526
+ this.trackingTarget = null;
49506
49527
  this.trackingAnimationId = null;
49507
49528
  this.isTrackingAnimation = false;
49529
+ return;
49508
49530
  }
49531
+ this.matrix.translateX += dTx * factor;
49532
+ this.matrix.translateY += dTy * factor;
49533
+ this.matrix.scaleX += dSx * factor;
49534
+ this.matrix.scaleY += dSy * factor;
49535
+ this.matrix.shearX += dHx * factor;
49536
+ this.matrix.shearY += dHy * factor;
49537
+ this.subject.publish(this);
49538
+ this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
49509
49539
  };
49510
- this.trackingAnimationId = safeRequestAnimationFrame(animate) || null;
49540
+ this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
49511
49541
  }
49512
49542
  cancelTrackingAnimation() {
49513
49543
  if (this.trackingAnimationId !== null) {
49514
49544
  cancelAnimationFrame(this.trackingAnimationId);
49515
49545
  this.trackingAnimationId = null;
49516
49546
  }
49547
+ this.trackingTarget = null;
49548
+ this.lastTrackingTime = null;
49517
49549
  this.isTrackingAnimation = false;
49518
49550
  }
49519
49551
  useSavedSnapshot(optionalMatrix) {
package/dist/cjs/node.js CHANGED
@@ -51797,6 +51797,8 @@ class Camera {
51797
51797
  isAnimating = false;
51798
51798
  isTrackingAnimation = false;
51799
51799
  trackingAnimationId = null;
51800
+ trackingTarget = null;
51801
+ lastTrackingTime = null;
51800
51802
  constructor(boardPointer = new Pointer) {
51801
51803
  this.boardPointer = boardPointer;
51802
51804
  this.subject.subscribe((_camera) => {
@@ -51950,43 +51952,73 @@ class Camera {
51950
51952
  this.matrix = new Matrix2(matrix.translateX, matrix.translateY, matrix.scaleX, matrix.scaleY, matrix.shearX, matrix.shearY);
51951
51953
  this.subject.publish(this);
51952
51954
  }
51953
- animateToMatrix(target, duration = 130) {
51955
+ animateToMatrix(target) {
51956
+ if (this.trackingTarget) {
51957
+ this.trackingTarget.translateX = target.translateX;
51958
+ this.trackingTarget.translateY = target.translateY;
51959
+ this.trackingTarget.scaleX = target.scaleX;
51960
+ this.trackingTarget.scaleY = target.scaleY;
51961
+ this.trackingTarget.shearX = target.shearX;
51962
+ this.trackingTarget.shearY = target.shearY;
51963
+ } else {
51964
+ this.trackingTarget = new Matrix2(target.translateX, target.translateY, target.scaleX, target.scaleY, target.shearX, target.shearY);
51965
+ }
51954
51966
  if (this.trackingAnimationId !== null) {
51955
- cancelAnimationFrame(this.trackingAnimationId);
51956
- this.trackingAnimationId = null;
51967
+ return;
51957
51968
  }
51958
- const startTranslateX = this.matrix.translateX;
51959
- const startTranslateY = this.matrix.translateY;
51960
- const startScaleX = this.matrix.scaleX;
51961
- const startScaleY = this.matrix.scaleY;
51962
- const startShearX = this.matrix.shearX;
51963
- const startShearY = this.matrix.shearY;
51964
51969
  this.isTrackingAnimation = true;
51965
- const startTime = performance.now();
51966
- const animate = () => {
51967
- const progress = Math.min((performance.now() - startTime) / duration, 1);
51968
- const t3 = this.easeOutQuad(progress);
51969
- this.matrix.translateX = this.lerp(startTranslateX, target.translateX, t3);
51970
- this.matrix.translateY = this.lerp(startTranslateY, target.translateY, t3);
51971
- this.matrix.scaleX = this.lerp(startScaleX, target.scaleX, t3);
51972
- this.matrix.scaleY = this.lerp(startScaleY, target.scaleY, t3);
51973
- this.matrix.shearX = this.lerp(startShearX, target.shearX, t3);
51974
- this.matrix.shearY = this.lerp(startShearY, target.shearY, t3);
51975
- this.subject.publish(this);
51976
- if (progress < 1) {
51977
- this.trackingAnimationId = safeRequestAnimationFrame(animate) || null;
51978
- } else {
51970
+ this.lastTrackingTime = null;
51971
+ const SMOOTHING = 7;
51972
+ const SNAP_PX = 2;
51973
+ const SNAP_SCALE = 0.0005;
51974
+ const loop = () => {
51975
+ const t3 = this.trackingTarget;
51976
+ if (!t3) {
51977
+ this.trackingAnimationId = null;
51978
+ this.isTrackingAnimation = false;
51979
+ return;
51980
+ }
51981
+ const now = performance.now();
51982
+ const dt = this.lastTrackingTime !== null ? Math.min(now - this.lastTrackingTime, 50) : 16;
51983
+ this.lastTrackingTime = now;
51984
+ const factor = 1 - Math.exp(-SMOOTHING * dt / 1000);
51985
+ const dTx = t3.translateX - this.matrix.translateX;
51986
+ const dTy = t3.translateY - this.matrix.translateY;
51987
+ const dSx = t3.scaleX - this.matrix.scaleX;
51988
+ const dSy = t3.scaleY - this.matrix.scaleY;
51989
+ const dHx = t3.shearX - this.matrix.shearX;
51990
+ const dHy = t3.shearY - this.matrix.shearY;
51991
+ if (Math.abs(dTx) < SNAP_PX && Math.abs(dTy) < SNAP_PX && Math.abs(dSx) < SNAP_SCALE && Math.abs(dSy) < SNAP_SCALE) {
51992
+ this.matrix.translateX = t3.translateX;
51993
+ this.matrix.translateY = t3.translateY;
51994
+ this.matrix.scaleX = t3.scaleX;
51995
+ this.matrix.scaleY = t3.scaleY;
51996
+ this.matrix.shearX = t3.shearX;
51997
+ this.matrix.shearY = t3.shearY;
51998
+ this.subject.publish(this);
51999
+ this.trackingTarget = null;
51979
52000
  this.trackingAnimationId = null;
51980
52001
  this.isTrackingAnimation = false;
52002
+ return;
51981
52003
  }
52004
+ this.matrix.translateX += dTx * factor;
52005
+ this.matrix.translateY += dTy * factor;
52006
+ this.matrix.scaleX += dSx * factor;
52007
+ this.matrix.scaleY += dSy * factor;
52008
+ this.matrix.shearX += dHx * factor;
52009
+ this.matrix.shearY += dHy * factor;
52010
+ this.subject.publish(this);
52011
+ this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
51982
52012
  };
51983
- this.trackingAnimationId = safeRequestAnimationFrame(animate) || null;
52013
+ this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
51984
52014
  }
51985
52015
  cancelTrackingAnimation() {
51986
52016
  if (this.trackingAnimationId !== null) {
51987
52017
  cancelAnimationFrame(this.trackingAnimationId);
51988
52018
  this.trackingAnimationId = null;
51989
52019
  }
52020
+ this.trackingTarget = null;
52021
+ this.lastTrackingTime = null;
51990
52022
  this.isTrackingAnimation = false;
51991
52023
  }
51992
52024
  useSavedSnapshot(optionalMatrix) {
package/dist/esm/browser.js CHANGED
@@ -49167,6 +49167,8 @@ class Camera {
49167
49167
  isAnimating = false;
49168
49168
  isTrackingAnimation = false;
49169
49169
  trackingAnimationId = null;
49170
+ trackingTarget = null;
49171
+ lastTrackingTime = null;
49170
49172
  constructor(boardPointer = new Pointer) {
49171
49173
  this.boardPointer = boardPointer;
49172
49174
  this.subject.subscribe((_camera) => {
@@ -49320,43 +49322,73 @@ class Camera {
49320
49322
  this.matrix = new Matrix2(matrix.translateX, matrix.translateY, matrix.scaleX, matrix.scaleY, matrix.shearX, matrix.shearY);
49321
49323
  this.subject.publish(this);
49322
49324
  }
49323
- animateToMatrix(target, duration = 130) {
49325
+ animateToMatrix(target) {
49326
+ if (this.trackingTarget) {
49327
+ this.trackingTarget.translateX = target.translateX;
49328
+ this.trackingTarget.translateY = target.translateY;
49329
+ this.trackingTarget.scaleX = target.scaleX;
49330
+ this.trackingTarget.scaleY = target.scaleY;
49331
+ this.trackingTarget.shearX = target.shearX;
49332
+ this.trackingTarget.shearY = target.shearY;
49333
+ } else {
49334
+ this.trackingTarget = new Matrix2(target.translateX, target.translateY, target.scaleX, target.scaleY, target.shearX, target.shearY);
49335
+ }
49324
49336
  if (this.trackingAnimationId !== null) {
49325
- cancelAnimationFrame(this.trackingAnimationId);
49326
- this.trackingAnimationId = null;
49337
+ return;
49327
49338
  }
49328
- const startTranslateX = this.matrix.translateX;
49329
- const startTranslateY = this.matrix.translateY;
49330
- const startScaleX = this.matrix.scaleX;
49331
- const startScaleY = this.matrix.scaleY;
49332
- const startShearX = this.matrix.shearX;
49333
- const startShearY = this.matrix.shearY;
49334
49339
  this.isTrackingAnimation = true;
49335
- const startTime = performance.now();
49336
- const animate = () => {
49337
- const progress = Math.min((performance.now() - startTime) / duration, 1);
49338
- const t3 = this.easeOutQuad(progress);
49339
- this.matrix.translateX = this.lerp(startTranslateX, target.translateX, t3);
49340
- this.matrix.translateY = this.lerp(startTranslateY, target.translateY, t3);
49341
- this.matrix.scaleX = this.lerp(startScaleX, target.scaleX, t3);
49342
- this.matrix.scaleY = this.lerp(startScaleY, target.scaleY, t3);
49343
- this.matrix.shearX = this.lerp(startShearX, target.shearX, t3);
49344
- this.matrix.shearY = this.lerp(startShearY, target.shearY, t3);
49345
- this.subject.publish(this);
49346
- if (progress < 1) {
49347
- this.trackingAnimationId = safeRequestAnimationFrame(animate) || null;
49348
- } else {
49340
+ this.lastTrackingTime = null;
49341
+ const SMOOTHING = 7;
49342
+ const SNAP_PX = 2;
49343
+ const SNAP_SCALE = 0.0005;
49344
+ const loop = () => {
49345
+ const t3 = this.trackingTarget;
49346
+ if (!t3) {
49347
+ this.trackingAnimationId = null;
49348
+ this.isTrackingAnimation = false;
49349
+ return;
49350
+ }
49351
+ const now = performance.now();
49352
+ const dt = this.lastTrackingTime !== null ? Math.min(now - this.lastTrackingTime, 50) : 16;
49353
+ this.lastTrackingTime = now;
49354
+ const factor = 1 - Math.exp(-SMOOTHING * dt / 1000);
49355
+ const dTx = t3.translateX - this.matrix.translateX;
49356
+ const dTy = t3.translateY - this.matrix.translateY;
49357
+ const dSx = t3.scaleX - this.matrix.scaleX;
49358
+ const dSy = t3.scaleY - this.matrix.scaleY;
49359
+ const dHx = t3.shearX - this.matrix.shearX;
49360
+ const dHy = t3.shearY - this.matrix.shearY;
49361
+ if (Math.abs(dTx) < SNAP_PX && Math.abs(dTy) < SNAP_PX && Math.abs(dSx) < SNAP_SCALE && Math.abs(dSy) < SNAP_SCALE) {
49362
+ this.matrix.translateX = t3.translateX;
49363
+ this.matrix.translateY = t3.translateY;
49364
+ this.matrix.scaleX = t3.scaleX;
49365
+ this.matrix.scaleY = t3.scaleY;
49366
+ this.matrix.shearX = t3.shearX;
49367
+ this.matrix.shearY = t3.shearY;
49368
+ this.subject.publish(this);
49369
+ this.trackingTarget = null;
49349
49370
  this.trackingAnimationId = null;
49350
49371
  this.isTrackingAnimation = false;
49372
+ return;
49351
49373
  }
49374
+ this.matrix.translateX += dTx * factor;
49375
+ this.matrix.translateY += dTy * factor;
49376
+ this.matrix.scaleX += dSx * factor;
49377
+ this.matrix.scaleY += dSy * factor;
49378
+ this.matrix.shearX += dHx * factor;
49379
+ this.matrix.shearY += dHy * factor;
49380
+ this.subject.publish(this);
49381
+ this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
49352
49382
  };
49353
- this.trackingAnimationId = safeRequestAnimationFrame(animate) || null;
49383
+ this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
49354
49384
  }
49355
49385
  cancelTrackingAnimation() {
49356
49386
  if (this.trackingAnimationId !== null) {
49357
49387
  cancelAnimationFrame(this.trackingAnimationId);
49358
49388
  this.trackingAnimationId = null;
49359
49389
  }
49390
+ this.trackingTarget = null;
49391
+ this.lastTrackingTime = null;
49360
49392
  this.isTrackingAnimation = false;
49361
49393
  }
49362
49394
  useSavedSnapshot(optionalMatrix) {
package/dist/esm/index.js CHANGED
@@ -49160,6 +49160,8 @@ class Camera {
49160
49160
  isAnimating = false;
49161
49161
  isTrackingAnimation = false;
49162
49162
  trackingAnimationId = null;
49163
+ trackingTarget = null;
49164
+ lastTrackingTime = null;
49163
49165
  constructor(boardPointer = new Pointer) {
49164
49166
  this.boardPointer = boardPointer;
49165
49167
  this.subject.subscribe((_camera) => {
@@ -49313,43 +49315,73 @@ class Camera {
49313
49315
  this.matrix = new Matrix2(matrix.translateX, matrix.translateY, matrix.scaleX, matrix.scaleY, matrix.shearX, matrix.shearY);
49314
49316
  this.subject.publish(this);
49315
49317
  }
49316
- animateToMatrix(target, duration = 130) {
49318
+ animateToMatrix(target) {
49319
+ if (this.trackingTarget) {
49320
+ this.trackingTarget.translateX = target.translateX;
49321
+ this.trackingTarget.translateY = target.translateY;
49322
+ this.trackingTarget.scaleX = target.scaleX;
49323
+ this.trackingTarget.scaleY = target.scaleY;
49324
+ this.trackingTarget.shearX = target.shearX;
49325
+ this.trackingTarget.shearY = target.shearY;
49326
+ } else {
49327
+ this.trackingTarget = new Matrix2(target.translateX, target.translateY, target.scaleX, target.scaleY, target.shearX, target.shearY);
49328
+ }
49317
49329
  if (this.trackingAnimationId !== null) {
49318
- cancelAnimationFrame(this.trackingAnimationId);
49319
- this.trackingAnimationId = null;
49330
+ return;
49320
49331
  }
49321
- const startTranslateX = this.matrix.translateX;
49322
- const startTranslateY = this.matrix.translateY;
49323
- const startScaleX = this.matrix.scaleX;
49324
- const startScaleY = this.matrix.scaleY;
49325
- const startShearX = this.matrix.shearX;
49326
- const startShearY = this.matrix.shearY;
49327
49332
  this.isTrackingAnimation = true;
49328
- const startTime = performance.now();
49329
- const animate = () => {
49330
- const progress = Math.min((performance.now() - startTime) / duration, 1);
49331
- const t3 = this.easeOutQuad(progress);
49332
- this.matrix.translateX = this.lerp(startTranslateX, target.translateX, t3);
49333
- this.matrix.translateY = this.lerp(startTranslateY, target.translateY, t3);
49334
- this.matrix.scaleX = this.lerp(startScaleX, target.scaleX, t3);
49335
- this.matrix.scaleY = this.lerp(startScaleY, target.scaleY, t3);
49336
- this.matrix.shearX = this.lerp(startShearX, target.shearX, t3);
49337
- this.matrix.shearY = this.lerp(startShearY, target.shearY, t3);
49338
- this.subject.publish(this);
49339
- if (progress < 1) {
49340
- this.trackingAnimationId = safeRequestAnimationFrame(animate) || null;
49341
- } else {
49333
+ this.lastTrackingTime = null;
49334
+ const SMOOTHING = 7;
49335
+ const SNAP_PX = 2;
49336
+ const SNAP_SCALE = 0.0005;
49337
+ const loop = () => {
49338
+ const t3 = this.trackingTarget;
49339
+ if (!t3) {
49340
+ this.trackingAnimationId = null;
49341
+ this.isTrackingAnimation = false;
49342
+ return;
49343
+ }
49344
+ const now = performance.now();
49345
+ const dt = this.lastTrackingTime !== null ? Math.min(now - this.lastTrackingTime, 50) : 16;
49346
+ this.lastTrackingTime = now;
49347
+ const factor = 1 - Math.exp(-SMOOTHING * dt / 1000);
49348
+ const dTx = t3.translateX - this.matrix.translateX;
49349
+ const dTy = t3.translateY - this.matrix.translateY;
49350
+ const dSx = t3.scaleX - this.matrix.scaleX;
49351
+ const dSy = t3.scaleY - this.matrix.scaleY;
49352
+ const dHx = t3.shearX - this.matrix.shearX;
49353
+ const dHy = t3.shearY - this.matrix.shearY;
49354
+ if (Math.abs(dTx) < SNAP_PX && Math.abs(dTy) < SNAP_PX && Math.abs(dSx) < SNAP_SCALE && Math.abs(dSy) < SNAP_SCALE) {
49355
+ this.matrix.translateX = t3.translateX;
49356
+ this.matrix.translateY = t3.translateY;
49357
+ this.matrix.scaleX = t3.scaleX;
49358
+ this.matrix.scaleY = t3.scaleY;
49359
+ this.matrix.shearX = t3.shearX;
49360
+ this.matrix.shearY = t3.shearY;
49361
+ this.subject.publish(this);
49362
+ this.trackingTarget = null;
49342
49363
  this.trackingAnimationId = null;
49343
49364
  this.isTrackingAnimation = false;
49365
+ return;
49344
49366
  }
49367
+ this.matrix.translateX += dTx * factor;
49368
+ this.matrix.translateY += dTy * factor;
49369
+ this.matrix.scaleX += dSx * factor;
49370
+ this.matrix.scaleY += dSy * factor;
49371
+ this.matrix.shearX += dHx * factor;
49372
+ this.matrix.shearY += dHy * factor;
49373
+ this.subject.publish(this);
49374
+ this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
49345
49375
  };
49346
- this.trackingAnimationId = safeRequestAnimationFrame(animate) || null;
49376
+ this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
49347
49377
  }
49348
49378
  cancelTrackingAnimation() {
49349
49379
  if (this.trackingAnimationId !== null) {
49350
49380
  cancelAnimationFrame(this.trackingAnimationId);
49351
49381
  this.trackingAnimationId = null;
49352
49382
  }
49383
+ this.trackingTarget = null;
49384
+ this.lastTrackingTime = null;
49353
49385
  this.isTrackingAnimation = false;
49354
49386
  }
49355
49387
  useSavedSnapshot(optionalMatrix) {
package/dist/esm/node.js CHANGED
@@ -51628,6 +51628,8 @@ class Camera {
51628
51628
  isAnimating = false;
51629
51629
  isTrackingAnimation = false;
51630
51630
  trackingAnimationId = null;
51631
+ trackingTarget = null;
51632
+ lastTrackingTime = null;
51631
51633
  constructor(boardPointer = new Pointer) {
51632
51634
  this.boardPointer = boardPointer;
51633
51635
  this.subject.subscribe((_camera) => {
@@ -51781,43 +51783,73 @@ class Camera {
51781
51783
  this.matrix = new Matrix2(matrix.translateX, matrix.translateY, matrix.scaleX, matrix.scaleY, matrix.shearX, matrix.shearY);
51782
51784
  this.subject.publish(this);
51783
51785
  }
51784
- animateToMatrix(target, duration = 130) {
51786
+ animateToMatrix(target) {
51787
+ if (this.trackingTarget) {
51788
+ this.trackingTarget.translateX = target.translateX;
51789
+ this.trackingTarget.translateY = target.translateY;
51790
+ this.trackingTarget.scaleX = target.scaleX;
51791
+ this.trackingTarget.scaleY = target.scaleY;
51792
+ this.trackingTarget.shearX = target.shearX;
51793
+ this.trackingTarget.shearY = target.shearY;
51794
+ } else {
51795
+ this.trackingTarget = new Matrix2(target.translateX, target.translateY, target.scaleX, target.scaleY, target.shearX, target.shearY);
51796
+ }
51785
51797
  if (this.trackingAnimationId !== null) {
51786
- cancelAnimationFrame(this.trackingAnimationId);
51787
- this.trackingAnimationId = null;
51798
+ return;
51788
51799
  }
51789
- const startTranslateX = this.matrix.translateX;
51790
- const startTranslateY = this.matrix.translateY;
51791
- const startScaleX = this.matrix.scaleX;
51792
- const startScaleY = this.matrix.scaleY;
51793
- const startShearX = this.matrix.shearX;
51794
- const startShearY = this.matrix.shearY;
51795
51800
  this.isTrackingAnimation = true;
51796
- const startTime = performance.now();
51797
- const animate = () => {
51798
- const progress = Math.min((performance.now() - startTime) / duration, 1);
51799
- const t3 = this.easeOutQuad(progress);
51800
- this.matrix.translateX = this.lerp(startTranslateX, target.translateX, t3);
51801
- this.matrix.translateY = this.lerp(startTranslateY, target.translateY, t3);
51802
- this.matrix.scaleX = this.lerp(startScaleX, target.scaleX, t3);
51803
- this.matrix.scaleY = this.lerp(startScaleY, target.scaleY, t3);
51804
- this.matrix.shearX = this.lerp(startShearX, target.shearX, t3);
51805
- this.matrix.shearY = this.lerp(startShearY, target.shearY, t3);
51806
- this.subject.publish(this);
51807
- if (progress < 1) {
51808
- this.trackingAnimationId = safeRequestAnimationFrame(animate) || null;
51809
- } else {
51801
+ this.lastTrackingTime = null;
51802
+ const SMOOTHING = 7;
51803
+ const SNAP_PX = 2;
51804
+ const SNAP_SCALE = 0.0005;
51805
+ const loop = () => {
51806
+ const t3 = this.trackingTarget;
51807
+ if (!t3) {
51808
+ this.trackingAnimationId = null;
51809
+ this.isTrackingAnimation = false;
51810
+ return;
51811
+ }
51812
+ const now = performance.now();
51813
+ const dt = this.lastTrackingTime !== null ? Math.min(now - this.lastTrackingTime, 50) : 16;
51814
+ this.lastTrackingTime = now;
51815
+ const factor = 1 - Math.exp(-SMOOTHING * dt / 1000);
51816
+ const dTx = t3.translateX - this.matrix.translateX;
51817
+ const dTy = t3.translateY - this.matrix.translateY;
51818
+ const dSx = t3.scaleX - this.matrix.scaleX;
51819
+ const dSy = t3.scaleY - this.matrix.scaleY;
51820
+ const dHx = t3.shearX - this.matrix.shearX;
51821
+ const dHy = t3.shearY - this.matrix.shearY;
51822
+ if (Math.abs(dTx) < SNAP_PX && Math.abs(dTy) < SNAP_PX && Math.abs(dSx) < SNAP_SCALE && Math.abs(dSy) < SNAP_SCALE) {
51823
+ this.matrix.translateX = t3.translateX;
51824
+ this.matrix.translateY = t3.translateY;
51825
+ this.matrix.scaleX = t3.scaleX;
51826
+ this.matrix.scaleY = t3.scaleY;
51827
+ this.matrix.shearX = t3.shearX;
51828
+ this.matrix.shearY = t3.shearY;
51829
+ this.subject.publish(this);
51830
+ this.trackingTarget = null;
51810
51831
  this.trackingAnimationId = null;
51811
51832
  this.isTrackingAnimation = false;
51833
+ return;
51812
51834
  }
51835
+ this.matrix.translateX += dTx * factor;
51836
+ this.matrix.translateY += dTy * factor;
51837
+ this.matrix.scaleX += dSx * factor;
51838
+ this.matrix.scaleY += dSy * factor;
51839
+ this.matrix.shearX += dHx * factor;
51840
+ this.matrix.shearY += dHy * factor;
51841
+ this.subject.publish(this);
51842
+ this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
51813
51843
  };
51814
- this.trackingAnimationId = safeRequestAnimationFrame(animate) || null;
51844
+ this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
51815
51845
  }
51816
51846
  cancelTrackingAnimation() {
51817
51847
  if (this.trackingAnimationId !== null) {
51818
51848
  cancelAnimationFrame(this.trackingAnimationId);
51819
51849
  this.trackingAnimationId = null;
51820
51850
  }
51851
+ this.trackingTarget = null;
51852
+ this.lastTrackingTime = null;
51821
51853
  this.isTrackingAnimation = false;
51822
51854
  }
51823
51855
  useSavedSnapshot(optionalMatrix) {
package/dist/types/Camera/Camera.d.ts CHANGED
@@ -26,6 +26,8 @@ export declare class Camera {
26
26
  private isAnimating;
27
27
  isTrackingAnimation: boolean;
28
28
  private trackingAnimationId;
29
+ private trackingTarget;
30
+ private lastTrackingTime;
29
31
  constructor(boardPointer?: Pointer);
30
32
  getMbr(): Mbr;
31
33
  getNotInverseMbr(): Mbr;
@@ -44,7 +46,7 @@ export declare class Camera {
44
46
  saveMatrixSnapshot(): void;
45
47
  setBoardId(id: string): this;
46
48
  applyMatrix(matrix: Matrix): void;
47
- animateToMatrix(target: Matrix, duration?: number): void;
49
+ animateToMatrix(target: Matrix): void;
48
50
  cancelTrackingAnimation(): void;
49
51
  /** Returns true if found and used saved snapshot, false otherwise */
50
52
  useSavedSnapshot(optionalMatrix?: Matrix): boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "microboard-temp",
3
- "version": "0.5.134",
3
+ "version": "0.5.136",
4
4
  "description": "A flexible interactive whiteboard library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",