[ts][webcomponents] Rename isdraggable to drag.

This commit is contained in:
Davide Tantillo 2025-05-21 16:50:12 +02:00
parent 4a124d7c42
commit 2616860ea6
4 changed files with 20 additions and 20 deletions

View File

@ -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

View File

@ -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>

View File

@ -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();

View File

@ -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" },