This commit is contained in:
Davide Tantillo 2025-02-03 12:59:52 +01:00
parent c4d419caf9
commit e02f495883

View File

@ -273,7 +273,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
* Holds the assets in base64 format. * Holds the assets in base64 format.
* Connected to `raw-data` attribute. * Connected to `raw-data` attribute.
*/ */
public rawData?: Record<string ,string>; public rawData?: Record<string, string>;
/** /**
* The name of the skeleton when the skeleton file is a JSON and contains multiple skeletons. * The name of the skeleton when the skeleton file is a JSON and contains multiple skeletons.
@ -559,7 +559,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
* By default, the function does nothing. * By default, the function does nothing.
* This is an experimental property and might be removed in the future. * This is an experimental property and might be removed in the future.
*/ */
public cursorBoundsEventCallback = (event: CursorEventTypes, originalEvent?: UIEvent) => {} public cursorBoundsEventCallback = (event: CursorEventTypes, originalEvent?: UIEvent) => { }
/** /**
* This methods allows to associate to a Slot a callback. For these slots, if the widget is interactive, * This methods allows to associate to a Slot a callback. For these slots, if the widget is interactive,
@ -567,7 +567,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
* a {@link CursorEventTypes} (for example, it enter or leaves the slot's attachment bounds). * a {@link CursorEventTypes} (for example, it enter or leaves the slot's attachment bounds).
* This is an experimental property and might be removed in the future. * This is an experimental property and might be removed in the future.
*/ */
public addCursorSlotEventCallbacks(slot: Slot, slotFunction: (slot: Slot, event: CursorEventTypes ) => void) { public addCursorSlotEventCallbacks (slot: Slot, slotFunction: (slot: Slot, event: CursorEventTypes) => void) {
this.cursorSlotEventCallbacks.set(slot, { slotFunction, inside: false }); this.cursorSlotEventCallbacks.set(slot, { slotFunction, inside: false });
} }
@ -1056,13 +1056,13 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
animations.forEach(({ animationName, delay, loop, mixDuration }, index) => { animations.forEach(({ animationName, delay, loop, mixDuration }, index) => {
let track; let track;
if (index === 0) { if (index === 0) {
if (animationName === "#EMPTY#") { if (animationName === "#EMPTY#") {
track = state.setEmptyAnimation(trackIndex, mixDuration); track = state.setEmptyAnimation(trackIndex, mixDuration);
} else { } else {
track = state.setAnimation(trackIndex, animationName, loop); track = state.setAnimation(trackIndex, animationName, loop);
} }
} else { } else {
if (animationName === "#EMPTY#") { if (animationName === "#EMPTY#") {
track = state.addEmptyAnimation(trackIndex, mixDuration, delay); track = state.addEmptyAnimation(trackIndex, mixDuration, delay);
} else { } else {
track = state.addAnimation(trackIndex, animationName, loop, delay); track = state.addAnimation(trackIndex, animationName, loop, delay);
@ -1143,7 +1143,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
} }
private checkBoundsInteraction (type: CursorEventTypesInput, originalEvent?: UIEvent) { private checkBoundsInteraction (type: CursorEventTypesInput, originalEvent?: UIEvent) {
if ((type === "down"|| type === "up") && this.cursorInsideBounds) { if ((type === "down" || type === "up") && this.cursorInsideBounds) {
this.cursorBoundsEventCallback(type, originalEvent); this.cursorBoundsEventCallback(type, originalEvent);
return; return;
} }
@ -1181,7 +1181,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
return inside(this.pointTemp, this.bounds); return inside(this.pointTemp, this.bounds);
} }
private checkSlotInteraction(type: CursorEventTypesInput, originalEvent?: UIEvent) { private checkSlotInteraction (type: CursorEventTypesInput, originalEvent?: UIEvent) {
for (let [slot, interactionState] of this.cursorSlotEventCallbacks) { for (let [slot, interactionState] of this.cursorSlotEventCallbacks) {
if (!slot.bone.active) continue; if (!slot.bone.active) continue;
let attachment = slot.getAttachment(); let attachment = slot.getAttachment();
@ -1231,7 +1231,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
} }
} }
private isPointInPolygon(vertices: NumberArrayLike, hullLength: number, point: number[]) { private isPointInPolygon (vertices: NumberArrayLike, hullLength: number, point: number[]) {
const [px, py] = point; const [px, py] = point;
if (hullLength < 6) { if (hullLength < 6) {
@ -1260,7 +1260,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
*/ */
public boneFollowerList: Array<{ slot: Slot, bone: Bone, element: HTMLElement, followAttachmentAttach: boolean, followRotation: boolean, followOpacity: boolean, followScale: boolean, hideAttachment: boolean }> = []; public boneFollowerList: Array<{ slot: Slot, bone: Bone, element: HTMLElement, followAttachmentAttach: boolean, followRotation: boolean, followOpacity: boolean, followScale: boolean, hideAttachment: boolean }> = [];
public followSlot(slotName: string | Slot, element: HTMLElement, options: { followAttachmentAttach?: boolean, followRotation?: boolean, followOpacity?: boolean, followScale?: boolean, hideAttachment?: boolean } = {}) { public followSlot (slotName: string | Slot, element: HTMLElement, options: { followAttachmentAttach?: boolean, followRotation?: boolean, followOpacity?: boolean, followScale?: boolean, hideAttachment?: boolean } = {}) {
const { const {
followAttachmentAttach = false, followAttachmentAttach = false,
followRotation = true, followRotation = true,
@ -1284,7 +1284,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
this.boneFollowerList.push({ slot, bone: slot.bone, element, followAttachmentAttach, followRotation, followOpacity, followScale, hideAttachment }); this.boneFollowerList.push({ slot, bone: slot.bone, element, followAttachmentAttach, followRotation, followOpacity, followScale, hideAttachment });
this.overlay.slotFollowerElementsHolder.appendChild(element); this.overlay.slotFollowerElementsHolder.appendChild(element);
} }
public unfollowSlot(element: HTMLElement): HTMLElement | undefined { public unfollowSlot (element: HTMLElement): HTMLElement | undefined {
const index = this.boneFollowerList.findIndex(e => e.element === element); const index = this.boneFollowerList.findIndex(e => e.element === element);
if (index > -1) { if (index > -1) {
return this.boneFollowerList.splice(index, 1)[0].element; return this.boneFollowerList.splice(index, 1)[0].element;
@ -1569,7 +1569,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
this.startRenderingLoop(); this.startRenderingLoop();
} }
private hasCssTweakOff() { private hasCssTweakOff () {
return this.scrollableTweakOff && getComputedStyle(this.parentElement!).transform === "none"; return this.scrollableTweakOff && getComputedStyle(this.parentElement!).transform === "none";
} }
@ -1912,7 +1912,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
element.style.transform = `translate(calc(-50% + ${x.toFixed(2)}px),calc(-50% + ${y.toFixed(2)}px))` element.style.transform = `translate(calc(-50% + ${x.toFixed(2)}px),calc(-50% + ${y.toFixed(2)}px))`
+ (followRotation ? ` rotate(${-bone.getWorldRotationX()}deg)` : "") + (followRotation ? ` rotate(${-bone.getWorldRotationX()}deg)` : "")
+ (followScale ? ` scale(${bone.getWorldScaleX()}, ${bone.getWorldScaleY()})` : "") + (followScale ? ` scale(${bone.getWorldScaleX()}, ${bone.getWorldScaleY()})` : "")
; ;
element.style.display = "" element.style.display = ""
@ -2221,7 +2221,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
private static readonly HEIGHT_INCREMENT = 1.2; private static readonly HEIGHT_INCREMENT = 1.2;
private static readonly MAX_CANVAS_WIDTH = 7000; private static readonly MAX_CANVAS_WIDTH = 7000;
private static readonly MAX_CANVAS_HEIGHT = 7000; private static readonly MAX_CANVAS_HEIGHT = 7000;
private getScreenSize (): { width: number, height: number} { private getScreenSize (): { width: number, height: number } {
let width = window.innerWidth; let width = window.innerWidth;
let height = window.innerHeight; let height = window.innerHeight;
@ -2237,8 +2237,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
// if the resulting canvas width/height is too high, scale the DPI // if the resulting canvas width/height is too high, scale the DPI
if (this.previousHeight * (1 + this.overflowTop + this.overflowBottom) * dpr > SpineWebComponentOverlay.MAX_CANVAS_HEIGHT || if (this.previousHeight * (1 + this.overflowTop + this.overflowBottom) * dpr > SpineWebComponentOverlay.MAX_CANVAS_HEIGHT ||
this.previousWidth * (1 + this.overflowLeft + this.overflowRight) * dpr > SpineWebComponentOverlay.MAX_CANVAS_WIDTH) this.previousWidth * (1 + this.overflowLeft + this.overflowRight) * dpr > SpineWebComponentOverlay.MAX_CANVAS_WIDTH) {
{
this.scaleDPR += .5; this.scaleDPR += .5;
return this.getScreenSize(); return this.getScreenSize();
} }
@ -2250,7 +2249,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
} }
private scaleDPR = 1; private scaleDPR = 1;
public getDPR() { public getDPR () {
return window.devicePixelRatio / this.scaleDPR; return window.devicePixelRatio / this.scaleDPR;
} }
@ -2340,8 +2339,8 @@ function castObject (value: string | null, defaultValue = undefined) {
} }
const base64RegExp = /^(([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==))$/; const base64RegExp = /^(([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==))$/;
function isBase64(str: string) { function isBase64 (str: string) {
return base64RegExp.test(str); return base64RegExp.test(str);
} }
function castValue (type: AttributeTypes, value: string | null, defaultValue?: any) { function castValue (type: AttributeTypes, value: string | null, defaultValue?: any) {