From f8f5f13c36ff85525f0dd0d7eb6e3f9430c1e71b Mon Sep 17 00:00:00 2001 From: Komal Date: Fri, 26 Jul 2024 20:05:52 +0530 Subject: [PATCH 1/4] Add title on hover --- Draw-it-out | 1 + index.html | 2 - package-lock.json | 39 ++++- src/components/DrawingShapes.jsx | 129 +++++++++------ src/components/Footer.jsx | 139 +++++----------- src/components/Menu.jsx | 270 +++++++++++++++---------------- src/index.css | 80 ++++----- 7 files changed, 333 insertions(+), 327 deletions(-) create mode 160000 Draw-it-out diff --git a/Draw-it-out b/Draw-it-out new file mode 160000 index 0000000..a35606c --- /dev/null +++ b/Draw-it-out @@ -0,0 +1 @@ +Subproject commit a35606c14c420c98df408cc7f568aecde7fb9198 diff --git a/index.html b/index.html index 5ae251d..0ff594f 100644 --- a/index.html +++ b/index.html @@ -14,11 +14,9 @@ Draw it out! -
- diff --git a/package-lock.json b/package-lock.json index f0bb14c..341a663 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "react-dom": "^18.2.0", "react-icons": "^5.2.1", "react-joyride": "^2.8.1", + "react-modal": "^3.16.1", "react-simple-chatbot": "^0.5.0", "rollup": "^4.18.0", "svgcanvas": "^2.5.0" @@ -2491,6 +2492,11 @@ "node": ">=0.10.0" } }, + "node_modules/exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==" + }, "node_modules/fabric": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/fabric/-/fabric-5.3.0.tgz", @@ -4670,6 +4676,29 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "node_modules/react-modal": { + "version": "3.16.1", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz", + "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==", + "dependencies": { + "exenv": "^1.2.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + }, + "engines": { + "node": ">=8" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18", + "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18" + } + }, "node_modules/react-refresh": { "version": "0.14.0", "dev": true, @@ -5936,6 +5965,14 @@ "node": ">=12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/webidl-conversions": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", @@ -6292,4 +6329,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/components/DrawingShapes.jsx b/src/components/DrawingShapes.jsx index af9f4d4..4ebd0a8 100644 --- a/src/components/DrawingShapes.jsx +++ b/src/components/DrawingShapes.jsx @@ -4,6 +4,7 @@ import circleImg from "../assets/images/circle.svg"; import triangleImg from "../assets/images/triangle.svg"; import lineImg from "../assets/images/line.svg"; import { GiPencilBrush } from "react-icons/gi"; + const DrawingShapes = ({ brushWidth, selectedColor, @@ -15,22 +16,22 @@ const DrawingShapes = ({ const [isDrawing, setIsDrawing] = useState(false); const [prevMouseX, setPrevMouseX] = useState(0); const [prevMouseY, setPrevMouseY] = useState(0); - const [snapshot, setSnapshot] = useState(null); const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [currentToolName, setCurrentToolName] = useState(); const shapeDropRef = useRef(null); - const handleoutsideClick = (event) => { + const handleOutsideClick = (event) => { if (shapeDropRef.current && !shapeDropRef.current.contains(event.target)) { setIsDropdownOpen(false); } }; useEffect(() => { - document.addEventListener("mousedown", handleoutsideClick); + document.addEventListener("mousedown", handleOutsideClick); return () => { - document.removeEventListener("mousedown", handleoutsideClick); + document.removeEventListener("mousedown", handleOutsideClick); }; }, [isDropdownOpen]); @@ -56,7 +57,8 @@ const DrawingShapes = ({ ctx.putImageData(snapshot, 0, 0); ctx.beginPath(); const radius = Math.sqrt( - Math.pow(prevMouseX - e.offsetX, 2) + Math.pow(prevMouseY - e.offsetY, 2) + Math.pow(prevMouseX - e.offsetX, 2) + + Math.pow(prevMouseY - e.offsetY, 2) ); ctx.arc(prevMouseX, prevMouseY, radius, 0, 2 * Math.PI); fillColor ? ctx.fill() : ctx.stroke(); @@ -95,7 +97,15 @@ const DrawingShapes = ({ ctx.translate(prevMouseX, prevMouseY); ctx.rotate(angle); ctx.beginPath(); - ctx.rect(0, -brushWidth / 2, Math.sqrt(Math.pow(e.offsetX - prevMouseX, 2) + Math.pow(e.offsetY - prevMouseY, 2)), brushWidth); + ctx.rect( + 0, + -brushWidth / 2, + Math.sqrt( + Math.pow(e.offsetX - prevMouseX, 2) + + Math.pow(e.offsetY - prevMouseY, 2) + ), + brushWidth + ); ctx.fillStyle = selectedColor; ctx.fill(); ctx.restore(); @@ -171,7 +181,17 @@ const DrawingShapes = ({ canvas.removeEventListener("mouseup", stopDrawing); canvas.removeEventListener("mouseout", stopDrawing); }; - }, [brushWidth, fillColor, selectedTool, selectedColor, snapshot, canvasRef, isDrawing, prevMouseX, prevMouseY]); + }, [ + brushWidth, + fillColor, + selectedTool, + selectedColor, + snapshot, + canvasRef, + isDrawing, + prevMouseX, + prevMouseY, + ]); function toggleDropDown() { setIsDropdownOpen(!isDropdownOpen); @@ -201,49 +221,55 @@ const DrawingShapes = ({ const [lower, setLower] = useState(false); - const handleBrushSelect = (brush) => { + const handleBrushSelect = (brush, brushName) => { setSelectedTool(brush); + setCurrentToolName(brushName); setIsDropdownOpen(false); // Close dropdown after selection }; return ( <> -
+
- {lower && ( -
-
handleBrushSelect("rounded")} - className="hover:bg-gray-400 p-2 cursor-pointer" - > -

Rounded Brush

-
-
handleBrushSelect("flat")} - className="hover:bg-gray-400 p-2 cursor-pointer" - > -

Flat Brush

-
-
handleBrushSelect("watercolor")} - className="hover:bg-gray-400 p-2 cursor-pointer" - > -

