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

[ts][webcomponents] Removed mode attribute. Moved mode origin as fit type.

Browse Source
This commit is contained in:
Davide Tantillo 2025-05-20 14:52:43 +02:00
parent e4f791bd29
commit 23b288edc8
4 changed files with 17 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
spine-ts/spine-webcomponents/example/tutorial.html
View File

@ -231,11 +231,11 @@
></spine-skeleton>
</div>
<div class="split-right">
If you want to preserve the original scale, you can use <code>fit="none"</code>.
If you want to preserve the original scale, you can use <code>fit="none"</code> (center the bounds) or <code>fit="origin"</code> (center the skeleton origin).
In combination with that, you can use the <code>scale</code> attribute to set your desired scale.
<br>
<br>
Other fit modes are <code>width</code>, <code>height</code>, <code>cover</code>, and <code>scaleDown</code>.
Other fit modes are <code>width</code>, <code>height</code>, <code>cover</code>, <code>scaleDown</code>..
</div>
</div>
@ -363,11 +363,6 @@
<div class="split-top split">
<div class="split-left">
The <code>origin</code> mode centers the animation's world origin with the center of the HTML element.
<br>
You are responsible for scaling the skeleton when using this mode.
<br>
<br>
Move the origin by a percentage of the div's width and height using the <code>x-axis</code> and <code>y-axis</code> attributes, respectively.
</div>
<div class="split-right">

19
spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts
View File

