BREAKING: refactor object rendering

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- refactor(): svg export logic to use `calcOwnMatrix` as a prerequisite for a fix to `calcTransformMatrix` based on [#8298](https://github.com/fabricjs/fabric.js/pull/8298), [#8305](https://github.com/fabricjs/fabric.js/pull/8305)
 - ci(build): safeguard concurrent unlocking [#8309](https://github.com/fabricjs/fabric.js/pull/8309)
 - ci(): update stale bot [#8307](https://github.com/fabricjs/fabric.js/pull/8307)
 - ci(test): await golden generation in visual tests [#8284](https://github.com/fabricjs/fabric.js/pull/8284)

src/RenderingContext.ts

@@ -0,0 +1,168 @@
+import { iMatrix } from './constants';
+import { multiplyTransformMatrices } from './util/misc/matrix';
+import { Canvas, TObject } from './__types__';
+
+export type TRenderingListing = {
+  target: TObject;
+  /**
+   * object/canvas being clipped by the target
+   */
+  clipping?: TObject | Canvas;
+  /**
+   * target is being cached
+   */
+  caching?: boolean;
+};
+
+type TRenderingAction =
+  | 'requested'
+  | 'canvas-export'
+  | 'object-export'
+  | 'hit-test';
+
+type TRenderingOptions = {
+  /**
+   * setting this flag to `false` disables offscreen validation, all objects will be rendered.
+   */
+  offscreenValidation?: boolean;
+
+  action?: TRenderingAction;
+};
+
+export class RenderingContext implements TRenderingOptions {
+  offscreenValidation = true;
+  action?: TRenderingAction;
+
+  tree: TRenderingListing[] = [];
+
+  static init(listing?: TRenderingListing, options?: TRenderingOptions) {
+    const context = new RenderingContext(options);
+    listing && context.push(listing);
+    return context;
+  }
+
+  constructor({ action, offscreenValidation = true }: TRenderingOptions = {}) {
+    this.action = action;
+    this.offscreenValidation = offscreenValidation;
+  }
+
+  push(listing: TRenderingListing) {
+    this.tree.push(Object.freeze({ ...listing }));
+  }
+
+  update(target: TObject, listing: Omit<TRenderingListing, 'target'>) {
+    const index = this.findIndex(target);
+    index > -1 &&
+      this.tree.splice(
+        index,
+        1,
+        Object.freeze({
+          ...this.tree[index],
+          ...listing,
+          target,
+        })
+      );
+  }
+
+  validateAtBottomOfTree(target: TObject) {
+    const index = this.findIndex(target);
+    if (index === -1) {
+      this.push({ target });
+    } else if (index !== this.tree.length - 1) {
+      throw new Error('fabric: rendering tree has been violated');
+    }
+    return this.tree[this.tree.length - 1];
+  }
+
+  findIndex(target: TObject) {
+    for (let index = this.tree.length - 1; index >= 0; index--) {
+      if (this.tree[index].target === target) {
+        return index;
+      }
+    }
+    return -1;
+  }
+
+  find(target: TObject): TRenderingListing | undefined {
+    return this.tree[this.findIndex(target)];
+  }
+
+  private slice(from?: TObject, to?: TObject, inclusive = false) {
+    const start = from ? this.findIndex(from) : -1;
+    const end = to ? this.findIndex(to) : -1;
+    return this.tree
+      .slice(
+        start > -1 ? start : undefined,
+        end > -1 ? end + Number(inclusive) : undefined
+      )
+      .reverse();
+  }
+
+  private getTreeUpTo(target?: TObject) {
+    return this.slice(undefined, target, true);
+  }
+
+  private getAncestors(target?: TObject) {
+    return this.slice(undefined, target, false);
+  }
+
+  shouldPerformOffscreenValidation(target: TObject) {
+    return (
+      this.offscreenValidation &&
+      this.action !== 'hit-test' &&
+      this.action !== 'object-export' &&
+      !this.getTreeUpTo(target).some(
+        ({ caching, clipping }) => !!caching || !!clipping
+      )
+    );
+  }
+
+  shouldFireRenderingEvent() {
+    return this.action === 'requested' || !this.action;
+  }
+
+  isNested(target: TObject) {
+    return !!target.group && this.findIndex(target) > 0;
+  }
+
+  isClipping(target: TObject) {
+    return !!this.find(target)?.clipping;
+  }
+
+  isOnClipPath(target: TObject) {
+    return this.getAncestors(target).some(({ clipping }) => clipping);
+  }
+
+  isCaching(target: TObject) {
+    return !!this.find(target)?.caching;
+  }
+
+  isOnCache(target: TObject) {
+    return this.getAncestors(target).some(({ caching }) => caching);
+  }
+
+  /**
+   *
+   * @param target
+   * @returns the transform from the viewer to `target`
+   */
+  calcTransformMatrix(target: TObject) {
+    return this.getTreeUpTo(target)
+      .reverse()
+      .reduce(
+        (mat, { target }) =>
+          multiplyTransformMatrices(target.calcOwnMatrix(), mat),
+        iMatrix
+      );
+  }
+
+  fork(listing?: TRenderingListing) {
+    const context = new RenderingContext({
+      action: this.action,
+      offscreenValidation: this.offscreenValidation,
+    });
+    context.tree = [...this.tree];
+    listing && context.push(listing);
+    return context;
+  }
+}

src/canvas.class.ts

@@ -1,5 +1,6 @@
 //@ts-nocheck
 import { Point } from './point.class';
+import { RenderingContext } from './RenderingContext';
 
 (function (global) {
   var fabric = global.fabric,
@@ -514,7 +515,7 @@ import { Point } from './point.class';
        * @return {fabric.Canvas} instance
        * @chainable
        */
-      renderAll: function () {
+      renderAll: function (isRequested = false) {
         this.cancelRequestedRender();
         if (this.destroyed) {
           return;
@@ -533,7 +534,13 @@ import { Point } from './point.class';
         }
         !this._objectsToRender &&
           (this._objectsToRender = this._chooseObjectsToRender());
-        this.renderCanvas(this.contextContainer, this._objectsToRender);
+        this.renderCanvas(
+          this.contextContainer,
+          this._objectsToRender,
+          new RenderingContext({
+            action: isRequested ? 'requested' : undefined,
+          })
+        );
         return this;
       },
 
@@ -587,6 +594,7 @@ import { Point } from './point.class';
         // because we need to draw controls too.
         if (
           target.shouldCache() &&
+          !target.isNotVisible() &&
           target._cacheCanvas &&
           target !== this._activeObject
         ) {
@@ -623,7 +631,7 @@ import { Point } from './point.class';
 
         ctx.save();
         ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
-        target.render(ctx);
+        target.render(ctx, new RenderingContext({ action: 'hit-test' }));
         ctx.restore();
 
         target.selectionBackgroundColor = originalColor;

src/mixins/canvas_dataurl_exporter.mixin.ts

@@ -1,4 +1,7 @@
 //@ts-nocheck
+
+import { RenderingContext } from '../RenderingContext';
+
 (function (global) {
   var fabric = global.fabric;
   fabric.util.object.extend(
@@ -66,7 +69,9 @@
        * @param {Number} [options.top] Cropping top offset.
        * @param {Number} [options.width] Cropping width.
        * @param {Number} [options.height] Cropping height.
+       * @param {fabric.Object[]} [options.objects] Objects to render, overrides the `filter` option.
        * @param {(object: fabric.Object) => boolean} [options.filter] Function to filter objects.
+       * @param {boolean} [options.objectExport] flag indicating exporting an object.
        */
       toCanvasElement: function (multiplier, options) {
         multiplier = multiplier || 1;
@@ -85,9 +90,11 @@
           originalRetina = this.enableRetinaScaling,
           canvasEl = fabric.util.createCanvasElement(),
           originalContextTop = this.contextTop,
-          objectsToRender = options.filter
-            ? this._objects.filter(options.filter)
-            : this._objects;
+          objectsToRender =
+            options.objects ||
+            (options.filter
+              ? this._objects.filter(options.filter)
+              : this._objects);
         canvasEl.width = scaledWidth;
         canvasEl.height = scaledHeight;
         this.contextTop = null;
@@ -97,7 +104,13 @@
         this.width = scaledWidth;
         this.height = scaledHeight;
         this.calcViewportBoundaries();
-        this.renderCanvas(canvasEl.getContext('2d'), objectsToRender);
+        this.renderCanvas(
+          canvasEl.getContext('2d'),
+          objectsToRender,
+          new RenderingContext({
+            action: options.objectExport ? 'object-export' : 'canvas-export',
+          })
+        );
         this.viewportTransform = vp;
         this.width = originalWidth;
         this.height = originalHeight;

src/mixins/canvas_events.mixin.ts

@@ -902,7 +902,8 @@ import { fireEvent } from '../util/fireEvent';
       _onMouseDownInDrawingMode: function (e) {
         this._isCurrentlyDrawing = true;
         if (this.getActiveObject()) {
-          this.discardActiveObject(e).requestRenderAll();
+          this.discardActiveObject(e);
+          this.requestRenderAll();
         }
         var pointer = this.getPointer(e);
         this.freeDrawingBrush.onMouseDown(pointer, { e: e, pointer: pointer });