UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-04 14:24:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

scrollable-tweak-off changed to no-auto-parent-transform.

Browse Source
This commit is contained in:
Davide Tantillo 2025-04-29 17:06:49 +02:00
parent 0ac2c1e470
commit 0c90eed036
2 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
spine-ts/spine-webgl/example/webcomponent-tutorial.html
View File

@ -2334,7 +2334,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
Moreover, it is necessary to perform the following actions: <br>
<br>
1) The scrollable container must have a <code>transform</code> css attribute. If it hasn't this attribute the <code>spine-overlay</code> will add it for you.
If your scrollable container has already this css attribute, or if you prefer to add it by yourself (example: <code>transform: translateZ(0);</code>), set the <code>scrollable-tweak-off</code> to the <code>spine-overlay</code>.
If you don't want this attribute to be added, set the <code>no-auto-parent-transform</code> to the <code>spine-overlay</code>.
<br>
2) The <code>spine-overlay</code> must have the <code>scrollable</code> attribute
<br>
@ -2442,7 +2442,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
<spine-overlay
overlay-id="scroll"
scrollable
scrollable-tweak-off
no-auto-parent-transform
overflow-top=".2"
overflow-bottom=".2"
overflow-left=".2"
@ -2502,7 +2502,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
<spine-overlay
overlay-id="popup"
scrollable
scrollable-tweak-off
no-auto-parent-transform
></spine-overlay>
<spine-widget
atlas="../demos/assets/atlas2.atlas"
@ -2550,7 +2550,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
<spine-overlay
overlay-id="scroll"
scrollable
scrollable-tweak-off
no-auto-parent-transform
overflow-top=".2"
overflow-bottom=".2"
overflow-left=".2"

16
spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
View File

@ -1345,7 +1345,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
interface OverlayAttributes {
overlayId?: string
scrollableTweakOff: boolean
noAutoParentTransform: boolean
overflowTop: number
overflowBottom: number
overflowLeft: number
@ -1395,9 +1395,9 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
* If `false` (default value), the overlay container style will be affected adding `transform: translateZ(0);` to it.
* The `transform` is not affected if it already exists on the container.
* This is necessary to make the scrolling works with containers that scroll in a different way with respect to the page, as explained in {@link appendedToBody}.
* Connected to `scrollable-tweak-off` attribute.
* Connected to `no-auto-parent-transform` attribute.
*/
public scrollableTweakOff = false;
public noAutoParentTransform = false;
/**
* How many pixels to add to the top of the canvas to prevent "edge cutting" on fast scrolling, in canvas height units.
@ -1461,7 +1461,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
* In order to fix this behaviour, it is necessary to insert a dedicated `spine-overlay` webcomponent as a direct child of the container.
* Moreover, it is necessary to perform the following actions:
* 1) The scrollable container must have a `transform` css attribute. If it hasn't this attribute the `spine-overlay` will add it for you.
* If your scrollable container has already this css attribute, or if you prefer to add it by yourself (example: `transform: translateZ(0);`), set the `scrollable-tweak-off` to the `spine-overlay`.
* If your scrollable container has already this css attribute, or if you prefer to add it by yourself (example: `transform: translateZ(0);`), set the `no-auto-parent-transform` to the `spine-overlay`.
* 2) The `spine-overlay` must have the `scrollable` attribute
* 3) The `spine-overlay` must have an `overlay-id` attribute. Choose the value you prefer.
* 4) Each `spine-widget` must have an `overlay-id` attribute. The same as the hosting `spine-overlay`.
@ -1558,7 +1558,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
// if they differs call the resizeCallback. I already tested it, and it works. ResizeObserver should be more efficient.
if (this.appendedToBody) {
// if the element is scrollable, the user does not disable translate tweak, and the parent did not have already a transform, add the tweak
if (this.appendedToBody && !this.scrollableTweakOff && getComputedStyle(this.parentElement!).transform === "none") {
if (this.appendedToBody && !this.noAutoParentTransform && getComputedStyle(this.parentElement!).transform === "none") {
this.parentElement!.style.transform = `translateZ(0)`;
}
this.resizeObserver = new ResizeObserver(this.resizeCallback);
@ -1576,7 +1576,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
}
private hasCssTweakOff () {
return this.scrollableTweakOff && getComputedStyle(this.parentElement!).transform === "none";
return this.noAutoParentTransform && getComputedStyle(this.parentElement!).transform === "none";
}
private running = false;
@ -1595,7 +1595,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
static attributesDescription: Record<string, { propertyName: keyof OverlayAttributes, type: AttributeTypes, defaultValue?: any }> = {
"overlay-id": { propertyName: "overlayId", type: "string" },
"scrollable-tweak-off": { propertyName: "scrollableTweakOff", type: "boolean" },
"no-auto-parent-transform": { propertyName: "noAutoParentTransform", type: "boolean" },
"overflow-top": { propertyName: "overflowTop", type: "number" },
"overflow-bottom": { propertyName: "overflowBottom", type: "number" },
"overflow-left": { propertyName: "overflowLeft", type: "number" },
@ -2231,7 +2231,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
scrollPositionY += window.scrollY;
} else {
// Ideally this should be the only scrollable case (scrollable-tweak-off not enabled or at least an ancestor has transform)
// Ideally this should be the only scrollable case (no-auto-parent-transform not enabled or at least an ancestor has transform)
// I'd like to get rid of the code below
if (!this.hasCssTweakOff()) {
scrollPositionX += this.parentElement!.scrollLeft;