vevet 3.4.0 → 3.5.0

package/src/components/ScrollBar/Bar/index.ts

@@ -123,10 +123,10 @@ export default class Bar {
     const { outer, thumb, props } = this;
 
     this._listeners.push(
-      addEventListener(outer, 'mouseenter', () => this._handleHover(true))
+      addEventListener(outer, 'mouseenter', () => this._handleHover(true)),
     );
     this._listeners.push(
-      addEventListener(outer, 'mouseleave', () => this._handleHover(false))
+      addEventListener(outer, 'mouseleave', () => this._handleHover(false)),
     );
 
     this._scrollEvent = onScroll({
@@ -189,7 +189,7 @@ export default class Bar {
 
       this._actionTimeout = setTimeout(
         () => this.outer.classList.remove(actionClassName),
-        500
+        500,
       );
     }
 
@@ -274,13 +274,13 @@ export default class Bar {
       if (isHorizontal) {
         const barSize = clamp(
           this._outerWidth / (scrollWidth / (scrollWidth - scrollLine)),
-          [minSize, Infinity]
+          [minSize, Infinity],
         );
         thumb.style.width = `${barSize}px`;
       } else {
         const barSize = clamp(
           this._outerHeight / (scrollHeight / (scrollHeight - scrollLine)),
-          [minSize, Infinity]
+          [minSize, Infinity],
         );
         thumb.style.height = `${barSize}px`;
       }

package/src/components/ScrollBar/index.ts

@@ -13,8 +13,10 @@ export type { NScrollBar };
  */
 export class ScrollBar<
   StaticProps extends NScrollBar.IStaticProps = NScrollBar.IStaticProps,
-  ChangeableProps extends NScrollBar.IChangeableProps = NScrollBar.IChangeableProps,
-  CallbacksTypes extends NScrollBar.ICallbacksTypes = NScrollBar.ICallbacksTypes
+  ChangeableProps extends
+    NScrollBar.IChangeableProps = NScrollBar.IChangeableProps,
+  CallbacksTypes extends
+    NScrollBar.ICallbacksTypes = NScrollBar.ICallbacksTypes,
 > extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
   protected _getDefaultProps() {
     return {
@@ -123,7 +125,7 @@ export class ScrollBar<
     this.toggleClassName(
       this.scrollableElement,
       this.className('-parent'),
-      true
+      true,
     );
 
     // initialize the class
@@ -157,7 +159,7 @@ export class ScrollBar<
         ? container.addCallback(
             'resize',
             () => resizeHandler.debounceResize(),
-            { name: this.name }
+            { name: this.name },
           )
         : undefined;
 

package/src/components/ScrollBar/stories/Default.tsx

@@ -20,7 +20,7 @@ export const WithDefaultComponent: FC = () => {
             mollitia illum?
           </div>
         ),
-        200
+        200,
       )}
     </div>
   );

package/src/components/ScrollBar/stories/WithInnerScroll.tsx

@@ -37,7 +37,7 @@ export const WithInnerScrollComponent: FC = () => {
             mollitia illum?
           </div>
         ),
-        40
+        40,
       )}
     </div>
   );

package/src/components/ScrollBar/stories/WithSmoothScrollComponent.tsx

@@ -41,7 +41,7 @@ export const WithSmoothScrollComponent: FC = () => {
               mollitia illum?
             </div>
           ),
-          40
+          40,
         )}
       </div>
     </div>

package/src/components/ScrollBar/stories/index.stories.tsx

@@ -15,9 +15,9 @@ export const Default: StoryFn<typeof WithDefaultComponent> = (props) => (
 );
 
 export const WithSmoothScroll: StoryFn<typeof WithSmoothScrollComponent> = (
-  props
+  props,
 ) => <WithSmoothScrollComponent {...props} />;
 
 export const WithInnerScroll: StoryFn<typeof WithInnerScrollComponent> = (
-  props
+  props,
 ) => <WithInnerScrollComponent {...props} />;

package/src/components/ScrollView/index.ts

@@ -12,8 +12,10 @@ export type { NScrollView };
  */
 export class ScrollView<
   StaticProps extends NScrollView.IStaticProps = NScrollView.IStaticProps,
