75 lines
2.1 KiB
JavaScript
75 lines
2.1 KiB
JavaScript
import ActiveObjectContext from "@/components/Context/activeObject/ObjectContext";
|
|
import CanvasContext from "@/components/Context/canvasContext/CanvasContext";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import { useContext, useEffect, useState } from "react";
|
|
import { Lock, Unlock } from "lucide-react";
|
|
import { Tooltip } from "react-tooltip";
|
|
|
|
const LockObject = () => {
|
|
const { canvas } = useContext(CanvasContext);
|
|
const { activeObject } = useContext(ActiveObjectContext);
|
|
const [isLocked, setIsLocked] = useState(false);
|
|
const { toast } = useToast();
|
|
|
|
useEffect(() => {
|
|
if (activeObject?.lockMovementX === false) {
|
|
setIsLocked(false);
|
|
} else {
|
|
setIsLocked(true);
|
|
}
|
|
}, [activeObject]);
|
|
|
|
const toggleLock = () => {
|
|
if (!canvas || !activeObject) {
|
|
toast({
|
|
title: "No object selected",
|
|
description: "Please select an object to lock or unlock.",
|
|
variant: "destructive",
|
|
});
|
|
return;
|
|
}
|
|
|
|
const newLockState = !activeObject.lockMovementX;
|
|
activeObject.set({
|
|
lockMovementX: newLockState,
|
|
lockMovementY: newLockState,
|
|
lockRotation: newLockState,
|
|
lockScalingX: newLockState,
|
|
lockScalingY: newLockState,
|
|
});
|
|
|
|
setIsLocked(newLockState);
|
|
canvas.requestRenderAll();
|
|
|
|
toast({
|
|
title: newLockState ? "Object locked" : "Object unlocked",
|
|
description: newLockState
|
|
? "The object is now locked in place."
|
|
: "The object can now be moved and resized.",
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="shadow-none border-0">
|
|
<a data-tooltip-id="lock">
|
|
<Button
|
|
onClick={toggleLock}
|
|
variant="outline"
|
|
size="icon"
|
|
disabled={!activeObject}
|
|
title={isLocked ? "Unlock object" : "Lock object"}
|
|
>
|
|
{isLocked ? (
|
|
<Unlock className="h-4 w-4" />
|
|
) : (
|
|
<Lock className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
</a>
|
|
<Tooltip id="lock" content="Lock object" place="bottom" />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LockObject;
|