Merge branch 'master' into matrix-cleanup

CHANGELOG.md

@@ -3,6 +3,9 @@
 ## [next]
 
 - chore(): Matrix util cleanup [#8894](https://github.com/fabricjs/fabric.js/pull/8894)
+- chore(TS): pattern cleanup + export types [#8875](https://github.com/fabricjs/fabric.js/pull/8875)
+- fix(): Disable offscreen check for bg and overlay when not needed [#8898](https://github.com/fabricjs/fabric.js/pull/8898)
+- chore(): cleanup #8888 [#8892](https://github.com/fabricjs/fabric.js/pull/8892)
 - feat(env): relative window/document, support iframe [#8897](https://github.com/fabricjs/fabric.js/pull/8897)
 - docs(): add repo repro link to `bug_report.yml` [#8900](https://github.com/fabricjs/fabric.js/pull/8900)
 - refactor(fabric.Line): Line position is calculated from the center between the 2 points now [#8877](https://github.com/fabricjs/fabric.js/pull/8877)
@@ -12,7 +15,7 @@
 
 - refactor(): SVG loading and parsing functionality are now promises or async. Callback have been removed [#8884](https://github.com/fabricjs/fabric.js/pull/8884)
 - refactor(fabric.Line): Line position is calculated from the center between the 2 points now [#8877](https://github.com/fabricjs/fabric.js/pull/8877)
-- bundle(): export `setEnv` for JEST interoperability [#8888](https://github.com/fabricjs/fabric.js/pull/8888)
+- bundle(): export `setEnv` for test interoperability [#8888](https://github.com/fabricjs/fabric.js/pull/8888)
 
 ## [6.0.0-beta4]
 

fabric.ts

@@ -15,7 +15,7 @@ export { Intersection } from './src/Intersection';
 export { Color } from './src/color/Color';
 
 export { Gradient } from './src/gradient/Gradient';
-export { Pattern } from './src/Pattern';
+export * from './src/Pattern';
 export { Shadow } from './src/Shadow';
 
 export { BaseBrush } from './src/brushes/BaseBrush';

src/Pattern.ts → src/Pattern/Pattern.ts

@@ -1,38 +1,16 @@
-import { config } from './config';
-import { 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';
-
-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 };
+import { config } from '../config';
+import { Abortable, TCrossOrigin, TMat2D } 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 {
+  PatternRepeat,
+  PatternOptions,
+  SerializedPatternOptions,
+} from './types';
 
 /**
  * @see {@link http://fabricjs.com/patterns demo}
@@ -56,10 +34,10 @@ export class Pattern {
   }
 
   /**
-   * @type TPatternRepeat
+   * @type PatternRepeat
    * @defaults
    */
-  repeat: TPatternRepeat = 'repeat';
+  repeat: PatternRepeat = 'repeat';
 
   /**
    * Pattern horizontal offset from object's left/top corner
@@ -111,15 +89,15 @@ export class Pattern {
    * @param {Object} [options] Options object
    * @param {option.source} [source] the pattern source, eventually empty or a drawable
    */
-  constructor(options: TPatternOptions = {}) {
+  constructor(options: PatternOptions = {}) {
     this.id = uid();
     Object.assign(this, options);
   }
 
   /**
    * @returns true if {@link source} is an <img> element
    */
-  isImageSource(): this is TImageSource {
+  isImageSource(): this is { source: HTMLImageElement } {
     return (
       !!this.source && typeof (this.source as HTMLImageElement).src === 'string'
     );
@@ -128,7 +106,7 @@ export class Pattern {
   /**
    * @returns true if {@link source} is a <canvas> element
    */
-  isCanvasSource(): this is TCanvasSource {
+  isCanvasSource(): this is { source: HTMLCanvasElement } {
     return !!this.source && !!(this.source as HTMLCanvasElement).toDataURL;
   }
 
@@ -211,8 +189,8 @@ export class Pattern {
   /* _TO_SVG_END_ */
 
   static async fromObject(
-    { source, ...serialized }: TPatternSerialized,
-    options: TPatternHydrationOptions
+    { source, ...serialized }: SerializedPatternOptions,
+    options: Abortable
   ): Promise<Pattern> {
     const img = await loadImage(source, {
       ...options,

src/Pattern/index.ts

@@ -0,0 +1,2 @@
+export { Pattern } from './Pattern';
+export type * from './types';

src/Pattern/types.ts

@@ -0,0 +1,17 @@
+import type { Pattern } from './Pattern';
+
+export type PatternRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
+
+type ExportedKeys =
+  | 'crossOrigin'
+  | 'offsetX'
+  | 'offsetY'
+  | 'patternTransform'
+  | 'repeat'
+  | 'source';
+
+export type PatternOptions = Partial<Pick<Pattern, ExportedKeys>>;
+
+export type SerializedPatternOptions = PatternOptions & {
+  source: string;
+};

src/canvas/StaticCanvas.ts

@@ -75,10 +75,6 @@ export type TSVGExportOptions = {
   reviver?: TSVGReviver;
 };
 
-type TCanvasHydrationOption = {
-  signal?: AbortSignal;
-};
-
 export const StaticCanvasDefaults = {
   backgroundColor: '',
   backgroundImage: null,
@@ -240,7 +236,7 @@ export class StaticCanvas<
    * If One of the corner of the bounding box of the object is on the canvas
    * the objects get rendered.
    * @type Boolean
-   * @default
+   * @default true
    */
   declare skipOffscreen: boolean;
 
@@ -869,10 +865,15 @@ export class StaticCanvas<
     }
     if (object) {
       ctx.save();
+      const { skipOffscreen } = this;
+      // if the object doesn't move with the viewport,
+      // the offscreen concept does not apply;
+      this.skipOffscreen = needsVpt;
       if (needsVpt) {
         ctx.transform(...v);
       }
       object.render(ctx);
+      this.skipOffscreen = skipOffscreen;
       ctx.restore();
     }
   }
@@ -1470,7 +1471,7 @@ export class StaticCanvas<
   loadFromJSON(
     json: string | Record<string, any>,
     reviver?: EnlivenObjectOptions['reviver'],
-    { signal }: TCanvasHydrationOption = {}
+    { signal }: Abortable = {}
   ): Promise<this> {
     if (!json) {
       return Promise.reject(new Error('fabric.js: `json` is undefined'));

src/env/index.ts

@@ -19,12 +19,12 @@ let env: TFabricEnv;
  *
  * **CAUTION**: Must be called before using the package.
  *
- * @example Testing with jest
- * // jest is commonjs (https://jestjs.io/docs/ecmascript-modules), so by default it imports the node entry point.
+ * @example
+ * <caption>Passing `window` and `document` objects to fabric (in case they are mocked or something)</caption>
  * import { getEnv, setEnv } from 'fabric';
- * // we want fabric to use the `window` and `document` objects exposed by jest.
+ * // we want fabric to use the `window` and `document` objects exposed by the environment we are running in.
  * setEnv({ ...getEnv(), window, document });
- * // done with setup, now run tests
+ * // done with setup, using fabric is now safe
  */
 export const setEnv = (value: TFabricEnv) => {
   env = value;

src/shapes/Image.ts

@@ -4,7 +4,7 @@ import type { BaseFilter } from '../filters/BaseFilter';
 import { getFilterBackend } from '../filters/FilterBackend';
 import { SHARED_ATTRIBUTES } from '../parser/attributes';
 import { parseAttributes } from '../parser/parseAttributes';
-import { TClassProperties, TSize } from '../typedefs';
+import { Abortable, TClassProperties, TSize } from '../typedefs';
 import { uid } from '../util/internals/uid';
 import { createCanvasElement } from '../util/misc/dom';
 import { findScaleToCover, findScaleToFit } from '../util/misc/findScaleTo';

src/shapes/Object/Object.ts

@@ -10,6 +10,7 @@ import type {
   TFiller,
   TSize,
   TCacheCanvasDimensions,
+  Abortable,
 } from '../../typedefs';
 import { classRegistry } from '../../ClassRegistry';
 import { runningAnimations } from '../../util/animation/AnimationRegistry';
@@ -1523,10 +1524,7 @@ export class FabricObject<
    */
   static _fromObject<S extends FabricObject>(
     object: Record<string, unknown>,
-    {
-      extraParam,
-      ...options
-    }: { extraParam?: string; signal?: AbortSignal } = {}
+    { extraParam, ...options }: Abortable & { extraParam?: string } = {}
   ): Promise<S> {
     return enlivenObjectEnlivables<any>(cloneDeep(object), options).then(
       (enlivedMap) => {
@@ -1535,7 +1533,7 @@ export class FabricObject<
         // to avoid accidental overrides later
         if (extraParam) {
           const { [extraParam]: arg0, type, ...rest } = allOptions;
-          // @ts-ignore;
+          // @ts-expect-error different signature
           return new this(arg0, rest);
         } else {
           return new this(allOptions);
@@ -1553,7 +1551,7 @@ export class FabricObject<
    */
   static fromObject<T extends TProps<SerializedObjectProps>>(
     object: T,
-    options?: { signal?: AbortSignal }
+    options?: Abortable
   ) {
     return this._fromObject(object, options);
   }

src/typedefs.ts

@@ -128,3 +128,11 @@ export type TDataUrlOptions = TToCanvasElementOptions & {
 };
 
 export type AssertKeys<T, K extends keyof T> = T & Record<K, NonNullable<T[K]>>;
+
+export type Abortable = {
+  /**
+   * handle aborting
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
+   */
+  signal?: AbortSignal;
+};

src/util/misc/objectEnlive.ts

@@ -1,16 +1,11 @@
 import { noop } from '../../constants';
-import type { Gradient } from '../../gradient/Gradient';
 import type { Pattern } from '../../Pattern';
 import type { FabricObject } from '../../shapes/Object/FabricObject';
-import type { TCrossOrigin, TFiller } from '../../typedefs';
+import type { Abortable, TCrossOrigin, TFiller } from '../../typedefs';
 import { createImage } from './dom';
 import { classRegistry } from '../../ClassRegistry';
 
-export type LoadImageOptions = {
-  /**
-   * see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
-   */
-  signal?: AbortSignal;
+export type LoadImageOptions = Abortable & {
   /**
    * cors value for the image loading, default to anonymous
    */
@@ -58,11 +53,7 @@ export const loadImage = (
     img.src = url;
   });
 
-export type EnlivenObjectOptions = {
-  /**
-   * handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
-   */
-  signal?: AbortSignal;
+export type EnlivenObjectOptions = Abortable & {
   /**
    * Method for further parsing of object elements,
    * called after each fabric object created.
@@ -71,17 +62,12 @@ export type EnlivenObjectOptions = {
     serializedObj: Record<string, any>,
     instance: FabricObject
   ) => void;
-  /**
-   * Namespace to get klass "Class" object from
-   */
-  namespace?: any;
 };
 
 /**
  * Creates corresponding fabric instances from their object representations
  * @param {Object[]} objects Objects to enliven
  * @param {EnlivenObjectOptions} [options]
- * @param {object} [options.namespace] Namespace to get klass "Class" object from
  * @param {(serializedObj: object, instance: FabricObject) => any} [options.reviver] Method for further parsing of object elements,
  * called after each fabric object created.
  * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
@@ -134,7 +120,7 @@ export const enlivenObjectEnlivables = <
   R = Record<string, FabricObject | TFiller | null>
 >(
   serializedObject: any,
-  { signal }: { signal?: AbortSignal } = {}
+  { signal }: Abortable = {}
 ) =>
   new Promise<R>((resolve, reject) => {
     const instances: (FabricObject | TFiller)[] = [];