-  ChangeableProps extends NScrollView.IChangeableProps = NScrollView.IChangeableProps,
-  CallbacksTypes extends NScrollView.ICallbacksTypes = NScrollView.ICallbacksTypes
+  ChangeableProps extends
+    NScrollView.IChangeableProps = NScrollView.IChangeableProps,
+  CallbacksTypes extends
+    NScrollView.ICallbacksTypes = NScrollView.ICallbacksTypes,
 > extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
   protected _getDefaultProps() {
     return {
@@ -148,11 +150,11 @@ export class ScrollView<
         root: props.intersectionRoot,
         threshold: 0,
         rootMargin: `0px ${xMargin}px ${yMargin}px 0px`,
-      }
+      },
     );
 
-    this.elements.forEach((element) =>
-      this._intersectionObserverIn?.observe(element)
+    this.elements.forEach(
+      (element) => this._intersectionObserverIn?.observe(element),
     );
 
     if (props.states === 'inout') {
@@ -162,11 +164,11 @@ export class ScrollView<
           root: props.intersectionRoot,
           threshold: 0,
           rootMargin: '0px 0px 0px 0px',
-        }
+        },
       );
 
-      this.elements.forEach((element) =>
-        this._intersectionObserverOut?.observe(element)
+      this.elements.forEach(
+        (element) => this._intersectionObserverOut?.observe(element),
       );
     }
   }
@@ -219,7 +221,7 @@ export class ScrollView<
       props.direction === 'horizontal'
         ? (bounding.left - rootBounding.left) / rootBounding.width
         : (bounding.top - rootBounding.top) / rootBounding.height,
-      [0, 1]
+      [0, 1],
     );
 
     return progress * props.maxDelay;
@@ -243,7 +245,7 @@ export class ScrollView<
   protected _handleInOut(
     elementProp: NScrollView.IElement,
     isInViewport: boolean,
-    delay = 0
+    delay = 0,
   ) {
     const { classToToggle } = this.props;
     const element = elementProp;

package/src/components/ScrollView/stories/index.tsx

@@ -39,7 +39,7 @@ export const Component: FC = () => {
             {index} Lorem ipsum dolor sit amet consectetur adipisicing elit.
           </div>
         ),
-        200
+        200,
       )}
     </div>
   );

package/src/components/SectionScrollProgress/index.ts

@@ -12,9 +12,12 @@ export type { NScrollSectionProgress };
  * Trace scroll progress of a section
  */
 export class SectionScrollProgress<
