From eb5da2f0c350100f23041dcd07762e7bd9c318cd Mon Sep 17 00:00:00 2001 From: Pepe Ziberi Date: Wed, 22 Jul 2026 23:23:09 +0200 Subject: [PATCH] fix(map+edit): erster Zeichen-Punkt sofort sichtbar + Bearbeiten-Status klarer (v1.6.8) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Zeichnen: gesetzte Eckpunkte (Linie/Polygon/Pfeil/Gefahrenzone) erscheinen sofort als Marker beim Klick — bisher sah man auf dem Handy erst ab dem zweiten Punkt etwas (Vorschau nur bei Mausbewegung) - Gemeinsames Bearbeiten: alle drei Zustände explizit in der Statuszeile — "Ansichtsmodus frei · Bearbeiten übernehmen", "Sie bearbeiten · freigeben", "X bearbeitet · nur Ansicht" Co-Authored-By: Claude Opus 4.8 (1M context) --- package.json | 2 +- src/app/app/page.tsx | 20 +++++++--- src/components/map/map-view.tsx | 69 ++++++++++++++++++++++----------- 3 files changed, 63 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index d6d5082..b82c672 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lageplan", - "version": "1.6.7", + "version": "1.6.8", "description": "Feuerwehr Lageplan - Krokier-App für Einsatzdokumentation", "private": true, "scripts": { diff --git a/src/app/app/page.tsx b/src/app/app/page.tsx index 7a34223..7c7f38e 100644 --- a/src/app/app/page.tsx +++ b/src/app/app/page.tsx @@ -19,7 +19,7 @@ import { useAuth } from '@/components/providers/auth-provider' import { Button } from '@/components/ui/button' import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog' import { JournalView } from '@/components/journal/journal-view' -import { Lock, Eye, AlertTriangle, WifiOff, GraduationCap, Map as MapIcon, ClipboardList, LayoutGrid } from 'lucide-react' +import { Lock, Eye, Pencil, AlertTriangle, WifiOff, GraduationCap, Map as MapIcon, ClipboardList, LayoutGrid } from 'lucide-react' import { CustomDragLayer } from '@/components/map/custom-drag-layer' import { OnboardingTour, resetOnboardingTour } from '@/components/onboarding/onboarding-tour' import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts' @@ -1038,7 +1038,7 @@ export default function AppPage() { {/* Kompakte Status-Zeile — eine Zeile mit Chips statt bis zu vier gestapelten Bannern. Zeigt nur, was gerade zutrifft; im Normalfall (Einsatz, online, verifiziert, niemand fremd am Zeichnen) erscheint sie gar nicht. */} - {(currentProject?.mode === 'UEBUNG' || isOffline || isReadOnly || isEditingByMe || (user && user.emailVerified === false)) && ( + {(currentProject?.mode === 'UEBUNG' || isOffline || isReadOnly || isEditingByMe || (currentProject && roleCanEdit && !presentationLocked) || (user && user.emailVerified === false)) && (
{currentProject?.mode === 'UEBUNG' && ( @@ -1052,17 +1052,27 @@ export default function AppPage() { )} {isReadOnly && ( - {editingBy?.name} bearbeitet · Live-Ansicht + {editingBy?.name} bearbeitet gerade · Sie sehen live zu (nur Ansicht) )} {isEditingByMe && ( - Sie bearbeiten - )} + {/* Karte ist frei und ich dürfte bearbeiten — expliziter Hinweis + Übernehmen, + damit klar ist, dass man gerade nur zuschaut, bis man selbst startet. */} + {currentProject && roleCanEdit && !isReadOnly && !isEditingByMe && !presentationLocked && ( + + Ansichtsmodus — frei + + + )} {user && user.emailVerified === false && ( E-Mail unbestätigt diff --git a/src/components/map/map-view.tsx b/src/components/map/map-view.tsx index ca2a22b..74cc6be 100644 --- a/src/components/map/map-view.tsx +++ b/src/components/map/map-view.tsx @@ -943,6 +943,21 @@ export function MapView({ }, }) + // Preview vertex points — jeder gesetzte Eckpunkt bekommt sofort einen sichtbaren + // Marker (sonst sieht man beim ersten Klick nichts, v.a. auf dem Handy ohne Hover) + m.addLayer({ + id: 'draw-preview-points', + type: 'circle', + source: 'draw-preview', + filter: ['==', ['geometry-type'], 'Point'], + paint: { + 'circle-radius': ['coalesce', ['get', 'r'], 5], + 'circle-color': ['coalesce', ['get', 'fill'], '#ffffff'], + 'circle-stroke-color': ['coalesce', ['get', 'color'], '#2563eb'], + 'circle-stroke-width': 2, + }, + }) + // --- Helper: update preview source --- function setPreview(data: any) { const mapRef = map.current @@ -953,6 +968,34 @@ export function MapView({ function clearPreviewData() { setPreview({ type: 'FeatureCollection', features: [] }) } + // Baut die Live-Vorschau für mehrpunkt-Werkzeuge (Linie/Polygon/Pfeil/Gefahrenzone): + // gesetzte Eckpunkte als Marker + optionale Gummiband-Linie/Fläche zum Cursor. + function buildVertexPreview(mode: string, verts: [number, number][], hover?: [number, number]) { + if (verts.length === 0) return { type: 'FeatureCollection', features: [] as any[] } + const previewColor = mode === 'dangerzone' ? '#dc2626' : selectedColorRef.current + const feats: any[] = [] + const isArea = mode === 'polygon' || mode === 'dangerzone' + // Verbindungsgeometrie (nur wenn mind. 1 Punkt gesetzt) + if (hover) { + if (isArea) { + const ring = [...verts, hover, verts[0]] + feats.push({ type: 'Feature', geometry: { type: 'Polygon', coordinates: [ring] }, properties: { color: previewColor } }) + } else { + feats.push({ type: 'Feature', geometry: { type: 'LineString', coordinates: [...verts, hover] }, properties: { color: previewColor } }) + } + } else if (verts.length >= 2) { + feats.push({ type: 'Feature', geometry: { type: 'LineString', coordinates: verts }, properties: { color: previewColor } }) + } + // Eckpunkt-Marker — der erste etwas grösser/gefüllt, damit der Start klar ist + verts.forEach((v, i) => { + feats.push({ + type: 'Feature', + geometry: { type: 'Point', coordinates: v }, + properties: { color: previewColor, fill: i === 0 ? previewColor : '#ffffff', r: i === 0 ? 6 : 5 }, + }) + }) + return { type: 'FeatureCollection', features: feats } + } // --- ALL drawing event handlers registered directly in map load --- m.on('click', (e: maplibregl.MapMouseEvent) => { @@ -1102,6 +1145,8 @@ export function MapView({ drawingRef.current.currentCoords.push(coords) setDrawingPointCount(drawingRef.current.currentCoords.length) } + // Sofort-Feedback: gesetzte Eckpunkte anzeigen, auch ohne Mausbewegung (Touch!) + setPreview(buildVertexPreview(mode, drawingRef.current.currentCoords as [number, number][])) return } @@ -1255,29 +1300,9 @@ export function MapView({ if (!drawingRef.current.isDrawing && !drawingRef.current.startPoint) return - if (mode === 'linestring' || mode === 'arrow') { + if (mode === 'linestring' || mode === 'arrow' || mode === 'polygon' || mode === 'dangerzone') { if (drawingRef.current.currentCoords.length > 0) { - setPreview({ - type: 'FeatureCollection', - features: [{ - type: 'Feature', - geometry: { type: 'LineString', coordinates: [...drawingRef.current.currentCoords, coords] }, - properties: { color }, - }], - }) - } - } else if (mode === 'polygon' || mode === 'dangerzone') { - if (drawingRef.current.currentCoords.length > 0) { - const pc = [...drawingRef.current.currentCoords, coords, drawingRef.current.currentCoords[0]] - const previewColor = mode === 'dangerzone' ? '#dc2626' : color - setPreview({ - type: 'FeatureCollection', - features: [{ - type: 'Feature', - geometry: { type: 'Polygon', coordinates: [pc] }, - properties: { color: previewColor }, - }], - }) + setPreview(buildVertexPreview(mode, drawingRef.current.currentCoords as [number, number][], coords)) } } else if (mode === 'rectangle' && drawingRef.current.startPoint) { const s = drawingRef.current.startPoint