[ts][webcomponents] Rename isinteractive to interactive.

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

@@ -210,7 +210,7 @@
                             skeleton="/assets/food/list-search.json"
                             animation="animation"
 
-                            isinteractive
+                            interactive
 
                         ></spine-skeleton>
                     </div>
@@ -381,7 +381,7 @@
                             skeleton="/assets/food/meal-ready-pro.json"
                             animation="base"
 
-                            isinteractive
+                            interactive
                         ></spine-skeleton>
 
                     </div>

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

@@ -42,7 +42,7 @@
                             atlas="/assets/windmill-pma.atlas"
                             skeleton="/assets/windmill-ess.json"
                             animation="animation"
-                            isinteractive
+                            interactive
                         ></spine-skeleton>
                         <spine-skeleton
                             identifier="spineboy-game"

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

@@ -32,7 +32,7 @@
                         bounds-height="412"
                         animation="interactive/head/idle"
                         clip
-                        isinteractive
+                        interactive
                     ></spine-skeleton>
                 </div>
             </div>
@@ -56,7 +56,7 @@
                         atlas="/assets/pwd/button.atlas"
                         skeleton="/assets/pwd/button.json"
                         animation="idle"
-                        isinteractive
+                        interactive
                         fit="fill"
                     ></spine-skeleton>
                 </div>

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

@@ -77,7 +77,7 @@
                 animation: "emotes/wave",
                 padTop: "0.05",
                 padBottom: "0.05",
-                isInteractive: true,
+                interactive: true,
             });
 
             div2.appendChild(widget);

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

@@ -3131,7 +3131,7 @@ const updateControl = (widget, controlBone, mouseX, mouseY, tempVector) => {
     <div class="section vertical-split" id="above-popup">
 
         <div class="split-left" style="width: 80%; box-sizing: border-box;">
-            You can attach callbacks to your widget to react to pointer interactions. Just make it <code>isinteractive</code>.
+            You can attach callbacks to your widget to react to pointer interactions. Just make it <code>interactive</code>.
             <br>
             <br>
             You can attach a callback for interactions with the widget's <code>bounds</code> or with <code>slots</code>.
@@ -3159,7 +3159,7 @@ const updateControl = (widget, controlBone, mouseX, mouseY, tempVector) => {
                     skeleton="/assets/chibi-stickers.json"
                     skin="mario"
                     animation="emotes/wave"
-                    isinteractive
+                    interactive
                     style="width: 150px; height: 150px;"
                 ></spine-skeleton>
 
@@ -3169,7 +3169,7 @@ const updateControl = (widget, controlBone, mouseX, mouseY, tempVector) => {
                     skeleton="/assets/chibi-stickers.json"
                     skin="nate"
                     animation="emotes/wave"
-                    isinteractive
+                    interactive
                     style="width: 150px; height: 150px;"
                 ></spine-skeleton>
 
@@ -3209,7 +3209,7 @@ const darkPicker = document.getElementById("dark-picker");
     skeleton="/assets/chibi-stickers.json",
     skin="mario"
     animation="emotes/wave"
-    isinteractive
+    interactive
     style="width: 150px; height: 150px;"
 ></spine-skeleton>
 
@@ -3219,7 +3219,7 @@ const darkPicker = document.getElementById("dark-picker");
     skeleton="/assets/chibi-stickers.json",
     skin="nate"
     animation="emotes/wave"
-    isinteractive
+    interactive
     style="width: 150px; height: 150px;"
 ></spine-skeleton>
 
@@ -3391,6 +3391,7 @@ const darkPicker = document.getElementById("dark-picker");
     atlas="/assets/cloud-pot-pma.atlas"
     skeleton="/assets/cloud-pot.skel"
     animation="playing-in-the-rain"
+    drag
 ></spine-skeleton>
 
 <spine-skeleton identifier="potty2-1" atlas="/assets/raptor-pma.atlas" skeleton="/assets/raptor-pro.skel" animation="walk" style="height:200px; width: 200px;"></spine-skeleton>

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

@@ -778,7 +778,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 
 					widget.pointerEventUpdate("down", ev);
 
-					if ((widget.isInteractive && widget.pointerInsideBounds) || (!widget.isInteractive && widget.isPointerInsideBounds())) {
+					if ((widget.interactive && widget.pointerInsideBounds) || (!widget.interactive && widget.isPointerInsideBounds())) {
 						if (!widget.drag) continue;
 
 						widget.dragging = true;

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

@@ -96,7 +96,7 @@ interface WidgetAttributes {
 	width: number
 	height: number
 	drag: boolean
-	isInteractive: boolean
+	interactive: boolean
 	debug: boolean
 	identifier: string
 	manualStart: boolean
@@ -423,10 +423,10 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 
 	/**
 	 * If true, the widget is interactive
-	 * Connected to `isinteractive` attribute.
+	 * Connected to `interactive` attribute.
 	 * This is an experimental property and might be removed in the future.
 	 */
-	public isInteractive = false;
+	public interactive = false;
 
 	/**
 	 * If the widget is interactive, this method is invoked with a {@link PointerEventType} when the pointer
@@ -700,7 +700,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 		width: { propertyName: "width", type: "number", defaultValue: -1 },
 		height: { propertyName: "height", type: "number", defaultValue: -1 },
 		drag: { propertyName: "drag", type: "boolean" },
-		isinteractive: { propertyName: "isInteractive", type: "boolean" },
+		interactive: { propertyName: "interactive", type: "boolean" },
 		"x-axis": { propertyName: "xAxis", type: "number" },
 		"y-axis": { propertyName: "yAxis", type: "number" },
 		"offset-x": { propertyName: "offsetX", type: "number" },
@@ -1110,7 +1110,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 	 * @internal
 	 */
 	public pointerEventUpdate (type: PointerEventTypesInput, originalEvent?: UIEvent) {
-		if (!this.isInteractive) return;
+		if (!this.interactive) return;
 
 		this.checkBoundsInteraction(type, originalEvent);
 		this.checkSlotInteraction(type, originalEvent);