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

feat: add contextual layer inspector

Browse Source
This commit is contained in:
syntaxbullet
2026-07-11 12:07:36 +02:00
parent bef2fb3051
commit 4d7358af4b
14 changed files with 405 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
view/BottomControlsIsland.tsx
View File

@@ -1,3 +1,4 @@
import { useMemo } from "react";
import type { AppStore } from "@editor/store";
import type { ImageDocument } from "@core/document";
import type { GenerationState, MaskViewMode, SelectionState, ViewportState } from "@editor/state";
@@ -13,6 +14,7 @@ import type { Rect } from "@core/geometry";
import type { TransformTarget } from "@editor/transform";
import type { GenerationWorkflow } from "@operations/generation/workflow";
import type { DocumentActions } from "@app/document-actions";
import { createDocumentReadIndex } from "@editor/document-indexes";
export type BottomControlsAction = "pan" | "zoom";
export type BottomControlsIslandProps = {
@@ -39,6 +41,8 @@ export type BottomControlsIslandProps = {
};
export function BottomControlsIsland({ document, selection, viewport, visible, action, activeTool, operation, brushSettings, generateSettings, generation, chromaKeySettings, magicWandSettings, editingMask = false, maskViewMode = "composite", transformBounds, transformTarget, brushHint, dispatch, generationWorkflow, documentActions }: BottomControlsIslandProps) {
const documentIndex = useMemo(() => createDocumentReadIndex(document), [document]);
const selectedLayerInfo = selection.layerIds.length === 1 && selection.layerIds[0] ? documentIndex.layerInfoById.get(selection.layerIds[0]) : undefined;
const zoomPercent = Math.round(viewport.zoom * 100);
const x = Math.round(viewport.center.x);
const y = Math.round(viewport.center.y);
@@ -61,7 +65,7 @@ export function BottomControlsIsland({ document, selection, viewport, visible, a
) : activeTool === "magicWand" ? (
<MagicWandControls settings={magicWandSettings} dispatch={dispatch} />
) : transformBounds && transformTarget ? (
<TransformControls bounds={transformBounds} target={transformTarget} dispatch={dispatch} />
<TransformControls bounds={transformBounds} target={transformTarget} documentIndex={documentIndex} layerInfo={selectedLayerInfo} dispatch={dispatch} />
) : action === "pan" ? (
<PanControls x={x} y={y} />
) : (

101
view/bottom-controls/TransformControls.tsx
View File

@@ -1,27 +1,41 @@
import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
import { BoundingBox } from "@phosphor-icons/react";
import { BoundingBox, Copy, MaskHappy } from "@phosphor-icons/react";
import { commandIds } from "@commands/ids";
import type { Rect } from "@core/geometry";
import type { AppStore } from "@editor/store";
import type { TransformTarget } from "@editor/transform";
import type { DocumentReadIndex, IndexedLayerInfo } from "@editor/document-indexes";
import { addLayerMask, duplicateLayer } from "@operations/document/layerActions";
import { getLayerMask } from "@core/layer-mask-utils";
import { BottomControlDivider } from "./Divider";
import { bottomControlFieldClass, bottomControlIconSlotClass, bottomControlInputClass, bottomControlLabelClass, bottomControlMenuClass } from "./styles";
export type TransformControlsProps = {
bounds: Rect;
target: TransformTarget;
documentIndex: DocumentReadIndex;
layerInfo?: IndexedLayerInfo;
dispatch: AppStore["dispatch"];
};
type BoundsField = keyof Rect;
export function TransformControls({ bounds, target, dispatch }: TransformControlsProps) {
export function TransformControls({ bounds, target, documentIndex, layerInfo, dispatch }: TransformControlsProps) {
const [draft, setDraft] = useState(() => draftFromBounds(bounds));
const [opacityDraft, setOpacityDraft] = useState(() => String(Math.round((layerInfo?.layer.opacity ?? 1) * 100)));
const [rotationDraft, setRotationDraft] = useState(() => rotationDegrees(layerInfo));
const layer = layerInfo?.layer;
const locked = layer?.locked ?? false;
const mask = layer ? getLayerMask(layer) : undefined;
const rotatedMaskEditingUnsupported = Boolean(layer && layer.type !== "group" && layer.transform.rotation !== 0);
useEffect(() => {
setDraft(draftFromBounds(bounds));
}, [bounds.x, bounds.y, bounds.w, bounds.h]);
useEffect(() => setOpacityDraft(String(Math.round((layer?.opacity ?? 1) * 100))), [layer?.id, layer?.opacity]);
useEffect(() => setRotationDraft(rotationDegrees(layerInfo)), [layer?.id, layer?.transform.rotation]);
const commitField = (field: BoundsField) => {
const value = Number.parseFloat(draft[field]);
if (!Number.isFinite(value)) {
@@ -29,6 +43,7 @@ export function TransformControls({ bounds, target, dispatch }: TransformControl
return;
}
if (locked) return;
dispatch(commandIds.transformSetBounds, {
target,
bounds: {
@@ -44,36 +59,108 @@ export function TransformControls({ bounds, target, dispatch }: TransformControl
<BoundingBox size={24} weight="regular" />
</span>
<BottomControlDivider />
<BoundsInput label="X" field="x" draft={draft.x} setDraft={setDraft} commitField={commitField} />
<BoundsInput label="Y" field="y" draft={draft.y} setDraft={setDraft} commitField={commitField} />
<BoundsInput label="X" field="x" draft={draft.x} disabled={locked} setDraft={setDraft} commitField={commitField} />
<BoundsInput label="Y" field="y" draft={draft.y} disabled={locked} setDraft={setDraft} commitField={commitField} />
<BottomControlDivider />
<BoundsInput label="W" field="w" draft={draft.w} setDraft={setDraft} commitField={commitField} />
<BoundsInput label="H" field="h" draft={draft.h} setDraft={setDraft} commitField={commitField} />
<BoundsInput label="W" field="w" draft={draft.w} disabled={locked} setDraft={setDraft} commitField={commitField} />
<BoundsInput label="H" field="h" draft={draft.h} disabled={locked} setDraft={setDraft} commitField={commitField} />
{layer ? (
<>
<BottomControlDivider />
<SimpleInput
label="Opacity"
suffix="%"
value={opacityDraft}
disabled={locked}
onChange={setOpacityDraft}
onCommit={() => {
const value = Number.parseFloat(opacityDraft);
if (Number.isFinite(value)) dispatch(commandIds.documentSetLayerOpacity, { layerId: layer.id, opacity: value / 100 });
else setOpacityDraft(String(Math.round(layer.opacity * 100)));
}}
/>
<SimpleInput
label="Rotation"
suffix="°"
value={rotationDraft}
disabled={locked || layer.type === "group"}
title={layer.type === "group" ? "Group rotation is not supported" : undefined}
onChange={setRotationDraft}
onCommit={() => {
const value = Number.parseFloat(rotationDraft);
if (Number.isFinite(value)) dispatch(commandIds.transformSetRotation, { target, rotation: value * Math.PI / 180 });
else setRotationDraft(rotationDegrees(layerInfo));
}}
/>
<BottomControlDivider />
<button type="button" className={actionButtonClass()} disabled={locked} title={locked ? "Unlock the layer to duplicate it" : "Duplicate layer"} onClick={() => duplicateLayer(documentIndex, layerInfo!, dispatch)}>
<Copy size={20} /> Duplicate
</button>
{layer.type !== "group" ? (
<button
type="button"
className={actionButtonClass()}
disabled={locked || rotatedMaskEditingUnsupported}
title={locked ? "Unlock the layer to edit its mask" : rotatedMaskEditingUnsupported ? "Reset rotation to edit the layer mask" : mask ? "Edit layer mask" : "Add layer mask"}
onClick={() => {
if (mask) dispatch(commandIds.toolEnterMaskEdit, { targetLayerId: layer.id, maskLayerId: mask.maskLayerId });
else addLayerMask(documentIndex, layerInfo!, dispatch);
}}
>
<MaskHappy size={20} /> {mask ? "Edit mask" : "Add mask"}
</button>
) : null}
{locked ? <span className="text-xs text-amber-200/70">Unlock to edit</span> : null}
</>
) : null}
</div>
);
}
function SimpleInput({ label, suffix, value, disabled, title, onChange, onCommit }: { label: string; suffix: string; value: string; disabled?: boolean; title?: string; onChange: (value: string) => void; onCommit: () => void }) {
return (
<label className={`${bottomControlFieldClass()} ${disabled ? "opacity-40" : ""}`} title={title}>
<span className={bottomControlLabelClass()}>{label}</span>
<span className="flex items-center">
<input className={`${bottomControlInputClass()} w-16`} inputMode="decimal" value={value} disabled={disabled} aria-label={label} onChange={(event) => onChange(event.target.value)} onBlur={onCommit} onFocus={(event) => event.currentTarget.select()} onKeyDown={(event) => { event.stopPropagation(); if (event.key === "Enter") event.currentTarget.blur(); if (event.key === "Escape") event.currentTarget.blur(); }} />
<span className="-ml-2 text-xs text-white/40">{suffix}</span>
</span>
</label>
);
}
function rotationDegrees(layerInfo?: IndexedLayerInfo) {
return String(Math.round((layerInfo?.layer.transform.rotation ?? 0) * 180 / Math.PI));
}
function actionButtonClass() {
return "inline-flex h-10 items-center gap-2 rounded-full px-3 text-xs font-semibold text-white/70 transition hover:bg-white/10 hover:text-white disabled:pointer-events-none disabled:opacity-35";
}
function BoundsInput({
label,
field,
draft,
disabled,
setDraft,
commitField,
}: {
label: string;
field: BoundsField;
draft: string;
disabled?: boolean;
setDraft: Dispatch<SetStateAction<Record<BoundsField, string>>>;
commitField: (field: BoundsField) => void;
}) {
return (
<label className={bottomControlFieldClass()}>
<label className={`${bottomControlFieldClass()} ${disabled ? "opacity-40" : ""}`}>
<span className={bottomControlLabelClass()}>{label}</span>
<input
className={bottomControlInputClass()}
inputMode="decimal"
value={draft}
aria-label={label}
disabled={disabled}
onChange={(event) => setDraft((current) => ({ ...current, [field]: event.target.value }))}
onBlur={() => commitField(field)}
onFocus={(event) => event.currentTarget.select()}