diff --git a/spine-ts/spine-webcomponents/example/app.html b/spine-ts/spine-webcomponents/example/app.html index da6b52c52..75ea74166 100644 --- a/spine-ts/spine-webcomponents/example/app.html +++ b/spine-ts/spine-webcomponents/example/app.html @@ -210,7 +210,7 @@ skeleton="/assets/food/list-search.json" animation="animation" - isinteractive + interactive > @@ -381,7 +381,7 @@ skeleton="/assets/food/meal-ready-pro.json" animation="base" - isinteractive + interactive > diff --git a/spine-ts/spine-webcomponents/example/game.html b/spine-ts/spine-webcomponents/example/game.html index ced82817a..00538cf46 100644 --- a/spine-ts/spine-webcomponents/example/game.html +++ b/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 > @@ -56,7 +56,7 @@ atlas="/assets/pwd/button.atlas" skeleton="/assets/pwd/button.json" animation="idle" - isinteractive + interactive fit="fill" > diff --git a/spine-ts/spine-webcomponents/example/team.html b/spine-ts/spine-webcomponents/example/team.html index 31368c22c..3678977ca 100644 --- a/spine-ts/spine-webcomponents/example/team.html +++ b/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); diff --git a/spine-ts/spine-webcomponents/example/tutorial.html b/spine-ts/spine-webcomponents/example/tutorial.html index 9df75ba93..37d4c2e1f 100644 --- a/spine-ts/spine-webcomponents/example/tutorial.html +++ b/spine-ts/spine-webcomponents/example/tutorial.html @@ -3131,7 +3131,7 @@ const updateControl = (widget, controlBone, mouseX, mouseY, tempVector) => {
- You can attach callbacks to your widget to react to pointer interactions. Just make it isinteractive. + You can attach callbacks to your widget to react to pointer interactions. Just make it interactive.

You can attach a callback for interactions with the widget's bounds or with slots. @@ -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;" > @@ -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;" > @@ -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;" > @@ -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;" > @@ -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 > diff --git a/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts b/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts index 1125677c3..72a490bed 100644 --- a/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts +++ b/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; diff --git a/spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts b/spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts index 79d47947d..78a78267f 100644 --- a/spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts +++ b/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);