From 5d4517caabf0c0aba6d1af088488be337366823f Mon Sep 17 00:00:00 2001 From: Rene Date: Sun, 9 May 2021 00:16:43 +0200 Subject: [PATCH] more optimizations and size observer improvement --- .../src/lifecycles/overflowLifecycle.ts | 8 ++-- .../src/lifecycles/paddingLifecycle.ts | 4 +- .../src/observers/sizeObserver.ts | 7 ++-- .../src/styles/sizeobserver.scss | 39 +++++++++++-------- .../observers/sizeObserver/index.browser.ts | 26 ++++++++----- 5 files changed, 49 insertions(+), 35 deletions(-) diff --git a/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts b/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts index f146019..5f0a4cc 100644 --- a/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts +++ b/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts @@ -87,11 +87,11 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle = const { _structureSetup, _doViewportArrange, _getLifecycleCommunication, _setLifecycleCommunication } = lifecycleHub; const { _host, _viewport, _viewportArrange } = _structureSetup._targetObj; const { _update: updateViewportSizeFraction, _current: getCurrentViewportSizeFraction } = createCache>( - () => sizeFraction(_viewport), + sizeFraction.bind(0, _viewport), whCacheOptions ); const { _update: updateViewportScrollSizeCache, _current: getCurrentViewportScrollSizeCache } = createCache>( - () => scrollSize(_viewport), + scrollSize.bind(0, _viewport), whCacheOptions ); const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache, OverflowAmountCacheContext>( @@ -119,10 +119,10 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle = const hostClientSize = clientSize(_host); // padding subtraction is only needed if padding is absolute or if viewport is content-box const paddingVertical = paddingAbsolute || style(_viewport, 'boxSizing') === 'content-box' ? padding.b + padding.t : 0; - const fractionalcleintHeight = hostClientSize.h + (abs(hostSizeFraction.h) < 1 ? hostSizeFraction.h : 0); + const fractionalClientHeight = hostClientSize.h + (abs(hostSizeFraction.h) < 1 ? hostSizeFraction.h : 0); style(_viewport, { - height: fractionalcleintHeight + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical, + height: fractionalClientHeight + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical, }); } }; diff --git a/packages/overlayscrollbars/src/lifecycles/paddingLifecycle.ts b/packages/overlayscrollbars/src/lifecycles/paddingLifecycle.ts index b4d4585..231c1b5 100644 --- a/packages/overlayscrollbars/src/lifecycles/paddingLifecycle.ts +++ b/packages/overlayscrollbars/src/lifecycles/paddingLifecycle.ts @@ -1,4 +1,4 @@ -import { createCache, topRightBottomLeft, equalTRBL, style } from 'support'; +import { createCache, topRightBottomLeft, equalTRBL, style, TRBL } from 'support'; import { LifecycleHub, Lifecycle } from 'lifecycles/lifecycleHub'; import { StyleObject } from 'typings'; import { getEnvironment } from 'environment'; @@ -11,7 +11,7 @@ import { getEnvironment } from 'environment'; export const createPaddingLifecycle = (lifecycleHub: LifecycleHub): Lifecycle => { const { _structureSetup, _setLifecycleCommunication } = lifecycleHub; const { _host, _padding, _viewport } = _structureSetup._targetObj; - const { _update: updatePaddingCache, _current: currentPaddingCache } = createCache(() => topRightBottomLeft(_host, 'padding'), { + const { _update: updatePaddingCache, _current: currentPaddingCache } = createCache(topRightBottomLeft.bind(0, _host, 'padding'), { _equal: equalTRBL, _initialValue: topRightBottomLeft(), }); diff --git a/packages/overlayscrollbars/src/observers/sizeObserver.ts b/packages/overlayscrollbars/src/observers/sizeObserver.ts index 529d28f..882fa9c 100644 --- a/packages/overlayscrollbars/src/observers/sizeObserver.ts +++ b/packages/overlayscrollbars/src/observers/sizeObserver.ts @@ -136,7 +136,7 @@ export const createSizeObserver = ( const expandElement = observerElementChildrenRoot.firstChild as HTMLElement; const expandElementChild = expandElement?.firstChild as HTMLElement; - let cacheSize = offsetSize(listenerElement); + let cacheSize = offsetSize(observerElementChildrenRoot); let currSize = cacheSize; let isDirty = false; let rAFId: number; @@ -155,7 +155,7 @@ export const createSizeObserver = ( } }; const onScroll = (scrollEvent?: Event | false) => { - currSize = offsetSize(listenerElement); + currSize = offsetSize(observerElementChildrenRoot); isDirty = !scrollEvent || !equalWH(currSize, cacheSize); if (scrollEvent) { @@ -186,12 +186,13 @@ export const createSizeObserver = ( } if (observeDirectionChange) { - directionIsRTLCache = createCache(() => directionIsRTL(sizeObserver)); + directionIsRTLCache = createCache(directionIsRTL.bind(0, sizeObserver)); const { _update: updateDirectionIsRTLCache } = directionIsRTLCache; push( offListeners, on(sizeObserver, scrollEventName, (event: Event) => { const directionIsRTLCacheValues = updateDirectionIsRTLCache(); + console.log; const { _value, _changed } = directionIsRTLCacheValues; if (_changed) { removeClass(listenerElement, 'ltr rtl'); diff --git a/packages/overlayscrollbars/src/styles/sizeobserver.scss b/packages/overlayscrollbars/src/styles/sizeobserver.scss index f1f2afa..1b3546c 100644 --- a/packages/overlayscrollbars/src/styles/sizeobserver.scss +++ b/packages/overlayscrollbars/src/styles/sizeobserver.scss @@ -1,5 +1,5 @@ -$scrollbars-cushion: 100px; // assume no scrollbar takes more than 100px space -$inflate-margin: 100px; +$inflate-margin: 133px; +$shrink-scale: 0.1; .os-size-observer, .os-size-observer-listener { @@ -34,24 +34,16 @@ $inflate-margin: 100px; right: 0; bottom: 0; left: 0; - transform: scale(0.1); + transform: scale($shrink-scale); - &::before, - &::after { + &::before { content: ''; flex: none; box-sizing: inherit; - } - &::before { padding: 10px; width: 10px; height: 10px; } - &::after { - content: ''; - padding: inherit; - border: inherit; - } } .os-size-observer-appear { @@ -63,7 +55,10 @@ $inflate-margin: 100px; box-sizing: border-box; position: relative; flex: auto; + padding: inherit; + border: inherit; margin: -$inflate-margin; + transform: scale(1 / $shrink-scale); &.ltr { margin-right: -$inflate-margin * 2; @@ -74,16 +69,26 @@ $inflate-margin: 100px; margin-right: 0; } + &:empty::before { + content: ''; + width: 100%; + height: 100%; + } + + &:empty::before, & > .os-size-observer-listener-item { - top: -$scrollbars-cushion; - right: -$scrollbars-cushion; - bottom: -$scrollbars-cushion; - left: -$scrollbars-cushion; + display: block; + position: relative; + padding: inherit; + border: inherit; + box-sizing: content-box; + flex: auto; } } .os-size-observer-listener-scroll { - box-sizing: content-box; + box-sizing: border-box; + display: flex; } .os-size-observer-listener-item { diff --git a/packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.browser.ts b/packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.browser.ts index fdab746..b9e0415 100644 --- a/packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.browser.ts +++ b/packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.browser.ts @@ -108,18 +108,26 @@ const iterate = async (select: HTMLSelectElement | null, afterEach?: () => any) ); } - if (dimensions && (offsetSizeChanged || contentSizeChanged || dirChanged || boxSizingChanged)) { + if (dirChanged) { await waitForOrFailTest(() => { - if (offsetSizeChanged || contentSizeChanged || boxSizingChanged) { - should.equal(sizeIterations, currSizeIterations + 1, 'Size change was detected correctly.'); - } - if (dirChanged) { - const expectedCacheValue = newDir === 'rtl'; - should.equal(directionIterations, currDirectionIterations + 1, 'Direction change was detected correctly.'); - should.equal(sizeObserver._getCurrentCacheValues()._directionIsRTL._value, expectedCacheValue, 'Direction cache value is correct.'); - } + const expectedCacheValue = newDir === 'rtl'; + should.equal(directionIterations, currDirectionIterations + 1, 'Direction change was detected correctly.'); + should.equal(sizeObserver._getCurrentCacheValues()._directionIsRTL._value, expectedCacheValue, 'Direction cache value is correct.'); }); } + + if (boxSizingChanged) { + await waitForOrFailTest(() => { + should.equal(sizeIterations, currSizeIterations + 1, 'BoxSizing change was detected correctly.'); + }); + } + + if (dimensions && (offsetSizeChanged || contentSizeChanged)) { + await waitForOrFailTest(() => { + should.equal(sizeIterations, currSizeIterations + 1, 'Size change was detected correctly.'); + }); + } + if (!dimensions) { await timeout(100); }