chore(): rm fabric.filterBackend => getFilterBackend

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- chore(): rm `fabric.filterBackend` => `getFilterBackend` [#8487](https://github.com/fabricjs/fabric.js/pull/8487)
 - chore(): refactor `Object.__uid++` => `uid()` [#8482](https://github.com/fabricjs/fabric.js/pull/8482)
 - chore(TS): migrate object mixins to TS [#8414](https://github.com/fabricjs/fabric.js/pull/8414)
 - chore(TS): migrate filters [#8474](https://github.com/fabricjs/fabric.js/pull/8474)

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;

src/shapes/image.class.ts

@@ -181,7 +181,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);
     }

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) {