[ts][webcomponents] Rename isdraggable to drag.

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

@@ -87,7 +87,7 @@
             }
 
             const myObject = {
-                isDraggable: false,
+                drag: false,
                 debug: true,
                 clip: false,
                 animation: "none",
@@ -213,11 +213,11 @@
                 .disable();
 
             gui
-                .add(myObject, 'isDraggable')
-                .name( 'isdraggable' )
+                .add(myObject, 'drag')
+                .name( 'drag' )
                 .onChange(value => {
-                    if (value) boi.setAttribute("isdraggable", '')
-                    else boi.removeAttribute("isdraggable");
+                    if (value) boi.setAttribute("drag", '')
+                    else boi.removeAttribute("drag");
                 });
 
             gui

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

@@ -2482,7 +2482,7 @@ tank.beforeUpdateWorldTransforms = (delta, skeleton, state) => {
                         atlas="/assets/celestial-circus-pma.atlas"
                         skeleton="/assets/celestial-circus-pro.skel"
                         clip
-                        isdraggable
+                        drag
                     ></spine-skeleton>
 
                     <script>
@@ -2549,7 +2549,7 @@ tank.beforeUpdateWorldTransforms = (delta, skeleton, state) => {
         skeleton="/assets/celestial-circus-pro.skel"
         animation="wings-and-feet"
         clip
-        isdraggable
+        drag
     ></spine-skeleton>
 </div>
 
@@ -2856,14 +2856,14 @@ tank.beforeUpdateWorldTransforms = (delta, skeleton, state) => {
 
         <div class="split-top split">
             <div class="split-left">
-                As a bonus item, you can move your skeleton around just by setting the <code>isdraggable</code> property to <code>true</code>.
+                As a bonus item, you can move your skeleton around just by setting the <code>drag</code> property to <code>true</code>.
             </div>
             <div class="split-right">
                 <spine-skeleton
                     atlas="/assets/celestial-circus-pma.atlas"
                     skeleton="/assets/celestial-circus-pro.skel"
                     animation="wings-and-feet"
-                    isdraggable
+                    drag
                 ></spine-skeleton>
             </div>
         </div>
@@ -2875,7 +2875,7 @@ tank.beforeUpdateWorldTransforms = (delta, skeleton, state) => {
     atlas="/assets/celestial-circus-pma.atlas"
     skeleton="/assets/celestial-circus-pro.skel"
     animation="wings-and-feet"
-    isdraggable="true"
+    drag
 ></spine-skeleton>`
 );</script>
             </code></pre>
@@ -2970,7 +2970,7 @@ function createCircleOfDivs(numDivs = 8) {
                 atlas="/assets/owl-pma.atlas"
                 skeleton="/assets/owl-pro.json"
                 animation="idle"
-                isdraggable
+                drag
             ></spine-skeleton>
         \`;
 
@@ -3062,7 +3062,7 @@ function createCircleOfDivs(numDivs = 8) {
                 atlas="/assets/owl-pma.atlas"
                 skeleton="/assets/owl-pro.json"
                 animation="idle"
-                isdraggable
+                drag
             ></spine-skeleton>
         `;
 
@@ -3362,7 +3362,7 @@ const darkPicker = document.getElementById("dark-picker");
                     atlas="/assets/cloud-pot-pma.atlas"
                     skeleton="/assets/cloud-pot.skel"
                     animation="rain"
-                    isdraggable
+                    drag
                 ></spine-skeleton>
             </div>
         </div>

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

@@ -483,7 +483,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 
 			const tempVector = new Vector3();
 			for (const widget of this.widgets) {
-				const { skeleton, pma, bounds, debug, offsetX, offsetY, dragX, dragY, fit, noSpinner, loading, clip, isDraggable } = widget;
+				const { skeleton, pma, bounds, debug, offsetX, offsetY, dragX, dragY, fit, noSpinner, loading, clip, drag } = widget;
 
 				if (widget.isOffScreenAndWasMoved()) continue;
 				const elementRef = widget.getHostElement();
@@ -611,7 +611,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 						let { x: ax, y: ay, width: aw, height: ah } = bounds;
 
 						// show bounds and its center
-						if (isDraggable) {
+						if (drag) {
 							renderer.rect(true,
 								ax * skeleton.scaleX + worldOffsetX,
 								ay * skeleton.scaleY + worldOffsetY,
@@ -779,7 +779,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 					widget.pointerEventUpdate("down", ev);
 
 					if ((widget.isInteractive && widget.pointerInsideBounds) || (!widget.isInteractive && widget.isPointerInsideBounds())) {
-						if (!widget.isDraggable) continue;
+						if (!widget.drag) continue;
 
 						widget.dragging = true;
 						ev?.preventDefault();

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

@@ -95,7 +95,7 @@ interface WidgetAttributes {
 	autoCalculateBounds: boolean
 	width: number
 	height: number
-	isDraggable: boolean
+	drag: boolean
 	isInteractive: boolean
 	debug: boolean
 	identifier: string
@@ -393,9 +393,9 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 
 	/**
 	 * If true, the widget is draggable
-	 * Connected to `isdraggable` attribute.
+	 * Connected to `drag` attribute.
 	 */
-	public isDraggable = false;
+	public drag = false;
 
 	/**
 	 * The x of the root relative to the canvas/webgl context center in spine world coordinates.
@@ -699,7 +699,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 		skin: { propertyName: "skin", type: "array-string" },
 		width: { propertyName: "width", type: "number", defaultValue: -1 },
 		height: { propertyName: "height", type: "number", defaultValue: -1 },
-		isdraggable: { propertyName: "isDraggable", type: "boolean" },
+		drag: { propertyName: "drag", type: "boolean" },
 		isinteractive: { propertyName: "isInteractive", type: "boolean" },
 		"x-axis": { propertyName: "xAxis", type: "number" },
 		"y-axis": { propertyName: "yAxis", type: "number" },