syntaxbullet/image-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement document actions for managing artboards, zoom, and history; update UI components to utilize new actions

Browse Source
This commit is contained in:
syntaxbullet
2026-07-11 11:26:27 +02:00
parent 1236b6dd2f
commit 53cf25c132
12 changed files with 168 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
view/bottom-controls/ZoomControls.tsx
View File

@@ -1,27 +1,25 @@
import { Minus, CornersOut, Plus } from "@phosphor-icons/react";
import { commandIds } from "@commands/ids";
import type { AppStore } from "@editor/store";
import type { DocumentActions } from "@app/document-actions";
import { BottomControlDivider } from "./Divider";
import { bottomControlButtonClass, bottomControlMenuClass, bottomControlValueClass } from "./styles";
export type ZoomControlsProps = {
zoom: number;
zoomPercent: number;
dispatch: AppStore["dispatch"];
actions: DocumentActions;
};
export function ZoomControls({ zoom, zoomPercent, dispatch }: ZoomControlsProps) {
export function ZoomControls({ zoomPercent, actions }: ZoomControlsProps) {
return (
<div className={bottomControlMenuClass()}>
<button type="button" className={bottomControlButtonClass()} aria-label="Zoom out" onClick={() => dispatch(commandIds.viewportSetZoom, { zoom: zoom / 1.2 })}>
<button type="button" className={bottomControlButtonClass()} aria-label="Zoom out" onClick={() => actions.zoomBy(1 / 1.2)}>
<Minus size={24} weight="regular" />
</button>
<span className={bottomControlValueClass()}>{zoomPercent}%</span>
<button type="button" className={bottomControlButtonClass()} aria-label="Zoom in" onClick={() => dispatch(commandIds.viewportSetZoom, { zoom: zoom * 1.2 })}>
<button type="button" className={bottomControlButtonClass()} aria-label="Zoom in" onClick={() => actions.zoomBy(1.2)}>
<Plus size={24} weight="regular" />
</button>
<BottomControlDivider />
<button type="button" className={bottomControlButtonClass()} aria-label="Fit artboard" title="Fit artboard" onClick={() => dispatch(commandIds.viewportFitArtboard, undefined)}>
<button type="button" className={bottomControlButtonClass()} aria-label="Fit artboard" title="Fit artboard" onClick={() => actions.fitArtboard()}>
<CornersOut size={24} weight="regular" />
</button>
</div>