Add filters

Author: gjdenhertog

.gitignore

@@ -0,0 +1,2 @@
+TODO.md
+.github/

photo-editor/src/components/FilterControls.css

@@ -0,0 +1,34 @@
+.filter-controls {
+  margin-top: 1rem;
+  padding: 1rem;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.filter-controls h3 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
+  color: #333;
+}
+
+.filter-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.filter-option {
+  display: flex;
+  align-items: center;
+}
+
+.filter-option input[type="checkbox"] {
+  margin-right: 0.5rem;
+}
+
+.filter-option label {
+  cursor: pointer;
+  font-size: 0.9rem;
+}

photo-editor/src/components/FilterControls.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../store';
+import { PhotoFilter } from '../store/photo/types';
+import { addFilter, removeFilter } from '../store/photo/actions';
+import { AppDispatch } from '../store';
+import './FilterControls.css';
+
+const FilterControls: React.FC = () => {
+  const dispatch = useDispatch<AppDispatch>();
+  const photo = useSelector((state: RootState) => state.photo.photo);
+  
+  const handleFilterChange = (filter: PhotoFilter) => {
+    if (!photo) return;
+    
+    const isFilterApplied = photo.filters.includes(filter);
+    
+    if (isFilterApplied) {
+      dispatch(removeFilter(filter));
+    } else {
+      dispatch(addFilter(filter));
+    }
+  };
+  
+  if (!photo) {
+    return null;
+  }
+  
+  return (
+    <div className="filter-controls">
+      <h3>Filters</h3>
+      <div className="filter-options">
+        <div className="filter-option">
+          <input
+            type="checkbox"
+            id="sepia-filter"
+            checked={photo.filters.includes(PhotoFilter.SEPIA)}
+            onChange={() => handleFilterChange(PhotoFilter.SEPIA)}
+          />
+          <label htmlFor="sepia-filter">Sepia</label>
+        </div>
+        <div className="filter-option">
+          <input
+            type="checkbox"
+            id="bw-filter"
+            checked={photo.filters.includes(PhotoFilter.BLACK_AND_WHITE)}
+            onChange={() => handleFilterChange(PhotoFilter.BLACK_AND_WHITE)}
+          />
+          <label htmlFor="bw-filter">Black & White</label>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FilterControls;

photo-editor/src/components/ImageRenderer.tsx

@@ -1,8 +1,33 @@
 import React, { useRef, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { RootState } from '../store';
+import { PhotoFilter } from '../store/photo/types';
 import './ImageRenderer.css';
 
+const applyFilter = (imageData: ImageData, filter: PhotoFilter): void => {
+  const data = imageData.data;
+  
+  for (let i = 0; i < data.length; i += 4) {
+    const r = data[i];
+    const g = data[i + 1];
+    const b = data[i + 2];
+    
+    switch (filter) {
+      case PhotoFilter.SEPIA:
+        data[i] = Math.min(255, (r * 0.393) + (g * 0.769) + (b * 0.189));
+        data[i + 1] = Math.min(255, (r * 0.349) + (g * 0.686) + (b * 0.168));
+        data[i + 2] = Math.min(255, (r * 0.272) + (g * 0.534) + (b * 0.131));
+        break;
+      case PhotoFilter.BLACK_AND_WHITE:
+        const avg = (r + g + b) / 3;
+        data[i] = avg;
+        data[i + 1] = avg;
+        data[i + 2] = avg;
+        break;
+    }
+  }
+};
+
 const ImageRenderer: React.FC = () => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
@@ -41,6 +66,23 @@ const ImageRenderer: React.FC = () => {
       const scaleY = photo.dimensions.height / img.height;
       ctx.scale(scaleX, scaleY);
       ctx.drawImage(img, -img.width / 2, -img.height / 2, img.width, img.height);
+      
+      // Apply filters if present
+      if (photo.filters && photo.filters.length > 0) {
+        const imageData = ctx.getImageData(
+          -img.width / 2, 
+          -img.height / 2, 
+          img.width, 
+          img.height
+        );
+        
+        photo.filters.forEach(filter => {
+          applyFilter(imageData, filter);
+        });
+        
+        ctx.putImageData(imageData, -img.width / 2, -img.height / 2);
+      }
+      
       ctx.restore();
     };
   }, [photo]);

photo-editor/src/components/PhotoControls.tsx

@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { resetRotation, rotatePhoto, panZoomPhoto } from '../store/photo/actions';
 import { selectPhoto } from '../store/photo/selectors';
 import { AppDispatch } from '../store';
+import FilterControls from './FilterControls';
 import './PhotoControls.css';
 
 const PhotoControls: React.FC = () => {
@@ -93,6 +94,8 @@ const PhotoControls: React.FC = () => {
           <p>Dimensions: {Math.round(photo.dimensions.width)} x {Math.round(photo.dimensions.height)}</p>
         </div>
       )}
+      
+      <FilterControls />
     </div>
   );
 };

