vevet 2.17.0 → 3.0.0-beta.1

package/src/components/BaseTimeline/stories/Nested.tsx

@@ -0,0 +1,108 @@
+import React, { FC, useEffect, useRef, useState } from 'react';
+import { BaseTimeline } from '..';
+import { Easing, spreadScope } from '@/utils/math';
+
+export const Nested: FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [timeline, setTimeline] = useState<BaseTimeline>();
+
+  useEffect(() => {
+    const instance = new BaseTimeline({
+      easing: Easing.easeInOutBounce,
+      hasNestedEasingProgress: true,
+    });
+    setTimeline(instance);
+
+    if (containerRef.current) {
+      const children = Array.from(
+        containerRef.current.children
+      ) as HTMLElement[];
+
+      const scopes = spreadScope(children.length, 0.9);
+
+      children.forEach((child, index) => {
+        const nestedTm = new BaseTimeline({
+          nestedScope: scopes[index],
+          easing: Easing.easeInOutBounce,
+        });
+
+        nestedTm.addCallback('progress', ({ easing }) => {
+          // eslint-disable-next-line no-param-reassign
+          child.style.transform = `scale(${easing}, 1)`;
+        });
+
+        instance.addNestedTimeline(nestedTm);
+      });
+    }
+
+    return () => instance.destroy();
+  }, []);
+
+  return (
+    <div>
+      <input
+        type="range"
+        min={0}
+        max={1}
+        defaultValue={0}
+        step={0.0001}
+        style={{ width: '100%' }}
+        onChange={(event) => {
+          if (timeline) {
+            timeline.progress = parseFloat(event.currentTarget.value);
+          }
+        }}
+      />
+
+      <div
+        ref={containerRef}
+        style={{
+          marginTop: 20,
+          width: '100%',
+          display: 'grid',
+          gap: 10,
+        }}
+      >
+        <div
+          style={{
+            height: '30px',
+            backgroundColor: '#F7DBA7',
+            transform: 'scale(0, 1)',
+          }}
+        />
+
+        <div
+          style={{
+            height: '30px',
+            backgroundColor: '#F1AB86',
+            transform: 'scale(0, 1)',
+          }}
+        />
+
+        <div
+          style={{
+            height: '30px',
+            backgroundColor: '#C57B57',
+            transform: 'scale(0, 1)',
+          }}
+        />
+
+        <div
+          style={{
+            height: '30px',
+            backgroundColor: '#1E2D2F',
+            transform: 'scale(0, 1)',
+          }}
+        />
+
+        <div
+          style={{
+            height: '30px',
+            backgroundColor: '#041F1E',
+            transform: 'scale(0, 1)',
+          }}
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import { Basic } from './Basic';
+import { Nested } from './Nested';
+
+const meta: Meta = {
+  title: 'Components/BaseTimeline',
+};
+
+export default meta;
+
+export const Default: StoryFn<typeof Basic> = (props) => <Basic {...props} />;
+
+export const WithNested: StoryFn<typeof Nested> = (props) => (
+  <Nested {...props} />
+);

package/src/components/BaseTimeline/types.ts

@@ -0,0 +1,36 @@
+import { NComponent } from '@/base/Component';
+import { NApplication } from '@/src/Application';
+
+export namespace NBaseTimeline {
+  export interface IStaticProps extends NComponent.IStaticProps {
+    /** Timeline easing function */
+    easing?: NApplication.IProps['easing'];
+    /**
+     * Timeline scope is used for nested timelines.
+     * The first value means that animation will start only when the absolute progress
+     * of the parent timeline reaches this value. The second value is
+     * the end of animation relatively to the parent timeline.
+     * This property should be set for a nested timeline.
+     * @default [0, 1]
+     */
+    nestedScope?: [number, number] | number[];
+    /**
+     * Define if you want to use easing progress to calculate current progress
+     * of nested timelines according to their scope.
+     * This property should be set for the parent timeline.
+     * @default false
+     */
+    hasNestedEasingProgress?: boolean;
+  }
+
+  export interface IChangeableProps extends NComponent.IChangeableProps {}
+
+  export interface IProgressParameter {
+    progress: number;
+    easing: number;
+  }
+
+  export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
+    progress: IProgressParameter;
+  }
+}

package/src/components/Ctx2D/index.ts

