Spaces:
Running
Running
| import { useCallback, useEffect, useMemo, useRef, useState } from 'react' | |
| import { | |
| Check, ChevronDown, ChevronRight, Download, Expand, Layers3, LayoutTemplate, | |
| LoaderCircle, MapPin, Minus, Move, Palette, Play, Plus, Redo2, Search, SlidersHorizontal, | |
| Type, Undo2, X, | |
| } from 'lucide-react' | |
| import { exportPoster, getStyles, prepareMap, renderPreview, searchPlaces } from './api' | |
| import { MapViewport } from './components/MapViewport' | |
| import type { BBox, LayerState, LocationResult, PosterRequest, PreviewPhase, StylePreset, Typography } from './types' | |
| import './App.css' | |
| const DEFAULT_LOCATION: LocationResult = { | |
| display_name: 'Beijing Forestry University', latitude: 40.0012, longitude: 116.3482, | |
| country: 'China', region: 'Beijing', country_code: 'cn', provider: 'default', | |
| } | |
| const DEFAULT_BBOX: BBox = { west: 116.292, south: 39.955, east: 116.405, north: 40.047 } | |
| const DEFAULT_TYPE: Typography = { | |
| title: 'BEIJING FORESTRY UNIVERSITY', subtitle: 'BEIJING', caption: '', coordinates: '', | |
| font_family: 'auto', title_size: 46, subtitle_size: 17, caption_size: 13, coordinate_size: 11, | |
| letter_spacing: 0.08, line_height: 1.15, alignment: 'center', show_coordinates: true, show_divider: true, | |
| } | |
| const DEFAULT_LAYERS: LayerState = { | |
| motorway: true, primary: true, secondary: true, residential: true, water: true, parks: true, | |
| } | |
| const PANEL_IDS = ['location', 'style', 'layout', 'type', 'layers', 'size'] as const | |
| type PanelId = typeof PANEL_IDS[number] | |
| type Orientation = 'portrait' | 'landscape' | |
| const SIZE_OPTIONS = [ | |
| { id: '3:4', label: '3:4', aspect: 3 / 4, orientation: 'portrait' }, | |
| { id: '4:5', label: '4:5', aspect: 4 / 5, orientation: 'portrait' }, | |
| { id: '2:3', label: '2:3', aspect: 2 / 3, orientation: 'portrait' }, | |
| { id: '9:16', label: '9:16', aspect: 9 / 16, orientation: 'portrait' }, | |
| { id: 'A4', label: 'A4', aspect: 210 / 297, orientation: 'portrait' }, | |
| { id: 'A3', label: 'A3', aspect: 297 / 420, orientation: 'portrait' }, | |
| { id: '4:3', label: '4:3', aspect: 4 / 3, orientation: 'landscape' }, | |
| { id: '5:4', label: '5:4', aspect: 5 / 4, orientation: 'landscape' }, | |
| { id: '3:2', label: '3:2', aspect: 3 / 2, orientation: 'landscape' }, | |
| { id: '16:9', label: '16:9', aspect: 16 / 9, orientation: 'landscape' }, | |
| { id: 'A4-landscape', label: 'A4', aspect: 297 / 210, orientation: 'landscape' }, | |
| { id: 'A3-landscape', label: 'A3', aspect: 420 / 297, orientation: 'landscape' }, | |
| { id: '1:1', label: '1:1', aspect: 1, orientation: 'square' }, | |
| ] as const | |
| type PosterSizeId = typeof SIZE_OPTIONS[number]['id'] | |
| const ORIENTATION_PAIR: Partial<Record<PosterSizeId, PosterSizeId>> = { | |
| '3:4': '4:3', '4:3': '3:4', '4:5': '5:4', '5:4': '4:5', '2:3': '3:2', '3:2': '2:3', | |
| '9:16': '16:9', '16:9': '9:16', A4: 'A4-landscape', 'A4-landscape': 'A4', A3: 'A3-landscape', 'A3-landscape': 'A3', | |
| } | |
| const LAYOUT_OPTIONS = ['classic', 'editorial', 'minimal', 'bottom_left', 'centered'] | |
| const panelMeta = { | |
| location: ['Location', MapPin], style: ['Style', Palette], layout: ['Layout', LayoutTemplate], | |
| type: ['Type', Type], layers: ['Layers', Layers3], size: ['Size', SlidersHorizontal], | |
| } as const | |
| function extentFor(location: LocationResult): BBox { | |
| const latSpan = 0.09 | |
| const lonSpan = latSpan / Math.max(Math.cos(location.latitude * Math.PI / 180), 0.25) | |
| return { | |
| west: Math.max(-179.999, location.longitude - lonSpan / 2), south: Math.max(-89.99, location.latitude - latSpan / 2), | |
| east: Math.min(179.999, location.longitude + lonSpan / 2), north: Math.min(89.99, location.latitude + latSpan / 2), | |
| } | |
| } | |
| function Section({ id, title, open, onToggle, children }: { id: PanelId; title: string; open: boolean; onToggle: () => void; children: React.ReactNode }) { | |
| return <section className={`editor-section editor-section-${id} ${open ? 'is-open' : ''}`}> | |
| <button className="section-heading" type="button" onClick={onToggle} aria-expanded={open}> | |
| <span>{title}</span>{open ? <ChevronDown size={17} /> : <ChevronRight size={17} />} | |
| </button> | |
| {open && <div className="section-content">{children}</div>} | |
| </section> | |
| } | |
| function ColorField({ label, value, onChange }: { label: string; value: string; onChange: (value: string) => void }) { | |
| return <label className="color-field"> | |
| <span>{label}</span><span className="color-control"><input type="color" value={value} onChange={(event) => onChange(event.target.value)} /><code>{value.toUpperCase()}</code></span> | |
| </label> | |
| } | |
| function ProgressFeedback({ value, label, elapsed }: { value: number; label: string; elapsed: number }) { | |
| const rounded = Math.round(value) | |
| return <div className="progress-feedback"> | |
| <div className="progress-meta"><span>{label}</span><span>{rounded}% · {elapsed}s</span></div> | |
| <div className="progress-track" role="progressbar" aria-label={label} aria-valuemin={0} aria-valuemax={100} aria-valuenow={rounded}> | |
| <span className="progress-fill" style={{ width: `${rounded}%` }} /> | |
| </div> | |
| </div> | |
| } | |
| function GenerateControl({ phase, stale, disabled, onGenerate }: { | |
| phase: PreviewPhase | |
| stale: boolean | |
| disabled: boolean | |
| onGenerate: () => void | |
| }) { | |
| const busy = phase === 'preparing' || phase === 'rendering' | |
| const label = phase === 'preparing' | |
| ? 'Fetching map data…' | |
| : phase === 'rendering' | |
| ? 'Rendering preview…' | |
| : stale | |
| ? 'Generate preview' | |
| : 'Generate again' | |
| return <div className="generate-footer"> | |
| <button className="generate-button" type="button" onClick={onGenerate} disabled={disabled}> | |
| {busy ? <LoaderCircle className="spin" size={17} /> : <Play size={16} fill="currentColor" />} | |
| <span>{label}</span> | |
| </button> | |
| <small>Map data is fetched only after you start generation.</small> | |
| </div> | |
| } | |
| export default function App() { | |
| const [activePanel, setActivePanel] = useState<PanelId>('style') | |
| const [openPanels, setOpenPanels] = useState<Set<PanelId>>(new Set(['location', 'style', 'type'])) | |
| const [location, setLocation] = useState(DEFAULT_LOCATION) | |
| const [bbox, setBBox] = useState(DEFAULT_BBOX) | |
| const [mapZoom, setMapZoom] = useState<number | null>(null) | |
| const [searchQuery, setSearchQuery] = useState('') | |
| const [searchResults, setSearchResults] = useState<LocationResult[]>([]) | |
| const [searching, setSearching] = useState(false) | |
| const [styles, setStyles] = useState<StylePreset[]>([]) | |
| const [styleId, setStyleId] = useState('japanese_ink') | |
| const [customColors, setCustomColors] = useState<Record<string, string>>({}) | |
| const [typography, setTypography] = useState(DEFAULT_TYPE) | |
| const [layout, setLayout] = useState('classic') | |
| const [layers, setLayers] = useState(DEFAULT_LAYERS) | |
| const [orientation, setOrientation] = useState<Orientation>('portrait') | |
| const [size, setSize] = useState<PosterSizeId>('3:4') | |
| const [mapDataId, setMapDataId] = useState('') | |
| const [preparedSignature, setPreparedSignature] = useState('') | |
| const [renderedSignature, setRenderedSignature] = useState('') | |
| const [previewUrl, setPreviewUrl] = useState('/sample-poster.webp') | |
| const [previewPhase, setPreviewPhase] = useState<PreviewPhase>('idle') | |
| const [statusText, setStatusText] = useState('Adjust the settings, then generate a preview.') | |
| const [generationProgress, setGenerationProgress] = useState(0) | |
| const [generationElapsed, setGenerationElapsed] = useState(0) | |
| const [error, setError] = useState('') | |
| const [canvasZoom, setCanvasZoom] = useState(82) | |
| const [exportOpen, setExportOpen] = useState(false) | |
| const [exporting, setExporting] = useState(false) | |
| const [exportProgress, setExportProgress] = useState(0) | |
| const [exportElapsed, setExportElapsed] = useState(0) | |
| const [exportStatus, setExportStatus] = useState('') | |
| const previewObjectUrl = useRef<string | null>(null) | |
| const generationController = useRef<AbortController | null>(null) | |
| const exportController = useRef<AbortController | null>(null) | |
| const generationStartedAt = useRef(0) | |
| const exportStartedAt = useRef(0) | |
| const selectedStyle = styles.find((style) => style.id === styleId) | |
| const effectiveColors = useMemo(() => selectedStyle ? { | |
| background: selectedStyle.background, text: selectedStyle.text, water: selectedStyle.water, parks: selectedStyle.parks, | |
| road_motorway: selectedStyle.road_motorway, road_primary: selectedStyle.road_primary, | |
| road_secondary: selectedStyle.road_secondary, road_tertiary: selectedStyle.road_tertiary, | |
| road_residential: selectedStyle.road_residential, road_default: selectedStyle.road_default, | |
| gradient: selectedStyle.gradient, ...customColors, | |
| } : customColors, [customColors, selectedStyle]) | |
| const poster = useMemo<PosterRequest>(() => ({ | |
| location, bbox, distance_m: 10_000, zoom: mapZoom, network_type: 'all', style_id: styleId, | |
| colors: customColors, typography, layout, layers, size: { preset: size }, | |
| }), [bbox, customColors, layers, layout, location, mapZoom, size, styleId, typography]) | |
| const posterSignature = useMemo(() => JSON.stringify(poster), [poster]) | |
| const dataSignature = useMemo(() => JSON.stringify({ location, bbox, network: poster.network_type }), [bbox, location, poster.network_type]) | |
| const prepareRequest = useMemo(() => ({ | |
| location, bbox, distance_m: 10_000, zoom: mapZoom, network_type: 'all' as const, | |
| style_id: 'japanese_ink', colors: {}, typography: DEFAULT_TYPE, layout, layers: DEFAULT_LAYERS, size: { preset: size }, | |
| }), [bbox, layout, location, mapZoom, size]) | |
| const sizeOption = SIZE_OPTIONS.find((option) => option.id === size) ?? SIZE_OPTIONS[0] | |
| const posterAspect = sizeOption.aspect | |
| const visibleSizeOptions = SIZE_OPTIONS.filter((option) => option.orientation === orientation || option.orientation === 'square') | |
| const isGenerating = previewPhase === 'preparing' || previewPhase === 'rendering' | |
| const previewStale = renderedSignature !== posterSignature | |
| useEffect(() => { | |
| const controller = new AbortController() | |
| getStyles(controller.signal).then((items) => { | |
| setStyles(items) | |
| setStyleId((current) => items.some((item) => item.id === current) ? current : items[0]?.id ?? current) | |
| }).catch((reason: Error) => { if (reason.name !== 'AbortError') setError(reason.message) }) | |
| return () => controller.abort() | |
| }, []) | |
| useEffect(() => { | |
| if (!isGenerating) return | |
| const timer = window.setInterval(() => { | |
| setGenerationElapsed(Math.floor((Date.now() - generationStartedAt.current) / 1000)) | |
| setGenerationProgress((current) => { | |
| const ceiling = previewPhase === 'preparing' ? 58 : 94 | |
| return Math.min(ceiling, current + Math.max(0.6, (ceiling - current) * 0.04)) | |
| }) | |
| }, 400) | |
| return () => window.clearInterval(timer) | |
| }, [isGenerating, previewPhase]) | |
| useEffect(() => { | |
| if (!exporting) return | |
| const timer = window.setInterval(() => { | |
| setExportElapsed(Math.floor((Date.now() - exportStartedAt.current) / 1000)) | |
| setExportProgress((current) => Math.min(94, current + Math.max(0.6, (94 - current) * 0.04))) | |
| }, 400) | |
| return () => window.clearInterval(timer) | |
| }, [exporting]) | |
| useEffect(() => () => { | |
| generationController.current?.abort() | |
| exportController.current?.abort() | |
| if (previewObjectUrl.current) URL.revokeObjectURL(previewObjectUrl.current) | |
| }, []) | |
| const runSearch = async (event: React.FormEvent) => { | |
| event.preventDefault() | |
| const query = searchQuery.trim() | |
| if (!query) return | |
| setSearching(true); setError('') | |
| try { setSearchResults(await searchPlaces(query)) } | |
| catch (reason) { setError(reason instanceof Error ? reason.message : 'Search failed') } | |
| finally { setSearching(false) } | |
| } | |
| const chooseLocation = (result: LocationResult) => { | |
| setLocation(result); setBBox(extentFor(result)); setMapZoom(null); setSearchResults([]); setSearchQuery('') | |
| const title = result.display_name.split(',')[0]?.trim() || result.display_name | |
| setTypography((current) => ({ ...current, title, subtitle: result.region || result.country, caption: '' })) | |
| } | |
| const changeOrientation = (next: Orientation) => { | |
| if (next === orientation) return | |
| setOrientation(next) | |
| setSize((current) => current === '1:1' ? current : ORIENTATION_PAIR[current] ?? (next === 'portrait' ? '3:4' : '4:3')) | |
| } | |
| const updateColor = (key: string, value: string) => setCustomColors((current) => ({ ...current, [key]: value })) | |
| const togglePanel = (id: PanelId) => { | |
| setActivePanel(id) | |
| setOpenPanels((current) => { const next = new Set(current); if (next.has(id)) next.delete(id); else next.add(id); return next }) | |
| } | |
| const updateViewport = useCallback((nextBBox: BBox, zoom: number) => { | |
| const rounded = Object.fromEntries(Object.entries(nextBBox).map(([key, value]) => [key, Number(value.toFixed(6))])) as BBox | |
| setBBox((current) => { | |
| const unchanged = (Object.keys(rounded) as (keyof BBox)[]).every((key) => Math.abs(current[key] - rounded[key]) < 0.00001) | |
| return unchanged ? current : rounded | |
| }) | |
| setMapZoom((current) => current !== null && Math.abs(current - zoom) < 0.01 ? current : Number(zoom.toFixed(2))) | |
| }, []) | |
| const runGeneration = async () => { | |
| const requestPoster = poster | |
| const requestPosterSignature = posterSignature | |
| const requestDataSignature = dataSignature | |
| const controller = new AbortController() | |
| generationController.current?.abort() | |
| generationController.current = controller | |
| generationStartedAt.current = Date.now() | |
| setGenerationElapsed(0); setGenerationProgress(4); setPreviewPhase('preparing') | |
| setStatusText('Fetching streets, water, and parks…'); setError('') | |
| try { | |
| let currentMapDataId = mapDataId | |
| if (!currentMapDataId || preparedSignature !== requestDataSignature) { | |
| const result = await prepareMap(prepareRequest, controller.signal) | |
| currentMapDataId = result.map_data_id | |
| setMapDataId(currentMapDataId); setPreparedSignature(requestDataSignature) | |
| setStatusText(result.cache_hit ? 'Map data loaded from cache. Rendering preview…' : 'Map data ready. Rendering preview…') | |
| } else { | |
| setStatusText('Using prepared map data. Rendering preview…') | |
| } | |
| setGenerationProgress(68); setPreviewPhase('rendering') | |
| const blob = await renderPreview(currentMapDataId, requestPoster, controller.signal) | |
| if (previewObjectUrl.current) URL.revokeObjectURL(previewObjectUrl.current) | |
| const url = URL.createObjectURL(blob) | |
| previewObjectUrl.current = url | |
| setPreviewUrl(url); setRenderedSignature(requestPosterSignature); setGenerationProgress(100); setPreviewPhase('success') | |
| setStatusText(`Preview ready in ${((Date.now() - generationStartedAt.current) / 1000).toFixed(1)}s`) | |
| } catch (reason) { | |
| if (reason instanceof Error && reason.name === 'AbortError') return | |
| setPreviewPhase('error'); setError(reason instanceof Error ? reason.message : 'Preview failed') | |
| setStatusText('Could not generate the preview') | |
| } finally { | |
| if (generationController.current === controller) generationController.current = null | |
| } | |
| } | |
| const download = async (format: 'png' | 'svg' | 'pdf', dpi: number) => { | |
| if (!mapDataId || preparedSignature !== dataSignature) { setError('Wait for the map data to finish loading before export.'); return } | |
| const controller = new AbortController() | |
| exportController.current?.abort() | |
| exportController.current = controller | |
| exportStartedAt.current = Date.now() | |
| setExporting(true); setExportProgress(5); setExportElapsed(0); setExportOpen(false); setError('') | |
| setExportStatus(`Rendering ${format.toUpperCase()} at ${dpi} DPI…`) | |
| try { | |
| const result = await exportPoster(mapDataId, poster, format, dpi, controller.signal) | |
| setExportProgress(100) | |
| const url = URL.createObjectURL(result.blob) | |
| const link = document.createElement('a'); link.href = url; link.download = result.filename; link.click() | |
| window.setTimeout(() => URL.revokeObjectURL(url), 1000) | |
| setStatusText(`${format.toUpperCase()} downloaded in ${((Date.now() - exportStartedAt.current) / 1000).toFixed(1)}s`) | |
| } catch (reason) { | |
| if (!(reason instanceof Error && reason.name === 'AbortError')) setError(reason instanceof Error ? reason.message : 'Export failed') | |
| } finally { | |
| if (exportController.current === controller) exportController.current = null | |
| setExporting(false) | |
| } | |
| } | |
| const panelContent: Record<PanelId, React.ReactNode> = { | |
| location: <> | |
| <form className="search-box" onSubmit={runSearch}> | |
| <Search size={16} /><input value={searchQuery} onChange={(event) => setSearchQuery(event.target.value)} placeholder="Search a place…" aria-label="Search a place" /> | |
| {searchQuery && <button type="button" className="icon-button" onClick={() => { setSearchQuery(''); setSearchResults([]) }} aria-label="Clear search"><X size={15} /></button>} | |
| <button className="search-submit" type="submit" disabled={searching}>{searching ? <LoaderCircle className="spin" size={15} /> : 'Search'}</button> | |
| </form> | |
| {searchResults.length > 0 && <div className="search-results">{searchResults.map((result) => <button key={`${result.latitude}-${result.longitude}-${result.display_name}`} onClick={() => chooseLocation(result)}> | |
| <MapPin size={15} /><span><strong>{result.display_name}</strong><small>{[result.region, result.country].filter(Boolean).join(', ')}</small></span> | |
| </button>)}</div>} | |
| <div className="selected-place"><span className="pin"><MapPin size={17} /></span><span><strong>{location.display_name}</strong><small>{location.latitude.toFixed(4)}° / {location.longitude.toFixed(4)}°</small></span></div> | |
| <MapViewport longitude={location.longitude} latitude={location.latitude} bbox={bbox} onViewportChange={updateViewport} /> | |
| <p className="field-help">Drag or zoom to set the exact area used by the poster.</p> | |
| </>, | |
| style: <> | |
| <div className="style-grid">{styles.slice(0, 6).map((style) => <button key={style.id} className={`style-card ${style.id === styleId ? 'is-selected' : ''}`} onClick={() => { setStyleId(style.id); setCustomColors({}) }} title={style.description}> | |
| <span className="style-preview" style={{ backgroundColor: style.background, color: style.road_primary }}>{style.preview && <img src={style.preview} alt="" onError={(event) => { event.currentTarget.style.display = 'none' }} />}<i /><i /><i /></span> | |
| <span>{style.name}</span>{style.id === styleId && <b><Check size={12} /></b>} | |
| </button>)}</div> | |
| {styles.length > 6 && <label className="field"><span>More styles</span><select value={styleId} onChange={(event) => { setStyleId(event.target.value); setCustomColors({}) }}>{styles.map((style) => <option key={style.id} value={style.id}>{style.name}</option>)}</select></label>} | |
| <div className="subheading"><span>Customize</span>{Object.keys(customColors).length > 0 && <button onClick={() => setCustomColors({})}>Reset</button>}</div> | |
| <div className="color-list"> | |
| <ColorField label="Background" value={effectiveColors.background ?? '#ffffff'} onChange={(value) => updateColor('background', value)} /> | |
| <ColorField label="Text" value={effectiveColors.text ?? '#17191d'} onChange={(value) => updateColor('text', value)} /> | |
| <ColorField label="Water" value={effectiveColors.water ?? '#c9c6bf'} onChange={(value) => updateColor('water', value)} /> | |
| <ColorField label="Parks" value={effectiveColors.parks ?? '#eae7e1'} onChange={(value) => updateColor('parks', value)} /> | |
| <ColorField label="Major roads" value={effectiveColors.road_primary ?? '#222222'} onChange={(value) => updateColor('road_primary', value)} /> | |
| <ColorField label="Minor roads" value={effectiveColors.road_residential ?? '#777777'} onChange={(value) => updateColor('road_residential', value)} /> | |
| </div> | |
| </>, | |
| layout: <div className="choice-grid">{LAYOUT_OPTIONS.map((value) => <button key={value} className={layout === value ? 'is-selected' : ''} onClick={() => setLayout(value)}><span className={`layout-glyph ${value}`} /><strong>{value.replace('_', ' ')}</strong></button>)}</div>, | |
| type: <div className="form-stack"> | |
| <label className="field"><span>Title</span><input value={typography.title} onChange={(event) => setTypography({ ...typography, title: event.target.value })} /></label> | |
| <label className="field"><span>Subtitle</span><input value={typography.subtitle} onChange={(event) => setTypography({ ...typography, subtitle: event.target.value })} /></label> | |
| <div className="two-fields"><label className="field"><span>Title size</span><input type="number" min="12" max="120" value={typography.title_size} onChange={(event) => setTypography({ ...typography, title_size: Number(event.target.value) })} /></label><label className="field"><span>Alignment</span><select value={typography.alignment} onChange={(event) => setTypography({ ...typography, alignment: event.target.value as Typography['alignment'] })}><option>left</option><option>center</option><option>right</option></select></label></div> | |
| <label className="range-field"><span>Letter spacing <output>{Math.round(typography.letter_spacing * 100)}%</output></span><input type="range" min="0" max="0.3" step="0.01" value={typography.letter_spacing} onChange={(event) => setTypography({ ...typography, letter_spacing: Number(event.target.value) })} /></label> | |
| <label className="check-field"><input type="checkbox" checked={typography.show_coordinates} onChange={(event) => setTypography({ ...typography, show_coordinates: event.target.checked })} />Show coordinates</label> | |
| <label className="check-field"><input type="checkbox" checked={typography.show_divider} onChange={(event) => setTypography({ ...typography, show_divider: event.target.checked })} />Show divider</label> | |
| </div>, | |
| layers: <div className="toggle-list">{Object.entries(layers).map(([key, value]) => <label key={key}><span>{key.replace('_', ' ')}</span><input type="checkbox" checked={value} onChange={(event) => setLayers({ ...layers, [key]: event.target.checked })} /></label>)}</div>, | |
| size: <> | |
| <div className="orientation-toggle" role="group" aria-label="Poster orientation"> | |
| <button type="button" className={orientation === 'portrait' ? 'is-selected' : ''} aria-pressed={orientation === 'portrait'} onClick={() => changeOrientation('portrait')}>Portrait</button> | |
| <button type="button" className={orientation === 'landscape' ? 'is-selected' : ''} aria-pressed={orientation === 'landscape'} onClick={() => changeOrientation('landscape')}>Landscape</button> | |
| </div> | |
| <div className="size-grid">{visibleSizeOptions.map((option) => <button key={option.id} aria-label={`${orientation} ${option.label}`} className={size === option.id ? 'is-selected' : ''} onClick={() => setSize(option.id)}><span className="size-shape" style={{ aspectRatio: String(option.aspect) }} />{option.label}</button>)}</div> | |
| <p className="field-help">The selected map area is always kept in full. Export uses this ratio and DPI.</p> | |
| </>, | |
| } | |
| return <div className="app-shell"> | |
| <header className="topbar"> | |
| <a className="brand" href="/">MapToPoster</a> | |
| <div className="topbar-tools"><button className="desktop-only icon-button" disabled aria-label="Undo"><Undo2 size={18} /></button><button className="desktop-only icon-button" disabled aria-label="Redo"><Redo2 size={18} /></button><button className="desktop-only quiet-button"><Layers3 size={17} /> Layers</button> | |
| <div className="export-group"><button className="export-primary" onClick={() => download('png', 300)} disabled={exporting || isGenerating}>{exporting ? <LoaderCircle className="spin" size={16} /> : <Download size={16} />}<span>{exporting ? `${Math.round(exportProgress)}%` : 'Export'}</span></button><button className="export-toggle" onClick={() => setExportOpen(!exportOpen)} disabled={exporting || isGenerating} aria-label="Export options"><ChevronDown size={15} /></button> | |
| {exportOpen && <div className="export-menu"><button onClick={() => download('png', 150)}>PNG · Preview</button><button onClick={() => download('png', 300)}>PNG · Print 300 DPI</button><button onClick={() => download('svg', 300)}>SVG · Vector</button><button onClick={() => download('pdf', 300)}>PDF · Print</button></div>} | |
| </div> | |
| </div> | |
| </header> | |
| <aside className="sidebar"> | |
| {PANEL_IDS.map((id) => <Section key={id} id={id} title={panelMeta[id][0]} open={openPanels.has(id)} onToggle={() => togglePanel(id)}>{panelContent[id]}</Section>)} | |
| <GenerateControl phase={previewPhase} stale={previewStale} disabled={isGenerating || exporting} onGenerate={runGeneration} /> | |
| </aside> | |
| <nav className="mobile-tabs" aria-label="Editor panels">{PANEL_IDS.map((id) => { const Icon = panelMeta[id][1]; return <button key={id} className={activePanel === id ? 'is-active' : ''} onClick={() => setActivePanel(id)}><Icon size={19} /><span>{panelMeta[id][0]}</span></button> })}</nav> | |
| <section className="mobile-sheet"><div className="mobile-sheet-heading"><strong>{panelMeta[activePanel][0]}</strong><span>Poster settings</span></div>{panelContent[activePanel]}<GenerateControl phase={previewPhase} stale={previewStale} disabled={isGenerating || exporting} onGenerate={runGeneration} /></section> | |
| <main className="workspace"> | |
| <div className="canvas-stage"> | |
| <div className={`poster-frame ${posterAspect >= 1 ? 'is-wide' : 'is-tall'}`} style={{ transform: `scale(${canvasZoom / 100})`, aspectRatio: String(posterAspect) }}> | |
| <img src={previewUrl} alt={`Poster preview for ${location.display_name}`} /> | |
| {isGenerating && <div className="preview-loading"><LoaderCircle className="spin" /><ProgressFeedback value={generationProgress} label={statusText} elapsed={generationElapsed} /></div>} | |
| </div> | |
| </div> | |
| <div className={`preview-status ${error ? 'error' : previewPhase}`} role="status"> | |
| <div className="preview-status-copy">{exporting || isGenerating ? <LoaderCircle className="spin" size={15} /> : previewPhase === 'success' && !previewStale ? <Check size={15} /> : previewPhase === 'error' ? <X size={15} /> : <Play size={13} />}<span>{exporting ? exportStatus : error || (previewPhase === 'success' && previewStale ? 'Settings changed. Generate again to update the preview.' : statusText)}</span></div> | |
| {exporting ? <ProgressFeedback value={exportProgress} label={exportStatus} elapsed={exportElapsed} /> : isGenerating ? <ProgressFeedback value={generationProgress} label={statusText} elapsed={generationElapsed} /> : null} | |
| </div> | |
| <div className="canvas-toolbar"><div className="tool-group"><button aria-label="Pan"><Move size={17} /></button><button aria-label="Fit canvas" onClick={() => setCanvasZoom(82)}><Expand size={17} /></button></div><div className="tool-group zoom-controls"><button onClick={() => setCanvasZoom((value) => Math.max(35, value - 10))} aria-label="Zoom out"><Minus size={16} /></button><output>{canvasZoom}%</output><button onClick={() => setCanvasZoom((value) => Math.min(140, value + 10))} aria-label="Zoom in"><Plus size={16} /></button></div><button className="fit-button" onClick={() => setCanvasZoom(82)}>Fit</button></div> | |
| </main> | |
| </div> | |
| } | |