mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-04 14:24:53 +08:00
Properties rename.
This commit is contained in:
parent
dff3b66d26
commit
5c32aae3f1
@ -585,7 +585,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
|
|||||||
public debug = false;
|
public debug = false;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* An identifier to obtain a reference to this widget using the {@link getSpineWidget} function.
|
* An identifier to obtain this widget using the {@link getSpineWidget} function.
|
||||||
* This is useful when you need to interact with the widget using js.
|
* This is useful when you need to interact with the widget using js.
|
||||||
* Connected to `identifier` attribute.
|
* Connected to `identifier` attribute.
|
||||||
*/
|
*/
|
||||||
@ -640,8 +640,8 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
|
|||||||
/**
|
/**
|
||||||
* Replace the default state and skeleton update logic for this widget.
|
* Replace the default state and skeleton update logic for this widget.
|
||||||
* @param delta - The milliseconds elapsed since the last update.
|
* @param delta - The milliseconds elapsed since the last update.
|
||||||
* @param skeleton - A reference to the widget's skeleton
|
* @param skeleton - The widget's skeleton
|
||||||
* @param state - A reference to the widget's state
|
* @param state - The widget's state
|
||||||
*/
|
*/
|
||||||
public update?: UpdateSpineWidgetFunction;
|
public update?: UpdateSpineWidgetFunction;
|
||||||
|
|
||||||
@ -700,7 +700,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
|
|||||||
public loading = true;
|
public loading = true;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A reference to the {@link LoadingScreenWidget} of this widget.
|
* The {@link LoadingScreenWidget} of this widget.
|
||||||
* This is instantiated only if it is really necessary.
|
* This is instantiated only if it is really necessary.
|
||||||
* For example, if {@link loadingSpinner} is `false`, this property value is null
|
* For example, if {@link loadingSpinner} is `false`, this property value is null
|
||||||
*/
|
*/
|
||||||
@ -880,9 +880,9 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
|
|||||||
|
|
||||||
disconnectedCallback (): void {
|
disconnectedCallback (): void {
|
||||||
window.removeEventListener("DOMContentLoaded", this.DOMContentLoadedHandler);
|
window.removeEventListener("DOMContentLoaded", this.DOMContentLoadedHandler);
|
||||||
const index = this.overlay?.skeletonList.indexOf(this);
|
const index = this.overlay?.widgets.indexOf(this);
|
||||||
if (index > 0) {
|
if (index > 0) {
|
||||||
this.overlay!.skeletonList.splice(index, 1);
|
this.overlay!.widgets.splice(index, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1399,15 +1399,15 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
|
|||||||
/**
|
/**
|
||||||
* A list holding the widgets added to this overlay.
|
* A list holding the widgets added to this overlay.
|
||||||
*/
|
*/
|
||||||
public skeletonList = new Array<SpineWebComponentWidget>();
|
public widgets = new Array<SpineWebComponentWidget>();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A reference to the {@link SceneRenderer} used by this overlay.
|
* The {@link SceneRenderer} used by this overlay.
|
||||||
*/
|
*/
|
||||||
public renderer: SceneRenderer;
|
public renderer: SceneRenderer;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A reference to the {@link AssetManager} used by this overlay.
|
* The {@link AssetManager} used by this overlay.
|
||||||
*/
|
*/
|
||||||
public assetManager: AssetManager;
|
public assetManager: AssetManager;
|
||||||
|
|
||||||
@ -1456,7 +1456,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
|
|||||||
private root: ShadowRoot;
|
private root: ShadowRoot;
|
||||||
|
|
||||||
private div: HTMLDivElement;
|
private div: HTMLDivElement;
|
||||||
private slotFollowerElementsHolder: HTMLDivElement;
|
private boneFollowersParent: HTMLDivElement;
|
||||||
private canvas: HTMLCanvasElement;
|
private canvas: HTMLCanvasElement;
|
||||||
private fps: HTMLSpanElement;
|
private fps: HTMLSpanElement;
|
||||||
private fpsAppended = false;
|
private fpsAppended = false;
|
||||||
@ -1512,20 +1512,20 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
|
|||||||
this.root.appendChild(this.div);
|
this.root.appendChild(this.div);
|
||||||
|
|
||||||
this.canvas = document.createElement("canvas");
|
this.canvas = document.createElement("canvas");
|
||||||
this.slotFollowerElementsHolder = document.createElement("div");
|
this.boneFollowersParent = document.createElement("div");
|
||||||
|
|
||||||
this.div.appendChild(this.canvas);
|
this.div.appendChild(this.canvas);
|
||||||
this.canvas.style.position = "absolute";
|
this.canvas.style.position = "absolute";
|
||||||
this.canvas.style.top = "0";
|
this.canvas.style.top = "0";
|
||||||
this.canvas.style.left = "0";
|
this.canvas.style.left = "0";
|
||||||
|
|
||||||
this.div.appendChild(this.slotFollowerElementsHolder);
|
this.div.appendChild(this.boneFollowersParent);
|
||||||
this.slotFollowerElementsHolder.style.position = "absolute";
|
this.boneFollowersParent.style.position = "absolute";
|
||||||
this.slotFollowerElementsHolder.style.top = "0";
|
this.boneFollowersParent.style.top = "0";
|
||||||
this.slotFollowerElementsHolder.style.left = "0";
|
this.boneFollowersParent.style.left = "0";
|
||||||
this.slotFollowerElementsHolder.style.whiteSpace = "nowrap";
|
this.boneFollowersParent.style.whiteSpace = "nowrap";
|
||||||
this.slotFollowerElementsHolder.style.setProperty("pointer-events", "none");
|
this.boneFollowersParent.style.setProperty("pointer-events", "none");
|
||||||
this.slotFollowerElementsHolder.style.transform = `translate(0px,0px)`;
|
this.boneFollowersParent.style.transform = `translate(0px,0px)`;
|
||||||
|
|
||||||
this.canvas.style.setProperty("pointer-events", "none");
|
this.canvas.style.setProperty("pointer-events", "none");
|
||||||
this.canvas.style.transform = `translate(0px,0px)`;
|
this.canvas.style.transform = `translate(0px,0px)`;
|
||||||
@ -1562,7 +1562,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
|
|||||||
|
|
||||||
this.intersectionObserver = new IntersectionObserver((widgets) => {
|
this.intersectionObserver = new IntersectionObserver((widgets) => {
|
||||||
widgets.forEach(({ isIntersecting, target, intersectionRatio }) => {
|
widgets.forEach(({ isIntersecting, target, intersectionRatio }) => {
|
||||||
this.skeletonList.forEach(widget => {
|
this.widgets.forEach(widget => {
|
||||||
if (widget.getHostElement() != target) return;
|
if (widget.getHostElement() != target) return;
|
||||||
|
|
||||||
// old browsers do not have isIntersecting
|
// old browsers do not have isIntersecting
|
||||||
@ -1593,7 +1593,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
|
|||||||
window.addEventListener("resize", this.resizeCallback)
|
window.addEventListener("resize", this.resizeCallback)
|
||||||
}
|
}
|
||||||
|
|
||||||
this.skeletonList.forEach((widget) => {
|
this.widgets.forEach((widget) => {
|
||||||
this.intersectionObserver?.observe(widget.getHostElement());
|
this.intersectionObserver?.observe(widget.getHostElement());
|
||||||
})
|
})
|
||||||
this.input = this.setupDragUtility();
|
this.input = this.setupDragUtility();
|
||||||
@ -1669,14 +1669,14 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
|
|||||||
*/
|
*/
|
||||||
dispose (): void {
|
dispose (): void {
|
||||||
this.remove();
|
this.remove();
|
||||||
this.skeletonList.forEach(widget => widget.dispose());
|
this.widgets.forEach(widget => widget.dispose());
|
||||||
this.skeletonList.length = 0;
|
this.widgets.length = 0;
|
||||||
this.renderer.dispose();
|
this.renderer.dispose();
|
||||||
this.disposed = true;
|
this.disposed = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
addWidget (widget: SpineWebComponentWidget) {
|
addWidget (widget: SpineWebComponentWidget) {
|
||||||
this.skeletonList.push(widget);
|
this.widgets.push(widget);
|
||||||
this.intersectionObserver?.observe(widget.getHostElement());
|
this.intersectionObserver?.observe(widget.getHostElement());
|
||||||
if (this.loaded) {
|
if (this.loaded) {
|
||||||
const comparison = this.compareDocumentPosition(widget);
|
const comparison = this.compareDocumentPosition(widget);
|
||||||
@ -1688,7 +1688,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
|
|||||||
}
|
}
|
||||||
|
|
||||||
addSlotFollowerElement (element: HTMLElement) {
|
addSlotFollowerElement (element: HTMLElement) {
|
||||||
this.slotFollowerElementsHolder.appendChild(element);
|
this.boneFollowersParent.appendChild(element);
|
||||||
this.resizeCallback();
|
this.resizeCallback();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1698,7 +1698,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
|
|||||||
|
|
||||||
const updateWidgets = () => {
|
const updateWidgets = () => {
|
||||||
const delta = this.time.delta;
|
const delta = this.time.delta;
|
||||||
this.skeletonList.forEach(({ skeleton, state, update, onScreen, offScreenUpdateBehaviour, beforeUpdateWorldTransforms, afterUpdateWorldTransforms }) => {
|
this.widgets.forEach(({ skeleton, state, update, onScreen, offScreenUpdateBehaviour, beforeUpdateWorldTransforms, afterUpdateWorldTransforms }) => {
|
||||||
if (!skeleton || !state) return;
|
if (!skeleton || !state) return;
|
||||||
if (!onScreen && offScreenUpdateBehaviour === "pause") return;
|
if (!onScreen && offScreenUpdateBehaviour === "pause") return;
|
||||||
if (update) update(delta, skeleton, state)
|
if (update) update(delta, skeleton, state)
|
||||||
@ -1770,7 +1770,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
|
|||||||
}
|
}
|
||||||
|
|
||||||
const tempVector = new Vector3();
|
const tempVector = new Vector3();
|
||||||
this.skeletonList.forEach((widget) => {
|
this.widgets.forEach((widget) => {
|
||||||
const { skeleton, pma, bounds, mode, debug, offsetX, offsetY, xAxis, yAxis, dragX, dragY, fit, loadingSpinner, onScreen, loading, clip, isDraggable } = widget;
|
const { skeleton, pma, bounds, mode, debug, offsetX, offsetY, xAxis, yAxis, dragX, dragY, fit, loadingSpinner, onScreen, loading, clip, isDraggable } = widget;
|
||||||
|
|
||||||
if ((!onScreen && dragX === 0 && dragY === 0)) return;
|
if ((!onScreen && dragX === 0 && dragY === 0)) return;
|
||||||
@ -1938,7 +1938,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
|
|||||||
}
|
}
|
||||||
|
|
||||||
const updateFollowSlotsPosition = () => {
|
const updateFollowSlotsPosition = () => {
|
||||||
this.skeletonList.forEach((widget) => {
|
this.widgets.forEach((widget) => {
|
||||||
if (widget.skeleton && widget.onScreen) {
|
if (widget.skeleton && widget.onScreen) {
|
||||||
widget.boneFollowerList.forEach(({ slot, bone, element, followAttachmentAttach, followRotation, followOpacity, followScale, hideAttachment }) => {
|
widget.boneFollowerList.forEach(({ slot, bone, element, followAttachmentAttach, followRotation, followOpacity, followScale, hideAttachment }) => {
|
||||||
|
|
||||||
@ -2050,7 +2050,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
|
|||||||
const input = getInput(ev);
|
const input = getInput(ev);
|
||||||
this.updateCursor(input);
|
this.updateCursor(input);
|
||||||
|
|
||||||
this.skeletonList.forEach(widget => {
|
this.widgets.forEach(widget => {
|
||||||
if (!this.updateWidgetCursor(widget) || !widget.onScreen) return;
|
if (!this.updateWidgetCursor(widget) || !widget.onScreen) return;
|
||||||
|
|
||||||
widget.cursorEventUpdate("move", ev);
|
widget.cursorEventUpdate("move", ev);
|
||||||
@ -2061,7 +2061,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
|
|||||||
|
|
||||||
this.updateCursor(input);
|
this.updateCursor(input);
|
||||||
|
|
||||||
this.skeletonList.forEach(widget => {
|
this.widgets.forEach(widget => {
|
||||||
if (!this.updateWidgetCursor(widget) || !widget.onScreen && widget.dragX === 0 && widget.dragY === 0) return;
|
if (!this.updateWidgetCursor(widget) || !widget.onScreen && widget.dragX === 0 && widget.dragY === 0) return;
|
||||||
|
|
||||||
widget.cursorEventUpdate("down", ev);
|
widget.cursorEventUpdate("down", ev);
|
||||||
@ -2086,7 +2086,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
|
|||||||
|
|
||||||
this.updateCursor(input);
|
this.updateCursor(input);
|
||||||
|
|
||||||
this.skeletonList.forEach(widget => {
|
this.widgets.forEach(widget => {
|
||||||
if (!this.updateWidgetCursor(widget) || !widget.onScreen && widget.dragX === 0 && widget.dragY === 0) return;
|
if (!this.updateWidgetCursor(widget) || !widget.onScreen && widget.dragX === 0 && widget.dragY === 0) return;
|
||||||
|
|
||||||
widget.cursorEventUpdate("drag", ev);
|
widget.cursorEventUpdate("drag", ev);
|
||||||
@ -2104,7 +2104,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
|
|||||||
prevY = input.y;
|
prevY = input.y;
|
||||||
},
|
},
|
||||||
up: (x, y, ev) => {
|
up: (x, y, ev) => {
|
||||||
this.skeletonList.forEach(widget => {
|
this.widgets.forEach(widget => {
|
||||||
widget.dragging = false;
|
widget.dragging = false;
|
||||||
|
|
||||||
if (widget.cursorInsideBounds) {
|
if (widget.cursorInsideBounds) {
|
||||||
@ -2233,7 +2233,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
|
|||||||
private dprScale = 1;
|
private dprScale = 1;
|
||||||
|
|
||||||
private scaleSkeletonDPR () {
|
private scaleSkeletonDPR () {
|
||||||
this.skeletonList.forEach((widget) => {
|
this.widgets.forEach((widget) => {
|
||||||
// inside mode scale automatically to fit the skeleton within its parent
|
// inside mode scale automatically to fit the skeleton within its parent
|
||||||
if (widget.mode !== "origin" && widget.fit !== "none") return;
|
if (widget.mode !== "origin" && widget.fit !== "none") return;
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user