photo-editor/src/components/PhotoUploader.tsx

@@ -30,7 +30,8 @@ const PhotoUploader: React.FC = () => {
             height: img.height
           },
           source: fileUrl,
-          rotation: 0
+          rotation: 0,
+          filters: []
         };
 
         dispatch(setPhoto(photo));

photo-editor/src/store/photo/actions.ts

@@ -3,11 +3,16 @@ import {
   ROTATE_PHOTO, 
   PAN_ZOOM_PHOTO, 
   SET_PHOTO,
+  ADD_FILTER,
+  REMOVE_FILTER,
   Photo,
+  PhotoFilter,
   ResetRotationAction,
   RotatePhotoAction,
   PanZoomPhotoAction,
-  SetPhotoAction
+  SetPhotoAction,
+  AddFilterAction,
+  RemoveFilterAction
 } from './types';
 
 // Action creators
@@ -36,3 +41,17 @@ export const setPhoto = (photo: Photo): SetPhotoAction => ({
   type: SET_PHOTO,
   payload: photo
 });
+
+export const addFilter = (filter: PhotoFilter): AddFilterAction => ({
+  type: ADD_FILTER,
+  payload: {
+    filter
+  }
+});
+
+export const removeFilter = (filter: PhotoFilter): RemoveFilterAction => ({
+  type: REMOVE_FILTER,
+  payload: {
+    filter
+  }
+});

photo-editor/src/store/photo/reducer.ts

@@ -4,7 +4,9 @@ import {
   RESET_ROTATION,
   ROTATE_PHOTO,
   PAN_ZOOM_PHOTO,
-  SET_PHOTO
+  SET_PHOTO,
+  ADD_FILTER,
+  REMOVE_FILTER
 } from './types';
 
 // Initial state
@@ -54,6 +56,29 @@ const photoReducer = (
         }
       };
 
+    case ADD_FILTER:
+      if (!state.photo) return state;
+      if (state.photo.filters.includes(action.payload.filter)) {
+        return state;
+      }
+      return {
+        ...state,
+        photo: {
+          ...state.photo,
+          filters: [...state.photo.filters, action.payload.filter]
+        }
+      };
+      
+    case REMOVE_FILTER:
+      if (!state.photo) return state;
+      return {
+        ...state,
+        photo: {
+          ...state.photo,
+          filters: state.photo.filters.filter(filter => filter !== action.payload.filter)
+        }
+      };
+      
     default:
       return state;
   }

photo-editor/src/store/photo/types.ts

@@ -1,5 +1,11 @@
 // Photo model types
 
+// Photo filter enum
+export enum PhotoFilter {
+  SEPIA = 'sepia',
+  BLACK_AND_WHITE = 'black_and_white'
+}
+
 // Photo model interface
 export interface Photo {
   dimensions: {
@@ -8,6 +14,7 @@ export interface Photo {
   };
   source: string; // Relative path to the image
   rotation: number;
+  filters: PhotoFilter[]; // Array of filters to apply to the photo
 }
 
 // Initial state interface
@@ -20,17 +27,21 @@ export const RESET_ROTATION = 'photo/RESET_ROTATION';
 export const ROTATE_PHOTO = 'photo/ROTATE_PHOTO';
 export const PAN_ZOOM_PHOTO = 'photo/PAN_ZOOM_PHOTO';
 export const SET_PHOTO = 'photo/SET_PHOTO';
+export const ADD_FILTER = 'photo/ADD_FILTER';
+export const REMOVE_FILTER = 'photo/REMOVE_FILTER';
 
 // Action interfaces
 export interface ResetRotationAction {
   type: typeof RESET_ROTATION;
+  [key: string]: any;
 }
 
 export interface RotatePhotoAction {
   type: typeof ROTATE_PHOTO;
   payload: {
     rotation: number;
   };
+  [key: string]: any;
 }
 
 export interface PanZoomPhotoAction {
@@ -41,16 +52,36 @@ export interface PanZoomPhotoAction {
       height: number;
     };
   };
+  [key: string]: any;
 }
 
 export interface SetPhotoAction {
   type: typeof SET_PHOTO;
   payload: Photo;
+  [key: string]: any;
+}
+
+export interface AddFilterAction {
+  type: typeof ADD_FILTER;
+  payload: {
+    filter: PhotoFilter;
+  };
+  [key: string]: any;
+}
+
+export interface RemoveFilterAction {
+  type: typeof REMOVE_FILTER;
+  payload: {
+    filter: PhotoFilter;
+  };
+  [key: string]: any;
 }
 
 // Union of all photo action types
 export type PhotoActionTypes = 
   | ResetRotationAction 
   | RotatePhotoAction 
   | PanZoomPhotoAction
-  | SetPhotoAction;
+  | SetPhotoAction
+  | AddFilterAction
+  | RemoveFilterAction;