diff --git a/package.json b/package.json index 832ca57..a79a959 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lageplan", - "version": "1.5.1", + "version": "1.5.2", "description": "Feuerwehr Lageplan - Krokier-App für Einsatzdokumentation", "private": true, "scripts": { diff --git a/src/components/layout/right-sidebar.tsx b/src/components/layout/right-sidebar.tsx index a99e642..c67b6e4 100644 --- a/src/components/layout/right-sidebar.tsx +++ b/src/components/layout/right-sidebar.tsx @@ -1,6 +1,6 @@ 'use client' -import { useState, useEffect } from 'react' +import { useState, useEffect, useRef } from 'react' import { useDrag } from 'react-dnd' import { getEmptyImage } from 'react-dnd-html5-backend' import { Input } from '@/components/ui/input' @@ -76,10 +76,34 @@ function DraggableSymbol({ symbol, canEdit, onSelect }: { preview(getEmptyImage(), { captureDraggingState: true }) }, [preview]) + // Touch-Tap eigenständig erkennen: der TouchBackend (react-dnd) schluckt auf + // dem Handy den onClick der Drag-Quelle. Ohne diesen Handler würde Tap-to-place + // auf Mobil gar nicht auslösen. Ein kurzer Tipp ohne Bewegung = Auswahl. + const touchStartRef = useRef<{ x: number; y: number; t: number } | null>(null) + + const handleTouchStart = (e: React.TouchEvent) => { + const t = e.touches[0] + touchStartRef.current = { x: t.clientX, y: t.clientY, t: Date.now() } + } + const handleTouchEnd = (e: React.TouchEvent) => { + const start = touchStartRef.current + touchStartRef.current = null + if (!start || !canEdit || !onSelect) return + const t = e.changedTouches[0] + const moved = Math.hypot(t.clientX - start.x, t.clientY - start.y) + // Kurzer, ortsfester Tipp → als Auswahl werten (kein Drag) + if (moved < 12 && Date.now() - start.t < 600) { + e.preventDefault() // verhindert den synthetischen Klick (kein Doppel-Auslösen) + onSelect(symbol) + } + } + return (
} onClick={() => { if (canEdit && onSelect) onSelect(symbol) }} + onTouchStart={handleTouchStart} + onTouchEnd={handleTouchEnd} className={` flex flex-col items-center gap-1 p-1.5 md:p-2 lg:p-2.5 rounded-lg border-2 transition-all border-transparent hover:border-border hover:bg-accent