improve code

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<OSOptions> | null, force?: boolean): void;
+  _state(): any;
   _destroy(): void;
 }
 
@@ -56,7 +57,9 @@ export interface LifecycleHub {
   _getViewportPaddingStyle(): StyleObject;
   _setViewportPaddingStyle(newPaddingStlye?: StyleObject | null): void;
   _getViewportOverflowScroll(): XY<boolean>;
-  _setViewportOverflowScroll(newViewportOverflowScroll: XY<boolean>): void;
+  _setViewportOverflowScroll(newViewportOverflowScroll?: XY<boolean>): void;
+  _getViewportOverflowAmount(): WH<number>;
+  _setViewportOverflowAmount(newViewportOverflowAmount?: WH<number>): void;
 }
 
 const getPropByPath = <T>(obj: any, path: string): T =>
@@ -98,6 +101,10 @@ const viewportOverflowScrollFallback: XY<boolean> = {
   x: false,
   y: false,
 };
+const viewportOverflowAmountFallback: WH<number> = {
+  w: 0,
+  h: 0,
+};
 const directionIsRTLCacheValuesFallback: CacheValues<boolean> = {
   _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);
     },

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 {
-  const { _host, _padding, _viewport, _viewportArrange } = _structureSetup._targetObj;
+    _structureSetup,
+    _doViewportArrange,
+    _getViewportPaddingStyle,
+    _getPaddingInfo,
+    _setViewportOverflowScroll,
+    _setViewportOverflowAmount,
+  } = lifecycleHub;
+  const { _host, _viewport, _viewportArrange } = _structureSetup._targetObj;
   const { _update: updateContentScrollSizeCache, _current: getCurrentContentScrollSizeCache } = createCache<
     WH<number>,
     ContentScrollSizeCacheContext
   >((ctx) => fixScrollSizeRounding(ctx._viewportScrollSize, ctx._viewportOffsetSize, ctx._viewportRect), { _equal: equalWH });
-  const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache<XY<number>, OverflowAmountCacheContext>(
+  const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache<WH<number>, OverflowAmountCacheContext>(
     (ctx) => ({
-      x: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w),
+      w: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w),
-      y: Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h),
+      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<number>,
+    overflowAmount: WH<number>,
     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: xVisible, _behavior: xVisibleBehavior } = setPartialStylePerAxis(true, overflowAmount!.w, overflow.x, viewportStyleObj);
-    const { _visible: yVisible, _behavior: yVisibleBehavior } = setPartialStylePerAxis(false, overflowAmount!.y, overflow.y, 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<XY<number>> = getCurrentOverflowAmountCache(force);
+    let overflowAmuntCache: CacheValues<WH<number>> = getCurrentOverflowAmountCache(force);
     let contentScrollSizeCache: CacheValues<WH<number>> = 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);
     }
   };
 };

packages/overlayscrollbars/src/overlayscrollbars.ts

@@ -14,6 +14,8 @@ export interface OverlayScrollbars {
   options(newOptions?: PartialOptions<OSOptions>): 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);
     },

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(targetResize, { boxSizing: 'border-box', background: 'rgba(0, 0, 0, 0.1)' });
-  style(comparisonResize, { boxSizing: 'border-box' });
+  style(comparisonResize, { boxSizing: 'border-box', background: 'rgba(0, 0, 0, 0.1)' });
   style(targetPercent, { display: 'none' });
   style(comparisonPercent, { display: 'none' });
   style(targetEnd, { display: 'none' });