onScreenManualStart to startWhenVisible. startWhenVisible set manualStart to true.

This commit is contained in:
Davide Tantillo 2025-05-01 11:05:56 +02:00
parent a6887006be
commit 867557f743
2 changed files with 19 additions and 11 deletions

View File

@ -1782,7 +1782,7 @@ skins.forEach((skin, i) => {
By default, the callback does two things: By default, the callback does two things:
<ul> <ul>
<li>set <code>onScreenAtLeastOnce</code> to <code>true</code> when the widget enters the viewport the first time</li> <li>set <code>onScreenAtLeastOnce</code> to <code>true</code> when the widget enters the viewport the first time</li>
<li>if <code>manual-start</code> and <code>on-screen-manual-start</code> are set the widget <code>start</code> is invoked <li>if <code>start-when-visible</code> is set, the widget <code>start</code> is invoked
the first time the widget enters the viewport and the assets are loaded only in that moment.</li> the first time the widget enters the viewport and the assets are loaded only in that moment.</li>
</ul> </ul>
<br> <br>
@ -1799,8 +1799,7 @@ skins.forEach((skin, i) => {
atlas="assets/coin-pma.atlas" atlas="assets/coin-pma.atlas"
skeleton="assets/coin-pro.skel" skeleton="assets/coin-pro.skel"
animation="animation" animation="animation"
manual-start start-when-visible
on-screen-manual-start
></spine-widget> ></spine-widget>
</div> </div>
<div class="skin-grid-element"> <div class="skin-grid-element">

View File

@ -197,7 +197,7 @@ interface WidgetAttributes {
debug: boolean debug: boolean
identifier: string identifier: string
manualStart: boolean manualStart: boolean
onScreenManualStart: boolean startWhenVisible: boolean
pages?: Array<number> pages?: Array<number>
clip: boolean clip: boolean
offScreenUpdateBehaviour: OffScreenUpdateBehaviourType offScreenUpdateBehaviour: OffScreenUpdateBehaviourType
@ -593,18 +593,27 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
/** /**
* If false, assets loading are loaded immediately and the skeleton shown as soon as the assets are loaded * If false, assets loading are loaded immediately and the skeleton shown as soon as the assets are loaded
* If true, it is necessary to invoke the start method to start the loading process * If true, it is necessary to invoke the start method to start the widget and the loading process
* Connected to `manual-start` attribute. * Connected to `manual-start` attribute.
*/ */
public manualStart = false; public manualStart = false;
/** /**
* If true and manualStart is true, allows the default {@link onScreenFunction} to invoke the {@link start} method. * If true, automatically sets manualStart to true to pervent widget to start immediately.
* Then, in combination with the default {@link onScreenFunction}, the widget {@link start}
* the first time it enters the viewport.
* This is useful when you want to load the assets only when the widget is revealed. * This is useful when you want to load the assets only when the widget is revealed.
* By default, is false implying the start method to be invoked manually. * By default, is false.
* Connected to `on-screen-manual-start` attribute. * Connected to `start-when-visible` attribute.
*/ */
public onScreenManualStart = false; public set startWhenVisible (value: boolean) {
this.manualStart = true;
this._startWhenVisible = value;
}
public get startWhenVisible (): boolean {
return this._startWhenVisible;
}
public _startWhenVisible = false;
/** /**
* An array of indexes indicating the atlas pages indexes to be loaded. * An array of indexes indicating the atlas pages indexes to be loaded.
@ -664,7 +673,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
if (widget.loading && !widget.onScreenAtLeastOnce) { if (widget.loading && !widget.onScreenAtLeastOnce) {
widget.onScreenAtLeastOnce = true; widget.onScreenAtLeastOnce = true;
if (widget.manualStart && widget.onScreenManualStart) { if (widget.manualStart && widget.startWhenVisible) {
widget.start(); widget.start();
} }
} }
@ -820,7 +829,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
identifier: { propertyName: "identifier", type: "string" }, identifier: { propertyName: "identifier", type: "string" },
debug: { propertyName: "debug", type: "boolean" }, debug: { propertyName: "debug", type: "boolean" },
"manual-start": { propertyName: "manualStart", type: "boolean" }, "manual-start": { propertyName: "manualStart", type: "boolean" },
"on-screen-manual-start": { propertyName: "onScreenManualStart", type: "boolean" }, "start-when-visible": { propertyName: "startWhenVisible", type: "boolean" },
spinner: { propertyName: "loadingSpinner", type: "boolean" }, spinner: { propertyName: "loadingSpinner", type: "boolean" },
clip: { propertyName: "clip", type: "boolean" }, clip: { propertyName: "clip", type: "boolean" },
pages: { propertyName: "pages", type: "array-number" }, pages: { propertyName: "pages", type: "array-number" },