[ts][webcomponents] Rename isinteractive to interactive.

This commit is contained in:
Davide Tantillo 2025-05-21 16:54:06 +02:00
parent 2616860ea6
commit 710c20b284
7 changed files with 18 additions and 17 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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