-  StaticProps extends NScrollSectionProgress.IStaticProps = NScrollSectionProgress.IStaticProps,
-  ChangeableProps extends NScrollSectionProgress.IChangeableProps = NScrollSectionProgress.IChangeableProps,
-  CallbacksTypes extends NScrollSectionProgress.ICallbacksTypes = NScrollSectionProgress.ICallbacksTypes
+  StaticProps extends
+    NScrollSectionProgress.IStaticProps = NScrollSectionProgress.IStaticProps,
+  ChangeableProps extends
+    NScrollSectionProgress.IChangeableProps = NScrollSectionProgress.IChangeableProps,
+  CallbacksTypes extends
+    NScrollSectionProgress.ICallbacksTypes = NScrollSectionProgress.ICallbacksTypes,
 > extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
   protected _getDefaultProps() {
     return {

package/src/components/SectionScrollProgress/stories/index.stories.tsx

@@ -14,5 +14,5 @@ export const Default: StoryFn<typeof DefalultComponent> = (props) => (
 );
 
 export const WithCustomScroll: StoryFn<typeof WithCustomScrollComponent> = (
-  props
+  props,
 ) => <WithCustomScrollComponent {...props} />;

package/src/components/SlideProgress/index.ts

@@ -0,0 +1,226 @@
+import { Component as ComponentClass } from '@/base/Component';
+import { NSlideProgress } from './types';
+import { clamp, lerp } from '@/utils/math';
+import { normalizeWheel } from '@/utils/scroll/normalizeWheel';
+import { AnimationFrame } from '../AnimationFrame';
+import { DraggerMove, NDraggerMove } from '../DraggerMove';
+import { Timeline } from '../Timeline';
+
+export type { NSlideProgress };
+
+/**
+ * Slide progress handler
+ */
+export class SlideProgress<
+  StaticProps extends NSlideProgress.IStaticProps = NSlideProgress.IStaticProps,
+  ChangeableProps extends
+    NSlideProgress.IChangeableProps = NSlideProgress.IChangeableProps,
+  CallbacksTypes extends
+    NSlideProgress.ICallbacksTypes = NSlideProgress.ICallbacksTypes,
+> extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
+  protected _getDefaultProps() {
+    return {
+      ...super._getDefaultProps(),
+      min: 0,
+      max: 3,
+      step: 1,
+      ease: 0.1,
+      friction: 0.5,
+      hasDrag: true,
+      dragSpeed: 1,
+      dragDirection: 'y',
+      hasWheel: true,
+      wheelSpeed: 1,
+    };
+  }
+
+  /** Animation frame */
+  protected _animationFrame: AnimationFrame;
+
+  /** Dragger events */
+  protected _dragger: DraggerMove;
+
+  /** Progress (current and target) */
+  protected _progressLerp: NSlideProgress.IWithLerp = { current: 0, target: 0 };
+
+  /** Progress */
+  get progress() {
+    return this._progressLerp.current;
+  }
+
+  /** Stepped progress */
+  get steppedProgress() {
+    return this._getNearestStep(this._progressLerp.current);
+  }
+
+  /** Progress timeline */
+  protected _timelineTo?: Timeline;
+
+  constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
+    super(initialProps, false);
+
+    const { container } = this.props;
+
+    // create animation frame
+    this._animationFrame = new AnimationFrame();
+    this._animationFrame.addCallback('frame', () =>
+      this._handleAnimationFrame(),
+    );
+
+    // create dragger
+    this._dragger = new DraggerMove({ container });
+    this._dragger.addCallback('move', (event) => this._handleDrag(event));
+    this._dragger.addCallback('start', (event) =>
+      event.event.stopPropagation(),
+    );
+
+    // add wheel event
+    this.addEventListener(container, 'wheel', (event) =>
+      this._handleWheel(event),
+    );
+
+    // initialize the class
+    if (canInit) {
+      this.init();
+    }
+  }
+
+  protected _onPropsMutate() {
+    super._onPropsMutate();
+
+    this._dragger.changeProps({ isEnabled: this.props.hasDrag });
+  }
+
+  /** Handle wheel event */
+  protected _handleWheel(event: WheelEvent) {
+    if (this._timelineTo || !this.props.hasWheel) {
+      return;
+    }
+
+    const { _progressLerp: progress } = this;
+    const { container, min, max, wheelSpeed } = this.props;
+
+    const wheel = normalizeWheel(event);
+    const y = (wheel.pixelY / container.clientHeight) * wheelSpeed;
+
+    progress.target = clamp(progress.target + y, [min, max]);
+
+    this._animationFrame.play();
+  }
+
+  /** Handler drag move event */
+  protected _handleDrag({ step }: NDraggerMove.IMoveParameter) {
+    if (this._timelineTo) {
+      return;
+    }
+
+    const { _progressLerp: progress } = this;
+    const { container, dragSpeed, hasDrag, dragDirection, min, max } =
+      this.props;
+
+    if (!hasDrag) {
+      return;
+    }
+
+    const defaultIterator = dragDirection === 'y' ? step.y : step.x;
+    const iterator = (defaultIterator * dragSpeed) / container.clientHeight;
+
+    progress.target = clamp(progress.target - iterator, [min, max]);
+
+    this._animationFrame.play();
+  }
+
+  /** Get nearest stepped value to given progress */
+  protected _getNearestStep(value: number) {
+    return Math.round(value / this.props.step) * this.props.step;
+  }
+
+  /** Callback on animation frame */
+  protected _handleAnimationFrame() {
+    const { _progressLerp: progress } = this;
+    const { ease, friction, step } = this.props;
+    const { easeMultiplier } = this._animationFrame;
+
+    const nearestSteppedProgress = this._getNearestStep(progress.target);
+
+    if (!this._timelineTo) {
+      progress.target = lerp(
+        progress.target,
+        nearestSteppedProgress,
+        friction * ease * easeMultiplier,
+      );
+
+      this._updateCurrentProgress(ease * easeMultiplier);
+
+      if (
+        progress.current === progress.target &&
+        progress.current % step === 0
+      ) {
+        this._animationFrame.pause();
+      }
+    }
+
+    this.render();
+  }
+
+  /** Render scene */
+  public render() {
+    this.callbacks.tbt('render', undefined);
+  }
+
+  /** Interpolate current progress & launch callbacks if needed */
+  protected _updateCurrentProgress(ease: number) {
+    const progress = this._progressLerp;
+
+    const prevSteppedProgress = this._getNearestStep(progress.current);
+
+    progress.current = lerp(progress.current, progress.target, ease);
+
+    const nextSteppedProgress = this._getNearestStep(progress.current);
+
+    if (prevSteppedProgress !== nextSteppedProgress) {
+      this.callbacks.tbt('step', undefined);
+    }
+  }
+
+  /** Animate progress to a certain value */
+  public to({
+    value,
+    duration = 500,
+    onProgress,
+    onEnd,
+  }: NSlideProgress.IToProps) {
+    const startValue = this._progressLerp.current;
+
+    const timeline = new Timeline({ duration });
+    this._timelineTo = timeline;
+
+    timeline.addCallback('progress', (data) => {
+      this._progressLerp.target = lerp(startValue, value, data.easing);
+      this._updateCurrentProgress(1);
+
+      onProgress?.(data);
+    });
+
+    timeline.addCallback('end', () => {
+      this._timelineTo?.destroy();
+      this._timelineTo = undefined;
+
+      onEnd?.();
+    });
+
+    timeline.play();
+
+    this._animationFrame.play();
+  }
+
+  /** Destroy the module */
+  protected _destroy() {
+    super._destroy();
+
+    this._animationFrame.destroy();
+    this._dragger.destroy();
+
+    this._timelineTo?.destroy();
+  }
+}

