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

getHTMLElementReference to getHostElement.

Browse Source
This commit is contained in:
Davide Tantillo 2025-04-30 12:30:50 +02:00
parent 15375fb20c
commit e5a4bccb69
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3523,7 +3523,7 @@ TODO`
if (focusInput) { if (focusInput) {
blendTo(moveVector[0], moveVector[1]); blendTo(moveVector[0], moveVector[1]);
} else { } else {
const { x, y, width, height} = widget.getHTMLElementReference().getBoundingClientRect(); const { x, y, width, height} = widget.getHostElement().getBoundingClientRect();
const l = -((widget.overlay.cursorCanvasX - (x + width)) / window.innerWidth) * ALPHA_LEFT_RANGE; const l = -((widget.overlay.cursorCanvasX - (x + width)) / window.innerWidth) * ALPHA_LEFT_RANGE;
const d = ((widget.overlay.cursorCanvasY - (y + height)) / window.innerHeight) * ALPHA_DOWN_RANGE; const d = ((widget.overlay.cursorCanvasY - (y + height)) / window.innerHeight) * ALPHA_DOWN_RANGE;
blendTo(l, d); blendTo(l, d);

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

@ -585,7 +585,8 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
public debug = false; public debug = false;
/** /**
* An identifier to obtain a reference to this widget using the getSpineWidget function * An identifier to obtain a reference to this widget using the {@link getSpineWidget} function.
* This is useful when you need to interact with the widget using js.
* Connected to `identifier` attribute. * Connected to `identifier` attribute.
*/ */
public identifier = ""; public identifier = "";
@ -945,7 +946,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
/** /**
* @returns The `HTMLElement` where the widget is hosted. * @returns The `HTMLElement` where the widget is hosted.
*/ */
public getHTMLElementReference (): HTMLElement { public getHostElement (): HTMLElement {
return (this.width <= 0 || this.width <= 0) && !this.getAttribute("style") return (this.width <= 0 || this.width <= 0) && !this.getAttribute("style")
? this.parentElement! ? this.parentElement!
: this; : this;
@ -1557,7 +1558,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.skeletonList.forEach(widget => {
if (widget.getHTMLElementReference() != target) return; if (widget.getHostElement() != target) return;
// old browsers do not have isIntersecting // old browsers do not have isIntersecting
if (isIntersecting === undefined) { if (isIntersecting === undefined) {
@ -1588,7 +1589,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
} }
this.skeletonList.forEach((widget) => { this.skeletonList.forEach((widget) => {
this.intersectionObserver?.observe(widget.getHTMLElementReference()); this.intersectionObserver?.observe(widget.getHostElement());
}) })
this.input = this.setupDragUtility(); this.input = this.setupDragUtility();
@ -1671,7 +1672,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
addWidget (widget: SpineWebComponentWidget) { addWidget (widget: SpineWebComponentWidget) {
this.skeletonList.push(widget); this.skeletonList.push(widget);
this.intersectionObserver?.observe(widget.getHTMLElementReference()); this.intersectionObserver?.observe(widget.getHostElement());
if (this.loaded) { if (this.loaded) {
const comparison = this.compareDocumentPosition(widget); const comparison = this.compareDocumentPosition(widget);
// DOCUMENT_POSITION_DISCONNECTED is needed when a widget is inside the overlay (due to followBone) // DOCUMENT_POSITION_DISCONNECTED is needed when a widget is inside the overlay (due to followBone)
@ -1768,7 +1769,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
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;
const elementRef = widget.getHTMLElementReference(); const elementRef = widget.getHostElement();
const divBounds = elementRef.getBoundingClientRect(); const divBounds = elementRef.getBoundingClientRect();
// need to use left and top, because x and y are not available on older browser // need to use left and top, because x and y are not available on older browser
divBounds.x = divBounds.left + this.overflowLeftSize; divBounds.x = divBounds.left + this.overflowLeftSize;