balala-revogrid 1.0.0

package/standalone/revogr-viewport-scroll2.js

@@ -0,0 +1,761 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { t as throttle } from './throttle.js';
+import { L as LocalScrollTimer, a as LocalScrollService } from './local.scroll.timer.js';
+
+function isSafariDesktop() {
+    return /Safari/i.test(navigator.userAgent) && !/Chrome/i.test(navigator.userAgent) && !navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
+}
+
+/**
+ * Collects data for pinned columns in the required @ViewportProps format.
+ */
+/**
+ * Represents the slot names for the viewport slots.
+ */
+const HEADER_SLOT = 'header'; // Slot name for the header slot
+const FOOTER_SLOT = 'footer'; // Slot name for the footer slot
+const CONTENT_SLOT = 'content'; // Slot name for the content slot
+const DATA_SLOT = 'data'; // Slot name for the data slot
+/**
+ * Returns the last visible cell in the viewport for a given row type.
+ * Coordinates are not zero-based and are relative to the viewport.
+ * If needed to be zero-based they can be adjusted by subtracting 1.
+ */
+function getLastCell(data, rowType) {
+    // Get the last visible column count from the viewport column data.
+    const lastVisibleColumnCount = data.viewports[data.colType].store.get('realCount');
+    // Get the last visible row count for the given row type from the viewport column data.
+    const lastVisibleRowCount = data.viewports[rowType].store.get('realCount');
+    // Return the last visible cell with the last visible column count and row count.
+    return {
+        x: lastVisibleColumnCount,
+        y: lastVisibleRowCount,
+    };
+}
+function viewportDataPartition(data, type, slot, fixed) {
+    return {
+        colData: data.colStore,
+        viewportCol: data.viewports[data.colType].store,
+        viewportRow: data.viewports[type].store,
+        /**
+         * lastCell is the last real coordinate + 1, saved to selection store
+         */
+        lastCell: getLastCell(data, type),
+        slot,
+        type,
+        canDrag: !fixed,
+        position: data.position,
+        dataStore: data.rowStores[type].store,
+        dimensionCol: data.dimensions[data.colType].store,
+        dimensionRow: data.dimensions[type].store,
+        style: fixed
+            ? { height: `${data.dimensions[type].store.get('realSize')}px` }
+            : undefined,
+    };
+}
+
+class GridResizeService {
+    constructor(el, resize, elements) {
+        this.resize = resize;
+        this.resizeObserver = null;
+        this.previousSize = {
+            width: 0,
+            height: 0,
+        };
+        this.apply = throttle((e) => {
+            var _a;
+            const entry = {
+                width: e.width,
+                height: e.height,
+            };
+            (_a = this.resize) === null || _a === void 0 ? void 0 : _a.call(this, entry, this.previousSize);
+            this.previousSize = entry;
+        }, 40, {
+            leading: false,
+            trailing: true,
+        });
+        const extras = [];
+        elements.forEach((element) => {
+            if (element) {
+                extras.push(element);
+            }
+        });
+        this.init(el, extras);
+    }
+    init(el, extras = []) {
+        const observer = this.resizeObserver = new ResizeObserver((e) => {
+            if (e.length) {
+                if (e[0].target === el) {
+                    this.apply(e[0].contentRect);
+                }
+                else {
+                    this.apply(el.getBoundingClientRect());
+                }
+            }
+        });
+        observer.observe(el);
+        extras.forEach((extra) => {
+            observer.observe(extra);
+        });
+    }
+    destroy() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = null;
+    }
+}
+
+const revogrViewportScrollStyleCss = ".rowHeaders{z-index:2;font-size:10px;display:flex;height:100%}.rowHeaders revogr-data .rgCell{text-align:center}.rowHeaders .rgCell{padding:0 1em !important;min-width:100%}revogr-viewport-scroll{-ms-overflow-style:none;scrollbar-width:none;overflow-x:auto;overflow-y:hidden;position:relative;z-index:1;height:100%}revogr-viewport-scroll::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll.colPinStart,revogr-viewport-scroll.colPinEnd{z-index:2;overflow:visible}revogr-viewport-scroll.colPinStart:has(.resizable-r:hover),revogr-viewport-scroll.colPinStart:has(.resizable-l:hover),revogr-viewport-scroll.colPinEnd:has(.resizable-r:hover),revogr-viewport-scroll.colPinEnd:has(.resizable-l:hover){z-index:93}revogr-viewport-scroll.colPinEnd:has(.active){overflow:visible}revogr-viewport-scroll .content-wrapper{overflow:hidden}revogr-viewport-scroll .inner-content-table{display:flex;flex-direction:column;max-height:100%;width:100%;min-width:100%;position:relative;z-index:0}revogr-viewport-scroll .vertical-inner{overflow-y:auto;position:relative;width:100%;flex-grow:1;outline:none;-ms-overflow-style:none;scrollbar-width:none;}revogr-viewport-scroll .vertical-inner::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll .vertical-inner revogr-data,revogr-viewport-scroll .vertical-inner revogr-overlay-selection{height:100%}";
+
+const RevogrViewportScroll = /*@__PURE__*/ proxyCustomElement(class RevogrViewportScroll extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.scrollViewport = createEvent(this, "scrollviewport", 7);
+        this.resizeViewport = createEvent(this, "resizeviewport", 7);
+        this.scrollchange = createEvent(this, "scrollchange", 7);
+        this.silentScroll = createEvent(this, "scrollviewportsilent", 7);
+        /**
+         * Width of inner content
+         */
+        this.contentWidth = 0;
+        this.lastHorizontalScrollLeft = RevogrViewportScroll.UNKNOWN_SCROLL_COORDINATE;
+        this.lastVerticalScrollTop = RevogrViewportScroll.UNKNOWN_SCROLL_COORDINATE;
+        /**
+         * Height of inner content
+         */
+        this.contentHeight = 0;
+        this.setVerticalScrollRef = (el) => {
+            if (this.verticalScroll !== el) {
+                this.verticalScroll = el;
+                this.lastVerticalScrollTop = RevogrViewportScroll.UNKNOWN_SCROLL_COORDINATE;
+            }
+        };
+        // 用于防抖的定时器
+        this.scrollVisibilityTimer = null;
+        // 待处理的滚动可见性更新
+        this.pendingScrollVisibility = new Map();
+    }
+    isLayoutUpdating() {
+        var _a;
+        const grid = (_a = this.horizontalScroll) === null || _a === void 0 ? void 0 : _a.closest('revo-grid');
+        return !!(grid === null || grid === void 0 ? void 0 : grid.hasAttribute('data-columns-updating'));
+    }
+    syncHorizontalScrollCacheFromDom() {
+        var _a, _b;
+        const value = (_b = (_a = this.horizontalScroll) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
+        this.lastHorizontalScrollLeft = value;
+        return value;
+    }
+    syncVerticalScrollCacheFromDom() {
+        var _a, _b;
+        const value = (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0;
+        this.lastVerticalScrollTop = value;
+        return value;
+    }
+    getKnownHorizontalScrollLeft() {
+        return Number.isNaN(this.lastHorizontalScrollLeft)
+            ? this.syncHorizontalScrollCacheFromDom()
+            : this.lastHorizontalScrollLeft;
+    }
+    getKnownVerticalScrollTop() {
+        return Number.isNaN(this.lastVerticalScrollTop)
+            ? this.syncVerticalScrollCacheFromDom()
+            : this.lastVerticalScrollTop;
+    }
+    setHorizontalScrollIfNeeded(next) {
+        if (!this.horizontalScroll) {
+            return false;
+        }
+        const current = this.getKnownHorizontalScrollLeft();
+        if (Math.abs(current - next) < RevogrViewportScroll.SCROLL_WRITE_EPSILON) {
+            return false;
+        }
+        this.horizontalScroll.scrollLeft = next;
+        this.lastHorizontalScrollLeft = next;
+        return true;
+    }
+    setVerticalScrollIfNeeded(next) {
+        if (!this.verticalScroll) {
+            return false;
+        }
+        const current = this.getKnownVerticalScrollTop();
+        if (Math.abs(current - next) < RevogrViewportScroll.SCROLL_WRITE_EPSILON) {
+            return false;
+        }
+        this.verticalScroll.scrollTop = next;
+        this.lastVerticalScrollTop = next;
+        return true;
+    }
+    /**
+     * 监听 contentWidth 变化，在渲染前调整滚动位置
+     * 这样可以避免空白闪烁
+     */
+    contentWidthChanged(newValue, oldValue) {
+        // 宽度变化时都需要检查和调整滚动位置
+        if (this.horizontalScroll && newValue !== oldValue) {
+            // 使用 requestAnimationFrame 确保在 DOM 更新后执行
+            requestAnimationFrame(() => {
+                var _a;
+                if (!this.horizontalScroll)
+                    return;
+                if (this.isLayoutUpdating()) {
+                    return;
+                }
+                const clientWidth = this.horizontalScroll.clientWidth;
+                const maxScrollLeft = Math.max(0, newValue - clientWidth);
+                const currentScrollLeft = this.syncHorizontalScrollCacheFromDom();
+                // 如果当前滚动位置超过最大可滚动位置，调整到最大位置
+                if (currentScrollLeft > maxScrollLeft && maxScrollLeft >= 0) {
+                    this.setHorizontalScrollIfNeeded(maxScrollLeft);
+                    if (this.colType === 'rgCol') {
+                        (_a = this.localScrollService) === null || _a === void 0 ? void 0 : _a.scroll(maxScrollLeft, 'rgCol', true);
+                    }
+                }
+            });
+        }
+    }
+    /**
+     * 监听内容高度变化，处理折叠后滚动条超出导致的空白闪烁
+     */
+    contentHeightChanged(newValue, oldValue) {
+        var _a;
+        if (!this.verticalScroll || newValue === oldValue) {
+            return;
+        }
+        if (newValue >= oldValue) {
+            return;
+        }
+        // 在高度变小时，当前 scrollTop 可能超过最大值，需回退到可滚范围
+        const previousScrollTop = this.syncVerticalScrollCacheFromDom();
+        const clientHeight = this.verticalScroll.clientHeight;
+        const maxScrollTop = Math.max(0, newValue - clientHeight);
+        const nextScrollTop = Math.min(previousScrollTop, maxScrollTop);
+        const didAdjust = nextScrollTop !== previousScrollTop;
+        if (didAdjust) {
+            this.setVerticalScrollIfNeeded(nextScrollTop);
+        }
+        // 仅主视口在实际发生校正时广播垂直坐标，避免固定列/空视口把 scrollTop 错误回写为 0
+        if (didAdjust && this.colType === 'rgCol') {
+            (_a = this.localScrollService) === null || _a === void 0 ? void 0 : _a.scroll(nextScrollTop, 'rgRow', true);
+        }
+    }
+    /**
+     * 保证当前垂直滚动位置不超过内容高度
+     * 用于内容高度变化后的一致性校正（例如树形折叠导致行数骤减）
+     */
+    normalizeVerticalScrollPosition() {
+        var _a;
+        if (!this.verticalScroll)
+            return;
+        const clientHeight = this.verticalScroll.clientHeight;
+        const maxScrollTop = Math.max(0, this.contentHeight - clientHeight);
+        const currentScrollTop = this.syncVerticalScrollCacheFromDom();
+        if (currentScrollTop > maxScrollTop) {
+            this.setVerticalScrollIfNeeded(maxScrollTop);
+            // 仅主视口广播，避免非主视口坐标污染
+            if (this.colType === 'rgCol') {
+                (_a = this.localScrollService) === null || _a === void 0 ? void 0 : _a.scroll(maxScrollTop, 'rgRow', true);
+            }
+        }
+    }
+    async setScroll(e) {
+        var _a, _b;
+        this.localScrollTimer.latestScrollUpdate(e.dimension);
+        const coordinate = e.coordinate;
+        // 目标坐标已一致时，跳过本地滚动服务，避免进入无效的 RAF + scrollTop 回写链路
+        if (typeof coordinate === 'number') {
+            if (e.dimension === 'rgCol') {
+                if (Math.abs(this.getKnownHorizontalScrollLeft() - coordinate) <
+                    RevogrViewportScroll.SCROLL_WRITE_EPSILON) {
+                    return;
+                }
+            }
+            else if (e.dimension === 'rgRow') {
+                const shouldKeepTransformReset = !!((_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.style.transform);
+                if (!shouldKeepTransformReset &&
+                    Math.abs(this.getKnownVerticalScrollTop() - coordinate) <
+                        RevogrViewportScroll.SCROLL_WRITE_EPSILON) {
+                    return;
+                }
+            }
+        }
+        (_b = this.localScrollService) === null || _b === void 0 ? void 0 : _b.setScroll(e);
+    }
+    /**
+     * update on delta in case we don't know existing position or external change
+     * @param e
+     */
+    async changeScroll(e, silent = false) {
+        var _a, _b, _c, _d;
+        if (silent) {
+            if (e.coordinate && this.verticalScroll) {
+                switch (e.dimension) {
+                    // for mobile devices to skip negative scroll loop. only on vertical scroll
+                    case 'rgRow':
+                        this.verticalScroll.style.transform = `translateY(${ -1 * e.coordinate}px)`;
+                        break;
+                }
+            }
+            return;
+        }
+        if (e.delta) {
+            // 滚动阈值：小于此值认为没有实际滚动空间
+            const SCROLL_THRESHOLD = 10;
+            // 检查是否有滚动空间
+            if (e.dimension === 'rgCol') {
+                const maxScrollLeft = Math.max(0, this.contentWidth - this.horizontalScroll.clientWidth);
+                // 如果没有滚动空间，不处理滚动
+                if (maxScrollLeft <= SCROLL_THRESHOLD) {
+                    e.coordinate = 0;
+                    return e;
+                }
+                e.coordinate = this.horizontalScroll.scrollLeft + e.delta;
+            }
+            else if (e.dimension === 'rgRow') {
+                const maxScrollTop = Math.max(0, this.contentHeight - ((_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0));
+                // 如果没有滚动空间，不处理滚动
+                if (maxScrollTop <= SCROLL_THRESHOLD) {
+                    e.coordinate = 0;
+                    return e;
+                }
+                e.coordinate = ((_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.scrollTop) !== null && _d !== void 0 ? _d : 0) + e.delta;
+            }
+            this.setScroll(e);
+        }
+        return e;
+    }
+    /**
+     * Dispatch this event to trigger vertical mouse wheel from plugins
+     */
+    mousewheelVertical({ detail: e, }) {
+        this.verticalMouseWheel(e);
+    }
+    /**
+     * Dispatch this event to trigger horizontal mouse wheel from plugins
+     */
+    mousewheelHorizontal({ detail: e, }) {
+        this.horizontalMouseWheel(e);
+    }
+    /**
+     * Allows to use outside listener
+     */
+    scrollApply({ detail: { type, coordinate }, }) {
+        this.applyOnScroll(type, coordinate, true);
+    }
+    connectedCallback() {
+        /**
+         * Bind scroll functions for farther usage
+         */
+        // allow mousewheel for all devices including mobile
+        this.verticalMouseWheel = this.onVerticalMouseWheel.bind(this, 'rgRow', 'deltaY');
+        this.horizontalMouseWheel = this.onHorizontalMouseWheel.bind(this, 'rgCol');
+        this.localScrollTimer = new LocalScrollTimer('ontouchstart' in document.documentElement ? 0 : 10);
+        /**
+         * Create local scroll service
+         */
+        this.localScrollService = new LocalScrollService({
+            // to improve safari smoothnes on scroll
+            skipAnimationFrame: isSafariDesktop(),
+            runScroll: e => this.scrollViewport.emit(e),
+            applyScroll: e => {
+                this.localScrollTimer.setCoordinate(e);
+                switch (e.dimension) {
+                    case 'rgCol':
+                        // this will trigger on scroll event
+                        this.setHorizontalScrollIfNeeded(e.coordinate);
+                        break;
+                    case 'rgRow':
+                        if (this.verticalScroll) {
+                            // this will trigger on scroll event
+                            this.setVerticalScrollIfNeeded(e.coordinate);
+                            // for mobile devices to skip negative scroll loop. only on vertical scroll
+                            if (this.verticalScroll.style.transform) {
+                                this.verticalScroll.style.transform = '';
+                            }
+                        }
+                        break;
+                }
+            },
+        });
+    }
+    componentDidLoad() {
+        // track viewport resize
+        this.resizeService = new GridResizeService(this.horizontalScroll, (entry) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const els = {};
+            let calculatedHeight = entry.height || 0;
+            if (calculatedHeight) {
+                calculatedHeight -=
+                    ((_b = (_a = this.header) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0) +
+                        ((_d = (_c = this.footer) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0);
+            }
+            els.rgRow = {
+                size: calculatedHeight,
+                contentSize: this.contentHeight,
+                scroll: (_f = (_e = this.verticalScroll) === null || _e === void 0 ? void 0 : _e.scrollTop) !== null && _f !== void 0 ? _f : 0,
+                noScroll: false,
+            };
+            const calculatedWidth = entry.width || 0;
+            els.rgCol = {
+                size: calculatedWidth,
+                contentSize: this.contentWidth,
+                scroll: this.horizontalScroll.scrollLeft,
+                noScroll: this.colType !== 'rgCol',
+            };
+            // Process changes in order: width first, then height
+            const dimensions = ['rgCol', 'rgRow'];
+            for (const dimension of dimensions) {
+                const item = els[dimension];
+                if (!item)
+                    continue;
+                this.resizeViewport.emit({
+                    dimension,
+                    size: item.size,
+                    rowHeader: this.rowHeader,
+                });
+                if (item.noScroll) {
+                    continue;
+                }
+                if (dimension === 'rgCol' || this.colType === 'rgCol') {
+                    (_g = this.localScrollService) === null || _g === void 0 ? void 0 : _g.scroll((_h = item.scroll) !== null && _h !== void 0 ? _h : 0, dimension, true);
+                }
+                // track scroll visibility on outer element change
+                this.setScrollVisibility(dimension, item.size, item.contentSize);
+            }
+        }, [this.footer, this.header]);
+    }
+    /**
+     * Check if scroll present or not per type
+     * Trigger this method on inner content size change or on outer element size change
+     * If inner content bigger then outer size then scroll is present and mousewheel binding required
+     * @param type - dimension type 'rgRow/y' or 'rgCol/x'
+     * @param size - outer content size
+     * @param innerContentSize - inner content size
+     */
+    setScrollVisibility(type, size, innerContentSize) {
+        // 保存待处理的更新
+        this.pendingScrollVisibility.set(type, { size, contentSize: innerContentSize });
+        // 清除之前的定时器
+        if (this.scrollVisibilityTimer) {
+            clearTimeout(this.scrollVisibilityTimer);
+        }
+        // 延迟执行，等待所有更新稳定
+        this.scrollVisibilityTimer = setTimeout(() => {
+            this.scrollVisibilityTimer = null;
+            this.applyScrollVisibility();
+        }, RevogrViewportScroll.SCROLL_VISIBILITY_DELAY);
+    }
+    /**
+     * 实际应用滚动可见性更新
+     */
+    applyScrollVisibility() {
+        var _a, _b, _c, _d, _e, _f;
+        // 滚动阈值：小于此值认为没有实际滚动空间
+        const SCROLL_THRESHOLD = 10;
+        // 重新获取最新的尺寸值，而不是使用之前保存的值
+        const rgColData = {
+            size: this.horizontalScroll.clientWidth,
+            contentSize: this.contentWidth,
+        };
+        const rgRowData = {
+            size: (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0,
+            contentSize: this.contentHeight,
+        };
+        // 处理水平滚动
+        const rgColDiff = rgColData.contentSize - rgColData.size;
+        const hasHorizontalScroll = rgColDiff > SCROLL_THRESHOLD;
+        if (hasHorizontalScroll) {
+            (_c = this.horizontalScroll) === null || _c === void 0 ? void 0 : _c.classList.add('scroll-rgCol');
+        }
+        else {
+            (_d = this.horizontalScroll) === null || _d === void 0 ? void 0 : _d.classList.remove('scroll-rgCol');
+        }
+        this.scrollchange.emit({ type: 'rgCol', hasScroll: hasHorizontalScroll });
+        // 处理垂直滚动
+        const rgRowDiff = rgRowData.contentSize - rgRowData.size;
+        const hasVerticalScroll = rgRowDiff > SCROLL_THRESHOLD;
+        if (hasVerticalScroll) {
+            (_e = this.verticalScroll) === null || _e === void 0 ? void 0 : _e.classList.add('scroll-rgRow');
+        }
+        else {
+            (_f = this.verticalScroll) === null || _f === void 0 ? void 0 : _f.classList.remove('scroll-rgRow');
+        }
+        this.scrollchange.emit({ type: 'rgRow', hasScroll: hasVerticalScroll });
+        this.pendingScrollVisibility.clear();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeService) === null || _a === void 0 ? void 0 : _a.destroy();
+        if (this.scrollVisibilityTimer) {
+            clearTimeout(this.scrollVisibilityTimer);
+        }
+    }
+    async componentDidRender() {
+        var _a, _b, _c, _d;
+        this.localScrollService.setParams({
+            contentSize: this.contentHeight,
+            clientSize: (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0,
+            virtualSize: 0,
+        }, 'rgRow');
+        this.localScrollService.setParams({
+            contentSize: this.contentWidth,
+            clientSize: this.horizontalScroll.clientWidth,
+            virtualSize: 0,
+        }, 'rgCol');
+        // 检查并调整水平滚动位置，避免内容宽度变化后出现空白
+        this.adjustScrollPosition();
+        // 使用防抖的 setScrollVisibility，避免 resize 过程中的闪烁
+        this.setScrollVisibility('rgRow', (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0, this.contentHeight);
+        this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
+        // 统一在渲染后再校正一次垂直滚动位置，避免高度骤降时的空白闪烁
+        this.normalizeVerticalScrollPosition();
+    }
+    /**
+     * 调整滚动位置，确保不会超出内容边界
+     * 当内容宽度变化（如列宽调整）后，如果当前滚动位置超过最大可滚动位置，需要调整
+     */
+    adjustScrollPosition() {
+        var _a, _b;
+        if (!this.horizontalScroll)
+            return;
+        if (this.isLayoutUpdating()) {
+            return;
+        }
+        const clientWidth = this.horizontalScroll.clientWidth;
+        const maxScrollLeft = Math.max(0, this.contentWidth - clientWidth);
+        const currentScrollLeft = this.syncHorizontalScrollCacheFromDom();
+        // 滚动阈值：小于此值认为没有实际滚动空间
+        const SCROLL_THRESHOLD = 10;
+        // 如果没有滚动空间，确保滚动位置为0
+        if (maxScrollLeft <= SCROLL_THRESHOLD) {
+            if (currentScrollLeft > 0) {
+                this.setHorizontalScrollIfNeeded(0);
+                if (this.colType === 'rgCol') {
+                    (_a = this.localScrollService) === null || _a === void 0 ? void 0 : _a.scroll(0, 'rgCol', true);
+                }
+            }
+            return;
+        }
+        // 如果当前滚动位置超过最大可滚动位置，调整到最大位置
+        if (currentScrollLeft > maxScrollLeft) {
+            this.setHorizontalScrollIfNeeded(maxScrollLeft);
+            if (this.colType === 'rgCol') {
+                (_b = this.localScrollService) === null || _b === void 0 ? void 0 : _b.scroll(maxScrollLeft, 'rgCol', true);
+            }
+        }
+    }
+    /**
+     * Prevent space key from scrolling the viewport
+     */
+    onKeyDown(e) {
+        if (e.code === 'Space') {
+            e.preventDefault();
+        }
+    }
+    render() {
+        return (h(Host, { key: '41ec47ece0eb1435281917856b3d22e258558ae8', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e), onKeyDown: (e) => this.onKeyDown(e) }, h("div", { key: 'ec49cdf9206ac64b31b1f7d6f0960b8e8ab831db', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, h("div", { key: '0dd1aa5e6a4f2b347a0d851f5f45782d0ca56b0b', class: "header-wrapper", ref: e => (this.header = e) }, h("slot", { key: 'f3a9f2f4c2607014ce908f940bdc67ecc7e5e93b', name: HEADER_SLOT })), h("div", { key: '3ff9e141bc2524ed859580d1ef10ad5c37ad70b3', class: "vertical-inner", ref: this.setVerticalScrollRef, onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e), onKeyDown: (e) => this.onKeyDown(e) }, h("div", { key: '8fb922c1be861574713af4494a543ed0cbc48681', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, h("slot", { key: 'bbd7ed2ee26584e67ca101a1fe341d6a9e4ab670', name: CONTENT_SLOT }))), h("div", { key: '917dfc764edd4cc51b3d0bdda926afa5d1335268', class: "footer-wrapper", ref: e => (this.footer = e) }, h("slot", { key: '3173f6c8ec90e220024ebead9a721f1291f93df9', name: FOOTER_SLOT })))));
+    }
+    /**
+     * Extra layer for scroll event monitoring, where MouseWheel event is not passing
+     * We need to trigger scroll event in case there is no mousewheel event
+     */
+    async applyScroll(type, e) {
+        var _a, _b, _c;
+        if (!(e.target instanceof HTMLElement)) {
+            return;
+        }
+        let scroll = 0;
+        switch (type) {
+            case 'rgCol':
+                scroll = e.target.scrollLeft;
+                this.lastHorizontalScrollLeft = scroll;
+                break;
+            case 'rgRow':
+                scroll = e.target.scrollTop;
+                this.lastVerticalScrollTop = scroll;
+                break;
+        }
+        // for mobile devices to skip negative scroll loop
+        if (scroll < 0) {
+            this.silentScroll.emit({ dimension: type, coordinate: scroll });
+            return;
+        }
+        if (type === 'rgCol' && this.colType !== 'rgCol') {
+            return;
+        }
+        if (type === 'rgRow' && this.colType !== 'rgCol') {
+            return;
+        }
+        if (this.isLayoutUpdating()) {
+            return;
+        }
+        // 滚动阈值：小于此值认为没有实际滚动空间
+        const SCROLL_THRESHOLD = 10;
+        // 检查是否有滚动空间
+        if (type === 'rgCol') {
+            const maxScrollLeft = Math.max(0, this.contentWidth - this.horizontalScroll.clientWidth);
+            // 如果没有滚动空间，重置滚动位置并返回
+            if (maxScrollLeft <= SCROLL_THRESHOLD) {
+                if (scroll > 0) {
+                    if (Math.abs(e.target.scrollLeft) >= RevogrViewportScroll.SCROLL_WRITE_EPSILON) {
+                        e.target.scrollLeft = 0;
+                        this.lastHorizontalScrollLeft = 0;
+                    }
+                }
+                return;
+            }
+            // 限制滚动位置不超过最大值（防止过度滚动导致空白）
+            if (scroll > maxScrollLeft) {
+                if (Math.abs(e.target.scrollLeft - maxScrollLeft) >= RevogrViewportScroll.SCROLL_WRITE_EPSILON) {
+                    e.target.scrollLeft = maxScrollLeft;
+                    this.lastHorizontalScrollLeft = maxScrollLeft;
+                }
+                scroll = maxScrollLeft;
+            }
+        }
+        else if (type === 'rgRow') {
+            const maxScrollTop = Math.max(0, this.contentHeight - ((_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0));
+            // 如果没有滚动空间，重置滚动位置并返回
+            if (maxScrollTop <= SCROLL_THRESHOLD) {
+                if (scroll > 0 && this.verticalScroll) {
+                    this.setVerticalScrollIfNeeded(0);
+                }
+                return;
+            }
+            // 限制滚动位置不超过最大值（防止过度滚动导致空白）
+            if (scroll > maxScrollTop) {
+                this.setVerticalScrollIfNeeded(maxScrollTop);
+                scroll = maxScrollTop;
+            }
+        }
+        // 水平滚动在 Shift + 滚轮快速往返场景下更容易出现节流导致的坐标滞后，
+        // 这里直接同步一次，避免 viewport 坐标与 DOM scrollLeft 不一致造成空白。
+        if (type === 'rgCol') {
+            (_c = this.localScrollService) === null || _c === void 0 ? void 0 : _c.scroll(scroll, type);
+            return;
+        }
+        this.applyOnScroll(type, scroll);
+    }
+    /**
+     * Applies change on scroll event only if mousewheel event happened some time ago
+     */
+    applyOnScroll(type, coordinate, outside = false) {
+        const lastScrollUpdate = () => {
+            var _a;
+            (_a = this.localScrollService) === null || _a === void 0 ? void 0 : _a.scroll(coordinate, type, undefined, undefined, outside);
+        };
+        // apply after throttling
+        if (this.localScrollTimer.isReady(type, coordinate)) {
+            lastScrollUpdate();
+        }
+        else {
+            this.localScrollTimer.throttleLastScrollUpdate(type, coordinate, () => lastScrollUpdate());
+        }
+    }
+    /**
+     * On vertical mousewheel event
+     * @param type
+     * @param delta
+     * @param e
+     */
+    onVerticalMouseWheel(type, delta, e) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        // Shift + 滚轮用于水平滚动，不应触发垂直滚动链路
+        if (e.shiftKey) {
+            return;
+        }
+        const scrollTop = (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0;
+        const clientHeight = (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0;
+        const scrollHeight = (_f = (_e = this.verticalScroll) === null || _e === void 0 ? void 0 : _e.scrollHeight) !== null && _f !== void 0 ? _f : 0;
+        // Detect if the user has reached the bottom
+        const atBottom = scrollTop + clientHeight >= scrollHeight && e.deltaY > 0;
+        const atTop = scrollTop === 0 && e.deltaY < 0;
+        if (!atBottom && !atTop) {
+            (_g = e.preventDefault) === null || _g === void 0 ? void 0 : _g.call(e);
+        }
+        const pos = scrollTop + e[delta];
+        (_h = this.localScrollService) === null || _h === void 0 ? void 0 : _h.scroll(pos, type, undefined, e[delta]);
+        this.localScrollTimer.latestScrollUpdate(type);
+    }
+    /**
+     * On horizontal mousewheel event
+     * @param type
+     * @param e
+     */
+    onHorizontalMouseWheel(type, e) {
+        var _a, _b, _c;
+        const deltaX = e.deltaX || 0;
+        const deltaY = e.deltaY || 0;
+        // 只有当水平滚动是主要意图时才处理
+        // 触摸板垂直滚动时可能会有微小的 deltaX，需要过滤掉
+        const absX = Math.abs(deltaX);
+        const absY = Math.abs(deltaY);
+        // Shift + 滚轮（常见于鼠标）通常只有 deltaY，需要映射为水平滚动
+        const normalizedDelta = deltaX || (e.shiftKey ? deltaY : 0);
+        const isShiftHorizontalScroll = !!e.shiftKey && !deltaX && !!deltaY;
+        // 如果没有水平滚动，或者垂直滚动更明显，不处理
+        if (!normalizedDelta || (!isShiftHorizontalScroll && absY > absX)) {
+            return;
+        }
+        const { scrollLeft, scrollWidth, clientWidth } = this.horizontalScroll;
+        // 滚动阈值：小于此值认为没有实际滚动空间
+        const SCROLL_THRESHOLD = 10;
+        const maxScrollLeft = Math.max(0, scrollWidth - clientWidth);
+        // 如果没有滚动空间（内容宽度小于等于可见宽度），阻止默认行为并直接返回
+        if (maxScrollLeft <= SCROLL_THRESHOLD) {
+            (_a = e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
+            return;
+        }
+        // 统一阻止默认横向滚动，避免浏览器原生滚动与组件逻辑叠加
+        (_b = e.preventDefault) === null || _b === void 0 ? void 0 : _b.call(e);
+        const pos = Math.max(0, Math.min(maxScrollLeft, scrollLeft + normalizedDelta));
+        if (pos === scrollLeft) {
+            return;
+        }
+        (_c = this.localScrollService) === null || _c === void 0 ? void 0 : _c.scroll(pos, type, true, normalizedDelta);
+        this.localScrollTimer.latestScrollUpdate(type);
+    }
+    get horizontalScroll() { return this; }
+    static get watchers() { return {
+        "contentWidth": ["contentWidthChanged"],
+        "contentHeight": ["contentHeightChanged"]
+    }; }
+    static get style() { return revogrViewportScrollStyleCss; }
+}, [260, "revogr-viewport-scroll", {
+        "rowHeader": [4, "row-header"],
+        "contentWidth": [2, "content-width"],
+        "contentHeight": [2, "content-height"],
+        "colType": [1, "col-type"],
+        "setScroll": [64],
+        "changeScroll": [64],
+        "applyScroll": [64]
+    }, [[0, "mousewheel-vertical", "mousewheelVertical"], [0, "mousewheel-horizontal", "mousewheelHorizontal"], [0, "scroll-coordinate", "scrollApply"]], {
+        "contentWidth": ["contentWidthChanged"],
+        "contentHeight": ["contentHeightChanged"]
+    }]);
+RevogrViewportScroll.SCROLL_WRITE_EPSILON = 0.5;
+RevogrViewportScroll.UNKNOWN_SCROLL_COORDINATE = Number.NaN;
+// 防抖延迟时间
+RevogrViewportScroll.SCROLL_VISIBILITY_DELAY = 200;
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["revogr-viewport-scroll"];
+    components.forEach(tagName => { switch (tagName) {
+        case "revogr-viewport-scroll":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RevogrViewportScroll);
+            }
+            break;
+    } });
+}
+
+export { CONTENT_SLOT as C, DATA_SLOT as D, FOOTER_SLOT as F, HEADER_SLOT as H, RevogrViewportScroll as R, defineCustomElement as d, isSafariDesktop as i, viewportDataPartition as v };
+//# sourceMappingURL=revogr-viewport-scroll2.js.map
+
+//# sourceMappingURL=revogr-viewport-scroll2.js.map