Refactor Drawing interface

edumeet · Aug 26, 2024 · 08e73e5 · 08e73e5
1 parent 003f559
commit 08e73e5
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 41 deletions.
diff --git a/src/components/drawing/DrawingBoard.tsx b/src/components/drawing/DrawingBoard.tsx
@@ -15,7 +15,7 @@ import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 
 import ErasingAllConfirmationButton from './ErasingAllConfirmationButton';
 import DrawingColorsPallete from './DrawingColorsPallete';
-import { Drawing } from '../../store/slices/roomSlice';
+import { RoomState } from '../../store/slices/roomSlice';
 
 const DrawingBoard: React.FC = () => {
 	const dispatch = useAppDispatch();
@@ -140,7 +140,7 @@ const DrawingBoard: React.FC = () => {
 
 	/* handle tools */
 
-	const handleSetMode = (value: Drawing['mode']) => {
+	const handleSetMode = (value: RoomState['drawing']['mode']) => {
 		dispatch(roomActions.setDrawingMode(value));
 	};
 
@@ -308,7 +308,7 @@ const DrawingBoard: React.FC = () => {
 		}
 	};
 
-	const handleUsePaletteColor = (selectedColor: Drawing['color']) => {
+	const handleUsePaletteColor = (selectedColor: RoomState['drawing']['color']) => {
 		dispatch(roomActions.setDrawingColor(selectedColor));
 
 	};

diff --git a/src/components/drawing/DrawingColorsPallete.tsx b/src/components/drawing/DrawingColorsPallete.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 import Row from './drawingpalettes/Row';
 import Menu from './drawingpalettes/Menu';
 import Menu2 from './drawingpalettes/Menu2';
-import { Drawing } from '../../store/slices/roomSlice';
+import { RoomState } from '../../store/slices/roomSlice';
 
 interface Props {
 	type: string;
-	paletteColors: Drawing['colors'];
-	paletteColor: Drawing['color'];
-	handleUsePaletteColor: (selectedColor: Drawing['color']) => void; // eslint-disable-line
+	paletteColors: RoomState['drawing']['colors'];
+	paletteColor: RoomState['drawing']['color'];
+	handleUsePaletteColor: (selectedColor: RoomState['drawing']['color']) => void; // eslint-disable-line
 }
 
 const DrawingColorsPallete: React.FC<Props> = (props) => {

diff --git a/src/components/drawing/drawingpalettes/Menu.tsx b/src/components/drawing/drawingpalettes/Menu.tsx
@@ -2,12 +2,12 @@ import IconButton from '@mui/material/IconButton';
 import CircleIcon from '@mui/icons-material/Circle';
 import { Popover, Box, Grid } from '@mui/material';
 import { useState } from 'react';
-import { Drawing } from '../../../store/slices/roomSlice';
+import { RoomState } from '../../../store/slices/roomSlice';
 
 interface Props {
-	paletteColors: Drawing['colors'];
-	paletteColor: Drawing['color'];
-	handleUsePaletteColor: (selectedColor: Drawing['color']) => void; // eslint-disable-line
+	paletteColors: RoomState['drawing']['colors'];
+	paletteColor: RoomState['drawing']['color'];
+	handleUsePaletteColor: (selectedColor: RoomState['drawing']['color']) => void; // eslint-disable-line
 }
 
 const Menu: React.FC<Props> = (props) => {

diff --git a/src/components/drawing/drawingpalettes/Menu2.tsx b/src/components/drawing/drawingpalettes/Menu2.tsx
@@ -1,11 +1,11 @@
 import CircleIcon from '@mui/icons-material/Circle';
 import { Select, MenuItem } from '@mui/material';
-import { Drawing } from '../../../store/slices/roomSlice';
+import { RoomState } from '../../../store/slices/roomSlice';
 
 interface Props {
-	paletteColors: Drawing['colors'];
-	paletteColor: Drawing['color'];
-	handleUsePaletteColor: (selectedColor: Drawing['color']) => void; // eslint-disable-line
+	paletteColors: RoomState['drawing']['colors'];
+	paletteColor: RoomState['drawing']['color'];
+	handleUsePaletteColor: (selectedColor: RoomState['drawing']['color']) => void; // eslint-disable-line
 }
 
 const Menu2: React.FC<Props> = (props) => {
@@ -15,7 +15,7 @@ const Menu2: React.FC<Props> = (props) => {
 	return <>
 		<Select
 			value={paletteColor}
-			onChange={(event) => handleUsePaletteColor(event.target.value as Drawing['color'])}
+			onChange={(event) => handleUsePaletteColor(event.target.value as RoomState['drawing']['color'])}
 			style={{ border: '2px solid lightgray' }}
 			size='small'
 		>

diff --git a/src/components/drawing/drawingpalettes/Row.tsx b/src/components/drawing/drawingpalettes/Row.tsx
@@ -1,11 +1,11 @@
 import IconButton from '@mui/material/IconButton';
 import CircleIcon from '@mui/icons-material/Circle';
-import { Drawing } from '../../../store/slices/roomSlice';
+import { RoomState } from '../../../store/slices/roomSlice';
 
 interface Props {
-	paletteColors: Drawing['colors'];
-	paletteColor: Drawing['color'];
-	handleUsePaletteColor: (selectedColor: Drawing['color']) => void; // eslint-disable-line
+	paletteColors: RoomState['drawing']['colors'];
+	paletteColor: RoomState['drawing']['color'];
+	handleUsePaletteColor: (selectedColor: RoomState['drawing']['color']) => void; // eslint-disable-line
 }
 
 const Row: React.FC<Props> = (props) => {

diff --git a/src/store/slices/roomSlice.tsx b/src/store/slices/roomSlice.tsx
@@ -5,23 +5,6 @@ export type RoomConnectionState = 'new' | 'lobby' | 'joined' | 'left';
 export type RoomMode = 'P2P' | 'SFU';
 export type VideoCodec = 'vp8' | 'vp9' | 'h264' | 'h265' | 'av1';
 
-export interface Drawing {
-	history: string
-	historyUndo: fabric.Object[]
-	historyRedo: fabric.Object[]
-	modes: [ 'brush', 'text', 'eraser' ],
-	mode: Drawing['modes'][number],
-	size: number,
-	eraserSize: number,
-	zoom: number,
-	colorsMenus: [ 'Row', 'Menu', 'Menu2' ],
-	colorsMenu: Drawing['colorsMenus'][number],
-	colors: [ 'black', 'white', 'gray', 'green', 'yellow', 'orange', 'red', 'blue', 'purple' ],
-	color: Drawing['colors'][number],
-	bgColors: ['lightgray', 'white', 'black'],
-	bgColor: Drawing['bgColors'][number]
-}
-
 export interface RoomState {
 	headless?: boolean;
 	logo?: string;
@@ -54,7 +37,22 @@ export interface RoomState {
 	screenSharingCodec?: VideoCodec;
 	screenSharingSimulcast?: boolean;
 	drawingEnabled?: boolean;
-	drawing: Drawing;
+	drawing: {
+		history: string
+		historyUndo: fabric.Object[]
+		historyRedo: fabric.Object[]
+		modes: [ 'brush', 'text', 'eraser' ],
+		mode: RoomState['drawing']['modes'][number],
+		size: number,
+		eraserSize: number,
+		zoom: number,
+		colorsMenus: [ 'Row', 'Menu', 'Menu2' ],
+		colorsMenu: RoomState['drawing']['colorsMenus'][number],
+		colors: [ 'black', 'white', 'gray', 'green', 'yellow', 'orange', 'red', 'blue', 'purple' ],
+		color: RoomState['drawing']['colors'][number],
+		bgColors: ['lightgray', 'white', 'black'],
+		bgColor: RoomState['drawing']['bgColors'][number]
+	}
 }
 
 type RoomUpdate = Omit<RoomState, 'roomMode' | 'state'>;
@@ -114,13 +112,13 @@ const roomSlice = createSlice({
 		) => {
 			state.state = action.payload;
 		}),
-		setDrawingMode: ((state, action: PayloadAction<Drawing['mode']>) => {
+		setDrawingMode: ((state, action: PayloadAction<RoomState['drawing']['mode']>) => {
 			state.drawing.mode = action.payload;
 		}),
-		setDrawingColorsMenu: ((state, action: PayloadAction<Drawing['colorsMenu']>) => {
+		setDrawingColorsMenu: ((state, action: PayloadAction<RoomState['drawing']['colorsMenu']>) => {
 			state.drawing.colorsMenu = action.payload;
 		}),
-		setDrawingColor: ((state, action: PayloadAction<Drawing['color']>) => {
+		setDrawingColor: ((state, action: PayloadAction<RoomState['drawing']['color']>) => {
 			state.drawing.color = action.payload;
 		}),
 		setDrawingHistory: ((state, action: PayloadAction<string>) => {