From e9a07bd6b9fc7398d64e0cdc626c57c26657211a Mon Sep 17 00:00:00 2001 From: Davide Tantillo Date: Tue, 8 Oct 2024 17:26:31 +0200 Subject: [PATCH] Changes to make the widget more dynamic while changing attributes. See now webcomponent-gui.html. --- .../spine-webgl/example/assets/checker.png | Bin 0 -> 161 bytes spine-ts/spine-webgl/example/canvas10.html | 274 -------------- .../spine-webgl/example/webcomponent-gui.html | 352 ++++++++++++++++++ ...ponent.html => webcomponent-tutorial.html} | 276 ++++++++------ .../src/SpineWebComponentWidget.ts | 97 +++-- 5 files changed, 566 insertions(+), 433 deletions(-) create mode 100644 spine-ts/spine-webgl/example/assets/checker.png delete mode 100644 spine-ts/spine-webgl/example/canvas10.html create mode 100644 spine-ts/spine-webgl/example/webcomponent-gui.html rename spine-ts/spine-webgl/example/{webcomponent.html => webcomponent-tutorial.html} (95%) diff --git a/spine-ts/spine-webgl/example/assets/checker.png b/spine-ts/spine-webgl/example/assets/checker.png new file mode 100644 index 0000000000000000000000000000000000000000..e559c64966d037007ae9e61742fb4165bf9629fd GIT binary patch literal 161 zcmeAS@N?(olHy`uVBq!ia0vp^CqS5y8Awi_W^)%vF%}28J2BoosZ$T+a29w(7Bet# z3xhBt!>l43n7RyxR-lN9r;B4q#hkY%9eEiP1Xv9H7=MIwa_wlj zUbW!!>@994zopr03%E+ A^Z)<= literal 0 HcmV?d00001 diff --git a/spine-ts/spine-webgl/example/canvas10.html b/spine-ts/spine-webgl/example/canvas10.html deleted file mode 100644 index f81e93517..000000000 --- a/spine-ts/spine-webgl/example/canvas10.html +++ /dev/null @@ -1,274 +0,0 @@ - - - - - - - - JS Library Showcase - - - - - - - -
- -
- -
- -
- - - -
- -
- -
- -
- -
- -
- 

-                
-
-
-
- - - - - - - - - - - - \ No newline at end of file diff --git a/spine-ts/spine-webgl/example/webcomponent-gui.html b/spine-ts/spine-webgl/example/webcomponent-gui.html new file mode 100644 index 000000000..305857531 --- /dev/null +++ b/spine-ts/spine-webgl/example/webcomponent-gui.html @@ -0,0 +1,352 @@ + + + + + + + + + Webcomponent GUI + + + + +
+
+ +
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/spine-ts/spine-webgl/example/webcomponent.html b/spine-ts/spine-webgl/example/webcomponent-tutorial.html similarity index 95% rename from spine-ts/spine-webgl/example/webcomponent.html rename to spine-ts/spine-webgl/example/webcomponent-tutorial.html index a644769bb..fdadca788 100644 --- a/spine-ts/spine-webgl/example/webcomponent.html +++ b/spine-ts/spine-webgl/example/webcomponent-tutorial.html @@ -5,7 +5,7 @@ - JS Library Showcase + Webcomponent Tutorial `; } @@ -848,13 +863,15 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable, skeleton.updateWorldTransform(Physics.update); skeleton.getBounds(offset, size, tempArray, renderer.skeletonRenderer.getSkeletonClipping()); - if (!isNaN(offset.x) && !isNaN(offset.y) && !isNaN(size.x) && !isNaN(size.y)) { + if (!isNaN(offset.x) && !isNaN(offset.y) && !isNaN(size.x) && !isNaN(size.y) && + !isNaN(minX) && !isNaN(minY) && !isNaN(maxX) && !isNaN(maxY)) { minX = Math.min(offset.x, minX); maxX = Math.max(offset.x + size.x, maxX); minY = Math.min(offset.y, minY); maxY = Math.max(offset.y + size.y, maxY); - } else - console.error("Animation bounds are invalid: " + animation.name); + } else { + return { x: 0, y: 0, width: -1, height: -1 }; + } } return { @@ -1161,7 +1178,8 @@ class SpineWebComponentOverlay extends HTMLElement implements Disposable { const { skeleton, bounds, mode, debug, offsetX, offsetY, xAxis, yAxis, dragX, dragY, fit, loadingSpinner, onScreen, loading, clip, isDraggable } = widget; if ((!onScreen && dragX === 0 && dragY === 0)) return; - const divBounds = widget.getHTMLElementReference().getBoundingClientRect(); + const elementRef = widget.getHTMLElementReference(); + const divBounds = elementRef.getBoundingClientRect(); // need to use left and top, because x and y are not available on older browser divBounds.x = divBounds.left + this.overflowLeftSize; divBounds.y = divBounds.top + this.overflowTopSize; @@ -1203,6 +1221,7 @@ class SpineWebComponentOverlay extends HTMLElement implements Disposable { if (skeleton) { if (mode === "inside") { let { x: ax, y: ay, width: aw, height: ah } = bounds; + if (aw <= 0 || ah <= 0) return; // scale ratio const scaleWidth = divWidthWorld / aw; @@ -1289,6 +1308,16 @@ class SpineWebComponentOverlay extends HTMLElement implements Disposable { widget.dragBoundsRectangle.x += divBounds.x; widget.dragBoundsRectangle.y += divBounds.y; } + + if (!widget.debugDragDiv.isConnected) document.body.appendChild(widget.debugDragDiv); + widget.debugDragDiv.style.left = `${widget.dragBoundsRectangle.x - this.overflowLeftSize}px`; + widget.debugDragDiv.style.top = `${widget.dragBoundsRectangle.y - this.overflowTopSize}px`; + widget.debugDragDiv.style.width = `${widget.dragBoundsRectangle.width}px`; + widget.debugDragDiv.style.height = `${widget.dragBoundsRectangle.height}px`; + + if (!debug && widget.debugDragDiv.isConnected) widget.debugDragDiv.remove(); + } else { + if (widget.debugDragDiv.isConnected) widget.debugDragDiv.remove(); } // drawing debug stuff @@ -1318,16 +1347,12 @@ class SpineWebComponentOverlay extends HTMLElement implements Disposable { // show line from origin to bounds center renderer.line(originX, originY, bbCenterX, bbCenterY, green); - - if (!widget.debugDragDiv.isConnected) document.body.appendChild(widget.debugDragDiv); - widget.debugDragDiv.style.left = `${widget.dragBoundsRectangle.x - this.overflowLeftSize}px`; - widget.debugDragDiv.style.top = `${widget.dragBoundsRectangle.y - this.overflowTopSize}px`; - widget.debugDragDiv.style.width = `${widget.dragBoundsRectangle.width}px`; - widget.debugDragDiv.style.height = `${widget.dragBoundsRectangle.height}px`; + if (elementRef === widget) widget.classList.add("debug-background-color"); + } else { + if (elementRef === widget) widget.classList.remove("debug-background-color"); } if (clip) clipToBoundEnd(); - } });