67 lines
2.1 KiB
JavaScript
67 lines
2.1 KiB
JavaScript
import ActiveObjectContext from "@/components/Context/activeObject/ObjectContext";
|
|
import CanvasContext from "@/components/Context/canvasContext/CanvasContext";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Slider } from "@/components/ui/slider";
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover";
|
|
import { useContext, useEffect, useState } from "react";
|
|
import { BsTransparency } from "react-icons/bs";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Tooltip } from "react-tooltip";
|
|
|
|
const OpacityCustomization = () => {
|
|
const { activeObject } = useContext(ActiveObjectContext);
|
|
const { canvas } = useContext(CanvasContext);
|
|
const [opacity, setOpacity] = useState(0);
|
|
|
|
useEffect(() => {
|
|
if (activeObject) {
|
|
setOpacity(activeObject?.opacity);
|
|
}
|
|
}, [activeObject]);
|
|
|
|
const adjustBackgroundOpacity = (newOpacity) => {
|
|
setOpacity(newOpacity);
|
|
if (activeObject) {
|
|
activeObject.set("opacity", newOpacity);
|
|
canvas.renderAll();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<a data-tooltip-id="opacity-ic">
|
|
<Button variant="ghost" size="icon" className="h-8 w-8">
|
|
<BsTransparency className="h-4 w-4" size={20} />
|
|
</Button>
|
|
</a>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-64 mt-3">
|
|
<div className="grid gap-4">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-sm font-medium">Opacity</Label>
|
|
<span className="text-sm text-gray-500">
|
|
{Math.round(opacity * 100)}%
|
|
</span>
|
|
</div>
|
|
<Slider
|
|
value={[opacity]}
|
|
min={0}
|
|
max={1}
|
|
step={0.01}
|
|
onValueChange={(value) => adjustBackgroundOpacity(value[0])}
|
|
/>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<Tooltip id="opacity-ic" content="Transparency" place="bottom" />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OpacityCustomization;
|