feat: sync the current translate and scale in the presence mouses

[carlossantos74]

Implementing a simple camera to see what the participants are seeing all the time.

The coordinates that the `follow' functionality is based on have also been changed, before we centralized the mouse of the participant being followed, now we just centralize the view of the participant and calculate the scale that allows the mouse of the participant being followed to be seen at all times by the participant being followed.

So the onGoToPresence callback has been changed to add the scale x and y factors. And also the transform method has been deprecated in the canvas mouse pointers, it's no longer necessary, we calculate all coordinates internally.

• Change camera example:

let cameraZoom = 0;
const cameraOffset = { x: 0, y: 0 };

const mousePointers = new MousePointers('mycanvas', {
  callbacks: {
    onGoToPresence: (coordinates) => {
      cameraZoom = coordinates.scaleX;
      cameraOffset.x = coordinates.x;
      cameraOffset.y = coordinates.y;
    },
  },
});

2024-04-15.14-59-52.mp4

[SuperViz-Dev]

Total Coverage: 97.35%

Coverage Report

File	Branch	Funcs	Lines	Uncovered Lines
src
src/web-components
src/web-components/base
index.ts	75%	100%	83.52%	28, 32, 33, 34, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69
src/web-components/base/styles
icon-button.style.ts	100%	100%	100%
index.ts	100%	100%	100%
sv-hr.style.ts	100%	100%	100%
typography.style.ts	100%	100%	100%
variables.style.ts	100%	100%	100%
src/web-components/base/utils
importStyle.ts	66.67%	100%	100%	3
src/web-components/comments
comments.ts	88.24%	76.92%	87.80%	102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 137, 64, 65, 66, 79, 80, 94, 95, 96, 97, 98, 99
index.ts	100%	100%	100%
src/web-components/comments/components
annotation-filter.ts	100%	100%	100%
annotation-item.ts	100%	96.43%	96.73%	181, 182, 183, 184, 185, 186, 187, 188, 232, 233
annotation-pin.ts	100%	100%	95.19%	118, 123, 124, 125, 126, 183, 184, 185, 74, 75, 76, 77, 78
annotation-resolved.ts	100%	100%	100%
comment-input.ts	100%	96.55%	97.69%	233, 234, 235, 238, 239, 267, 268, 365, 366, 380, 381
comment-item.ts	100%	90.48%	96.43%	102, 103, 104, 279, 280, 89, 90, 91, 92, 95, 96
content.ts	96.15%	81.82%	89.15%	108, 109, 39, 40, 43, 44, 45, 51, 52, 53, 67, 78, 79, 80, 81
delete-comment-modal.ts	100%	100%	100%
float-button.ts	100%	100%	87.65%	104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 50, 51, 55, 56, 72, 81
index.ts	100%	100%	100%
mention-list.ts	100%	100%	100%
topbar.ts	100%	100%	100%
types.ts	100%	100%	100%
src/web-components/comments/css
annotation-filter.style.ts	100%	100%	100%
annotation-item.style.ts	100%	100%	100%
annotation-pin.style.ts	100%	100%	100%
annotation-resolved.style.ts	100%	100%	100%
comment-input.style.ts	100%	100%	100%
comment-item.style.ts	100%	100%	100%
comments.style.ts	100%	100%	100%
content.style.ts	100%	100%	100%
float-button.style.ts	100%	100%	100%
index.ts	100%	100%	100%
mention-list.style.ts	100%	100%	100%
powered-by.style.ts	100%	100%	100%
topbar.style.ts	100%	100%	100%
src/web-components/comments/utils
autocomplete-handler.ts	100%	100%	98.29%	25, 26
mention-handler.ts	100%	100%	100%
watermark.ts	100%	100%	86.15%	15, 16, 17, 18, 19, 20, 21, 22, 23
src/web-components/dropdown
index.style.ts	100%	100%	100%
index.ts	92.31%	100%	97.67%	156, 157, 158, 159, 160, 161, 189, 223, 260, 83, 86
src/web-components/hello-world
index.ts	100%	100%	100%
src/web-components/icon
index.ts	100%	100%	100%
types.ts	100%	100%	100%
src/web-components/modal
index.ts	100%	100%	100%
modal-container.ts	100%	100%	100%
modal.ts	100%	100%	100%
src/web-components/modal/styles
index.style.ts	100%	100%	100%
src/web-components/tooltip
index.style.ts	100%	100%	100%
index.ts	85.19%	100%	95.15%	109, 110, 111, 112, 114, 115, 116, 117, 152, 156, 221, 222, 223, 224, 88, 90, 91, 92, 94, 95, 96
types.ts	100%	100%	100%
src/web-components/who-is-online
index.ts	100%	100%	100%
who-is-online.ts	89.71%	100%	96.90%	243, 244, 262, 263, 264, 276, 277, 278, 290, 291, 292, 321, 322, 323, 60, 61, 66, 67
src/web-components/who-is-online/components
dropdown.ts	97.44%	94.74%	97.86%	138, 139, 140, 141, 142, 143, 146
index.ts	100%	100%	100%
messages.ts	100%	80%	97.27%	126, 127, 135, 136, 144, 145
types.ts	100%	100%	100%
src/web-components/who-is-online/css
dropdown.style.ts	100%	100%	100%
index.ts	100%	100%	100%
messages.style.ts	100%	100%	100%
who-is-online-style.ts	100%	100%	100%

[SuperViz-Dev]

🎉 This PR is included in version 6.1.0-lab.1 🎉

The release is available on:

• GitHub release
• npm package (@lab dist-tag)

Your semantic-release bot 📦🚀

[SuperViz-Dev]

🎉 This PR is included in version 6.1.0-beta.1 🎉

The release is available on:

• GitHub release
• npm package (@beta dist-tag)

Your semantic-release bot 📦🚀

[SuperViz-Dev]

🎉 This PR is included in version 6.1.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