steveandClaude Opus 4.8
4b18ac3b46
#48 made every change revertible; this makes that reachable. The bar was that undoing what the agent just did should take one obvious click, not a hunt. Settles the rail-layout question, which is the part #53 and #57 depend on. Four things wanted one strip of screen — inspector, history, journal, chat — so they are tabs in one EditorRail rather than each bolting on its own chrome. That keeps the canvas at one width instead of a different width per panel, and adding the journal or chat later is adding a tab. Two constraints held. Selecting an object still lands you in the inspector with no extra click: the page watches the selection and switches tabs itself, so the rail never becomes something you operate before you can edit. And the canvas stays worth watching while the agent edits it — the rail is a fixed 20rem column that closes completely when nothing needs it. On a phone the same tabs render in the bottom sheet the inspector already lived in. A reverted entry stays in the list, struck through and marked, and the revert appears as its own entry — because that is what it is. Making the original disappear would be rewriting history rather than appending to it, and would leave no way to undo the undo. Conflicts are reported as what actually happened. A 409 from a revert is not a plain failure: it carries the change set that DID apply alongside the entities deliberately left alone, so the message is "2 of 3 changes undone — “North Bed” was edited since, so it was left alone" rather than a generic toast. A bare failure would be a lie about the two that applied; a bare success would hide the one that didn't. Undo is one implementation, not two: useUndo owns the mutation, the per-change- set outcome and the phrasing, and UndoButton renders it. #57's inline undo on an agent turn uses the same hook, so undo behaves identically wherever it appears. The panel says plainly that deleting a whole garden isn't covered and can't be undone, rather than leaving that to be discovered. Closes #49 Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ
108 lines
3.8 KiB
TypeScript
108 lines
3.8 KiB
TypeScript
import { create } from 'zustand'
|
|
import type { Viewport } from '@/lib/geometry'
|
|
import type { Plant } from '@/lib/plants'
|
|
import type { EditorPlanting } from '@/lib/plantings'
|
|
import type { EditorObject } from './types'
|
|
|
|
// Ephemeral editor state only (per DESIGN § State): the viewport, the current
|
|
// selection, the object being live-edited mid-gesture, and the palette kind
|
|
// armed for tap-to-place. All server state stays in react-query.
|
|
|
|
export const MIN_SCALE = 0.05 // px per cm — fully zoomed out
|
|
export const MAX_SCALE = 20 // px per cm — fully zoomed in
|
|
|
|
interface EditorState {
|
|
viewport: Viewport
|
|
setViewport: (next: Viewport | ((prev: Viewport) => Viewport)) => void
|
|
|
|
// The selected object OR plop (mutually exclusive; selecting one clears the
|
|
// other). selectedId is a garden object; selectedPlantingId is a plop.
|
|
selectedId: number | null
|
|
select: (id: number | null) => void
|
|
|
|
selectedPlantingId: number | null
|
|
selectPlanting: (id: number | null) => void
|
|
|
|
focusedObjectId: number | null
|
|
setFocusedObject: (id: number | null) => void
|
|
|
|
// Which rail tab is showing, or null when the rail is closed. Selecting an
|
|
// object switches this to 'inspector' (see GardenEditorPage), so editing never
|
|
// starts with a click on the rail itself.
|
|
railTab: string | null
|
|
setRailTab: (tab: string | null) => void
|
|
|
|
// The plant armed for placing plops (set after the PlantPicker choice); stays
|
|
// armed for repeat-placement until cleared (Escape / done). null = not placing.
|
|
armedPlant: Plant | null
|
|
setArmedPlant: (p: Plant | null) => void
|
|
|
|
// During a move/resize/rotate, the object's live geometry is held here so the
|
|
// canvas renders it instantly; the PATCH fires only on gesture end.
|
|
liveObject: EditorObject | null
|
|
setLiveObject: (o: EditorObject | null) => void
|
|
|
|
// The same, for a plop being moved/resized.
|
|
livePlanting: EditorPlanting | null
|
|
setLivePlanting: (p: EditorPlanting | null) => void
|
|
|
|
// The palette kind armed for tap-to-place (mobile-friendly; also set while
|
|
// dragging a kind from the palette). null when nothing is armed.
|
|
armedKind: string | null
|
|
setArmedKind: (kind: string | null) => void
|
|
|
|
// True while an object move/resize/rotate is in progress, so the viewport's
|
|
// pan gesture stands down (both listen on the same svg).
|
|
objectDragging: boolean
|
|
setObjectDragging: (v: boolean) => void
|
|
|
|
// Clear all transient (non-persisted) editor state at once — selection, focus,
|
|
// armed plant/kind, and any in-flight live geometry — when entering a garden
|
|
// view fresh (e.g. the public read-only page on mount). The viewport is left
|
|
// alone; the canvas re-fits it from the loaded garden.
|
|
resetTransient: () => void
|
|
}
|
|
|
|
export const useEditorStore = create<EditorState>((set) => ({
|
|
viewport: { tx: 0, ty: 0, scale: 1 },
|
|
setViewport: (next) => set((s) => ({ viewport: typeof next === 'function' ? next(s.viewport) : next })),
|
|
|
|
selectedId: null,
|
|
select: (id) => set({ selectedId: id, selectedPlantingId: null }),
|
|
|
|
selectedPlantingId: null,
|
|
selectPlanting: (id) => set({ selectedPlantingId: id, selectedId: null }),
|
|
|
|
focusedObjectId: null,
|
|
setFocusedObject: (id) => set({ focusedObjectId: id }),
|
|
|
|
railTab: null,
|
|
setRailTab: (tab) => set({ railTab: tab }),
|
|
|
|
armedPlant: null,
|
|
setArmedPlant: (p) => set({ armedPlant: p }),
|
|
|
|
liveObject: null,
|
|
setLiveObject: (o) => set({ liveObject: o }),
|
|
|
|
livePlanting: null,
|
|
setLivePlanting: (p) => set({ livePlanting: p }),
|
|
|
|
armedKind: null,
|
|
setArmedKind: (kind) => set({ armedKind: kind }),
|
|
|
|
objectDragging: false,
|
|
setObjectDragging: (v) => set({ objectDragging: v }),
|
|
|
|
resetTransient: () =>
|
|
set({
|
|
selectedId: null,
|
|
selectedPlantingId: null,
|
|
focusedObjectId: null,
|
|
armedPlant: null,
|
|
armedKind: null,
|
|
liveObject: null,
|
|
livePlanting: null,
|
|
}),
|
|
}))
|