334 lines
11 KiB
JavaScript
334 lines
11 KiB
JavaScript
import { useRef, useState } from "react";
|
|
import {
|
|
clientPointToMap,
|
|
getObjectKey,
|
|
itemsForZone,
|
|
} from "../../lib/locationMapUtils";
|
|
|
|
const DRAG_CHANGE_THRESHOLD = 2;
|
|
|
|
export default function LocationMapCanvas({
|
|
mode,
|
|
editorTool,
|
|
objects,
|
|
filters,
|
|
mapSize,
|
|
zoom,
|
|
selectedObjectKey,
|
|
mapItems,
|
|
username,
|
|
svgRef,
|
|
dragState,
|
|
setDragState,
|
|
setSelectedObjectKey,
|
|
remember,
|
|
updateObjects,
|
|
}) {
|
|
const canEditObjects = mode === "edit" && editorTool === "edit";
|
|
const canDragPan = mode === "view" || editorTool === "pan";
|
|
const scrollRef = useRef(null);
|
|
const panDragRef = useRef(null);
|
|
const objectDragHistoryCapturedRef = useRef(false);
|
|
const suppressPanClickRef = useRef(false);
|
|
const [isPanning, setIsPanning] = useState(false);
|
|
|
|
const startDrag = (event, object, type) => {
|
|
if (!canEditObjects || object.locked || !svgRef.current) return;
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
objectDragHistoryCapturedRef.current = false;
|
|
const point = clientPointToMap(event, svgRef.current, mapSize);
|
|
event.currentTarget.setPointerCapture?.(event.pointerId);
|
|
setSelectedObjectKey(getObjectKey(object));
|
|
setDragState({
|
|
type,
|
|
key: getObjectKey(object),
|
|
startPoint: point,
|
|
startObject: { ...object },
|
|
});
|
|
};
|
|
|
|
const handlePointerMove = (event) => {
|
|
if (!dragState || !svgRef.current) return;
|
|
event.preventDefault();
|
|
const point = clientPointToMap(event, svgRef.current, mapSize);
|
|
const deltaX = point.x - dragState.startPoint.x;
|
|
const deltaY = point.y - dragState.startPoint.y;
|
|
const hasMeaningfulChange =
|
|
Math.abs(deltaX) >= DRAG_CHANGE_THRESHOLD ||
|
|
Math.abs(deltaY) >= DRAG_CHANGE_THRESHOLD;
|
|
|
|
if (!hasMeaningfulChange) return;
|
|
if (!objectDragHistoryCapturedRef.current) {
|
|
remember();
|
|
objectDragHistoryCapturedRef.current = true;
|
|
}
|
|
|
|
updateObjects((currentObjects) =>
|
|
currentObjects.map((object) => {
|
|
if (getObjectKey(object) !== dragState.key) return object;
|
|
if (dragState.type === "resize") {
|
|
return {
|
|
...object,
|
|
width: Math.max(40, dragState.startObject.width + deltaX),
|
|
height: Math.max(40, dragState.startObject.height + deltaY),
|
|
};
|
|
}
|
|
return {
|
|
...object,
|
|
x: dragState.startObject.x + deltaX,
|
|
y: dragState.startObject.y + deltaY,
|
|
};
|
|
})
|
|
);
|
|
};
|
|
|
|
const handlePointerUp = () => {
|
|
objectDragHistoryCapturedRef.current = false;
|
|
setDragState(null);
|
|
};
|
|
|
|
const handleObjectClick = (event, object) => {
|
|
event.stopPropagation();
|
|
if (suppressPanClickRef.current) {
|
|
suppressPanClickRef.current = false;
|
|
return;
|
|
}
|
|
if (mode === "view" || canEditObjects) {
|
|
setSelectedObjectKey(getObjectKey(object));
|
|
}
|
|
};
|
|
|
|
const clearSelection = () => {
|
|
if (suppressPanClickRef.current) {
|
|
suppressPanClickRef.current = false;
|
|
return;
|
|
}
|
|
if (!dragState) {
|
|
setSelectedObjectKey(null);
|
|
}
|
|
};
|
|
|
|
const startPan = (event) => {
|
|
if (!canDragPan || !scrollRef.current || event.button !== 0) return;
|
|
const objectElement = event.target.closest?.(".location-map-object");
|
|
event.currentTarget.setPointerCapture?.(event.pointerId);
|
|
panDragRef.current = {
|
|
startX: event.clientX,
|
|
startY: event.clientY,
|
|
scrollLeft: scrollRef.current.scrollLeft,
|
|
scrollTop: scrollRef.current.scrollTop,
|
|
objectKey: objectElement?.getAttribute("data-object-key") || null,
|
|
moved: false,
|
|
};
|
|
setIsPanning(true);
|
|
};
|
|
|
|
const movePan = (event) => {
|
|
if (!panDragRef.current || !scrollRef.current) return;
|
|
const deltaX = event.clientX - panDragRef.current.startX;
|
|
const deltaY = event.clientY - panDragRef.current.startY;
|
|
if (Math.abs(deltaX) > 4 || Math.abs(deltaY) > 4) {
|
|
panDragRef.current.moved = true;
|
|
event.preventDefault();
|
|
}
|
|
scrollRef.current.scrollLeft = panDragRef.current.scrollLeft - deltaX;
|
|
scrollRef.current.scrollTop = panDragRef.current.scrollTop - deltaY;
|
|
};
|
|
|
|
const endPan = (event) => {
|
|
if (!panDragRef.current) return;
|
|
const wasMoved = panDragRef.current.moved;
|
|
const objectKey = panDragRef.current.objectKey;
|
|
if (!wasMoved && mode === "view" && objectKey) {
|
|
setSelectedObjectKey(objectKey);
|
|
suppressPanClickRef.current = true;
|
|
} else {
|
|
suppressPanClickRef.current = wasMoved;
|
|
}
|
|
panDragRef.current = null;
|
|
setIsPanning(false);
|
|
event.currentTarget.releasePointerCapture?.(event.pointerId);
|
|
};
|
|
|
|
const truncateLabel = (value, maxCharacters) => {
|
|
if (value.length <= maxCharacters) return value;
|
|
return `${value.slice(0, Math.max(5, maxCharacters - 3)).trimEnd()}...`;
|
|
};
|
|
|
|
const fittedLabelLines = (object, fallback) => {
|
|
const rawLabel = String(object.label || object.zone_name || fallback).trim();
|
|
const maxCharacters = Math.max(8, Math.floor((Number(object.width) - 28) / 13));
|
|
const canUseTwoLines = Number(object.height) >= 92 && rawLabel.length > maxCharacters;
|
|
if (!canUseTwoLines) return [truncateLabel(rawLabel, maxCharacters)];
|
|
|
|
const words = rawLabel.split(/\s+/);
|
|
let firstLine = "";
|
|
let splitIndex = 0;
|
|
for (let index = 0; index < words.length; index += 1) {
|
|
const candidate = firstLine ? `${firstLine} ${words[index]}` : words[index];
|
|
if (candidate.length > maxCharacters && firstLine) break;
|
|
firstLine = candidate;
|
|
splitIndex = index + 1;
|
|
if (candidate.length >= maxCharacters) break;
|
|
}
|
|
|
|
const secondLine = words.slice(splitIndex).join(" ");
|
|
if (!secondLine) return [truncateLabel(firstLine, maxCharacters)];
|
|
return [
|
|
truncateLabel(firstLine, maxCharacters),
|
|
truncateLabel(secondLine, maxCharacters),
|
|
];
|
|
};
|
|
|
|
const renderMapObject = (object, index) => {
|
|
if (!object.visible || !filters.showZones) return null;
|
|
const key = getObjectKey(object);
|
|
const isSelected = key === selectedObjectKey;
|
|
const zoneItems = itemsForZone(mapItems, object.zone_id, filters, username);
|
|
const count = zoneItems.length;
|
|
const countLabel = `${count} item${count === 1 ? "" : "s"}`;
|
|
const labelLines = fittedLabelLines(object, "Area");
|
|
const countY = filters.showLabels && labelLines.length > 1 ? object.y + 76 : object.y + 52;
|
|
const resizeHandleSize = Math.min(96, Math.max(44, Math.ceil(48 / zoom)));
|
|
const resizeHandleInset = 6;
|
|
const resizeHandleX = Math.min(
|
|
Math.max(0, mapSize.width - resizeHandleSize),
|
|
Math.max(
|
|
object.x + resizeHandleInset,
|
|
object.x + object.width - resizeHandleSize - resizeHandleInset
|
|
)
|
|
);
|
|
const resizeHandleY = Math.min(
|
|
Math.max(0, mapSize.height - resizeHandleSize),
|
|
Math.max(
|
|
object.y + resizeHandleInset,
|
|
object.y + object.height - resizeHandleSize - resizeHandleInset
|
|
)
|
|
);
|
|
const pinDots = filters.showPins
|
|
? zoneItems.slice(0, 12).map((item, itemIndex) => {
|
|
const column = itemIndex % 4;
|
|
const row = Math.floor(itemIndex / 4);
|
|
return (
|
|
<circle
|
|
key={item.id}
|
|
className="location-map-pin"
|
|
cx={object.x + 24 + column * 18}
|
|
cy={object.y + 30 + row * 18}
|
|
r="5"
|
|
/>
|
|
);
|
|
})
|
|
: null;
|
|
|
|
return (
|
|
<g
|
|
key={key}
|
|
data-object-key={key}
|
|
className={[
|
|
"location-map-object",
|
|
isSelected ? "is-selected" : "",
|
|
canEditObjects ? "is-editable" : "",
|
|
].filter(Boolean).join(" ")}
|
|
transform={`rotate(${object.rotation || 0} ${object.x + object.width / 2} ${object.y + object.height / 2})`}
|
|
>
|
|
<rect
|
|
x={object.x}
|
|
y={object.y}
|
|
width={object.width}
|
|
height={object.height}
|
|
rx="12"
|
|
role="button"
|
|
aria-label={`Map area ${object.label || index + 1}`}
|
|
onPointerDown={(event) => startDrag(event, object, "move")}
|
|
onClick={(event) => handleObjectClick(event, object)}
|
|
/>
|
|
{filters.showLabels ? (
|
|
<text x={object.x + 16} y={object.y + 28} className="location-map-label">
|
|
{labelLines.map((line, lineIndex) => (
|
|
<tspan key={`${line}-${lineIndex}`} x={object.x + 16} dy={lineIndex === 0 ? 0 : 24}>
|
|
{line}
|
|
</tspan>
|
|
))}
|
|
</text>
|
|
) : null}
|
|
{filters.showCounts ? (
|
|
<text x={object.x + 16} y={countY} className="location-map-count">
|
|
{countLabel}
|
|
</text>
|
|
) : null}
|
|
{pinDots}
|
|
{canEditObjects && isSelected ? (
|
|
<rect
|
|
className="location-map-resize-handle"
|
|
x={resizeHandleX}
|
|
y={resizeHandleY}
|
|
width={resizeHandleSize}
|
|
height={resizeHandleSize}
|
|
rx="8"
|
|
onPointerDown={(event) => startDrag(event, object, "resize")}
|
|
onClick={(event) => event.stopPropagation()}
|
|
/>
|
|
) : null}
|
|
</g>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<section
|
|
className={[
|
|
"location-map-canvas-shell",
|
|
mode === "edit" ? "is-edit-mode" : "is-view-mode",
|
|
editorTool === "edit" ? "is-object-tool" : "is-pan-tool",
|
|
isPanning ? "is-panning" : "",
|
|
].filter(Boolean).join(" ")}
|
|
>
|
|
<div
|
|
ref={scrollRef}
|
|
className="location-map-scroll"
|
|
onPointerDown={startPan}
|
|
onPointerMove={movePan}
|
|
onPointerUp={endPan}
|
|
onPointerCancel={endPan}
|
|
onPointerLeave={endPan}
|
|
>
|
|
<svg
|
|
ref={svgRef}
|
|
className={[
|
|
"location-map-svg",
|
|
canEditObjects ? "is-editable" : "",
|
|
].filter(Boolean).join(" ")}
|
|
style={{
|
|
width: `${mapSize.width * zoom}px`,
|
|
height: `${mapSize.height * zoom}px`,
|
|
}}
|
|
viewBox={`0 0 ${mapSize.width} ${mapSize.height}`}
|
|
role="img"
|
|
aria-label="Store location map"
|
|
onPointerMove={handlePointerMove}
|
|
onPointerUp={handlePointerUp}
|
|
onPointerLeave={handlePointerUp}
|
|
onClick={clearSelection}
|
|
>
|
|
<defs>
|
|
<pattern id="location-map-grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
|
<path d="M 40 0 L 0 0 0 40" fill="none" />
|
|
</pattern>
|
|
</defs>
|
|
<rect className="location-map-background" width={mapSize.width} height={mapSize.height} />
|
|
{mode === "edit" ? (
|
|
<rect className="location-map-grid" width={mapSize.width} height={mapSize.height} />
|
|
) : null}
|
|
{objects.map(renderMapObject)}
|
|
</svg>
|
|
{objects.length === 0 ? (
|
|
<div className="location-map-empty-canvas">
|
|
No map areas yet
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|