[ts][webcomponents] no-spinner to spinner, and reversed logic. Default is not having the spinner.

This commit is contained in:
Davide Tantillo 2025-05-21 17:00:00 +02:00
parent 710c20b284
commit a5e737364c
3 changed files with 16 additions and 18 deletions

View File

@ -1334,22 +1334,20 @@ function removeDiv() {
atlas="/assets/spineboy-pma.atlas"
skeleton="/assets/spineboy-pro.skel"
animation="walk"
no-spinner
spinner
></spine-skeleton>
</div>
<div class="split-right">
A loading spinner is shown while assets are loading. Click the button below to simulate a 2-second loading delay:
If you want to show loading spinner while assets are loading, set the <code>spinner</code> attribute. Click the button below to simulate a 2-second loading delay:
<br>
<br>
<input type="button" value="Simulate reload" onclick="reloadWidget(this)">
<br>
<br>
If you don't want to show the loading spinner, set <code>no-spinner</code>.
<br>
Click the button below to toggle the spinner.
<br>
<br>
<input type="button" value="Spinner OFF" onclick="toggleSpinner(this)">
<input type="button" value="Spinner ON" onclick="toggleSpinner(this)">
</div>
</div>
@ -1365,8 +1363,8 @@ function removeDiv() {
}, 1000)
}
function toggleSpinner(element) {
widget.noSpinner = !widget.noSpinner;
element.value = widget.noSpinner ? "Spinner OFF" : "Spinner ON";
widget.spinner = !widget.spinner;
element.value = widget.spinner ? "Spinner ON" : "Spinner OFF";
}
</script>
@ -1379,7 +1377,7 @@ function removeDiv() {
atlas="/assets/spineboy-pma.atlas"
skeleton="/assets/spineboy-pro.skel"
animation="walk"
no-spinner
spinner
></spine-skeleton>
<input type="button" value="Simulate reload" onclick="reloadWidget(this)">
<input type="button" value="Spinner ON" onclick="toggleSpinner(this)">
@ -1398,8 +1396,8 @@ async function reloadWidget(element) {
}, 1000)
}
function toggleSpinner(element) {
widget.noSpinner = !widget.noSpinner;
element.value = widget.noSpinner ? "Spinner ON" : "Spinner OFF";
widget.spinner = !widget.spinner;
element.value = widget.spinner ? "Spinner ON" : "Spinner OFF";
}`)
</script>
</code></pre>

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, drag } = widget;
const { skeleton, pma, bounds, debug, offsetX, offsetY, dragX, dragY, fit, spinner, loading, clip, drag } = widget;
if (widget.isOffScreenAndWasMoved()) continue;
const elementRef = widget.getHostElement();
@ -516,7 +516,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
if (clip) startScissor(divBounds);
if (loading) {
if (!noSpinner) {
if (spinner) {
if (!widget.loadingScreen) widget.loadingScreen = new LoadingScreen(renderer);
widget.loadingScreen!.drawInCoordinates(divOriginX, divOriginY);
}

View File

@ -104,7 +104,7 @@ interface WidgetAttributes {
pages?: Array<number>
clip: boolean
offScreenUpdateBehaviour: OffScreenUpdateBehaviourType
noSpinner: boolean
spinner: boolean
}
// The methods user can override to have custom behaviour
@ -531,10 +531,10 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
public offScreenUpdateBehaviour: OffScreenUpdateBehaviourType = "pause";
/**
* If false (default), a Spine loading spinner is shown during asset loading
* Connected to `no-spinner` attribute.
* If true, a Spine loading spinner is shown during asset loading. Default to false.
* Connected to `spinner` attribute.
*/
public noSpinner = false;
public spinner = false;
/**
* Replace the default state and skeleton update logic for this widget.
@ -599,7 +599,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
/**
* The {@link LoadingScreenWidget} of this widget.
* This is instantiated only if it is really necessary.
* For example, if {@link noSpinner} is `false`, this property value is null
* For example, if {@link spinner} is `false`, this property value is null
*/
public loadingScreen: LoadingScreen | null = null;
@ -718,7 +718,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
debug: { propertyName: "debug", type: "boolean" },
"manual-start": { propertyName: "manualStart", type: "boolean" },
"start-when-visible": { propertyName: "startWhenVisible", type: "boolean" },
"no-spinner": { propertyName: "noSpinner", type: "boolean" },
"spinner": { propertyName: "spinner", type: "boolean" },
clip: { propertyName: "clip", type: "boolean" },
pages: { propertyName: "pages", type: "array-number" },
fit: { propertyName: "fit", type: "fitType", defaultValue: "contain" },