pattern.class.ts

//@ts-nocheck

import { fabric } from "../HEADER";
import { config } from "./config";
import { TCrossOrigin, TMat2D, TSize } from "./typedefs";
import { ifNaN } from "./util/internals";
import { loadImage } from "./util/misc/objectEnlive";
import { pick } from "./util/misc/pick";
import { toFixed } from "./util/misc/toFixed";

export type TPatternRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';

type TExportedKeys = 'crossOrigin' | 'offsetX' | 'offsetY' | 'patternTransform' | 'repeat' | 'source';

export type TPatternOptions = Partial<Pick<Pattern, TExportedKeys>>;

export type TPatternSerialized = TPatternOptions & {
  source: string;
};

export type TPatternHydrationOptions = {
  /**
   * handle aborting
   * @see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
   */
  signal: AbortSignal
}

type TImageSource = { source: HTMLImageElement };
type TCanvasSource = { source: HTMLCanvasElement };

/**
 * @see {@link http://fabricjs.com/patterns demo}
 * @see {@link http://fabricjs.com/dynamic-patterns demo}
 */
export class Pattern {

  type = 'pattern'

  /**
   * @type TPatternRepeat
   * @defaults
   */
  repeat: TPatternRepeat = 'repeat'

  /**
   * Pattern horizontal offset from object's left/top corner
   * @type Number
   * @default
   */
  offsetX = 0

  /**
   * Pattern vertical offset from object's left/top corner
   * @type Number
   * @default
   */
  offsetY = 0

  /**
   * @type TCrossOrigin
   * @default
   */
  crossOrigin: TCrossOrigin = ''

  /**
   * transform matrix to change the pattern, imported from svgs.
   * @type Array
   * @default
   */
  patternTransform: TMat2D | null = null

  source!: CanvasImageSource

  readonly id: number;

  /**
   * Constructor
   * @param {Object} [options] Options object
   * @param {option.source} [source] the pattern source, eventually empty or a drawable
   * @return {fabric.Pattern} thisArg
   */
  constructor(options: TPatternOptions = {}) {
    this.id = fabric.Object.__uid++;
    this.setOptions(options);
  }

  setOptions<K extends TExportedKeys>(options: Record<K, this[K]>) {
    for (const prop in options) {
      this[prop] = options[prop];
    }
  }

  /**
   * @returns true if {@link source} is an <img> element
   */
  isImageSource(): this is TImageSource {
    return typeof this.source.src === 'string';
  }

  /**
   * @returns true if {@link source} is a <canvas> element
   */
  isCanvasSource(): this is TCanvasSource {
    return typeof this.source === 'object' && this.source.toDataURL;
  }

  sourceToString() {
    return this.isImageSource() ?
      this.source.src :
      this.isCanvasSource() ?
        this.source.toDataURL() :
        '';
  }


  /**
   * Returns an instance of CanvasPattern
   * @param {CanvasRenderingContext2D} ctx Context to create pattern
   * @return {CanvasPattern}
   */
  toLive(ctx: CanvasRenderingContext2D) {
    if (
      // if the image failed to load, return, and allow rest to continue loading
      !this.source
      // if an image
      || (this.isImageSource()
        && (!this.source.complete || this.source.naturalWidth === 0 || this.source.naturalHeight === 0))
    ) {
      return '';
    }

    return ctx.createPattern(this.source, this.repeat);
  }

  /**
   * Returns object representation of a pattern
   * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
   * @return {object} Object representation of a pattern instance
   */
  toObject(propertiesToInclude: (keyof this)[]) {
    return {
      ...pick(this, propertiesToInclude),
      type: 'pattern',
      source: this.sourceToString(),
      repeat: this.repeat,
      crossOrigin: this.crossOrigin,
      offsetX: toFixed(this.offsetX, config.NUM_FRACTION_DIGITS),
      offsetY: toFixed(this.offsetY, config.NUM_FRACTION_DIGITS),
      patternTransform: this.patternTransform ? this.patternTransform.concat() : null
    };
  }

  /* _TO_SVG_START_ */
  /**
   * Returns SVG representation of a pattern
   */
  toSVG({ width, height }: TSize) {
    const patternSource = this.source,
      patternOffsetX = ifNaN(this.offsetX / width, 0),
      patternOffsetY = ifNaN(this.offsetY / height, 0),
      patternWidth = this.repeat === 'repeat-y' || this.repeat === 'no-repeat' ?
        1 + Math.abs(patternOffsetX || 0) :
        ifNaN(patternSource.width / width, 0),
      patternHeight = this.repeat === 'repeat-x' || this.repeat === 'no-repeat' ?
        1 + Math.abs(patternOffsetY || 0) :
        ifNaN(patternSource.height / height, 0);

    return [
      `<pattern id="SVGID_${this.id}" x="${patternOffsetX}" y="${patternOffsetY}" width="${patternWidth}" height="${patternHeight}">`,
      `<image x="0" y="0" width="${patternSource.width}" height="${patternSource.height}" xlink:href="${this.sourceToString()}"></image>`,
      `</pattern>`,
      ''
    ].join('\n');
  }
  /* _TO_SVG_END_ */

  static async fromObject({ source, ...serialized }: TPatternSerialized, options: TPatternHydrationOptions) {
    const img = await loadImage(source, {
      ...options,
      crossOrigin: serialized.crossOrigin
    })
    return new Pattern({ ...serialized, source: img });
  }
}


fabric.Pattern = Pattern;