@@ -0,0 +1,228 @@
+import { Component as ComponentClass } from '@/base/Component';
+import { NCtx2D } from './types';
+import { onResize } from '@/utils/internal/onResize';
+
+export type { NCtx2D };
+
+/**
+ * Makes working with canvas easier.
+ * It creates an HTML5 Canvas element and its 2d context and can
+ * implement automatic resize.
+ */
+export class Ctx2D<
+  StaticProps extends NCtx2D.IStaticProps = NCtx2D.IStaticProps,
+  ChangeableProps extends NCtx2D.IChangeableProps = NCtx2D.IChangeableProps,
+  CallbacksTypes extends NCtx2D.ICallbacksTypes = NCtx2D.ICallbacksTypes
+> extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
+  protected _getDefaultProps() {
+    return {
+      ...super._getDefaultProps(),
+      container: false,
+      isAppend: true,
+      hasInitialResize: true,
+      hasResize: false,
+      viewportTarget: 'any',
+      resizeDebounce: 0,
+      width: 'auto',
+      height: 'auto',
+      dpr: 'auto',
+    };
+  }
+
+  /** The parent element of the canvas */
+  get container() {
+    return this.props.container;
+  }
+
+  /** The Canvas element itself */
+  private _canvas: HTMLCanvasElement;
+
+  /** The Canvas element itself */
+  get canvas() {
+    return this._canvas;
+  }
+
+  /** 2D Context */
+  private _ctx: CanvasRenderingContext2D;
+
+  /** 2D Context */
+  get ctx() {
+    return this._ctx;
+  }
+
+  /* Canvas width (with DPR) */
+  private _width: number;
+
+  /* Canvas width (with DPR) */
+  get width() {
+    return this._width;
+  }
+
+  /* Canvas width (without DPR) */
+  get clientWidth() {
+    return this.width / this.dpr;
+  }
+
+  /* Canvas height (with DPR) */
+  private _height: number;
+
+  /* Canvas height (with DPR) */
+  get height() {
+    return this._height;
+  }
+
+  /* Canvas height (without DPR) */
+  get clientHeight() {
+    return this.height / this.dpr;
+  }
+
+  /** Device pixel ratio */
+  private _dpr: number;
+
+  /** Device pixel ratio */
+  get dpr() {
+    return this._dpr;
+  }
+
+  /** If content may be successfully rendered */
+  get canRender() {
+    return this.width > 0 && this.height > 0;
+  }
+
+  constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
+    super(initialProps, false);
+
+    const { isAppend, container } = this.props;
+
+    // set default values
+    this._width = 0;
+    this._height = 0;
+    this._dpr = 1;
+
+    // create canvas
+    this._canvas = document.createElement('canvas');
+    this._canvas.style.position = 'absolute';
+    this._canvas.style.top = '0';
+    this._canvas.style.left = '0';
+    this._canvas.style.width = '100%';
+    this._canvas.style.height = '100%';
+
+    // append canvas
+    if (isAppend && container instanceof Element) {
+      container.append(this._canvas);
+
+      this.addDestroyableAction(() => this.canvas.remove());
+    }
+
+    // create context
+    this._ctx = this._canvas.getContext('2d')!;
+
+    if (canInit) {
+      this.init();
+    }
+  }
+
+  protected _onPropsMutate() {
+    super._onPropsMutate();
+
+    this.resize();
+  }
+
+  protected _init() {
+    super._init();
+
+    this._setResize();
+  }
+
+  /** Set resize events */
+  private _setResize() {
+    const { hasInitialResize, hasResize, viewportTarget, resizeDebounce } =
+      this.props;
+
+    if (!hasResize) {
+      return;
+    }
+
+    const resizeHandler = onResize({
+      onResize: () => this.resize(),
+      element: this.container,
+      viewportTarget,
+      resizeDebounce,
+    });
+
+    this.addDestroyableAction(() => resizeHandler.remove());
+
+    if (hasInitialResize) {
+      resizeHandler.resize();
+    }
+  }
+
+  /** Resize the canvas */
+  public resize() {
+    const { props, canvas } = this;
+
+    if (!canvas) {
+      return;
+    }
+
+    const { app } = this;
+    const { viewport } = app;
+
+    // calculate dpr
+    if (typeof props.dpr === 'number') {
+      this._dpr = props.dpr;
+    } else {
+      this._dpr = viewport.dpr;
+    }
+
+    // calculate new width & height
+    let newWidth = 0;
+    let newHeight = 0;
+    if (typeof props.width === 'number' && typeof props.height === 'number') {
+      newWidth = props.width;
+      newHeight = props.height;
+    } else if (this.container) {
+      newWidth = this.container.clientWidth;
+      newHeight = this.container.clientHeight;
+    } else {
+      newWidth = viewport.width;
+      newHeight = viewport.height;
+    }
+
+    // apply dpr
+    newWidth *= this._dpr;
+    newHeight *= this._dpr;
+
+    // update sizes
+    this._width = newWidth;
+    this._height = newHeight;
+
+    // apply sizes
+    canvas.width = newWidth;
+    canvas.height = newHeight;
+
+    // launch callbacks
+    this._handleResize();
+    this.callbacks.tbt('resize', undefined);
+  }
+
+  /** Method called on resize */
+  protected _handleResize() {}
+
+  /** Render the scene if possible */
+  public render(renderProp: NCtx2D.TRender) {
+    if (!this.canRender) {
+      return;
+    }
+
+    renderProp({
+      ctx: this.ctx,
+      width: this.width,
+      height: this.height,
+      dpr: this.dpr,
+      clientWidth: this.clientWidth,
+      clientHeight: this.clientHeight,
+      canvas: this.canvas,
+    });
+  }
+}

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

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