Watercolor Brush

-
-
handleBrushSelect("blur")} - className="hover:bg-gray-400 p-2 cursor-pointer" - > -

Blur Brush

-
-
- )} + Brush
+ {lower && ( +
+
handleBrushSelect("rounded", "Rounded Brush")} + className="hover:bg-gray-400 p-2 cursor-pointer relative group tooltip" + > +

Rounded Brush

+ Rounded Brush +
+
handleBrushSelect("flat", "Flat Brush")} + className="hover:bg-gray-400 p-2 cursor-pointer relative group tooltip" + > +

Flat Brush

+ Flat Brush +
+
handleBrushSelect("watercolor", "Watercolor Brush")} + className="hover:bg-gray-400 p-2 cursor-pointer relative group tooltip" + > +

Watercolor Brush

+ Watercolor Brush +
+
handleBrushSelect("blur", "Blur Brush")} + className="hover:bg-gray-400 p-2 cursor-pointer relative group tooltip" + > +

Blur Brush

+ Blur Brush +
+
+ )}
+
+ {currentToolName} +
    {isDropdownOpen ? ( <>
  • { - setSelectedTool("rectangle"); - setIsDropdownOpen(false); + handleBrushSelect("rectangle", "Rectangle"); }} > Rectangle + Rectangle
  • { - setSelectedTool("circle"); - setIsDropdownOpen(false); + handleBrushSelect("circle", "Circle"); }} > Circle + Circle
  • { - setSelectedTool("triangle"); - setIsDropdownOpen(false); + handleBrushSelect("triangle", "Triangle"); }} > Triangle + Triangle
  • { - setSelectedTool("line"); - setIsDropdownOpen(false); + handleBrushSelect("line", "Line"); }} > Line + Line
    • ) : ( diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 589c215..d515e64 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -1,128 +1,75 @@ -import React, { useState } from 'react'; -import Modal from 'react-modal'; -import { AiOutlineInfoCircle, AiOutlineMessage, AiOutlineTeam } from 'react-icons/ai'; -import { FaNewspaper, FaStar } from 'react-icons/fa'; -import { FiMail } from 'react-icons/fi'; - -import LinkedInIcon from '../assets/images/linkedin.jpg'; -import TwitterIcon from '../assets/images/X.png'; -import GitHubIcon from '../assets/images/github.png'; -import FooterLink from './FooterLink'; - -Modal.setAppElement('#root'); - +import { FaXTwitter } from "react-icons/fa6"; +import { FaLinkedinIn } from "react-icons/fa"; +import { FaGithub } from "react-icons/fa"; +import { CiMail } from "react-icons/ci"; const Footer = () => { - const [modalIsOpen, setModalIsOpen] = useState(false); - const [modalContent, setModalContent] = useState(''); - - const openModal = (content) => { - setModalContent(content); - setModalIsOpen(true); - }; - - const closeModal = () => { - setModalIsOpen(false); - setModalContent(''); - }; - return ( -