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 000000000..e559c6496
Binary files /dev/null and b/spine-ts/spine-webgl/example/assets/checker.png differ
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();
-
}
});