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

spine-ts/spine-webcomponents/example/tutorial.html

@@ -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">

spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts

@@ -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;

spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts

@@ -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" },
 	}
 

spine-ts/spine-webcomponents/src/wcUtils.ts

@@ -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);