vevet 4.3.1 → 4.4.0

package/src/components/DraggerMove/index.ts

@@ -1,6 +1,7 @@
 import { addEventListener } from '@/utils/dom/addEventListener';
 import { DraggerBase, NDraggerBase } from '../DraggerBase';
 import { NDraggerMove } from './types';
+import { getApp } from '@/utils/internal/getApp';
 
 export type { NDraggerMove };
 
@@ -22,14 +23,20 @@ export class DraggerMove<
   protected _getDefaultProps() {
     return {
       ...super._getDefaultProps(),
-      disablePointerEventsAt: false,
+      threshold: 5,
     };
   }
 
+  /** Remember scroll values on start */
+  protected _startScroll = { top: 0, left: 0 };
+
+  /** If move callback is being called */
+  protected _isMoving = false;
+
   /**
    * Returns the difference between the current pointer coordinates and the previous coordinates (the step of movement).
    */
-  get stepCoords() {
+  get step() {
     return {
       x: this.coords.x - this.prevCoords.x,
       y: this.coords.y - this.prevCoords.y,
@@ -39,23 +46,23 @@ export class DraggerMove<
   /**
    * Returns the difference between the starting coordinates and the current coordinates.
    */
-  get diffCoords() {
+  get diff() {
     return {
-      x: this.coords.x - this.startCoords.x,
-      y: this.coords.y - this.startCoords.y,
+      x: this.coords.x - this.start.x,
+      y: this.coords.y - this.start.y,
     };
   }
 
   /**
-   * Stores the absolute difference between the start coordinates and the current coordinates during dragging.
+   * Stores the total absolute movement.
    */
-  protected _absDiff: NDraggerBase.IVector2 = { x: 0, y: 0 };
+  protected _total: NDraggerBase.IVector2 = { x: 0, y: 0 };
 
   /**
-   * Returns the absolute difference in coordinates (the total movement made) during dragging.
+   * Returns the total absolute movement.
    */
-  get absDiff() {
-    return this._absDiff;
+  get total() {
+    return this._total;
   }
 
   /**
@@ -65,59 +72,83 @@ export class DraggerMove<
   protected _addRuntimeEvents() {
     super._addRuntimeEvents();
 
-    const { isPassive } = this.props;
-
     this._runtimeListeners.push(
       addEventListener(
         window,
-        'mousemove',
-        (event) => {
-          if (this.type === 'mouse') {
-            this._handleMove(event);
-          }
-        },
-        {
-          passive: isPassive,
-        },
+        'pointermove',
+        (event) => this._handleMove(event),
+        { passive: false },
       ),
     );
+  }
 
-    this._runtimeListeners.push(
-      addEventListener(
-        window,
-        'touchmove',
-        (event) => {
-          if (this.type === 'touch') {
-            this._handleMove(event);
-          }
-        },
-        {
-          passive: isPassive,
-        },
-      ),
-    );
+  /**
+   * Handles the start of a drag event.
+   */
+  protected _handleStart(event: PointerEvent) {
+    super._handleStart(event);
+
+    // Remember scroll values on start
+    this._startScroll = {
+      top: window.scrollY,
+      left: window.scrollX,
+    };
   }
 
   /**
    * Handles the movement during dragging, updating the current coordinates and calculating the step and total movement.
-   * Disables pointer events if necessary based on the `disablePointerEventsAt` threshold.
    *
    * @param event - The event representing the movement (either `MouseEvent` or `TouchEvent`).
    */
-  protected _handleMove(event: NDraggerBase.TEvent) {
-    const { x, y, pointerId } = this._getEventCoords(event);
-
-    if (!this.isDragging || pointerId !== this.pointerID) {
-      return false;
-    }
+  protected _handleMove(event: PointerEvent) {
+    const { clientX: x, clientY: y } = event;
+    const { threshold } = this.props;
+
+    // get scroll values
+    const currentScroll = {
+      top: window.scrollY,
+      left: window.scrollX,
+    };
+    const startScroll = this._startScroll;
 
     // Update previous and current coordinates
     this.prevCoords = { x: this.coords.x, y: this.coords.y };
     this.coords = { x, y };
 
-    // Update absolute difference in movement
-    this._absDiff.x += Math.abs(this.stepCoords.x);
-    this._absDiff.y += Math.abs(this.stepCoords.y);
+    // Update total movement
+    this._total.x += Math.abs(this.step.x);
+    this._total.y += Math.abs(this.step.y);
+
+    // check trheshold
+    if (
+      threshold &&
+      Math.sqrt(this.total.x ** 2 + this.total.y ** 2) < threshold ** 2
+    ) {
+      return;
+    }
+
+    // check if scrolling at the moment
+    if (
+      getApp().isMobile &&
+      (startScroll.top !== currentScroll.top ||
+        startScroll.left !== currentScroll.left)
+    ) {
+      return;
+    }
+
+    // moving
+    if (!this._isMoving) {
+      this._isMoving = true;
+
+      this._start = { x, y };
+      this._prevCoords = { x, y };
+    }
+
+    // prevent defaults
+
+    if (this.props.preventDefault) {
+      event.preventDefault();
+    }
 
     // Optionally disable pointer events during movement
     this._togglePointerEvents(false);
@@ -125,58 +156,50 @@ export class DraggerMove<
     // Trigger 'move' callback with relevant data
     this.callbacks.tbt('move', {
       event,
-      start: this.startCoords,
+      start: this.start,
       coords: this.coords,
-      step: this.stepCoords,
-      diff: this.diffCoords,
-      absDiff: this.absDiff,
+      step: this.step,
+      diff: this.diff,
+      total: this.total,
     });
-
-    return true;
   }
 
   /**
-   * Handles the end of the drag operation, resetting the absolute difference in coordinates.
-   * Re-enables pointer events if they were disabled during movement.
-   *
-   * @param event - The event representing the end of the drag (either `MouseEvent` or `TouchEvent`).
+   * Handles the end of a drag event and initiates cleanup.
    */
-  protected _handleEnd(event: NDraggerBase.TEvent) {
-    super._handleEnd(event);
+  protected _handleEnd() {
+    super._handleEnd(null);
 
-    // Reset absolute movement difference
-    this._absDiff = { x: 0, y: 0 };
+    // Reset
+    this._total = { x: 0, y: 0 };
+    this._isMoving = false;
 
     // Re-enable pointer events
     this._togglePointerEvents(true);
   }
 
+  /** Cancel dragging */
+  public cancel() {
+    this._handleEnd();
+  }
+
   /**
-   * Toggles pointer events on or off based on the movement threshold defined by `disablePointerEventsAt`.
+   * Toggles pointer events on or off.
    *
-   * @param isEnabledProp - If true, pointer events will be re-enabled.
+   * @param isEnabled - If true, pointer events will be re-enabled.
    */
-  protected _togglePointerEvents(isEnabledProp: boolean) {
-    if (typeof this.props.disablePointerEventsAt !== 'number') {
-      return;
-    }
-
+  protected _togglePointerEvents(isEnabled: boolean) {
     if (!(this.container instanceof HTMLElement)) {
       return;
     }
 
-    const isEnabled =
-      (Math.abs(this.diffCoords.x) < this.props.disablePointerEventsAt &&
-        Math.abs(this.diffCoords.y) < this.props.disablePointerEventsAt) ||
-      isEnabledProp;
+    const { total } = this;
+    const { threshold } = this.props;
 
-    this.container.style.pointerEvents = isEnabled ? '' : 'none';
-  }
+    const isEnoughToBlockListeners = total.x > threshold || total.y > threshold;
 
-  /**
-   * Destroys the dragger, cleaning up all associated events and resources.
-   */
-  protected _destroy() {
-    super._destroy();
+    const isDisabled = isEnabled ? false : isEnoughToBlockListeners;
+
+    this.container.style.pointerEvents = isDisabled ? 'none' : '';
   }
 }

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

@@ -10,4 +10,6 @@ const meta: Meta<TComponent> = {
 
 export default meta;
 
-export const Default: StoryObj<TComponent> = {};
+export const Default: StoryObj<TComponent> = {
+  args: {},
+};

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

@@ -14,8 +14,8 @@ export const Component: FC = () => {
 
     const instance = new DraggerMove({
       container: thumb,
-      disablePointerEventsAt: 5,
     });
+
     setDragger(instance);
 
     instance.addCallback('move', ({ diff }) => {
@@ -50,6 +50,7 @@ export const Component: FC = () => {
       <div
         style={{
           position: 'relative',
+          marginTop: 10,
           width: '300px',
           height: '300px',
           display: 'flex',
@@ -64,8 +65,8 @@ export const Component: FC = () => {
           id="drag-thumb"
           style={{
             position: 'relative',
-            width: '150px',
-            height: '150px',
+            width: '250px',
+            height: '250px',
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
@@ -74,9 +75,11 @@ export const Component: FC = () => {
             cursor: 'pointer',
             textAlign: 'center',
             color: '#fff',
+            opacity: 0.75,
+            touchAction: 'pan-y',
           }}
         >
-          <a href="/" draggable={false} style={{ color: 'currentcolor' }}>
+          <a href="/" style={{ color: 'currentcolor' }}>
             Drag me
           </a>
         </div>

package/src/components/DraggerMove/types.ts

@@ -1,19 +1,16 @@
 import { NDraggerBase } from '../DraggerBase';
 
 export namespace NDraggerMove {
-  export interface IStaticProps extends NDraggerBase.IStaticProps {
+  export interface IStaticProps extends NDraggerBase.IStaticProps {}
+
+  export interface IChangeableProps extends NDraggerBase.IChangeableProps {
     /**
-     * Disables pointer events when the difference in coordinates exceeds the specified value (in pixels).
-     * Set this value to a number to define the threshold after which pointer events are disabled.
-     * Set to `false` to leave pointer events unaffected.
-     *
-     * @default false
+     * Threshold value in px. If "touch distance" will be lower than this value then dragger move events will not trigger
+     * @default 5
      */
-    disablePointerEventsAt?: number | false;
+    threshold?: number;
   }
 
-  export interface IChangeableProps extends NDraggerBase.IChangeableProps {}
-
   export interface ICallbacksTypes extends NDraggerBase.ICallbacksTypes {
     /**
      * Callback triggered during the drag movement, providing details about the current, step, and difference coordinates.
@@ -33,8 +30,8 @@ export namespace NDraggerMove {
     diff: NDraggerBase.IVector2;
 
     /**
-     * The absolute difference in coordinates between the start position and the current position, accumulating all movement.
+     * Total movement
      */
-    absDiff: NDraggerBase.IVector2;
+    total: NDraggerBase.IVector2;
   }
 }

package/src/components/Marquee/index.ts

@@ -206,6 +206,9 @@ export class Marquee<
       hasBothEvents: false,
     });
 
+    // initial resize
+    this._handleResize();
+
     // Resize on page load
     getApp()
       .onPageLoad()

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

@@ -243,12 +243,9 @@ export class Bar {
    * @param param - The drag event data.
    */
   private _handleThumbDrag({
-    event,
     coords,
     start,
   }: NDraggerMove.ICallbacksTypes['move']) {
-    event.preventDefault();
-
     const { scrollLine } = this;
     const { container } = this.props;
 

package/src/components/SlideProgress/index.ts

@@ -2,11 +2,9 @@ import { Component as ComponentClass } from '@/base/Component';
 import { NSlideProgress } from './types';
 import { clamp, lerp } from '@/utils/math';
 import { normalizeWheel } from '@/utils/scroll/normalizeWheel';
-import { createIsPageScrolling } from '@/utils/scroll/isPageScrolling';
 import { AnimationFrame } from '../AnimationFrame';
 import { DraggerMove, NDraggerMove } from '../DraggerMove';
 import { Timeline } from '../Timeline';
-import { NDraggerBase } from '../DraggerBase';
 
 export type { NSlideProgress };
 
@@ -40,12 +38,12 @@ export class SlideProgress<
       hasWheel: true,
       wheelSpeed: 1,
       stickyEndDuration: 500,
-      dragThreshold: 3,
+      dragThreshold: 5,
     };
   }
 
   /** Animation frame for smooth animations */
-  protected _animationFrame: AnimationFrame;
+  protected _raf: AnimationFrame;
 
   /** Dragging behavior manager */
   protected _dragger: DraggerMove;
@@ -68,14 +66,11 @@ export class SlideProgress<
   }
 
   /** Timeline for smooth transitions */
-  protected _timelineTo?: Timeline;
+  protected _timeline?: Timeline;
 
   /** Timeout for sticky behavior at the end */
   protected _stickyEndTimeout?: NodeJS.Timeout;
 
-  /** Determines if dragging is allowed */
-  protected _canDragMove = false;
-
   /** Direction of progress */
   protected _direction: 1 | -1 = 1;
 
@@ -85,34 +80,34 @@ export class SlideProgress<
   /** Current handler for user interactions: 'wheel' or 'drag' */
   protected _currentHandler: 'wheel' | 'drag' = 'wheel';
 
-  /** Checks if the page is scrolling */
-  protected _createIsPageScrolling: ReturnType<typeof createIsPageScrolling>;
-
   constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
     super(initialProps, false);
 
-    const { container } = this.props;
+    const { container, hasDrag, dragDirection, dragThreshold } = this.props;
 
     // Create the animation frame
-    this._animationFrame = new AnimationFrame();
-    this._animationFrame.addCallback('frame', () =>
-      this._handleAnimationFrame(),
-    );
+    this._raf = new AnimationFrame();
+    this._raf.addCallback('frame', () => this._handleAnimationFrame());
+
+    // Create dragger
+    this._dragger = new DraggerMove({
+      container,
+      isEnabled: hasDrag,
+      threshold: dragThreshold,
+    });
 
-    // Create the dragger
-    this._dragger = new DraggerMove({ container });
     this._dragger.addCallback('move', (event) => this._handleDrag(event));
     this._dragger.addCallback('start', ({ event }) => event.stopPropagation());
     this._dragger.addCallback('end', () => this._handleDragEnd());
 
+    // Touch Action
+    container.style.touchAction = dragDirection === 'x' ? 'pan-y' : 'pan-x';
+
     // Add wheel event listener
     this.addEventListener(container, 'wheel', (event) =>
       this._handleWheel(event),
     );
 
-    // Create page scrolling check
-    this._createIsPageScrolling = createIsPageScrolling();
-
     // Initialize the class
     if (canInit) {
       this.init();
@@ -125,7 +120,11 @@ export class SlideProgress<
   protected _onPropsMutate() {
     super._onPropsMutate();
 
-    this._dragger.changeProps({ isEnabled: this.props.hasDrag });
+    const { container, hasDrag, dragThreshold, dragDirection } = this.props;
+
+    this._dragger.changeProps({ isEnabled: hasDrag, threshold: dragThreshold });
+
+    container.style.touchAction = dragDirection === 'x' ? 'pan-y' : 'pan-x';
   }
 
   /**
@@ -133,7 +132,7 @@ export class SlideProgress<
    * @param event - The wheel event.
    */
   protected _handleWheel(event: WheelEvent) {
-    if (this._timelineTo || !this.props.hasWheel) {
+    if (this._timeline || !this.props.hasWheel) {
       return;
     }
 
@@ -159,7 +158,8 @@ export class SlideProgress<
     this._direction = this._wheelIntensity > 0 ? 1 : -1;
     progress.target = clamp(progress.target + y, [min, max]);
 
-    this._animationFrame.play();
+    // play animation
+    this._raf.play();
 
     // Set timeout for sticky behavior
     this._stickyEndTimeout = setTimeout(() => {
@@ -171,55 +171,18 @@ export class SlideProgress<
     this.callbacks.tbt('wheel', wheel);
   }
 
-  /**
-   * Checks if dragging is allowed.
-   * @param absDiff - Absolute difference in dragging distance.
-   */
-  protected _checkCanDragMove(absDiff: NDraggerBase.IVector2) {
-    const { dragDirection, dragThreshold } = this.props;
-
-    if (this._canDragMove) {
-      return true;
-    }
-
-    if (absDiff.x < dragThreshold && absDiff.y < dragThreshold) {
-      return false;
-    }
-
-    if (dragDirection === 'x' && absDiff.x > absDiff.y) {
-      this._canDragMove = true;
-    }
-
-    if (dragDirection === 'y' && absDiff.y > absDiff.x) {
-      this._canDragMove = true;
-    }
-
-    return false;
-  }
-
   /**
    * Handles the drag movement for adjusting progress.
    * @param data - The drag event data.
    */
   protected _handleDrag(data: NDraggerMove.IMoveParameter) {
-    const isPageScrolling = this._createIsPageScrolling.get();
-
-    if (this._timelineTo || !this.props.hasDrag || isPageScrolling) {
-      return;
-    }
-
-    if (!this._checkCanDragMove(data.absDiff)) {
+    if (this._timeline) {
       return;
     }
 
     const { _progressLerp: progress, props } = this;
     const { container, dragSpeed, dragDirection, min, max } = props;
-    const { event, step, diff } = data;
-
-    if (event.cancelable) {
-      event.preventDefault();
-    }
-    event.stopPropagation();
+    const { step, diff } = data;
 
     // Update handler
     this._currentHandler = 'drag';
@@ -235,7 +198,7 @@ export class SlideProgress<
     const dragDiff = dragDirection === 'y' ? diff.y : diff.x;
     this._direction = dragDiff < 0 ? 1 : -1;
 
-    this._animationFrame.play();
+    this._raf.play();
 
     // Callbacks
     this.callbacks.tbt('dragMove', data);
@@ -245,9 +208,10 @@ export class SlideProgress<
    * Handles the end of a drag event and triggers sticky behavior.
    */
   private _handleDragEnd() {
-    this._canDragMove = false;
-
     this._goStickyEnd();
+
+    // Callbacks
+    this.callbacks.tbt('dragEnd', undefined);
   }
 
   /**
@@ -285,11 +249,11 @@ export class SlideProgress<
   protected _handleAnimationFrame() {
     const { _progressLerp: progress } = this;
     const { ease, friction, step } = this.props;
-    const { fpsMultiplier } = this._animationFrame;
+    const { fpsMultiplier } = this._raf;
 
     const nearestSteppedProgress = this._getNearestStep(progress.target);
 
-    if (!this._timelineTo) {
+    if (!this._timeline) {
       progress.target = lerp(
         progress.target,
         nearestSteppedProgress,
@@ -303,7 +267,7 @@ export class SlideProgress<
         progress.current === progress.target &&
         progress.current % step === 0
       ) {
-        this._animationFrame.pause();
+        this._raf.pause();
       }
     }
 
@@ -370,7 +334,7 @@ export class SlideProgress<
     onProgress,
     onEnd,
   }: NSlideProgress.IToProps) {
-    this._timelineTo?.destroy();
+    this._timeline?.destroy();
 
     const startValue = this._progressLerp.current;
     const diff = Math.abs(startValue - endValue);
@@ -384,7 +348,7 @@ export class SlideProgress<
     );
 
     const timeline = new Timeline({ duration });
-    this._timelineTo = timeline;
+    this._timeline = timeline;
 
     timeline.addCallback('progress', (data) => {
       this._progressLerp.target = lerp(startValue, endValue, data.e, 0);
@@ -394,15 +358,15 @@ export class SlideProgress<
     });
 
     timeline.addCallback('end', () => {
-      this._timelineTo?.destroy();
-      this._timelineTo = undefined;
+      this._timeline?.destroy();
+      this._timeline = undefined;
 
       onEnd?.();
     });
 
     timeline.play();
 
-    this._animationFrame.play();
+    this._raf.play();
   }
 
   /**
@@ -411,12 +375,10 @@ export class SlideProgress<
   protected _destroy() {
     super._destroy();
 
-    this._createIsPageScrolling.destroy();
-
-    this._animationFrame.destroy();
+    this._raf.destroy();
     this._dragger.destroy();
 
-    this._timelineTo?.destroy();
+    this._timeline?.destroy();
 
     if (this._stickyEndTimeout) {
       clearTimeout(this._stickyEndTimeout);

package/src/components/SlideProgress/types.ts

@@ -63,7 +63,7 @@ export namespace NSlideProgress {
     stickyEndDuration?: TDuration | null;
     /**
      * Minimum threshold for drag movements (in pixels).
-     * @default 3
+     * @default 5
      */
     dragThreshold?: number;
   }
@@ -77,6 +77,8 @@ export namespace NSlideProgress {
     wheel: TNormalizeWheel;
     /** Fired when a drag event moves the slider */
     dragMove: NDraggerMove.IMoveParameter;
+    /** Fired when dragging ends */
+    dragEnd: undefined;
   }
 
   export interface IWithLerp {

package/src/utils/scroll/index.ts

@@ -1,5 +1,4 @@
 export * from './getScrollValues';
-export * from './isPageScrolling';
 export * from './normalizeWheel';
 export * from './onScroll';
 export * from './scrollTo';

package/src/version.ts

@@ -1,2 +1,2 @@
-const version = '4.3.1';
+const version = '4.4.0';
 export default version;