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

5
view/bottom-controls/GenerateActionControls.tsx
View File

@@ -10,9 +10,10 @@ export type GenerateActionControlsProps = {
generation: GenerationState;
dispatch: AppStore["dispatch"];
workflow: GenerationWorkflow;
generate: () => Promise<void>;
};
export function GenerateActionControls({ settings, generation, dispatch, workflow }: GenerateActionControlsProps) {
export function GenerateActionControls({ settings, generation, dispatch, workflow, generate }: GenerateActionControlsProps) {
const job = currentGenerationJob(generation);
const busy = job?.status === "running";
const candidate = selectedCandidate(generation);
@@ -28,7 +29,7 @@ export function GenerateActionControls({ settings, generation, dispatch, workflo
className="h-12 rounded-full bg-white px-7 text-base font-semibold !text-black transition hover:bg-white/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40 disabled:pointer-events-none disabled:opacity-35"
title={job?.status === "failed" ? job.error : preconditionMessage ?? "Generate with ComfyUI"}
onClick={() => {
void workflow.generate();
void generate();
}}
>
{busy && job?.kind === "generate" ? "Generating..." : "Generate"}

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>