@@ -0,0 +1,45 @@
+import React, { FC, useEffect, useRef } from 'react';
+import { Ctx2D, NCtx2D } from '..';
+
+export const Component: FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) {
+      return undefined;
+    }
+
+    const instance = new Ctx2D({
+      container: containerRef.current,
+      hasResize: true,
+    });
+
+    const render: NCtx2D.TRender = ({ ctx, width, height }) => {
+      ctx.beginPath();
+      ctx.fillStyle = '#ccc';
+      ctx.fillRect(0, 0, width, height);
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = '#000';
+      ctx.fillRect(10, 10, 50, 50);
+      ctx.closePath();
+    };
+
+    instance.render(render);
+    instance.addCallback('resize', () => instance.render(render));
+
+    return () => instance.destroy();
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        position: 'relative',
+        width: 300,
+        height: 300,
+      }}
+    />
+  );
+};

package/src/components/Ctx2D/types.ts

@@ -0,0 +1,75 @@
+import { NComponent } from '@/base/Component/types';
+import { TOnResizeTarget } from '@/utils/internal/onResize';
+
+export namespace NCtx2D {
+  export interface IStaticProps extends NComponent.IStaticProps {
+    /**
+     * The parent element of the canvas that will be used to calculate current canvas size.
+     * If `false`, it will be `Window`.
+     * @default false
+     */
+    container?: false | Element;
+    /**
+     * Defines if you need to append the canvas element to the parent element
+     * @default true
+     */
+    isAppend?: boolean;
+    /**
+     * Resize on init
+     * @default true
+     */
+    hasInitialResize?: boolean;
+    /**
+     * Update sizes on resize
+     * @default false
+     */
+    hasResize?: boolean;
+    /**
+     * Viewport target
+     * @default 'any'
+     */
+    viewportTarget?: TOnResizeTarget;
+    /**
+     * Timeout of resize event
+     * @default 0
+     */
+    resizeDebounce?: number;
+  }
+
+  export interface IChangeableProps extends NComponent.IChangeableProps {
+    /**
+     * The width of the canvas without dpr.
+     * If `auto`, the width will be the same as of the container.
+     * @default 'auto'
+     */
+    width?: 'auto' | number;
+    /**
+     * The height of the canvas (dpr = 1).
+     * If `auto`, the height will be the same as of the container.
+     * @default 'auto'
+     */
+    height?: 'auto' | number;
+    /**
+     * Device pixel ratio.
+     * If `auto`, the value will be calculated automatically.
+     * @default 'auto'
+     */
+    dpr?: 'auto' | number;
+  }
+
+  export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
+    resize: undefined;
+  }
+
+  export interface IRenderProps {
+    ctx: CanvasRenderingContext2D;
+    width: number;
+    height: number;
+    dpr: number;
+    clientWidth: number;
+    clientHeight: number;
+    canvas: HTMLCanvasElement;
+  }
+
+  export type TRender = (props: IRenderProps) => void;
+}

package/src/components/Ctx2DPrerender/index.ts

