50 lines
1.7 KiB
JavaScript
50 lines
1.7 KiB
JavaScript
|
/**
|
|||
|
|
* Topbar overflow handler — keeps lightweight labels updated and hides
|
|||
|
|
* only low-priority AI model controls when the editor window gets narrow.
|
|||
|
|
*
|
|||
|
|
* Plus the small canvas-size display label updater (since it sits in
|
|||
|
|
* the topbar too).
|
|||
|
|
*
|
|||
|
|
* Import and Canvas stay as real topbar buttons; there is intentionally
|
|||
|
|
* no "More" overflow menu here.
|
|||
|
|
*
|
|||
|
|
* @param {{
|
|||
|
|
* container: HTMLElement,
|
|||
|
|
* registerDocClickAway: (handler: (e: Event) => void) => void,
|
|||
|
|
* }} deps
|
|||
|
|
*/
|
|||
|
|
import { state } from './state.js';
|
|||
|
|
|
|||
|
|
export function wireTopbarOverflow({ container }) {
|
|||
|
|
// Canvas-size badge updater (kept simple — it lives in the topbar).
|
|||
|
|
const sizeLabel = document.getElementById('ge-canvas-size');
|
|||
|
|
function updateSizeLabel() {
|
|||
|
|
if (sizeLabel) sizeLabel.textContent = `${state.imgWidth}×${state.imgHeight}`;
|
|||
|
|
}
|
|||
|
|
updateSizeLabel();
|
|||
|
|
|
|||
|
|
const topbar = container.querySelector('.ge-topbar');
|
|||
|
|
// The Gen control + its "Gen" label span — collapse as a group when
|
|||
|
|
// narrow. The Inpaint model selector moved into the side panel.
|
|||
|
|
const aiGroup = [
|
|||
|
|
container.querySelector('#ge-ai-model'),
|
|||
|
|
...container.querySelectorAll('.ge-topbar span[style*="font-size:9px"]'),
|
|||
|
|
].filter(Boolean);
|
|||
|
|
|
|||
|
|
function syncOverflow() {
|
|||
|
|
if (!topbar) return;
|
|||
|
|
aiGroup.forEach(el => { el.style.display = ''; });
|
|||
|
|
if (topbar.scrollWidth > topbar.clientWidth) {
|
|||
|
|
// Hide AI group first — bulky and least essential at narrow widths.
|
|||
|
|
aiGroup.forEach(el => { el.style.display = 'none'; });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (topbar && window.ResizeObserver) {
|
|||
|
|
const ro = new ResizeObserver(() => syncOverflow());
|
|||
|
|
ro.observe(topbar);
|
|||
|
|
}
|
|||
|
|
// Initial pass after layout settles.
|
|||
|
|
requestAnimationFrame(syncOverflow);
|
|||
|
|
}
|