feat: add fill functionality for background color

public/index.html

@@ -9,6 +9,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/Components/Header/Header.js

@@ -25,13 +25,13 @@ class Header extends React.Component {
                         WHITEBOARD
                     </div>
                 </div>
-                <div className="header__right">
+                {/* <div className="header__right">
                     {
                         this.props.theme === 'light' ? 
                         <MoonIcon className="icon themeIcon moonIcon" onClick={this.changeTheme} /> : 
                         <LightModeIcon className="icon themeIcon" onClick={this.changeTheme} />
                     }
-                </div>
+                </div> */}
             </div> 
         );
     }

src/Components/Header/Header.scss

@@ -10,7 +10,7 @@
     z-index: 100;
 
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
 
     -webkit-box-shadow: 1px 1px 10px 3px white; 
@@ -37,7 +37,7 @@
             animation-iteration-count: infinite;
             animation-timing-function: linear;
 
-            font-size: 32px;
+            font-size: 40px;
             font-weight: bold;
 
             cursor: pointer;

src/Components/Main/Main.js

@@ -14,13 +14,13 @@ import PaletteIcon from '@mui/icons-material/Palette';
 import BrushIcon from '@mui/icons-material/Brush';
 import RectangleIcon from '@mui/icons-material/Crop169';
 import CircleIcon from '@mui/icons-material/CircleOutlined';
-import MenuIcon from '@mui/icons-material/Menu';
-import EraserIcon from '../Eraser/Eraser';
+// import MenuIcon from '@mui/icons-material/Menu';
+// import EraserIcon from '../Eraser/Eraser';
 import ClearIcon from '@mui/icons-material/DeleteForever';
 import { Icon } from '@iconify/react';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import ZoomOutIcon from '@mui/icons-material/ZoomOut';
-import AllScroll from '../AllScroll/AllScroll';
+// import AllScroll from '../AllScroll/AllScroll';
 import ShareIcon from '@mui/icons-material/IosShare';
 import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
 
@@ -40,9 +40,10 @@ class Main extends React.Component {
             changingBoard: false,
             loading: false,
             tool: Tools.Pencil,
-            color: '#fff',
+            color: 'white',
             showColorPicker: false,
-            backgroundColor: 'transparent',
+            showBgColorPicker: false,
+            backgroundColor: 'black',
             active: 'Pencil',
             lineWidth: 3,
             eraserWidth: 30,
@@ -57,9 +58,11 @@ class Main extends React.Component {
         }
 
         this.setColor = this.setColor.bind(this);
+        this.setBackgroundColor = this.setBackgroundColor.bind(this);
         this.sketchField = React.createRef();
         this.manipulateBoard = this.manipulateBoard.bind(this);
         this.toggleColorPicker = this.toggleColorPicker.bind(this);
+        this.toggleBgColorPicker = this.toggleBgColorPicker.bind(this);
         this.maxLength = 0;
 
         this.toolChange = this.toolChange.bind(this);
@@ -143,12 +146,23 @@ class Main extends React.Component {
         this.setState({color:color})
     }
 
+    setBackgroundColor(backgroundColor) {
+        console.log('state-changed', backgroundColor)
+        this.setState({backgroundColor:backgroundColor})
+    }
+
     toggleColorPicker() {
         this.setState(prevState => ({
             showColorPicker: !prevState.showColorPicker
         }))
     }
 
+    toggleBgColorPicker() {
+        this.setState(prevState => ({
+            showBgColorPicker: !prevState.showBgColorPicker
+        }))
+    }
+
     clearBoard() {
         // this.sketchField.current.zoom(Number.MAX_SAFE_INTEGER)
         this.sketchField.current.clear();
@@ -331,7 +345,7 @@ class Main extends React.Component {
             currLineColor = this.state.color;
 
         else
-            currLineColor = '#000';
+            currLineColor = this.state.backgroundColor;
 
         if(this.state.active !== 'Eraser')
             currLineWidth = this.state.lineWidth;
@@ -340,7 +354,7 @@ class Main extends React.Component {
             currLineWidth = this.state.eraserWidth;
 
         const currTool = this.state.receiverConnected ? Tools.Select : this.state.tool;
-        console.log(this.state.iAmReciever)
+        // console.log(this.state.iAmReciever)
 
         const whiteboard = (
             <SketchField
@@ -362,7 +376,7 @@ class Main extends React.Component {
                 disabled={this.state.iAmReciever}
                 // defaultValue={this.state.defaultValue}
                 // backgroundColor={this.props.theme === 'light' ? '#fff' : '#000'}
-                backgroundColor={'#000'}
+                backgroundColor={this.state.backgroundColor}
                 onChange={this.manipulateBoard}
 
             />
@@ -384,6 +398,10 @@ class Main extends React.Component {
                             <PaletteIcon  onClick={this.toggleColorPicker} className = 'header--item'/>
                             { this.state.showColorPicker && <HexColorPicker className='color__palette' color={this.state.color} onChange={this.setColor} />}
                         </span>
+                        <span className = "bg_color__picker">
+                            <i onClick={this.toggleBgColorPicker} className = 'fa-solid fa-fill-drip header--item'></i>
+                            { this.state.showBgColorPicker && <HexColorPicker className='bg_color__palette' color={this.state.backgroundColor} onChange={this.setBackgroundColor} />}
+                        </span>
                         <ClearIcon className = 'header--item' onClick = {this.clearBoard}/>
                         <UndoIcon onClick = {this.undoStep} className='undo header--item' />
                         <RedoIcon onClick = {this.redoStep} className='redo header--item'/></>}

src/Components/Main/Main.scss

@@ -1,7 +1,7 @@
 .main {
     min-height: 90vh;
     position: relative;
-    background-color: green;
+    background-color: green !important;
 
     .sidebar {
         display: flex;
@@ -91,6 +91,26 @@
                 height: 100%;
             }
         }
+
+        .bg_color__picker {
+            cursor: pointer;
+            position: relative;
+            font-size: 20px;
+            height: 0%;
+            margin-bottom: 40px;
+
+            .bg_color__palette {
+                position: absolute;
+                top: -80px;
+                left: 50px;
+            }
+
+            .visible--palette {
+                height: 100%;
+            }
+        }
+
+
 
     }
 

src/Components/SketchField/SketchField.jsx

@@ -83,10 +83,10 @@ class SketchField extends PureComponent {
   };
 
   static defaultProps = {
-    lineColor: "black",
     lineWidth: 10,
     fillColor: "transparent",
     backgroundColor: "transparent",
+    lineColor: "transparent",
     opacity: 1.0,
     undoSteps: 25,
     tool: null,

src/utils/index.js

@@ -76,7 +76,7 @@ export const hexToRgbA = (hex) => {
   var c;
   if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
     c = hex.substring(1).split("");
-    if (c.length == 3) {
+    if (c.length === 3) {
       c = [c[0], c[0], c[1], c[1], c[2], c[2]];
     }
     c = "0x" + c.join("");