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

fix: center canvas on zoom slider change

Browse source
This commit is contained in:
trafficlunar 2024-12-14 20:18:26 +00:00
parent f89fe702e9
commit c4c7986a71
2 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Canvas.tsx
View file

@ -171,7 +171,7 @@ function Canvas() {
</Stage> </Stage>
<CursorInformation mouseCoords={mouseCoords} blocks={blocks} /> <CursorInformation mouseCoords={mouseCoords} blocks={blocks} />
<CanvasInformation scale={scale} setScale={setScale} canvasSize={canvasSize} /> <CanvasInformation scale={scale} setScale={setScale} setCoords={setCoords} canvasSize={canvasSize} stageSize={stageSize} />
</div> </div>
); );
} }

16
src/components/information/Canvas.tsx
View file

@ -4,12 +4,24 @@ import { Slider } from "@/components/ui/slider";
interface Props { interface Props {
scale: number; scale: number;
setScale: React.Dispatch<React.SetStateAction<number>>; setScale: React.Dispatch<React.SetStateAction<number>>;
setCoords: React.Dispatch<React.SetStateAction<Position>>;
canvasSize: CanvasSize; canvasSize: CanvasSize;
stageSize: Dimension;
} }
function CanvasInformation({ scale, setScale, canvasSize }: Props) { function CanvasInformation({ scale, setScale, setCoords, canvasSize, stageSize }: Props) {
const onValueChange = (value: number[]) => { const onValueChange = (value: number[]) => {
setScale(value[0]); const newScale = value[0];
setScale(newScale);
// Center canvas
const blockCenterX = ((canvasSize.minX + canvasSize.maxX) * 16) / 2;
const blockCenterY = ((canvasSize.minY + canvasSize.maxY) * 16) / 2;
setCoords({
x: stageSize.width / 2 - blockCenterX * newScale,
y: stageSize.height / 2 - blockCenterY * newScale,
});
}; };
return ( return (