@mlightcad/cad-simple-viewer 1.8.0-preview.2 → 1.8.0-preview.4

package/lib/ui/dock/AcUiDockPanel.js

@@ -0,0 +1,926 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+import { acedIsMobileUiLayout, ML_UI_MOBILE_MEDIA_QUERY } from '../../editor/global/AcEdUiLayout';
+import { createIconElement, ICON_CHEVRON_DOWN, ICON_DOCK_CLOSE, ICON_DOCK_SIDE_MENU, ICON_PLACEMENT_BOTTOM, ICON_PLACEMENT_LEFT, ICON_PLACEMENT_RIGHT, ICON_PLACEMENT_TOP } from '../icons';
+import { acuiEnsureDockPanelStyles, acuiRemoveDockPanelStylesIfUnused } from './acuiDockPanelStyles';
+var DOCK_MIN_SIZE = 120;
+var DOCK_MAX_SIZE_RATIO = 0.75;
+var DOCK_TAB_OVERFLOW_BTN_WIDTH = 28;
+/**
+ * Chrome DevTools-style dock panel with tabs, open/close, and dock side selection.
+ */
+var AcUiDockPanel = /** @class */ (function () {
+    /**
+     * @param options - Host, i18n, and initial layout options.
+     */
+    function AcUiDockPanel(options) {
+        var _this = this;
+        var _a, _b, _c, _d, _e;
+        this.tabs = new Map();
+        this.closeListeners = new Set();
+        this.overflowTabIds = [];
+        this.resizeStartPos = 0;
+        this.resizeStartSize = 0;
+        this.handleResizePointerDown = function (event) {
+            if (event.button !== 0 || !_this.isPanelOpen)
+                return;
+            event.preventDefault();
+            _this.resizePointerId = event.pointerId;
+            _this.resizeStartPos =
+                _this.usesVerticalResize() ? event.clientY : event.clientX;
+            _this.resizeStartSize = _this.size;
+            var target = event.currentTarget instanceof HTMLElement
+                ? event.currentTarget
+                : _this.resizeHandle;
+            _this.resizeCaptureTarget = target;
+            target.setPointerCapture(event.pointerId);
+            document.addEventListener('pointermove', _this.handleResizePointerMove);
+            document.addEventListener('pointerup', _this.handleResizePointerUp);
+            document.addEventListener('pointercancel', _this.handleResizePointerUp);
+        };
+        this.handleResizePointerMove = function (event) {
+            if (_this.resizePointerId !== event.pointerId)
+                return;
+            event.preventDefault();
+            var delta = _this.usesPhoneSheet()
+                ? _this.resizeStartPos - event.clientY
+                : _this.side === 'bottom'
+                    ? _this.resizeStartPos - event.clientY
+                    : _this.side === 'top'
+                        ? event.clientY - _this.resizeStartPos
+                        : _this.side === 'right'
+                            ? _this.resizeStartPos - event.clientX
+                            : event.clientX - _this.resizeStartPos;
+            _this.setSize(_this.resizeStartSize + delta);
+        };
+        this.handleResizePointerUp = function (event) {
+            var _a;
+            if (_this.resizePointerId !== event.pointerId)
+                return;
+            _this.resizePointerId = undefined;
+            var captureTarget = (_a = _this.resizeCaptureTarget) !== null && _a !== void 0 ? _a : _this.resizeHandle;
+            if (captureTarget.hasPointerCapture(event.pointerId)) {
+                captureTarget.releasePointerCapture(event.pointerId);
+            }
+            _this.resizeCaptureTarget = undefined;
+            document.removeEventListener('pointermove', _this.handleResizePointerMove);
+            document.removeEventListener('pointerup', _this.handleResizePointerUp);
+            document.removeEventListener('pointercancel', _this.handleResizePointerUp);
+        };
+        this.handleDocumentPointerDown = function (event) {
+            if (!(event.target instanceof Node))
+                return;
+            if (_this.sideMenuRoot) {
+                if (!_this.sideMenuRoot.contains(event.target) &&
+                    !_this.sideMenuButton.contains(event.target)) {
+                    _this.closeSideMenu();
+                }
+            }
+            if (_this.overflowMenuRoot) {
+                if (!_this.overflowMenuRoot.contains(event.target) &&
+                    !_this.overflowButton.contains(event.target)) {
+                    _this.closeOverflowMenu();
+                }
+            }
+        };
+        this.handleMobileMediaChange = function () {
+            if (_this.usesPhoneSheet() && _this.side !== 'bottom' && _this.side !== 'top') {
+                _this.size = _this.defaultHeight;
+            }
+            _this.applyLayoutState();
+        };
+        this.host = options.host;
+        this.translate = (_a = options.t) !== null && _a !== void 0 ? _a : (function (key) { return key; });
+        this.side = (_b = options.defaultSide) !== null && _b !== void 0 ? _b : 'left';
+        this.isPanelOpen = (_c = options.defaultOpen) !== null && _c !== void 0 ? _c : false;
+        this.defaultHeight = (_d = options.defaultHeight) !== null && _d !== void 0 ? _d : 240;
+        this.defaultWidth = (_e = options.defaultWidth) !== null && _e !== void 0 ? _e : 280;
+        this.onOpen = options.onOpen;
+        this.size =
+            this.side === 'bottom' || this.side === 'top'
+                ? this.defaultHeight
+                : this.defaultWidth;
+        acuiEnsureDockPanelStyles();
+        this.ensureHostLayout();
+        this.root = document.createElement('div');
+        this.root.className = 'ml-ex-ui-dock-panel';
+        this.root.dataset.side = this.side;
+        this.root.dataset.open = String(this.isPanelOpen);
+        this.resizeHandle = document.createElement('div');
+        this.resizeHandle.className = 'ml-ex-ui-dock-resize-handle';
+        this.resizeHandle.addEventListener('pointerdown', this.handleResizePointerDown);
+        this.contentEl = document.createElement('div');
+        this.contentEl.className = 'ml-ex-ui-dock-content';
+        var header = document.createElement('div');
+        header.className = 'ml-ex-ui-dock-header';
+        this.tabsWrap = document.createElement('div');
+        this.tabsWrap.className = 'ml-ex-ui-dock-tabs-wrap';
+        this.tabsEl = document.createElement('div');
+        this.tabsEl.className = 'ml-ex-ui-dock-tabs';
+        this.tabsEl.setAttribute('role', 'tablist');
+        this.overflowButton = document.createElement('button');
+        this.overflowButton.type = 'button';
+        this.overflowButton.className = 'ml-ex-ui-dock-tab-overflow-btn';
+        this.overflowButton.hidden = true;
+        this.overflowButton.textContent = '»';
+        this.overflowButton.title = this.t('moreTabs');
+        this.overflowButton.setAttribute('aria-label', this.t('moreTabs'));
+        this.overflowButton.addEventListener('click', function (event) {
+            event.stopPropagation();
+            _this.toggleOverflowMenu();
+        });
+        this.tabsWrap.appendChild(this.tabsEl);
+        this.tabsWrap.appendChild(this.overflowButton);
+        this.tabOverflowObserver = new ResizeObserver(function () {
+            _this.scheduleUpdateTabOverflow();
+        });
+        this.tabOverflowObserver.observe(this.tabsWrap);
+        var actions = document.createElement('div');
+        actions.className = 'ml-ex-ui-dock-actions';
+        this.sideMenuButton = document.createElement('button');
+        this.sideMenuButton.type = 'button';
+        this.sideMenuButton.className = 'ml-ex-ui-dock-action-btn';
+        this.sideMenuButton.title = this.t('dockSide');
+        this.sideMenuButton.setAttribute('aria-label', this.t('dockSide'));
+        this.sideMenuButton.appendChild(createIconElement(ICON_DOCK_SIDE_MENU));
+        this.sideMenuButton.addEventListener('click', function (event) {
+            event.stopPropagation();
+            _this.toggleSideMenu();
+        });
+        this.closeButton = document.createElement('button');
+        this.closeButton.type = 'button';
+        this.closeButton.className = 'ml-ex-ui-dock-action-btn';
+        this.closeButton.title = this.t('close');
+        this.closeButton.setAttribute('aria-label', this.t('close'));
+        this.closeButton.appendChild(createIconElement(ICON_DOCK_CLOSE));
+        this.closeButton.addEventListener('click', function () { return _this.close(); });
+        actions.appendChild(this.sideMenuButton);
+        actions.appendChild(this.closeButton);
+        header.appendChild(this.tabsWrap);
+        header.appendChild(actions);
+        this.bodyEl = document.createElement('div');
+        this.bodyEl.className = 'ml-ex-ui-dock-body';
+        this.contentEl.appendChild(header);
+        this.contentEl.appendChild(this.bodyEl);
+        this.sheetChrome = document.createElement('div');
+        this.sheetChrome.className = 'ml-ex-ui-dock-sheet-chrome';
+        this.sheetGrabber = document.createElement('div');
+        this.sheetGrabber.className = 'ml-ex-ui-dock-sheet-grabber';
+        this.sheetGrabber.setAttribute('role', 'separator');
+        this.sheetGrabber.setAttribute('aria-orientation', 'horizontal');
+        this.sheetGrabber.title = this.t('resize');
+        this.sheetGrabber.setAttribute('aria-label', this.t('resize'));
+        this.sheetGrabber.addEventListener('pointerdown', this.handleResizePointerDown);
+        this.sheetCloseButton = document.createElement('button');
+        this.sheetCloseButton.type = 'button';
+        this.sheetCloseButton.className = 'ml-ex-ui-dock-sheet-close';
+        this.sheetCloseButton.title = this.t('close');
+        this.sheetCloseButton.setAttribute('aria-label', this.t('close'));
+        this.sheetCloseButton.appendChild(createIconElement(ICON_CHEVRON_DOWN));
+        this.sheetCloseButton.addEventListener('click', function () { return _this.close(); });
+        this.sheetChrome.append(this.sheetGrabber, this.sheetCloseButton);
+        this.root.appendChild(this.sheetChrome);
+        this.root.appendChild(this.contentEl);
+        this.root.appendChild(this.resizeHandle);
+        this.ensureDockMainWrapper();
+        this.mountToHost();
+        this.bindMobileMediaQuery();
+        this.applyLayoutState();
+    }
+    /**
+     * Registers a callback run each time the panel is closed (close button,
+     * toggle, or {@link close}).
+     *
+     * @returns Function that removes the callback.
+     */
+    AcUiDockPanel.prototype.addCloseListener = function (listener) {
+        var _this = this;
+        this.closeListeners.add(listener);
+        return function () { return _this.closeListeners.delete(listener); };
+    };
+    /** Whether a tab with the given id is registered. */
+    AcUiDockPanel.prototype.hasTab = function (tabId) {
+        return this.tabs.has(tabId);
+    };
+    /**
+     * Registers a tab with the dock panel.
+     *
+     * @param tab - Tab definition.
+     * @returns `true` when the tab was added; `false` if it already exists or is invalid.
+     */
+    AcUiDockPanel.prototype.addTab = function (tab) {
+        var _this = this;
+        if (this.tabs.has(tab.id))
+            return false;
+        if (!tab.labelKey && !tab.label)
+            return false;
+        var tabButtonId = "ml-ex-ui-dock-tab-".concat(tab.id);
+        var panelId = "ml-ex-ui-dock-tabpanel-".concat(tab.id);
+        var tabButton = document.createElement('button');
+        tabButton.type = 'button';
+        tabButton.className = 'ml-ex-ui-dock-tab';
+        tabButton.id = tabButtonId;
+        tabButton.setAttribute('role', 'tab');
+        tabButton.setAttribute('aria-controls', panelId);
+        tabButton.dataset.tabId = tab.id;
+        tabButton.textContent = this.getTabLabel(tab);
+        tabButton.addEventListener('click', function () {
+            _this.openPanel(tab.id);
+        });
+        var panel = document.createElement('div');
+        panel.className = 'ml-ex-ui-dock-tab-panel';
+        panel.id = panelId;
+        panel.setAttribute('role', 'tabpanel');
+        panel.setAttribute('aria-labelledby', tabButtonId);
+        panel.dataset.tabId = tab.id;
+        panel.hidden = true;
+        panel.tabIndex = -1;
+        panel.appendChild(tab.content);
+        this.tabs.set(tab.id, {
+            id: tab.id,
+            labelKey: tab.labelKey,
+            label: tab.label,
+            tabButton: tabButton,
+            panel: panel
+        });
+        this.tabsEl.appendChild(tabButton);
+        this.bodyEl.appendChild(panel);
+        if (!this.activeTabId) {
+            this.setActiveTab(tab.id);
+        }
+        this.scheduleUpdateTabOverflow();
+        return true;
+    };
+    /**
+     * Moves the dock panel to a new mount element (for example when the canvas parent
+     * becomes available after plugin load).
+     *
+     * @param newHost - New mount target.
+     */
+    AcUiDockPanel.prototype.reparentTo = function (newHost) {
+        if (this.host === newHost) {
+            this.ensureMounted();
+            this.applyLayoutState();
+            return;
+        }
+        var wasOpen = this.isPanelOpen;
+        var activeTabId = this.activeTabId;
+        this.closeSideMenu();
+        this.closeOverflowMenu();
+        this.releaseDockMainWrapper();
+        this.root.remove();
+        this.clearHostLayoutClasses();
+        this.host = newHost;
+        this.ensureHostLayout();
+        this.ensureDockMainWrapper();
+        this.mountToHost();
+        this.isPanelOpen = wasOpen;
+        if (activeTabId && this.tabs.has(activeTabId)) {
+            this.setActiveTab(activeTabId);
+        }
+        this.ensureMounted();
+        this.applyLayoutState();
+    };
+    /** Ensures the panel root is attached to the current mount host. */
+    AcUiDockPanel.prototype.ensureMounted = function () {
+        if (!this.root.isConnected) {
+            this.mountToHost();
+        }
+    };
+    /**
+     * Removes a tab and its content panel from the dock.
+     *
+     * @param tabId - Tab identifier to remove.
+     */
+    AcUiDockPanel.prototype.removeTab = function (tabId) {
+        var tab = this.tabs.get(tabId);
+        if (!tab)
+            return;
+        tab.tabButton.remove();
+        tab.panel.remove();
+        this.tabs.delete(tabId);
+        if (this.activeTabId === tabId) {
+            var nextTabId = this.tabs.keys().next().value;
+            this.activeTabId = undefined;
+            if (nextTabId) {
+                this.setActiveTab(nextTabId);
+            }
+        }
+        this.scheduleUpdateTabOverflow();
+    };
+    Object.defineProperty(AcUiDockPanel.prototype, "hasTabs", {
+        /** Whether the dock panel has any registered tabs. */
+        get: function () {
+            return this.tabs.size > 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Opens the panel and optionally activates a tab.
+     *
+     * @param tabId - Tab to activate.
+     */
+    AcUiDockPanel.prototype.open = function (tabId) {
+        var _a;
+        (_a = this.onOpen) === null || _a === void 0 ? void 0 : _a.call(this);
+        if (tabId) {
+            this.setActiveTab(tabId);
+        }
+        else if (this.activeTabId) {
+            this.setActiveTab(this.activeTabId);
+        }
+        else if (this.tabs.size > 0) {
+            this.setActiveTab(this.tabs.keys().next().value);
+        }
+        this.isPanelOpen = true;
+        this.ensureMounted();
+        this.applyLayoutState();
+    };
+    /** Closes the panel without destroying it. */
+    AcUiDockPanel.prototype.close = function () {
+        var e_1, _a;
+        this.isPanelOpen = false;
+        this.closeSideMenu();
+        this.closeOverflowMenu();
+        this.applyLayoutState();
+        try {
+            for (var _b = __values(__spreadArray([], __read(this.closeListeners), false)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var listener = _c.value;
+                listener();
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    };
+    /**
+     * Toggles panel visibility; when opening, activates the given tab.
+     *
+     * @param tabId - Tab to activate when opening.
+     */
+    AcUiDockPanel.prototype.toggle = function (tabId) {
+        if (this.isPanelOpen && (!tabId || this.activeTabId === tabId)) {
+            this.close();
+            return;
+        }
+        this.open(tabId);
+    };
+    /**
+     * Switches dock side and re-mounts within the host.
+     *
+     * @param side - New dock side.
+     */
+    AcUiDockPanel.prototype.setSide = function (side) {
+        if (this.side === side)
+            return;
+        var previousSide = this.side;
+        this.side = side;
+        if ((previousSide === 'left' || previousSide === 'right') &&
+            (side === 'left' || side === 'right')) {
+            // Keep width when switching between left and right.
+        }
+        else if ((previousSide === 'top' || previousSide === 'bottom') &&
+            (side === 'top' || side === 'bottom')) {
+            // Keep height when switching between top and bottom.
+        }
+        else {
+            this.size =
+                side === 'bottom' || side === 'top'
+                    ? this.defaultHeight
+                    : this.defaultWidth;
+        }
+        this.closeSideMenu();
+        this.closeOverflowMenu();
+        this.mountToHost();
+        this.applyLayoutState();
+        this.scheduleUpdateTabOverflow();
+    };
+    /** Current mount host element for the dock panel root. */
+    AcUiDockPanel.prototype.getMountHost = function () {
+        return this.host;
+    };
+    Object.defineProperty(AcUiDockPanel.prototype, "isOpen", {
+        /** Whether the panel is currently open. */
+        get: function () {
+            return this.isPanelOpen;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /** Current dock side. */
+    AcUiDockPanel.prototype.getSide = function () {
+        return this.side;
+    };
+    /** Current panel size in px (width for left/right, height for top/bottom). */
+    AcUiDockPanel.prototype.getSize = function () {
+        return this.size;
+    };
+    /**
+     * Sets panel size in px, clamped to the dock host bounds.
+     *
+     * @param size - Target size in px.
+     */
+    AcUiDockPanel.prototype.setPanelSize = function (size) {
+        this.setSize(size);
+    };
+    Object.defineProperty(AcUiDockPanel.prototype, "activeTab", {
+        /** Current active tab id, if any. */
+        get: function () {
+            return this.activeTabId;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /** Updates tab labels and action button titles after locale change. */
+    AcUiDockPanel.prototype.refreshLocale = function () {
+        var e_2, _a;
+        try {
+            for (var _b = __values(this.tabs.values()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var tab = _c.value;
+                tab.tabButton.textContent = this.getTabLabel(tab);
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        this.sideMenuButton.title = this.t('dockSide');
+        this.sideMenuButton.setAttribute('aria-label', this.t('dockSide'));
+        this.closeButton.title = this.t('close');
+        this.closeButton.setAttribute('aria-label', this.t('close'));
+        this.overflowButton.title = this.t('moreTabs');
+        this.overflowButton.setAttribute('aria-label', this.t('moreTabs'));
+        this.sheetGrabber.title = this.t('resize');
+        this.sheetGrabber.setAttribute('aria-label', this.t('resize'));
+        this.sheetCloseButton.title = this.t('close');
+        this.sheetCloseButton.setAttribute('aria-label', this.t('close'));
+        if (this.sideMenuRoot) {
+            this.renderSideMenuItems();
+        }
+        if (this.overflowMenuRoot) {
+            this.renderOverflowMenuItems();
+        }
+        this.scheduleUpdateTabOverflow();
+    };
+    /** Removes the panel from the DOM and cleans up listeners. */
+    AcUiDockPanel.prototype.destroy = function () {
+        var _a;
+        document.removeEventListener('pointerdown', this.handleDocumentPointerDown, true);
+        document.removeEventListener('pointermove', this.handleResizePointerMove);
+        document.removeEventListener('pointerup', this.handleResizePointerUp);
+        document.removeEventListener('pointercancel', this.handleResizePointerUp);
+        if (this.tabOverflowFrame !== undefined) {
+            cancelAnimationFrame(this.tabOverflowFrame);
+            this.tabOverflowFrame = undefined;
+        }
+        (_a = this.tabOverflowObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.tabOverflowObserver = undefined;
+        this.unbindMobileMediaQuery();
+        this.closeSideMenu();
+        this.closeOverflowMenu();
+        this.releaseDockMainWrapper();
+        this.clearHostLayoutClasses();
+        this.root.remove();
+        acuiRemoveDockPanelStylesIfUnused();
+    };
+    AcUiDockPanel.prototype.openPanel = function (tabId) {
+        this.setActiveTab(tabId);
+        this.isPanelOpen = true;
+        this.applyLayoutState();
+    };
+    AcUiDockPanel.prototype.setActiveTab = function (tabId) {
+        var e_3, _a;
+        if (!this.tabs.has(tabId))
+            return;
+        this.activeTabId = tabId;
+        try {
+            for (var _b = __values(this.tabs.values()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var tab = _c.value;
+                var active = tab.id === tabId;
+                tab.tabButton.classList.toggle('is-active', active);
+                tab.tabButton.setAttribute('aria-selected', String(active));
+                tab.tabButton.tabIndex = active ? 0 : -1;
+                tab.panel.hidden = !active;
+                if (active) {
+                    tab.panel.removeAttribute('aria-hidden');
+                }
+                else {
+                    tab.panel.setAttribute('aria-hidden', 'true');
+                }
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+        this.scheduleUpdateTabOverflow();
+    };
+    AcUiDockPanel.prototype.ensureHostLayout = function () {
+        if (getComputedStyle(this.host).position === 'static') {
+            this.host.style.position = 'relative';
+        }
+        if (!this.host.classList.contains('ml-ex-ui-host-dock')) {
+            this.host.classList.add('ml-ex-ui-host-dock');
+        }
+    };
+    /**
+     * Groups existing mount-target children so flex shrink applies to the canvas slot only.
+     */
+    AcUiDockPanel.prototype.ensureDockMainWrapper = function () {
+        var _a;
+        if ((_a = this.dockMainWrapper) === null || _a === void 0 ? void 0 : _a.isConnected)
+            return;
+        var movable = [];
+        Array.from(this.host.childNodes).forEach(function (child) {
+            if (child instanceof HTMLElement &&
+                child.classList.contains('ml-ex-ui-dock-panel')) {
+                return;
+            }
+            movable.push(child);
+        });
+        if (movable.length === 0)
+            return;
+        var wrapper = document.createElement('div');
+        wrapper.className = 'ml-ex-ui-dock-main';
+        movable.forEach(function (node) { return wrapper.appendChild(node); });
+        this.host.appendChild(wrapper);
+        this.dockMainWrapper = wrapper;
+    };
+    /** Moves canvas content out of the dock wrapper and restores the original host tree. */
+    AcUiDockPanel.prototype.releaseDockMainWrapper = function () {
+        var _a;
+        if (!((_a = this.dockMainWrapper) === null || _a === void 0 ? void 0 : _a.isConnected)) {
+            this.dockMainWrapper = undefined;
+            return;
+        }
+        while (this.dockMainWrapper.firstChild) {
+            this.host.insertBefore(this.dockMainWrapper.firstChild, this.dockMainWrapper);
+        }
+        this.dockMainWrapper.remove();
+        this.dockMainWrapper = undefined;
+    };
+    AcUiDockPanel.prototype.clearHostLayoutClasses = function () {
+        this.host.classList.remove('ml-ex-ui-host-dock', 'ml-ex-ui-host-dock-top', 'ml-ex-ui-host-dock-bottom', 'ml-ex-ui-host-dock-left', 'ml-ex-ui-host-dock-right', 'ml-ex-ui-host-dock-sheet');
+    };
+    AcUiDockPanel.prototype.mountToHost = function () {
+        this.ensureDockMainWrapper();
+        if (this.root.isConnected) {
+            this.root.remove();
+        }
+        if (this.side === 'left' || this.side === 'top') {
+            this.host.insertBefore(this.root, this.host.firstChild);
+            return;
+        }
+        this.host.appendChild(this.root);
+    };
+    AcUiDockPanel.prototype.applyLayoutState = function () {
+        var phoneSheet = this.usesPhoneSheet();
+        this.root.dataset.side = this.side;
+        this.root.dataset.open = String(this.isPanelOpen);
+        this.root.dataset.phoneSheet = String(phoneSheet);
+        this.host.classList.remove('ml-ex-ui-host-dock-top', 'ml-ex-ui-host-dock-bottom', 'ml-ex-ui-host-dock-left', 'ml-ex-ui-host-dock-right', 'ml-ex-ui-host-dock-sheet');
+        if (this.isPanelOpen) {
+            this.host.classList.add(phoneSheet ? 'ml-ex-ui-host-dock-sheet' : "ml-ex-ui-host-dock-".concat(this.side));
+        }
+        if (phoneSheet) {
+            this.syncPhoneSheetInset();
+        }
+        else {
+            this.root.style.removeProperty('--ml-ex-ui-phone-sheet-inset');
+        }
+        this.root.style.setProperty('--ml-ex-ui-dock-size', "".concat(this.size, "px"));
+        this.scheduleUpdateTabOverflow();
+    };
+    AcUiDockPanel.prototype.setSize = function (nextSize) {
+        var maxSize = this.getMaxSize();
+        this.size = Math.max(DOCK_MIN_SIZE, Math.min(maxSize, nextSize));
+        this.root.style.setProperty('--ml-ex-ui-dock-size', "".concat(this.size, "px"));
+        this.scheduleUpdateTabOverflow();
+    };
+    AcUiDockPanel.prototype.getMaxSize = function () {
+        if (this.usesPhoneSheet() || this.side === 'bottom' || this.side === 'top') {
+            var available = this.usesPhoneSheet()
+                ? this.host.clientHeight - this.getPhoneChromeInset()
+                : this.host.clientHeight;
+            return Math.max(DOCK_MIN_SIZE, available * DOCK_MAX_SIZE_RATIO);
+        }
+        return Math.max(DOCK_MIN_SIZE, this.host.clientWidth * DOCK_MAX_SIZE_RATIO);
+    };
+    /** Whether the dock is shown as a full-width sheet above the phone toolbar. */
+    AcUiDockPanel.prototype.usesPhoneSheet = function () {
+        return acedIsMobileUiLayout();
+    };
+    /** Whether height (rather than width) is resized. */
+    AcUiDockPanel.prototype.usesVerticalResize = function () {
+        return this.usesPhoneSheet() || this.side === 'bottom' || this.side === 'top';
+    };
+    AcUiDockPanel.prototype.bindMobileMediaQuery = function () {
+        if (typeof window.matchMedia !== 'function')
+            return;
+        this.mobileMediaQuery = window.matchMedia(ML_UI_MOBILE_MEDIA_QUERY);
+        this.mobileMediaQuery.addEventListener('change', this.handleMobileMediaChange);
+    };
+    AcUiDockPanel.prototype.unbindMobileMediaQuery = function () {
+        var _a;
+        (_a = this.mobileMediaQuery) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.handleMobileMediaChange);
+        this.mobileMediaQuery = undefined;
+    };
+    AcUiDockPanel.prototype.syncPhoneSheetInset = function () {
+        this.root.style.setProperty('--ml-ex-ui-phone-sheet-inset', "".concat(this.getPhoneChromeInset(), "px"));
+    };
+    /** Combined height of the in-host toolbar and any visible sub-toolbars. */
+    AcUiDockPanel.prototype.getPhoneChromeInset = function () {
+        var _this = this;
+        var inset = 0;
+        var toolbar = this.host.querySelector('.ml-ex-ui-toolbar');
+        if (toolbar instanceof HTMLElement && this.isElementVisible(toolbar)) {
+            inset += toolbar.offsetHeight;
+        }
+        this.host.querySelectorAll('.ml-ex-ui-subtoolbar').forEach(function (node) {
+            if (node instanceof HTMLElement && _this.isElementVisible(node)) {
+                inset += node.offsetHeight;
+            }
+        });
+        return inset;
+    };
+    AcUiDockPanel.prototype.isElementVisible = function (element) {
+        if (element.hidden)
+            return false;
+        return element.offsetParent !== null || element.getClientRects().length > 0;
+    };
+    AcUiDockPanel.prototype.toggleSideMenu = function () {
+        if (this.sideMenuRoot) {
+            this.closeSideMenu();
+            return;
+        }
+        this.closeOverflowMenu();
+        this.openSideMenu();
+    };
+    AcUiDockPanel.prototype.openSideMenu = function () {
+        this.sideMenuRoot = document.createElement('div');
+        this.sideMenuRoot.className = 'ml-ex-ui-dock-side-menu';
+        this.sideMenuRoot.setAttribute('role', 'menu');
+        this.renderSideMenuItems();
+        var rect = this.sideMenuButton.getBoundingClientRect();
+        this.host.appendChild(this.sideMenuRoot);
+        this.sideMenuRoot.style.top = "".concat(rect.bottom + 4, "px");
+        this.sideMenuRoot.style.left = "".concat(Math.max(8, rect.right - 160), "px");
+        this.syncOutsidePointerListener();
+    };
+    AcUiDockPanel.prototype.renderSideMenuItems = function () {
+        var _this = this;
+        if (!this.sideMenuRoot)
+            return;
+        this.sideMenuRoot.replaceChildren();
+        var sides = [
+            { side: 'top', labelKey: 'dockTop', icon: ICON_PLACEMENT_TOP },
+            {
+                side: 'bottom',
+                labelKey: 'dockBottom',
+                icon: ICON_PLACEMENT_BOTTOM
+            },
+            {
+                side: 'left',
+                labelKey: 'dockLeft',
+                icon: ICON_PLACEMENT_LEFT
+            },
+            {
+                side: 'right',
+                labelKey: 'dockRight',
+                icon: ICON_PLACEMENT_RIGHT
+            }
+        ];
+        sides.forEach(function (entry) {
+            var button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'ml-ex-ui-dock-side-menu-item';
+            button.setAttribute('role', 'menuitem');
+            if (entry.side === _this.side) {
+                button.classList.add('is-selected');
+            }
+            button.appendChild(createIconElement(entry.icon));
+            var label = document.createElement('span');
+            label.textContent = _this.t(entry.labelKey);
+            button.appendChild(label);
+            button.addEventListener('click', function (event) {
+                event.stopPropagation();
+                _this.setSide(entry.side);
+                _this.closeSideMenu();
+            });
+            _this.sideMenuRoot.appendChild(button);
+        });
+    };
+    AcUiDockPanel.prototype.closeSideMenu = function () {
+        var _a;
+        (_a = this.sideMenuRoot) === null || _a === void 0 ? void 0 : _a.remove();
+        this.sideMenuRoot = undefined;
+        this.syncOutsidePointerListener();
+    };
+    AcUiDockPanel.prototype.syncOutsidePointerListener = function () {
+        document.removeEventListener('pointerdown', this.handleDocumentPointerDown, true);
+        if (this.sideMenuRoot || this.overflowMenuRoot) {
+            document.addEventListener('pointerdown', this.handleDocumentPointerDown, true);
+        }
+    };
+    AcUiDockPanel.prototype.scheduleUpdateTabOverflow = function () {
+        var _this = this;
+        if (this.tabOverflowFrame !== undefined)
+            return;
+        this.tabOverflowFrame = requestAnimationFrame(function () {
+            _this.tabOverflowFrame = undefined;
+            _this.updateTabOverflow();
+        });
+    };
+    AcUiDockPanel.prototype.updateTabOverflow = function () {
+        var _a;
+        var tabList = Array.from(this.tabs.values());
+        if (tabList.length === 0) {
+            this.overflowButton.hidden = true;
+            this.overflowTabIds = [];
+            return;
+        }
+        this.overflowButton.hidden = true;
+        tabList.forEach(function (tab) {
+            tab.tabButton.hidden = false;
+        });
+        var wrapWidth = this.tabsWrap.clientWidth;
+        if (wrapWidth <= 0)
+            return;
+        var totalWidth = tabList.reduce(function (sum, tab) { return sum + tab.tabButton.offsetWidth; }, 0);
+        if (totalWidth <= wrapWidth) {
+            this.overflowTabIds = [];
+            this.overflowButton.hidden = true;
+            this.overflowButton.classList.remove('is-active');
+            if (this.overflowMenuRoot) {
+                this.closeOverflowMenu();
+            }
+            return;
+        }
+        var activeId = (_a = this.activeTabId) !== null && _a !== void 0 ? _a : tabList[0].id;
+        var availableWidth = wrapWidth - DOCK_TAB_OVERFLOW_BTN_WIDTH;
+        var visible = new Set(tabList.map(function (tab) { return tab.id; }));
+        var hidden = new Set();
+        var sumVisibleWidth = function () {
+            return tabList
+                .filter(function (tab) { return visible.has(tab.id); })
+                .reduce(function (sum, tab) { return sum + tab.tabButton.offsetWidth; }, 0);
+        };
+        while (visible.size > 1 && sumVisibleWidth() > availableWidth) {
+            var hideId = void 0;
+            for (var index = tabList.length - 1; index >= 0; index -= 1) {
+                var id = tabList[index].id;
+                if (id === activeId || !visible.has(id))
+                    continue;
+                hideId = id;
+                break;
+            }
+            if (!hideId)
+                break;
+            visible.delete(hideId);
+            hidden.add(hideId);
+        }
+        if (!visible.has(activeId)) {
+            hidden.delete(activeId);
+            visible.add(activeId);
+            while (visible.size > 1 && sumVisibleWidth() > availableWidth) {
+                var hideId = void 0;
+                for (var index = tabList.length - 1; index >= 0; index -= 1) {
+                    var id = tabList[index].id;
+                    if (id === activeId || !visible.has(id))
+                        continue;
+                    hideId = id;
+                    break;
+                }
+                if (!hideId)
+                    break;
+                visible.delete(hideId);
+                hidden.add(hideId);
+            }
+        }
+        tabList.forEach(function (tab) {
+            tab.tabButton.hidden = hidden.has(tab.id);
+        });
+        this.overflowTabIds = tabList
+            .filter(function (tab) { return hidden.has(tab.id); })
+            .map(function (tab) { return tab.id; });
+        this.overflowButton.hidden = this.overflowTabIds.length === 0;
+        this.overflowButton.classList.toggle('is-active', this.overflowTabIds.includes(activeId));
+        if (this.overflowMenuRoot && this.overflowTabIds.length === 0) {
+            this.closeOverflowMenu();
+        }
+        else if (this.overflowMenuRoot) {
+            this.renderOverflowMenuItems();
+        }
+    };
+    AcUiDockPanel.prototype.getTabLabel = function (tab) {
+        if (tab.label)
+            return tab.label;
+        if (tab.labelKey)
+            return this.translate(tab.labelKey);
+        return '';
+    };
+    /** Translates a chrome string under `main.dockPanel.*`. */
+    AcUiDockPanel.prototype.t = function (key) {
+        return this.translate("main.dockPanel.".concat(key));
+    };
+    AcUiDockPanel.prototype.toggleOverflowMenu = function () {
+        if (this.overflowMenuRoot) {
+            this.closeOverflowMenu();
+            return;
+        }
+        this.closeSideMenu();
+        this.openOverflowMenu();
+    };
+    AcUiDockPanel.prototype.openOverflowMenu = function () {
+        if (this.overflowTabIds.length === 0)
+            return;
+        this.overflowMenuRoot = document.createElement('div');
+        this.overflowMenuRoot.className = 'ml-ex-ui-dock-tab-overflow-menu';
+        this.overflowMenuRoot.setAttribute('role', 'menu');
+        this.renderOverflowMenuItems();
+        var rect = this.overflowButton.getBoundingClientRect();
+        this.host.appendChild(this.overflowMenuRoot);
+        this.overflowMenuRoot.style.top = "".concat(rect.bottom + 4, "px");
+        this.overflowMenuRoot.style.left = "".concat(Math.max(8, rect.right - 180), "px");
+        this.syncOutsidePointerListener();
+    };
+    AcUiDockPanel.prototype.renderOverflowMenuItems = function () {
+        var _this = this;
+        if (!this.overflowMenuRoot)
+            return;
+        this.overflowMenuRoot.replaceChildren();
+        this.overflowTabIds.forEach(function (tabId) {
+            var tab = _this.tabs.get(tabId);
+            if (!tab)
+                return;
+            var button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'ml-ex-ui-dock-tab-overflow-menu-item';
+            button.setAttribute('role', 'menuitem');
+            if (tabId === _this.activeTabId) {
+                button.classList.add('is-selected');
+            }
+            button.textContent = _this.getTabLabel(tab);
+            button.addEventListener('click', function (event) {
+                event.stopPropagation();
+                _this.openPanel(tabId);
+                _this.closeOverflowMenu();
+            });
+            _this.overflowMenuRoot.appendChild(button);
+        });
+    };
+    AcUiDockPanel.prototype.closeOverflowMenu = function () {
+        var _a;
+        (_a = this.overflowMenuRoot) === null || _a === void 0 ? void 0 : _a.remove();
+        this.overflowMenuRoot = undefined;
+        this.syncOutsidePointerListener();
+    };
+    return AcUiDockPanel;
+}());
+export { AcUiDockPanel };
+//# sourceMappingURL=AcUiDockPanel.js.map