recalculateBounds and autoRecalculateBounds to calculateBounds and autoCalculateBounds.

This commit is contained in:
Davide Tantillo 2025-04-30 12:45:35 +02:00
parent e5a4bccb69
commit 5bf75239d9
3 changed files with 19 additions and 19 deletions

View File

@ -45,7 +45,7 @@
identifier="boi"
atlas="assets/spineboy-pma.atlas"
skeleton="assets/spineboy-pro.skel"
auto-recalculate-bounds
auto-calculate-bounds
debug
></spine-widget>
</div>
@ -98,7 +98,7 @@
padBottom: 0,
padTop: 0,
customBounds: false,
autoRecalculateBounds: true,
autoCalculateBounds: true,
fit: "contain",
mode: "inside",
scaleX: 1,
@ -296,10 +296,10 @@
const boundsFolder = gui.addFolder( 'Bounds' );
boundsFolder
.add(myObject, 'autoRecalculateBounds')
.name( 'auto-recalculate-bounds' )
.add(myObject, 'autoCalculateBounds')
.name( 'auto-calculate-bounds' )
.onChange(value => {
boi.setAttribute("auto-recalculate-bounds", value)
boi.setAttribute("auto-calculate-bounds", value)
});
boundsFolder

View File

@ -589,7 +589,7 @@
setInterval(() => {
const newAnimation = isRoaring ? "walk" : "roar";
state.setAnimation(0, newAnimation, true);
widget.recalculateBounds(); // scale the skeleton based on the new animation
widget.calculateBounds(); // scale the skeleton based on the new animation
isRoaring = !isRoaring;
}, 4000);
})();
@ -616,7 +616,7 @@
setInterval(() => {
const newAnimation = isRoaring ? "walk" : "roar";
state.setAnimation(0, newAnimation, true);
widget.recalculateBounds(); // scale the skeleton based on the new animation
widget.calculateBounds(); // scale the skeleton based on the new animation
isRoaring = !isRoaring;
}, 4000);
})();
@ -644,7 +644,7 @@
<div class="split-top split">
<div class="split-left">
<p>To change animation, we could also just change the animation attribute. The widget will reinitiate itself and change animation.</p>
<p>In this case you would use <code>auto-recalculate-bounds</code> to ask the widget to always recalculate the bounds, as in the top example.</p>
<p>In this case you would use <code>auto-calculate-bounds</code> to ask the widget to always recalculate the bounds, as in the top example.</p>
<p>If want to keep the scale consistent, but fit multiple animations in the container, you can use the <code>animation-bounds</code> attribute to define a bounds containing a list of animations, as in the bottom example.</p>
</div>
@ -655,7 +655,7 @@
atlas="assets/spineboy-pma.atlas"
skeleton="assets/spineboy-pro.skel"
animation="jump"
auto-recalculate-bounds
auto-calculate-bounds
></spine-widget>
<spine-widget
style="width: 100%; flex: 1; border: 1px solid black; box-sizing: border-box;"
@ -703,7 +703,7 @@
atlas="assets/spineboy-pma.atlas"
skeleton="assets/spineboy-pro.skel"
animation="jump"
auto-recalculate-bounds
auto-calculate-bounds
></spine-widget>
<spine-widget
style="width: 100%; height: 150px; border: 1px solid black;"
@ -914,7 +914,7 @@
setInterval(() => {
const newAnimation = isRoaring ? "walk" : "roar";
state.setAnimation(0, newAnimation, true);
widget.recalculateBounds(); // scale the skeleton based on the new animation
widget.calculateBounds(); // scale the skeleton based on the new animation
isRoaring = !isRoaring;
}, 4000);
})();

View File

@ -189,7 +189,7 @@ interface WidgetAttributes {
boundsY: number
boundsWidth: number
boundsHeight: number
autoRecalculateBounds: boolean
autoCalculateBounds: boolean
width: number
height: number
isDraggable: boolean
@ -409,7 +409,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
* If no skin is provided, it is used the default skin.
* If no animation is provided, it is used the setup pose.
* Bounds are not automatically recalculated.when the animation or skin change.
* Invoke {@link recalculateBounds} to recalculate them, or set {@link autoRecalculateBounds} to true.
* Invoke {@link calculateBounds} to recalculate them, or set {@link autoCalculateBounds} to true.
* Use `setBounds` to set you desired bounds. Bounding Box might be useful to determine the bounds to be used.
* If the skeleton overflow the element container consider setting {@link clip} to `true`.
*/
@ -469,9 +469,9 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
/**
* Whether or not the bounds are recalculated when an animation or a skin is changed. `false` by default.
* Connected to `auto-recalculate-bounds` attribute.
* Connected to `auto-calculate-bounds` attribute.
*/
public autoRecalculateBounds = false;
public autoCalculateBounds = false;
/**
* Specify a fixed width for the widget. If at least one of `width` and `height` is > 0,
@ -811,7 +811,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
"bounds-y": { propertyName: "boundsY", type: "number" },
"bounds-width": { propertyName: "boundsWidth", type: "number", defaultValue: -1 },
"bounds-height": { propertyName: "boundsHeight", type: "number", defaultValue: -1 },
"auto-recalculate-bounds": { propertyName: "autoRecalculateBounds", type: "boolean" },
"auto-calculate-bounds": { propertyName: "autoCalculateBounds", type: "boolean" },
identifier: { propertyName: "identifier", type: "string" },
debug: { propertyName: "debug", type: "boolean" },
"manual-start": { propertyName: "manualStart", type: "boolean" },
@ -962,11 +962,11 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
}
/**
* Recalculates and sets the bounds of the current animation on track 0.
* Calculates and sets the bounds of the current animation on track 0.
* Useful when animations or skins are set programmatically.
* @returns void
*/
public recalculateBounds (forcedRecalculate = false): void {
public calculateBounds (forcedRecalculate = false): void {
const { skeleton, state } = this;
if (!skeleton || !state) return;
@ -1116,7 +1116,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
}
}
if (forceRecalculate || this.autoRecalculateBounds) this.recalculateBounds(forceRecalculate);
if (forceRecalculate || this.autoCalculateBounds) this.calculateBounds(forceRecalculate);
}
private render (): void {