diff --git a/src/App.jsx b/src/App.jsx index c31b881..a782ef9 100644 --- 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 ------ */} + + 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} + > + {showMenuAndBgColor && } @@ -246,6 +253,10 @@ function App() { Zoom out for an overview of your drawing. +
  • + + Change your canvas size to preset values. +
  • View only your canvas. diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx index d99e13c..3a6cb16 100644 --- 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,13 +133,20 @@ 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); }; @@ -143,12 +154,27 @@ const Menu = ({ 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 ( <>
    @@ -329,9 +355,41 @@ const Menu = ({ title="DecreaseHeight" /> +
    + +
    +
    + + + + + + {/* */} +
    +
    +
    ); }; - export default Menu; diff --git a/src/index.css b/src/index.css index 6a11079..af92662 100644 --- 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 index 6421cb9..8fb4e20 100644 --- 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}`;