From 21b16389e705be23ea3468a0bf8b7e6eadab1b36 Mon Sep 17 00:00:00 2001 From: Dariusz L Date: Wed, 1 Jul 2026 20:29:43 +0200 Subject: [PATCH] refactor: simplify queue panel open/close logic --- web/css/resolver-shell.css | 18 --- web/resolver/actions/queue_methods.js | 168 +++----------------------- 2 files changed, 19 insertions(+), 167 deletions(-) diff --git a/web/css/resolver-shell.css b/web/css/resolver-shell.css index efd9952..ca5c279 100644 --- a/web/css/resolver-shell.css +++ b/web/css/resolver-shell.css @@ -209,24 +209,6 @@ background: var(--mr-bg, #121212); } -#model-resolver-queue.mr-queue-opening .mr-queue-stack { - content-visibility: hidden; - contain-intrinsic-size: 320px 420px; -} - -#model-resolver-body.mr-queue-opening-layout #model-resolver-queue { - position: absolute; - top: 8px; - right: 6px; - bottom: 6px; - z-index: 998; - box-shadow: -12px 0 24px rgba(0, 0, 0, 0.24); -} - -#model-resolver-body.mr-queue-opening-layout #model-resolver-splitter { - display: none !important; -} - #model-resolver-splitter { position: relative; width: 10px; diff --git a/web/resolver/actions/queue_methods.js b/web/resolver/actions/queue_methods.js index 411c92d..079363f 100644 --- a/web/resolver/actions/queue_methods.js +++ b/web/resolver/actions/queue_methods.js @@ -195,71 +195,6 @@ export const queueMethods = { ); }, - scheduleQueuePanelOpenUpdate(delayMs = 80) { - if (!this.queueElement || !this.queueList || !this.queueHeader) return; - if (this._queuePanelOpenFrame) { - cancelAnimationFrame(this._queuePanelOpenFrame); - this._queuePanelOpenFrame = null; - } - if (this._queuePanelOpenTimer) { - clearTimeout(this._queuePanelOpenTimer); - this._queuePanelOpenTimer = null; - } - - const runUpdate = () => { - this._queuePanelOpenTimer = null; - document.getElementById('model-resolver-body')?.classList.remove('mr-queue-opening-layout'); - this.updateQueuePanel({ force: true }); - this.queueElement?.classList?.remove('mr-queue-opening'); - this.stabilizeQueueSplitLayout(); - }; - const scheduleTimer = () => { - this._queuePanelOpenFrame = null; - this._queuePanelOpenTimer = setTimeout(runUpdate, delayMs); - }; - - this._queuePanelOpenFrame = requestAnimationFrame(scheduleTimer); - }, - - scheduleQueuePanelReveal() { - if (!this.queueElement || !this.queueList || !this.queueHeader) return; - this.cancelQueuePanelReveal(); - - const reveal = () => { - this._queuePanelRevealFrame = null; - if (this.queueCollapsed || this.activeTab !== 'missing') return; - this.queueElement?.classList?.add('mr-queue-opening'); - document.getElementById('model-resolver-body')?.classList.add('mr-queue-opening-layout'); - this.updateQueueVisibility(); - this.scheduleQueuePanelOpenUpdate(); - }; - - this._queuePanelRevealFrame = requestAnimationFrame(() => { - this._queuePanelRevealFrame = requestAnimationFrame(reveal); - }); - }, - - cancelQueuePanelReveal() { - if (this._queuePanelRevealFrame) { - cancelAnimationFrame(this._queuePanelRevealFrame); - this._queuePanelRevealFrame = null; - } - }, - - cancelQueuePanelOpenUpdate() { - this.cancelQueuePanelReveal(); - if (this._queuePanelOpenFrame) { - cancelAnimationFrame(this._queuePanelOpenFrame); - this._queuePanelOpenFrame = null; - } - if (this._queuePanelOpenTimer) { - clearTimeout(this._queuePanelOpenTimer); - this._queuePanelOpenTimer = null; - } - this.queueElement?.classList?.remove('mr-queue-opening'); - document.getElementById('model-resolver-body')?.classList.remove('mr-queue-opening-layout'); - }, - clearQueueContentSplitFlex() { if (!(this.contentElement instanceof HTMLElement)) return; this.contentElement.style.removeProperty('flex-basis'); @@ -1608,7 +1543,7 @@ export const queueMethods = { this.setQueueCollapsed(!this.queueCollapsed); }, - setQueueCollapsed(collapsed, { persist = true, updatePanel = true, deferOpen = false } = {}) { + setQueueCollapsed(collapsed, { persist = true, updatePanel = true } = {}) { const nextCollapsed = !!collapsed; const wasCollapsed = !!this.queueCollapsed; const opening = wasCollapsed && !nextCollapsed; @@ -1616,23 +1551,10 @@ export const queueMethods = { if (persist) { this.persistQueueCollapsedState(this.queueCollapsed, opening ? 500 : 0); } - if (opening && deferOpen) { - this.updateQueueToggleIcon(); - this.scheduleQueuePanelReveal(); - return; - } - if (opening) { - this.queueElement?.classList?.add('mr-queue-opening'); - document.getElementById('model-resolver-body')?.classList.add('mr-queue-opening-layout'); - } else { - this.cancelQueuePanelOpenUpdate(); - } this.updateQueueVisibility(); if (!updatePanel) return; - if (opening) { - this.scheduleQueuePanelOpenUpdate(); - } else if (this.isQueuePanelVisible()) { - this.updateQueuePanel(); + if (opening || this.isQueuePanelVisible()) { + this.updateQueuePanel({ force: opening }); } else { this._queuePanelDirty = true; } @@ -1726,9 +1648,10 @@ export const queueMethods = { this.updateQueueToggleIcon(); if (showQueuePanel && this._queuePanelDirty) { - this.queueElement?.classList?.add('mr-queue-opening'); - document.getElementById('model-resolver-body')?.classList.add('mr-queue-opening-layout'); - this.scheduleQueuePanelOpenUpdate(); + this.updateQueuePanel({ force: true }); + if (!this._splitDragging) { + this.stabilizeQueueSplitLayout(); + } } }, @@ -1756,7 +1679,7 @@ export const queueMethods = { } event?.preventDefault?.(); event?.stopPropagation?.(); - this.setQueueCollapsed(!this.queueCollapsed, { deferOpen: true }); + this.setQueueCollapsed(!this.queueCollapsed); }, startQueueEdgeDrag(event) { @@ -1765,65 +1688,8 @@ export const queueMethods = { event.preventDefault?.(); event.stopPropagation?.(); this._suppressQueueEdgeClick = true; - this.setQueueCollapsed(false, { deferOpen: true }); - this.clearQueueEdgeDragCandidate(); - const usingPointerEvents = event.type === 'pointerdown'; - this._queueEdgeDragCandidate = { - startX: event.clientX, - startY: event.clientY, - openedOnPointerDown: true - }; - this._onQueueEdgeCandidateMove = (moveEvent) => this.onQueueEdgeDragCandidateMove(moveEvent); - this._onQueueEdgeCandidateUp = () => { - const shouldClearSuppress = !!this._queueEdgeDragCandidate?.openedOnPointerDown; - this.clearQueueEdgeDragCandidate(); - if (shouldClearSuppress) { - setTimeout(() => { this._suppressQueueEdgeClick = false; }, 0); - } - }; - this._queueEdgeCandidateMoveEvent = usingPointerEvents ? 'pointermove' : 'mousemove'; - this._queueEdgeCandidateUpEvent = usingPointerEvents ? 'pointerup' : 'mouseup'; - this._queueEdgeCandidateCancelEvent = usingPointerEvents ? 'pointercancel' : null; - document.addEventListener(this._queueEdgeCandidateMoveEvent, this._onQueueEdgeCandidateMove, true); - document.addEventListener(this._queueEdgeCandidateUpEvent, this._onQueueEdgeCandidateUp, { once: true, capture: true }); - if (this._queueEdgeCandidateCancelEvent) { - document.addEventListener(this._queueEdgeCandidateCancelEvent, this._onQueueEdgeCandidateUp, { once: true, capture: true }); - } - }, - - onQueueEdgeDragCandidateMove(event) { - const candidate = this._queueEdgeDragCandidate; - if (!candidate) return; - - const dx = event.clientX - candidate.startX; - const dy = event.clientY - candidate.startY; - if ((dx * dx) + (dy * dy) < 16) return; - - event.preventDefault(); - event.stopPropagation(); - this.clearQueueEdgeDragCandidate(); - this._suppressQueueEdgeClick = true; - this.beginQueueEdgeDrag(candidate.startX, event); - this.onSplitDrag(event); - }, - - clearQueueEdgeDragCandidate() { - if (this._onQueueEdgeCandidateMove && this._queueEdgeCandidateMoveEvent) { - document.removeEventListener(this._queueEdgeCandidateMoveEvent, this._onQueueEdgeCandidateMove, true); - } - if (this._onQueueEdgeCandidateUp && this._queueEdgeCandidateUpEvent) { - document.removeEventListener(this._queueEdgeCandidateUpEvent, this._onQueueEdgeCandidateUp, true); - } - if (this._onQueueEdgeCandidateUp && this._queueEdgeCandidateCancelEvent) { - document.removeEventListener(this._queueEdgeCandidateCancelEvent, this._onQueueEdgeCandidateUp, true); - } - this._queueEdgeDragCandidate = null; - this._onQueueEdgeCandidateMove = null; - this._onQueueEdgeCandidateUp = null; - this._queueEdgeCandidateMoveEvent = null; - this._queueEdgeCandidateUpEvent = null; - this._queueEdgeCandidateCancelEvent = null; + this.beginQueueEdgeDrag(event.clientX, event); }, beginQueueEdgeDrag(startX, sourceEvent = null) { @@ -2005,7 +1871,6 @@ export const queueMethods = { e?.stopPropagation?.(); if (!this.queueElement || !this.contentElement) return; - this.cancelQueuePanelOpenUpdate(); this._queueSplitLastContainerWidth = this.getQueueSplitContainerWidth(); const bounds = this.getQueueSplitBounds(this._queueSplitLastContainerWidth, { edgeOpen }); const currentWidth = this.getQueuePaneWidth(this.queueElement) || 320; @@ -2061,8 +1926,7 @@ export const queueMethods = { this.updateQueueToggleIcon(); } if (this._queuePanelDirty) { - this.queueElement?.classList?.add('mr-queue-opening'); - this.scheduleQueuePanelOpenUpdate(); + this.updateQueuePanel({ force: true }); } } const previewCollapsed = this._splitEdgeOpen @@ -2073,6 +1937,14 @@ export const queueMethods = { const body = document.getElementById('model-resolver-body'); body?.classList.toggle('mr-queue-preview-collapsed', previewCollapsed); this.queueElement.style.display = previewCollapsed ? 'none' : ''; + if (previewCollapsed) { + const collapsedBounds = this.getQueueSplitBounds(this._splitStart.containerWidth, { edgeOpen: true }); + this.applyQueueSplitWidth(0, { + bounds: collapsedBounds, + containerWidth: this._splitStart.containerWidth, + skipIfUnchanged: true + }); + } } if (this._splitPreviewCollapsed) return; this.applyQueueSplitWidth(this._pendingSplitWidth, { @@ -2121,10 +1993,8 @@ export const queueMethods = { } catch (e) { } this.queueCollapsed = false; this.persistQueueCollapsedState(false, 500); - this.queueElement?.classList?.add('mr-queue-opening'); - document.getElementById('model-resolver-body')?.classList.add('mr-queue-opening-layout'); this.updateQueueVisibility(); - this.scheduleQueuePanelOpenUpdate(); + this.updateQueuePanel({ force: true }); this._splitEdgeOpen = false; this._pendingSplitWidth = null; this._appliedSplitWidth = null;