@@ -0,0 +1,64 @@
+import { BaseProp, getPos } from 'get-image-pos';
+import { Ctx2D, NCtx2D } from '../Ctx2D';
+import { NCtx2DPrerender } from './types';
+
+export type { NCtx2DPrerender } from './types';
+
+/**
+ * The class allows you to prerender media for further use with reduced payloads.
+ */
+export class Ctx2DPrerender<
+  StaticProps extends NCtx2DPrerender.IStaticProps = NCtx2DPrerender.IStaticProps,
+  ChangeableProps extends NCtx2DPrerender.IChangeableProps = NCtx2DPrerender.IChangeableProps,
+  CallbacksTypes extends NCtx2DPrerender.ICallbacksTypes = NCtx2DPrerender.ICallbacksTypes
+> extends Ctx2D<StaticProps, ChangeableProps, CallbacksTypes> {
+  protected _getDefaultProps() {
+    return {
+      ...super._getDefaultProps(),
+      media: false,
+      posRule: 'cover',
+    };
+  }
+
+  /** Method called on resize */
+  protected _handleResize() {
+    super._handleResize();
+
+    this.render((props) => this._prerender(props));
+  }
+
+  /** Prerender the scene */
+  protected _prerender({ width, height, ctx }: NCtx2D.IRenderProps) {
+    const { media, posRule } = this.props;
+
+    // get source info
+    let source: BaseProp['source'];
+    let sourceWidth: number | undefined;
+    let sourceHeight: number | undefined;
+    if (media instanceof Ctx2D) {
+      source = media.canvas;
+      sourceWidth = media.width;
+      sourceHeight = media.height;
+    } else {
+      source = media as any;
+    }
+
+    // get media sizes
+    const size = getPos({
+      source,
+      sourceWidth,
+      sourceHeight,
+      rule: posRule,
+      scale: 1,
+      width,
+      height,
+    });
+
+    // render media
+    ctx.clearRect(0, 0, width, height);
+    ctx.drawImage(source, size.x, size.y, size.width, size.height);
+
+    // launch callbacks on prerender
+    this.callbacks.tbt('prerender', undefined);
+  }
+}

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

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

@@ -0,0 +1,78 @@
+import React, { FC, useEffect, useRef, useState } from 'react';
+import { Ctx2DPrerender, NCtx2DPrerender } from '..';
+
+export const Component: FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [ctx2d, setCtx2d] = useState<Ctx2DPrerender>();
+  const [image, setImage] = useState<HTMLImageElement>();
+  const [position, setPosition] =
+    useState<NCtx2DPrerender.IChangeableProps['posRule']>();
+
+  useEffect(() => {
+    if (!containerRef.current || !image) {
+      return undefined;
+    }
+
+    const instance = new Ctx2DPrerender({
+      media: image,
+      container: containerRef.current,
+      hasResize: true,
+      posRule: 'cover',
+    });
+
+    setCtx2d(instance);
+
+    return () => instance.destroy();
+  }, [image]);
+
+  useEffect(() => {
+    if (!ctx2d) {
+      return;
+    }
+
+    ctx2d.changeProps({ posRule: position });
+  }, [ctx2d, position]);
+
+  return (
+    <>
+      <img
+        src="https://picsum.photos/400/600"
+        alt=""
+        onLoad={(event) => setImage(event.currentTarget)}
+      />
+
+      <br />
+      <br />
+
+      <p>Set position:</p>
+
+      {[
+        'cover',
+        'contain',
+        'top-left',
+        'top-right',
+        'bottom-left',
+        'bottom-right',
+        'center',
+      ].map((rule) => (
+        <button
+          key={rule}
+          type="button"
+          onClick={() => setPosition(rule as any)}
+        >
+          {rule}
+        </button>
+      ))}
+
+      <div
+        ref={containerRef}
+        style={{
+          position: 'relative',
+          width: 300,
+          height: 300,
+        }}
+      />
+    </>
+  );
+};

package/src/components/Ctx2DPrerender/types.ts

@@ -0,0 +1,19 @@
+import { BaseProp, PosRule } from 'get-image-pos';
+import { NCtx2D } from '../Ctx2D/types';
+import { Ctx2D } from '../Ctx2D';
+
+export namespace NCtx2DPrerender {
+  export interface IStaticProps extends NCtx2D.IStaticProps {
+    /** Media element */
+    media: Ctx2D | BaseProp['source'];
+  }
+
+  export interface IChangeableProps extends NCtx2D.IChangeableProps {
+    /** Position rule */
+    posRule?: PosRule;
+  }
+
+  export interface ICallbacksTypes extends NCtx2D.ICallbacksTypes {
+    prerender: undefined;
+  }
+}