44 lines
No EOL
1.3 KiB
JavaScript
44 lines
No EOL
1.3 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 { useContext, useState, useEffect } from 'react'
|
|
|
|
const RotateCustomization = () => {
|
|
const { canvas } = useContext(CanvasContext);
|
|
const { activeObject } = useContext(ActiveObjectContext);
|
|
|
|
const [rotationAngle, setRotationAngle] = useState(0);
|
|
|
|
useEffect(() => {
|
|
if (activeObject) {
|
|
setRotationAngle(activeObject?.angle)
|
|
}
|
|
}, [activeObject])
|
|
|
|
const handleRotation = (e) => {
|
|
activeObject.set({ angle: e });
|
|
setRotationAngle(e);
|
|
canvas.remove(activeObject);
|
|
canvas.add(activeObject);
|
|
canvas.setActiveObject(activeObject);
|
|
canvas.renderAll();
|
|
}
|
|
|
|
return (
|
|
<div className="grid gap-2 pb-1">
|
|
<Label className="">Rotation Angle: {rotationAngle}°</Label>
|
|
<Slider
|
|
min={0}
|
|
max={360}
|
|
step={1}
|
|
value={[rotationAngle]}
|
|
onValueChange={(value) =>
|
|
handleRotation(value[0])
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RotateCustomization |