vevet 2.17.0 → 3.0.0-beta.1

package/src/components/CustomCursor/index.ts

@@ -0,0 +1,435 @@
+import { addEventListener, createElement, selectOne } from 'vevet-dom';
+import { AnimationFrame } from '../AnimationFrame';
+import { NCustomCursor } from './types';
+import { Component as ComponentClass } from '@/base/Component';
+import { lerp } from '@/utils/math';
+
+export type { NCustomCursor };
+
+/**
+ * Creates a smooth custom cursor
+ */
+export class CustomCursor<
+  StaticProps extends NCustomCursor.IStaticProps = NCustomCursor.IStaticProps,
+  ChangeableProps extends NCustomCursor.IChangeableProps = NCustomCursor.IChangeableProps,
+  CallbacksTypes extends NCustomCursor.ICallbacksTypes = NCustomCursor.ICallbacksTypes
+> extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
+  protected _getDefaultProps() {
+    return {
+      ...super._getDefaultProps(),
+      container: window,
+      isEnabled: true,
+      isNativeCursorHidden: false,
+      width: 50,
+      height: 50,
+      lerp: 0.2,
+      isFpsNormalized: true,
+      isAutoStop: true,
+    };
+  }
+
+  get prefix() {
+    return `${this.app.prefix}custom-cursor`;
+  }
+
+  /** Cursor container */
+  get container() {
+    return this._container;
+  }
+
+  /** Cursor container */
+  private _container: Element | Window;
+
+  /** The container is window */
+  private _isContainerWindow: boolean;
+
+  /** DOM parent for the cursor element */
+  get domContainer(): HTMLElement {
+    if (this.container instanceof Window) {
+      return this.app.html;
+    }
+
+    return this.container as HTMLElement;
+  }
+
+  /** Cursor element (outer element) */
+  get outerElement() {
+    return this._outerElement;
+  }
+
+  /** Outer cursor element */
+  private _outerElement!: HTMLElement;
+
+  /** Cursor element (inner element) */
+  get innerElement() {
+    return this._innerElement;
+  }
+
+  /** Inner cursor element */
+  private _innerElement!: HTMLElement;
+
+  /** Hovered element */
+  private _hoveredElement?: NCustomCursor.IHoveredElement | undefined;
+
+  /** Hovered element */
+  get hoveredElement(): NCustomCursor.IHoveredElement | undefined {
+    return this._hoveredElement;
+  }
+
+  /** Hovered element */
+  set hoveredElement(value: NCustomCursor.IHoveredElement | undefined) {
+    this._hoveredElement = value;
+  }
+
+  /** Animation frame */
+  private _animationFrame!: AnimationFrame;
+
+  /** If can play animation */
+  private _canPlay: boolean;
+
+  /** Current cursor coordinates */
+  private _coords: NCustomCursor.ICoords;
+
+  /** Current cursor coordinates */
+  get coords() {
+    return this._coords;
+  }
+
+  /** Target cursor coordinates */
+  private _targetCoords: NCustomCursor.ICoords;
+
+  /** Target cursor coordinates */
+  get targetCoords() {
+    const { hoveredElement, props } = this;
+
+    let { x, y } = this._targetCoords;
+    let { width, height } = props;
+    let padding = 0;
+
+    if (hoveredElement) {
+      const bounding = hoveredElement.element.getBoundingClientRect();
+
+      if (hoveredElement.isSticky) {
+        x = bounding.left + bounding.width / 2;
+        y = bounding.top + bounding.height / 2;
+      }
+
+      if (hoveredElement.width === 'auto') {
+        width = bounding.width;
+      } else if (typeof hoveredElement.width === 'number') {
+        width = hoveredElement.width;
+      }
+
+      if (hoveredElement.height === 'auto') {
+        height = bounding.height;
+      } else if (typeof hoveredElement.height === 'number') {
+        height = hoveredElement.height;
+      }
+
+      padding = hoveredElement.padding ?? 0;
+    }
+
+    width += padding * 2;
+    height += padding * 2;
+
+    return { x, y, width, height };
+  }
+
+  constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
+    super(initialProps, false);
+
+    // get cursor container
+    const container = selectOne(this.props.container);
+    if (container) {
+      this._container = container;
+    } else {
+      throw new Error(`No cursor container for ${this.props.container}`);
+    }
+    this._isContainerWindow = container instanceof Window;
+
+    // set default vars
+    this._coords = { x: 0, y: 0, width: 0, height: 0 };
+    this._targetCoords = { x: 0, y: 0, width: 0, height: 0 };
+    this._canPlay = this.props.isEnabled;
+
+    if (canInit) {
+      this.init();
+    }
+  }
+
+  /** Init the class */
+  protected _init() {
+    super._init();
+
+    // create
+    this._createCursor();
+    this._setEvents();
+
+    // enable by default
+    if (this.props.isEnabled) {
+      this.enable();
+    }
+  }
+
+  /** Create custom cursor */
+  private _createCursor() {
+    const { container, domContainer } = this;
+
+    // hide native cursor
+    if (this.props.isNativeCursorHidden) {
+      domContainer.style.cursor = 'none';
+      domContainer.classList.add(this.className('-hide-defaut-cursor'));
+    }
+
+    // set classnames
+    domContainer.classList.add(this.className('-container'));
+
+    // create outer element
+    this._outerElement = createElement('div', {
+      class: this.className(
+        '',
+        container instanceof Window ? '-in-window' : '-in-element',
+        '-disabled'
+      ),
+      parent: domContainer,
+    });
+
+    // create inner element
+    this._innerElement = createElement('div', {
+      class: this.className('__inner', '-disabled'),
+      parent: this._outerElement,
+    });
+
+    // launch events
+    this.callbacks.tbt('create', {
+      outerElement: this.outerElement,
+      innerElement: this.innerElement,
+    });
+
+    this.addDestroyableAction(() => {
+      domContainer.style.cursor = '';
+      domContainer.classList.remove(this.className('-hide-defaut-cursor'));
+      domContainer.classList.remove(this.className('-container'));
+
+      this._outerElement.remove();
+      this._innerElement.remove();
+    });
+  }
+
+  /** Set module events */
+  private _setEvents() {
+    const { domContainer } = this;
+
+    this._animationFrame = new AnimationFrame();
+    this._animationFrame.addCallback('frame', () => this.render());
+    this.addDestroyableAction(() => this._animationFrame.destroy());
+
+    this.addEventListener(
+      domContainer,
+      'mouseenter',
+      this._handleMouseEnter.bind(this)
+    );
+
+    this.addEventListener(
+      domContainer,
+      'mouseleave',
+      this._handleMouseLeave.bind(this)
+    );
+
+    this.addEventListener(
+      domContainer,
+      'mousemove',
+      this._handleMouseMove.bind(this)
+    );
+
+    this.addEventListener(
+      domContainer,
+      'mousedown',
+      this._handleMouseDown.bind(this)
+    );
+
+    this.addEventListener(
+      domContainer,
+      'mouseup',
+      this._handleMouseUp.bind(this)
+    );
+
+    this.addEventListener(window, 'blur', this._handleWindowBlur.bind(this));
+  }
+
+  /** Event on mouse enter */
+  private _handleMouseEnter(evt: MouseEvent) {
+    this._coords.x = evt.clientX;
+    this._coords.y = evt.clientY;
+    this._targetCoords.x = evt.clientX;
+    this._targetCoords.y = evt.clientY;
+
+    this.outerElement.classList.add(this.className('-in-action'));
+  }
+
+  /** Event on mouse leave */
+  private _handleMouseLeave() {
+    this.outerElement.classList.remove(this.className('-in-action'));
+  }
+
+  /** Event on mouse move */
+  private _handleMouseMove(evt: MouseEvent) {
+    this._targetCoords.x = evt.clientX;
+    this._targetCoords.y = evt.clientY;
+
+    this.outerElement.classList.add(this.className('-in-action'));
+
+    if (this._canPlay) {
+      this._animationFrame.play();
+    }
+  }
+
+  /** Event on mouse down */
+  private _handleMouseDown(evt: MouseEvent) {
+    if (evt.which === 1) {
+      this.outerElement.classList.add(this.className('-click'));
+      this.innerElement.classList.add(this.className('-click'));
+    }
+  }
+
+  /** Event on mouse up */
+  private _handleMouseUp() {
+    this.outerElement.classList.remove(this.className('-click'));
+    this.innerElement.classList.remove(this.className('-click'));
+  }
+
+  /** Event on window blur */
+  private _handleWindowBlur() {
+    this._handleMouseUp();
+  }
+
+  /** Set hover events on an element */
+  public addHoverElement(
+    settingsProp: NCustomCursor.IHoveredElement,
+    enterTimeout = 100
+  ) {
+    const settings: NCustomCursor.IHoveredElement = {
+      width: 'auto',
+      height: 'auto',
+      ...settingsProp,
+    };
+    const { element } = settings;
+
+    let timeout: NodeJS.Timeout | undefined;
+
+    const mouseEnter = addEventListener(element, 'mouseenter', () => {
+      timeout = setTimeout(() => {
+        this.hoveredElement = { ...settings };
+      }, enterTimeout);
+    });
+
+    const mouseLeave = addEventListener(element, 'mouseleave', () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+
+      this.hoveredElement = undefined;
+    });
+
+    const remove = () => {
+      if (this.hoveredElement?.element === element) {
+        this.hoveredElement = undefined;
+      }
+
+      mouseEnter.remove();
+      mouseLeave.remove();
+
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+
+    this.addDestroyableAction(() => remove());
+
+    return { remove };
+  }
+
+  /** Render the scene */
+  public render() {
+    const { props, coords, targetCoords } = this;
+
+    this._calculateCoords();
+    const realCoords = this._renderElements();
+
+    if (
+      props.isAutoStop &&
+      coords.x === targetCoords.x &&
+      coords.y === targetCoords.y &&
+      coords.width === targetCoords.width &&
+      coords.height === targetCoords.height
+    ) {
+      this._animationFrame.pause();
+    }
+
+    // launch render events
+    this.callbacks.tbt('render', realCoords);
+  }
+
+  /** Recalculate current coordinates */
+  private _calculateCoords() {
+    const { targetCoords, _coords: coords } = this;
+
+    coords.x = this._lerp(coords.x, targetCoords.x);
+    coords.y = this._lerp(coords.y, targetCoords.y);
+    coords.width = this._lerp(coords.width, targetCoords.width);
+    coords.height = this._lerp(coords.height, targetCoords.height);
+  }
+
+  /** Linear interpolation */
+  private _lerp(current: number, target: number) {
+    const { isFpsNormalized, lerp: ease } = this.props;
+
+    const fpsMultiplier = isFpsNormalized
+      ? this._animationFrame.easeMultiplier
+      : 1;
+
+    const value = lerp(current, target, ease * fpsMultiplier, 0.02);
+
+    return value;
+  }
+
+  /** Render elements */
+  private _renderElements(): NCustomCursor.ICoords {
+    const { domContainer, outerElement } = this;
+    let { x, y } = this.coords;
+    const { width, height } = this.coords;
+
+    if (!this._isContainerWindow) {
+      const bounding = domContainer.getBoundingClientRect();
+      x -= bounding.left;
+      y -= bounding.top;
+    }
+
+    // update dom coordinates
+    outerElement.style.transform = `translate(${x}px, ${y}px)`;
+    outerElement.style.setProperty('--cursor-w', `${width}px`);
+    outerElement.style.setProperty('--cursor-h', `${height}px`);
+
+    return { x, y, width, height };
+  }
+
+  /** Enable cursor animation */
+  public enable() {
+    this._canPlay = true;
+
+    this.outerElement.classList.remove(this.className('-disabled'));
+    this.innerElement.classList.remove(this.className('-disabled'));
+
+    this._animationFrame.play();
+  }
+
+  /** Disable cursor animation */
+  public disable() {
+    this._canPlay = false;
+
+    this.outerElement.classList.add(this.className('-disabled'));
+    this.innerElement.classList.add(this.className('-disabled'));
+
+    this._animationFrame.destroy();
+  }
+}