@ -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, mode, debug, offsetX, offsetY, xAxis, yAxis, dragX, dragY, fit, noSpinner, loading, clip, isDraggable } = widget;
const { skeleton, pma, bounds, debug, offsetX, offsetY, dragX, dragY, fit, noSpinner, loading, clip, isDraggable } = widget;
if (widget.isOffScreenAndWasMoved()) continue;
const elementRef = widget.getHostElement();
@ -497,7 +497,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
divBounds.y -= offsetTopForOverlay;
}
const { padLeft, padRight, padTop, padBottom } = widget
const { padLeft, padRight, padTop, padBottom, xAxis, yAxis } = widget
const paddingShiftHorizontal = (padLeft - padRight) / 2;
const paddingShiftVertical = (padTop - padBottom) / 2;
@ -525,7 +525,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
}
if (skeleton) {
if (mode === "inside") {
if (fit !== "origin") {
let { x: ax, y: ay, width: aw, height: ah } = bounds;
if (aw <= 0 || ah <= 0) continue;
@ -591,8 +591,9 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
}
}
const worldOffsetX = divOriginX + offsetX + dragX;
const worldOffsetY = divOriginY + offsetY + dragY;
// const worldOffsetX = divOriginX + offsetX + dragX;
const worldOffsetX = divOriginX + offsetX * window.devicePixelRatio + dragX;
const worldOffsetY = divOriginY + offsetY * window.devicePixelRatio + dragY;
widget.worldX = worldOffsetX;
widget.worldY = worldOffsetY;
@ -634,12 +635,10 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
renderer.circle(true, root.x + worldOffsetX, root.y + worldOffsetY, 10, red);
// show shifted origin
const originX = worldOffsetX - dragX - offsetX;
const originY = worldOffsetY - dragY - offsetY;
renderer.circle(true, originX, originY, 10, green);
renderer.circle(true, divOriginX, divOriginY, 10, green);
// show line from origin to bounds center
renderer.line(originX, originY, bbCenterX, bbCenterY, green);
renderer.line(divOriginX, divOriginY, bbCenterX, bbCenterY, green);
}
if (clip) endScissor();
@ -951,7 +950,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
private updateWidgetScales () {
for (const widget of this.widgets) {
// inside mode scale automatically to fit the skeleton within its parent
if (widget.mode !== "origin" && widget.fit !== "none") continue;
if (widget.fit !== "origin" && widget.fit !== "none") continue;
const skeleton = widget.skeleton;
if (!skeleton) continue;

15
spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts
View File

@ -56,8 +56,7 @@ import { SpineWebComponentOverlay } from "./SpineWebComponentOverlay.js";
type UpdateSpineWidgetFunction = (delta: number, skeleton: Skeleton, state: AnimationState) => void;
export type OffScreenUpdateBehaviourType = "pause" | "update" | "pose";
export type ModeType = "inside" | "origin";
export type FitType = "fill" | "width" | "height" | "contain" | "cover" | "none" | "scaleDown";
export type FitType = "fill" | "width" | "height" | "contain" | "cover" | "none" | "scaleDown" | "origin";
export type AnimationsInfo = Record<string, {
cycle?: boolean,
holdDurationLastAnimation?: number;
@ -79,7 +78,6 @@ interface WidgetAttributes {
defaultMix?: number
skin?: string
fit: FitType
mode: ModeType
xAxis: number
yAxis: number
offsetX: number
@ -240,19 +238,11 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
* - `cover`: as small as possible while still covering the entire element container.
* - `scaleDown`: scale the skeleton down to ensure that the skeleton fits within the element container.
* - `none`: display the skeleton without autoscaling it.
* - `origin`: the skeleton origin is centered with the element container regardless of the bounds.
* Connected to `fit` attribute.
*/
public fit: FitType = "contain";
/**
* Specify the way the skeleton is centered within the element container:
* - `inside`: the skeleton bounds center is centered with the element container (Default)
* - `origin`: the skeleton origin is centered with the element container regardless of the bounds.
* Origin does not allow to specify any {@link fit} type and guarantee the skeleton to not be autoscaled.
* Connected to `mode` attribute.
*/
public mode: ModeType = "inside";
/**
* The x offset of the skeleton world origin x axis as a percentage of the element container width
* Connected to `x-axis` attribute.
@ -731,7 +721,6 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
clip: { propertyName: "clip", type: "boolean" },
pages: { propertyName: "pages", type: "array-number" },
fit: { propertyName: "fit", type: "fitType", defaultValue: "contain" },
mode: { propertyName: "mode", type: "modeType", defaultValue: "inside" },
offscreen: { propertyName: "offScreenUpdateBehaviour", type: "offScreenUpdateBehaviourType", defaultValue: "pause" },
}

15
spine-ts/spine-webcomponents/src/wcUtils.ts
View File

@ -27,10 +27,10 @@
* SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
import { AnimationsInfo, FitType, ModeType, OffScreenUpdateBehaviourType } from "./SpineWebComponentSkeleton.js";
import { AnimationsInfo, FitType, OffScreenUpdateBehaviourType } from "./SpineWebComponentSkeleton.js";
const animatonTypeRegExp = /\[([^\]]+)\]/g;
export type AttributeTypes = "string" | "number" | "boolean" | "array-number" | "array-string" | "object" | "fitType" | "modeType" | "offScreenUpdateBehaviourType" | "animationsInfo";
export type AttributeTypes = "string" | "number" | "boolean" | "array-number" | "array-string" | "object" | "fitType" | "offScreenUpdateBehaviourType" | "animationsInfo";
export function castValue (type: AttributeTypes, value: string | null, defaultValue?: any) {
switch (type) {
@ -48,8 +48,6 @@ export function castValue (type: AttributeTypes, value: string | null, defaultVa
return castObject(value, defaultValue);
case "fitType":
return isFitType(value) ? value : defaultValue;
case "modeType":
return isModeType(value) ? value : defaultValue;
case "offScreenUpdateBehaviourType":
return isOffScreenUpdateBehaviourType(value) ? value : defaultValue;
case "animationsInfo":
@ -164,7 +162,8 @@ function isFitType (value: string | null): value is FitType {
value === "contain" ||
value === "cover" ||
value === "none" ||
value === "scaleDown"
value === "scaleDown" ||
value === "origin"
);
}
@ -176,12 +175,6 @@ function isOffScreenUpdateBehaviourType (value: string | null): value is OffScre
);
}
function isModeType (value: string | null): value is ModeType {
return (
value === "inside" ||
value === "origin"
);
}
const base64RegExp = /^(([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==))$/;
export function isBase64 (str: string) {
return base64RegExp.test(str);