research/statebuddy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

disable zoom buttons on min/max zoom

Browse source
This commit is contained in:
Joeri Exelmans 2025-10-22 09:58:47 +02:00
parent 7c66cc1878
commit 098a6d7e78
2 changed files with 11 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/App/TopPanel.tsx
View file

@ -24,6 +24,7 @@ import { KeyInfoHidden, KeyInfoVisible } from "./KeyInfo";
import { About } from "./About"; import { About } from "./About";
import { usePersistentState } from "@/util/persistent_state"; import { usePersistentState } from "@/util/persistent_state";
import { RountangleIcon, PseudoStateIcon, HistoryIcon } from "./Icons"; import { RountangleIcon, PseudoStateIcon, HistoryIcon } from "./Icons";
import { ZOOM_MAX, ZOOM_MIN, ZOOM_STEP } from "@/VisualEditor/parameters";
export type TopPanelProps = { export type TopPanelProps = {
rt?: BigStep, rt?: BigStep,
@ -136,10 +137,10 @@ export function TopPanel({rt, rtIdx, time, setTime, onUndo, onRedo, onInit, onCl
}, [time]); }, [time]);
function onZoomIn() { function onZoomIn() {
setZoom(zoom => Math.min(zoom * 1.25, (1.25)**6)); setZoom(zoom => Math.min(zoom * ZOOM_STEP, ZOOM_MAX));
} }
function onZoomOut() { function onZoomOut() {
setZoom(zoom => Math.max(zoom / 1.25, (1/1.25)**6)); setZoom(zoom => Math.max(zoom / ZOOM_STEP, ZOOM_MIN));
} }
function onChangePaused(paused: boolean, wallclktime: number) { function onChangePaused(paused: boolean, wallclktime: number) {
@ -211,11 +212,11 @@ export function TopPanel({rt, rtIdx, time, setTime, onUndo, onRedo, onInit, onCl
{/* zoom */} {/* zoom */}
<div className="toolbarGroup"> <div className="toolbarGroup">
<KeyInfo keyInfo={<><kbd>Ctrl</kbd>+<kbd>-</kbd></>}> <KeyInfo keyInfo={<><kbd>Ctrl</kbd>+<kbd>-</kbd></>}>
<button title="zoom out" onClick={onZoomOut}><ZoomOutIcon fontSize="small"/></button> <button title="zoom out" onClick={onZoomOut} disabled={zoom <= ZOOM_MIN}><ZoomOutIcon fontSize="small"/></button>
</KeyInfo> </KeyInfo>
<input title="current zoom level" value={zoom.toFixed(3)} style={{width:40}} readOnly/> <input title="current zoom level" value={zoom.toFixed(3)} style={{width:40}} readOnly/>
<KeyInfo keyInfo={<><kbd>Ctrl</kbd>+<kbd>+</kbd></>}> <KeyInfo keyInfo={<><kbd>Ctrl</kbd>+<kbd>+</kbd></>}>
<button title="zoom in" onClick={onZoomIn}><ZoomInIcon fontSize="small"/></button> <button title="zoom in" onClick={onZoomIn} disabled={zoom >= ZOOM_MAX}><ZoomInIcon fontSize="small"/></button>
</KeyInfo> </KeyInfo>
&emsp; &emsp;
</div> </div>

7
src/VisualEditor/parameters.ts
View file

@ -9,4 +9,9 @@ export const MIN_ROUNTANGLE_SIZE = { x: ROUNTANGLE_RADIUS*2, y: ROUNTANGLE_RADIU
export const CORNER_HELPER_OFFSET = 4; export const CORNER_HELPER_OFFSET = 4;
export const CORNER_HELPER_RADIUS = 16; export const CORNER_HELPER_RADIUS = 16;
export const HISTORY_RADIUS = 20; export const HISTORY_RADIUS = 20;
export const ZOOM_STEP = 1.25;
export const ZOOM_MIN = (1/ZOOM_STEP)**6;
export const ZOOM_MAX = ZOOM_STEP**6;