Overview
The WeaveUsersPointersPlugin class that enables real-time cursor sharing across all connected users on the collaborative canvas. It displays live pointer positions, often tagged with user metadata like name or color, allowing participants to see each other’s activity and collaborate more intuitively.
This plugin helps create a shared sense of presence, making collaborative tools feel dynamic, interactive, and truly multi-user.
The class extends the WeavePlugin class
TypeScript types
type WeaveUser = {
[key: string]: any;
name: string;
email: string;
};
type WeaveUsersPointersPluginConfig = {
getUser: () => WeaveUser;
getUserBackgroundColor: (
user: WeaveUser
) => string | CanvasGradient | undefined;
getUserForegroundColor: (
user: WeaveUser
) => string | CanvasGradient | undefined;
ui?: WeaveUserPointersUIProperties;
};
type WeaveUserPointersUIProperties = {
separation: number;
pointer: {
circleRadius: number;
circleStrokeWidth: number;
};
name: {
fontFamily: string;
fontSize: number;
backgroundCornerRadius: number;
backgroundPaddingX: number;
backgroundPaddingY: number;
};
};
type WeaveUsersPointersPluginParams = {
config: WeaveUsersPointersPluginConfig;
ui?: WeaveUserPointersUIProperties;
};Parameters
For WeaveUsersPointersPluginParams:
| Property | Type | Required | Description |
|---|---|---|---|
|
|
Config parameters for the plugin. |
For WeaveUsersPointersPluginConfig:
| Property | Type | Required | Description |
|---|---|---|---|
|
|
A function that returns the actual instance user metadata. |
|
|
|
A function that returns the color (#RGB or #RGBA) to use to set the pointer background color. |
|
|
|
A function that returns the color (#RGB or #RGBA) to use to set the pointer foreground color. |
|
|
|
An object that defined the cursor properties (UI) |