Merge pull request singodiyashubham87#429 from Jasleen1210/canvassize

Adding aspect ratio feature
nikki-05 · Jul 5, 2024 · 9fe90dc · 9fe90dc
2 parents bc56087 + a61f991
commit 9fe90dc
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 10 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -8,6 +8,7 @@ import { handleUpdates, handleDrawing } from "./utils/canvas";
 import { FaBookOpen } from "react-icons/fa";
 import { VscClose } from "react-icons/vsc";
 import { PiPencilSimpleFill } from "react-icons/pi";
+import { BiArea } from "react-icons/bi";
 import { FaFeatherPointed } from "react-icons/fa6";
 import { RiScreenshot2Fill } from "react-icons/ri";
 import { FaFilePdf } from "react-icons/fa";
@@ -174,8 +175,14 @@ function App() {
 
             {/* ----- Canvas ------ */}
             <canvas
-              className="whiteboard bg-slate-950 rounded-[0.6rem] mt-6 shadow-md shadow-black dark:shadow-black dark:shadow-lg cursor-pointer"
-              ref={canvasRef}></canvas>
+
+              id="draw"
+              className={`whiteboard bg-slate-950 mt-[4vh] rounded-[0.6rem] shadow-md shadow-black dark:shadow-black dark:shadow-lg ${
+                isDrawing ? "cursor-pointer" : "cursor-default pointer-events-none" }
+            `}
+              ref={canvasRef}
+            ></canvas>
+
 
             {showMenuAndBgColor && <BgColorSidePanel canvasRef={canvasRef} setBgColor={setBgColor} />}
 
@@ -246,6 +253,10 @@ function App() {
                 <PiMinus />
                 <span className="ml-2"> Zoom out for an overview of your drawing.</span>
               </li>
+              <li className={style.guideline}>
+                <BiArea />
+                <span className="ml-2">Change your canvas size to preset values.</span>
+              </li>
               <li className={style.guideline}>
                 <FaRegEye />
                 <span className="ml-2">View only your canvas.</span>

diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx
@@ -3,19 +3,23 @@ import { PiPencilSimpleFill, PiPlus, PiMinus } from "react-icons/pi";
 import { FaFeatherPointed } from "react-icons/fa6";
 import { FaFilePdf } from "react-icons/fa";
 import { TbFileTypeSvg } from "react-icons/tb";
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { IoCloudDownloadOutline } from "react-icons/io5";
 
-import { BiSolidPolygon, BiPolygon } from "react-icons/bi";
+import { BiSolidPolygon } from "react-icons/bi";
+import { BiPolygon } from "react-icons/bi";
+import { BiArea } from "react-icons/bi";
+import { increaseHeight, decreaseHeight, changeAspect} from "../utils/canvas.js";
+
 import {
   convertToPDF,
   convertToSVG,
   convertToJPG,
   convertToPng,
 } from "../utils/canvas.js";
-import { increaseHeight, decreaseHeight } from "../utils/canvas.js";
+
 import DrawingShapes from "./DrawingShapes.jsx";
-import { useEffect, useRef } from "react";
+
 
 function Brush(props) {
   const {
@@ -129,26 +133,48 @@ const Menu = ({
   const [isOpen, setIsOpen] = useState(false);
   const [fillColor, setFillColor] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
-  const [bgColor, setBgColor] = useState("bg-slate-950");
+
+  const [bgColor, setBgColor] = useState('bg-slate-950');
+  const [isAspectDropOpen, setAspectDropOpen] = useState(false);
 
   const toggleDropdown = () => {
     if (!isVisible) {
       setIsDropdownOpen(!isDropdownOpen);
     }
   };
+
+  const toggleAspectDrop = () => {
+    setAspectDropOpen(!isAspectDropOpen); 
+  };
+
   const toggleVisible = () => {
     setIsVisible(!isVisible);
   };
 
   const toggleSaveAs = () => {
     setIsOpen(!isOpen);
   };
-
+  
   const handleBrushStyleChange = (style) => {
     setBrushStyle(style);
     setIsDropdownOpen(false); // Close the dropdown after selecting a style
   };
 
+  const aspectDropRef = useRef(null);
+
+  const handleOutClick = (event) => {
+    if (aspectDropRef.current && !aspectDropRef.current.contains(event.target)) {
+      setAspectDropOpen(false);
+    }
+  };
+
+  // useEffect(() => {
+  //   document.addEventListener("mousedown", handleOutClick);
+  //   return () => {
+  //     document.removeEventListener("mousedown", handleOutClick);
+  //   };
+  // }, [isAspectDropOpen]);
+
   return (
     <>
       <div className="scale-[0.8] max-w-[100%] bg-[#CBCCCF] shadow-mdm dark:bg-[#111111] flex flex-row justify-center items-center gap-[1rem] px-[1rem] pt-2 pb-2 rounded-[0.6rem]">
@@ -329,9 +355,41 @@ const Menu = ({
             title="DecreaseHeight"
           />
         </button>
+        <div className="relative inline-">
+        <button onClick={toggleAspectDrop} ref={aspectDropRef}>
+        <BiArea
+          className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] text-black cursor-pointer bg-[#CBCCCF] hover:bg-[#B7BABF] transform transition duration-300 ease-in-out`}
+          title="Canvas Size"
+        />
+      </button>
+      <div className={`absolute left-0 w-auto bg-[#CBCCCF] rounded-[0.5rem] mt-2 ${isAspectDropOpen ? "block" : "hidden"}`}>
+        <div className={`py-2 bg-[#CBCCCF] w-auto`}>
+          <button className={`block px-4 py-2 text-left hover:bg-gray-200 w-full dark:text-black dark:hover:bg-##3a3838`}
+            onClick={() => { toggleAspectDrop(); changeAspect(canvasRef.current, bgColor, thickness, color, brushStyle, 50, 80)}}>
+            16:9
+          </button>
+
+          <button className={`block px-4 py-2 text-left hover:bg-gray-200 w-full dark:text-black dark:hover:bg-##3a3838`}
+            onClick={() => { toggleAspectDrop(); changeAspect(canvasRef.current, bgColor, thickness, color, brushStyle, 70, 50)}}>
+            9:16         
+          </button>
+          <button className={`block px-4 py-2 text-left hover:bg-gray-200 w-full dark:text-black dark:hover:bg-##3a3838`}
+            onClick={() => { toggleAspectDrop(); changeAspect(canvasRef.current, bgColor, thickness, color, brushStyle, 50, 60)}}>
+            1:1
+          </button>
+          <button className={`block px-4 py-2 text-left hover:bg-gray-200 w-full dark:text-black dark:hover:bg-##3a3838`}
+            onClick={() => { toggleAspectDrop(); changeAspect(canvasRef.current, bgColor, thickness, color, brushStyle, 100, 100)}}>
+            Default
+          </button>
+          {/* <button className={`block px-4 py-2 text-left hover:bg-gray-200 w-full dark:text-black dark:hover:bg-##3a3838`}
+            onClick={() => { toggleAspectDrop(); changeAspect(canvasRef.current, bgColor, thickness, color, brushStyle, x, y)}}>
+            Add more options for aspect ratio 
+          </button> */}
+        </div>
+      </div>
+      </div>
       </div>
     </>
   );
 };
-
 export default Menu;
diff --git a/src/index.css b/src/index.css
@@ -19,8 +19,9 @@ body{
   -ms-user-select: none;       
 }
 
+
 #draw{
-  width: 90%;
+  /* width: 90%; */
   /* height: 70vh; */
 }
 

diff --git a/src/utils/canvas.js b/src/utils/canvas.js
@@ -1,11 +1,26 @@
 import jsPdf from "jspdf";
 import { Context } from "svgcanvas";
 let drawHistory = [];
+export function startDrawing(
+  canvas,
+  color,
+  lineThickness,
+  bgColor,
+  brushStyle
+) {
+  const ctx = canvas.getContext("2d");
+  canvas.width = window.innerWidth * 0.9; //default (onload)
+  canvas.height = window.innerHeight * 0.65;
+
+  canvas.width = window.innerWidth * 0.9;
+}
 
 export function handleDrawing(canvas, color, lineThickness, bgColor, brushStyle) {
   const ctx = canvas.getContext('2d');
   canvas.width = window.innerWidth * 0.8;
+
   canvas.height = window.innerHeight * 0.6;
+
   ctx.fillStyle = bgColor;
   ctx.fillRect(0, 0, canvas.width, canvas.height);
   canvas.setAttribute("willReadFrequently", "true");
@@ -237,7 +252,41 @@ export function decreaseHeight(canvas, bgColor, thickness, color, brushStyle) {
   handleUpdates(canvas, color, thickness, bgColor, brushStyle);
 }
 
+export function changeAspect(canvas, bgColor, thickness, color, brushStyle, hnum, wnum) {
+
+  const ctx = canvas.getContext("2d");
+  const histArray = [...drawHistory];
+  let newHeight, newWidth;
+
+  // Set new height
+  if(hnum== 100 && wnum==100){//default case 
+    newWidth = window.innerWidth * 0.8; 
+    newHeight = window.innerHeight * 0.6;
+  }
+  else{ 
+    //adjust wnum hnums of various options to adjust the size
+    newWidth = window.innerWidth * wnum/100;
+    newHeight = window.innerWidth * hnum/100;
+    }
+
+  // Save the current drawing and clear the canvas
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  clearCanvas(canvas, bgColor);
+
+  // Resize the canvas
+  canvas.height = newHeight;
+  canvas.width= newWidth;
+
+  // Redraw the portion of the drawing that fits in the new canvas size
+  ctx.putImageData(imageData, 0, 0);
+
+  // Update drawHistory to fit within new height
+  drawHistory = histArray.filter((point) => point.y <= newHeight);
+  handleUpdates(canvas, color, thickness, bgColor, brushStyle);
+}
+
 export function handleUpdates(canvas, color, lineThickness, bgColor, brushStyle) {
+
   const ctx = canvas.getContext("2d");
   ctx.lineWidth = lineThickness;
   ctx.strokeStyle = `${color}`;