microboard-temp 0.5.132 → 0.5.134

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 +94 -30
  2. package/dist/cjs/index.js +94 -30
  3. package/dist/cjs/node.js +96 -32
  4. package/dist/esm/browser.js +84 -23
  5. package/dist/esm/index.js +84 -23
  6. package/dist/esm/node.js +84 -23
  7. package/dist/types/Camera/Camera.d.ts +4 -0
  8. package/package.json +1 -1
package/dist/cjs/browser.js CHANGED
@@ -4,39 +4,60 @@ var __defProp = Object.defineProperty;
4
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
6
  var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ function __accessProp(key) {
8
+ return this[key];
9
+ }
10
+ var __toESMCache_node;
11
+ var __toESMCache_esm;
7
12
  var __toESM = (mod, isNodeMode, target) => {
13
+ var canCache = mod != null && typeof mod === "object";
14
+ if (canCache) {
15
+ var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
16
+ var cached = cache.get(mod);
17
+ if (cached)
18
+ return cached;
19
+ }
8
20
  target = mod != null ? __create(__getProtoOf(mod)) : {};
9
21
  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
10
22
  for (let key of __getOwnPropNames(mod))
11
23
  if (!__hasOwnProp.call(to, key))
12
24
  __defProp(to, key, {
13
- get: () => mod[key],
25
+ get: __accessProp.bind(mod, key),
14
26
  enumerable: true
15
27
  });
28
+ if (canCache)
29
+ cache.set(mod, to);
16
30
  return to;
17
31
  };
18
- var __moduleCache = /* @__PURE__ */ new WeakMap;
19
32
  var __toCommonJS = (from) => {
20
- var entry = __moduleCache.get(from), desc;
33
+ var entry = (__moduleCache ??= new WeakMap).get(from), desc;
21
34
  if (entry)
22
35
  return entry;
23
36
  entry = __defProp({}, "__esModule", { value: true });
24
- if (from && typeof from === "object" || typeof from === "function")
25
- __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
26
- get: () => from[key],
27
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
28
- }));
37
+ if (from && typeof from === "object" || typeof from === "function") {
38
+ for (var key of __getOwnPropNames(from))
39
+ if (!__hasOwnProp.call(entry, key))
40
+ __defProp(entry, key, {
41
+ get: __accessProp.bind(from, key),
42
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
43
+ });
44
+ }
29
45
  __moduleCache.set(from, entry);
30
46
  return entry;
31
47
  };
48
+ var __moduleCache;
32
49
  var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
50
+ var __returnValue = (v) => v;
51
+ function __exportSetter(name, newValue) {
52
+ this[name] = __returnValue.bind(null, newValue);
53
+ }
33
54
  var __export = (target, all) => {
34
55
  for (var name in all)
35
56
  __defProp(target, name, {
36
57
  get: all[name],
37
58
  enumerable: true,
38
59
  configurable: true,
39
- set: (newValue) => all[name] = () => newValue
60
+ set: __exportSetter.bind(all, name)
40
61
  });
41
62
  };
42
63
 
@@ -18930,15 +18951,9 @@ class CommentCommand {
18930
18951
  }
18931
18952
  }
18932
18953
  }
18933
-
18934
- // node_modules/uuid/dist/esm-browser/stringify.js
18935
- var byteToHex = [];
18936
- for (let i = 0;i < 256; ++i) {
18937
- byteToHex.push((i + 256).toString(16).slice(1));
18938
- }
18939
- function unsafeStringify(arr2, offset = 0) {
18940
- return (byteToHex[arr2[offset + 0]] + byteToHex[arr2[offset + 1]] + byteToHex[arr2[offset + 2]] + byteToHex[arr2[offset + 3]] + "-" + byteToHex[arr2[offset + 4]] + byteToHex[arr2[offset + 5]] + "-" + byteToHex[arr2[offset + 6]] + byteToHex[arr2[offset + 7]] + "-" + byteToHex[arr2[offset + 8]] + byteToHex[arr2[offset + 9]] + "-" + byteToHex[arr2[offset + 10]] + byteToHex[arr2[offset + 11]] + byteToHex[arr2[offset + 12]] + byteToHex[arr2[offset + 13]] + byteToHex[arr2[offset + 14]] + byteToHex[arr2[offset + 15]]).toLowerCase();
18941
- }
18954
+ // node_modules/uuid/dist/esm-browser/native.js
18955
+ var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
18956
+ var native_default = { randomUUID };
18942
18957
 
18943
18958
  // node_modules/uuid/dist/esm-browser/rng.js
18944
18959
  var getRandomValues;
@@ -18953,9 +18968,14 @@ function rng() {
18953
18968
  return getRandomValues(rnds8);
18954
18969
  }
18955
18970
 
18956
- // node_modules/uuid/dist/esm-browser/native.js
18957
- var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
18958
- var native_default = { randomUUID };
18971
+ // node_modules/uuid/dist/esm-browser/stringify.js
18972
+ var byteToHex = [];
18973
+ for (let i = 0;i < 256; ++i) {
18974
+ byteToHex.push((i + 256).toString(16).slice(1));
18975
+ }
18976
+ function unsafeStringify(arr2, offset = 0) {
18977
+ return (byteToHex[arr2[offset + 0]] + byteToHex[arr2[offset + 1]] + byteToHex[arr2[offset + 2]] + byteToHex[arr2[offset + 3]] + "-" + byteToHex[arr2[offset + 4]] + byteToHex[arr2[offset + 5]] + "-" + byteToHex[arr2[offset + 6]] + byteToHex[arr2[offset + 7]] + "-" + byteToHex[arr2[offset + 8]] + byteToHex[arr2[offset + 9]] + "-" + byteToHex[arr2[offset + 10]] + byteToHex[arr2[offset + 11]] + byteToHex[arr2[offset + 12]] + byteToHex[arr2[offset + 13]] + byteToHex[arr2[offset + 14]] + byteToHex[arr2[offset + 15]]).toLowerCase();
18978
+ }
18959
18979
 
18960
18980
  // node_modules/uuid/dist/esm-browser/v4.js
