41 lines
989 B
TypeScript
41 lines
989 B
TypeScript
import React from "react";
|
|
import { Slider } from "@/components/ui/slider";
|
|
|
|
interface Props {
|
|
scale: number;
|
|
setScale: React.Dispatch<React.SetStateAction<number>>;
|
|
canvasSize: CanvasSize;
|
|
}
|
|
|
|
function CanvasInformation({ scale, setScale, canvasSize }: Props) {
|
|
const onValueChange = (value: number[]) => {
|
|
setScale(value[0]);
|
|
};
|
|
|
|
return (
|
|
<div className="absolute right-4 bottom-4 flex items-end gap-1">
|
|
<div className="flex flex-col items-end gap-1">
|
|
<div className="info-child">{Math.floor(scale * 100)}%</div>
|
|
<div className="info-child">
|
|
<span>W: {canvasSize.maxX - canvasSize.minX} </span>
|
|
<span>H: {canvasSize.maxY - canvasSize.minY}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="info-child">
|
|
<Slider
|
|
defaultValue={[1]}
|
|
min={0.25}
|
|
max={32}
|
|
step={0.1}
|
|
value={[scale]}
|
|
onValueChange={onValueChange}
|
|
orientation="vertical"
|
|
className="!h-32"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CanvasInformation;
|