package/src/components/CustomCursor/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/CustomCursor',
+  component: Component,
+};
+
+export default meta;
+
+export const Default: StoryObj<TComponent> = {};

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

@@ -0,0 +1,68 @@
+import React, { FC, useEffect, useRef } from 'react';
+import { CustomCursor } from '..';
+
+export const Component: FC = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const refWithSize = useRef<HTMLButtonElement>(null);
+  const refWithSticky = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) {
+      return undefined;
+    }
+
+    const instance = new CustomCursor({
+      container: ref.current,
+    });
+
+    // @ts-ignore
+    window.instance = instance;
+
+    if (refWithSize.current) {
+      instance.addHoverElement({
+        element: refWithSize.current,
+        width: 'auto',
+        height: 'auto',
+        padding: 10,
+      });
+    }
+
+    if (refWithSticky.current) {
+      instance.addHoverElement({
+        element: refWithSticky.current,
+        width: 'auto',
+        height: 'auto',
+        padding: 10,
+        isSticky: true,
+      });
+    }
+
+    return () => instance.destroy();
+  }, []);
+
+  return (
+    <div ref={ref} style={{ position: 'relative' }}>
+      <p>
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt
+        voluptate provident ratione, libero explicabo illum iusto minima, fugiat
+        sint nemo iure? Enim debitis, quidem id repudiandae distinctio sequi
+        culpa harum!
+      </p>
+
+      <button ref={refWithSize} type="button">
+        Change size on hover
+      </button>
+
+      <p>
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt
+        voluptate provident ratione, libero explicabo illum iusto minima, fugiat
+        sint nemo iure? Enim debitis, quidem id repudiandae distinctio sequi
+        culpa harum!
+      </p>
+
+      <button ref={refWithSticky} type="button">
+        Sticky on hover
+      </button>
+    </div>
+  );
+};

