steve
48ba08e8f2
Build image / build-and-push (push) Successful in 14s
Co-authored-by: Steve Dudenhoeffer <[email protected]>
212 lines
8.2 KiB
TypeScript
212 lines
8.2 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react'
|
|
import { getRouteApi } from '@tanstack/react-router'
|
|
import { Alert } from '@/components/ui/Alert'
|
|
import { Button } from '@/components/ui/Button'
|
|
import { GardenCanvas } from '@/editor/GardenCanvas'
|
|
import { Inspector } from '@/editor/Inspector'
|
|
import { PlopInspector } from '@/editor/PlopInspector'
|
|
import { PlantPicker } from '@/editor/PlantPicker'
|
|
import { Palette } from '@/editor/Palette'
|
|
import { kindDef } from '@/editor/kinds'
|
|
import { useEditorStore } from '@/editor/store'
|
|
import type { EditorGarden } from '@/editor/types'
|
|
import { toEditorObject, useGardenFull, useUpdatePlanting } from '@/lib/objects'
|
|
import { toEditorPlanting } from '@/lib/plantings'
|
|
|
|
const routeApi = getRouteApi('/gardens/$gardenId')
|
|
|
|
export function GardenEditorPage() {
|
|
const { gardenId } = routeApi.useParams()
|
|
const gid = Number(gardenId)
|
|
const { focus } = routeApi.useSearch()
|
|
const navigate = routeApi.useNavigate()
|
|
const full = useGardenFull(gid)
|
|
|
|
const selectedId = useEditorStore((s) => s.selectedId)
|
|
const select = useEditorStore((s) => s.select)
|
|
const selectedPlantingId = useEditorStore((s) => s.selectedPlantingId)
|
|
const selectPlanting = useEditorStore((s) => s.selectPlanting)
|
|
const focusedObjectId = useEditorStore((s) => s.focusedObjectId)
|
|
const setFocusedObject = useEditorStore((s) => s.setFocusedObject)
|
|
const armedPlant = useEditorStore((s) => s.armedPlant)
|
|
const setArmedPlant = useEditorStore((s) => s.setArmedPlant)
|
|
const setArmedKind = useEditorStore((s) => s.setArmedKind)
|
|
const setLiveObject = useEditorStore((s) => s.setLiveObject)
|
|
const setLivePlanting = useEditorStore((s) => s.setLivePlanting)
|
|
|
|
const updatePlanting = useUpdatePlanting(gid)
|
|
|
|
// Which plant-picker flow is open: 'place' arms a plant for repeat placement;
|
|
// 'change' swaps the selected plop's plant.
|
|
const [picker, setPicker] = useState<'place' | 'change' | null>(null)
|
|
|
|
const serverObjects = full.data?.objects
|
|
const objects = useMemo(() => serverObjects?.map(toEditorObject) ?? [], [serverObjects])
|
|
const serverPlantings = full.data?.plantings
|
|
const plantings = useMemo(() => serverPlantings?.map(toEditorPlanting) ?? [], [serverPlantings])
|
|
const plants = useMemo(() => full.data?.plants ?? [], [full.data?.plants])
|
|
const plantsById = useMemo(() => new Map(plants.map((p) => [p.id, p])), [plants])
|
|
|
|
// Adopt the URL's focus and clear transient editor state on entering/switching
|
|
// gardens (and on leaving). `focus` is intentionally read once here, not a dep,
|
|
// so URL syncs below don't retrigger a full reset.
|
|
useEffect(() => {
|
|
const clear = () => {
|
|
select(null)
|
|
selectPlanting(null)
|
|
setArmedKind(null)
|
|
setArmedPlant(null)
|
|
setLiveObject(null)
|
|
setLivePlanting(null)
|
|
}
|
|
clear()
|
|
setFocusedObject(focus ?? null)
|
|
return () => {
|
|
clear()
|
|
setFocusedObject(null)
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [gid])
|
|
|
|
// Mirror focusedObjectId → ?focus so focus mode is deep-linkable and survives
|
|
// reload. Declared after the reset effect so the initial adopt wins.
|
|
useEffect(() => {
|
|
navigate({ search: (prev) => ({ ...prev, focus: focusedObjectId ?? undefined }), replace: true })
|
|
}, [focusedObjectId, navigate])
|
|
|
|
// If the focused object vanished — deleted, or a stale ?focus id on load — leave
|
|
// focus mode so the canvas isn't stuck dimmed with no way out.
|
|
useEffect(() => {
|
|
if (focusedObjectId != null && full.data && !objects.some((o) => o.id === focusedObjectId)) {
|
|
setFocusedObject(null)
|
|
}
|
|
}, [focusedObjectId, objects, full.data, setFocusedObject])
|
|
|
|
const exitFocus = () => {
|
|
setFocusedObject(null)
|
|
setArmedPlant(null)
|
|
select(null)
|
|
selectPlanting(null)
|
|
}
|
|
|
|
// Escape peels back one layer: stop placing → deselect plop → exit focus → deselect.
|
|
useEffect(() => {
|
|
function onKey(e: KeyboardEvent) {
|
|
if (e.key !== 'Escape') return
|
|
const s = useEditorStore.getState()
|
|
if (s.armedPlant) s.setArmedPlant(null)
|
|
else if (s.selectedPlantingId != null) s.selectPlanting(null)
|
|
else if (s.focusedObjectId != null) exitFocus()
|
|
else if (s.selectedId != null) s.select(null)
|
|
}
|
|
window.addEventListener('keydown', onKey)
|
|
return () => window.removeEventListener('keydown', onKey)
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
if (full.isPending) return <p className="p-6 text-sm text-muted">Loading garden…</p>
|
|
if (full.isError)
|
|
return (
|
|
<div className="p-6">
|
|
<Alert>Could not load this garden.</Alert>
|
|
</div>
|
|
)
|
|
|
|
const g = full.data.garden
|
|
const garden: EditorGarden = {
|
|
id: g.id,
|
|
name: g.name,
|
|
widthCm: g.widthCm,
|
|
heightCm: g.heightCm,
|
|
unitPref: g.unitPref,
|
|
}
|
|
|
|
const selectedObject = objects.find((o) => o.id === selectedId) ?? null
|
|
const focusedObject = focusedObjectId != null ? objects.find((o) => o.id === focusedObjectId) ?? null : null
|
|
// Committed selected plop; PlopInspector applies live drag geometry itself.
|
|
const selectedPlop = plantings.find((p) => p.id === selectedPlantingId) ?? null
|
|
|
|
function onPickPlant(plantId: number) {
|
|
const plant = plantsById.get(plantId)
|
|
if (!plant) return
|
|
if (picker === 'change' && selectedPlop) {
|
|
updatePlanting.mutate({ id: selectedPlop.id, version: selectedPlop.version, plantId: plant.id })
|
|
} else {
|
|
setArmedPlant(plant) // 'place' mode: arm for repeat placement
|
|
}
|
|
setPicker(null)
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-[calc(100vh-8rem)] flex-col gap-3 md:flex-row">
|
|
<div className="shrink-0 md:w-40">
|
|
<h1 className="mb-2 truncate text-lg font-semibold tracking-tight" title={garden.name}>
|
|
{garden.name}
|
|
</h1>
|
|
{focusedObjectId == null && <Palette />}
|
|
</div>
|
|
|
|
<div className="relative min-h-0 flex-1">
|
|
{focusedObject && (
|
|
<div className="absolute left-2 top-2 z-20 flex flex-wrap items-center gap-2 rounded-lg border border-border bg-surface/90 px-2 py-1.5 text-sm shadow-sm backdrop-blur">
|
|
<button type="button" onClick={exitFocus} className="rounded px-1.5 py-0.5 font-medium text-accent-strong hover:underline">
|
|
← {garden.name}
|
|
</button>
|
|
<span className="max-w-[8rem] truncate text-muted">
|
|
{focusedObject.name || kindDef(focusedObject.kind)?.label || 'Object'}
|
|
</span>
|
|
{!focusedObject.plantable ? (
|
|
<span className="text-xs text-muted">Not plantable</span>
|
|
) : armedPlant ? (
|
|
<Button variant="ghost" className="px-2 py-1 text-xs" onClick={() => setArmedPlant(null)}>
|
|
Placing {armedPlant.icon} — Done
|
|
</Button>
|
|
) : (
|
|
<Button className="px-2 py-1 text-xs" onClick={() => setPicker('place')}>
|
|
+ Add plant
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
<GardenCanvas garden={garden} objects={objects} plantings={plantings} plantsById={plantsById} />
|
|
</div>
|
|
|
|
{(selectedObject || selectedPlop) && (
|
|
<div className="fixed inset-x-0 bottom-0 z-30 max-h-[65vh] overflow-y-auto rounded-t-xl border-t border-border bg-surface p-4 shadow-lg md:static md:max-h-none md:w-72 md:shrink-0 md:rounded-xl md:border md:p-4 md:shadow-sm">
|
|
{selectedObject && (
|
|
<Inspector
|
|
key={`obj-${selectedObject.id}`}
|
|
object={selectedObject}
|
|
gardenId={gid}
|
|
unit={garden.unitPref}
|
|
onFocus={() => {
|
|
setFocusedObject(selectedObject.id)
|
|
select(null)
|
|
}}
|
|
/>
|
|
)}
|
|
{selectedPlop && (
|
|
<PlopInspector
|
|
key={`plop-${selectedPlop.id}`}
|
|
plop={selectedPlop}
|
|
plant={plantsById.get(selectedPlop.plantId)}
|
|
gardenId={gid}
|
|
unit={garden.unitPref}
|
|
onChangePlant={() => setPicker('change')}
|
|
onClose={() => selectPlanting(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{picker && (
|
|
<PlantPicker
|
|
unit={garden.unitPref}
|
|
onClose={() => setPicker(null)}
|
|
onSelect={(p) => onPickPlant(p.id)}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|