chore(TS): Remove ts-nocheck from pattern and add types (#8605)

fabricjs · Jan 18, 2023 · 665679f · 665679f
1 parent a3631b6
commit 665679f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## [next]
 
+- chore(TS): Update Pattern to remove ts-nocheck and added types where missing [#8605](https://github.com/fabricjs/fabric.js/pull/8605)
 - chore(TS): Followup for interactivy and controls migration to TS [#8404](https://github.com/fabricjs/fabric.js/pull/8404)
 - refactor(IText): Fixes Draggable Text for retina and viewport transform #8534
 - chore(TS): refactor canvas init, fix `_initRetinaScaling` regression #8520

diff --git a/src/pattern.class.ts b/src/pattern.class.ts
@@ -1,4 +1,3 @@
-//@ts-nocheck
 import { config } from './config';
 import { TCrossOrigin, TMat2D, TSize } from './typedefs';
 import { ifNaN } from './util/internals';
@@ -70,6 +69,7 @@ export class Pattern {
 
   /**
    * transform matrix to change the pattern, imported from svgs.
+   * @todo verify if using the identity matrix as default makes the rest of the code more easy
    * @type Array
    * @default
    */
@@ -78,7 +78,7 @@ export class Pattern {
   /**
    * The actual pixel source of the pattern
    */
-  declare source!: CanvasImageSource;
+  declare source: CanvasImageSource;
 
   /**
    * If true, this object will not be exported during the serialization of a canvas
@@ -95,30 +95,26 @@ export class Pattern {
    */
   constructor(options: TPatternOptions = {}) {
     this.id = uid();
-    this.setOptions(options);
-  }
-
-  setOptions<K extends TExportedKeys>(options: Record<K, this[K]>) {
-    for (const prop in options) {
-      this[prop] = options[prop];
-    }
+    Object.assign(this, options);
   }
 
   /**
    * @returns true if {@link source} is an <img> element
    */
   isImageSource(): this is TImageSource {
-    return typeof this.source.src === 'string';
+    return (
+      !!this.source && typeof (this.source as HTMLImageElement).src === 'string'
+    );
   }
 
   /**
    * @returns true if {@link source} is a <canvas> element
    */
   isCanvasSource(): this is TCanvasSource {
-    return typeof this.source === 'object' && this.source.toDataURL;
+    return !!this.source && !!(this.source as HTMLCanvasElement).toDataURL;
   }
 
-  sourceToString() {
+  sourceToString(): string {
     return this.isImageSource()
       ? this.source.src
       : this.isCanvasSource()
@@ -131,7 +127,7 @@ export class Pattern {
    * @param {CanvasRenderingContext2D} ctx Context to create pattern
    * @return {CanvasPattern}
    */
-  toLive(ctx: CanvasRenderingContext2D): CanvasPattern | string {
+  toLive(ctx: CanvasRenderingContext2D): CanvasPattern | null {
     if (
       // if the image failed to load, return, and allow rest to continue loading
       !this.source ||
@@ -141,7 +137,7 @@ export class Pattern {
           this.source.naturalWidth === 0 ||
           this.source.naturalHeight === 0))
     ) {
-      return '';
+      return null;
     }
 
     return ctx.createPattern(this.source, this.repeat);
@@ -152,17 +148,18 @@ export class 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 | string)[]) {
+  toObject(propertiesToInclude: string[] = []): Record<string, any> {
+    const { repeat, crossOrigin } = this;
     return {
-      ...pick(this, propertiesToInclude),
+      ...pick(this, propertiesToInclude as (keyof this)[]),
       type: 'pattern',
       source: this.sourceToString(),
-      repeat: this.repeat,
-      crossOrigin: this.crossOrigin,
+      repeat,
+      crossOrigin,
       offsetX: toFixed(this.offsetX, config.NUM_FRACTION_DIGITS),
       offsetY: toFixed(this.offsetY, config.NUM_FRACTION_DIGITS),
       patternTransform: this.patternTransform
-        ? this.patternTransform.concat()
+        ? [...this.patternTransform]
         : null,
     };
   }
@@ -171,21 +168,21 @@ export class Pattern {
   /**
    * Returns SVG representation of a pattern
    */
-  toSVG({ width, height }: TSize) {
-    const patternSource = this.source,
+  toSVG({ width, height }: TSize): string {
+    const { source: patternSource, repeat, id } = this,
       patternOffsetX = ifNaN(this.offsetX / width, 0),
       patternOffsetY = ifNaN(this.offsetY / height, 0),
       patternWidth =
-        this.repeat === 'repeat-y' || this.repeat === 'no-repeat'
+        repeat === 'repeat-y' || repeat === 'no-repeat'
           ? 1 + Math.abs(patternOffsetX || 0)
-          : ifNaN(patternSource.width / width, 0),
+          : ifNaN((patternSource.width as number) / width, 0),
       patternHeight =
-        this.repeat === 'repeat-x' || this.repeat === 'no-repeat'
+        repeat === 'repeat-x' || repeat === 'no-repeat'
           ? 1 + Math.abs(patternOffsetY || 0)
-          : ifNaN(patternSource.height / height, 0);
+          : ifNaN((patternSource.height as number) / height, 0);
 
     return [
-      `<pattern id="SVGID_${this.id}" x="${patternOffsetX}" y="${patternOffsetY}" width="${patternWidth}" height="${patternHeight}">`,
+      `<pattern id="SVGID_${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>`,
@@ -198,7 +195,7 @@ export class Pattern {
   static async fromObject(
     { source, ...serialized }: TPatternSerialized,
     options: TPatternHydrationOptions
-  ) {
+  ): Promise<Pattern> {
     const img = await loadImage(source, {
       ...options,
       crossOrigin: serialized.crossOrigin,