refactor(): rm fabric.filterBackend => getFilterBackend (#8487)

fabricjs · Mar 16, 2024 · bda22bb · bda22bb
1 parent 9b2e439
commit bda22bb
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
   - `path:created`, `before:path:created` events are deprecated, use `interaction:completed` instead
   - `_render` method is now protected, use `render` instead
 - feat(): DrawShape, DrawOval, DrawPoly [#8430](https://github.com/fabricjs/fabric.js/pull/8430)
+- chore(): rm `fabric.filterBackend` => `getFilterBackend` [#8487](https://github.com/fabricjs/fabric.js/pull/8487)
 - chore(TS): migrate text SVG export mixin [#8486](https://github.com/fabricjs/fabric.js/pull/8486)
 - refactor(TS): `animate` and `AnimationRegistry` to classes [#8297](https://github.com/fabricjs/fabric.js/pull/8297)
   BREAKING:

diff --git a/src/filters/FilterBackend.ts b/src/filters/FilterBackend.ts
@@ -6,6 +6,8 @@ import { webGLProbe } from './WebGLProbe';
 
 export type FilterBackend = WebGLFilterBackend | Canvas2dFilterBackend;
 
+let filterBackend: FilterBackend;
+
 export function initFilterBackend(): FilterBackend {
   webGLProbe.queryWebGL();
   if (config.enableGLFiltering && webGLProbe.isSupported(config.textureSize)) {
@@ -16,15 +18,18 @@ export function initFilterBackend(): FilterBackend {
 }
 
 /**
- * @todo refactor to a module w/o assigning to fabric
+ *
+ * @param [strict] pass `true` to create the backend if it wasn't created yet (default behavior),
+ * pass `false` to get the backend ref without mutating it
  */
-export function getFilterBackend(): FilterBackend {
-  if (!fabric.filterBackend) {
-    fabric.filterBackend = initFilterBackend();
+export function getFilterBackend(strict = true): FilterBackend {
+  if (!filterBackend && strict) {
+    filterBackend = initFilterBackend();
   }
-  return fabric.filterBackend;
+  return filterBackend;
 }
 
+fabric.getFilterBackend = getFilterBackend;
 fabric.Canvas2dFilterBackend = Canvas2dFilterBackend;
 fabric.WebglFilterBackend = WebGLFilterBackend;
 fabric.initFilterBackend = initFilterBackend;
diff --git a/src/shapes/image.class.ts b/src/shapes/image.class.ts
@@ -182,7 +182,7 @@ export class Image extends FabricObject {
    * Delete a single texture if in webgl mode
    */
   removeTexture(key: string) {
-    const backend = fabric.filterBackend;
+    const backend = getFilterBackend(false);
     if (backend && backend.evictCachesForKey) {
       backend.evictCachesForKey(key);
     }

diff --git a/test/unit/image.js b/test/unit/image.js
@@ -377,23 +377,33 @@
     });
   });
 
-  QUnit.test('setElement resets the webgl cache', function(assert) {
-    var done = assert.async();
-    var fabricBackend = fabric.filterBackend;
-    createImageObject(function(image) {
-      fabric.filterBackend = {
-        textureCache: {},
-        evictCachesForKey: function(key) {
-          delete this.textureCache[key];
-        }
-      };
-      var elImage = _createImageElement();
-      fabric.filterBackend.textureCache[image.cacheKey] = 'something';
-      image.setElement(elImage);
-      assert.equal(fabric.filterBackend.textureCache[image.cacheKey], undefined);
-      fabric.filterBackend = fabricBackend;
-      done();
-    });
+  QUnit.test('setElement calls `removeTexture`', function (assert) {
+    const done = assert.async();
+    const keys = [];
+    createImageObject((image) => {
+      image.cacheKey = 'TEST';
+      // use sinon replace or something one day
+      image.removeTexture = (key) => keys.push(key);
+      image.setElement(_createImageElement());
+      assert.deepEqual(keys, ['TEST', 'TEST_filtered'], 'should try to remove caches');
+      done();
+    });
+  });
+
+  QUnit.test('setElement resets the webgl cache', function (assert) {
+    const backend = fabric.getFilterBackend();
+    if (backend instanceof fabric.WebglFilterBackend) {
+      const done = assert.async();
+      createImageObject((image) => {
+        backend.textureCache[image.cacheKey] = backend.createTexture(backend.gl, 50, 50);
+        assert.ok(backend.textureCache[image.cacheKey]);
+        image.setElement(_createImageElement());
+        assert.equal(backend.textureCache[image.cacheKey], undefined);
+        done();
+      });
+    } else {
+      assert.expect(0);
+    }
   });
 
   QUnit.test('crossOrigin', function(assert) {