94 lines
3.4 KiB
JavaScript
94 lines
3.4 KiB
JavaScript
import ActiveObjectContext from "@/components/Context/activeObject/ObjectContext";
|
|
import CanvasContext from "@/components/Context/canvasContext/CanvasContext";
|
|
import { Card } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { useContext, useEffect, useState } from "react";
|
|
import CollapsibleComponent from "./CollapsibleComponent";
|
|
|
|
const ScaleObjects = () => {
|
|
const { canvas } = useContext(CanvasContext); // Access Fabric.js canvas from context
|
|
const { activeObject } = useContext(ActiveObjectContext);
|
|
const [scaleX, setScaleX] = useState(1);
|
|
const [scaleY, setScaleY] = useState(1);
|
|
|
|
useEffect(() => {
|
|
if (activeObject) {
|
|
setScaleX(activeObject?.scaleX);
|
|
setScaleY(activeObject?.scaleY);
|
|
}
|
|
}, [activeObject])
|
|
|
|
// Handle scaleX changes
|
|
const handleScaleXChange = (value) => {
|
|
const newScaleX = Math.max(0.001, Math.min(value)); // Clamp scaleX between 0.001 and 3
|
|
setScaleX(newScaleX);
|
|
if (canvas && activeObject) {
|
|
activeObject.scaleX = newScaleX;
|
|
canvas.discardActiveObject();
|
|
canvas.setActiveObject(activeObject);
|
|
canvas.renderAll(); // Re-render the canvas
|
|
}
|
|
};
|
|
|
|
// Handle scaleY changes
|
|
const handleScaleYChange = (value) => {
|
|
const newScaleY = Math.max(0.001, Math.min(value)); // Clamp scaleY between 0.001 and 3
|
|
setScaleY(newScaleY);
|
|
if (canvas && activeObject) {
|
|
activeObject.scaleY = newScaleY;
|
|
canvas.discardActiveObject();
|
|
canvas.setActiveObject(activeObject);
|
|
canvas.renderAll(); // Re-render the canvas
|
|
}
|
|
};
|
|
|
|
const content = () => {
|
|
return (
|
|
<div className="grid grid-cols-2 items-center gap-1">
|
|
{/* Scale X Input */}
|
|
<div className="flex flex-col space-y-1">
|
|
<label className="text-xs font-medium">X: {scaleX.toFixed(3)}</label>
|
|
<Input
|
|
type="number"
|
|
step="0.010"
|
|
min="0.001"
|
|
value={scaleX}
|
|
onChange={(e) => {
|
|
const inputValue = parseFloat(e.target.value);
|
|
if (!isNaN(inputValue)) {
|
|
handleScaleXChange(inputValue);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Scale Y Input */}
|
|
<div className="flex flex-col space-y-1">
|
|
<label className="text-xs font-medium">Y: {scaleY.toFixed(3)}</label>
|
|
<Input
|
|
type="number"
|
|
step="0.010"
|
|
min="0.001"
|
|
value={scaleY}
|
|
onChange={(e) => {
|
|
const inputValue = parseFloat(e.target.value);
|
|
if (!isNaN(inputValue)) {
|
|
handleScaleYChange(inputValue);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Card className="grid items-center gap-2 p-2">
|
|
<CollapsibleComponent text={"Scale Control"}>
|
|
{content()}
|
|
</CollapsibleComponent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default ScaleObjects;
|