@inditextech/weave-sdk 0.15.0 → 0.16.1

package/dist/sdk.cjs

@@ -15761,7 +15761,7 @@ function clearContainerTargets(instance) {
 	for (const container of getContainers) container.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
 }
 function checkIfOverContainer(instance, node) {
-	const nodesIntersected = instance.pointIntersectsContainerElement();
+	const nodesIntersected = instance.pointIntersectsContainerElement(node.getParent());
 	let nodeActualContainer = node.getParent();
 	if (nodeActualContainer?.getAttrs().nodeId) nodeActualContainer = instance.getStage().findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
 	let layerToMove = void 0;
@@ -15791,6 +15791,11 @@ function moveNodeToContainer(instance, node) {
 	return layerToMove;
 }
 
+//#endregion
+//#region src/plugins/users-selection/constants.ts
+const WEAVE_USERS_SELECTION_KEY = "usersSelection";
+const WEAVE_USER_SELECTION_KEY = "userSelection";
+
 //#endregion
 //#region src/plugins/nodes-selection/nodes-selection.ts
 var WeaveNodesSelectionPlugin = class extends WeavePlugin {
@@ -15955,6 +15960,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				node: nodeHandler.serialize(node)
 			};
 		});
+		const usersSelectionPlugin = this.instance.getPlugin(WEAVE_USERS_SELECTION_KEY);
+		if (usersSelectionPlugin) usersSelectionPlugin.sendSelectionAwarenessInfo(this.tr);
 		this.instance.emitEvent("onNodesChange", selectedNodes);
 	}
 	removeSelectedNodes() {
@@ -17131,7 +17138,7 @@ var WeaveTargetingManager = class {
 		this.logger = this.instance.getChildLogger("targeting-manager");
 		this.logger.debug("Targeting manager created");
 	}
-	pointIntersectsContainerElement(point) {
+	pointIntersectsContainerElement(actualLayer, point) {
 		const stage = this.instance.getStage();
 		const relativeMousePointer = point ? point : stage.getPointerPosition() ?? {
 			x: 0,
@@ -17143,11 +17150,11 @@ var WeaveTargetingManager = class {
 			if (node.getAttrs().nodeId) {
 				const parent = stage.findOne(`#${node.getAttrs().nodeId}`);
 				intersectedNode = parent;
-				break;
+				continue;
 			}
-			if (node.getAttrs().containerId) {
+			if (node.getAttrs().containerId && node.getAttrs().id !== actualLayer?.getAttrs().id) {
 				intersectedNode = node;
-				break;
+				continue;
 			}
 		}
 		return intersectedNode;
@@ -17912,7 +17919,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.15.0";
+var version = "0.16.1";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18518,8 +18525,8 @@ var Weave = class extends Emittery {
 	unGroup(group) {
 		this.groupsManager.unGroup(group);
 	}
-	pointIntersectsContainerElement(point) {
-		return this.targetingManager.pointIntersectsContainerElement(point);
+	pointIntersectsContainerElement(actualLayer, point) {
+		return this.targetingManager.pointIntersectsContainerElement(actualLayer, point);
 	}
 	getMousePointer(point) {
 		return this.targetingManager.getMousePointer(point);
@@ -21615,33 +21622,199 @@ var WeaveConnectedUsersPlugin = class extends WeavePlugin {
 	}
 };
 
+//#endregion
+//#region src/plugins/users-selection/users-selection.ts
+var WeaveUsersSelectionPlugin = class extends WeavePlugin {
+	constructor(params) {
+		super();
+		const { config } = params;
+		this.config = config;
+		this.usersSelection = {};
+	}
+	getName() {
+		return WEAVE_USERS_SELECTION_KEY;
+	}
+	getLayerName() {
+		return __inditextech_weave_types.WEAVE_AWARENESS_LAYER_ID;
+	}
+	initLayer() {
+		const stage = this.instance.getStage();
+		const layer = new konva.default.Layer({
+			id: this.getLayerName(),
+			listening: false
+		});
+		stage.add(layer);
+	}
+	onRender() {
+		this.renderSelectors();
+	}
+	getLayer() {
+		const stage = this.instance.getStage();
+		return stage.findOne(`#${this.getLayerName()}`);
+	}
+	onInit() {
+		this.instance.addEventListener("onAwarenessChange", (changes) => {
+			const selfUser = this.config.getUser();
+			const allActiveUsers = [];
+			for (const change of changes) {
+				if (!change[WEAVE_USER_SELECTION_KEY]) continue;
+				if (change[WEAVE_USER_SELECTION_KEY] && selfUser.name !== change[WEAVE_USER_SELECTION_KEY].user) {
+					const userSelection = change[WEAVE_USER_SELECTION_KEY];
+					allActiveUsers.push(userSelection.user);
+					this.usersSelection[userSelection.user] = {
+						oldNodes: this.usersSelection[userSelection.user]?.actualNodes ?? {
+							user: userSelection.user,
+							nodes: []
+						},
+						actualNodes: userSelection
+					};
+				}
+			}
+			this.renderSelectors();
+		});
+		this.renderSelectors();
+	}
+	sendSelectionAwarenessInfo(tr) {
+		const userInfo = this.config.getUser();
+		const store = this.instance.getStore();
+		store.setAwarenessInfo(WEAVE_USER_SELECTION_KEY, {
+			user: userInfo.name,
+			nodes: tr.nodes().map((node) => node.getAttrs().id)
+		});
+	}
+	removeSelectionAwarenessInfo() {
+		const store = this.instance.getStore();
+		store.setAwarenessInfo(WEAVE_USER_SELECTION_KEY, void 0);
+	}
+	stringToColor(str) {
+		let hash = 0;
+		str.split("").forEach((char) => {
+			hash = char.charCodeAt(0) + ((hash << 5) - hash);
+		});
+		let color = "#";
+		for (let i = 0; i < 3; i++) {
+			const value = hash >> i * 8 & 255;
+			color += value.toString(16).padStart(2, "0");
+		}
+		return color;
+	}
+	getSelectedNodesRect(nodes) {
+		const stage = this.instance.getStage();
+		const maxPoint = {
+			x: -Infinity,
+			y: -Infinity
+		};
+		const minPoint = {
+			x: Infinity,
+			y: Infinity
+		};
+		for (const nodeId of nodes) {
+			const node = stage.findOne(`#${nodeId}`);
+			if (node) {
+				const nodeRect = node.getClientRect({
+					relativeTo: stage,
+					skipStroke: true
+				});
+				if (nodeRect.x < minPoint.x) minPoint.x = nodeRect.x;
+				if (nodeRect.y < minPoint.y) minPoint.y = nodeRect.y;
+				if (nodeRect.x + nodeRect.width > maxPoint.x) maxPoint.x = nodeRect.x + nodeRect.width;
+				if (nodeRect.y + nodeRect.height > maxPoint.y) maxPoint.y = nodeRect.y + nodeRect.height;
+			}
+		}
+		return {
+			x: minPoint.x,
+			y: minPoint.y,
+			width: Math.abs(maxPoint.x - minPoint.x) * stage.scaleX(),
+			height: Math.abs(maxPoint.y - minPoint.y) * stage.scaleY()
+		};
+	}
+	renderSelectors() {
+		const stage = this.instance.getStage();
+		const selectorsLayer = this.getLayer();
+		if (!this.enabled) return;
+		const selectors = selectorsLayer?.find(".selector") ?? [];
+		for (const selector of selectors) selector.destroy();
+		for (const userPointerKey of Object.keys(this.usersSelection)) {
+			const userSelector = this.usersSelection[userPointerKey];
+			const selectionRect = this.getSelectedNodesRect(userSelector.actualNodes.nodes);
+			const userSelectorNode = new konva.default.Group({
+				name: "selector",
+				id: `selector_${userSelector.actualNodes.user}`,
+				x: selectionRect.x,
+				y: selectionRect.y,
+				width: selectionRect.width / stage.scaleX(),
+				height: selectionRect.height / stage.scaleY(),
+				listening: false
+			});
+			userSelectorNode.moveToBottom();
+			const userSelectorRect = new konva.default.Rect({
+				x: 0,
+				y: 0,
+				id: `selector_${userSelector.actualNodes.user}_rect`,
+				width: selectionRect.width / stage.scaleX(),
+				height: selectionRect.height / stage.scaleY(),
+				fill: "transparent",
+				stroke: this.stringToColor(userSelector.actualNodes.user),
+				strokeWidth: 3,
+				strokeScaleEnabled: false
+			});
+			userSelectorNode.add(userSelectorRect);
+			selectorsLayer?.add(userSelectorNode);
+		}
+		const pointers = selectorsLayer?.find(".pointer") ?? [];
+		for (const pointer of pointers) pointer.moveToTop();
+	}
+	enable() {
+		this.getLayer()?.show();
+		this.enabled = true;
+	}
+	disable() {
+		this.getLayer()?.hide();
+		this.enabled = false;
+	}
+};
+
 //#endregion
 //#region src/plugins/users-pointers/constants.ts
 const WEAVE_USERS_POINTERS_KEY = "usersPointers";
-const WEAVE_USERS_POINTERS_LAYER_ID = "usersPointersLayer";
 const WEAVE_USER_POINTER_KEY = "userPointer";
+const WEAVE_DEFAULT_USER_INFO_FUNCTION = () => ({
+	name: "Unknown",
+	email: "unknown@domain.com"
+});
+const WEAVE_USER_POINTERS_DEFAULT_PROPS = {
+	separation: 8,
+	pointer: {
+		circleRadius: 4,
+		circleStrokeWidth: 0
+	},
+	name: {
+		fontFamily: "Arial",
+		fontSize: 10,
+		backgroundCornerRadius: 0,
+		backgroundPaddingX: 8,
+		backgroundPaddingY: 4
+	}
+};
 
 //#endregion
 //#region src/plugins/users-pointers/users-pointers.ts
 var WeaveUsersPointersPlugin = class extends WeavePlugin {
-	userPointerCircleRadius = 4;
-	userPointerSeparation = 8;
-	userPointerCircleStrokeWidth = 1;
-	userPointerNameFontSize = 10;
-	userPointerBackgroundCornerRadius = 4;
-	userPointerBackgroundPaddingX = 4;
-	userPointerBackgroundPaddingY = 8;
 	constructor(params) {
 		super();
 		const { config } = params;
-		this.usersPointers = {};
 		this.config = config;
+		this.uiConfig = {
+			...WEAVE_USER_POINTERS_DEFAULT_PROPS,
+			...this.config.ui
+		};
+		this.usersPointers = {};
 	}
 	getName() {
 		return WEAVE_USERS_POINTERS_KEY;
 	}
 	getLayerName() {
-		return WEAVE_USERS_POINTERS_LAYER_ID;
+		return __inditextech_weave_types.WEAVE_AWARENESS_LAYER_ID;
 	}
 	initLayer() {
 		const stage = this.instance.getStage();
@@ -21656,7 +21829,7 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 	}
 	getLayer() {
 		const stage = this.instance.getStage();
-		return stage.findOne(`#${WEAVE_USERS_POINTERS_LAYER_ID}`);
+		return stage.findOne(`#${this.getLayerName()}`);
 	}
 	onInit() {
 		const store = this.instance.getStore();
@@ -21679,17 +21852,6 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 					};
 				}
 			}
-			const allActiveUsersPointers = Object.keys(this.usersPointers).map((userPointerKey) => {
-				const pointerInfo = this.usersPointers[userPointerKey];
-				return pointerInfo.actualPos.user;
-			});
-			const inactivePointers = import_lodash.default.differenceWith(allActiveUsersPointers, allActiveUsers, import_lodash.default.isEqual);
-			const pointersLayer = this.getLayer();
-			for (const inactivePointer of inactivePointers) {
-				const userPointerNode = pointersLayer?.findOne(`#${inactivePointer}`);
-				if (userPointerNode) userPointerNode.destroy();
-				delete this.usersPointers[inactivePointer];
-			}
 			this.renderPointers();
 		});
 		stage.on("dragmove", (e) => {
@@ -21714,111 +21876,96 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 		});
 		this.renderPointers();
 	}
-	stringToColour(str) {
+	getContrastTextColor(hex) {
+		const cleaned = hex.replace(/^#/, "");
+		const r = parseInt(cleaned.slice(0, 2), 16);
+		const g = parseInt(cleaned.slice(2, 4), 16);
+		const b = parseInt(cleaned.slice(4, 6), 16);
+		const luminance = (.299 * r + .587 * g + .114 * b) / 255;
+		return luminance > .5 ? "black" : "white";
+	}
+	stringToColor(str) {
 		let hash = 0;
 		str.split("").forEach((char) => {
 			hash = char.charCodeAt(0) + ((hash << 5) - hash);
 		});
-		let colour = "#";
+		let color = "#";
 		for (let i = 0; i < 3; i++) {
 			const value = hash >> i * 8 & 255;
-			colour += value.toString(16).padStart(2, "0");
+			color += value.toString(16).padStart(2, "0");
 		}
-		return colour;
+		return color;
 	}
 	renderPointers() {
 		const stage = this.instance.getStage();
 		const pointersLayer = this.getLayer();
 		if (!this.enabled) return;
+		const pointers = pointersLayer?.find(".pointer") ?? [];
+		for (const pointer of pointers) pointer.destroy();
 		for (const userPointerKey of Object.keys(this.usersPointers)) {
 			const userPointer = this.usersPointers[userPointerKey];
-			const userPointerNode = pointersLayer?.findOne(`#${userPointer.actualPos.user}`);
-			if (!userPointerNode) {
-				const userPointerNode$1 = new konva.default.Group({
-					name: "pointer",
-					id: userPointer.actualPos.user,
-					x: userPointer.actualPos.x,
-					y: userPointer.actualPos.y,
-					opacity: 1,
-					listening: false
-				});
-				const userPointNode$1 = new konva.default.Circle({
-					id: "userPoint",
-					x: 0,
-					y: 0,
-					radius: this.userPointerCircleRadius / stage.scaleX(),
-					fill: this.stringToColour(userPointer.actualPos.user),
-					stroke: "black",
-					strokeWidth: this.userPointerCircleStrokeWidth / stage.scaleX(),
-					listening: false
-				});
-				const userNameNode = new konva.default.Text({
-					id: "userPointName",
-					x: (this.userPointerSeparation + this.userPointerBackgroundPaddingX) / stage.scaleX(),
-					y: 0 / stage.scaleX(),
-					height: userPointNode$1.height() * 2 / stage.scaleX(),
-					text: userPointer.actualPos.user,
-					fontSize: this.userPointerNameFontSize / stage.scaleX(),
-					fontFamily: "NotoSansMono, monospace",
-					fill: "black",
-					align: "left",
-					verticalAlign: "middle",
-					listening: false
-				});
-				const userNameBackground = new konva.default.Rect({
-					id: "userPointRect",
-					x: this.userPointerSeparation / stage.scaleX(),
-					y: -this.userPointerBackgroundPaddingY / stage.scaleX(),
-					width: (userNameNode.width() + this.userPointerBackgroundPaddingX * 2) / stage.scaleX(),
-					height: (userNameNode.height() + this.userPointerBackgroundPaddingY * 2) / stage.scaleX(),
-					cornerRadius: this.userPointerBackgroundCornerRadius / stage.scaleX(),
-					fill: "rgba(0,0,0,0.2)",
-					strokeWidth: 0,
-					listening: false
-				});
-				userPointNode$1.setAttrs({ y: userNameBackground.y() + userNameBackground.height() / 2 });
-				userPointerNode$1.add(userPointNode$1);
-				userPointerNode$1.add(userNameBackground);
-				userPointerNode$1.add(userNameNode);
-				pointersLayer?.add(userPointerNode$1);
-				continue;
-			}
-			const oldPos = {
-				x: userPointer.oldPos.x,
-				y: userPointer.oldPos.y
-			};
-			const actualPos = {
+			const userPointerNode = new konva.default.Group({
+				name: "pointer",
+				id: `pointer_${userPointer.actualPos.user}`,
 				x: userPointer.actualPos.x,
-				y: userPointer.actualPos.y
-			};
-			const hasChanged = !import_lodash.default.isEqual(actualPos, oldPos);
-			const userPointNode = userPointerNode.getChildren((node) => node.getAttrs().id === "userPoint");
-			userPointNode[0]?.setAttrs({
-				radius: this.userPointerCircleRadius / stage.scaleX(),
-				strokeWidth: this.userPointerCircleStrokeWidth / stage.scaleX()
+				y: userPointer.actualPos.y,
+				opacity: 1,
+				listening: false,
+				scaleX: 1 / stage.scaleX(),
+				scaleY: 1 / stage.scaleY()
 			});
-			const userPointNodeText = userPointerNode.getChildren((node) => node.getAttrs().id === "userPointName");
-			userPointNodeText[0]?.setAttrs({
-				x: (this.userPointerSeparation + this.userPointerBackgroundPaddingX) / stage.scaleX(),
-				y: 0 / stage.scaleX(),
-				height: userPointNode[0]?.height(),
-				fontSize: this.userPointerNameFontSize / stage.scaleX()
+			userPointerNode.moveToTop();
+			const { separation, pointer: { circleRadius, circleStrokeWidth }, name: { fontFamily, fontSize, backgroundCornerRadius, backgroundPaddingX, backgroundPaddingY } } = this.uiConfig;
+			const userColor = this.stringToColor(userPointer.actualPos.user);
+			const userContrastColor = this.getContrastTextColor(userColor);
+			const userPointNode = new konva.default.Circle({
+				id: `pointer_${userPointer.actualPos.user}_userPoint`,
+				x: 0,
+				y: 0,
+				radius: circleRadius,
+				fill: userColor,
+				stroke: "black",
+				strokeWidth: circleStrokeWidth,
+				strokeScaleEnabled: false,
+				listening: false
 			});
-			const userPointNodeBackground = userPointerNode.getChildren((node) => node.getAttrs().id === "userPointRect");
-			userPointNodeBackground[0]?.setAttrs({
-				x: this.userPointerSeparation / stage.scaleX(),
-				y: -this.userPointerBackgroundPaddingY / stage.scaleX(),
-				cornerRadius: this.userPointerBackgroundCornerRadius / stage.scaleX(),
-				width: userPointNodeText[0]?.width() + this.userPointerBackgroundPaddingX * 2,
-				height: userPointNodeText[0]?.height() + this.userPointerBackgroundPaddingY * 2
+			const userNameNode = new konva.default.Text({
+				id: `pointer_${userPointer.actualPos.user}_userPointName`,
+				x: separation,
+				y: -circleRadius * 2 + backgroundPaddingY,
+				text: userPointer.actualPos.user.trim(),
+				fontSize,
+				fontFamily,
+				lineHeight: .9,
+				fill: userContrastColor,
+				align: "center",
+				verticalAlign: "middle",
+				listening: false,
+				strokeScaleEnabled: false,
+				ellipsis: true
 			});
-			userPointNode[0]?.setAttrs({ y: userPointNodeBackground[0]?.y() + userPointNodeBackground[0]?.height() / 2 });
-			if (hasChanged) userPointerNode.setAttrs({
-				x: userPointer.actualPos.x,
-				y: userPointer.actualPos.y,
-				opacity: 1
+			const textWidth = userNameNode.getTextWidth();
+			const textHeight = userNameNode.getTextHeight();
+			userNameNode.width(textWidth + backgroundPaddingX * 2);
+			userNameNode.height(textHeight + backgroundPaddingY * 2);
+			const userNameBackground = new konva.default.Rect({
+				id: `pointer_${userPointer.actualPos.user}_userPointRect`,
+				x: separation,
+				y: -backgroundPaddingY,
+				width: textWidth + backgroundPaddingX * 2,
+				height: textHeight + backgroundPaddingY * 2,
+				cornerRadius: backgroundCornerRadius,
+				fill: userColor,
+				listening: false
 			});
+			userPointNode.setAttrs({ y: userNameBackground.y() + userNameBackground.height() / 2 });
+			userPointerNode.add(userPointNode);
+			userPointerNode.add(userNameBackground);
+			userPointerNode.add(userNameNode);
+			pointersLayer?.add(userPointerNode);
 		}
+		const selectors = pointersLayer?.find(".selector") ?? [];
+		for (const selector of selectors) selector.moveToBottom();
 	}
 	enable() {
 		this.getLayer()?.show();
@@ -22248,6 +22395,7 @@ exports.SELECTION_TOOL_STATE = SELECTION_TOOL_STATE
 exports.TEXT_TOOL_ACTION_NAME = TEXT_TOOL_ACTION_NAME
 exports.TEXT_TOOL_STATE = TEXT_TOOL_STATE
 exports.WEAVE_COPY_PASTE_NODES_KEY = WEAVE_COPY_PASTE_NODES_KEY
+exports.WEAVE_DEFAULT_USER_INFO_FUNCTION = WEAVE_DEFAULT_USER_INFO_FUNCTION
 exports.WEAVE_FRAME_NODE_DEFAULT_CONFIG = WEAVE_FRAME_NODE_DEFAULT_CONFIG
 exports.WEAVE_FRAME_NODE_DEFAULT_PROPS = WEAVE_FRAME_NODE_DEFAULT_PROPS
 exports.WEAVE_FRAME_NODE_SIZES = WEAVE_FRAME_NODE_SIZES
@@ -22265,6 +22413,11 @@ exports.WEAVE_NODES_SELECTION_KEY = WEAVE_NODES_SELECTION_KEY
 exports.WEAVE_NODES_SELECTION_LAYER_ID = WEAVE_NODES_SELECTION_LAYER_ID
 exports.WEAVE_NODES_SNAPPING_KEY = WEAVE_NODES_SNAPPING_KEY
 exports.WEAVE_STAGE_GRID_KEY = WEAVE_STAGE_GRID_KEY
+exports.WEAVE_USERS_POINTERS_KEY = WEAVE_USERS_POINTERS_KEY
+exports.WEAVE_USERS_SELECTION_KEY = WEAVE_USERS_SELECTION_KEY
+exports.WEAVE_USER_POINTERS_DEFAULT_PROPS = WEAVE_USER_POINTERS_DEFAULT_PROPS
+exports.WEAVE_USER_POINTER_KEY = WEAVE_USER_POINTER_KEY
+exports.WEAVE_USER_SELECTION_KEY = WEAVE_USER_SELECTION_KEY
 exports.Weave = Weave
 exports.WeaveAction = WeaveAction
 exports.WeaveBrushToolAction = WeaveBrushToolAction
@@ -22301,6 +22454,7 @@ exports.WeaveStore = WeaveStore
 exports.WeaveTextNode = WeaveTextNode
 exports.WeaveTextToolAction = WeaveTextToolAction
 exports.WeaveUsersPointersPlugin = WeaveUsersPointersPlugin
+exports.WeaveUsersSelectionPlugin = WeaveUsersSelectionPlugin
 exports.WeaveZoomInToolAction = WeaveZoomInToolAction
 exports.WeaveZoomOutToolAction = WeaveZoomOutToolAction
 exports.checkIfOverContainer = checkIfOverContainer

package/dist/sdk.d.cts

@@ -436,7 +436,7 @@ declare class Weave extends Emittery {
   bringToFront(node: WeaveElementInstance): void;
   group(nodes: WeaveStateElement[]): void;
   unGroup(group: WeaveStateElement): void;
-  pointIntersectsContainerElement(point?: Vector2d): Konva.Node | undefined;
+  pointIntersectsContainerElement(actualLayer?: Konva.Layer | Konva.Group, point?: Vector2d): Konva.Node | undefined;
   getMousePointer(point?: Vector2d): WeaveMousePointInfo;
   getMousePointerRelativeToContainer(container: Konva.Group | Konva.Layer): WeaveMousePointInfoSimple;
   selectNodesByKey(nodesIds: string[]): void;
@@ -1278,14 +1278,88 @@ declare class WeaveConnectedUsersPlugin extends WeavePlugin {
   disable(): void;
 }
 
+//#endregion
+//#region src/plugins/users-selection/constants.d.ts
+declare const WEAVE_USERS_SELECTION_KEY = "usersSelection";
+declare const WEAVE_USER_SELECTION_KEY = "userSelection";
+
+//#endregion
+//#region src/plugins/users-selection/types.d.ts
+type WeaveUsersSelectionPluginConfig = {
+  getUser: () => WeaveUser;
+};
+type WeaveUsersSelectionPluginParams = {
+  config: WeaveUsersSelectionPluginConfig;
+};
+type WeaveUserSelectionInfo = {
+  user: string;
+  nodes: string[];
+};
+type WeaveUserSelectionKey = typeof WEAVE_USER_SELECTION_KEY;
+
+//#endregion
+//#region src/plugins/users-selection/users-selection.d.ts
+declare class WeaveUsersSelectionPlugin extends WeavePlugin {
+  private usersSelection;
+  private config;
+  constructor(params: WeaveUsersSelectionPluginParams);
+  getName(): string;
+  getLayerName(): string;
+  initLayer(): void;
+  onRender(): void;
+  getLayer(): Konva.Layer | undefined;
+  onInit(): void;
+  sendSelectionAwarenessInfo(tr: Konva.Transformer): void;
+  removeSelectionAwarenessInfo(): void;
+  private stringToColor;
+  private getSelectedNodesRect;
+  private renderSelectors;
+  enable(): void;
+  disable(): void;
+}
+
 //#endregion
 //#region src/plugins/users-pointers/constants.d.ts
+declare const WEAVE_USERS_POINTERS_KEY = "usersPointers";
 declare const WEAVE_USER_POINTER_KEY = "userPointer";
+declare const WEAVE_DEFAULT_USER_INFO_FUNCTION: () => {
+  name: string;
+  email: string;
+};
+declare const WEAVE_USER_POINTERS_DEFAULT_PROPS: {
+  separation: number;
+  pointer: {
+    circleRadius: number;
+    circleStrokeWidth: number;
+  };
+  name: {
+    fontFamily: string;
+    fontSize: number;
+    backgroundCornerRadius: number;
+    backgroundPaddingX: number;
+    backgroundPaddingY: number;
+  };
+};
 
 //#endregion
 //#region src/plugins/users-pointers/types.d.ts
+type WeaveUserPointersUIProperties = {
+  separation: number;
+  pointer: {
+    circleRadius: number;
+    circleStrokeWidth: number;
+  };
+  name: {
+    fontFamily: string;
+    fontSize: number;
+    backgroundCornerRadius: number;
+    backgroundPaddingX: number;
+    backgroundPaddingY: number;
+  };
+};
 type WeaveUsersPointersPluginConfig = {
   getUser: () => WeaveUser;
+  ui?: WeaveUserPointersUIProperties;
 };
 type WeaveUsersPointersPluginParams = {
   config: WeaveUsersPointersPluginConfig;
@@ -1302,13 +1376,7 @@ type WeaveUserPointerKey = typeof WEAVE_USER_POINTER_KEY;
 declare class WeaveUsersPointersPlugin extends WeavePlugin {
   private usersPointers;
   private config;
-  private userPointerCircleRadius;
-  private userPointerSeparation;
-  private userPointerCircleStrokeWidth;
-  private userPointerNameFontSize;
-  private userPointerBackgroundCornerRadius;
-  private userPointerBackgroundPaddingX;
-  private userPointerBackgroundPaddingY;
+  private uiConfig;
   constructor(params: WeaveUsersPointersPluginParams);
   getName(): string;
   getLayerName(): string;
@@ -1316,7 +1384,8 @@ declare class WeaveUsersPointersPlugin extends WeavePlugin {
   onRender(): void;
   getLayer(): Konva.Layer | undefined;
   onInit(): void;
-  private stringToColour;
+  private getContrastTextColor;
+  private stringToColor;
   private renderPointers;
   enable(): void;
   disable(): void;
@@ -1514,4 +1583,4 @@ declare class WeaveNodesSnappingPlugin extends WeavePlugin {
 }
 
 //#endregion
-export { BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, Guide, GuideOrientation, GuideOrientationKeys, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, ImageProps, LineGuide, LineGuideStop, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NodeSnap, NodeSnapKeys, NodeSnappingEdge, NodeSnappingEdges, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, TextSerializable, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_SIZES, WEAVE_FRAME_NODE_SIZES_MULTIPLIER, WEAVE_FRAME_NODE_SIZES_ORIENTATION, WEAVE_FRAME_NODE_SIZES_TYPES, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_NODES_SNAPPING_KEY, WEAVE_STAGE_GRID_KEY, Weave, WeaveAction, WeaveActionPropsChangeEvent, WeaveBrushToolAction, WeaveBrushToolActionState, WeaveBrushToolActionStateKeys, WeaveConnectedUserInfoKey, WeaveConnectedUsers, WeaveConnectedUsersChangeEvent, WeaveConnectedUsersPlugin, WeaveConnectedUsersPluginConfig, WeaveConnectedUsersPluginParams, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveCopyPasteNodesPluginOnCopyEvent, WeaveCopyPasteNodesPluginOnPasteEvent, WeaveCopyPasteNodesPluginOnPasteExternalEvent, WeaveCopyPasteNodesPluginState, WeaveCopyPasteNodesPluginStateKeys, WeaveExportNodeActionParams, WeaveExportNodeToolAction, WeaveExportStageActionParams, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToScreenToolActionParams, WeaveFitToSelectionToolAction, WeaveFitToSelectionToolActionParams, WeaveFrameAttributes, WeaveFrameNode, WeaveFrameNodeParams, WeaveFrameNodeSizes, WeaveFrameNodeSizesInfo, WeaveFrameNodeSizesKeys, WeaveFrameNodeSizesOrientation, WeaveFrameNodeSizesOrientationKeys, WeaveFrameProperties, WeaveFrameToolAction, WeaveFrameToolActionState, WeaveFrameToolActionStateKeys, WeaveFrameToolActionTriggerParams, WeaveFrameToolProps, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveImageToolActionOnEndLoadImageEvent, WeaveImageToolActionOnStartLoadImageEvent, WeaveImageToolActionState, WeaveImageToolActionStateKeys, WeaveImageToolActionTriggerParams, WeaveImageToolActionTriggerReturn, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveMoveToolActionState, WeaveMoveToolActionStateKeys, WeaveNode, WeaveNodesSelectionPlugin, WeaveNodesSelectionPluginConfig, WeaveNodesSelectionPluginOnNodesChangeEvent, WeaveNodesSelectionPluginOnSelectionStateEvent, WeaveNodesSelectionPluginOnStageSelectionEvent, WeaveNodesSelectionPluginParams, WeaveNodesSnappingPlugin, WeaveNodesSnappingPluginConfig, WeaveNodesSnappingPluginParams, WeavePasteModel, WeavePenToolAction, WeavePenToolActionState, WeavePenToolActionStateKeys, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRectangleToolActionState, WeaveRectangleToolActionStateKeys, WeaveSelectionToolAction, WeaveSelectionToolActionState, WeaveSelectionToolActionStateKeys, WeaveStageContextMenuPluginConfig, WeaveStageContextMenuPluginOnNodeContextMenuEvent, WeaveStageContextMenuPluginParams, WeaveStageDropAreaPlugin, WeaveStageDropPluginOnStageDropEvent, WeaveStageGridPlugin, WeaveStageGridPluginConfig, WeaveStageGridPluginParams, WeaveStageGridType, WeaveStageGridTypeKeys, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomChanged, WeaveStageZoomPlugin, WeaveStageZoomPluginConfig, WeaveStageZoomPluginOnZoomChangeEvent, WeaveStageZoomPluginParams, WeaveStore, WeaveTextNode, WeaveTextToolAction, WeaveTextToolActionState, WeaveTextToolActionStateKeys, WeaveToPasteNode, WeaveUserPointer, WeaveUserPointerKey, WeaveUsersPointersPlugin, WeaveUsersPointersPluginConfig, WeaveUsersPointersPluginParams, WeaveZoomInToolAction, WeaveZoomInToolActionParams, WeaveZoomOutToolAction, WeaveZoomOutToolActionParams, checkIfOverContainer, clearContainerTargets, moveNodeToContainer, resetScale };
+export { BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, Guide, GuideOrientation, GuideOrientationKeys, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, ImageProps, LineGuide, LineGuideStop, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NodeSnap, NodeSnapKeys, NodeSnappingEdge, NodeSnappingEdges, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, TextSerializable, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_SIZES, WEAVE_FRAME_NODE_SIZES_MULTIPLIER, WEAVE_FRAME_NODE_SIZES_ORIENTATION, WEAVE_FRAME_NODE_SIZES_TYPES, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_NODES_SNAPPING_KEY, WEAVE_STAGE_GRID_KEY, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTERS_DEFAULT_PROPS, WEAVE_USER_POINTER_KEY, WEAVE_USER_SELECTION_KEY, Weave, WeaveAction, WeaveActionPropsChangeEvent, WeaveBrushToolAction, WeaveBrushToolActionState, WeaveBrushToolActionStateKeys, WeaveConnectedUserInfoKey, WeaveConnectedUsers, WeaveConnectedUsersChangeEvent, WeaveConnectedUsersPlugin, WeaveConnectedUsersPluginConfig, WeaveConnectedUsersPluginParams, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveCopyPasteNodesPluginOnCopyEvent, WeaveCopyPasteNodesPluginOnPasteEvent, WeaveCopyPasteNodesPluginOnPasteExternalEvent, WeaveCopyPasteNodesPluginState, WeaveCopyPasteNodesPluginStateKeys, WeaveExportNodeActionParams, WeaveExportNodeToolAction, WeaveExportStageActionParams, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToScreenToolActionParams, WeaveFitToSelectionToolAction, WeaveFitToSelectionToolActionParams, WeaveFrameAttributes, WeaveFrameNode, WeaveFrameNodeParams, WeaveFrameNodeSizes, WeaveFrameNodeSizesInfo, WeaveFrameNodeSizesKeys, WeaveFrameNodeSizesOrientation, WeaveFrameNodeSizesOrientationKeys, WeaveFrameProperties, WeaveFrameToolAction, WeaveFrameToolActionState, WeaveFrameToolActionStateKeys, WeaveFrameToolActionTriggerParams, WeaveFrameToolProps, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveImageToolActionOnEndLoadImageEvent, WeaveImageToolActionOnStartLoadImageEvent, WeaveImageToolActionState, WeaveImageToolActionStateKeys, WeaveImageToolActionTriggerParams, WeaveImageToolActionTriggerReturn, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveMoveToolActionState, WeaveMoveToolActionStateKeys, WeaveNode, WeaveNodesSelectionPlugin, WeaveNodesSelectionPluginConfig, WeaveNodesSelectionPluginOnNodesChangeEvent, WeaveNodesSelectionPluginOnSelectionStateEvent, WeaveNodesSelectionPluginOnStageSelectionEvent, WeaveNodesSelectionPluginParams, WeaveNodesSnappingPlugin, WeaveNodesSnappingPluginConfig, WeaveNodesSnappingPluginParams, WeavePasteModel, WeavePenToolAction, WeavePenToolActionState, WeavePenToolActionStateKeys, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRectangleToolActionState, WeaveRectangleToolActionStateKeys, WeaveSelectionToolAction, WeaveSelectionToolActionState, WeaveSelectionToolActionStateKeys, WeaveStageContextMenuPluginConfig, WeaveStageContextMenuPluginOnNodeContextMenuEvent, WeaveStageContextMenuPluginParams, WeaveStageDropAreaPlugin, WeaveStageDropPluginOnStageDropEvent, WeaveStageGridPlugin, WeaveStageGridPluginConfig, WeaveStageGridPluginParams, WeaveStageGridType, WeaveStageGridTypeKeys, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomChanged, WeaveStageZoomPlugin, WeaveStageZoomPluginConfig, WeaveStageZoomPluginOnZoomChangeEvent, WeaveStageZoomPluginParams, WeaveStore, WeaveTextNode, WeaveTextToolAction, WeaveTextToolActionState, WeaveTextToolActionStateKeys, WeaveToPasteNode, WeaveUserPointer, WeaveUserPointerKey, WeaveUserPointersUIProperties, WeaveUserSelectionInfo, WeaveUserSelectionKey, WeaveUsersPointersPlugin, WeaveUsersPointersPluginConfig, WeaveUsersPointersPluginParams, WeaveUsersSelectionPlugin, WeaveUsersSelectionPluginConfig, WeaveUsersSelectionPluginParams, WeaveZoomInToolAction, WeaveZoomInToolActionParams, WeaveZoomOutToolAction, WeaveZoomOutToolActionParams, checkIfOverContainer, clearContainerTargets, moveNodeToContainer, resetScale };

package/dist/sdk.d.ts

@@ -436,7 +436,7 @@ declare class Weave extends Emittery {
   bringToFront(node: WeaveElementInstance): void;
   group(nodes: WeaveStateElement[]): void;
   unGroup(group: WeaveStateElement): void;
-  pointIntersectsContainerElement(point?: Vector2d): Konva.Node | undefined;
+  pointIntersectsContainerElement(actualLayer?: Konva.Layer | Konva.Group, point?: Vector2d): Konva.Node | undefined;
   getMousePointer(point?: Vector2d): WeaveMousePointInfo;
   getMousePointerRelativeToContainer(container: Konva.Group | Konva.Layer): WeaveMousePointInfoSimple;
   selectNodesByKey(nodesIds: string[]): void;
@@ -1278,14 +1278,88 @@ declare class WeaveConnectedUsersPlugin extends WeavePlugin {
   disable(): void;
 }
 
+//#endregion
+//#region src/plugins/users-selection/constants.d.ts
+declare const WEAVE_USERS_SELECTION_KEY = "usersSelection";
+declare const WEAVE_USER_SELECTION_KEY = "userSelection";
+
+//#endregion
+//#region src/plugins/users-selection/types.d.ts
+type WeaveUsersSelectionPluginConfig = {
+  getUser: () => WeaveUser;
+};
+type WeaveUsersSelectionPluginParams = {
+  config: WeaveUsersSelectionPluginConfig;
+};
+type WeaveUserSelectionInfo = {
+  user: string;
+  nodes: string[];
+};
+type WeaveUserSelectionKey = typeof WEAVE_USER_SELECTION_KEY;
+
+//#endregion
+//#region src/plugins/users-selection/users-selection.d.ts
+declare class WeaveUsersSelectionPlugin extends WeavePlugin {
+  private usersSelection;
+  private config;
+  constructor(params: WeaveUsersSelectionPluginParams);
+  getName(): string;
+  getLayerName(): string;
+  initLayer(): void;
+  onRender(): void;
+  getLayer(): Konva.Layer | undefined;
+  onInit(): void;
+  sendSelectionAwarenessInfo(tr: Konva.Transformer): void;
+  removeSelectionAwarenessInfo(): void;
+  private stringToColor;
+  private getSelectedNodesRect;
+  private renderSelectors;
+  enable(): void;
+  disable(): void;
+}
+
 //#endregion
 //#region src/plugins/users-pointers/constants.d.ts
+declare const WEAVE_USERS_POINTERS_KEY = "usersPointers";
 declare const WEAVE_USER_POINTER_KEY = "userPointer";
+declare const WEAVE_DEFAULT_USER_INFO_FUNCTION: () => {
+  name: string;
+  email: string;
+};
+declare const WEAVE_USER_POINTERS_DEFAULT_PROPS: {
+  separation: number;
+  pointer: {
+    circleRadius: number;
+    circleStrokeWidth: number;
+  };
+  name: {
+    fontFamily: string;
+    fontSize: number;
+    backgroundCornerRadius: number;
+    backgroundPaddingX: number;
+    backgroundPaddingY: number;
+  };
+};
 
 //#endregion
 //#region src/plugins/users-pointers/types.d.ts
+type WeaveUserPointersUIProperties = {
+  separation: number;
+  pointer: {
+    circleRadius: number;
+    circleStrokeWidth: number;
+  };
+  name: {
+    fontFamily: string;
+    fontSize: number;
+    backgroundCornerRadius: number;
+    backgroundPaddingX: number;
+    backgroundPaddingY: number;
+  };
+};
 type WeaveUsersPointersPluginConfig = {
   getUser: () => WeaveUser;
+  ui?: WeaveUserPointersUIProperties;
 };
 type WeaveUsersPointersPluginParams = {
   config: WeaveUsersPointersPluginConfig;
@@ -1302,13 +1376,7 @@ type WeaveUserPointerKey = typeof WEAVE_USER_POINTER_KEY;
 declare class WeaveUsersPointersPlugin extends WeavePlugin {
   private usersPointers;
   private config;
-  private userPointerCircleRadius;
-  private userPointerSeparation;
-  private userPointerCircleStrokeWidth;
-  private userPointerNameFontSize;
-  private userPointerBackgroundCornerRadius;
-  private userPointerBackgroundPaddingX;
-  private userPointerBackgroundPaddingY;
+  private uiConfig;
   constructor(params: WeaveUsersPointersPluginParams);
   getName(): string;
   getLayerName(): string;
@@ -1316,7 +1384,8 @@ declare class WeaveUsersPointersPlugin extends WeavePlugin {
   onRender(): void;
   getLayer(): Konva.Layer | undefined;
   onInit(): void;
-  private stringToColour;
+  private getContrastTextColor;
+  private stringToColor;
   private renderPointers;
   enable(): void;
   disable(): void;
@@ -1514,4 +1583,4 @@ declare class WeaveNodesSnappingPlugin extends WeavePlugin {
 }
 
 //#endregion
-export { BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, Guide, GuideOrientation, GuideOrientationKeys, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, ImageProps, LineGuide, LineGuideStop, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NodeSnap, NodeSnapKeys, NodeSnappingEdge, NodeSnappingEdges, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, TextSerializable, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_SIZES, WEAVE_FRAME_NODE_SIZES_MULTIPLIER, WEAVE_FRAME_NODE_SIZES_ORIENTATION, WEAVE_FRAME_NODE_SIZES_TYPES, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_NODES_SNAPPING_KEY, WEAVE_STAGE_GRID_KEY, Weave, WeaveAction, WeaveActionPropsChangeEvent, WeaveBrushToolAction, WeaveBrushToolActionState, WeaveBrushToolActionStateKeys, WeaveConnectedUserInfoKey, WeaveConnectedUsers, WeaveConnectedUsersChangeEvent, WeaveConnectedUsersPlugin, WeaveConnectedUsersPluginConfig, WeaveConnectedUsersPluginParams, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveCopyPasteNodesPluginOnCopyEvent, WeaveCopyPasteNodesPluginOnPasteEvent, WeaveCopyPasteNodesPluginOnPasteExternalEvent, WeaveCopyPasteNodesPluginState, WeaveCopyPasteNodesPluginStateKeys, WeaveExportNodeActionParams, WeaveExportNodeToolAction, WeaveExportStageActionParams, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToScreenToolActionParams, WeaveFitToSelectionToolAction, WeaveFitToSelectionToolActionParams, WeaveFrameAttributes, WeaveFrameNode, WeaveFrameNodeParams, WeaveFrameNodeSizes, WeaveFrameNodeSizesInfo, WeaveFrameNodeSizesKeys, WeaveFrameNodeSizesOrientation, WeaveFrameNodeSizesOrientationKeys, WeaveFrameProperties, WeaveFrameToolAction, WeaveFrameToolActionState, WeaveFrameToolActionStateKeys, WeaveFrameToolActionTriggerParams, WeaveFrameToolProps, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveImageToolActionOnEndLoadImageEvent, WeaveImageToolActionOnStartLoadImageEvent, WeaveImageToolActionState, WeaveImageToolActionStateKeys, WeaveImageToolActionTriggerParams, WeaveImageToolActionTriggerReturn, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveMoveToolActionState, WeaveMoveToolActionStateKeys, WeaveNode, WeaveNodesSelectionPlugin, WeaveNodesSelectionPluginConfig, WeaveNodesSelectionPluginOnNodesChangeEvent, WeaveNodesSelectionPluginOnSelectionStateEvent, WeaveNodesSelectionPluginOnStageSelectionEvent, WeaveNodesSelectionPluginParams, WeaveNodesSnappingPlugin, WeaveNodesSnappingPluginConfig, WeaveNodesSnappingPluginParams, WeavePasteModel, WeavePenToolAction, WeavePenToolActionState, WeavePenToolActionStateKeys, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRectangleToolActionState, WeaveRectangleToolActionStateKeys, WeaveSelectionToolAction, WeaveSelectionToolActionState, WeaveSelectionToolActionStateKeys, WeaveStageContextMenuPluginConfig, WeaveStageContextMenuPluginOnNodeContextMenuEvent, WeaveStageContextMenuPluginParams, WeaveStageDropAreaPlugin, WeaveStageDropPluginOnStageDropEvent, WeaveStageGridPlugin, WeaveStageGridPluginConfig, WeaveStageGridPluginParams, WeaveStageGridType, WeaveStageGridTypeKeys, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomChanged, WeaveStageZoomPlugin, WeaveStageZoomPluginConfig, WeaveStageZoomPluginOnZoomChangeEvent, WeaveStageZoomPluginParams, WeaveStore, WeaveTextNode, WeaveTextToolAction, WeaveTextToolActionState, WeaveTextToolActionStateKeys, WeaveToPasteNode, WeaveUserPointer, WeaveUserPointerKey, WeaveUsersPointersPlugin, WeaveUsersPointersPluginConfig, WeaveUsersPointersPluginParams, WeaveZoomInToolAction, WeaveZoomInToolActionParams, WeaveZoomOutToolAction, WeaveZoomOutToolActionParams, checkIfOverContainer, clearContainerTargets, moveNodeToContainer, resetScale };
+export { BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, Guide, GuideOrientation, GuideOrientationKeys, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, ImageProps, LineGuide, LineGuideStop, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NodeSnap, NodeSnapKeys, NodeSnappingEdge, NodeSnappingEdges, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, TextSerializable, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_SIZES, WEAVE_FRAME_NODE_SIZES_MULTIPLIER, WEAVE_FRAME_NODE_SIZES_ORIENTATION, WEAVE_FRAME_NODE_SIZES_TYPES, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_NODES_SNAPPING_KEY, WEAVE_STAGE_GRID_KEY, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTERS_DEFAULT_PROPS, WEAVE_USER_POINTER_KEY, WEAVE_USER_SELECTION_KEY, Weave, WeaveAction, WeaveActionPropsChangeEvent, WeaveBrushToolAction, WeaveBrushToolActionState, WeaveBrushToolActionStateKeys, WeaveConnectedUserInfoKey, WeaveConnectedUsers, WeaveConnectedUsersChangeEvent, WeaveConnectedUsersPlugin, WeaveConnectedUsersPluginConfig, WeaveConnectedUsersPluginParams, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveCopyPasteNodesPluginOnCopyEvent, WeaveCopyPasteNodesPluginOnPasteEvent, WeaveCopyPasteNodesPluginOnPasteExternalEvent, WeaveCopyPasteNodesPluginState, WeaveCopyPasteNodesPluginStateKeys, WeaveExportNodeActionParams, WeaveExportNodeToolAction, WeaveExportStageActionParams, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToScreenToolActionParams, WeaveFitToSelectionToolAction, WeaveFitToSelectionToolActionParams, WeaveFrameAttributes, WeaveFrameNode, WeaveFrameNodeParams, WeaveFrameNodeSizes, WeaveFrameNodeSizesInfo, WeaveFrameNodeSizesKeys, WeaveFrameNodeSizesOrientation, WeaveFrameNodeSizesOrientationKeys, WeaveFrameProperties, WeaveFrameToolAction, WeaveFrameToolActionState, WeaveFrameToolActionStateKeys, WeaveFrameToolActionTriggerParams, WeaveFrameToolProps, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveImageToolActionOnEndLoadImageEvent, WeaveImageToolActionOnStartLoadImageEvent, WeaveImageToolActionState, WeaveImageToolActionStateKeys, WeaveImageToolActionTriggerParams, WeaveImageToolActionTriggerReturn, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveMoveToolActionState, WeaveMoveToolActionStateKeys, WeaveNode, WeaveNodesSelectionPlugin, WeaveNodesSelectionPluginConfig, WeaveNodesSelectionPluginOnNodesChangeEvent, WeaveNodesSelectionPluginOnSelectionStateEvent, WeaveNodesSelectionPluginOnStageSelectionEvent, WeaveNodesSelectionPluginParams, WeaveNodesSnappingPlugin, WeaveNodesSnappingPluginConfig, WeaveNodesSnappingPluginParams, WeavePasteModel, WeavePenToolAction, WeavePenToolActionState, WeavePenToolActionStateKeys, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRectangleToolActionState, WeaveRectangleToolActionStateKeys, WeaveSelectionToolAction, WeaveSelectionToolActionState, WeaveSelectionToolActionStateKeys, WeaveStageContextMenuPluginConfig, WeaveStageContextMenuPluginOnNodeContextMenuEvent, WeaveStageContextMenuPluginParams, WeaveStageDropAreaPlugin, WeaveStageDropPluginOnStageDropEvent, WeaveStageGridPlugin, WeaveStageGridPluginConfig, WeaveStageGridPluginParams, WeaveStageGridType, WeaveStageGridTypeKeys, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomChanged, WeaveStageZoomPlugin, WeaveStageZoomPluginConfig, WeaveStageZoomPluginOnZoomChangeEvent, WeaveStageZoomPluginParams, WeaveStore, WeaveTextNode, WeaveTextToolAction, WeaveTextToolActionState, WeaveTextToolActionStateKeys, WeaveToPasteNode, WeaveUserPointer, WeaveUserPointerKey, WeaveUserPointersUIProperties, WeaveUserSelectionInfo, WeaveUserSelectionKey, WeaveUsersPointersPlugin, WeaveUsersPointersPluginConfig, WeaveUsersPointersPluginParams, WeaveUsersSelectionPlugin, WeaveUsersSelectionPluginConfig, WeaveUsersSelectionPluginParams, WeaveZoomInToolAction, WeaveZoomInToolActionParams, WeaveZoomOutToolAction, WeaveZoomOutToolActionParams, checkIfOverContainer, clearContainerTargets, moveNodeToContainer, resetScale };

package/dist/sdk.js

@@ -1,6 +1,6 @@
 import Konva from "konva";
 import "konva/lib/types";
-import { WEAVE_EXPORT_BACKGROUND_COLOR, WEAVE_EXPORT_FILE_FORMAT, WEAVE_EXPORT_FORMATS, WEAVE_INSTANCE_STATUS, WEAVE_NODE_CUSTOM_EVENTS, WEAVE_NODE_LAYER_ID, WEAVE_NODE_POSITION, WEAVE_UTILITY_LAYER_ID } from "@inditextech/weave-types";
+import { WEAVE_AWARENESS_LAYER_ID, WEAVE_EXPORT_BACKGROUND_COLOR, WEAVE_EXPORT_FILE_FORMAT, WEAVE_EXPORT_FORMATS, WEAVE_INSTANCE_STATUS, WEAVE_NODE_CUSTOM_EVENTS, WEAVE_NODE_LAYER_ID, WEAVE_NODE_POSITION, WEAVE_UTILITY_LAYER_ID } from "@inditextech/weave-types";
 import { getYjsDoc, getYjsValue, observeDeep, syncedStore } from "@syncedstore/core";
 import { Doc, UndoManager } from "yjs";
 import React from "react";
@@ -15761,7 +15761,7 @@ function clearContainerTargets(instance) {
 	for (const container of getContainers) container.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
 }
 function checkIfOverContainer(instance, node) {
-	const nodesIntersected = instance.pointIntersectsContainerElement();
+	const nodesIntersected = instance.pointIntersectsContainerElement(node.getParent());
 	let nodeActualContainer = node.getParent();
 	if (nodeActualContainer?.getAttrs().nodeId) nodeActualContainer = instance.getStage().findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
 	let layerToMove = void 0;
@@ -15791,6 +15791,11 @@ function moveNodeToContainer(instance, node) {
 	return layerToMove;
 }
 
+//#endregion
+//#region src/plugins/users-selection/constants.ts
+const WEAVE_USERS_SELECTION_KEY = "usersSelection";
+const WEAVE_USER_SELECTION_KEY = "userSelection";
+
 //#endregion
 //#region src/plugins/nodes-selection/nodes-selection.ts
 var WeaveNodesSelectionPlugin = class extends WeavePlugin {
@@ -15955,6 +15960,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				node: nodeHandler.serialize(node)
 			};
 		});
+		const usersSelectionPlugin = this.instance.getPlugin(WEAVE_USERS_SELECTION_KEY);
+		if (usersSelectionPlugin) usersSelectionPlugin.sendSelectionAwarenessInfo(this.tr);
 		this.instance.emitEvent("onNodesChange", selectedNodes);
 	}
 	removeSelectedNodes() {
@@ -17131,7 +17138,7 @@ var WeaveTargetingManager = class {
 		this.logger = this.instance.getChildLogger("targeting-manager");
 		this.logger.debug("Targeting manager created");
 	}
-	pointIntersectsContainerElement(point) {
+	pointIntersectsContainerElement(actualLayer, point) {
 		const stage = this.instance.getStage();
 		const relativeMousePointer = point ? point : stage.getPointerPosition() ?? {
 			x: 0,
@@ -17143,11 +17150,11 @@ var WeaveTargetingManager = class {
 			if (node.getAttrs().nodeId) {
 				const parent = stage.findOne(`#${node.getAttrs().nodeId}`);
 				intersectedNode = parent;
-				break;
+				continue;
 			}
-			if (node.getAttrs().containerId) {
+			if (node.getAttrs().containerId && node.getAttrs().id !== actualLayer?.getAttrs().id) {
 				intersectedNode = node;
-				break;
+				continue;
 			}
 		}
 		return intersectedNode;
@@ -17912,7 +17919,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.15.0";
+var version = "0.16.1";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18518,8 +18525,8 @@ var Weave = class extends Emittery {
 	unGroup(group) {
 		this.groupsManager.unGroup(group);
 	}
-	pointIntersectsContainerElement(point) {
-		return this.targetingManager.pointIntersectsContainerElement(point);
+	pointIntersectsContainerElement(actualLayer, point) {
+		return this.targetingManager.pointIntersectsContainerElement(actualLayer, point);
 	}
 	getMousePointer(point) {
 		return this.targetingManager.getMousePointer(point);
@@ -21615,33 +21622,199 @@ var WeaveConnectedUsersPlugin = class extends WeavePlugin {
 	}
 };
 
+//#endregion
+//#region src/plugins/users-selection/users-selection.ts
+var WeaveUsersSelectionPlugin = class extends WeavePlugin {
+	constructor(params) {
+		super();
+		const { config } = params;
+		this.config = config;
+		this.usersSelection = {};
+	}
+	getName() {
+		return WEAVE_USERS_SELECTION_KEY;
+	}
+	getLayerName() {
+		return WEAVE_AWARENESS_LAYER_ID;
+	}
+	initLayer() {
+		const stage = this.instance.getStage();
+		const layer = new Konva.Layer({
+			id: this.getLayerName(),
+			listening: false
+		});
+		stage.add(layer);
+	}
+	onRender() {
+		this.renderSelectors();
+	}
+	getLayer() {
+		const stage = this.instance.getStage();
+		return stage.findOne(`#${this.getLayerName()}`);
+	}
+	onInit() {
+		this.instance.addEventListener("onAwarenessChange", (changes) => {
+			const selfUser = this.config.getUser();
+			const allActiveUsers = [];
+			for (const change of changes) {
+				if (!change[WEAVE_USER_SELECTION_KEY]) continue;
+				if (change[WEAVE_USER_SELECTION_KEY] && selfUser.name !== change[WEAVE_USER_SELECTION_KEY].user) {
+					const userSelection = change[WEAVE_USER_SELECTION_KEY];
+					allActiveUsers.push(userSelection.user);
+					this.usersSelection[userSelection.user] = {
+						oldNodes: this.usersSelection[userSelection.user]?.actualNodes ?? {
+							user: userSelection.user,
+							nodes: []
+						},
+						actualNodes: userSelection
+					};
+				}
+			}
+			this.renderSelectors();
+		});
+		this.renderSelectors();
+	}
+	sendSelectionAwarenessInfo(tr) {
+		const userInfo = this.config.getUser();
+		const store = this.instance.getStore();
+		store.setAwarenessInfo(WEAVE_USER_SELECTION_KEY, {
+			user: userInfo.name,
+			nodes: tr.nodes().map((node) => node.getAttrs().id)
+		});
+	}
+	removeSelectionAwarenessInfo() {
+		const store = this.instance.getStore();
+		store.setAwarenessInfo(WEAVE_USER_SELECTION_KEY, void 0);
+	}
+	stringToColor(str) {
+		let hash = 0;
+		str.split("").forEach((char) => {
+			hash = char.charCodeAt(0) + ((hash << 5) - hash);
+		});
+		let color = "#";
+		for (let i = 0; i < 3; i++) {
+			const value = hash >> i * 8 & 255;
+			color += value.toString(16).padStart(2, "0");
+		}
+		return color;
+	}
+	getSelectedNodesRect(nodes) {
+		const stage = this.instance.getStage();
+		const maxPoint = {
+			x: -Infinity,
+			y: -Infinity
+		};
+		const minPoint = {
+			x: Infinity,
+			y: Infinity
+		};
+		for (const nodeId of nodes) {
+			const node = stage.findOne(`#${nodeId}`);
+			if (node) {
+				const nodeRect = node.getClientRect({
+					relativeTo: stage,
+					skipStroke: true
+				});
+				if (nodeRect.x < minPoint.x) minPoint.x = nodeRect.x;
+				if (nodeRect.y < minPoint.y) minPoint.y = nodeRect.y;
+				if (nodeRect.x + nodeRect.width > maxPoint.x) maxPoint.x = nodeRect.x + nodeRect.width;
+				if (nodeRect.y + nodeRect.height > maxPoint.y) maxPoint.y = nodeRect.y + nodeRect.height;
+			}
+		}
+		return {
+			x: minPoint.x,
+			y: minPoint.y,
+			width: Math.abs(maxPoint.x - minPoint.x) * stage.scaleX(),
+			height: Math.abs(maxPoint.y - minPoint.y) * stage.scaleY()
+		};
+	}
+	renderSelectors() {
+		const stage = this.instance.getStage();
+		const selectorsLayer = this.getLayer();
+		if (!this.enabled) return;
+		const selectors = selectorsLayer?.find(".selector") ?? [];
+		for (const selector of selectors) selector.destroy();
+		for (const userPointerKey of Object.keys(this.usersSelection)) {
+			const userSelector = this.usersSelection[userPointerKey];
+			const selectionRect = this.getSelectedNodesRect(userSelector.actualNodes.nodes);
+			const userSelectorNode = new Konva.Group({
+				name: "selector",
+				id: `selector_${userSelector.actualNodes.user}`,
+				x: selectionRect.x,
+				y: selectionRect.y,
+				width: selectionRect.width / stage.scaleX(),
+				height: selectionRect.height / stage.scaleY(),
+				listening: false
+			});
+			userSelectorNode.moveToBottom();
+			const userSelectorRect = new Konva.Rect({
+				x: 0,
+				y: 0,
+				id: `selector_${userSelector.actualNodes.user}_rect`,
+				width: selectionRect.width / stage.scaleX(),
+				height: selectionRect.height / stage.scaleY(),
+				fill: "transparent",
+				stroke: this.stringToColor(userSelector.actualNodes.user),
+				strokeWidth: 3,
+				strokeScaleEnabled: false
+			});
+			userSelectorNode.add(userSelectorRect);
+			selectorsLayer?.add(userSelectorNode);
+		}
+		const pointers = selectorsLayer?.find(".pointer") ?? [];
+		for (const pointer of pointers) pointer.moveToTop();
+	}
+	enable() {
+		this.getLayer()?.show();
+		this.enabled = true;
+	}
+	disable() {
+		this.getLayer()?.hide();
+		this.enabled = false;
+	}
+};
+
 //#endregion
 //#region src/plugins/users-pointers/constants.ts
 const WEAVE_USERS_POINTERS_KEY = "usersPointers";
-const WEAVE_USERS_POINTERS_LAYER_ID = "usersPointersLayer";
 const WEAVE_USER_POINTER_KEY = "userPointer";
+const WEAVE_DEFAULT_USER_INFO_FUNCTION = () => ({
+	name: "Unknown",
+	email: "unknown@domain.com"
+});
+const WEAVE_USER_POINTERS_DEFAULT_PROPS = {
+	separation: 8,
+	pointer: {
+		circleRadius: 4,
+		circleStrokeWidth: 0
+	},
+	name: {
+		fontFamily: "Arial",
+		fontSize: 10,
+		backgroundCornerRadius: 0,
+		backgroundPaddingX: 8,
+		backgroundPaddingY: 4
+	}
+};
 
 //#endregion
 //#region src/plugins/users-pointers/users-pointers.ts
 var WeaveUsersPointersPlugin = class extends WeavePlugin {
-	userPointerCircleRadius = 4;
-	userPointerSeparation = 8;
-	userPointerCircleStrokeWidth = 1;
-	userPointerNameFontSize = 10;
-	userPointerBackgroundCornerRadius = 4;
-	userPointerBackgroundPaddingX = 4;
-	userPointerBackgroundPaddingY = 8;
 	constructor(params) {
 		super();
 		const { config } = params;
-		this.usersPointers = {};
 		this.config = config;
+		this.uiConfig = {
+			...WEAVE_USER_POINTERS_DEFAULT_PROPS,
+			...this.config.ui
+		};
+		this.usersPointers = {};
 	}
 	getName() {
 		return WEAVE_USERS_POINTERS_KEY;
 	}
 	getLayerName() {
-		return WEAVE_USERS_POINTERS_LAYER_ID;
+		return WEAVE_AWARENESS_LAYER_ID;
 	}
 	initLayer() {
 		const stage = this.instance.getStage();
@@ -21656,7 +21829,7 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 	}
 	getLayer() {
 		const stage = this.instance.getStage();
-		return stage.findOne(`#${WEAVE_USERS_POINTERS_LAYER_ID}`);
+		return stage.findOne(`#${this.getLayerName()}`);
 	}
 	onInit() {
 		const store = this.instance.getStore();
@@ -21679,17 +21852,6 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 					};
 				}
 			}
-			const allActiveUsersPointers = Object.keys(this.usersPointers).map((userPointerKey) => {
-				const pointerInfo = this.usersPointers[userPointerKey];
-				return pointerInfo.actualPos.user;
-			});
-			const inactivePointers = import_lodash.default.differenceWith(allActiveUsersPointers, allActiveUsers, import_lodash.default.isEqual);
-			const pointersLayer = this.getLayer();
-			for (const inactivePointer of inactivePointers) {
-				const userPointerNode = pointersLayer?.findOne(`#${inactivePointer}`);
-				if (userPointerNode) userPointerNode.destroy();
-				delete this.usersPointers[inactivePointer];
-			}
 			this.renderPointers();
 		});
 		stage.on("dragmove", (e) => {
@@ -21714,111 +21876,96 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 		});
 		this.renderPointers();
 	}
-	stringToColour(str) {
+	getContrastTextColor(hex) {
+		const cleaned = hex.replace(/^#/, "");
+		const r = parseInt(cleaned.slice(0, 2), 16);
+		const g = parseInt(cleaned.slice(2, 4), 16);
+		const b = parseInt(cleaned.slice(4, 6), 16);
+		const luminance = (.299 * r + .587 * g + .114 * b) / 255;
+		return luminance > .5 ? "black" : "white";
+	}
+	stringToColor(str) {
 		let hash = 0;
 		str.split("").forEach((char) => {
 			hash = char.charCodeAt(0) + ((hash << 5) - hash);
 		});
-		let colour = "#";
+		let color = "#";
 		for (let i = 0; i < 3; i++) {
 			const value = hash >> i * 8 & 255;
-			colour += value.toString(16).padStart(2, "0");
+			color += value.toString(16).padStart(2, "0");
 		}
-		return colour;
+		return color;
 	}
 	renderPointers() {
 		const stage = this.instance.getStage();
 		const pointersLayer = this.getLayer();
 		if (!this.enabled) return;
+		const pointers = pointersLayer?.find(".pointer") ?? [];
+		for (const pointer of pointers) pointer.destroy();
 		for (const userPointerKey of Object.keys(this.usersPointers)) {
 			const userPointer = this.usersPointers[userPointerKey];
-			const userPointerNode = pointersLayer?.findOne(`#${userPointer.actualPos.user}`);
-			if (!userPointerNode) {
-				const userPointerNode$1 = new Konva.Group({
-					name: "pointer",
-					id: userPointer.actualPos.user,
-					x: userPointer.actualPos.x,
-					y: userPointer.actualPos.y,
-					opacity: 1,
-					listening: false
-				});
-				const userPointNode$1 = new Konva.Circle({
-					id: "userPoint",
-					x: 0,
-					y: 0,
-					radius: this.userPointerCircleRadius / stage.scaleX(),
-					fill: this.stringToColour(userPointer.actualPos.user),
-					stroke: "black",
-					strokeWidth: this.userPointerCircleStrokeWidth / stage.scaleX(),
-					listening: false
-				});
-				const userNameNode = new Konva.Text({
-					id: "userPointName",
-					x: (this.userPointerSeparation + this.userPointerBackgroundPaddingX) / stage.scaleX(),
-					y: 0 / stage.scaleX(),
-					height: userPointNode$1.height() * 2 / stage.scaleX(),
-					text: userPointer.actualPos.user,
-					fontSize: this.userPointerNameFontSize / stage.scaleX(),
-					fontFamily: "NotoSansMono, monospace",
-					fill: "black",
-					align: "left",
-					verticalAlign: "middle",
-					listening: false
-				});
-				const userNameBackground = new Konva.Rect({
-					id: "userPointRect",
-					x: this.userPointerSeparation / stage.scaleX(),
-					y: -this.userPointerBackgroundPaddingY / stage.scaleX(),
-					width: (userNameNode.width() + this.userPointerBackgroundPaddingX * 2) / stage.scaleX(),
-					height: (userNameNode.height() + this.userPointerBackgroundPaddingY * 2) / stage.scaleX(),
-					cornerRadius: this.userPointerBackgroundCornerRadius / stage.scaleX(),
-					fill: "rgba(0,0,0,0.2)",
-					strokeWidth: 0,
-					listening: false
-				});
-				userPointNode$1.setAttrs({ y: userNameBackground.y() + userNameBackground.height() / 2 });
-				userPointerNode$1.add(userPointNode$1);
-				userPointerNode$1.add(userNameBackground);
-				userPointerNode$1.add(userNameNode);
-				pointersLayer?.add(userPointerNode$1);
-				continue;
-			}
-			const oldPos = {
-				x: userPointer.oldPos.x,
-				y: userPointer.oldPos.y
-			};
-			const actualPos = {
+			const userPointerNode = new Konva.Group({
+				name: "pointer",
+				id: `pointer_${userPointer.actualPos.user}`,
 				x: userPointer.actualPos.x,
-				y: userPointer.actualPos.y
-			};
-			const hasChanged = !import_lodash.default.isEqual(actualPos, oldPos);
-			const userPointNode = userPointerNode.getChildren((node) => node.getAttrs().id === "userPoint");
-			userPointNode[0]?.setAttrs({
-				radius: this.userPointerCircleRadius / stage.scaleX(),
-				strokeWidth: this.userPointerCircleStrokeWidth / stage.scaleX()
+				y: userPointer.actualPos.y,
+				opacity: 1,
+				listening: false,
+				scaleX: 1 / stage.scaleX(),
+				scaleY: 1 / stage.scaleY()
 			});
-			const userPointNodeText = userPointerNode.getChildren((node) => node.getAttrs().id === "userPointName");
-			userPointNodeText[0]?.setAttrs({
-				x: (this.userPointerSeparation + this.userPointerBackgroundPaddingX) / stage.scaleX(),
-				y: 0 / stage.scaleX(),
-				height: userPointNode[0]?.height(),
-				fontSize: this.userPointerNameFontSize / stage.scaleX()
+			userPointerNode.moveToTop();
+			const { separation, pointer: { circleRadius, circleStrokeWidth }, name: { fontFamily, fontSize, backgroundCornerRadius, backgroundPaddingX, backgroundPaddingY } } = this.uiConfig;
+			const userColor = this.stringToColor(userPointer.actualPos.user);
+			const userContrastColor = this.getContrastTextColor(userColor);
+			const userPointNode = new Konva.Circle({
+				id: `pointer_${userPointer.actualPos.user}_userPoint`,
+				x: 0,
+				y: 0,
+				radius: circleRadius,
+				fill: userColor,
+				stroke: "black",
+				strokeWidth: circleStrokeWidth,
+				strokeScaleEnabled: false,
+				listening: false
 			});
-			const userPointNodeBackground = userPointerNode.getChildren((node) => node.getAttrs().id === "userPointRect");
-			userPointNodeBackground[0]?.setAttrs({
-				x: this.userPointerSeparation / stage.scaleX(),
-				y: -this.userPointerBackgroundPaddingY / stage.scaleX(),
-				cornerRadius: this.userPointerBackgroundCornerRadius / stage.scaleX(),
-				width: userPointNodeText[0]?.width() + this.userPointerBackgroundPaddingX * 2,
-				height: userPointNodeText[0]?.height() + this.userPointerBackgroundPaddingY * 2
+			const userNameNode = new Konva.Text({
+				id: `pointer_${userPointer.actualPos.user}_userPointName`,
+				x: separation,
+				y: -circleRadius * 2 + backgroundPaddingY,
+				text: userPointer.actualPos.user.trim(),
+				fontSize,
+				fontFamily,
+				lineHeight: .9,
+				fill: userContrastColor,
+				align: "center",
+				verticalAlign: "middle",
+				listening: false,
+				strokeScaleEnabled: false,
+				ellipsis: true
 			});
-			userPointNode[0]?.setAttrs({ y: userPointNodeBackground[0]?.y() + userPointNodeBackground[0]?.height() / 2 });
-			if (hasChanged) userPointerNode.setAttrs({
-				x: userPointer.actualPos.x,
-				y: userPointer.actualPos.y,
-				opacity: 1
+			const textWidth = userNameNode.getTextWidth();
+			const textHeight = userNameNode.getTextHeight();
+			userNameNode.width(textWidth + backgroundPaddingX * 2);
+			userNameNode.height(textHeight + backgroundPaddingY * 2);
+			const userNameBackground = new Konva.Rect({
+				id: `pointer_${userPointer.actualPos.user}_userPointRect`,
+				x: separation,
+				y: -backgroundPaddingY,
+				width: textWidth + backgroundPaddingX * 2,
+				height: textHeight + backgroundPaddingY * 2,
+				cornerRadius: backgroundCornerRadius,
+				fill: userColor,
+				listening: false
 			});
+			userPointNode.setAttrs({ y: userNameBackground.y() + userNameBackground.height() / 2 });
+			userPointerNode.add(userPointNode);
+			userPointerNode.add(userNameBackground);
+			userPointerNode.add(userNameNode);
+			pointersLayer?.add(userPointerNode);
 		}
+		const selectors = pointersLayer?.find(".selector") ?? [];
+		for (const selector of selectors) selector.moveToBottom();
 	}
 	enable() {
 		this.getLayer()?.show();
@@ -22224,4 +22371,4 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 };
 
 //#endregion
-export { BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_SIZES, WEAVE_FRAME_NODE_SIZES_MULTIPLIER, WEAVE_FRAME_NODE_SIZES_ORIENTATION, WEAVE_FRAME_NODE_SIZES_TYPES, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_NODES_SNAPPING_KEY, WEAVE_STAGE_GRID_KEY, Weave, WeaveAction, WeaveBrushToolAction, WeaveConnectedUsersPlugin, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveExportNodeToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveNode, WeaveNodesSelectionPlugin, WeaveNodesSnappingPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStore, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveZoomInToolAction, WeaveZoomOutToolAction, checkIfOverContainer, clearContainerTargets, moveNodeToContainer, resetScale };
+export { BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_SIZES, WEAVE_FRAME_NODE_SIZES_MULTIPLIER, WEAVE_FRAME_NODE_SIZES_ORIENTATION, WEAVE_FRAME_NODE_SIZES_TYPES, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_NODES_SNAPPING_KEY, WEAVE_STAGE_GRID_KEY, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTERS_DEFAULT_PROPS, WEAVE_USER_POINTER_KEY, WEAVE_USER_SELECTION_KEY, Weave, WeaveAction, WeaveBrushToolAction, WeaveConnectedUsersPlugin, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveExportNodeToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveNode, WeaveNodesSelectionPlugin, WeaveNodesSnappingPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStore, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersSelectionPlugin, WeaveZoomInToolAction, WeaveZoomOutToolAction, checkIfOverContainer, clearContainerTargets, moveNodeToContainer, resetScale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inditextech/weave-sdk",
-  "version": "0.15.0",
+  "version": "0.16.1",
   "type": "module",
   "license": "Apache-2.0",
   "author": "Jesus Manuel Piñeiro Cid <jesusmpc@inditex.com>",
@@ -43,7 +43,7 @@
     "version:release": "npm version $RELEASE_VERSION -m \"[npm-scripts] prepare release $RELEASE_VERSION\" --tag-version-prefix \"\""
   },
   "dependencies": {
-    "@inditextech/weave-types": "0.15.0",
+    "@inditextech/weave-types": "0.16.1",
     "@syncedstore/core": "0.6.0",
     "canvas": "3.1.0",
     "konva": "9.3.20",