[ts][webcomponents] Rename cursor to pointer.

spine-ts/spine-webcomponents/example/app.html

@@ -112,7 +112,7 @@
             border: none;
             background: #007bff;
             color: white;
-            cursor: pointer;
+            pointer: pointer;
             border-radius: 3px;
             margin: 1px 0;
         }
@@ -151,7 +151,7 @@
             border: none;
             background: #dc3545;
             color: white;
-            cursor: pointer;
+            pointer: pointer;
         }
 
         .btn.next {
@@ -175,7 +175,7 @@
             align-items: center;
             border: 3px solid transparent;
             transition: border-color 0.3s ease-in-out;
-            cursor: pointer;
+            pointer: pointer;
             background: white;
             box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
         }
@@ -450,7 +450,7 @@
 
                 const itemSlot = widget1.skeleton.findSlot(`bubble-base-${itemName.charAt(0)}`);
                 let onItem = false;
-                widget1.addCursorSlotEventCallback(itemSlot, (slot, event) => {
+                widget1.addPointerSlotEventCallback(itemSlot, (slot, event) => {
 
                     if (event === "enter") {
                         widget1.state.setAnimation(0, `focus-${itemName}`, true);
@@ -613,7 +613,7 @@
             const widget4 = await spine.getSpineWidget("ready").whenReady;
 
             const slot4Bread = widget4.skeleton.findSlot("salad");
-            widget4.addCursorSlotEventCallback(slot4Bread, (slot, event) => {
+            widget4.addPointerSlotEventCallback(slot4Bread, (slot, event) => {
 
                 if (event === "enter") {
                     widget4.state.setAnimation(1, "bread-opening", false);
@@ -627,7 +627,7 @@
             });
 
             const slot4Bottle = widget4.skeleton.findSlot("bottle-base");
-            widget4.addCursorSlotEventCallback(slot4Bottle, (slot, event) => {
+            widget4.addPointerSlotEventCallback(slot4Bottle, (slot, event) => {
 
                 if (event === "enter") {
                     widget4.state.setAnimation(2, "bottle-opening", false);
@@ -641,7 +641,7 @@
             });
 
             const slot4Fries = widget4.skeleton.findSlot("fries-case-back");
-            widget4.addCursorSlotEventCallback(slot4Fries, (slot, event) => {
+            widget4.addPointerSlotEventCallback(slot4Fries, (slot, event) => {
 
                 if (event === "enter") {
                     widget4.state.setAnimation(3, "fries", true);

spine-ts/spine-webcomponents/example/game.html

@@ -102,7 +102,7 @@
 
                 spineboy.skeleton.slots.forEach(slot => {
                     if (slot.data.name === "gun") {
-                        spineboy.addCursorSlotEventCallback(slot, (slot,event) => {
+                        spineboy.addPointerSlotEventCallback(slot, (slot,event) => {
                             if (event === "down") {
                                 spineboy.state.setAnimation(1, "shoot", false);
                             }
@@ -110,7 +110,7 @@
                     }
 
                     if (slot.data.name === "torso") {
-                        spineboy.addCursorSlotEventCallback(slot, (slot,event) => {
+                        spineboy.addPointerSlotEventCallback(slot, (slot,event) => {
                             if (event === "down") {
                                 spineboy.state.setAnimation(0, "jump", false).mixDuration = 0.2;
                                 spineboy.state.addAnimation(0, "walk", true).mixDuration = 0.2;
@@ -119,7 +119,7 @@
                     }
 
                     if (slot.data.name === "head") {
-                        spineboy.addCursorSlotEventCallback(slot, (slot,event) => {
+                        spineboy.addPointerSlotEventCallback(slot, (slot,event) => {
                             if (event === "down") {
                                 spineboy.state.setAnimation(1, "run", true).mixDuration = 0.2;
                             } else {
@@ -158,7 +158,7 @@
 
                         flowers.push(slot);
 
-                        windmill.addCursorSlotEventCallback(slot, (slot, event) => {
+                        windmill.addPointerSlotEventCallback(slot, (slot, event) => {
                             if (ammo === 0) return;
 
                             if (event !== "down") return;

spine-ts/spine-webcomponents/example/login.html

@@ -49,8 +49,8 @@
 
                 <div style="margin-bottom: 10px; color: black">Password is <code>password</code></div>
 
-                <div style="height: 75px; cursor: pointer;">
-                    <div id="button-text" style="font-size: xx-large; cursor: pointer; user-select: none; display: none;"> LOGIN </div>
+                <div style="height: 75px; pointer: pointer;">
+                    <div id="button-text" style="font-size: xx-large; pointer: pointer; user-select: none; display: none;"> LOGIN </div>
                     <spine-skeleton
                         identifier="button-login"
                         atlas="/assets/pwd/button.atlas"
@@ -69,7 +69,7 @@
             <p>
                 The chibi sticker does the following:
                 <ul>
-                    <li>It looks at the cursor when no input field is selected</li>
+                    <li>It looks at the pointer when no input field is selected</li>
                     <li>Look at the caret when username input field is selected</li>
                     <li>Cover its eyes when password input field is selected</li>
                     <li>React in two different ways depending on the password</li>
@@ -79,7 +79,7 @@
             <p>
                 The button does the following:
                 <ul>
-                    <li>Starts some animation when cursor enters, leaves, stays, or click the button</li>
+                    <li>Starts some animation when pointer enters, leaves, stays, or click the button</li>
                     <li>Appends a div containing the <code>LOGIN</code> text to a slot</li>
                     <li>Submits the form on click</li>
                 </ul>
@@ -100,7 +100,7 @@
             await widgetButton.whenReady;
 
             widgetButton.skeleton.color.set(.85, .85, .85, 1);
-            widgetButton.cursorEventCallback = (event, originalEvent) => {
+            widgetButton.pointerEventCallback = (event, originalEvent) => {
                 if (event === "enter") {
                     widgetButton.state.setAnimation(0, "enhance-in", false);
                     widgetButton.state.setAnimation(1, "shadow-in", false);
@@ -150,7 +150,7 @@
             skinSelect.addEventListener('change', (e) => widget.skin = e.target.value);
 
             // click on spineboy
-            widget.cursorEventCallback = (event) => {
+            widget.pointerEventCallback = (event) => {
                 if (event === "down") {
                     widget.state.setAnimation(0, "interactive/pwd/touch", false);
                     widget.state.addAnimation(0, "interactive/head/idle", true);
@@ -226,8 +226,8 @@
                     blendTo(moveVector[0], moveVector[1]);
                 } else {
                     const { x, y, width, height} = widget.getHostElement().getBoundingClientRect();
-                    const l = -((widget.overlay.cursorCanvasX - (x + width)) / window.innerWidth) * ALPHA_LEFT_RANGE;
-                    const d = ((widget.overlay.cursorCanvasY - (y + height)) / window.innerHeight) * ALPHA_DOWN_RANGE;
+                    const l = -((widget.overlay.pointerCanvasX - (x + width)) / window.innerWidth) * ALPHA_LEFT_RANGE;
+                    const d = ((widget.overlay.pointerCanvasY - (y + height)) / window.innerHeight) * ALPHA_DOWN_RANGE;
                     blendTo(l, d);
                 }
             };

spine-ts/spine-webcomponents/example/team.html

@@ -106,7 +106,7 @@
 
             const emotes = widget.skeleton.data.animations.reduce((acc, { name }) => name.startsWith("emotes") ? [...acc, name] : acc, []);
             let leaveAnimation = "emotes/wave";
-            widget.cursorEventCallback = (event) => {
+            widget.pointerEventCallback = (event) => {
                 if (event === "enter") widget.state.setAnimation(0, "emotes/hooray", true).mixDuration = .15;
                 else if (event === "leave") widget.state.setAnimation(0, leaveAnimation, true).mixDuration = .25;
                 else if (event === "down") {

spine-ts/spine-webcomponents/example/tutorial.html

@@ -2898,21 +2898,21 @@ tank.beforeUpdateWorldTransforms = (delta, skeleton, state) => {
 
     <div class="section vertical-split" >
         <div class="split-left">
-            If you need to determine the cursor position in the overlay world, you might find useful the following properties.
+            If you need to determine the pointer position in the overlay world, you might find useful the following properties.
             <br>
             For <code>spine-skeleton</code>:
             <ul>
-                <li><code>cursorWorldX</code> and <code>cursorWorldY</code> are the x and y of the cursor relative to the skeleton root (spine world).</li>
+                <li><code>pointerWorldX</code> and <code>pointerWorldY</code> are the x and y of the pointer relative to the skeleton root (spine world).</li>
                 <li><code>worldX</code> and <code>worldY</code> are the x and y of the root relative to the canvas/webgl context origin (spine world).</li>
             </ul>
 
             For <code>spine-overlay</code>:
             <ul>
-                <li><code>cursorCanvasX</code> and <code>cursorCanvasY</code> are the x and y of the cursor relative to the canvas top-left corner (screen world).</li>
-                <li><code>cursorWorldX</code> and <code>cursorWorldY</code> are the x and y of the cursor relative to the canvas/webgl context origin (spine world).</li>
+                <li><code>pointerCanvasX</code> and <code>pointerCanvasY</code> are the x and y of the pointer relative to the canvas top-left corner (screen world).</li>
+                <li><code>pointerWorldX</code> and <code>pointerWorldY</code> are the x and y of the pointer relative to the canvas/webgl context origin (spine world).</li>
             </ul>
 
-            You can use these properties to interact with your widget. See the following examples where the owl eyes will follow the cursor, even if you drag the owls to another position.
+            You can use these properties to interact with your widget. See the following examples where the owl eyes will follow the pointer, even if you drag the owls to another position.
             Exaggerate the movement by deselecting the checkbox below.
 
             <br>
@@ -3002,8 +3002,8 @@ checkbox.addEventListener('change', () => limitOwl = checkbox.checked);
 
 const updateControl = (widget, controlBone, mouseX, mouseY, tempVector) => {
     controlBone.parent.worldToLocal(tempVector.set(
-        widget.cursorWorldX,
-        widget.cursorWorldY,
+        widget.pointerWorldX,
+        widget.pointerWorldY,
     ));
 
     let x = tempVector.x;
@@ -3094,8 +3094,8 @@ checkbox.addEventListener('change', () => limitOwl = checkbox.checked);
 
 const updateControl = (widget, controlBone, mouseX, mouseY, tempVector) => {
     controlBone.parent.worldToLocal(tempVector.set(
-        widget.cursorWorldX,
-        widget.cursorWorldY,
+        widget.pointerWorldX,
+        widget.pointerWorldY,
     ));
 
     let x = tempVector.x;
@@ -3138,7 +3138,7 @@ const updateControl = (widget, controlBone, mouseX, mouseY, tempVector) => {
             The available events are <code>down</code>, <code>up</code>, <code>enter</code>, <code>leave</code>, <code>move</code>, and <code>drag</code>.
             <br>
             <br>
-            In the following example, if the cursor enters the bounds, the jump animation is set, while the wave animation is set when the cursor leaves.
+            In the following example, if the pointer enters the bounds, the jump animation is set, while the wave animation is set when the pointer leaves.
             <br>
             If you click on the <code>head-base</code> slot (the face), you can change the normal and dark tint with the colors selected in the two following selectors.
 
@@ -3183,7 +3183,7 @@ const darkPicker = document.getElementById("dark-picker");
 [0, 1].forEach(async (i) => {
     const widget = await spine.getSpineWidget(`interactive${i}`).whenReady;
 
-    widget.cursorEventCallback = (event) => {
+    widget.pointerEventCallback = (event) => {
         if (event === "enter") widget.state.setAnimation(0, "emotes/hooray", true).mixDuration = .15;
         if (event === "leave") widget.state.setAnimation(0, "emotes/wave", true).mixDuration = .25;
     }
@@ -3191,7 +3191,7 @@ const darkPicker = document.getElementById("dark-picker");
     const tempColor = new spine.Color();
     const slot = widget.skeleton.findSlot("head-base");
     slot.darkColor = new spine.Color(0, 0, 0, 1);
-    widget.addCursorSlotEventCallback(slot, (slot, event) => {
+    widget.addPointerSlotEventCallback(slot, (slot, event) => {
         if (event === "down") {
             slot.darkColor.setFromColor(spine.Color.fromString(darkPicker.value, tempColor));
             slot.color.setFromColor(spine.Color.fromString(colorPicker.value, tempColor));
@@ -3226,7 +3226,7 @@ const darkPicker = document.getElementById("dark-picker");
 [0, 1].forEach(async (i) => {
     const widget = await spine.getSpineWidget(\`interactive\${i}\`).whenReady;
 
-    widget.cursorEventCallback = (event) => {
+    widget.pointerEventCallback = (event) => {
         if (event === "enter") widget.state.setAnimation(0, "emotes/hooray", true).mixDuration = .15;
         if (event === "leave") widget.state.setAnimation(0, "emotes/wave", true).mixDuration = .25;
     }
@@ -3234,7 +3234,7 @@ const darkPicker = document.getElementById("dark-picker");
     const tempColor = new spine.Color();
     const slot = widget.skeleton.findSlot("head-base");
     slot.darkColor = new spine.Color(0, 0, 0, 1);
-    widget.addCursorSlotEventCallback(slot, (slot, event) => {
+    widget.addPointerSlotEventCallback(slot, (slot, event) => {
         if (event === "down") {
             slot.darkColor.setFromColor(spine.Color.fromString(darkPicker.value, tempColor));
             slot.color.setFromColor(spine.Color.fromString(colorPicker.value, tempColor));
@@ -3478,7 +3478,7 @@ const darkPicker = document.getElementById("dark-picker");
         resizeHandle.style.right = "0";
         resizeHandle.style.position = "absolute";
         resizeHandle.style["background-color"] = "#007bff";
-        resizeHandle.style["cursor"] = "se-resize";
+        resizeHandle.style["pointer"] = "se-resize";
 
         element.style["position"] = "relative";
         element.style["touch-action"] = "none";

spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts

@@ -708,36 +708,36 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 		const transparentRed = new Color(1, 0, 0, .3);
 	}
 
-	public cursorCanvasX = 1;
-	public cursorCanvasY = 1;
-	public cursorWorldX = 1;
-	public cursorWorldY = 1;
+	public pointerCanvasX = 1;
+	public pointerCanvasY = 1;
+	public pointerWorldX = 1;
+	public pointerWorldY = 1;
 
 	private tempVector = new Vector3();
-	private updateCursor (input: Point) {
-		this.cursorCanvasX = input.x - window.scrollX;
-		this.cursorCanvasY = input.y - window.scrollY;
+	private updatePointer (input: Point) {
+		this.pointerCanvasX = input.x - window.scrollX;
+		this.pointerCanvasY = input.y - window.scrollY;
 
 		if (this.appendedToBody) {
 			const ref = this.parentElement!.getBoundingClientRect();
-			this.cursorCanvasX -= ref.left;
-			this.cursorCanvasY -= ref.top;
+			this.pointerCanvasX -= ref.left;
+			this.pointerCanvasY -= ref.top;
 		}
 
 		let tempVector = this.tempVector;
-		tempVector.set(this.cursorCanvasX, this.cursorCanvasY, 0);
+		tempVector.set(this.pointerCanvasX, this.pointerCanvasY, 0);
 		this.renderer.camera.screenToWorld(tempVector, this.canvas.clientWidth, this.canvas.clientHeight);
 
 		if (Number.isNaN(tempVector.x) || Number.isNaN(tempVector.y)) return;
-		this.cursorWorldX = tempVector.x;
-		this.cursorWorldY = tempVector.y;
+		this.pointerWorldX = tempVector.x;
+		this.pointerWorldY = tempVector.y;
 	}
 
-	private updateWidgetCursor (widget: SpineWebComponentSkeleton): boolean {
+	private updateWidgetPointer (widget: SpineWebComponentSkeleton): boolean {
 		if (widget.worldX === Infinity) return false;
 
-		widget.cursorWorldX = this.cursorWorldX - widget.worldX;
-		widget.cursorWorldY = this.cursorWorldY - widget.worldY;
+		widget.pointerWorldX = this.pointerWorldX - widget.worldX;
+		widget.pointerWorldY = this.pointerWorldY - widget.worldY;
 
 		return true;
 	}
@@ -757,28 +757,28 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 		let lastX = 0;
 		let lastY = 0;
 		inputManager.addListener({
-			// moved is used to pass cursor position wrt to canvas and widget position and currently is EXPERIMENTAL
+			// moved is used to pass pointer position wrt to canvas and widget position and currently is EXPERIMENTAL
 			moved: (x, y, ev) => {
 				const input = getInput(ev);
-				this.updateCursor(input);
+				this.updatePointer(input);
 
 				for (const widget of this.widgets) {
-					if (!this.updateWidgetCursor(widget) || !widget.onScreen) continue;
+					if (!this.updateWidgetPointer(widget) || !widget.onScreen) continue;
 
-					widget.cursorEventUpdate("move", ev);
+					widget.pointerEventUpdate("move", ev);
 				}
 			},
 			down: (x, y, ev) => {
 				const input = getInput(ev);
 
-				this.updateCursor(input);
+				this.updatePointer(input);
 
 				for (const widget of this.widgets) {
-					if (!this.updateWidgetCursor(widget) || widget.isOffScreenAndWasMoved()) continue;
+					if (!this.updateWidgetPointer(widget) || widget.isOffScreenAndWasMoved()) continue;
 
-					widget.cursorEventUpdate("down", ev);
+					widget.pointerEventUpdate("down", ev);
 
-					if ((widget.isInteractive && widget.cursorInsideBounds) || (!widget.isInteractive && widget.isCursorInsideBounds())) {
+					if ((widget.isInteractive && widget.pointerInsideBounds) || (!widget.isInteractive && widget.isPointerInsideBounds())) {
 						if (!widget.isDraggable) continue;
 
 						widget.dragging = true;
@@ -795,12 +795,12 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 				let dragX = input.x - lastX;
 				let dragY = input.y - lastY;
 
-				this.updateCursor(input);
+				this.updatePointer(input);
 
 				for (const widget of this.widgets) {
-					if (!this.updateWidgetCursor(widget) || widget.isOffScreenAndWasMoved()) continue;
+					if (!this.updateWidgetPointer(widget) || widget.isOffScreenAndWasMoved()) continue;
 
-					widget.cursorEventUpdate("drag", ev);
+					widget.pointerEventUpdate("drag", ev);
 
 					if (!widget.dragging) continue;
 
@@ -818,8 +818,8 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 				for (const widget of this.widgets) {
 					widget.dragging = false;
 
-					if (widget.cursorInsideBounds) {
-						widget.cursorEventUpdate("up", ev);
+					if (widget.pointerInsideBounds) {
+						widget.pointerEventUpdate("up", ev);
 					}
 				}
 			}

spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts

@@ -64,8 +64,8 @@ export type AnimationsInfo = Record<string, {
 	animations: Array<AnimationsType>
 }>;
 export type AnimationsType = { animationName: string | "#EMPTY#", loop?: boolean, delay?: number, mixDuration?: number };
-export type CursorEventType = "down" | "up" | "enter" | "leave" | "move" | "drag";
-export type CursorEventTypesInput = Exclude<CursorEventType, "enter" | "leave">;
+export type PointerEventType = "down" | "up" | "enter" | "leave" | "move" | "drag";
+export type PointerEventTypesInput = Exclude<PointerEventType, "enter" | "leave">;
 
 // The properties that map to widget attributes
 interface WidgetAttributes {
@@ -410,16 +410,16 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 	public worldY = Infinity;
 
 	/**
-	 * The x coordinate of the cursor relative to the cursor relative to the skeleton root in spine world coordinates.
+	 * The x coordinate of the pointer relative to the pointer relative to the skeleton root in spine world coordinates.
 	 * This is an experimental property and might be removed in the future.
 	 */
-	public cursorWorldX = 1;
+	public pointerWorldX = 1;
 
 	/**
-	 * The x coordinate of the cursor relative to the cursor relative to the skeleton root in spine world coordinates.
+	 * The x coordinate of the pointer relative to the pointer relative to the skeleton root in spine world coordinates.
 	 * This is an experimental property and might be removed in the future.
 	 */
-	public cursorWorldY = 1;
+	public pointerWorldY = 1;
 
 	/**
 	 * If true, the widget is interactive
@@ -429,30 +429,30 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 	public isInteractive = false;
 
 	/**
-	 * If the widget is interactive, this method is invoked with a {@link CursorEventType} when the cursor
+	 * If the widget is interactive, this method is invoked with a {@link PointerEventType} when the pointer
 	 * performs actions within the widget bounds (for example, it enter or leaves the bounds).
 	 * By default, the function does nothing.
 	 * This is an experimental property and might be removed in the future.
 	 */
-	public cursorEventCallback = (event: CursorEventType, originalEvent?: UIEvent) => { }
+	public pointerEventCallback = (event: PointerEventType, originalEvent?: UIEvent) => { }
 
 	// TODO: probably it makes sense to associate a single callback to a groups of slots to avoid the same callback to be called for each slot of the group
 	/**
 	 * This methods allows to associate to a Slot a callback. For these slots, if the widget is interactive,
-	 * when the cursor performs actions within the slot's attachment the associated callback is invoked with
-	 * a {@link CursorEventType} (for example, it enter or leaves the slot's attachment bounds).
+	 * when the pointer performs actions within the slot's attachment the associated callback is invoked with
+	 * a {@link PointerEventType} (for example, it enter or leaves the slot's attachment bounds).
 	 * This is an experimental property and might be removed in the future.
 	 */
-	public addCursorSlotEventCallback (slot: number | string | Slot, slotFunction: (slot: Slot, event: CursorEventType) => void) {
-		this.cursorSlotEventCallbacks.set(this.getSlotFromRef(slot), { slotFunction, inside: false });
+	public addPointerSlotEventCallback (slot: number | string | Slot, slotFunction: (slot: Slot, event: PointerEventType) => void) {
+		this.pointerSlotEventCallbacks.set(this.getSlotFromRef(slot), { slotFunction, inside: false });
 	}
 
 	/**
-	 * Remove callbacks added through {@link addCursorSlotEventCallback}.
+	 * Remove callbacks added through {@link addPointerSlotEventCallback}.
 	 * @param slot: the slot reference to which remove the associated callback
 	 */
-	public removeCursorSlotEventCallbacks (slot: number | string | Slot) {
-		this.cursorSlotEventCallbacks.delete(this.getSlotFromRef(slot));
+	public removePointerSlotEventCallbacks (slot: number | string | Slot) {
+		this.pointerSlotEventCallbacks.delete(this.getSlotFromRef(slot));
 	}
 
 	private getSlotFromRef (slotRef: number | string | Slot): Slot {
@@ -1094,44 +1094,44 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 	/**
 	 * @internal
 	 */
-	public cursorInsideBounds = false;
+	public pointerInsideBounds = false;
 
 	private verticesTemp = Utils.newFloatArray(2 * 1024);
 
 	/**
 	 * @internal
 	 */
-	public cursorSlotEventCallbacks: Map<Slot, {
-		slotFunction: (slot: Slot, event: CursorEventType, originalEvent?: UIEvent) => void,
+	public pointerSlotEventCallbacks: Map<Slot, {
+		slotFunction: (slot: Slot, event: PointerEventType, originalEvent?: UIEvent) => void,
 		inside: boolean,
 	}> = new Map();
 
 	/**
 	 * @internal
 	 */
-	public cursorEventUpdate (type: CursorEventTypesInput, originalEvent?: UIEvent) {
+	public pointerEventUpdate (type: PointerEventTypesInput, originalEvent?: UIEvent) {
 		if (!this.isInteractive) return;
 
 		this.checkBoundsInteraction(type, originalEvent);
 		this.checkSlotInteraction(type, originalEvent);
 	}
 
-	private checkBoundsInteraction (type: CursorEventTypesInput, originalEvent?: UIEvent) {
-		if (this.isCursorInsideBounds()) {
+	private checkBoundsInteraction (type: PointerEventTypesInput, originalEvent?: UIEvent) {
+		if (this.isPointerInsideBounds()) {
 
-			if (!this.cursorInsideBounds) {
-				this.cursorEventCallback("enter", originalEvent);
+			if (!this.pointerInsideBounds) {
+				this.pointerEventCallback("enter", originalEvent);
 			}
-			this.cursorInsideBounds = true;
+			this.pointerInsideBounds = true;
 
-			this.cursorEventCallback(type, originalEvent);
+			this.pointerEventCallback(type, originalEvent);
 
 		} else {
 
-			if (this.cursorInsideBounds) {
-				this.cursorEventCallback("leave", originalEvent);
+			if (this.pointerInsideBounds) {
+				this.pointerEventCallback("leave", originalEvent);
 			}
-			this.cursorInsideBounds = false;
+			this.pointerInsideBounds = false;
 
 		}
 	}
@@ -1139,11 +1139,11 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 	/**
 	 * @internal
 	 */
-	public isCursorInsideBounds (): boolean {
+	public isPointerInsideBounds (): boolean {
 		if (this.isOffScreenAndWasMoved() || !this.skeleton) return false;
 
-		const x = this.cursorWorldX / this.skeleton.scaleX;
-		const y = this.cursorWorldY / this.skeleton.scaleY;
+		const x = this.pointerWorldX / this.skeleton.scaleX;
+		const y = this.pointerWorldY / this.skeleton.scaleY;
 
 		return (
 			x >= this.bounds.x &&
@@ -1153,8 +1153,8 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 		);
 	}
 
-	private checkSlotInteraction (type: CursorEventTypesInput, originalEvent?: UIEvent) {
-		for (let [slot, interactionState] of this.cursorSlotEventCallbacks) {
+	private checkSlotInteraction (type: PointerEventTypesInput, originalEvent?: UIEvent) {
+		for (let [slot, interactionState] of this.pointerSlotEventCallbacks) {
 			if (!slot.bone.active) continue;
 			let attachment = slot.getAttachment();
 
@@ -1176,7 +1176,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 			}
 
 			// here we have only "move" and "drag" events
-			if (this.isPointInPolygon(vertices, hullLength, [this.cursorWorldX, this.cursorWorldY])) {
+			if (this.isPointInPolygon(vertices, hullLength, [this.pointerWorldX, this.pointerWorldY])) {
 
 				if (!inside) {
 					interactionState.inside = true;