Mouse Pointers

The Real-time Mouse Pointers feature enables real-time tracking of participants' cursor movements, allowing seamless collaboration within the same room.

How to use

To initialize the Mouse Pointers component, you can follow our quickstart guide.

Using the Mouse Pointers in a canvas element

If you use the canvas element, the mouse will be displayed on the canvas element, it will consider its size and position to display the mouse pointer.

Participant limits

It's important to note that the room supports up to 25 attendees.

Usage

When initializing the Mouse Pointers, you can pass the following properties:

import { MousePointers } from "@superviz/sdk";

const mousepointers = new MousePointers("ELEMENT-ID", {
  callbacks: {
    onGoToPresence: () => {},
  },
});

See below the parameters to use when initializing the Mouse Pointers:

Name	Type	Description
container	string	Required. Specify the ID of the HTML element where the "Mouse Pointers" component will be displayed.
options	PresenceMouseProps	The options to configure the Mouse Pointers component.

Callbacks

When using the Mouse Pointers, you can define a callback to handle a "Go-To" specific event. These callbacks allow you to respond to participant actions and other event-driven functionalities.

To define a callback, you need to pass a function when creating the Mouse Pointers, as shown in the example below:

const mousepointers = new MousePointers("#canvasId", {
  callbacks: {
    onGoToPresence: () => {},
  },
});

onGoToPresence

A function that will trigger once your participant starts following another participant on the Who-is-Online component. You will receive the following parameters with the function:

Name	Type	Description
position	Position	The position of the participant that is being followed.

Example:

const mousepointers = new MousePointers("#canvasId", {
  callbacks: {
    onGoToPresence: onGoToPresenceCallback,
  },
});

function onGoToPresenceCallback(coordinates: Position) {
  console.log("X position: " + coordinates.x);
  console.log("Y position: " + coordinates.y);
}

Methods

transform()

The transform method allows you to move the position of all mouse pointers to a specific location.

Example:

mouse.transform({
	translate: {
		x: 100,
		y: 100
		scaleY: 1,
		scaleX: 1
	},
	scale: 2
});

Parameters

Name	Type	Description
translate	object	The x and y coordinates to move the mouse pointers.
translate.x	number	The x coordinate to move the mouse pointers.
translate.y	number	The y coordinate to move the mouse pointers.
scale	number	The scale to apply to the mouse pointers.

Type Definitions

PresenceMouseProps

Type: object

The options to configure the Mouse Pointers component.

Name	Type	Description
callbacks	object	The callbacks to handle the Mouse Pointers events.

Position

Type: object

Position of the participant mouse pointer.

Name	Type	Description
x	number	The x coordinate of the participant that is being followed.
y	number	The y coordinate of the participant that is being followed.
scaleX	number	The scale of the x coordinate of the participant that is being followed in comparison to the current user scale.
scaleY	number	The scale of the y coordinate of the participant that is being followed in comparison to the current user scale.

Example:

{
  x: 100,
  y: 200,
  scaleX: 1,
  scaleY: 1
}