From 1f7b7376dd1d41eebe6a194040e8c5186b36c79f Mon Sep 17 00:00:00 2001 From: Ibrahim Almalki Date: Fri, 5 Jan 2024 23:10:23 -0500 Subject: [PATCH] Canvas Background --- .../src/components/lib/CanvasBackground.tsx | 76 +++++++++++++++++++ client/src/components/lib/DropDownMenu.tsx | 14 ++++ client/src/hooks/useDrawElements.tsx | 25 +++--- client/src/stores/AppStore.ts | 8 ++ 4 files changed, 111 insertions(+), 12 deletions(-) create mode 100644 client/src/components/lib/CanvasBackground.tsx diff --git a/client/src/components/lib/CanvasBackground.tsx b/client/src/components/lib/CanvasBackground.tsx new file mode 100644 index 0000000..9bd743c --- /dev/null +++ b/client/src/components/lib/CanvasBackground.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { useAppStore } from '@/stores/AppStore'; +import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; + +/** + * This file defines the CanvasColorToolGroup component, which allows the user to select + * a background color for the canvas. The available colors are defined in the + * `canvasColourTypes` array. The `strokeColorMap` and `mapStrokeColour` objects map these + * colors to their corresponding CSS classes and color values respectively. + * @author Eebro + */ + +export const canvasColourTypes = [ + 'whiteCanvas', + 'greenCanvas', + 'blueCanvas', + 'orangeCanvas', +] as const; +export type canvasColourType = (typeof canvasColourTypes)[number]; + +const strokeColorMap: Record = { + whiteCanvas: 'bg-white border-gray-300', + greenCanvas: 'bg-green-200', + blueCanvas: 'bg-blue-200', + orangeCanvas: 'bg-orange-200', +}; + +const mapStrokeColour = { + whiteCanvas: '#FFFFFF', + greenCanvas: '#D5F5E3', + blueCanvas: '#D6EAF8', + orangeCanvas: '#FAE5D3', +}; + +/** + * Creates a row group of buttons corresponding + * to the provided list of tools. + * @param tools The list of tools + * @param selectedTool The currently selected tool, used + * to highlight the selected tool. + */ +const CanvasColorToolGroup = ({ + colorList, +}: { + colorList: canvasColourType[]; +}) => { + const { setCanvasBackground, canvasColor } = useAppStore([ + 'setCanvasBackground', + 'canvasColor', + ]); + + const handleColorSelection = (color: canvasColourType) => { + setCanvasBackground(mapStrokeColour[color]); + console.log('color', color); + }; + + return ( + + {colorList.map((color) => ( + + ))} + + ); +}; +export default CanvasColorToolGroup; diff --git a/client/src/components/lib/DropDownMenu.tsx b/client/src/components/lib/DropDownMenu.tsx index 9da1ce4..b310b1b 100644 --- a/client/src/components/lib/DropDownMenu.tsx +++ b/client/src/components/lib/DropDownMenu.tsx @@ -8,8 +8,10 @@ import { Pencil2Icon, InfoCircledIcon, Share1Icon, + BlendingModeIcon, } from '@radix-ui/react-icons'; import { useAppStore } from '@/stores/AppStore'; +import CanvasColorToolGroup, { canvasColourTypes } from './CanvasBackground'; /** * Creates a DropDownMenu for Canvas @@ -81,7 +83,19 @@ const DropDownMenu = ({ Edit Canvas + + + + + Canvas Background + + + + diff --git a/client/src/hooks/useDrawElements.tsx b/client/src/hooks/useDrawElements.tsx index acfa74d..dfb0fc5 100644 --- a/client/src/hooks/useDrawElements.tsx +++ b/client/src/hooks/useDrawElements.tsx @@ -16,13 +16,15 @@ import { renderCanvasElements } from '@/lib/canvasElements/renderScene'; * @authors Yousef Yassin, Dana El Sherif */ const useDrawElements = () => { - const { appHeight, appWidth, zoom, panOffset, action } = useAppStore([ - 'appHeight', - 'appWidth', - 'zoom', - 'panOffset', - 'action', - ]); + const { appHeight, appWidth, zoom, panOffset, action, canvasColor } = + useAppStore([ + 'appHeight', + 'appWidth', + 'zoom', + 'panOffset', + 'action', + 'canvasColor', + ]); const { selectedElementIds, p1, @@ -40,7 +42,6 @@ const useDrawElements = () => { angles, selectionFrame, roughElements, - //fillColors, opacities, strokeColors, strokeWidths, @@ -61,7 +62,6 @@ const useDrawElements = () => { 'isImagePlaceds', 'angles', 'selectionFrame', - //'fillColors', 'opacities', 'strokeColors', 'strokeWidths', @@ -73,9 +73,9 @@ const useDrawElements = () => { if (ctx === null || canvas === null) return; // Clear on each rerender - ctx.clearRect(0, 0, canvas.width, canvas.height); - // ctx.fillStyle = 'blue'; - // ctx.fillRect(0, 0, canvas.width, canvas.height); + //ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = canvasColor || 'white'; + ctx.fillRect(0, 0, canvas.width, canvas.height); // Retrieve the scaling offset to apply for centered zoom // (TODO: We can change this to zoom towards mouse position) @@ -152,6 +152,7 @@ const useDrawElements = () => { opacities, strokeColors, strokeWidths, + canvasColor, ]); }; diff --git a/client/src/stores/AppStore.ts b/client/src/stores/AppStore.ts index de754d1..96c31ce 100644 --- a/client/src/stores/AppStore.ts +++ b/client/src/stores/AppStore.ts @@ -29,6 +29,8 @@ interface AppState { zoom: number; //Panning offset panOffset: { x: number; y: number }; + // Canvas Background Color + canvasColor: string; } interface AppActions { // Reducer to set the canvas action @@ -46,6 +48,7 @@ interface AppActions { // Reducer to set zoom level setAppZoom: (zoom: number) => void; setPanOffset: (x: number, y: number) => void; + setCanvasBackground: (canvasColor: string) => void; } type AppStore = AppState & AppActions; @@ -60,6 +63,7 @@ export const initialAppState: AppState = { appHeight: window.innerHeight, zoom: 1, // 100% panOffset: { x: 0, y: 0 }, + canvasColor: '#fff', }; /** Actions / Reducers */ @@ -83,6 +87,9 @@ const setAppZoom = (set: SetState) => (zoom: number) => })); const setPanOffset = (set: SetState) => (x: number, y: number) => set(() => ({ panOffset: { x, y } })); +const setCanvasBackground = + (set: SetState) => (canvasColor: string) => + set(() => ({ canvasColor })); /** Store Hook */ const appStore = create()((set) => ({ @@ -95,5 +102,6 @@ const appStore = create()((set) => ({ setAppDimensions: setAppDimensions(set), setAppZoom: setAppZoom(set), setPanOffset: setPanOffset(set), + setCanvasBackground: setCanvasBackground(set), })); export const useAppStore = createStoreWithSelectors(appStore);