package/src/components/SlideProgress/stories/index.stories.tsx

@@ -0,0 +1,13 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { Component } from '.';
+
+type TComponent = typeof Component;
+
+const meta: Meta<TComponent> = {
+  title: 'Components/SlideProgress',
+  component: Component,
+};
+
+export default meta;
+
+export const Default: StoryObj<TComponent> = {};

package/src/components/SlideProgress/stories/index.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable no-param-reassign */
+import React, { FC, useEffect, useRef } from 'react';
+import { SlideProgress } from '..';
+
+export const Component: FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const colors = ['#A8E6CF', '#DCEDC1', '#FFD3B6', '#FFAAA5', '#FF8B94'];
+  const { length } = colors;
+
+  useEffect(() => {
+    if (!containerRef.current) {
+      return undefined;
+    }
+
+    const instance = new SlideProgress({
+      container: containerRef.current,
+      min: 0,
+      max: length - 1,
+      step: 0.5,
+    });
+
+    const elements = Array.from(containerRef.current.children) as HTMLElement[];
+
+    instance.addCallback('render', () => {
+      elements.forEach((element, index) => {
+        const y = instance.progress * -100 + index * 100;
+        element.style.transform = `translate(0, ${y}%)`;
+      });
+    });
+
+    instance.render();
+
+    return () => instance.destroy();
+  }, [length]);
+
+  return (
+    <>
+      <p>Scroll the block below</p>
+
+      <div
+        ref={containerRef}
+        style={{
+          position: 'relative',
+          width: 300,
+          height: 300,
+          overflow: 'hidden',
+        }}
+      >
+        {colors.map((color) => (
+          <div
+            key={color}
+            style={{
+              position: 'absolute',
+              top: '0',
+              left: '0',
+              width: '100%',
+              height: '100%',
+              backgroundColor: color,
+            }}
+          />
+        ))}
+      </div>
+    </>
+  );
+};

package/src/components/SlideProgress/types.ts

@@ -0,0 +1,71 @@
+import { NComponent } from '@/base/Component/types';
+import { NTimeline } from '../Timeline';
+
+export namespace NSlideProgress {
+  export interface IStaticProps extends NComponent.IStaticProps {
+    /** HTML Container */
+    container: HTMLElement;
+  }
+
+  export interface IChangeableProps extends NComponent.IChangeableProps {
+    /** Minimum progress value */
+    min: number;
+    /** Maximum progress value */
+    max: number;
+    /** Progress step */
+    step: number;
+    /**
+     * Linear interpolation ease
+     * @default 0.1
+     */
+    ease?: number;
+    /**
+     * Linear interpolation friction
+     * @default 0.5
+     */
+    friction?: number;
+    /**
+     * Use drag events
+     * @default true
+     */
+    hasDrag?: boolean;
+    /**
+     * Dragger speed
+     * @default 1
+     */
+    dragSpeed?: number;
+    /**
+     * Dragger direction
+     * @default 'y'
+     */
+    dragDirection?: 'x' | 'y';
+    /**
+     * Use wheel events
+     * @default true
+     */
+    hasWheel?: boolean;
+    /**
+     * Wheel speed
+     * @default 1
+     */
+    wheelSpeed?: number;
+  }
+
+  export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
+    render: undefined;
+    step: undefined;
+  }
+
+  export interface IWithLerp {
+    current: number;
+    target: number;
+  }
+
+  export interface IToProps {
+    value: number;
+    /** @default 500 */
+    duration?: number;
+    onProgress?: (props: NTimeline.ICallbacksTypes['progress']) => void;
+    onEnd?: () => void;
+  }
+}

