refactor: filters

packages/graphics/package.json

@@ -29,8 +29,10 @@
     "@pixi/constants": "^5.3.6",
     "@pixi/core": "^5.3.6",
     "@pixi/display": "^5.3.6",
+    "@pixi/filter-adjustment": "^3.1.1",
     "@pixi/filter-advanced-bloom": "^3.2.0",
     "@pixi/filter-color-matrix": "^5.3.6",
+    "@pixi/filter-glow": "^3.2.0",
     "@pixi/graphics": "^5.3.6",
     "@pixi/settings": "^5.3.6",
     "@pixi/sprite": "^5.3.6",

packages/graphics/src/container.js

@@ -1,10 +1,14 @@
-// import {AdvancedBloomFilter} from '@pixi/filter-advanced-bloom';
+import {AdvancedBloomFilter} from '@pixi/filter-advanced-bloom';
+import {AdjustmentFilter} from '@pixi/filter-adjustment';
+import {GlowFilter} from '@pixi/filter-glow';
 // import {ColorMatrixFilter} from '@pixi/filter-color-matrix';
 
 import Renderable from './renderable';
 
 export default class Container extends Renderable {
 
+  #filterMap = {};
+
   constructor() {
     super();
     this._children = [];
@@ -36,6 +40,53 @@ export default class Container extends Renderable {
     this.container.addChild(child.internal);
   }
 
+  addFilter(id, type, options = {}) {
+    if (this.container.isFake) {
+      return;
+    }
+    this.removeFilter(id, type);
+    let filter;
+    switch (type) {
+      case 'adjustment':
+        filter = new AdjustmentFilter({
+          gamma: 1,
+          saturation: 1,
+          contrast: 1,
+          brightness: 1,
+          red: 1,
+          green: 1,
+          blue: 1,
+          alpha: 1,
+          ...options,
+        });
+        break;
+      case 'bloom':
+        filter = new AdvancedBloomFilter({
+          threshold: 0.5,
+          bloomScale: 0.8,
+          brightness: 0.7,
+          blur: 2,
+          quality: 6,
+          ...options,
+        });
+        break;
+      case 'glow':
+        filter = new GlowFilter(options);
+        break;
+      default:
+    }
+    if (filter) {
+      if (!this.#filterMap[id]) {
+        this.#filterMap[id] = {};
+      }
+      this.#filterMap[id][type] = filter;
+      if (!this.container.filters) {
+        this.container.filters = [];
+      }
+      this.container.filters.push(filter);
+    }
+  }
+
   get children() {
     return this._children;
   }
@@ -94,9 +145,11 @@ export default class Container extends Renderable {
   // }
 
   removeAllFilters() {
-    if (!this.container.isFake) {
-      this.container.filters = [];
+    if (this.container.isFake) {
+      return;
     }
+    this.container.filters = [];
+    this.#filterMap = {};
   }
 
   _removeChild(child) {
@@ -122,6 +175,20 @@ export default class Container extends Renderable {
     this._childrenIndexes = new Map();
   }
 
+  removeFilter(id, type) {
+    if (this.container.isFake) {
+      return;
+    }
+    if (this.#filterMap[id]?.[type]) {
+      const {filters} = this.container;
+      const index = filters.indexOf(this.#filterMap[id][type]);
+      if (-1 !== index) {
+        filters.splice(index, 1);
+      }
+      delete this.#filterMap[id][type];
+    }
+  }
+
   renderTick(elapsed) {
     for (let i = 0; i < this._children.length; i++) {
       const child = this._children[i];
@@ -169,21 +236,4 @@ export default class Container extends Renderable {
   //   this.container.filters = [filter];
   // }
 
-  // setFilter(filter) {
-  //   switch (filter) {
-  //     case 'bloom':
-  //       this.container.filters = [
-  //         new AdvancedBloomFilter({
-  //           threshold: 0.5,
-  //           bloomScale: 0.8,
-  //           brightness: 0.7,
-  //           blur: 2,
-  //           quality: 6,
-  //         }),
-  //       ];
-  //       break;
-  //     default:
-  //   }
-  // }
-
 }

packages/graphics/yarn.lock

@@ -1211,6 +1211,11 @@
     "@pixi/settings" "5.3.7"
     "@pixi/utils" "5.3.7"
 
+"@pixi/filter-adjustment@^3.1.1":
+  version "3.1.1"
+  resolved "http://npm.cha0sdev/@pixi%2ffilter-adjustment/-/filter-adjustment-3.1.1.tgz#2aa41048106fa2006648deae59813bfb55c8fe54"
+  integrity sha512-N+qbkofBn5tiGn2Ubg52AEoPOM69VIO5TEHsBtm5oh2S4m/rb6FnnqPji/FzwK89iLvtYmJdbwWAYi87PWnE3Q==
+
 "@pixi/filter-advanced-bloom@^3.2.0":
   version "3.2.0"
   resolved "http://npm.cha0sdev/@pixi%2ffilter-advanced-bloom/-/filter-advanced-bloom-3.2.0.tgz#c345adebf6605d814fb7ff8fda2292ed3d04ec01"
@@ -1225,6 +1230,11 @@
   dependencies:
     "@pixi/core" "5.3.7"
 
+"@pixi/filter-glow@^3.2.0":
+  version "3.2.0"
+  resolved "http://npm.cha0sdev/@pixi%2ffilter-glow/-/filter-glow-3.2.0.tgz#704c4991bbe726969df3863df31318ea5b42f4c9"
+  integrity sha512-+rOpzHh0VBjjvBO0A6ROiO8JGcCQU0Uqfeg1zX/MKaF3pcGnDlNvBa8kQaDsLnSvBmMzajBLzQYC4braD8oVYw==
+
 "@pixi/filter-kawase-blur@3.2.0":
   version "3.2.0"
   resolved "http://npm.cha0sdev/@pixi%2ffilter-kawase-blur/-/filter-kawase-blur-3.2.0.tgz#f3fe6e3c17d191ae353959768c1170e85b2ad1dc"