spinner to no-spinner.

This commit is contained in:
Davide Tantillo 2025-05-02 17:44:34 +02:00
parent cdf97f019e
commit c0a2d292ea
2 changed files with 15 additions and 15 deletions

View File

@ -1347,7 +1347,7 @@ function removeDiv() {
atlas="assets/spineboy-pma.atlas" atlas="assets/spineboy-pma.atlas"
skeleton="assets/spineboy-pro.skel" skeleton="assets/spineboy-pro.skel"
animation="walk" animation="walk"
spinner no-spinner
></spine-widget> ></spine-widget>
</div> </div>
<div class="split-right"> <div class="split-right">
@ -1357,7 +1357,7 @@ function removeDiv() {
<input type="button" value="Simulate reload" onclick="reloadWidget(this)"> <input type="button" value="Simulate reload" onclick="reloadWidget(this)">
<br> <br>
<br> <br>
If you do not want to show the loading spinner, set <code>spinner="false"</code>. If you do not want to show the loading spinner, set <code>no-spinner</code>.
<br> <br>
Click the button below to toggle the spinner. Click the button below to toggle the spinner.
<br> <br>
@ -1379,8 +1379,8 @@ function removeDiv() {
}, 1000) }, 1000)
} }
function toggleSpinner(element) { function toggleSpinner(element) {
widget.loadingSpinner = !widget.loadingSpinner; widget.noSpinner = !widget.noSpinner;
element.value = widget.loadingSpinner ? "Spinner ON" : "Spinner OFF"; element.value = widget.noSpinner ? "Spinner ON" : "Spinner OFF";
} }
</script> </script>
@ -1393,7 +1393,7 @@ function removeDiv() {
atlas="assets/spineboy-pma.atlas" atlas="assets/spineboy-pma.atlas"
skeleton="assets/spineboy-pro.skel" skeleton="assets/spineboy-pro.skel"
animation="walk" animation="walk"
spinner no-spinner
></spine-widget> ></spine-widget>
<input type="button" value="Simulate reload" onclick="reloadWidget(this)"> <input type="button" value="Simulate reload" onclick="reloadWidget(this)">
<input type="button" value="Spinner ON" onclick="toggleSpinner(this)"> <input type="button" value="Spinner ON" onclick="toggleSpinner(this)">
@ -1412,8 +1412,8 @@ async function reloadWidget(element) {
}, 1000) }, 1000)
} }
function toggleSpinner(element) { function toggleSpinner(element) {
widget.loadingSpinner = !widget.loadingSpinner; widget.noSpinner = !widget.noSpinner;
element.value = widget.loadingSpinner ? "Spinner ON" : "Spinner OFF"; element.value = widget.noSpinner ? "Spinner ON" : "Spinner OFF";
}`) }`)
</script> </script>
</code></pre> </code></pre>

View File

@ -201,7 +201,7 @@ interface WidgetAttributes {
pages?: Array<number> pages?: Array<number>
clip: boolean clip: boolean
offScreenUpdateBehaviour: OffScreenUpdateBehaviourType offScreenUpdateBehaviour: OffScreenUpdateBehaviourType
loadingSpinner: boolean noSpinner: boolean
} }
// The methods user can override to have custom behaviour // The methods user can override to have custom behaviour
@ -641,10 +641,10 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
public offScreenUpdateBehaviour: OffScreenUpdateBehaviourType = "pause"; public offScreenUpdateBehaviour: OffScreenUpdateBehaviourType = "pause";
/** /**
* If true, the a Spine loading spinner is shown during asset loading * If false (default), a Spine loading spinner is shown during asset loading
* Connected to `spinner` attribute. * Connected to `no-spinner` attribute.
*/ */
public loadingSpinner = true; public noSpinner = false;
/** /**
* Replace the default state and skeleton update logic for this widget. * Replace the default state and skeleton update logic for this widget.
@ -714,7 +714,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
/** /**
* The {@link LoadingScreenWidget} of this widget. * The {@link LoadingScreenWidget} of this widget.
* This is instantiated only if it is really necessary. * This is instantiated only if it is really necessary.
* For example, if {@link loadingSpinner} is `false`, this property value is null * For example, if {@link noSpinner} is `false`, this property value is null
*/ */
public loadingScreen: LoadingScreen | null = null; public loadingScreen: LoadingScreen | null = null;
@ -833,7 +833,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
debug: { propertyName: "debug", type: "boolean" }, debug: { propertyName: "debug", type: "boolean" },
"manual-start": { propertyName: "manualStart", type: "boolean" }, "manual-start": { propertyName: "manualStart", type: "boolean" },
"start-when-visible": { propertyName: "startWhenVisible", type: "boolean" }, "start-when-visible": { propertyName: "startWhenVisible", type: "boolean" },
spinner: { propertyName: "loadingSpinner", type: "boolean" }, "no-spinner": { propertyName: "noSpinner", type: "boolean" },
clip: { propertyName: "clip", type: "boolean" }, clip: { propertyName: "clip", type: "boolean" },
pages: { propertyName: "pages", type: "array-number" }, pages: { propertyName: "pages", type: "array-number" },
fit: { propertyName: "fit", type: "fitType", defaultValue: "contain" }, fit: { propertyName: "fit", type: "fitType", defaultValue: "contain" },
@ -1866,7 +1866,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
const tempVector = new Vector3(); const tempVector = new Vector3();
for (const widget of this.widgets) { for (const widget of this.widgets) {
const { skeleton, pma, bounds, mode, debug, offsetX, offsetY, xAxis, yAxis, dragX, dragY, fit, loadingSpinner, onScreen, loading, clip, isDraggable } = widget; const { skeleton, pma, bounds, mode, debug, offsetX, offsetY, xAxis, yAxis, dragX, dragY, fit, noSpinner, onScreen, loading, clip, isDraggable } = widget;
if ((!onScreen && dragX === 0 && dragY === 0)) continue; if ((!onScreen && dragX === 0 && dragY === 0)) continue;
const elementRef = widget.getHostElement(); const elementRef = widget.getHostElement();
@ -1899,7 +1899,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
if (clip) startScissor(divBounds); if (clip) startScissor(divBounds);
if (loading) { if (loading) {
if (loadingSpinner) { if (noSpinner) {
if (!widget.loadingScreen) widget.loadingScreen = new LoadingScreen(renderer); if (!widget.loadingScreen) widget.loadingScreen = new LoadingScreen(renderer);
widget.loadingScreen!.drawInCoordinates(divOriginX, divOriginY); widget.loadingScreen!.drawInCoordinates(divOriginX, divOriginY);
} }