feat: Support adjustment filter

Author: Hardy--Lee

packages/webgal/src/Core/controller/stage/pixi/PixiController.ts

@@ -271,6 +271,13 @@ export default class PixiStage {
             rotation: target.pixiContainer.rotation,
             // @ts-ignore
             blur: target.pixiContainer.blur,
+            brightness: target.pixiContainer.brightness,
+            contrast: target.pixiContainer.contrast,
+            saturation: target.pixiContainer.saturation,
+            gamma: target.pixiContainer.gamma,
+            colorRed: target.pixiContainer.colorRed,
+            colorGreen: target.pixiContainer.colorGreen,
+            colorBlue: target.pixiContainer.colorBlue,
             ...webgalFilters,
           };
           let effect: IEffect = {

packages/webgal/src/Core/controller/stage/pixi/WebGALPixiContainer.ts

@@ -15,6 +15,7 @@ import {
   getRadiusAlphaFilter,
   setRadiusAlphaFilter,
 } from '@/Core/controller/stage/pixi/shaders/RadiusAlphaFilter';
+import { AdjustmentFilter } from 'pixi-filters';
 
 export class WebGALPixiContainer extends PIXI.Container {
   public containerFilters = new Map<string, PIXI.Filter>();
@@ -115,6 +116,71 @@ export class WebGALPixiContainer extends PIXI.Container {
     }
   }
 
+  /**
+   * adjustment filter
+   * @public
+   */
+  public getOrCreateAdjustmentFilter(): AdjustmentFilter {
+    const filterFromMap = this.containerFilters.get("adjustment");
+    if (filterFromMap) {
+      return filterFromMap as AdjustmentFilter;
+    } else {
+      const adjustment = new AdjustmentFilter();
+      this.addFilter(adjustment);
+      this.containerFilters.set('adjustment', adjustment);
+      return adjustment;
+    }
+  }
+
+  public get brightness(): number {
+    return this.getOrCreateAdjustmentFilter().brightness;
+  }
+  public set brightness(value: number) {
+    this.getOrCreateAdjustmentFilter().brightness = value;
+  }
+
+  public get contrast(): number {
+    return this.getOrCreateAdjustmentFilter().contrast;
+  }
+  public set contrast(value: number) {
+    this.getOrCreateAdjustmentFilter().contrast = value;
+  }
+
+  public get saturation(): number {
+    return this.getOrCreateAdjustmentFilter().saturation;
+  }
+  public set saturation(value: number) {
+    this.getOrCreateAdjustmentFilter().saturation = value;
+  }
+
+  public get gamma(): number {
+    return this.getOrCreateAdjustmentFilter().gamma;
+  }
+  public set gamma(value: number) {
+    this.getOrCreateAdjustmentFilter().gamma = value;
+  }
+
+  public get colorRed(): number {
+    return this.getOrCreateAdjustmentFilter().red * 255.0;
+  }
+  public set colorRed(value: number) {
+    this.getOrCreateAdjustmentFilter().red = value / 255.0;
+  }
+
+  public get colorGreen(): number {
+    return this.getOrCreateAdjustmentFilter().green * 255.0;
+  }
+  public set colorGreen(value: number) {
+    this.getOrCreateAdjustmentFilter().green = value / 255.0;
+  }
+
+  public get colorBlue(): number {
+    return this.getOrCreateAdjustmentFilter().blue * 255.0;
+  }
+  public set colorBlue(value: number) {
+    this.getOrCreateAdjustmentFilter().blue = value / 255.0;
+  }
+
   /**
    * old film filter
    * @public

packages/webgal/src/Core/controller/stage/pixi/animations/timeline.ts

@@ -123,7 +123,7 @@ export function generateTimelineObj(
 
   function getEndFilterEffect() {
     const endSegment = timeline[timeline.length - 1];
-    const { alpha, rotation, blur, duration, scale, position, ...rest } = endSegment;
+    const { alpha, rotation, blur, brightness, contrast, saturation, gamma, colorRed, colorGreen, colorBlue, duration, scale, position, ...rest } = endSegment;
     return rest;
   }
 

packages/webgal/src/store/stageInterface.ts

@@ -39,6 +39,13 @@ export interface ITransform {
   };
   rotation: number;
   blur: number;
+  brightness: number;
+  contrast: number;
+  saturation: number;
+  gamma: number;
+  colorRed: number;
+  colorGreen: number;
+  colorBlue: number;
 }
 
 /**
@@ -69,6 +76,13 @@ export const baseTransform: ITransform = {
   },
   rotation: 0,
   blur: 0,
+  brightness: 1,
+  contrast: 1,
+  saturation: 1,
+  gamma: 1,
+  colorRed: 255,
+  colorGreen: 255,
+  colorBlue: 255,
 };
 
 export interface IFreeFigure {