package/src/components/CustomCursor/types.ts

@@ -0,0 +1,87 @@
+import { NComponent } from '@/base/Component/types';
+
+export namespace NCustomCursor {
+  export interface IStaticProps extends NComponent.IStaticProps {
+    /**
+     * Cursor parent element
+     * @default window
+     */
+    container: Window | Element | string;
+    /**
+     * If need to launch cursor animation after anitialization
+     * @default true
+     */
+    isEnabled?: boolean;
+    /**
+     * If need to hide the native cursor
+     * @default false
+     */
+    isNativeCursorHidden?: boolean;
+  }
+
+  export interface IChangeableProps extends NComponent.IChangeableProps {
+    /**
+     * @default 50
+     */
+    width?: number;
+    /**
+     * @default 50
+     */
+    height?: number;
+    /**
+     * Coords linear interpolation
+     * @default 0.2
+     */
+    lerp?: number;
+    /**
+     * On different screens with different FPS, animation may be slower or faster.
+     * This property is to normalize animation speed across different screens.
+     * @default true
+     */
+    isFpsNormalized?: boolean;
+    /**
+     * Automatically stop rendering after the target and current values are approximated.
+     * @default true
+     */
+    isAutoStop?: boolean;
+  }
+
+  export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
+    create: {
+      outerElement: HTMLElement;
+      innerElement: HTMLElement;
+    };
+    render: IVector2;
+  }
+
+  export interface IVector2 {
+    x: number;
+    y: number;
+  }
+
+  export interface ICoords {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  }
+
+  export interface IHoveredElement {
+    /** Hovered element */
+    element: Element;
+    /** Hover ist sticky */
+    isSticky?: boolean;
+    /**
+     * Target cursor width
+     * @default 'auto'
+     */
+    width?: false | number | 'auto';
+    /**
+     * Target cursor height
+     * @default 'auto'
+     */
+    height?: false | number | 'auto';
+    /** Target cursor padding */
+    padding?: number;
+  }
+}