mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2025-12-21 01:36:02 +08:00
[ts][webcomponents] no-spinner to spinner, and reversed logic. Default is not having the spinner.
This commit is contained in:
parent
710c20b284
commit
a5e737364c
@ -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>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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" },
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user