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

implement zoom

Browse source
This commit is contained in:
Joeri Exelmans 2025-10-22 09:39:50 +02:00
parent 523e00d5dc
commit 6bbb230636
5 changed files with 54 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/App/App.tsx
View file

@ -45,6 +45,7 @@ export function App() {
const [time, setTime] = useState<TimeMode>({kind: "paused", simtime: 0});
const [modal, setModal] = useState<ReactElement|null>(null);
const [plantName, setPlantName] = usePersistentState("plant", "dummy");
const [zoom, setZoom] = usePersistentState("zoom", 1);
const plant = plants.find(([pn, p]) => pn === plantName)![1];
@ -248,12 +249,12 @@ export function App() {
>
<TopPanel
rt={rtIdx === undefined ? undefined : rt[rtIdx]}
{...{rtIdx, ast, time, setTime, onUndo, onRedo, onInit, onClear, onRaise, onBack, mode, setMode, setModal}}
{...{rtIdx, ast, time, setTime, onUndo, onRedo, onInit, onClear, onRaise, onBack, mode, setMode, setModal, zoom, setZoom}}
/>
</Box>
{/* Below the top bar: Editor */}
<Box sx={{flexGrow:1, overflow: "auto"}}>
<VisualEditor {...{state: editorState, setState: setEditorState, ast, setAST, rt: rt.at(rtIdx!), setRT, errors, setErrors, mode, highlightActive, highlightTransitions, setModal, makeCheckPoint}}/>
<VisualEditor {...{state: editorState, setState: setEditorState, ast, setAST, rt: rt.at(rtIdx!), setRT, errors, setErrors, mode, highlightActive, highlightTransitions, setModal, makeCheckPoint, zoom}}/>
</Box>
</Stack>
</Box>

31
src/App/TopPanel.tsx
View file

@ -15,6 +15,8 @@ import UndoIcon from '@mui/icons-material/Undo';
import RedoIcon from '@mui/icons-material/Redo';
import InfoOutlineIcon from '@mui/icons-material/InfoOutline';
import KeyboardIcon from '@mui/icons-material/Keyboard';
import ZoomInIcon from '@mui/icons-material/ZoomIn';
import ZoomOutIcon from '@mui/icons-material/ZoomOut';
import { formatTime } from "./util";
import { InsertMode } from "../VisualEditor/VisualEditor";
@ -38,9 +40,11 @@ export type TopPanelProps = {
mode: InsertMode,
setMode: Dispatch<SetStateAction<InsertMode>>,
setModal: Dispatch<SetStateAction<ReactElement|null>>,
zoom: number,
setZoom: Dispatch<SetStateAction<number>>,
}
export function TopPanel({rt, rtIdx, time, setTime, onUndo, onRedo, onInit, onClear, onRaise, onBack, ast, mode, setMode, setModal}: TopPanelProps) {
export function TopPanel({rt, rtIdx, time, setTime, onUndo, onRedo, onInit, onClear, onRaise, onBack, ast, mode, setMode, setModal, zoom, setZoom}: TopPanelProps) {
const [displayTime, setDisplayTime] = useState("0.000");
const [timescale, setTimescale] = useState(1);
const [showKeys, setShowKeys] = usePersistentState("shortcuts", true);
@ -99,6 +103,14 @@ export function TopPanel({rt, rtIdx, time, setTime, onUndo, onRedo, onInit, onCl
e.preventDefault();
onRedo();
}
if (e.key === "+") {
e.preventDefault();
onZoomIn();
}
if (e.key === "-") {
e.preventDefault();
onZoomOut();
}
}
};
window.addEventListener("keydown", onKeyDown);
@ -123,6 +135,13 @@ export function TopPanel({rt, rtIdx, time, setTime, onUndo, onRedo, onInit, onCl
}
}, [time]);
function onZoomIn() {
setZoom(zoom => Math.min(zoom * 1.25, 4));
}
function onZoomOut() {
setZoom(zoom => Math.max(zoom / 1.25, 1/4));
}
function onChangePaused(paused: boolean, wallclktime: number) {
setTime(time => {
if (paused) {
@ -189,6 +208,16 @@ export function TopPanel({rt, rtIdx, time, setTime, onUndo, onRedo, onInit, onCl
&emsp;
</div>
{/* zoom */}
<div className="toolbarGroup">
<KeyInfo keyInfo={<><kbd>Ctrl</kbd>+<kbd>+</kbd></>}>
<button title="zoom in" onClick={onZoomIn}><ZoomInIcon fontSize="small"/></button>
</KeyInfo>
<KeyInfo keyInfo={<><kbd>Ctrl</kbd>+<kbd>-</kbd></>}>
<button title="zoom out" onClick={onZoomOut}><ZoomOutIcon fontSize="small"/></button>
</KeyInfo>
&emsp;
</div>
{/* undo / redo */}
<div className="toolbarGroup">