trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: improve zoom slider with logarithmic scaling

Browse source
This commit is contained in:
trafficlunar 2025-01-24 15:45:13 +00:00
parent 4b59e9b4be
commit 8925ebebb6
1 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/canvas/information/Canvas.tsx
View file

@ -6,7 +6,7 @@ function CanvasInformation() {
const { stageSize, canvasSize, scale, setCoords, setScale } = useContext(CanvasContext); const { stageSize, canvasSize, scale, setCoords, setScale } = useContext(CanvasContext);
const onValueChange = (value: number[]) => { const onValueChange = (value: number[]) => {
const newScale = value[0]; const newScale = Math.pow(10, value[0]);
setScale(newScale); setScale(newScale);
// Center canvas // Center canvas
@ -32,10 +32,10 @@ function CanvasInformation() {
<div className="info-child"> <div className="info-child">
<Slider <Slider
defaultValue={[1]} defaultValue={[1]}
min={0.1} min={-1} // 10^(-1) = 0.1
max={32} max={1.50515} // 10^(1.50515) = ≈32
step={0.1} step={0.01}
value={[scale]} value={[Math.log10(scale)]}
onValueChange={onValueChange} onValueChange={onValueChange}
orientation="vertical" orientation="vertical"
className="!h-32" className="!h-32"