diff --git a/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts b/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts index 575b66d..db70674 100644 --- a/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts +++ b/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts @@ -1,4 +1,4 @@ -import { XY, TRBL, CacheValues, PartialOptions, each, push, keys, hasOwnProperty, isNumber, scrollLeft, scrollTop } from 'support'; +import { XY, WH, TRBL, CacheValues, PartialOptions, each, push, keys, hasOwnProperty, isNumber, scrollLeft, scrollTop } from 'support'; import { OSOptions } from 'options'; import { getEnvironment } from 'environment'; import { StructureSetup } from 'setups/structureSetup'; @@ -42,6 +42,7 @@ export type Lifecycle = ( export interface LifecycleHubInstance { _update(changedOptions?: PartialOptions | null, force?: boolean): void; + _state(): any; _destroy(): void; } @@ -56,7 +57,9 @@ export interface LifecycleHub { _getViewportPaddingStyle(): StyleObject; _setViewportPaddingStyle(newPaddingStlye?: StyleObject | null): void; _getViewportOverflowScroll(): XY; - _setViewportOverflowScroll(newViewportOverflowScroll: XY): void; + _setViewportOverflowScroll(newViewportOverflowScroll?: XY): void; + _getViewportOverflowAmount(): WH; + _setViewportOverflowAmount(newViewportOverflowAmount?: WH): void; } const getPropByPath = (obj: any, path: string): T => @@ -98,6 +101,10 @@ const viewportOverflowScrollFallback: XY = { x: false, y: false, }; +const viewportOverflowAmountFallback: WH = { + w: 0, + h: 0, +}; const directionIsRTLCacheValuesFallback: CacheValues = { _value: false, _previous: false, @@ -113,6 +120,7 @@ export const createLifecycleHub = (options: OSOptions, structureSetup: Structure let paddingInfo = paddingInfoFallback; let viewportPaddingStyle = viewportPaddingStyleFallback; let viewportOverflowScroll = viewportOverflowScrollFallback; + let viewportOverflowAmount = viewportOverflowAmountFallback; const { _host, _viewport, _content } = structureSetup._targetObj; const { _nativeScrollbarStyling, @@ -139,6 +147,10 @@ export const createLifecycleHub = (options: OSOptions, structureSetup: Structure _setViewportOverflowScroll(newViewportOverflowScroll) { viewportOverflowScroll = newViewportOverflowScroll || viewportOverflowScrollFallback; }, + _getViewportOverflowAmount: () => viewportOverflowAmount, + _setViewportOverflowAmount(newViewportOverflowAmount) { + viewportOverflowAmount = newViewportOverflowAmount || viewportOverflowAmountFallback; + }, }; push(lifecycles, createTrinsicLifecycle(instance)); @@ -266,6 +278,9 @@ export const createLifecycleHub = (options: OSOptions, structureSetup: Structure return { _update: update, + _state: () => ({ + _overflowAmount: viewportOverflowAmount, + }), _destroy() { removeEnvironmentListener(envUpdateListener); }, diff --git a/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts b/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts index 96ff721..1671744 100644 --- a/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts +++ b/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts @@ -4,7 +4,6 @@ import { attr, WH, XY, - equalXY, style, scrollSize, CacheValues, @@ -58,18 +57,25 @@ const overlaidScrollbarsHideOffset = 42; * @returns */ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle => { - const { _structureSetup, _doViewportArrange, _getViewportPaddingStyle, _getPaddingInfo, _setViewportOverflowScroll } = lifecycleHub; - const { _host, _padding, _viewport, _viewportArrange } = _structureSetup._targetObj; + const { + _structureSetup, + _doViewportArrange, + _getViewportPaddingStyle, + _getPaddingInfo, + _setViewportOverflowScroll, + _setViewportOverflowAmount, + } = lifecycleHub; + const { _host, _viewport, _viewportArrange } = _structureSetup._targetObj; const { _update: updateContentScrollSizeCache, _current: getCurrentContentScrollSizeCache } = createCache< WH, ContentScrollSizeCacheContext >((ctx) => fixScrollSizeRounding(ctx._viewportScrollSize, ctx._viewportOffsetSize, ctx._viewportRect), { _equal: equalWH }); - const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache, OverflowAmountCacheContext>( + const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache, OverflowAmountCacheContext>( (ctx) => ({ - x: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w), - y: Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h), + w: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w), + h: Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h), }), - { _equal: equalXY, _initialValue: { x: 0, y: 0 } } + { _equal: equalWH, _initialValue: { w: 0, h: 0 } } ); /** @@ -151,7 +157,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle = */ const setViewportOverflowState = ( showNativeOverlaidScrollbars: boolean, - overflowAmount: XY, + overflowAmount: WH, overflow: OverflowOption, viewportStyleObj: StyleObject ): ViewportOverflowState => { @@ -173,8 +179,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle = _behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll', }; }; - const { _visible: xVisible, _behavior: xVisibleBehavior } = setPartialStylePerAxis(true, overflowAmount!.x, overflow.x, viewportStyleObj); - const { _visible: yVisible, _behavior: yVisibleBehavior } = setPartialStylePerAxis(false, overflowAmount!.y, overflow.y, viewportStyleObj); + const { _visible: xVisible, _behavior: xVisibleBehavior } = setPartialStylePerAxis(true, overflowAmount!.w, overflow.x, viewportStyleObj); + const { _visible: yVisible, _behavior: yVisibleBehavior } = setPartialStylePerAxis(false, overflowAmount!.h, overflow.y, viewportStyleObj); if (xVisible && !yVisible) { viewportStyleObj.overflowX = xVisibleBehavior; @@ -338,7 +344,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle = const showNativeOverlaidScrollbars = showNativeOverlaidScrollbarsOption && _nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.y; const adjustFlexboxGlue = !_flexboxGlue && (_sizeChanged || _contentMutation || _hostMutation || showNativeOverlaidScrollbarsChanged || heightIntrinsicChanged); - let overflowAmuntCache: CacheValues> = getCurrentOverflowAmountCache(force); + let overflowAmuntCache: CacheValues> = getCurrentOverflowAmountCache(force); let contentScrollSizeCache: CacheValues> = getCurrentContentScrollSizeCache(force); let preMeasureViewportOverflowState: ViewportOverflowState | undefined; @@ -433,10 +439,12 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle = // TODO: Test without content // TODO: Test without padding // TODO: overflow: visible on padding / host if overflow visible on both axis + // TODO: change lifecyclehub communication to single object & assign style(_viewport, viewportStyle); _setViewportOverflowScroll(viewportOverflowState._overflowScroll); + _setViewportOverflowAmount(overflowAmount); } }; }; diff --git a/packages/overlayscrollbars/src/overlayscrollbars.ts b/packages/overlayscrollbars/src/overlayscrollbars.ts index 4d55a40..97442e8 100644 --- a/packages/overlayscrollbars/src/overlayscrollbars.ts +++ b/packages/overlayscrollbars/src/overlayscrollbars.ts @@ -14,6 +14,8 @@ export interface OverlayScrollbars { options(newOptions?: PartialOptions): OSOptions; update(force?: boolean): void; + + state(): any; } export const OverlayScrollbars: OverlayScrollbarsStatic = ( @@ -41,6 +43,7 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = ( } return currentOptions; }, + state: () => lifecycleHub._state(), update(force?: boolean) { lifecycleHub._update(null, force); }, diff --git a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts index fe47ed7..6dfaaa1 100644 --- a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts +++ b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts @@ -142,9 +142,6 @@ const checkMetrics = async () => { }, }; - //console.log('t', targetMetrics); - //console.log('c', comparisonMatrics); - should.equal(targetMetrics.offset.left, comparisonMetrics.offset.left, 'Offset left equality.'); should.equal(targetMetrics.offset.top, comparisonMetrics.offset.top, 'Offset top equality.'); @@ -154,6 +151,9 @@ const checkMetrics = async () => { should.equal(targetMetrics.scroll.width, comparisonMetrics.scroll.width, 'Scroll width equality.'); should.equal(targetMetrics.scroll.height, comparisonMetrics.scroll.height, 'Scroll height equality.'); + should.equal(osInstance.state()._overflowAmount.w, comparisonMetrics.scroll.width, 'Overflow amount width equality.'); + should.equal(osInstance.state()._overflowAmount.h, comparisonMetrics.scroll.height, 'Overflow amount height equality.'); + if (targetMetrics.scroll.width > 0) { should.equal(style(targetViewport!, 'overflowX'), 'scroll', 'Overflow-X should result in scroll.'); } else { @@ -324,8 +324,8 @@ const overflowTest = async () => { await checkMetrics(); }; - style(targetResize, { boxSizing: 'border-box' }); - style(comparisonResize, { boxSizing: 'border-box' }); + style(targetResize, { boxSizing: 'border-box', background: 'rgba(0, 0, 0, 0.1)' }); + style(comparisonResize, { boxSizing: 'border-box', background: 'rgba(0, 0, 0, 0.1)' }); style(targetPercent, { display: 'none' }); style(comparisonPercent, { display: 'none' }); style(targetEnd, { display: 'none' });