microboard-temp 0.5.136 → 0.5.137

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 (9) hide show
  1. package/dist/cjs/browser.js +38 -26
  2. package/dist/cjs/index.js +38 -26
  3. package/dist/cjs/node.js +38 -26
  4. package/dist/esm/browser.js +38 -26
  5. package/dist/esm/index.js +38 -26
  6. package/dist/esm/node.js +38 -26
  7. package/dist/types/Camera/Camera.d.ts +1 -0
  8. package/dist/types/Settings.d.ts +3 -5
  9. package/package.json +1 -1
package/dist/cjs/browser.js CHANGED
@@ -49326,6 +49326,7 @@ class Camera {
49326
49326
  trackingAnimationId = null;
49327
49327
  trackingTarget = null;
49328
49328
  lastTrackingTime = null;
49329
+ springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
49329
49330
  constructor(boardPointer = new Pointer) {
49330
49331
  this.boardPointer = boardPointer;
49331
49332
  this.subject.subscribe((_camera) => {
@@ -49495,46 +49496,56 @@ class Camera {
49495
49496
  }
49496
49497
  this.isTrackingAnimation = true;
49497
49498
  this.lastTrackingTime = null;
49498
- const SMOOTHING = 7;
49499
- const SNAP_PX = 2;
49499
+ const STIFFNESS = 150;
49500
+ const DAMPING = 28;
49501
+ const SNAP_PX = 0.5;
49500
49502
  const SNAP_SCALE = 0.0005;
49503
+ const SNAP_VEL = 1;
49504
+ const springStep = (pos, tgt, vel, dt) => {
49505
+ const acc = STIFFNESS * (tgt - pos) - DAMPING * vel;
49506
+ const newVel = vel + acc * dt;
49507
+ return [pos + newVel * dt, newVel];
49508
+ };
49501
49509
  const loop = () => {
49502
- const t3 = this.trackingTarget;
49503
- if (!t3) {
49510
+ const tgt = this.trackingTarget;
49511
+ if (!tgt) {
49504
49512
  this.trackingAnimationId = null;
49505
49513
  this.isTrackingAnimation = false;
49506
49514
  return;
49507
49515
  }
49508
49516
  const now = performance.now();
49509
- const dt = this.lastTrackingTime !== null ? Math.min(now - this.lastTrackingTime, 50) : 16;
49517
+ const dt = Math.min(this.lastTrackingTime !== null ? now - this.lastTrackingTime : 16, 50) / 1000;
49510
49518
  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;
49519
+ const v = this.springVelocity;
49520
+ const [tx, vtx] = springStep(this.matrix.translateX, tgt.translateX, v.translateX, dt);
49521
+ const [ty, vty] = springStep(this.matrix.translateY, tgt.translateY, v.translateY, dt);
49522
+ const [sx, vsx] = springStep(this.matrix.scaleX, tgt.scaleX, v.scaleX, dt);
49523
+ const [sy, vsy] = springStep(this.matrix.scaleY, tgt.scaleY, v.scaleY, dt);
49524
+ const [hx, vhx] = springStep(this.matrix.shearX, tgt.shearX, v.shearX, dt);
49525
+ const [hy, vhy] = springStep(this.matrix.shearY, tgt.shearY, v.shearY, dt);
49526
+ this.matrix.translateX = tx;
49527
+ this.matrix.translateY = ty;
49528
+ this.matrix.scaleX = sx;
49529
+ this.matrix.scaleY = sy;
49530
+ this.matrix.shearX = hx;
49531
+ this.matrix.shearY = hy;
49532
+ this.springVelocity = { translateX: vtx, translateY: vty, scaleX: vsx, scaleY: vsy, shearX: vhx, shearY: vhy };
49533
+ this.subject.publish(this);
49534
+ const settled = Math.abs(tgt.translateX - tx) < SNAP_PX && Math.abs(tgt.translateY - ty) < SNAP_PX && Math.abs(tgt.scaleX - sx) < SNAP_SCALE && Math.abs(vtx) < SNAP_VEL && Math.abs(vty) < SNAP_VEL;
49535
+ if (settled) {
49536
+ this.matrix.translateX = tgt.translateX;
49537
+ this.matrix.translateY = tgt.translateY;
49538
+ this.matrix.scaleX = tgt.scaleX;
49539
+ this.matrix.scaleY = tgt.scaleY;
49540
+ this.matrix.shearX = tgt.shearX;
49541
+ this.matrix.shearY = tgt.shearY;
49525
49542
  this.subject.publish(this);
49543
+ this.springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
49526
49544
  this.trackingTarget = null;
49527
49545
  this.trackingAnimationId = null;
49528
49546
  this.isTrackingAnimation = false;
49529
49547
  return;
49530
49548
  }
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
49549
  this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
49539
49550
  };
49540
49551
  this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
@@ -49546,6 +49557,7 @@ class Camera {
49546
49557
  }
49547
49558
  this.trackingTarget = null;
49548
49559
  this.lastTrackingTime = null;
49560
+ this.springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
49549
49561
  this.isTrackingAnimation = false;
49550
49562
  }
49551
49563
  useSavedSnapshot(optionalMatrix) {
package/dist/cjs/index.js CHANGED
@@ -49326,6 +49326,7 @@ class Camera {
49326
49326
  trackingAnimationId = null;
49327
49327
  trackingTarget = null;
49328
49328
  lastTrackingTime = null;
49329
+ springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
49329
49330
  constructor(boardPointer = new Pointer) {
49330
49331
  this.boardPointer = boardPointer;
49331
49332
  this.subject.subscribe((_camera) => {
@@ -49495,46 +49496,56 @@ class Camera {
49495
49496
  }
49496
49497
  this.isTrackingAnimation = true;
49497
49498
  this.lastTrackingTime = null;
49498
- const SMOOTHING = 7;
49499
- const SNAP_PX = 2;
49499
+ const STIFFNESS = 150;
49500
+ const DAMPING = 28;
49501
+ const SNAP_PX = 0.5;
49500
49502
  const SNAP_SCALE = 0.0005;
49503
+ const SNAP_VEL = 1;
49504
+ const springStep = (pos, tgt, vel, dt) => {
49505
+ const acc = STIFFNESS * (tgt - pos) - DAMPING * vel;
49506
+ const newVel = vel + acc * dt;
49507
+ return [pos + newVel * dt, newVel];
49508
+ };
49501
49509
  const loop = () => {
49502
- const t3 = this.trackingTarget;
49503
- if (!t3) {
49510
+ const tgt = this.trackingTarget;
49511
+ if (!tgt) {
49504
49512
  this.trackingAnimationId = null;
49505
49513
  this.isTrackingAnimation = false;
49506
49514
  return;
49507
49515
  }
49508
49516
  const now = performance.now();
49509
- const dt = this.lastTrackingTime !== null ? Math.min(now - this.lastTrackingTime, 50) : 16;
49517
+ const dt = Math.min(this.lastTrackingTime !== null ? now - this.lastTrackingTime : 16, 50) / 1000;
49510
49518
  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;
49519
+ const v = this.springVelocity;
49520
+ const [tx, vtx] = springStep(this.matrix.translateX, tgt.translateX, v.translateX, dt);
49521
+ const [ty, vty] = springStep(this.matrix.translateY, tgt.translateY, v.translateY, dt);
49522
+ const [sx, vsx] = springStep(this.matrix.scaleX, tgt.scaleX, v.scaleX, dt);
49523
+ const [sy, vsy] = springStep(this.matrix.scaleY, tgt.scaleY, v.scaleY, dt);
49524
+ const [hx, vhx] = springStep(this.matrix.shearX, tgt.shearX, v.shearX, dt);
49525
+ const [hy, vhy] = springStep(this.matrix.shearY, tgt.shearY, v.shearY, dt);
49526
+ this.matrix.translateX = tx;
49527
+ this.matrix.translateY = ty;
49528
+ this.matrix.scaleX = sx;
49529
+ this.matrix.scaleY = sy;
49530
+ this.matrix.shearX = hx;
49531
+ this.matrix.shearY = hy;
49532
+ this.springVelocity = { translateX: vtx, translateY: vty, scaleX: vsx, scaleY: vsy, shearX: vhx, shearY: vhy };
49533
+ this.subject.publish(this);
49534
+ const settled = Math.abs(tgt.translateX - tx) < SNAP_PX && Math.abs(tgt.translateY - ty) < SNAP_PX && Math.abs(tgt.scaleX - sx) < SNAP_SCALE && Math.abs(vtx) < SNAP_VEL && Math.abs(vty) < SNAP_VEL;
49535
+ if (settled) {
49536
+ this.matrix.translateX = tgt.translateX;
49537
+ this.matrix.translateY = tgt.translateY;
49538
+ this.matrix.scaleX = tgt.scaleX;
49539
+ this.matrix.scaleY = tgt.scaleY;
49540
+ this.matrix.shearX = tgt.shearX;
49541
+ this.matrix.shearY = tgt.shearY;
49525
49542
  this.subject.publish(this);
49543
+ this.springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
49526
49544
  this.trackingTarget = null;
49527
49545
  this.trackingAnimationId = null;
49528
49546
  this.isTrackingAnimation = false;
49529
49547
  return;
49530
49548
  }
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
49549
  this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
49539
49550
  };
49540
49551
  this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
@@ -49546,6 +49557,7 @@ class Camera {
49546
49557
  }
49547
49558
  this.trackingTarget = null;
49548
49559
  this.lastTrackingTime = null;
49560
+ this.springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
49549
49561
  this.isTrackingAnimation = false;
49550
49562
  }
49551
49563
  useSavedSnapshot(optionalMatrix) {
package/dist/cjs/node.js CHANGED
@@ -51799,6 +51799,7 @@ class Camera {
51799
51799
  trackingAnimationId = null;
51800
51800
  trackingTarget = null;
51801
51801
  lastTrackingTime = null;
51802
+ springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
51802
51803
  constructor(boardPointer = new Pointer) {
51803
51804
  this.boardPointer = boardPointer;
51804
51805
  this.subject.subscribe((_camera) => {
@@ -51968,46 +51969,56 @@ class Camera {
51968
51969
  }
51969
51970
  this.isTrackingAnimation = true;
51970
51971
  this.lastTrackingTime = null;
51971
- const SMOOTHING = 7;
51972
- const SNAP_PX = 2;
51972
+ const STIFFNESS = 150;
51973
+ const DAMPING = 28;
51974
+ const SNAP_PX = 0.5;
51973
51975
  const SNAP_SCALE = 0.0005;
51976
+ const SNAP_VEL = 1;
51977
+ const springStep = (pos, tgt, vel, dt) => {
51978
+ const acc = STIFFNESS * (tgt - pos) - DAMPING * vel;
51979
+ const newVel = vel + acc * dt;
51980
+ return [pos + newVel * dt, newVel];
51981
+ };
51974
51982
  const loop = () => {
51975
- const t3 = this.trackingTarget;
51976
- if (!t3) {
51983
+ const tgt = this.trackingTarget;
51984
+ if (!tgt) {
51977
51985
  this.trackingAnimationId = null;
51978
51986
  this.isTrackingAnimation = false;
51979
51987
  return;
51980
51988
  }
51981
51989
  const now = performance.now();
51982
- const dt = this.lastTrackingTime !== null ? Math.min(now - this.lastTrackingTime, 50) : 16;
51990
+ const dt = Math.min(this.lastTrackingTime !== null ? now - this.lastTrackingTime : 16, 50) / 1000;
51983
51991
  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;
51992
+ const v = this.springVelocity;
51993
+ const [tx, vtx] = springStep(this.matrix.translateX, tgt.translateX, v.translateX, dt);
51994
+ const [ty, vty] = springStep(this.matrix.translateY, tgt.translateY, v.translateY, dt);
51995
+ const [sx, vsx] = springStep(this.matrix.scaleX, tgt.scaleX, v.scaleX, dt);
51996
+ const [sy, vsy] = springStep(this.matrix.scaleY, tgt.scaleY, v.scaleY, dt);
51997
+ const [hx, vhx] = springStep(this.matrix.shearX, tgt.shearX, v.shearX, dt);
51998
+ const [hy, vhy] = springStep(this.matrix.shearY, tgt.shearY, v.shearY, dt);
51999
+ this.matrix.translateX = tx;
52000
+ this.matrix.translateY = ty;
52001
+ this.matrix.scaleX = sx;
52002
+ this.matrix.scaleY = sy;
52003
+ this.matrix.shearX = hx;
52004
+ this.matrix.shearY = hy;
52005
+ this.springVelocity = { translateX: vtx, translateY: vty, scaleX: vsx, scaleY: vsy, shearX: vhx, shearY: vhy };
52006
+ this.subject.publish(this);
52007
+ const settled = Math.abs(tgt.translateX - tx) < SNAP_PX && Math.abs(tgt.translateY - ty) < SNAP_PX && Math.abs(tgt.scaleX - sx) < SNAP_SCALE && Math.abs(vtx) < SNAP_VEL && Math.abs(vty) < SNAP_VEL;
52008
+ if (settled) {
52009
+ this.matrix.translateX = tgt.translateX;
52010
+ this.matrix.translateY = tgt.translateY;
52011
+ this.matrix.scaleX = tgt.scaleX;
52012
+ this.matrix.scaleY = tgt.scaleY;
52013
+ this.matrix.shearX = tgt.shearX;
52014
+ this.matrix.shearY = tgt.shearY;
51998
52015
  this.subject.publish(this);
52016
+ this.springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
51999
52017
  this.trackingTarget = null;
52000
52018
  this.trackingAnimationId = null;
52001
52019
  this.isTrackingAnimation = false;
52002
52020
  return;
52003
52021
  }
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
52022
  this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
52012
52023
  };
52013
52024
  this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
@@ -52019,6 +52030,7 @@ class Camera {
52019
52030
  }
52020
52031
  this.trackingTarget = null;
52021
52032
  this.lastTrackingTime = null;
52033
+ this.springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
52022
52034
  this.isTrackingAnimation = false;
52023
52035
  }
52024
52036
  useSavedSnapshot(optionalMatrix) {
package/dist/esm/browser.js CHANGED
@@ -49169,6 +49169,7 @@ class Camera {
49169
49169
  trackingAnimationId = null;
49170
49170
  trackingTarget = null;
49171
49171
  lastTrackingTime = null;
49172
+ springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
49172
49173
  constructor(boardPointer = new Pointer) {
49173
49174
  this.boardPointer = boardPointer;
49174
49175
  this.subject.subscribe((_camera) => {
@@ -49338,46 +49339,56 @@ class Camera {
49338
49339
  }
49339
49340
  this.isTrackingAnimation = true;
49340
49341
  this.lastTrackingTime = null;
49341
- const SMOOTHING = 7;
49342
- const SNAP_PX = 2;
49342
+ const STIFFNESS = 150;
49343
+ const DAMPING = 28;
49344
+ const SNAP_PX = 0.5;
49343
49345
  const SNAP_SCALE = 0.0005;
49346
+ const SNAP_VEL = 1;
49347
+ const springStep = (pos, tgt, vel, dt) => {
49348
+ const acc = STIFFNESS * (tgt - pos) - DAMPING * vel;
49349
+ const newVel = vel + acc * dt;
49350
+ return [pos + newVel * dt, newVel];
49351
+ };
49344
49352
  const loop = () => {
49345
- const t3 = this.trackingTarget;
49346
- if (!t3) {
49353
+ const tgt = this.trackingTarget;
49354
+ if (!tgt) {
49347
49355
  this.trackingAnimationId = null;
49348
49356
  this.isTrackingAnimation = false;
49349
49357
  return;
49350
49358
  }
49351
49359
  const now = performance.now();
49352
- const dt = this.lastTrackingTime !== null ? Math.min(now - this.lastTrackingTime, 50) : 16;
49360
+ const dt = Math.min(this.lastTrackingTime !== null ? now - this.lastTrackingTime : 16, 50) / 1000;
49353
49361
  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;
49362
+ const v = this.springVelocity;
49363
+ const [tx, vtx] = springStep(this.matrix.translateX, tgt.translateX, v.translateX, dt);
49364
+ const [ty, vty] = springStep(this.matrix.translateY, tgt.translateY, v.translateY, dt);
49365
+ const [sx, vsx] = springStep(this.matrix.scaleX, tgt.scaleX, v.scaleX, dt);
49366
+ const [sy, vsy] = springStep(this.matrix.scaleY, tgt.scaleY, v.scaleY, dt);
49367
+ const [hx, vhx] = springStep(this.matrix.shearX, tgt.shearX, v.shearX, dt);
49368
+ const [hy, vhy] = springStep(this.matrix.shearY, tgt.shearY, v.shearY, dt);
49369
+ this.matrix.translateX = tx;
49370
+ this.matrix.translateY = ty;
49371
+ this.matrix.scaleX = sx;
49372
+ this.matrix.scaleY = sy;
49373
+ this.matrix.shearX = hx;
49374
+ this.matrix.shearY = hy;
49375
+ this.springVelocity = { translateX: vtx, translateY: vty, scaleX: vsx, scaleY: vsy, shearX: vhx, shearY: vhy };
49376
+ this.subject.publish(this);
49377
+ const settled = Math.abs(tgt.translateX - tx) < SNAP_PX && Math.abs(tgt.translateY - ty) < SNAP_PX && Math.abs(tgt.scaleX - sx) < SNAP_SCALE && Math.abs(vtx) < SNAP_VEL && Math.abs(vty) < SNAP_VEL;
49378
+ if (settled) {
49379
+ this.matrix.translateX = tgt.translateX;
49380
+ this.matrix.translateY = tgt.translateY;
49381
+ this.matrix.scaleX = tgt.scaleX;
49382
+ this.matrix.scaleY = tgt.scaleY;
49383
+ this.matrix.shearX = tgt.shearX;
49384
+ this.matrix.shearY = tgt.shearY;
49368
49385
  this.subject.publish(this);
49386
+ this.springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
49369
49387
  this.trackingTarget = null;
49370
49388
  this.trackingAnimationId = null;
49371
49389
  this.isTrackingAnimation = false;
49372
49390
  return;
49373
49391
  }
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
49392
  this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
49382
49393
  };
49383
49394
  this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
@@ -49389,6 +49400,7 @@ class Camera {
49389
49400
  }
49390
49401
  this.trackingTarget = null;
49391
49402
  this.lastTrackingTime = null;
49403
+ this.springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
49392
49404
  this.isTrackingAnimation = false;
49393
49405
  }
49394
49406
  useSavedSnapshot(optionalMatrix) {
package/dist/esm/index.js CHANGED
@@ -49162,6 +49162,7 @@ class Camera {
49162
49162
  trackingAnimationId = null;
49163
49163
  trackingTarget = null;
49164
49164
  lastTrackingTime = null;
49165
+ springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
49165
49166
  constructor(boardPointer = new Pointer) {
49166
49167
  this.boardPointer = boardPointer;
49167
49168
  this.subject.subscribe((_camera) => {
@@ -49331,46 +49332,56 @@ class Camera {
49331
49332
  }
49332
49333
  this.isTrackingAnimation = true;
49333
49334
  this.lastTrackingTime = null;
49334
- const SMOOTHING = 7;
49335
- const SNAP_PX = 2;
49335
+ const STIFFNESS = 150;
49336
+ const DAMPING = 28;
49337
+ const SNAP_PX = 0.5;
49336
49338
  const SNAP_SCALE = 0.0005;
49339
+ const SNAP_VEL = 1;
49340
+ const springStep = (pos, tgt, vel, dt) => {
49341
+ const acc = STIFFNESS * (tgt - pos) - DAMPING * vel;
49342
+ const newVel = vel + acc * dt;
49343
+ return [pos + newVel * dt, newVel];
49344
+ };
49337
49345
  const loop = () => {
49338
- const t3 = this.trackingTarget;
49339
- if (!t3) {
49346
+ const tgt = this.trackingTarget;
49347
+ if (!tgt) {
49340
49348
  this.trackingAnimationId = null;
49341
49349
  this.isTrackingAnimation = false;
49342
49350
  return;
49343
49351
  }
49344
49352
  const now = performance.now();
49345
- const dt = this.lastTrackingTime !== null ? Math.min(now - this.lastTrackingTime, 50) : 16;
49353
+ const dt = Math.min(this.lastTrackingTime !== null ? now - this.lastTrackingTime : 16, 50) / 1000;
49346
49354
  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;
49355
+ const v = this.springVelocity;
49356
+ const [tx, vtx] = springStep(this.matrix.translateX, tgt.translateX, v.translateX, dt);
49357
+ const [ty, vty] = springStep(this.matrix.translateY, tgt.translateY, v.translateY, dt);
49358
+ const [sx, vsx] = springStep(this.matrix.scaleX, tgt.scaleX, v.scaleX, dt);
49359
+ const [sy, vsy] = springStep(this.matrix.scaleY, tgt.scaleY, v.scaleY, dt);
49360
+ const [hx, vhx] = springStep(this.matrix.shearX, tgt.shearX, v.shearX, dt);
49361
+ const [hy, vhy] = springStep(this.matrix.shearY, tgt.shearY, v.shearY, dt);
49362
+ this.matrix.translateX = tx;
49363
+ this.matrix.translateY = ty;
49364
+ this.matrix.scaleX = sx;
49365
+ this.matrix.scaleY = sy;
49366
+ this.matrix.shearX = hx;
49367
+ this.matrix.shearY = hy;
49368
+ this.springVelocity = { translateX: vtx, translateY: vty, scaleX: vsx, scaleY: vsy, shearX: vhx, shearY: vhy };
49369
+ this.subject.publish(this);
49370
+ const settled = Math.abs(tgt.translateX - tx) < SNAP_PX && Math.abs(tgt.translateY - ty) < SNAP_PX && Math.abs(tgt.scaleX - sx) < SNAP_SCALE && Math.abs(vtx) < SNAP_VEL && Math.abs(vty) < SNAP_VEL;
49371
+ if (settled) {
49372
+ this.matrix.translateX = tgt.translateX;
49373
+ this.matrix.translateY = tgt.translateY;
49374
+ this.matrix.scaleX = tgt.scaleX;
49375
+ this.matrix.scaleY = tgt.scaleY;
49376
+ this.matrix.shearX = tgt.shearX;
49377
+ this.matrix.shearY = tgt.shearY;
49361
49378
  this.subject.publish(this);
49379
+ this.springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
49362
49380
  this.trackingTarget = null;
49363
49381
  this.trackingAnimationId = null;
49364
49382
  this.isTrackingAnimation = false;
49365
49383
  return;
49366
49384
  }
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
49385
  this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
49375
49386
  };
49376
49387
  this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
@@ -49382,6 +49393,7 @@ class Camera {
49382
49393
  }
49383
49394
  this.trackingTarget = null;
49384
49395
  this.lastTrackingTime = null;
49396
+ this.springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
49385
49397
  this.isTrackingAnimation = false;
49386
49398
  }
49387
49399
  useSavedSnapshot(optionalMatrix) {
package/dist/esm/node.js CHANGED
@@ -51630,6 +51630,7 @@ class Camera {
51630
51630
  trackingAnimationId = null;
51631
51631
  trackingTarget = null;
51632
51632
  lastTrackingTime = null;
51633
+ springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
51633
51634
  constructor(boardPointer = new Pointer) {
51634
51635
  this.boardPointer = boardPointer;
51635
51636
  this.subject.subscribe((_camera) => {
@@ -51799,46 +51800,56 @@ class Camera {
51799
51800
  }
51800
51801
  this.isTrackingAnimation = true;
51801
51802
  this.lastTrackingTime = null;
51802
- const SMOOTHING = 7;
51803
- const SNAP_PX = 2;
51803
+ const STIFFNESS = 150;
51804
+ const DAMPING = 28;
51805
+ const SNAP_PX = 0.5;
51804
51806
  const SNAP_SCALE = 0.0005;
51807
+ const SNAP_VEL = 1;
51808
+ const springStep = (pos, tgt, vel, dt) => {
51809
+ const acc = STIFFNESS * (tgt - pos) - DAMPING * vel;
51810
+ const newVel = vel + acc * dt;
51811
+ return [pos + newVel * dt, newVel];
51812
+ };
51805
51813
  const loop = () => {
51806
- const t3 = this.trackingTarget;
51807
- if (!t3) {
51814
+ const tgt = this.trackingTarget;
51815
+ if (!tgt) {
51808
51816
  this.trackingAnimationId = null;
51809
51817
  this.isTrackingAnimation = false;
51810
51818
  return;
51811
51819
  }
51812
51820
  const now = performance.now();
51813
- const dt = this.lastTrackingTime !== null ? Math.min(now - this.lastTrackingTime, 50) : 16;
51821
+ const dt = Math.min(this.lastTrackingTime !== null ? now - this.lastTrackingTime : 16, 50) / 1000;
51814
51822
  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;
51823
+ const v = this.springVelocity;
51824
+ const [tx, vtx] = springStep(this.matrix.translateX, tgt.translateX, v.translateX, dt);
51825
+ const [ty, vty] = springStep(this.matrix.translateY, tgt.translateY, v.translateY, dt);
51826
+ const [sx, vsx] = springStep(this.matrix.scaleX, tgt.scaleX, v.scaleX, dt);
51827
+ const [sy, vsy] = springStep(this.matrix.scaleY, tgt.scaleY, v.scaleY, dt);
51828
+ const [hx, vhx] = springStep(this.matrix.shearX, tgt.shearX, v.shearX, dt);
51829
+ const [hy, vhy] = springStep(this.matrix.shearY, tgt.shearY, v.shearY, dt);
51830
+ this.matrix.translateX = tx;
51831
+ this.matrix.translateY = ty;
51832
+ this.matrix.scaleX = sx;
51833
+ this.matrix.scaleY = sy;
51834
+ this.matrix.shearX = hx;
51835
+ this.matrix.shearY = hy;
51836
+ this.springVelocity = { translateX: vtx, translateY: vty, scaleX: vsx, scaleY: vsy, shearX: vhx, shearY: vhy };
51837
+ this.subject.publish(this);
51838
+ const settled = Math.abs(tgt.translateX - tx) < SNAP_PX && Math.abs(tgt.translateY - ty) < SNAP_PX && Math.abs(tgt.scaleX - sx) < SNAP_SCALE && Math.abs(vtx) < SNAP_VEL && Math.abs(vty) < SNAP_VEL;
51839
+ if (settled) {
51840
+ this.matrix.translateX = tgt.translateX;
51841
+ this.matrix.translateY = tgt.translateY;
51842
+ this.matrix.scaleX = tgt.scaleX;
51843
+ this.matrix.scaleY = tgt.scaleY;
51844
+ this.matrix.shearX = tgt.shearX;
51845
+ this.matrix.shearY = tgt.shearY;
51829
51846
  this.subject.publish(this);
51847
+ this.springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
51830
51848
  this.trackingTarget = null;
51831
51849
  this.trackingAnimationId = null;
51832
51850
  this.isTrackingAnimation = false;
51833
51851
  return;
51834
51852
  }
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
51853
  this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
51843
51854
  };
51844
51855
  this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
@@ -51850,6 +51861,7 @@ class Camera {
51850
51861
  }
51851
51862
  this.trackingTarget = null;
51852
51863
  this.lastTrackingTime = null;
51864
+ this.springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
51853
51865
  this.isTrackingAnimation = false;
51854
51866
  }
51855
51867
  useSavedSnapshot(optionalMatrix) {
package/dist/types/Camera/Camera.d.ts CHANGED
@@ -28,6 +28,7 @@ export declare class Camera {
28
28
  private trackingAnimationId;
29
29
  private trackingTarget;
30
30
  private lastTrackingTime;
31
+ private springVelocity;
31
32
  constructor(boardPointer?: Pointer);
32
33
  getMbr(): Mbr;
33
34
  getNotInverseMbr(): Mbr;
package/dist/types/Settings.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import { Path2DFactory } from "./api/Path2DFactory";
2
- import { BoardSnapshot } from "./Board";
3
2
  import { BrowserDocumentFactory } from "./api/BrowserDocumentFactory";
4
3
  import { BrowserPath2D } from "./api/BrowserPath2DFactory";
5
4
  import { MockDocumentFactory } from "./api/MockDocumentFactory";
@@ -54,13 +53,12 @@ export interface TemplateLanguage {
54
53
  label: string;
55
54
  }
56
55
  export interface Template {
57
- uniqId: string;
56
+ id: string;
58
57
  preview: string;
59
- description: string;
60
- lan: string;
58
+ languages: string[];
61
59
  tags: string[];
62
- snapshot: BoardSnapshot;
63
60
  name: string;
61
+ created: string;
64
62
  }
65
63
  export declare enum ExportQuality {
66
64
  HIGH = 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "microboard-temp",
3
- "version": "0.5.136",
3
+ "version": "0.5.137",
4
4
  "description": "A flexible interactive whiteboard library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",