103 lines
3.1 KiB
JavaScript
103 lines
3.1 KiB
JavaScript
import { Button } from "../ui/Button";
|
|
import { X } from "lucide-react";
|
|
import { ScrollArea } from "../ui/scroll-area";
|
|
import { useContext, useEffect, useState } from "react";
|
|
import CanvasContext from "../Context/canvasContext/CanvasContext";
|
|
import ActiveObjectContext from "../Context/activeObject/ObjectContext";
|
|
import { fabric } from "fabric";
|
|
import CommonPanel from "./CommonPanel";
|
|
|
|
export default function TextPanel() {
|
|
const { canvas, setSelectedPanel } = useContext(CanvasContext);
|
|
const { activeObject, setActiveObject } = useContext(ActiveObjectContext);
|
|
|
|
const [open, setOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (activeObject) {
|
|
setOpen(true);
|
|
} else {
|
|
setOpen(false);
|
|
}
|
|
}, [activeObject]);
|
|
|
|
const addText = () => {
|
|
if (canvas) {
|
|
const text = new fabric.IText("Editable Text", {
|
|
left: 100,
|
|
top: 100,
|
|
fontFamily: "Poppins",
|
|
fontSize: 16,
|
|
stroke: "", // empty string for no stroke color
|
|
strokeWidth: 0, // set stroke width to 0
|
|
});
|
|
// Add the text to the canvas and re-render
|
|
canvas.add(text);
|
|
// canvas.clipPath = text;
|
|
canvas.setActiveObject(text);
|
|
setActiveObject(text);
|
|
canvas.renderAll();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex justify-between items-center p-4 border-b">
|
|
<h2 className="text-lg font-semibold">Text</h2>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setSelectedPanel("")}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<ScrollArea className="md:h-[calc(90vh-195px)] px-4 py-4">
|
|
<Button
|
|
className="w-full bg-[#FF2B85] hover:bg-[#FF2B85] text-white rounded-[10px] mb-6 h-12 font-medium text-xl"
|
|
onClick={() => {
|
|
addText();
|
|
}}
|
|
>
|
|
Add Text
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M7.5 18.3333H12.5C16.6667 18.3333 18.3333 16.6666 18.3333 12.5V7.49996C18.3333 3.33329 16.6667 1.66663 12.5 1.66663H7.5C3.33333 1.66663 1.66667 3.33329 1.66667 7.49996V12.5C1.66667 16.6666 3.33333 18.3333 7.5 18.3333Z"
|
|
stroke="white"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path
|
|
d="M5.83333 7.40837C8.45833 6.10004 11.5417 6.10004 14.1667 7.40837"
|
|
stroke="white"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path
|
|
d="M10 13.5833V6.60828"
|
|
stroke="white"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</Button>
|
|
{!open ? (
|
|
<p className="text-sm font-semibold text-center">
|
|
No active object found
|
|
</p>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<CommonPanel />
|
|
</div>
|
|
)}
|
|
</ScrollArea>
|
|
</div>
|
|
);
|
|
}
|