screen size fix

singodiyashubham87 · May 16, 2024 · fee6264 · fee6264
1 parent 69d1e86
commit fee6264
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -47,6 +47,7 @@ function App() {
   const [thickness, setThickness] = useState(10);
   const [color, setColor] = useState("#000");
   const [bgColor, setBgColor] = useState("#B7BABF");
+  const [height,setHeight]=useState(70)
   const [showMenuAndBgColor, setShowMenuAndBgColor] = useState(true);
   const [steps] = useState(tourSteps);
 
@@ -67,7 +68,14 @@ function App() {
       handleUpdates(canvas, color, thickness, bgColor);
     }
   }, [thickness]);
-
+const handleHeight=(val)=>setHeight(val)
+useEffect(()=>{
+  const canvas = canvasRef.current;
+  const ctx = canvas.getContext("2d");
+  const imageData = ctx.getImageData(0, 0, canvas.width,height-(height-70));
+  console.log(height-(height-70))
+  ctx.putImageData(imageData, 0, 0);
+},[height])
   return (
     <>
       <Joyride steps={steps} continuous showSkipButton={true} />
@@ -114,6 +122,8 @@ function App() {
                 setColor={setColor}
                 canvasRef={canvasRef}
                 bgColor={bgColor}
+                handleheight={handleHeight}
+                height={height}
               />
             )}
             <div
@@ -129,6 +139,7 @@ function App() {
           </div>
           <canvas
             id="draw"
+            style={{height:`${height}vh`}}
             className={`whiteboard bg-[#DBDCDF] rounded-[0.6rem] shadow-mdm ${
               isDrawing
                 ? "cursor-crosshair"

diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx
@@ -21,6 +21,8 @@ const Menu = ({
   setColor,
   canvasRef,
   bgColor,
+  height,
+  handleheight
 }) => {
   const [pencilWidth, setPencilWidth] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -35,7 +37,6 @@ const Menu = ({
   const toggleIsDrawing = () => {
     setIsDrawing(!isDrawing);
   };
-
   return (
     <>
       <div className="board max-w-[90%] flex-wrap	 tools bg-[#CBCCCF] shadow-mdm flex justify-center items-stretch gap-[1rem] md:gap-[2rem] px-[2rem] py-4 rounded-[0.6rem]">
@@ -132,14 +133,14 @@ const Menu = ({
         <button>
           <PiPlus
             className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] cursor-pointer hover:bg-[#B7BABF]`}
-            onClick={() => increaseHeight(canvasRef.current, bgColor)}
+            onClick={() => handleheight(height<100?height+5:height)}
             title="IncreaseHeight"
           />
         </button>
         <button>
           <PiMinus
             className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] cursor-pointer hover:bg-[#B7BABF]`}
-            onClick={() => decreaseHeight(canvasRef.current, bgColor)}
+            onClick={() => handleheight(height>70?height-5:height)}
             title="DecreaseHeight"
           />
         </button>