refactor(): create Filler base class for Pattern/Gradient

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- refactor(): create Filler base class for Pattern/Gradient [#8947](https://github.com/fabricjs/fabric.js/pull/8947)
 - ci(): automate PR changelog [#8938](https://github.com/fabricjs/fabric.js/pull/8938)
 - chore(): move canvas click handler to TextManager [#8939](https://github.com/fabricjs/fabric.js/pull/8939)
 

src/Pattern/Pattern.ts

@@ -3,23 +3,22 @@ import type { Abortable, TCrossOrigin, TMat2D, TSize } from '../typedefs';
 import { ifNaN } from '../util/internals';
 import { uid } from '../util/internals/uid';
 import { loadImage } from '../util/misc/objectEnlive';
-import { pick } from '../util/misc/pick';
 import { toFixed } from '../util/misc/toFixed';
 import { classRegistry } from '../ClassRegistry';
 import type {
   PatternRepeat,
   PatternOptions,
   SerializedPatternOptions,
 } from './types';
+import { Filler } from '../fillers/Filler';
 
 /**
  * @see {@link http://fabricjs.com/patterns demo}
  * @see {@link http://fabricjs.com/dynamic-patterns demo}
  */
-export class Pattern {
+export class Pattern extends Filler<CanvasPattern> {
   /**
-   * Legacy identifier of the class. Prefer using this.constructor.name 'Pattern'
-   * or utils like isPattern
+   * Legacy identifier of the class. Prefer using this.constructor.name or `instanceof`
    * Will be removed in fabric 7 or 8.
    * @TODO add sustainable warning message
    * @type string
@@ -39,20 +38,6 @@ export class Pattern {
    */
   repeat: PatternRepeat = '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
@@ -90,6 +75,7 @@ export class Pattern {
    * @param {option.source} [source] the pattern source, eventually empty or a drawable
    */
   constructor(options: PatternOptions = {}) {
+    super();
     this.id = uid();
     Object.assign(this, options);
   }
@@ -144,10 +130,10 @@ 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: string[] = []): Record<string, any> {
+  toObject<T extends keyof this>(propertiesToInclude?: T[]) {
     const { repeat, crossOrigin } = this;
     return {
-      ...pick(this, propertiesToInclude as (keyof this)[]),
+      ...super.toObject(propertiesToInclude),
       type: 'pattern',
       source: this.sourceToString(),
       repeat,

src/canvas/StaticCanvas.ts

@@ -5,7 +5,7 @@ import type { CanvasEvents, StaticCanvasEvents } from '../EventTypeDefs';
 import type { Gradient } from '../gradient/Gradient';
 import { createCollectionMixin } from '../Collection';
 import { CommonMethods } from '../CommonMethods';
-import type { Pattern } from '../Pattern';
+import { Pattern } from '../Pattern';
 import { Point } from '../Point';
 import type { BaseFabricObject as FabricObject } from '../EventTypeDefs';
 import type { TCachedFabricObject } from '../shapes/Object/Object';
@@ -15,13 +15,13 @@ import type {
   Constructor,
   TCornerPoint,
   TDataUrlOptions,
-  TFiller,
   TMat2D,
   TSize,
   TSVGReviver,
   TToCanvasElementOptions,
   TValidToObjectMethod,
 } from '../typedefs';
+import type { TFiller } from '../fillers/typedefs';
 import {
   cancelAnimFrame,
   requestAnimFrame,
@@ -38,12 +38,8 @@ import {
 import { pick } from '../util/misc/pick';
 import { matrixToSVG } from '../util/misc/svgParsing';
 import { toFixed } from '../util/misc/toFixed';
-import {
-  isCollection,
-  isFiller,
-  isPattern,
-  isTextObject,
-} from '../util/typeAssertions';
+import { isCollection, isTextObject } from '../util/typeAssertions';
+import { isFiller } from '../fillers/Filler';
 
 export type TCanvasSizeOptions = {
   backstoreOnly?: boolean;
@@ -1405,20 +1401,27 @@ export class StaticCanvas<
         additionalTransform = shouldInvert
           ? matrixToSVG(invertTransform(this.viewportTransform))
           : '';
+      const { width = finalWidth, height = finalHeight } =
+        filler instanceof Pattern
+          ? {
+              width:
+                repeat === 'repeat-y' || repeat === 'no-repeat'
+                  ? filler.source.width
+                  : undefined,
+              height:
+                repeat === 'repeat-x' || repeat === 'no-repeat'
+                  ? filler.source.height
+                  : undefined,
+            }
+          : {};
       markup.push(
         `<rect transform="${additionalTransform} translate(${finalWidth / 2},${
           finalHeight / 2
         })" x="${filler.offsetX - finalWidth / 2}" y="${
           filler.offsetY - finalHeight / 2
-        }" width="${
-          (repeat === 'repeat-y' || repeat === 'no-repeat') && isPattern(filler)
-            ? filler.source.width
-            : finalWidth
-        }" height="${
-          (repeat === 'repeat-x' || repeat === 'no-repeat') && isPattern(filler)
-            ? filler.source.height
-            : finalHeight
-        }" fill="url(#SVGID_${filler.id})"></rect>\n`
+        }" width="${width}" height="${height}" fill="url(#SVGID_${
+          filler.id
+        })"></rect>\n`
       );
     } else {
       markup.push(

src/fillers/Filler.ts

@@ -0,0 +1,61 @@
+import { config } from '../config';
+import type { Point } from '../Point';
+import type { TSize } from '../typedefs';
+import type { TFiller } from './typedefs';
+import { pick } from '../util/misc/pick';
+import { toFixed } from '../util/misc/toFixed';
+
+export type TFillerAction = 'stroke' | 'fill';
+
+export type TFillerRenderingOptions = {
+  action: TFillerAction;
+  size: TSize;
+  offset: Point;
+  noTransform?: boolean;
+};
+
+export const isFiller = (
+  filler: TFiller | string | null
+): filler is TFiller => {
+  return !!filler && filler instanceof Filler;
+};
+
+export abstract class Filler<T extends CanvasPattern | CanvasGradient> {
+  /**
+   * horizontal offset from object's left/top corner
+   * @type Number
+   * @default
+   */
+  offsetX = 0;
+
+  /**
+   * vertical offset from object's left/top corner
+   * @type Number
+   * @default
+   */
+  offsetY = 0;
+
+  protected abstract toLive(
+    ctx: CanvasRenderingContext2D,
+    options: TFillerRenderingOptions
+  ): T | null;
+
+  protected prepare(
+    ctx: CanvasRenderingContext2D,
+    options: TFillerRenderingOptions
+  ): Point | void {
+    ctx[`${options.action}Style`] = this.toLive(ctx, options) || '';
+  }
+
+  toObject<T extends keyof this>(propertiesToInclude?: T[]) {
+    return {
+      ...pick(this, propertiesToInclude),
+      offsetX: toFixed(this.offsetX, config.NUM_FRACTION_DIGITS),
+      offsetY: toFixed(this.offsetY, config.NUM_FRACTION_DIGITS),
+    };
+  }
+
+  toJSON() {
+    return this.toObject();
+  }
+}

src/fillers/typedefs.ts

@@ -0,0 +1,4 @@
+import type { Gradient } from '../gradient/Gradient';
+import type { Pattern } from '../Pattern';
+
+export type TFiller = Gradient<'linear'> | Gradient<'radial'> | Pattern;

src/gradient/Gradient.ts

@@ -6,7 +6,6 @@ import type { FabricObject } from '../shapes/Object/FabricObject';
 import { FabricObject as BaseFabricObject } from '../shapes/Object/Object';
 import type { TMat2D } from '../typedefs';
 import { uid } from '../util/internals/uid';
-import { pick } from '../util/misc/pick';
 import { matrixToSVG } from '../util/misc/svgParsing';
 import { linearDefaultCoords, radialDefaultCoords } from './constants';
 import {
@@ -24,6 +23,7 @@ import type {
   SVGOptions,
 } from './typedefs';
 import { classRegistry } from '../ClassRegistry';
+import { Filler } from '../fillers/Filler';
 
 /**
  * Gradient class
@@ -33,21 +33,7 @@ import { classRegistry } from '../ClassRegistry';
 export class Gradient<
   S,
   T extends GradientType = S extends GradientType ? S : 'linear'
-> {
-  /**
-   * Horizontal offset for aligning gradients coming from SVG when outside pathgroups
-   * @type Number
-   * @default 0
-   */
-  declare offsetX: number;
-
-  /**
-   * Vertical offset for aligning gradients coming from SVG when outside pathgroups
-   * @type Number
-   * @default 0
-   */
-  declare offsetY: number;
-
+> extends Filler<CanvasGradient> {
   /**
    * A transform matrix to apply to the gradient before painting.
    * Imported from svg gradients, is not applied with the current transform in the center.
@@ -111,6 +97,7 @@ export class Gradient<
     gradientTransform = null,
     id,
   }: GradientOptions<T>) {
+    super();
     this.id = id ? `${id}_${uid()}` : uid();
     this.type = type;
     this.gradientUnits = gradientUnits;
@@ -150,9 +137,9 @@ export class Gradient<
    * @param {string[]} [propertiesToInclude] Any properties that you might want to additionally include in the output
    * @return {object}
    */
-  toObject(propertiesToInclude?: (keyof this | string)[]) {
+  toObject<T extends keyof this>(propertiesToInclude?: T[]) {
     return {
-      ...pick(this, propertiesToInclude),
+      ...super.toObject(propertiesToInclude),
       type: this.type,
       coords: this.coords,
       colorStops: this.colorStops,

src/shapes/IText/IText.ts

@@ -7,7 +7,8 @@ import {
   keysMap,
   keysMapRtl,
 } from './constants';
-import type { AssertKeys, TFiller } from '../../typedefs';
+import type { AssertKeys } from '../../typedefs';
+import type { TFiller } from '../../fillers/typedefs';
 import { classRegistry } from '../../ClassRegistry';
 import type { SerializedTextProps, TextProps } from '../Text/Text';
 

src/shapes/Line.ts

@@ -4,7 +4,7 @@ import type { TClassProperties } from '../typedefs';
 import { classRegistry } from '../ClassRegistry';
 import { FabricObject, cacheProperties } from './Object/FabricObject';
 import { Point } from '../Point';
-import { isFiller } from '../util/typeAssertions';
+import { isFiller } from '../fillers/Filler';
 import type {
   FabricObjectProps,
   SerializedObjectProps,

src/shapes/Object/Object.ts

@@ -7,11 +7,11 @@ import { Point } from '../../Point';
 import { Shadow } from '../../Shadow';
 import type {
   TDegree,
-  TFiller,
   TSize,
   TCacheCanvasDimensions,
   Abortable,
 } from '../../typedefs';
+import type { TFiller } from '../../fillers/typedefs';
 import { classRegistry } from '../../ClassRegistry';
 import { runningAnimations } from '../../util/animation/AnimationRegistry';
 import { cloneDeep } from '../../util/internals/cloneDeep';
@@ -28,11 +28,8 @@ import { pick, pickBy } from '../../util/misc/pick';
 import { toFixed } from '../../util/misc/toFixed';
 import type { Group } from '../Group';
 import { StaticCanvas } from '../../canvas/StaticCanvas';
-import {
-  isFiller,
-  isSerializableFiller,
-  isTextObject,
-} from '../../util/typeAssertions';
+import { isTextObject } from '../../util/typeAssertions';
+import { isFiller } from '../../fillers/Filler';
 import type { Image } from '../Image';
 import {
   cacheProperties,
@@ -516,12 +513,8 @@ export class FabricObject<
         top: toFixed(this.top, NUM_FRACTION_DIGITS),
         width: toFixed(this.width, NUM_FRACTION_DIGITS),
         height: toFixed(this.height, NUM_FRACTION_DIGITS),
-        fill: isSerializableFiller(this.fill)
-          ? this.fill.toObject()
-          : this.fill,
-        stroke: isSerializableFiller(this.stroke)
-          ? this.stroke.toObject()
-          : this.stroke,
+        fill: isFiller(this.fill) ? this.fill.toObject() : this.fill,
+        stroke: isFiller(this.stroke) ? this.stroke.toObject() : this.stroke,
         strokeWidth: toFixed(this.strokeWidth, NUM_FRACTION_DIGITS),
         strokeDashArray: this.strokeDashArray
           ? this.strokeDashArray.concat()

src/shapes/Object/types/FillStrokeProps.ts

@@ -1,4 +1,4 @@
-import type { TFiller } from '../../../typedefs';
+import type { TFiller } from '../../../fillers/typedefs';
 
 export interface FillStrokeProps {
   /**

src/shapes/Object/types/ObjectProps.ts

@@ -1,7 +1,7 @@
 import type { Shadow } from '../../../Shadow';
 import type { Canvas } from '../../../canvas/Canvas';
 import type { StaticCanvas } from '../../../canvas/StaticCanvas';
-import type { TFiller } from '../../../typedefs';
+import type { TFiller } from '../../../fillers/typedefs';
 import type { FabricObject } from '../Object';
 import type {
   ClipPathProps,

src/shapes/Text/Text.ts

@@ -7,11 +7,8 @@ import { StyledText } from './StyledText';
 import { SHARED_ATTRIBUTES } from '../../parser/attributes';
 import { parseAttributes } from '../../parser/parseAttributes';
 import type { Point } from '../../Point';
-import type {
-  TCacheCanvasDimensions,
-  TClassProperties,
-  TFiller,
-} from '../../typedefs';
+import type { TCacheCanvasDimensions, TClassProperties } from '../../typedefs';
+import type { TFiller } from '../../fillers/typedefs';
 import { classRegistry } from '../../ClassRegistry';
 import { graphemeSplit } from '../../util/lang_string';
 import { createCanvasElement } from '../../util/misc/dom';

src/typedefs.ts

@@ -1,7 +1,5 @@
 // https://www.typescriptlang.org/docs/handbook/utility-types.html
 import type { BaseFabricObject } from './EventTypeDefs';
-import type { Gradient } from './gradient/Gradient';
-import type { Pattern } from './Pattern';
 import type { XY, Point } from './Point';
 
 interface NominalTag<T> {
@@ -29,8 +27,6 @@ export type TAxis = 'x' | 'y';
 
 export type TAxisKey<T extends string> = `${T}${Capitalize<TAxis>}`;
 
-export type TFiller = Gradient<'linear'> | Gradient<'radial'> | Pattern;
-
 export type TSize = {
   width: number;
   height: number;

src/util/misc/objectEnlive.ts

@@ -1,7 +1,8 @@
 import { noop } from '../../constants';
 import type { Pattern } from '../../Pattern';
 import type { FabricObject } from '../../shapes/Object/FabricObject';
-import type { Abortable, TCrossOrigin, TFiller } from '../../typedefs';
+import type { Abortable, TCrossOrigin } from '../../typedefs';
+import type { TFiller } from '../../fillers/typedefs';
 import { createImage } from './dom';
 import { classRegistry } from '../../ClassRegistry';