Skip to content

Commit

Permalink
Add title on hover
Browse files Browse the repository at this point in the history
  • Loading branch information
@KomalSrivastava
KomalSrivastava committed Aug 9, 2024
1 parent c29c866 commit 410d55f
Show file tree
Hide file tree
Showing 4 changed files with 336 additions and 212 deletions.
131 changes: 80 additions & 51 deletions src/components/DrawingShapes.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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]);

Expand All @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -201,100 +221,109 @@ 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 (
<>
<div>
<div className="tooltip">
<button
className=" h-10 p-2 rounded-md text-xl shadow-md hover:bg-gray-400"
style={{ backgroundColor: '#D1D5DB', color: '#000' }}
className="h-10 p-2 rounded-md text-xl shadow-md hover:bg-gray-400"
style={{ backgroundColor: "#D1D5DB", color: "#000" }}
onClick={() => setLower(!lower)}
>
<GiPencilBrush />
</button>
{lower && (
<div className="absolute bg-slate-300 p-1 h-40 overflow-auto">
<div
onClick={() => handleBrushSelect("rounded")}
className="hover:bg-gray-400 p-2 cursor-pointer"
>
<h1 className="mb-2">Rounded Brush</h1>
</div>
<div
onClick={() => handleBrushSelect("flat")}
className="hover:bg-gray-400 p-2 cursor-pointer"
>
<h1 className="mb-2">Flat Brush</h1>
</div>
<div
onClick={() => handleBrushSelect("watercolor")}
className="hover:bg-gray-400 p-2 cursor-pointer"
>
<h1 className="mb-2">Watercolor Brush</h1>
</div>
<div
onClick={() => handleBrushSelect("blur")}
className="hover:bg-gray-400 p-2 cursor-pointer"
>
<h1 className="mb-2">Blur Brush</h1>
</div>
</div>
)}
<span className="tooltiptext">Brush</span>
</div>
{lower && (
<div className="absolute bg-slate-300 p-1 h-40 overflow-auto">
<div
onClick={() => handleBrushSelect("rounded", "Rounded Brush")}
className="hover:bg-gray-400 p-2 cursor-pointer relative group tooltip"
>
<h1 className="mb-2">Rounded Brush</h1>
<span className="tooltiptext">Rounded Brush</span>
</div>
<div
onClick={() => handleBrushSelect("flat", "Flat Brush")}
className="hover:bg-gray-400 p-2 cursor-pointer relative group tooltip"
>
<h1 className="mb-2">Flat Brush</h1>
<span className="tooltiptext">Flat Brush</span>
</div>
<div
onClick={() => handleBrushSelect("watercolor", "Watercolor Brush")}
className="hover:bg-gray-400 p-2 cursor-pointer relative group tooltip"
>
<h1 className="mb-2">Watercolor Brush</h1>
<span className="tooltiptext">Watercolor Brush</span>
</div>
<div
onClick={() => handleBrushSelect("blur", "Blur Brush")}
className="hover:bg-gray-400 p-2 cursor-pointer relative group tooltip"
>
<h1 className="mb-2">Blur Brush</h1>
<span className="tooltiptext">Blur Brush</span>
</div>
</div>
)}

<div
className="drawing-container flex-shrink-0"
onClick={toggleDropDown}
ref={shapeDropRef}
>
<div className="relative controls">
<div className="text-center mb-2 p-2 bg-blue-200 rounded text-blue-800">
{currentToolName}
</div>
<ul className="options flex relative w-[50px]">
<div className="absolute md:top-[-20px] top-[-16px] flex flex-col text-[2rem] md:text-[3rem] shadow-vsm rounded-[0.5rem] text-black cursor-pointer bg-[#CBCCCF] transform transition duration-300 ease-in-out">
{isDropdownOpen ? (
<>
<li
className="hover:bg-[#B7BABF] p-[0.5rem] md:p-[0.8rem]"
className="hover:bg-[#B7BABF] p-[0.5rem] md:p-[0.8rem] relative tooltip"
id="rectangle"
onClick={() => {
setSelectedTool("rectangle");
setIsDropdownOpen(false);
handleBrushSelect("rectangle", "Rectangle");
}}
>
<img src={rectImg} alt="Rectangle" />
<span className="tooltiptext">Rectangle</span>
</li>
<li
className="hover:bg-[#B7BABF] p-[0.5rem] md:p-[0.8rem]"
className="hover:bg-[#B7BABF] p-[0.5rem] md:p-[0.8rem] relative tooltip"
id="circle"
onClick={() => {
setSelectedTool("circle");
setIsDropdownOpen(false);
handleBrushSelect("circle", "Circle");
}}
>
<img src={circleImg} alt="Circle" />
<span className="tooltiptext">Circle</span>
</li>
<li
className="hover:bg-[#B7BABF] p-[0.5rem] md:p-[0.8rem]"
className="hover:bg-[#B7BABF] p-[0.5rem] md:p-[0.8rem] relative tooltip"
id="triangle"
onClick={() => {
setSelectedTool("triangle");
setIsDropdownOpen(false);
handleBrushSelect("triangle", "Triangle");
}}
>
<img src={triangleImg} alt="Triangle" />
<span className="tooltiptext">Triangle</span>
</li>
<li
className="hover:bg-[#B7BABF] px-[0.5rem] py-[0.5rem] md:py-[1rem] md:px-[0.8rem]"
className="hover:bg-[#B7BABF] px-[0.5rem] py-[0.5rem] md:py-[1rem] md:px-[0.8rem] relative tooltip"
id="line"
onClick={() => {
setSelectedTool("line");
setIsDropdownOpen(false);
handleBrushSelect("line", "Line");
}}
>
<img src={lineImg} alt="Line" />
<span className="tooltiptext">Line</span>
</li>
</>
) : (
Expand Down
49 changes: 18 additions & 31 deletions src/components/Footer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,37 @@
import React from "react";
import {
AiOutlineInfoCircle,
AiOutlineMessage,
AiOutlineTeam,
} from "react-icons/ai";
import {
FaNewspaper,
FaLinkedin,
FaTwitter,
FaGithub,
FaNewspaper,
FaInstagram,
FaYoutube,
FaGithub,
} from "react-icons/fa";
import {
AiOutlineInfoCircle,
AiOutlineMessage,
AiOutlineTeam,
} from "react-icons/ai";

const Footer = () => {
return (
<footer className="relative bg-black gap-52 md:gap-0">
<div className="flex flex-col items-center gap-20 px-8 py-4 justify-evenly md:justify-between md:flex-row ">
<div className="footerNav ">
<footer className="relative bg-black">
<div className="flex flex-col items-center gap-20 px-8 py-4 justify-evenly md:justify-between md:flex-row">
<div className="footerNav">
<ul className="flex flex-wrap gap-4 justify-evenly md:justify-between">
{[
{ label: "News", icon: FaNewspaper, content: "News Content" },
{
label: "About Us",
icon: AiOutlineInfoCircle,
content: "About Us Content",
},
{
label: "Contact Us",
icon: AiOutlineMessage,
content: "Contact Us Content",
link:'/contact'
},
{
label: "Our Team",
icon: AiOutlineTeam,
content: "Our Team Content",
link:'/team'
},
{ label: "Home", href: "#" },
{ label: "News", href: "#", icon: FaNewspaper },
{ label: "About Us", href: "#", icon: AiOutlineInfoCircle },
{ label: "Contact Us", href: "/contact", icon: AiOutlineMessage },
{ label: "Our Team", href: "/team", icon: AiOutlineTeam },
].map((item, index) => (
<li key={index}>
<a
href={item.link}
href={item.href}
className="flex items-center text-white hover:text-gray-600"
>
<item.icon className="w-6 h-6" />
{item.icon && <item.icon className="w-6 h-6" />}
<span className="ml-2">{item.label}</span>
</a>
</li>
Expand Down Expand Up @@ -106,7 +93,7 @@ const Footer = () => {
>
Master Mickey
</a>{" "}
Copyright &copy;{new Date().getFullYear()}
&copy;{new Date().getFullYear()}
</p>
</div>
</footer>
Expand Down
Loading

0 comments on commit 410d55f

Please sign in to comment.