From 4acd202f411ce6c1ae5c30934a61d62505d4fd75 Mon Sep 17 00:00:00 2001 From: Davide Tantillo Date: Mon, 12 May 2025 11:43:11 +0200 Subject: [PATCH] [ts][wecomponents] Determine overlay z-index when widget is added. --- .../src/SpineWebComponentOverlay.ts | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts b/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts index fc6a6c0c1..58c2e10da 100644 --- a/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts +++ b/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts @@ -149,6 +149,8 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr private lastCanvasBaseWidth = 0; private lastCanvasBaseHeight = 0; + private zIndex?: number; + private disposed = false; private loaded = false; @@ -376,6 +378,8 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr this.parentElement!.appendChild(this); } } + + this.updateZIndexIfNecessary(widget); } /** @@ -1000,6 +1004,23 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr this.canvas.style.transform = `translate(${scrollPositionX}px,${scrollPositionY}px)`; } + private updateZIndexIfNecessary (element: HTMLElement) { + let parent: HTMLElement | null = element; + let zIndex: undefined | number; + do { + let currentZIndex = parseInt(parent!.style.zIndex); + + // searching the shallowest z-index + if (!isNaN(currentZIndex)) zIndex = currentZIndex; + parent = parent.parentElement; + } while (parent && parent !== document.body) + + if (zIndex && (!this.zIndex || this.zIndex < zIndex)) { + this.zIndex = zIndex; + this.div.style.zIndex = `${this.zIndex}`; + } + } + /* * Other utilities */