18961
18981
  function v4(options, buf, offset) {
@@ -34413,10 +34433,10 @@ function zwitch(key, options) {
34413
34433
  const settings = options || {};
34414
34434
  function one4(value, ...parameters) {
34415
34435
  let fn = one4.invalid;
34416
- const handlers2 = one4.handlers;
34436
+ const handlers3 = one4.handlers;
34417
34437
  if (value && own6.call(value, key)) {
34418
34438
  const id = String(value[key]);
34419
- fn = own6.call(handlers2, id) ? handlers2[id] : one4.unknown;
34439
+ fn = own6.call(handlers3, id) ? handlers3[id] : one4.unknown;
34420
34440
  }
34421
34441
  if (fn) {
34422
34442
  return fn.call(this, value, ...parameters);
@@ -49302,6 +49322,8 @@ class Camera {
49302
49322
  observableItem = null;
49303
49323
  throttledZoom;
49304
49324
  isAnimating = false;
49325
+ isTrackingAnimation = false;
49326
+ trackingAnimationId = null;
49305
49327
  constructor(boardPointer = new Pointer) {
49306
49328
  this.boardPointer = boardPointer;
49307
49329
  this.subject.subscribe((_camera) => {
@@ -49455,6 +49477,45 @@ class Camera {
49455
49477
  this.matrix = new Matrix2(matrix.translateX, matrix.translateY, matrix.scaleX, matrix.scaleY, matrix.shearX, matrix.shearY);
49456
49478
  this.subject.publish(this);
49457
49479
  }
49480
+ animateToMatrix(target, duration = 130) {
49481
+ if (this.trackingAnimationId !== null) {
49482
+ cancelAnimationFrame(this.trackingAnimationId);
49483
+ this.trackingAnimationId = null;
49484
+ }
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
+ 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 {
49506
+ this.trackingAnimationId = null;
49507
+ this.isTrackingAnimation = false;
49508
+ }
49509
+ };
49510
+ this.trackingAnimationId = safeRequestAnimationFrame(animate) || null;
49511
+ }
49512
+ cancelTrackingAnimation() {
49513
+ if (this.trackingAnimationId !== null) {
49514
+ cancelAnimationFrame(this.trackingAnimationId);
49515
+ this.trackingAnimationId = null;
49516
+ }
49517
+ this.isTrackingAnimation = false;
49518
+ }
49458
49519
  useSavedSnapshot(optionalMatrix) {
49459
49520
  if (optionalMatrix) {
49460
49521
  this.applyMatrix(optionalMatrix);
@@ -50728,8 +50789,10 @@ class Presence {
50728
50789
  const throttleCameraEvent = throttleWithDebounce(this.sendCameraPresence.bind(this), 150, 150);
50729
50790
  const checkIsDisableTrackingNeeded = this.getIsDisableTrackingNeeded.bind(this);
50730
50791
  this.board.camera.subject.subscribe((_camera) => {
50731
- throttleCameraEvent(this.board.camera);
50732
- if (checkIsDisableTrackingNeeded()) {
50792
+ if (!this.board.camera.isTrackingAnimation) {
50793
+ throttleCameraEvent(this.board.camera);
50794
+ }
50795
+ if (!this.board.camera.isTrackingAnimation && checkIsDisableTrackingNeeded()) {
50733
50796
  this.disableTracking();
50734
50797
  }
50735
50798
  });
@@ -50988,9 +51051,9 @@ class Presence {
50988
51051
  userCopy.camera = eventData;
50989
51052
  this.updateUserMetaInfo(msg, userCopy);
50990
51053
  this.users.set(msg.userId.toString(), userCopy);
50991
- if (this.trackedUser) {
51054
+ if (this.trackedUser && this.trackedUser.userId === msg.userId.toString()) {
50992
51055
  this.trackedUser.camera = eventData;
50993
- this.board.camera.applyMatrix(new Matrix2(eventData.translateX, eventData.translateY, eventData.scaleX, eventData.scaleY, eventData.shearX, eventData.shearY));
51056
+ this.board.camera.animateToMatrix(new Matrix2(eventData.translateX, eventData.translateY, eventData.scaleX, eventData.scaleY, eventData.shearX, eventData.shearY));
50994
51057
  }
50995
51058
  }
50996
51059
  processDrawSelect(msg) {
@@ -51052,6 +51115,7 @@ class Presence {
51052
51115
  if (!this.trackedUser) {
51053
51116
  return;
51054
51117
  }
51118
+ this.board.camera.cancelTrackingAnimation();
51055
51119
  this.emit({
51056
51120
  method: "StopFollowing",
51057
51121
  timestamp: Date.now(),
@@ -56650,16 +56714,16 @@ function createEvents(board, connection, lastIndex) {
56650
56714
  }
56651
56715
  // src/Events/MessageRouter/createMessageRouter.ts
56652
56716
  function createMessageRouter() {
56653
- const handlers2 = new Map;
56717
+ const handlers3 = new Map;
56654
56718
  function addHandler(type, handler) {
56655
- handlers2.set(type, (message, board) => {
56719
+ handlers3.set(type, (message, board) => {
56656
56720
  if (message.type === type) {
56657
56721
  handler(message, board);
56658
56722
  }
56659
56723
  });
56660
56724
  }
56661
56725
  function handleMessage(message, board) {
56662
- const handler = handlers2.get(message.type);
56726
+ const handler = handlers3.get(message.type);
56663
56727
  if (handler) {
56664
56728
  handler(message, board);
56665
56729
  } else {
package/dist/cjs/index.js CHANGED
@@ -4,39 +4,60 @@ var __defProp = Object.defineProperty;
4
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
6
  var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ function __accessProp(key) {
8
+ return this[key];
9
+ }
10
+ var __toESMCache_node;
11
+ var __toESMCache_esm;
7
12
  var __toESM = (mod, isNodeMode, target) => {
13
+ var canCache = mod != null && typeof mod === "object";
14
+ if (canCache) {
15
+ var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
16
+ var cached = cache.get(mod);
17
+ if (cached)
18
+ return cached;
19
+ }
8
20
  target = mod != null ? __create(__getProtoOf(mod)) : {};
9
21
  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
10
22
  for (let key of __getOwnPropNames(mod))
11
23
  if (!__hasOwnProp.call(to, key))
12
24
  __defProp(to, key, {
13
- get: () => mod[key],
25
+ get: __accessProp.bind(mod, key),
14
26
  enumerable: true
15
27
  });
28
+ if (canCache)
29
+ cache.set(mod, to);
16
30
  return to;
17
31
  };
18
- var __moduleCache = /* @__PURE__ */ new WeakMap;
19
32
  var __toCommonJS = (from) => {
20
- var entry = __moduleCache.get(from), desc;
33
+ var entry = (__moduleCache ??= new WeakMap).get(from), desc;
21
34
  if (entry)
22
35
  return entry;
23
36
  entry = __defProp({}, "__esModule", { value: true });
24
- if (from && typeof from === "object" || typeof from === "function")
25
- __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
26
- get: () => from[key],
27
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
28
- }));
37
+ if (from && typeof from === "object" || typeof from === "function") {
38
+ for (var key of __getOwnPropNames(from))
39
+ if (!__hasOwnProp.call(entry, key))
40
+ __defProp(entry, key, {
41
+ get: __accessProp.bind(from, key),
42
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
43
+ });
44
+ }
29
45
  __moduleCache.set(from, entry);
30
46
  return entry;
31
47
  };
48
+ var __moduleCache;
32
49
  var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
50
+ var __returnValue = (v) => v;
51
+ function __exportSetter(name, newValue) {
52
+ this[name] = __returnValue.bind(null, newValue);
53
+ }
33
54
  var __export = (target, all) => {
34
55
  for (var name in all)
35
56
  __defProp(target, name, {
36
57
  get: all[name],
37
58
  enumerable: true,
38
59
  configurable: true,
39
- set: (newValue) => all[name] = () => newValue
60
+ set: __exportSetter.bind(all, name)
40
61
  });
41
62
  };
42
63
 
@@ -18930,15 +18951,9 @@ class CommentCommand {
18930
18951
  }
18931
18952
  }
18932
18953
  }
18933
-
18934
- // node_modules/uuid/dist/esm-browser/stringify.js
18935
- var byteToHex = [];
18936
- for (let i = 0;i < 256; ++i) {
18937
- byteToHex.push((i + 256).toString(16).slice(1));
18938
- }
18939
- function unsafeStringify(arr2, offset = 0) {
18940
- return (byteToHex[arr2[offset + 0]] + byteToHex[arr2[offset + 1]] + byteToHex[arr2[offset + 2]] + byteToHex[arr2[offset + 3]] + "-" + byteToHex[arr2[offset + 4]] + byteToHex[arr2[offset + 5]] + "-" + byteToHex[arr2[offset + 6]] + byteToHex[arr2[offset + 7]] + "-" + byteToHex[arr2[offset + 8]] + byteToHex[arr2[offset + 9]] + "-" + byteToHex[arr2[offset + 10]] + byteToHex[arr2[offset + 11]] + byteToHex[arr2[offset + 12]] + byteToHex[arr2[offset + 13]] + byteToHex[arr2[offset + 14]] + byteToHex[arr2[offset + 15]]).toLowerCase();
18941
- }
18954
+ // node_modules/uuid/dist/esm-browser/native.js
18955
+ var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
18956
+ var native_default = { randomUUID };
18942
18957
 
18943
18958
  // node_modules/uuid/dist/esm-browser/rng.js
18944
18959
  var getRandomValues;
@@ -18953,9 +18968,14 @@ function rng() {
18953
18968
  return getRandomValues(rnds8);
18954
18969
  }
18955
18970
 
18956
- // node_modules/uuid/dist/esm-browser/native.js
18957
- var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
18958
- var native_default = { randomUUID };
18971
+ // node_modules/uuid/dist/esm-browser/stringify.js
18972
+ var byteToHex = [];
18973
+ for (let i = 0;i < 256; ++i) {
18974
+ byteToHex.push((i + 256).toString(16).slice(1));
18975
+ }
18976
+ function unsafeStringify(arr2, offset = 0) {
18977
+ return (byteToHex[arr2[offset + 0]] + byteToHex[arr2[offset + 1]] + byteToHex[arr2[offset + 2]] + byteToHex[arr2[offset + 3]] + "-" + byteToHex[arr2[offset + 4]] + byteToHex[arr2[offset + 5]] + "-" + byteToHex[arr2[offset + 6]] + byteToHex[arr2[offset + 7]] + "-" + byteToHex[arr2[offset + 8]] + byteToHex[arr2[offset + 9]] + "-" + byteToHex[arr2[offset + 10]] + byteToHex[arr2[offset + 11]] + byteToHex[arr2[offset + 12]] + byteToHex[arr2[offset + 13]] + byteToHex[arr2[offset + 14]] + byteToHex[arr2[offset + 15]]).toLowerCase();
18978
+ }
18959
18979
 
18960
18980
  // node_modules/uuid/dist/esm-browser/v4.js
18961
18981
  function v4(options, buf, offset) {
@@ -34413,10 +34433,10 @@ function zwitch(key, options) {
34413
34433
  const settings = options || {};
34414
34434
  function one4(value, ...parameters) {
34415
34435
  let fn = one4.invalid;
34416
- const handlers2 = one4.handlers;
34436
+ const handlers3 = one4.handlers;
34417
34437
  if (value && own6.call(value, key)) {
34418
34438
  const id = String(value[key]);
34419
- fn = own6.call(handlers2, id) ? handlers2[id] : one4.unknown;
34439
+ fn = own6.call(handlers3, id) ? handlers3[id] : one4.unknown;
34420
34440
  }
34421
34441
  if (fn) {
34422
34442
  return fn.call(this, value, ...parameters);
@@ -49302,6 +49322,8 @@ class Camera {
49302
49322
  observableItem = null;
49303
49323
  throttledZoom;
49304
49324
  isAnimating = false;
49325
+ isTrackingAnimation = false;
49326
+ trackingAnimationId = null;
49305
49327
  constructor(boardPointer = new Pointer) {
49306
49328
  this.boardPointer = boardPointer;
49307
49329
  this.subject.subscribe((_camera) => {
@@ -49455,6 +49477,45 @@ class Camera {
49455
49477
  this.matrix = new Matrix2(matrix.translateX, matrix.translateY, matrix.scaleX, matrix.scaleY, matrix.shearX, matrix.shearY);
49456
49478
  this.subject.publish(this);
49457
49479
  }
49480
+ animateToMatrix(target, duration = 130) {
49481
+ if (this.trackingAnimationId !== null) {
49482
+ cancelAnimationFrame(this.trackingAnimationId);
49483
+ this.trackingAnimationId = null;
49484
+ }
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
+ 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 {
49506
+ this.trackingAnimationId = null;
49507
+ this.isTrackingAnimation = false;
49508
+ }
49509
+ };
49510
+ this.trackingAnimationId = safeRequestAnimationFrame(animate) || null;
49511
+ }
49512
+ cancelTrackingAnimation() {
49513
+ if (this.trackingAnimationId !== null) {
49514
+ cancelAnimationFrame(this.trackingAnimationId);
49515
+ this.trackingAnimationId = null;
49516
+ }
49517
+ this.isTrackingAnimation = false;
49518
+ }
49458
49519
  useSavedSnapshot(optionalMatrix) {
49459
49520
  if (optionalMatrix) {
49460
49521
  this.applyMatrix(optionalMatrix);
@@ -50728,8 +50789,10 @@ class Presence {
50728
50789
  const throttleCameraEvent = throttleWithDebounce(this.sendCameraPresence.bind(this), 150, 150);
50729
50790
  const checkIsDisableTrackingNeeded = this.getIsDisableTrackingNeeded.bind(this);
50730
50791
  this.board.camera.subject.subscribe((_camera) => {
50731
- throttleCameraEvent(this.board.camera);
50732
- if (checkIsDisableTrackingNeeded()) {
50792
+ if (!this.board.camera.isTrackingAnimation) {
50793
+ throttleCameraEvent(this.board.camera);
50794
+ }
50795
+ if (!this.board.camera.isTrackingAnimation && checkIsDisableTrackingNeeded()) {
50733
50796
  this.disableTracking();
50734
50797
  }
50735
50798
  });
@@ -50988,9 +51051,9 @@ class Presence {
50988
51051
  userCopy.camera = eventData;
50989
51052
  this.updateUserMetaInfo(msg, userCopy);
50990
51053
  this.users.set(msg.userId.toString(), userCopy);
50991
- if (this.trackedUser) {
51054
+ if (this.trackedUser && this.trackedUser.userId === msg.userId.toString()) {
50992
51055
  this.trackedUser.camera = eventData;
50993
- this.board.camera.applyMatrix(new Matrix2(eventData.translateX, eventData.translateY, eventData.scaleX, eventData.scaleY, eventData.shearX, eventData.shearY));
51056
+ this.board.camera.animateToMatrix(new Matrix2(eventData.translateX, eventData.translateY, eventData.scaleX, eventData.scaleY, eventData.shearX, eventData.shearY));
50994
51057
  }
50995
51058
  }
50996
51059
  processDrawSelect(msg) {
@@ -51052,6 +51115,7 @@ class Presence {
51052
51115
  if (!this.trackedUser) {
51053
51116
  return;
51054
51117
  }
51118
+ this.board.camera.cancelTrackingAnimation();
51055
51119
  this.emit({
51056
51120
  method: "StopFollowing",
51057
51121
  timestamp: Date.now(),
@@ -56650,16 +56714,16 @@ function createEvents(board, connection, lastIndex) {
56650
56714
  }
56651
56715
  // src/Events/MessageRouter/createMessageRouter.ts
56652
56716
  function createMessageRouter() {
56653
- const handlers2 = new Map;
56717
+ const handlers3 = new Map;
56654
56718
  function addHandler(type, handler) {
56655
- handlers2.set(type, (message, board) => {
56719
+ handlers3.set(type, (message, board) => {
56656
56720
  if (message.type === type) {
56657
56721
  handler(message, board);
56658
56722
  }
56659
56723
  });
56660
56724
  }
56661
56725
  function handleMessage(message, board) {
56662
- const handler = handlers2.get(message.type);
56726
+ const handler = handlers3.get(message.type);
56663
56727
  if (handler) {
56664
56728
  handler(message, board);
56665
56729
  } else {
package/dist/cjs/node.js CHANGED
@@ -4,39 +4,60 @@ var __defProp = Object.defineProperty;
4
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
6
  var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ function __accessProp(key) {
8
+ return this[key];
9
+ }
10
+ var __toESMCache_node;
11
+ var __toESMCache_esm;
7
12
  var __toESM = (mod, isNodeMode, target) => {
13
+ var canCache = mod != null && typeof mod === "object";
14
+ if (canCache) {
15
+ var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
16
+ var cached = cache.get(mod);
17
+ if (cached)
18
+ return cached;
19
+ }
8
20
  target = mod != null ? __create(__getProtoOf(mod)) : {};
9
21
  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
10
22
  for (let key of __getOwnPropNames(mod))
11
23
  if (!__hasOwnProp.call(to, key))
12
24
  __defProp(to, key, {
13
- get: () => mod[key],
25
+ get: __accessProp.bind(mod, key),
14
26
  enumerable: true
15
27
  });
28
+ if (canCache)
29
+ cache.set(mod, to);
16
30
  return to;
17
31
  };
18
- var __moduleCache = /* @__PURE__ */ new WeakMap;
19
32
  var __toCommonJS = (from) => {
20
- var entry = __moduleCache.get(from), desc;
33
+ var entry = (__moduleCache ??= new WeakMap).get(from), desc;
21
34
  if (entry)
22
35
  return entry;
23
36
  entry = __defProp({}, "__esModule", { value: true });
24
- if (from && typeof from === "object" || typeof from === "function")
25
- __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
26
- get: () => from[key],
27
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
28
- }));
37
+ if (from && typeof from === "object" || typeof from === "function") {
38
+ for (var key of __getOwnPropNames(from))
39
+ if (!__hasOwnProp.call(entry, key))
40
+ __defProp(entry, key, {
41
+ get: __accessProp.bind(from, key),
42
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
43
+ });
44
+ }
29
45
  __moduleCache.set(from, entry);
30
46
  return entry;
31
47
  };
48
+ var __moduleCache;
32
49
  var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
50
+ var __returnValue = (v) => v;
51
+ function __exportSetter(name, newValue) {
52
+ this[name] = __returnValue.bind(null, newValue);
53
+ }
33
54
  var __export = (target, all) => {
34
55
  for (var name in all)
35
56
  __defProp(target, name, {
36
57
  get: all[name],
37
58
  enumerable: true,
38
59
  configurable: true,
39
- set: (newValue) => all[name] = () => newValue
60
+ set: __exportSetter.bind(all, name)
40
61
  });
41
62
  };
42
63
 
@@ -21470,31 +21491,30 @@ class CommentCommand {
21470
21491
  }
21471
21492
  }
21472
21493
  }
21473
-
21474
- // node_modules/uuid/dist/esm/stringify.js
21475
- var byteToHex = [];
21476
- for (let i = 0;i < 256; ++i) {
21477
- byteToHex.push((i + 256).toString(16).slice(1));
21478
- }
21479
- function unsafeStringify(arr2, offset = 0) {
21480
- return (byteToHex[arr2[offset + 0]] + byteToHex[arr2[offset + 1]] + byteToHex[arr2[offset + 2]] + byteToHex[arr2[offset + 3]] + "-" + byteToHex[arr2[offset + 4]] + byteToHex[arr2[offset + 5]] + "-" + byteToHex[arr2[offset + 6]] + byteToHex[arr2[offset + 7]] + "-" + byteToHex[arr2[offset + 8]] + byteToHex[arr2[offset + 9]] + "-" + byteToHex[arr2[offset + 10]] + byteToHex[arr2[offset + 11]] + byteToHex[arr2[offset + 12]] + byteToHex[arr2[offset + 13]] + byteToHex[arr2[offset + 14]] + byteToHex[arr2[offset + 15]]).toLowerCase();
21481
- }
21494
+ // node_modules/uuid/dist/esm/native.js
21495
+ var import_crypto = require("crypto");
21496
+ var native_default = { randomUUID: import_crypto.randomUUID };
21482
21497
 
21483
21498
  // node_modules/uuid/dist/esm/rng.js
21484
- var import_crypto = require("crypto");
21499
+ var import_crypto2 = require("crypto");
21485
21500
  var rnds8Pool = new Uint8Array(256);
21486
21501
  var poolPtr = rnds8Pool.length;
21487
21502
  function rng() {
21488
21503
  if (poolPtr > rnds8Pool.length - 16) {
21489
- import_crypto.randomFillSync(rnds8Pool);
21504
+ import_crypto2.randomFillSync(rnds8Pool);
21490
21505
  poolPtr = 0;
21491
21506
  }
21492
21507
  return rnds8Pool.slice(poolPtr, poolPtr += 16);
21493
21508
  }
21494
21509
 
21495
- // node_modules/uuid/dist/esm/native.js
21496
- var import_crypto2 = require("crypto");
21497
- var native_default = { randomUUID: import_crypto2.randomUUID };
21510
+ // node_modules/uuid/dist/esm/stringify.js
21511
+ var byteToHex = [];
21512
+ for (let i = 0;i < 256; ++i) {
21513
+ byteToHex.push((i + 256).toString(16).slice(1));
21514
+ }
21515
+ function unsafeStringify(arr2, offset = 0) {
21516
+ return (byteToHex[arr2[offset + 0]] + byteToHex[arr2[offset + 1]] + byteToHex[arr2[offset + 2]] + byteToHex[arr2[offset + 3]] + "-" + byteToHex[arr2[offset + 4]] + byteToHex[arr2[offset + 5]] + "-" + byteToHex[arr2[offset + 6]] + byteToHex[arr2[offset + 7]] + "-" + byteToHex[arr2[offset + 8]] + byteToHex[arr2[offset + 9]] + "-" + byteToHex[arr2[offset + 10]] + byteToHex[arr2[offset + 11]] + byteToHex[arr2[offset + 12]] + byteToHex[arr2[offset + 13]] + byteToHex[arr2[offset + 14]] + byteToHex[arr2[offset + 15]]).toLowerCase();
21517
+ }
21498
21518
 
21499
21519
  // node_modules/uuid/dist/esm/v4.js
21500
21520
  function v4(options, buf, offset) {
@@ -36885,10 +36905,10 @@ function zwitch(key, options) {
36885
36905
  const settings = options || {};
36886
36906
  function one4(value, ...parameters) {
36887
36907
  let fn = one4.invalid;
36888
- const handlers2 = one4.handlers;
36908
+ const handlers3 = one4.handlers;
36889
36909
  if (value && own7.call(value, key)) {
36890
36910
  const id = String(value[key]);
36891
- fn = own7.call(handlers2, id) ? handlers2[id] : one4.unknown;
36911
+ fn = own7.call(handlers3, id) ? handlers3[id] : one4.unknown;
36892
36912
  }
36893
36913
  if (fn) {
36894
36914
  return fn.call(this, value, ...parameters);
@@ -51775,6 +51795,8 @@ class Camera {
51775
51795
  observableItem = null;
51776
51796
  throttledZoom;
51777
51797
  isAnimating = false;
51798
+ isTrackingAnimation = false;
51799
+ trackingAnimationId = null;
51778
51800
  constructor(boardPointer = new Pointer) {
51779
51801
  this.boardPointer = boardPointer;
51780
51802
  this.subject.subscribe((_camera) => {
@@ -51928,6 +51950,45 @@ class Camera {
51928
51950
  this.matrix = new Matrix2(matrix.translateX, matrix.translateY, matrix.scaleX, matrix.scaleY, matrix.shearX, matrix.shearY);
51929
51951
  this.subject.publish(this);
51930
51952
  }
51953
+ animateToMatrix(target, duration = 130) {
51954
+ if (this.trackingAnimationId !== null) {
51955
+ cancelAnimationFrame(this.trackingAnimationId);
51956
+ this.trackingAnimationId = null;
51957
+ }
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
+ 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 {
51979
+ this.trackingAnimationId = null;
51980
+ this.isTrackingAnimation = false;
51981
+ }
51982
+ };
51983
+ this.trackingAnimationId = safeRequestAnimationFrame(animate) || null;
51984
+ }
51985
+ cancelTrackingAnimation() {
51986
+ if (this.trackingAnimationId !== null) {
51987
+ cancelAnimationFrame(this.trackingAnimationId);
51988
+ this.trackingAnimationId = null;
51989
+ }
51990
+ this.isTrackingAnimation = false;
51991
+ }
51931
51992
  useSavedSnapshot(optionalMatrix) {
51932
51993
  if (optionalMatrix) {
51933
51994
  this.applyMatrix(optionalMatrix);
@@ -53201,8 +53262,10 @@ class Presence {
53201
53262
  const throttleCameraEvent = throttleWithDebounce(this.sendCameraPresence.bind(this), 150, 150);
53202
53263
  const checkIsDisableTrackingNeeded = this.getIsDisableTrackingNeeded.bind(this);
53203
53264
  this.board.camera.subject.subscribe((_camera) => {
53204
- throttleCameraEvent(this.board.camera);
53205
- if (checkIsDisableTrackingNeeded()) {
53265
+ if (!this.board.camera.isTrackingAnimation) {
53266
+ throttleCameraEvent(this.board.camera);
53267
+ }
53268
+ if (!this.board.camera.isTrackingAnimation && checkIsDisableTrackingNeeded()) {
53206
53269
  this.disableTracking();
53207
53270
  }
53208
53271
  });
@@ -53461,9 +53524,9 @@ class Presence {
53461
53524
  userCopy.camera = eventData;
53462
53525
  this.updateUserMetaInfo(msg, userCopy);
53463
53526
  this.users.set(msg.userId.toString(), userCopy);
53464
- if (this.trackedUser) {
53527
+ if (this.trackedUser && this.trackedUser.userId === msg.userId.toString()) {
53465
53528
  this.trackedUser.camera = eventData;
53466
- this.board.camera.applyMatrix(new Matrix2(eventData.translateX, eventData.translateY, eventData.scaleX, eventData.scaleY, eventData.shearX, eventData.shearY));
53529
+ this.board.camera.animateToMatrix(new Matrix2(eventData.translateX, eventData.translateY, eventData.scaleX, eventData.scaleY, eventData.shearX, eventData.shearY));
53467
53530
  }
53468
53531
  }
53469
53532
  processDrawSelect(msg) {
@@ -53525,6 +53588,7 @@ class Presence {
53525
53588
  if (!this.trackedUser) {
53526
53589
  return;
53527
53590
  }
53591
+ this.board.camera.cancelTrackingAnimation();
53528
53592
  this.emit({
53529
53593
  method: "StopFollowing",
53530
53594
  timestamp: Date.now(),
@@ -59123,16 +59187,16 @@ function createEvents(board, connection, lastIndex) {
59123
59187
  }
59124
59188
  // src/Events/MessageRouter/createMessageRouter.ts
59125
59189
  function createMessageRouter() {
59126
- const handlers2 = new Map;
59190
+ const handlers3 = new Map;
59127
59191
  function addHandler(type, handler) {
59128
- handlers2.set(type, (message, board) => {
59192
+ handlers3.set(type, (message, board) => {
59129
59193
  if (message.type === type) {
59130
59194
  handler(message, board);
59131
59195
  }
59132
59196
  });
59133
59197
  }
59134
59198
  function handleMessage(message, board) {
59135
- const handler = handlers2.get(message.type);
59199
+ const handler = handlers3.get(message.type);
59136
59200
  if (handler) {
59137
59201
  handler(message, board);
59138
59202
  } else {
package/dist/esm/browser.js CHANGED
@@ -3,25 +3,43 @@ var __getProtoOf = Object.getPrototypeOf;
3
3
  var __defProp = Object.defineProperty;
4
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ function __accessProp(key) {
7
+ return this[key];
8
+ }
9
+ var __toESMCache_node;
10
+ var __toESMCache_esm;
6
11
  var __toESM = (mod, isNodeMode, target) => {
12
+ var canCache = mod != null && typeof mod === "object";
13
+ if (canCache) {
14
+ var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
15
+ var cached = cache.get(mod);
16
+ if (cached)
17
+ return cached;
18
+ }
7
19
  target = mod != null ? __create(__getProtoOf(mod)) : {};
8
20
  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
9
21
  for (let key of __getOwnPropNames(mod))
10
22
  if (!__hasOwnProp.call(to, key))
11
23
  __defProp(to, key, {
12
- get: () => mod[key],
24
+ get: __accessProp.bind(mod, key),
13
25
  enumerable: true
14
26
  });
27
+ if (canCache)
28
+ cache.set(mod, to);
15
29
  return to;
16
30
  };
17
31
  var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
32
+ var __returnValue = (v) => v;
33
+ function __exportSetter(name, newValue) {
34
+ this[name] = __returnValue.bind(null, newValue);
35
+ }
18
36
  var __export = (target, all) => {
19
37
  for (var name in all)
20
38
  __defProp(target, name, {
21
39
  get: all[name],
22
40
  enumerable: true,
23
41
  configurable: true,
24
- set: (newValue) => all[name] = () => newValue
42
+ set: __exportSetter.bind(all, name)
25
43
  });
26
44
  };
27
45
  var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
@@ -18776,15 +18794,9 @@ class CommentCommand {
18776
18794
  }
18777
18795
  }
18778
18796
  }
18779
-
18780
- // node_modules/uuid/dist/esm-browser/stringify.js
18781
- var byteToHex = [];
18782
- for (let i = 0;i < 256; ++i) {
18783
- byteToHex.push((i + 256).toString(16).slice(1));
18784
- }
18785
- function unsafeStringify(arr2, offset = 0) {
18786
- return (byteToHex[arr2[offset + 0]] + byteToHex[arr2[offset + 1]] + byteToHex[arr2[offset + 2]] + byteToHex[arr2[offset + 3]] + "-" + byteToHex[arr2[offset + 4]] + byteToHex[arr2[offset + 5]] + "-" + byteToHex[arr2[offset + 6]] + byteToHex[arr2[offset + 7]] + "-" + byteToHex[arr2[offset + 8]] + byteToHex[arr2[offset + 9]] + "-" + byteToHex[arr2[offset + 10]] + byteToHex[arr2[offset + 11]] + byteToHex[arr2[offset + 12]] + byteToHex[arr2[offset + 13]] + byteToHex[arr2[offset + 14]] + byteToHex[arr2[offset + 15]]).toLowerCase();
18787
- }
18797
+ // node_modules/uuid/dist/esm-browser/native.js
18798
+ var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
18799
+ var native_default = { randomUUID };
18788
18800
 
18789
18801
  // node_modules/uuid/dist/esm-browser/rng.js
18790
18802
  var getRandomValues;
@@ -18799,9 +18811,14 @@ function rng() {
18799
18811
  return getRandomValues(rnds8);
18800
18812
  }
18801
18813
 
18802
- // node_modules/uuid/dist/esm-browser/native.js
18803
- var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
18804
- var native_default = { randomUUID };
18814
+ // node_modules/uuid/dist/esm-browser/stringify.js
18815
+ var byteToHex = [];
18816
+ for (let i = 0;i < 256; ++i) {
18817
+ byteToHex.push((i + 256).toString(16).slice(1));
18818
+ }
18819
+ function unsafeStringify(arr2, offset = 0) {
18820
+ return (byteToHex[arr2[offset + 0]] + byteToHex[arr2[offset + 1]] + byteToHex[arr2[offset + 2]] + byteToHex[arr2[offset + 3]] + "-" + byteToHex[arr2[offset + 4]] + byteToHex[arr2[offset + 5]] + "-" + byteToHex[arr2[offset + 6]] + byteToHex[arr2[offset + 7]] + "-" + byteToHex[arr2[offset + 8]] + byteToHex[arr2[offset + 9]] + "-" + byteToHex[arr2[offset + 10]] + byteToHex[arr2[offset + 11]] + byteToHex[arr2[offset + 12]] + byteToHex[arr2[offset + 13]] + byteToHex[arr2[offset + 14]] + byteToHex[arr2[offset + 15]]).toLowerCase();
18821
+ }
18805
18822
 
18806
18823
  // node_modules/uuid/dist/esm-browser/v4.js
18807
18824
  function v4(options, buf, offset) {
@@ -34259,10 +34276,10 @@ function zwitch(key, options) {
34259
34276
  const settings = options || {};
34260
34277
  function one4(value, ...parameters) {
34261
34278
  let fn = one4.invalid;
34262
- const handlers2 = one4.handlers;
34279
+ const handlers3 = one4.handlers;
34263
34280
  if (value && own6.call(value, key)) {
34264
34281
  const id = String(value[key]);
34265
- fn = own6.call(handlers2, id) ? handlers2[id] : one4.unknown;
34282
+ fn = own6.call(handlers3, id) ? handlers3[id] : one4.unknown;
34266
34283
  }
34267
34284
  if (fn) {
34268
34285
  return fn.call(this, value, ...parameters);
@@ -49148,6 +49165,8 @@ class Camera {
49148
49165
  observableItem = null;
49149
49166
  throttledZoom;
49150
49167
  isAnimating = false;
49168
+ isTrackingAnimation = false;
49169
+ trackingAnimationId = null;
49151
49170
  constructor(boardPointer = new Pointer) {
49152
49171
  this.boardPointer = boardPointer;
49153
49172
  this.subject.subscribe((_camera) => {
@@ -49301,6 +49320,45 @@ class Camera {
49301
49320
  this.matrix = new Matrix2(matrix.translateX, matrix.translateY, matrix.scaleX, matrix.scaleY, matrix.shearX, matrix.shearY);
49302
49321
  this.subject.publish(this);
49303
49322
  }
49323
+ animateToMatrix(target, duration = 130) {
49324
+ if (this.trackingAnimationId !== null) {
49325
+ cancelAnimationFrame(this.trackingAnimationId);
49326
+ this.trackingAnimationId = null;
49327
+ }
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
+ 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 {
49349
+ this.trackingAnimationId = null;
49350
+ this.isTrackingAnimation = false;
49351
+ }
49352
+ };
49353
+ this.trackingAnimationId = safeRequestAnimationFrame(animate) || null;
49354
+ }
49355
+ cancelTrackingAnimation() {
49356
+ if (this.trackingAnimationId !== null) {
49357
+ cancelAnimationFrame(this.trackingAnimationId);
49358
+ this.trackingAnimationId = null;
49359
+ }
49360
+ this.isTrackingAnimation = false;
49361
+ }
49304
49362
  useSavedSnapshot(optionalMatrix) {
49305
49363
  if (optionalMatrix) {
49306
49364
  this.applyMatrix(optionalMatrix);
@@ -50574,8 +50632,10 @@ class Presence {
50574
50632
  const throttleCameraEvent = throttleWithDebounce(this.sendCameraPresence.bind(this), 150, 150);
50575
50633
  const checkIsDisableTrackingNeeded = this.getIsDisableTrackingNeeded.bind(this);
50576
50634
  this.board.camera.subject.subscribe((_camera) => {
50577
- throttleCameraEvent(this.board.camera);
50578
- if (checkIsDisableTrackingNeeded()) {
50635
+ if (!this.board.camera.isTrackingAnimation) {
50636
+ throttleCameraEvent(this.board.camera);
50637
+ }
50638
+ if (!this.board.camera.isTrackingAnimation && checkIsDisableTrackingNeeded()) {
50579
50639
  this.disableTracking();
50580
50640
  }
50581
50641
  });
@@ -50834,9 +50894,9 @@ class Presence {
50834
50894
  userCopy.camera = eventData;
50835
50895
  this.updateUserMetaInfo(msg, userCopy);
50836
50896
  this.users.set(msg.userId.toString(), userCopy);
50837
- if (this.trackedUser) {
50897
+ if (this.trackedUser && this.trackedUser.userId === msg.userId.toString()) {
50838
50898
  this.trackedUser.camera = eventData;
50839
- this.board.camera.applyMatrix(new Matrix2(eventData.translateX, eventData.translateY, eventData.scaleX, eventData.scaleY, eventData.shearX, eventData.shearY));
50899
+ this.board.camera.animateToMatrix(new Matrix2(eventData.translateX, eventData.translateY, eventData.scaleX, eventData.scaleY, eventData.shearX, eventData.shearY));
50840
50900
  }
50841
50901
  }
50842
50902
  processDrawSelect(msg) {
@@ -50898,6 +50958,7 @@ class Presence {
50898
50958
  if (!this.trackedUser) {
50899
50959
  return;
50900
50960
  }
50961
+ this.board.camera.cancelTrackingAnimation();
50901
50962
  this.emit({
50902
50963
  method: "StopFollowing",
50903
50964
  timestamp: Date.now(),
@@ -56496,16 +56557,16 @@ function createEvents(board, connection, lastIndex) {
56496
56557
  }
56497
56558
  // src/Events/MessageRouter/createMessageRouter.ts
56498
56559
  function createMessageRouter() {
56499
- const handlers2 = new Map;
56560
+ const handlers3 = new Map;
56500
56561
  function addHandler(type, handler) {
56501
- handlers2.set(type, (message, board) => {
56562
+ handlers3.set(type, (message, board) => {
56502
56563
  if (message.type === type) {
56503
56564
  handler(message, board);
56504
56565
  }
56505
56566
  });
56506
56567
  }
56507
56568
  function handleMessage(message, board) {
56508
- const handler = handlers2.get(message.type);
56569
+ const handler = handlers3.get(message.type);
56509
56570
  if (handler) {
56510
56571
  handler(message, board);
56511
56572
  } else {
package/dist/esm/index.js CHANGED
@@ -3,25 +3,43 @@ var __getProtoOf = Object.getPrototypeOf;
3
3
  var __defProp = Object.defineProperty;
4
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ function __accessProp(key) {
7
+ return this[key];
8
+ }
9
+ var __toESMCache_node;
10
+ var __toESMCache_esm;
6
11
  var __toESM = (mod, isNodeMode, target) => {
12
+ var canCache = mod != null && typeof mod === "object";
13
+ if (canCache) {
14
+ var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
15
+ var cached = cache.get(mod);
16
+ if (cached)
17
+ return cached;
18
+ }
7
19
  target = mod != null ? __create(__getProtoOf(mod)) : {};
8
20
  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
9
21
  for (let key of __getOwnPropNames(mod))
10
22
  if (!__hasOwnProp.call(to, key))
11
23
  __defProp(to, key, {
12
- get: () => mod[key],
24
+ get: __accessProp.bind(mod, key),
13
25
  enumerable: true
14
26
  });
27
+ if (canCache)
28
+ cache.set(mod, to);
15
29
  return to;
16
30
  };
17
31
  var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
32
+ var __returnValue = (v) => v;
33
+ function __exportSetter(name, newValue) {
34
+ this[name] = __returnValue.bind(null, newValue);
35
+ }
18
36
  var __export = (target, all) => {
19
37
  for (var name in all)
20
38
  __defProp(target, name, {
21
39
  get: all[name],
22
40
  enumerable: true,
23
41
  configurable: true,
24
- set: (newValue) => all[name] = () => newValue
42
+ set: __exportSetter.bind(all, name)
25
43
  });
26
44
  };
27
45
 
@@ -18769,15 +18787,9 @@ class CommentCommand {
18769
18787
  }
18770
18788
  }
18771
18789
  }
18772
-
18773
- // node_modules/uuid/dist/esm-browser/stringify.js
18774
- var byteToHex = [];
18775
- for (let i = 0;i < 256; ++i) {
18776
- byteToHex.push((i + 256).toString(16).slice(1));
18777
- }
18778
- function unsafeStringify(arr2, offset = 0) {
18779
- return (byteToHex[arr2[offset + 0]] + byteToHex[arr2[offset + 1]] + byteToHex[arr2[offset + 2]] + byteToHex[arr2[offset + 3]] + "-" + byteToHex[arr2[offset + 4]] + byteToHex[arr2[offset + 5]] + "-" + byteToHex[arr2[offset + 6]] + byteToHex[arr2[offset + 7]] + "-" + byteToHex[arr2[offset + 8]] + byteToHex[arr2[offset + 9]] + "-" + byteToHex[arr2[offset + 10]] + byteToHex[arr2[offset + 11]] + byteToHex[arr2[offset + 12]] + byteToHex[arr2[offset + 13]] + byteToHex[arr2[offset + 14]] + byteToHex[arr2[offset + 15]]).toLowerCase();
18780
- }
18790
+ // node_modules/uuid/dist/esm-browser/native.js
18791
+ var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
18792
+ var native_default = { randomUUID };
18781
18793
 
18782
18794
  // node_modules/uuid/dist/esm-browser/rng.js
18783
18795
  var getRandomValues;
@@ -18792,9 +18804,14 @@ function rng() {
18792
18804
  return getRandomValues(rnds8);
18793
18805
  }
18794
18806
 
18795
- // node_modules/uuid/dist/esm-browser/native.js
18796
- var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
18797
- var native_default = { randomUUID };
18807
+ // node_modules/uuid/dist/esm-browser/stringify.js
18808
+ var byteToHex = [];
18809
+ for (let i = 0;i < 256; ++i) {
18810
+ byteToHex.push((i + 256).toString(16).slice(1));
18811
+ }
18812
+ function unsafeStringify(arr2, offset = 0) {
18813
+ return (byteToHex[arr2[offset + 0]] + byteToHex[arr2[offset + 1]] + byteToHex[arr2[offset + 2]] + byteToHex[arr2[offset + 3]] + "-" + byteToHex[arr2[offset + 4]] + byteToHex[arr2[offset + 5]] + "-" + byteToHex[arr2[offset + 6]] + byteToHex[arr2[offset + 7]] + "-" + byteToHex[arr2[offset + 8]] + byteToHex[arr2[offset + 9]] + "-" + byteToHex[arr2[offset + 10]] + byteToHex[arr2[offset + 11]] + byteToHex[arr2[offset + 12]] + byteToHex[arr2[offset + 13]] + byteToHex[arr2[offset + 14]] + byteToHex[arr2[offset + 15]]).toLowerCase();
18814
+ }
18798
18815
 
18799
18816
  // node_modules/uuid/dist/esm-browser/v4.js
18800
18817
  function v4(options, buf, offset) {
@@ -34252,10 +34269,10 @@ function zwitch(key, options) {
34252
34269
  const settings = options || {};
34253
34270
  function one4(value, ...parameters) {
34254
34271
  let fn = one4.invalid;
34255
- const handlers2 = one4.handlers;
34272
+ const handlers3 = one4.handlers;
34256
34273
  if (value && own6.call(value, key)) {
34257
34274
  const id = String(value[key]);
34258
- fn = own6.call(handlers2, id) ? handlers2[id] : one4.unknown;
34275
+ fn = own6.call(handlers3, id) ? handlers3[id] : one4.unknown;
34259
34276
  }
34260
34277
  if (fn) {
34261
34278
  return fn.call(this, value, ...parameters);
@@ -49141,6 +49158,8 @@ class Camera {
49141
49158
  observableItem = null;
49142
49159
  throttledZoom;
49143
49160
  isAnimating = false;
49161
+ isTrackingAnimation = false;
49162
+ trackingAnimationId = null;
49144
49163
  constructor(boardPointer = new Pointer) {
49145
49164
  this.boardPointer = boardPointer;
49146
49165
  this.subject.subscribe((_camera) => {
@@ -49294,6 +49313,45 @@ class Camera {
49294
49313
  this.matrix = new Matrix2(matrix.translateX, matrix.translateY, matrix.scaleX, matrix.scaleY, matrix.shearX, matrix.shearY);
49295
49314
  this.subject.publish(this);
49296
49315
  }
49316
+ animateToMatrix(target, duration = 130) {
49317
+ if (this.trackingAnimationId !== null) {
49318
+ cancelAnimationFrame(this.trackingAnimationId);
49319
+ this.trackingAnimationId = null;
49320
+ }
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
+ 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 {
49342
+ this.trackingAnimationId = null;
49343
+ this.isTrackingAnimation = false;
49344
+ }
49345
+ };
49346
+ this.trackingAnimationId = safeRequestAnimationFrame(animate) || null;
49347
+ }
49348
+ cancelTrackingAnimation() {
49349
+ if (this.trackingAnimationId !== null) {
49350
+ cancelAnimationFrame(this.trackingAnimationId);
49351
+ this.trackingAnimationId = null;
49352
+ }
49353
+ this.isTrackingAnimation = false;
49354
+ }
49297
49355
  useSavedSnapshot(optionalMatrix) {
49298
49356
  if (optionalMatrix) {
49299
49357
  this.applyMatrix(optionalMatrix);
@@ -50567,8 +50625,10 @@ class Presence {
50567
50625
  const throttleCameraEvent = throttleWithDebounce(this.sendCameraPresence.bind(this), 150, 150);
50568
50626
  const checkIsDisableTrackingNeeded = this.getIsDisableTrackingNeeded.bind(this);
50569
50627
  this.board.camera.subject.subscribe((_camera) => {
50570
- throttleCameraEvent(this.board.camera);
50571
- if (checkIsDisableTrackingNeeded()) {
50628
+ if (!this.board.camera.isTrackingAnimation) {
50629
+ throttleCameraEvent(this.board.camera);
50630
+ }
50631
+ if (!this.board.camera.isTrackingAnimation && checkIsDisableTrackingNeeded()) {
50572
50632
  this.disableTracking();
50573
50633
  }
50574
50634
  });
@@ -50827,9 +50887,9 @@ class Presence {
50827
50887
  userCopy.camera = eventData;
50828
50888
  this.updateUserMetaInfo(msg, userCopy);
50829
50889
  this.users.set(msg.userId.toString(), userCopy);
50830
- if (this.trackedUser) {
50890
+ if (this.trackedUser && this.trackedUser.userId === msg.userId.toString()) {
50831
50891
  this.trackedUser.camera = eventData;
50832
- this.board.camera.applyMatrix(new Matrix2(eventData.translateX, eventData.translateY, eventData.scaleX, eventData.scaleY, eventData.shearX, eventData.shearY));
50892
+ this.board.camera.animateToMatrix(new Matrix2(eventData.translateX, eventData.translateY, eventData.scaleX, eventData.scaleY, eventData.shearX, eventData.shearY));
50833
50893
  }
50834
50894
  }
50835
50895
  processDrawSelect(msg) {
@@ -50891,6 +50951,7 @@ class Presence {
50891
50951
  if (!this.trackedUser) {
50892
50952
  return;
50893
50953
  }
50954
+ this.board.camera.cancelTrackingAnimation();
50894
50955
  this.emit({
50895
50956
  method: "StopFollowing",
50896
50957
  timestamp: Date.now(),
@@ -56489,16 +56550,16 @@ function createEvents(board, connection, lastIndex) {
56489
56550
  }
56490
56551
  // src/Events/MessageRouter/createMessageRouter.ts
56491
56552
  function createMessageRouter() {
56492
- const handlers2 = new Map;
56553
+ const handlers3 = new Map;
56493
56554
  function addHandler(type, handler) {
56494
- handlers2.set(type, (message, board) => {
56555
+ handlers3.set(type, (message, board) => {
56495
56556
  if (message.type === type) {
56496
56557
  handler(message, board);
56497
56558
  }
56498
56559
  });
56499
56560
  }
56500
56561
  function handleMessage(message, board) {
56501
- const handler = handlers2.get(message.type);
56562
+ const handler = handlers3.get(message.type);
56502
56563
  if (handler) {
56503
56564
  handler(message, board);
56504
56565
  } else {
package/dist/esm/node.js CHANGED
@@ -4,25 +4,43 @@ var __getProtoOf = Object.getPrototypeOf;
4
4
  var __defProp = Object.defineProperty;
5
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
6
6
  var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ function __accessProp(key) {
8
+ return this[key];
9
+ }
10
+ var __toESMCache_node;
11
+ var __toESMCache_esm;
7
12
  var __toESM = (mod, isNodeMode, target) => {
13
+ var canCache = mod != null && typeof mod === "object";
14
+ if (canCache) {
15
+ var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
16
+ var cached = cache.get(mod);
17
+ if (cached)
18
+ return cached;
19
+ }
8
20
  target = mod != null ? __create(__getProtoOf(mod)) : {};
9
21
  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
10
22
  for (let key of __getOwnPropNames(mod))
11
23
  if (!__hasOwnProp.call(to, key))
12
24
  __defProp(to, key, {
13
- get: () => mod[key],
25
+ get: __accessProp.bind(mod, key),
14
26
  enumerable: true
15
27
  });
28
+ if (canCache)
29
+ cache.set(mod, to);
16
30
  return to;
17
31
  };
18
32
  var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
33
+ var __returnValue = (v) => v;
34
+ function __exportSetter(name, newValue) {
35
+ this[name] = __returnValue.bind(null, newValue);
36
+ }
19
37
  var __export = (target, all) => {
20
38
  for (var name in all)
21
39
  __defProp(target, name, {
22
40
  get: all[name],
23
41
  enumerable: true,
24
42
  configurable: true,
25
- set: (newValue) => all[name] = () => newValue
43
+ set: __exportSetter.bind(all, name)
26
44
  });
27
45
  };
28
46
  var __require = /* @__PURE__ */ createRequire(import.meta.url);
@@ -21304,15 +21322,9 @@ class CommentCommand {
21304
21322
  }
21305
21323
  }
21306
21324
  }
21307
-
21308
- // node_modules/uuid/dist/esm/stringify.js
21309
- var byteToHex = [];
21310
- for (let i = 0;i < 256; ++i) {
21311
- byteToHex.push((i + 256).toString(16).slice(1));
21312
- }
21313
- function unsafeStringify(arr2, offset = 0) {
21314
- return (byteToHex[arr2[offset + 0]] + byteToHex[arr2[offset + 1]] + byteToHex[arr2[offset + 2]] + byteToHex[arr2[offset + 3]] + "-" + byteToHex[arr2[offset + 4]] + byteToHex[arr2[offset + 5]] + "-" + byteToHex[arr2[offset + 6]] + byteToHex[arr2[offset + 7]] + "-" + byteToHex[arr2[offset + 8]] + byteToHex[arr2[offset + 9]] + "-" + byteToHex[arr2[offset + 10]] + byteToHex[arr2[offset + 11]] + byteToHex[arr2[offset + 12]] + byteToHex[arr2[offset + 13]] + byteToHex[arr2[offset + 14]] + byteToHex[arr2[offset + 15]]).toLowerCase();
21315
- }
21325
+ // node_modules/uuid/dist/esm/native.js
21326
+ import { randomUUID } from "crypto";
21327
+ var native_default = { randomUUID };
21316
21328
 
21317
21329
  // node_modules/uuid/dist/esm/rng.js
21318
21330
  import { randomFillSync } from "crypto";
@@ -21326,9 +21338,14 @@ function rng() {
21326
21338
  return rnds8Pool.slice(poolPtr, poolPtr += 16);
21327
21339
  }
21328
21340
 
21329
- // node_modules/uuid/dist/esm/native.js
21330
- import { randomUUID } from "crypto";
21331
- var native_default = { randomUUID };
21341
+ // node_modules/uuid/dist/esm/stringify.js
21342
+ var byteToHex = [];
21343
+ for (let i = 0;i < 256; ++i) {
21344
+ byteToHex.push((i + 256).toString(16).slice(1));
21345
+ }
21346
+ function unsafeStringify(arr2, offset = 0) {
21347
+ return (byteToHex[arr2[offset + 0]] + byteToHex[arr2[offset + 1]] + byteToHex[arr2[offset + 2]] + byteToHex[arr2[offset + 3]] + "-" + byteToHex[arr2[offset + 4]] + byteToHex[arr2[offset + 5]] + "-" + byteToHex[arr2[offset + 6]] + byteToHex[arr2[offset + 7]] + "-" + byteToHex[arr2[offset + 8]] + byteToHex[arr2[offset + 9]] + "-" + byteToHex[arr2[offset + 10]] + byteToHex[arr2[offset + 11]] + byteToHex[arr2[offset + 12]] + byteToHex[arr2[offset + 13]] + byteToHex[arr2[offset + 14]] + byteToHex[arr2[offset + 15]]).toLowerCase();
21348
+ }
21332
21349
 
21333
21350
  // node_modules/uuid/dist/esm/v4.js
21334
21351
  function v4(options, buf, offset) {
@@ -36719,10 +36736,10 @@ function zwitch(key, options) {
36719
36736
  const settings = options || {};
36720
36737
  function one4(value, ...parameters) {
36721
36738
  let fn = one4.invalid;
36722
- const handlers2 = one4.handlers;
36739
+ const handlers3 = one4.handlers;
36723
36740
  if (value && own7.call(value, key)) {
36724
36741
  const id = String(value[key]);
36725
- fn = own7.call(handlers2, id) ? handlers2[id] : one4.unknown;
36742
+ fn = own7.call(handlers3, id) ? handlers3[id] : one4.unknown;
36726
36743
  }
36727
36744
  if (fn) {
36728
36745
  return fn.call(this, value, ...parameters);
@@ -51609,6 +51626,8 @@ class Camera {
51609
51626
  observableItem = null;
51610
51627
  throttledZoom;
51611
51628
  isAnimating = false;
51629
+ isTrackingAnimation = false;
51630
+ trackingAnimationId = null;
51612
51631
  constructor(boardPointer = new Pointer) {
51613
51632
  this.boardPointer = boardPointer;
51614
51633
  this.subject.subscribe((_camera) => {
@@ -51762,6 +51781,45 @@ class Camera {
51762
51781
  this.matrix = new Matrix2(matrix.translateX, matrix.translateY, matrix.scaleX, matrix.scaleY, matrix.shearX, matrix.shearY);
51763
51782
  this.subject.publish(this);
51764
51783
  }
51784
+ animateToMatrix(target, duration = 130) {
51785
+ if (this.trackingAnimationId !== null) {
51786
+ cancelAnimationFrame(this.trackingAnimationId);
51787
+ this.trackingAnimationId = null;
51788
+ }
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
+ 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 {
51810
+ this.trackingAnimationId = null;
51811
+ this.isTrackingAnimation = false;
51812
+ }
51813
+ };
51814
+ this.trackingAnimationId = safeRequestAnimationFrame(animate) || null;
51815
+ }
51816
+ cancelTrackingAnimation() {
51817
+ if (this.trackingAnimationId !== null) {
51818
+ cancelAnimationFrame(this.trackingAnimationId);
51819
+ this.trackingAnimationId = null;
51820
+ }
51821
+ this.isTrackingAnimation = false;
51822
+ }
51765
51823
  useSavedSnapshot(optionalMatrix) {
51766
51824
  if (optionalMatrix) {
51767
51825
  this.applyMatrix(optionalMatrix);
@@ -53035,8 +53093,10 @@ class Presence {
53035
53093
  const throttleCameraEvent = throttleWithDebounce(this.sendCameraPresence.bind(this), 150, 150);
53036
53094
  const checkIsDisableTrackingNeeded = this.getIsDisableTrackingNeeded.bind(this);
53037
53095
  this.board.camera.subject.subscribe((_camera) => {
53038
- throttleCameraEvent(this.board.camera);
53039
- if (checkIsDisableTrackingNeeded()) {
53096
+ if (!this.board.camera.isTrackingAnimation) {
53097
+ throttleCameraEvent(this.board.camera);
53098
+ }
53099
+ if (!this.board.camera.isTrackingAnimation && checkIsDisableTrackingNeeded()) {
53040
53100
  this.disableTracking();
53041
53101
  }
53042
53102
  });
@@ -53295,9 +53355,9 @@ class Presence {
53295
53355
  userCopy.camera = eventData;
53296
53356
  this.updateUserMetaInfo(msg, userCopy);
53297
53357
  this.users.set(msg.userId.toString(), userCopy);
53298
- if (this.trackedUser) {
53358
+ if (this.trackedUser && this.trackedUser.userId === msg.userId.toString()) {
53299
53359
  this.trackedUser.camera = eventData;
53300
- this.board.camera.applyMatrix(new Matrix2(eventData.translateX, eventData.translateY, eventData.scaleX, eventData.scaleY, eventData.shearX, eventData.shearY));
53360
+ this.board.camera.animateToMatrix(new Matrix2(eventData.translateX, eventData.translateY, eventData.scaleX, eventData.scaleY, eventData.shearX, eventData.shearY));
53301
53361
  }
53302
53362
  }
53303
53363
  processDrawSelect(msg) {
@@ -53359,6 +53419,7 @@ class Presence {
53359
53419
  if (!this.trackedUser) {
53360
53420
  return;
53361
53421
  }
53422
+ this.board.camera.cancelTrackingAnimation();
53362
53423
  this.emit({
53363
53424
  method: "StopFollowing",
53364
53425
  timestamp: Date.now(),
@@ -58957,16 +59018,16 @@ function createEvents(board, connection, lastIndex) {
58957
59018
  }
58958
59019
  // src/Events/MessageRouter/createMessageRouter.ts
58959
59020
  function createMessageRouter() {
58960
- const handlers2 = new Map;
59021
+ const handlers3 = new Map;
58961
59022
  function addHandler(type, handler) {
58962
- handlers2.set(type, (message, board) => {
59023
+ handlers3.set(type, (message, board) => {
58963
59024
  if (message.type === type) {
58964
59025
  handler(message, board);
58965
59026
  }
58966
59027
  });
58967
59028
  }
58968
59029
  function handleMessage(message, board) {
58969
- const handler = handlers2.get(message.type);
59030
+ const handler = handlers3.get(message.type);
58970
59031
  if (handler) {
58971
59032
  handler(message, board);
58972
59033
  } else {
package/dist/types/Camera/Camera.d.ts CHANGED
@@ -24,6 +24,8 @@ export declare class Camera {
24
24
  private observableItem;
25
25
  private throttledZoom;
26
26
  private isAnimating;
27
+ isTrackingAnimation: boolean;
28
+ private trackingAnimationId;
27
29
  constructor(boardPointer?: Pointer);
28
30
  getMbr(): Mbr;
29
31
  getNotInverseMbr(): Mbr;
@@ -42,6 +44,8 @@ export declare class Camera {
42
44
  saveMatrixSnapshot(): void;
43
45
  setBoardId(id: string): this;
44
46
  applyMatrix(matrix: Matrix): void;
47
+ animateToMatrix(target: Matrix, duration?: number): void;
48
+ cancelTrackingAnimation(): void;
45
49
  /** Returns true if found and used saved snapshot, false otherwise */
46
50
  useSavedSnapshot(optionalMatrix?: Matrix): boolean;
47
51
  updatePositions(): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "microboard-temp",
3
- "version": "0.5.132",
3
+ "version": "0.5.134",
4
4
  "description": "A flexible interactive whiteboard library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",