package/src/components/SmoothScroll/AnimatonFrame.ts

@@ -32,7 +32,7 @@ export class AnimationFrame {
         this._animationFrameEvent = this.props.outerAnimationFrame.addCallback(
           'frame',
           () => this.props.callback(),
-          { name: 'SmoothScroll' }
+          { name: 'SmoothScroll' },
         );
       }
 
@@ -43,7 +43,7 @@ export class AnimationFrame {
     if (!this._innerAnimationFrame) {
       this._innerAnimationFrame = new AnimationFrameClass({ fps: 'auto' });
       this._innerAnimationFrame.addCallback('frame', () =>
-        this.props.callback()
+        this.props.callback(),
       );
     }
 

package/src/components/SmoothScroll/Elements.ts

@@ -61,8 +61,8 @@ export class Elements {
       this._elements = Array.from(
         selectAll(
           this.props.elements,
-          this.props.container
-        ) as NodeListOf<NSmoothScroll.IElement>
+          this.props.container,
+        ) as NodeListOf<NSmoothScroll.IElement>,
       );
     } else {
       this._elements = [this._wrapper as NSmoothScroll.IElement];
@@ -123,7 +123,7 @@ export class Elements {
     return array.every(
       ({ smoothScrollLeft, smoothScrollTop }) =>
         smoothScrollLeft === array[0].smoothScrollLeft &&
-        smoothScrollTop === array[0].smoothScrollTop
+        smoothScrollTop === array[0].smoothScrollTop,
     );
   }
 

package/src/components/SmoothScroll/index.ts

@@ -15,8 +15,10 @@ export type { NSmoothScroll };
  */
 export class SmoothScroll<
     StaticProps extends NSmoothScroll.IStaticProps = NSmoothScroll.IStaticProps,
-    ChangeableProps extends NSmoothScroll.IChangeableProps = NSmoothScroll.IChangeableProps,
-    CallbacksTypes extends NSmoothScroll.ICallbacksTypes = NSmoothScroll.ICallbacksTypes
+    ChangeableProps extends
+      NSmoothScroll.IChangeableProps = NSmoothScroll.IChangeableProps,
+    CallbacksTypes extends
+      NSmoothScroll.ICallbacksTypes = NSmoothScroll.ICallbacksTypes,
   >
   extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes>
   implements IScrollLike
@@ -288,7 +290,7 @@ export class SmoothScroll<
 
     // wheel
     this.addEventListener(this.container, 'wheel', (event) =>
-      this.handleWheel(event)
+      this.handleWheel(event),
     );
 
     // prevent native scroll
@@ -324,7 +326,7 @@ export class SmoothScroll<
             this._recalculateScrollSizes();
           }
         }) as any,
-        { isProtected: true, name: this.name }
+        { isProtected: true, name: this.name },
       );
     }
   }
@@ -365,7 +367,7 @@ export class SmoothScroll<
   /** Resize the scene */
   protected _resize(
     /** If the method was called natively on window resize */
-    isNative = false
+    isNative = false,
   ) {
     const { container, wrapper } = this;
 
@@ -507,13 +509,13 @@ export class SmoothScroll<
       element.smoothScrollLeft = this._lerp(
         element.smoothScrollLeft,
         this._targetLeft,
-        elementLerp
+        elementLerp,
       );
 
       element.smoothScrollTop = this._lerp(
         element.smoothScrollTop,
         this._targetTop,
-        elementLerp
+        elementLerp,
       );
     }
   }

package/src/components/SmoothScroll/stories/Default.tsx

@@ -55,7 +55,7 @@ export const DefaultComponent: FC = () => {
                 dolores placeat mollitia illum?
               </div>
             ),
-            40
+            40,
           )}
         </div>
       </div>