feat: add filters to drawer

.husky/commit-msg

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx --no -- commitlint --edit ${1}
+npx --no -- commitlint --edit ${1}

.husky/pre-push

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-pnpm lint
+pnpm lint

package.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "packageManager": "[email protected]",
   "scripts": {
-    "prepare": "husky install",
+    "prepare": "husky",
     "clean": "rimraf dist storybook-static deployment",
     "dev": "vite --open",
     "build": "tsc && vite build",

src/components/library/editor/atoms/filters/FilterAtoms.ts

@@ -0,0 +1,38 @@
+import { atom } from "jotai";
+import type { StagedFilter } from "../../stage/StagedFilters";
+
+export const blurFilterAtom = atom(0);
+export const brightnessFilterAtom = atom(1);
+export const contrastFilterAtom = atom(1);
+export const saturationFilterAtom = atom(1);
+
+// Derived
+export const controlFilterAtom = atom(
+  (get) => {
+    const blur = get(blurFilterAtom);
+    const brightness = get(brightnessFilterAtom);
+    const contrast = get(contrastFilterAtom);
+    const saturation = get(saturationFilterAtom);
+
+    return {
+      blur,
+      brightness,
+      contrast,
+      saturation,
+    };
+  },
+  (_get, set, update: Partial<StagedFilter>) => {
+    if (update.blur !== undefined) {
+      set(blurFilterAtom, update.blur);
+    }
+    if (update.brightness !== undefined) {
+      set(brightnessFilterAtom, update.brightness);
+    }
+    if (update.contrast !== undefined) {
+      set(contrastFilterAtom, update.contrast);
+    }
+    if (update.saturation !== undefined) {
+      set(saturationFilterAtom, update.saturation);
+    }
+  }
+);

src/components/library/editor/drawer/FilterDrawer.stories.tsx

@@ -13,9 +13,12 @@ type Story = StoryObj<typeof meta>;
 
 const commonProps = {
   open: true,
-  onClose: () => console.log("onClose"),
   blur: 40,
-  onBlurChange: () => console.log("onBlurChange"),
+  brightness: 1,
+  contrast: 1,
+  saturation: 1,
+  onFilterChange: () => console.log("onFilterChange"),
+  onClose: () => console.log("onClose"),
 } satisfies ComponentProps;
 
 export const Filter = {

src/components/library/editor/drawer/FilterDrawer.tsx

@@ -1,15 +1,27 @@
 import { useRef, type ReactElement } from "react";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import { useOnClickOutside } from "usehooks-ts";
+import type { StagedFilter } from "../stage/StagedFilters";
 
 export interface FilterDrawerProps {
   open: boolean;
-  onClose: () => void;
   blur: number;
-  onBlurChange: (value: number) => void;
+  brightness: number;
+  contrast: number;
+  saturation: number;
+  onFilterChange: (filter: Partial<StagedFilter>) => void;
+  onClose: () => void;
 }
 
-export function FilterDrawer({ open, onClose, blur, onBlurChange }: FilterDrawerProps): ReactElement {
+export function FilterDrawer({
+  open,
+  onClose,
+  blur,
+  brightness,
+  contrast,
+  saturation,
+  onFilterChange,
+}: FilterDrawerProps): ReactElement {
   const menuRef = useRef<HTMLElement>(null);
   useOnClickOutside(menuRef, onClose);
 
@@ -19,23 +31,58 @@ export function FilterDrawer({ open, onClose, blur, onBlurChange }: FilterDrawer
       <div className="drawer-side overflow-hidden">
         <label htmlFor="app-drawer" aria-label="close sidebar" />
         <ul className="menu bg-neutral-content dark:bg-neutral shadow-xl min-h-full w-60 p-4 text-base text-base-content md:w-96">
-          <div className="flex">
-            <span className="flex flex-1 p-4 text-xl font-bold">Filters</span>
+          <div className="flex flex-row">
+            <span className="flex flex-1 p-4 text-2xl font-bold">Filters</span>
             <div className="flex items-center flex-row">
               <button className="btn btn-circle btn-sm btn-ghost" onClick={onClose}>
                 <XMarkIcon />
               </button>
             </div>
           </div>
+          <li className="divider divider-vertical h-1/2" />
+          <li>
+            <span className="menu-title text-base font-bold">Brightness</span>
+            <input
+              type="range"
+              min="0"
+              max="2"
+              step="0.1"
+              value={brightness}
+              onChange={(e) => onFilterChange({ brightness: Number(e.target.value) })}
+              className="range range-primary"
+            />
+            <span className="menu-title text-base font-bold">Contrast</span>
+            <input
+              type="range"
+              min="0"
+              max="2"
+              step="0.1"
+              value={contrast}
+              onChange={(e) => onFilterChange({ contrast: Number(e.target.value) })}
+              className="range range-secondary"
+            />
+            <span className="menu-title text-base font-bold">Saturation</span>
+            <input
+              type="range"
+              min="0"
+              max="2"
+              step="0.1"
+              value={saturation}
+              onChange={(e) => onFilterChange({ saturation: Number(e.target.value) })}
+              className="range range-accent"
+            />
+          </li>
+          <li className="divider divider-vertical h-1/2 mt-8" />
           <li>
             <span className="menu-title text-lg font-bold">Blur</span>
             <input
               type="range"
               min="0"
               max="100"
+              step="1"
               value={blur}
-              onChange={(e) => onBlurChange(Number(e.target.value))}
-              className="range range-accent"
+              onChange={(e) => onFilterChange({ blur: Number(e.target.value) })}
+              className="range range-info"
             />
           </li>
         </ul>

src/components/library/editor/drawer/UseFilterDrawer.ts

@@ -1,17 +1,17 @@
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { blurFilterAtom } from "../atoms/filters/BlurFilterAtom";
+import { controlFilterAtom } from "../atoms/filters/FilterAtoms";
 import { filterMenuStateAtom, toggleFilterMenuState } from "../atoms/menu/FilterMenuAtoms";
 import type { FilterDrawerProps } from "./FilterDrawer";
 
-export function useFilterDrawer(): Pick<FilterDrawerProps, "onClose" | "open" | "blur" | "onBlurChange"> {
+export function useFilterDrawer(): FilterDrawerProps {
   const drawerState = useAtomValue(filterMenuStateAtom);
   const toggleDrawer = useSetAtom(toggleFilterMenuState);
-  const [blur, setBlur] = useAtom(blurFilterAtom);
+  const [filterValues, setFilterValues] = useAtom(controlFilterAtom);
 
   return {
     open: drawerState,
+    ...filterValues,
+    onFilterChange: setFilterValues,
     onClose: toggleDrawer,
-    blur,
-    onBlurChange: setBlur,
   };
 }

src/components/library/editor/stage/StageComponent.tsx

@@ -14,12 +14,12 @@ export function StageComponent(): ReactElement {
   const { stageOptions, lock, scale, rotation, isRotated, zoom, minZoom, maxZoom, setZoom } = useStageViewport();
   const { imageUrl, imageWidth, imageHeight } = useStageImage();
   const { registerViewport } = useStageSetup();
-  const { blur } = useStageFilters();
+  const { blur, brightness, contrast, saturation } = useStageFilters();
 
   return (
     <div ref={ref} className="flex-1 overflow-hidden rounded-lg border-4 border-base-100">
       <Stage width={containerWidth} height={containerHeight} options={stageOptions}>
-        <StagedFilters blur={{ blur }}>
+        <StagedFilters blur={{ blur }} adjustement={{ brightness, contrast, saturation }}>
           <StagedViewport
             ref={registerViewport}
             worldWidth={imageWidth}

src/components/library/editor/stage/StagedFilters.tsx

@@ -2,6 +2,13 @@ import { AdjustmentFilter } from "@pixi/filter-adjustment";
 import { Container, withFilters } from "@pixi/react";
 import * as PIXI from "pixi.js";
 
+export interface StagedFilter {
+  blur: number;
+  brightness: number;
+  contrast: number;
+  saturation: number;
+}
+
 export const StagedFilters = withFilters(Container, {
   adjustement: AdjustmentFilter,
   blur: PIXI.BlurFilter,

src/components/library/editor/stage/UseStageFilters.ts

@@ -1,11 +1,18 @@
 import { useAtomValue } from "jotai";
-import { blurFilterAtom } from "../atoms/filters/BlurFilterAtom";
+import { controlFilterAtom } from "../atoms/filters/FilterAtoms";
 
 export function useStageFilters(): {
   blur: number;
+  brightness: number;
+  contrast: number;
+  saturation: number;
 } {
-  const blur = useAtomValue(blurFilterAtom);
+  const { blur, brightness, contrast, saturation } = useAtomValue(controlFilterAtom);
+
   return {
     blur,
+    brightness,
+    contrast,
+    saturation,
   };
 }