Spaces:
Sleeping
Sleeping
| import { useMemo, useRef, useState, type CSSProperties, type PointerEvent } from "react"; | |
| import type { Floor, Position, Space, SpaceType, Tpu } from "../../types"; | |
| import { geometryForTpu } from "./geometry"; | |
| type Props = { | |
| floor: Floor; | |
| spaces: Space[]; | |
| geometrySpaces: Space[]; | |
| spaceTypes: SpaceType[]; | |
| tpus: Tpu[]; | |
| showTpus: boolean; | |
| zoom: number; | |
| movingSpaceId: string | null; | |
| inspectedItem: FocusedItem | null; | |
| onInspectSpace: (space: Space) => void; | |
| onInspectTpu: (tpu: Tpu) => void; | |
| onClearInspection: () => void; | |
| onEditSpace: (space: Space) => void; | |
| onPreviewPositions: (positions: Record<string, Position>) => void; | |
| onMoveComplete: (positions: Record<string, Position>) => void; | |
| }; | |
| type DragState = { | |
| start: Position; | |
| origins: Record<string, Position>; | |
| positions: Record<string, Position>; | |
| moved: boolean; | |
| }; | |
| type FocusedItem = { | |
| kind: "space" | "tpu"; | |
| id: string; | |
| }; | |
| type HoveredItem = FocusedItem & { | |
| name: string; | |
| detail: string; | |
| x: number; | |
| y: number; | |
| color: string; | |
| }; | |
| export function MapView(props: Props) { | |
| const { floor, spaces, geometrySpaces, spaceTypes, tpus, showTpus, zoom, movingSpaceId } = props; | |
| const svgRef = useRef<SVGSVGElement>(null); | |
| const [drag, setDrag] = useState<DragState | null>(null); | |
| const [hovered, setHovered] = useState<HoveredItem | null>(null); | |
| const spacesById = useMemo(() => new Map(geometrySpaces.map(space => [space.id, space])), [geometrySpaces]); | |
| const typeByCode = useMemo(() => new Map(spaceTypes.map(type => [type.code, type])), [spaceTypes]); | |
| const membership = useMemo(() => { | |
| const result = new Map<string, Tpu>(); | |
| tpus.forEach(tpu => tpu.members.forEach(member => result.set(member.space_id, tpu))); | |
| return result; | |
| }, [tpus]); | |
| const focusedItem = movingSpaceId ? { kind: "space" as const, id: movingSpaceId } : hovered || props.inspectedItem; | |
| const focusedTpuId = useMemo(() => { | |
| if (!focusedItem) return undefined; | |
| return focusedItem.kind === "tpu" ? focusedItem.id : membership.get(focusedItem.id)?.id; | |
| }, [focusedItem, membership]); | |
| const highlightedSpaceIds = useMemo(() => { | |
| if (!focusedItem) return new Set<string>(); | |
| if (!focusedTpuId) return new Set([focusedItem.id]); | |
| return new Set(tpus.find(tpu => tpu.id === focusedTpuId)?.members.map(member => member.space_id) || []); | |
| }, [focusedItem, focusedTpuId, tpus]); | |
| const hasMapFocus = Boolean(focusedItem); | |
| function pointerPosition(event: PointerEvent): Position { | |
| const bounds = svgRef.current!.getBoundingClientRect(); | |
| return { | |
| x: Math.max(0, Math.min(1, (event.clientX - bounds.left) / bounds.width)), | |
| y: Math.max(0, Math.min(1, (event.clientY - bounds.top) / bounds.height)), | |
| }; | |
| } | |
| function startDrag(event: PointerEvent<SVGGElement>, space: Space) { | |
| if (movingSpaceId !== space.id) return; | |
| event.stopPropagation(); | |
| props.onInspectSpace(space); | |
| const origins = { [space.id]: { ...space.position } }; | |
| event.currentTarget.setPointerCapture(event.pointerId); | |
| setDrag({ start: pointerPosition(event), origins, positions: origins, moved: false }); | |
| } | |
| function moveDrag(event: PointerEvent<SVGSVGElement>) { | |
| if (!drag) return; | |
| const current = pointerPosition(event); | |
| const dx = current.x - drag.start.x; | |
| const dy = current.y - drag.start.y; | |
| const positions = Object.fromEntries(Object.entries(drag.origins).map(([id, origin]) => [id, { | |
| x: Math.max(0, Math.min(1, origin.x + dx)), | |
| y: Math.max(0, Math.min(1, origin.y + dy)), | |
| }])); | |
| props.onPreviewPositions(positions); | |
| setDrag({ ...drag, positions, moved: drag.moved || Math.abs(dx) + Math.abs(dy) > .001 }); | |
| } | |
| function endDrag() { | |
| if (!drag) return; | |
| if (drag.moved) props.onMoveComplete(drag.positions); | |
| setDrag(null); | |
| } | |
| function hoverTpu(tpu: Tpu, x: number, y: number) { | |
| setHovered({ | |
| kind: "tpu", | |
| id: tpu.id, | |
| name: tpu.name, | |
| detail: `${tpu.members.length} espaço${tpu.members.length === 1 ? "" : "s"} · clique para ver os detalhes`, | |
| x, | |
| y, | |
| color: tpu.color, | |
| }); | |
| } | |
| return ( | |
| <div className="map-scroll"> | |
| <div className="map-shell" style={{ width: `${zoom * 100}%` }}> | |
| <svg | |
| ref={svgRef} | |
| className="market-map" | |
| viewBox={`0 0 ${floor.width} ${floor.height}`} | |
| onPointerMove={moveDrag} | |
| onPointerUp={endDrag} | |
| onPointerCancel={endDrag} | |
| onClick={() => { if (!movingSpaceId) props.onClearInspection(); }} | |
| aria-label={`Planta do ${floor.name}`} | |
| > | |
| <image href={floor.image} width={floor.width} height={floor.height} preserveAspectRatio="none" /> | |
| {showTpus && tpus.map(tpu => { | |
| const geometry = geometryForTpu(tpu, floor, spacesById); | |
| if (!geometry.frames.length) return null; | |
| return ( | |
| <g key={tpu.id} className={`tpu-visual ${focusedTpuId === tpu.id ? "highlighted" : ""} ${hasMapFocus && focusedTpuId !== tpu.id ? "dimmed" : ""}`} style={{ "--tpu-color": tpu.color } as CSSProperties}> | |
| {geometry.links.map((link, index) => ( | |
| <g | |
| key={`link-${index}`} | |
| className="tpu-link-hit" | |
| onPointerEnter={event => { if (!movingSpaceId) hoverTpu(tpu, event.clientX, event.clientY); }} | |
| onPointerLeave={() => setHovered(null)} | |
| onClick={event => { event.stopPropagation(); if (!movingSpaceId) props.onInspectTpu(tpu); }} | |
| role="button" | |
| aria-label={`Ver detalhes de ${tpu.name}`} | |
| > | |
| <title>Ver detalhes de {tpu.name}</title> | |
| <line className="tpu-link-target" x1={link.x1} y1={link.y1} x2={link.x2} y2={link.y2} /> | |
| <line className={`tpu-link ${link.kind}`} x1={link.x1} y1={link.y1} x2={link.x2} y2={link.y2} /> | |
| </g> | |
| ))} | |
| {geometry.frames.map((frame, index) => ( | |
| <g | |
| key={`frame-${index}`} | |
| onPointerEnter={event => { if (!movingSpaceId) hoverTpu(tpu, event.clientX, event.clientY); }} | |
| onPointerLeave={() => setHovered(null)} | |
| onClick={event => { event.stopPropagation(); if (!movingSpaceId) props.onInspectTpu(tpu); }} | |
| className="tpu-frame-hit" | |
| > | |
| <rect className="tpu-frame" x={frame.x} y={frame.y} width={frame.width} height={frame.height} rx="10" /> | |
| {frame.label && <text className="tpu-label" x={frame.x + 6} y={frame.y - 6}>{frame.label}</text>} | |
| </g> | |
| ))} | |
| </g> | |
| ); | |
| })} | |
| {spaces.map(space => { | |
| const x = space.position.x * floor.width; | |
| const y = space.position.y * floor.height; | |
| const type = typeByCode.get(space.type); | |
| const tpu = membership.get(space.id); | |
| const highlighted = highlightedSpaceIds.has(space.id); | |
| return ( | |
| <g | |
| key={space.id} | |
| className={`space-marker ${movingSpaceId === space.id ? "movable" : ""} ${highlighted ? "highlighted" : ""} ${hasMapFocus && !highlighted ? "dimmed" : ""}`} | |
| transform={`translate(${x} ${y})`} | |
| onPointerEnter={event => { if (!movingSpaceId) setHovered({ | |
| kind: "space", | |
| id: space.id, | |
| name: space.name, | |
| detail: `${type?.label || "Espaço"} · clique para ver os detalhes`, | |
| x: event.clientX, | |
| y: event.clientY, | |
| color: type?.color || "#425466", | |
| }); }} | |
| onPointerLeave={() => setHovered(null)} | |
| onPointerDown={event => startDrag(event, space)} | |
| onClick={event => { event.stopPropagation(); if (!movingSpaceId || movingSpaceId === space.id) props.onInspectSpace(space); }} | |
| onDoubleClick={event => { event.stopPropagation(); if (!movingSpaceId || movingSpaceId === space.id) props.onEditSpace(space); }} | |
| role="button" | |
| aria-label={`${space.name}, ${space.base_area_m2.toFixed(2)} metros quadrados${tpu ? `, ${tpu.name}` : ""}`} | |
| > | |
| <rect x="-22" y="-11" width="44" height="22" rx="6" fill={type?.color || "#fff"} stroke={tpu?.color || "#425466"} /> | |
| <text textAnchor="middle" dominantBaseline="central">{space.name.length > 12 ? `${space.name.slice(0, 11)}…` : space.name}</text> | |
| </g> | |
| ); | |
| })} | |
| </svg> | |
| {hovered && !drag && ( | |
| <div | |
| className="map-hover-card" | |
| style={{ | |
| "--hover-x": `${hovered.x}px`, | |
| "--hover-y": `${hovered.y}px`, | |
| "--hover-color": hovered.color, | |
| } as CSSProperties} | |
| aria-hidden="true" | |
| > | |
| <span>{hovered.kind === "space" ? "ESPAÇO" : "TPU"}</span> | |
| <strong>{hovered.name}</strong> | |
| <small>{hovered.detail}</small> | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| ); | |
| } | |