add somenew UI editor feature for more effêcncy
This commit is contained in:
taDuc
@@ -63,19 +63,24 @@ export default function Editor({
|
||||
undoStack,
|
||||
width = 280,
|
||||
}: Props) {
|
||||
// State đóng/mở modal submit project.
|
||||
const [isSubmitModalOpen, setIsSubmitModalOpen] = useState(false);
|
||||
// State nội dung submit gửi lên backend khi user xác nhận.
|
||||
const [submitContent, setSubmitContent] = useState("");
|
||||
|
||||
// Mở modal submit với nội dung sạch cho lần submit mới.
|
||||
const handleOpenSubmitModal = () => {
|
||||
setSubmitContent("");
|
||||
setIsSubmitModalOpen(true);
|
||||
};
|
||||
|
||||
// Xác nhận submit: đóng modal trước rồi chuyển content cho command cha.
|
||||
const handleConfirmSubmit = () => {
|
||||
setIsSubmitModalOpen(false);
|
||||
onSubmit(submitContent);
|
||||
};
|
||||
|
||||
// Hủy submit mà không thay đổi draft/commit.
|
||||
const handleCancelSubmit = () => {
|
||||
setIsSubmitModalOpen(false);
|
||||
};
|
||||
|
||||
@@ -11,6 +11,7 @@ import { useMapInstance } from "./map/useMapInstance";
|
||||
import { setupMapLayers } from "./map/useMapLayers";
|
||||
import { useMapInteraction } from "./map/useMapInteraction";
|
||||
import { useMapSync } from "./map/useMapSync";
|
||||
import { bindImageOverlayInteractions, type MapImageOverlay } from "./map/imageOverlay";
|
||||
|
||||
export type MapHoverPayload = {
|
||||
featureId: string | number;
|
||||
@@ -39,8 +40,10 @@ type MapProps = {
|
||||
onSelectFeatureIds: (ids: (string | number)[]) => void;
|
||||
onSetMode?: (mode: EditorMode, featureId?: string | number) => void;
|
||||
labelContextDraft?: FeatureCollection;
|
||||
labelTimelineYear?: number | null;
|
||||
onCreateFeature?: (feature: FeatureCollection["features"][number]) => void;
|
||||
onDeleteFeature?: (id: string | number) => void;
|
||||
onHideFeature?: (id: string | number) => void;
|
||||
onUpdateFeature?: (id: string | number, geometry: Geometry) => void;
|
||||
allowGeometryEditing?: boolean;
|
||||
respectBindingFilter?: boolean;
|
||||
@@ -52,6 +55,8 @@ type MapProps = {
|
||||
focusFeatureCollection?: FeatureCollection | null;
|
||||
focusRequestKey?: string | number | null;
|
||||
focusPadding?: number | import("maplibre-gl").PaddingOptions;
|
||||
imageOverlay?: MapImageOverlay | null;
|
||||
onImageOverlayChange?: (overlay: MapImageOverlay) => void;
|
||||
};
|
||||
|
||||
const Map = forwardRef<MapHandle, MapProps>(function Map({
|
||||
@@ -63,8 +68,10 @@ const Map = forwardRef<MapHandle, MapProps>(function Map({
|
||||
selectedFeatureIds,
|
||||
onSelectFeatureIds,
|
||||
labelContextDraft,
|
||||
labelTimelineYear,
|
||||
onCreateFeature,
|
||||
onDeleteFeature,
|
||||
onHideFeature,
|
||||
onUpdateFeature,
|
||||
allowGeometryEditing = true,
|
||||
respectBindingFilter = true,
|
||||
@@ -76,15 +83,31 @@ const Map = forwardRef<MapHandle, MapProps>(function Map({
|
||||
focusFeatureCollection = null,
|
||||
focusRequestKey = null,
|
||||
focusPadding,
|
||||
imageOverlay = null,
|
||||
onImageOverlayChange,
|
||||
}, ref) {
|
||||
// Ref giữ mode mới nhất cho MapLibre handlers được register một lần.
|
||||
const modeRef = useRef<MapProps["mode"]>(mode);
|
||||
// Ref giữ draft mới nhất để engine đọc không bị stale closure.
|
||||
const draftRef = useRef<FeatureCollection>(draft);
|
||||
// Ref callback select feature mới nhất cho event click trên map.
|
||||
const onSelectFeatureIdsRef = useRef(onSelectFeatureIds);
|
||||
// Ref callback đổi mode mới nhất, dùng khi map interaction chuyển sang replay/select.
|
||||
const onSetModeRef = useRef(onSetMode);
|
||||
// Ref callback hover mới nhất cho tooltip/panel ngoài map.
|
||||
const onHoverFeatureChangeRef = useRef<MapProps["onHoverFeatureChange"]>(onHoverFeatureChange);
|
||||
// Ref callback create mới nhất khi drawing engine tạo feature.
|
||||
const onCreateRef = useRef<MapProps["onCreateFeature"]>(onCreateFeature);
|
||||
// Ref callback delete mới nhất khi editing engine xóa feature.
|
||||
const onDeleteRef = useRef<MapProps["onDeleteFeature"]>(onDeleteFeature);
|
||||
// Ref callback hide local mới nhất khi context menu select ẩn feature khỏi map.
|
||||
const onHideRef = useRef<MapProps["onHideFeature"]>(onHideFeature);
|
||||
// Ref callback update mới nhất khi editing engine đổi geometry.
|
||||
const onUpdateRef = useRef<MapProps["onUpdateFeature"]>(onUpdateFeature);
|
||||
// Ref giữ overlay mới nhất cho right-drag controls.
|
||||
const imageOverlayRef = useRef<MapImageOverlay | null>(imageOverlay);
|
||||
// Ref callback update overlay mới nhất để interaction không stale.
|
||||
const onImageOverlayChangeRef = useRef<MapProps["onImageOverlayChange"]>(onImageOverlayChange);
|
||||
|
||||
useEffect(() => { modeRef.current = mode; }, [mode]);
|
||||
useEffect(() => { draftRef.current = draft; }, [draft]);
|
||||
@@ -93,8 +116,12 @@ const Map = forwardRef<MapHandle, MapProps>(function Map({
|
||||
useEffect(() => { onHoverFeatureChangeRef.current = onHoverFeatureChange; }, [onHoverFeatureChange]);
|
||||
useEffect(() => { onCreateRef.current = onCreateFeature; }, [onCreateFeature]);
|
||||
useEffect(() => { onDeleteRef.current = onDeleteFeature; }, [onDeleteFeature]);
|
||||
useEffect(() => { onHideRef.current = onHideFeature; }, [onHideFeature]);
|
||||
useEffect(() => { onUpdateRef.current = onUpdateFeature; }, [onUpdateFeature]);
|
||||
useEffect(() => { imageOverlayRef.current = imageOverlay; }, [imageOverlay]);
|
||||
useEffect(() => { onImageOverlayChangeRef.current = onImageOverlayChange; }, [onImageOverlayChange]);
|
||||
|
||||
// Hook sở hữu lifecycle MapLibre instance và các control camera/projection.
|
||||
const {
|
||||
mapRef,
|
||||
containerRef,
|
||||
@@ -107,14 +134,18 @@ const Map = forwardRef<MapHandle, MapProps>(function Map({
|
||||
geolocationCenteredRef,
|
||||
handleZoomByStep,
|
||||
handleZoomSliderChange,
|
||||
beginZoomSliderDrag,
|
||||
endZoomSliderDrag,
|
||||
getViewState,
|
||||
} = useMapInstance();
|
||||
|
||||
// Public API cho parent đọc map instance/view state mà không expose implementation nội bộ.
|
||||
useImperativeHandle(ref, () => ({
|
||||
getViewState,
|
||||
getMap: () => mapRef.current,
|
||||
}), [getViewState, mapRef]);
|
||||
|
||||
// Hook gắn/dọn các interaction vẽ, chọn, sửa geometry.
|
||||
const {
|
||||
editingEngineRef,
|
||||
setupMapInteractions,
|
||||
@@ -130,18 +161,22 @@ const Map = forwardRef<MapHandle, MapProps>(function Map({
|
||||
onSetModeRef,
|
||||
onCreateRef,
|
||||
onDeleteRef,
|
||||
onHideRef,
|
||||
onUpdateRef,
|
||||
onHoverFeatureChangeRef,
|
||||
});
|
||||
|
||||
// Hook đồng bộ draft/layer/filter/highlight từ React state xuống MapLibre source/layer.
|
||||
const {
|
||||
applyDraftToMap,
|
||||
applyHighlightToMap,
|
||||
applyImageOverlayToMap,
|
||||
tryCenterToUserLocation,
|
||||
} = useMapSync({
|
||||
mapRef,
|
||||
draft,
|
||||
labelContextDraft,
|
||||
labelTimelineYear,
|
||||
backgroundVisibility,
|
||||
geometryVisibility,
|
||||
selectedFeatureIds,
|
||||
@@ -152,6 +187,7 @@ const Map = forwardRef<MapHandle, MapProps>(function Map({
|
||||
focusFeatureCollection,
|
||||
focusRequestKey,
|
||||
focusPadding,
|
||||
imageOverlay,
|
||||
allowGeometryEditing,
|
||||
editingEngineRef,
|
||||
geolocationCenteredRef,
|
||||
@@ -162,6 +198,7 @@ const Map = forwardRef<MapHandle, MapProps>(function Map({
|
||||
if (!map || !isMapLoaded) return;
|
||||
|
||||
setupMapLayers(map, backgroundVisibility, highlightFeatures, applyHighlightToMap);
|
||||
applyImageOverlayToMap();
|
||||
setupMapInteractions(map);
|
||||
applyDraftToMap(draftRef.current);
|
||||
tryCenterToUserLocation();
|
||||
@@ -180,6 +217,17 @@ const Map = forwardRef<MapHandle, MapProps>(function Map({
|
||||
}
|
||||
}, [mode, isMapLoaded, mapRef]);
|
||||
|
||||
const hasImageOverlay = Boolean(imageOverlay);
|
||||
useEffect(() => {
|
||||
const map = mapRef.current;
|
||||
if (!map || !isMapLoaded || !hasImageOverlay) return;
|
||||
return bindImageOverlayInteractions(
|
||||
map,
|
||||
() => imageOverlayRef.current,
|
||||
(nextOverlay) => onImageOverlayChangeRef.current?.(nextOverlay)
|
||||
);
|
||||
}, [hasImageOverlay, isMapLoaded, mapRef]);
|
||||
|
||||
return (
|
||||
<div style={{ width: "100%", height, position: "relative" }}>
|
||||
<div ref={containerRef} style={{ width: "100%", height: "100%" }} />
|
||||
@@ -320,6 +368,26 @@ const Map = forwardRef<MapHandle, MapProps>(function Map({
|
||||
max={zoomBounds.max}
|
||||
step={0.1}
|
||||
value={zoomLevel}
|
||||
onPointerDown={(event) => {
|
||||
event.stopPropagation();
|
||||
try {
|
||||
event.currentTarget.setPointerCapture(event.pointerId);
|
||||
} catch {
|
||||
// Browser may reject capture for non-primary pointers; drag lock still works.
|
||||
}
|
||||
beginZoomSliderDrag();
|
||||
}}
|
||||
onPointerUp={(event) => {
|
||||
event.stopPropagation();
|
||||
try {
|
||||
event.currentTarget.releasePointerCapture(event.pointerId);
|
||||
} catch {
|
||||
// Ignore if capture was already released.
|
||||
}
|
||||
endZoomSliderDrag();
|
||||
}}
|
||||
onPointerCancel={endZoomSliderDrag}
|
||||
onBlur={endZoomSliderDrag}
|
||||
onChange={(event) => handleZoomSliderChange(Number(event.target.value))}
|
||||
style={{
|
||||
flex: 1,
|
||||
|
||||
@@ -8,6 +8,9 @@ import { useEditorStore } from "@/uhm/store/editorStore";
|
||||
type GeometryChoice = {
|
||||
id: string;
|
||||
label?: string;
|
||||
time_start?: number | null;
|
||||
time_end?: number | null;
|
||||
isTimelineVisible?: boolean;
|
||||
isNew?: boolean;
|
||||
};
|
||||
|
||||
@@ -31,16 +34,16 @@ export default function GeometryBindingPanel({
|
||||
statusText,
|
||||
bindingFilterEnabled,
|
||||
setGeometryBindingFilterEnabled,
|
||||
hoveredGeometryId,
|
||||
setHoveredGeometryId,
|
||||
geometryVisibility,
|
||||
setGeometryVisibility,
|
||||
} = useEditorStore(
|
||||
useShallow((state) => ({
|
||||
selectedFeatureIds: state.selectedFeatureIds,
|
||||
statusText: state.geoBindingStatus,
|
||||
bindingFilterEnabled: state.geometryBindingFilterEnabled,
|
||||
setGeometryBindingFilterEnabled: state.setGeometryBindingFilterEnabled,
|
||||
hoveredGeometryId: state.hoveredGeometryId,
|
||||
setHoveredGeometryId: state.setHoveredGeometryId,
|
||||
geometryVisibility: state.geometryVisibility,
|
||||
setGeometryVisibility: state.setGeometryVisibility,
|
||||
}))
|
||||
);
|
||||
const effectiveSelectedGeometryId =
|
||||
@@ -55,7 +58,14 @@ export default function GeometryBindingPanel({
|
||||
const rows = useMemo(() => {
|
||||
const cleaned = (geometries || [])
|
||||
.filter((g) => g && typeof g.id === "string" && g.id.trim().length > 0)
|
||||
.map((g) => ({ id: g.id.trim(), label: (g.label || "").trim(), isNew: Boolean(g.isNew) }));
|
||||
.map((g) => ({
|
||||
id: g.id.trim(),
|
||||
label: (g.label || "").trim(),
|
||||
time_start: typeof g.time_start === "number" ? g.time_start : null,
|
||||
time_end: typeof g.time_end === "number" ? g.time_end : null,
|
||||
isTimelineVisible: Boolean(g.isTimelineVisible),
|
||||
isNew: Boolean(g.isNew),
|
||||
}));
|
||||
cleaned.sort((a, b) => a.id.localeCompare(b.id));
|
||||
return cleaned;
|
||||
}, [geometries]);
|
||||
@@ -80,15 +90,20 @@ export default function GeometryBindingPanel({
|
||||
if (!canFocusGeometry) return;
|
||||
if (event.key !== "Enter" && event.key !== " ") return;
|
||||
event.preventDefault();
|
||||
setHoveredGeometryId((current) => (current === geometryId ? null : current));
|
||||
onFocusGeometry?.(geometryId);
|
||||
};
|
||||
|
||||
const handleFocusGeometry = (geometryId: string) => {
|
||||
setHoveredGeometryId((current) => (current === geometryId ? null : current));
|
||||
onFocusGeometry?.(geometryId);
|
||||
};
|
||||
|
||||
const toggleGeometryVisibility = (geometryId: string) => {
|
||||
setGeometryVisibility((prev) => ({
|
||||
...prev,
|
||||
[geometryId]: prev[geometryId] === false,
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
@@ -97,7 +112,6 @@ export default function GeometryBindingPanel({
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #1f2937",
|
||||
}}
|
||||
onMouseLeave={() => setHoveredGeometryId(null)}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px" }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
|
||||
@@ -148,31 +162,28 @@ export default function GeometryBindingPanel({
|
||||
</div>
|
||||
|
||||
{collapsed ? null : selectedGeometry ? (
|
||||
(() => {
|
||||
const isHidden = geometryVisibility[selectedGeometry.id] === false;
|
||||
const idColor = getGeometryIdColor(selectedGeometry);
|
||||
const labelColor = selectedGeometry.isTimelineVisible ? "#22c55e" : "#e5e7eb";
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
marginTop: 10,
|
||||
padding: "8px",
|
||||
borderRadius: "6px",
|
||||
border:
|
||||
hoveredGeometryId === selectedGeometry.id
|
||||
? "1px solid rgba(245, 158, 11, 0.95)"
|
||||
: "1px solid rgba(59, 130, 246, 0.45)",
|
||||
background:
|
||||
hoveredGeometryId === selectedGeometry.id
|
||||
? "rgba(245, 158, 11, 0.18)"
|
||||
: "rgba(37, 99, 235, 0.12)",
|
||||
"1px solid rgba(59, 130, 246, 0.45)",
|
||||
background: "rgba(37, 99, 235, 0.12)",
|
||||
cursor: canFocusGeometry ? "pointer" : "default",
|
||||
boxShadow:
|
||||
hoveredGeometryId === selectedGeometry.id
|
||||
? "0 0 0 2px rgba(251, 191, 36, 0.18)"
|
||||
: "none",
|
||||
opacity: isHidden ? 0.58 : 1,
|
||||
boxShadow: "none",
|
||||
}}
|
||||
title={selectedGeometry.id}
|
||||
role={canFocusGeometry ? "button" : undefined}
|
||||
tabIndex={canFocusGeometry ? 0 : undefined}
|
||||
onClick={() => handleFocusGeometry(selectedGeometry.id)}
|
||||
onKeyDown={(event) => handleFocusKeyDown(event, selectedGeometry.id)}
|
||||
onMouseEnter={() => setHoveredGeometryId(selectedGeometry.id)}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
@@ -190,7 +201,7 @@ export default function GeometryBindingPanel({
|
||||
<span
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "#e5e7eb",
|
||||
color: labelColor,
|
||||
fontWeight: 700,
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
@@ -199,13 +210,26 @@ export default function GeometryBindingPanel({
|
||||
>
|
||||
{selectedGeometry.label || selectedGeometry.id}
|
||||
</span>
|
||||
{isHidden ? <span style={hiddenBadgeStyle}>hidden</span> : null}
|
||||
{selectedGeometry.isNew ? <NewBadge /> : null}
|
||||
<button
|
||||
type="button"
|
||||
title={isHidden ? "Show geometry on map" : "Hide geometry on map"}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
toggleGeometryVisibility(selectedGeometry.id);
|
||||
}}
|
||||
style={iconButtonStyle}
|
||||
aria-label={isHidden ? `Show geometry ${selectedGeometry.id}` : `Hide geometry ${selectedGeometry.id}`}
|
||||
>
|
||||
{isHidden ? <EyeOffIcon /> : <EyeIcon />}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginTop: 3,
|
||||
fontSize: "11px",
|
||||
color: "#94a3b8",
|
||||
color: idColor,
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
@@ -214,6 +238,8 @@ export default function GeometryBindingPanel({
|
||||
{selectedGeometry.id}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()
|
||||
) : null}
|
||||
|
||||
{collapsed ? null : rows.length ? (
|
||||
@@ -221,36 +247,33 @@ export default function GeometryBindingPanel({
|
||||
{visibleRows
|
||||
.map((g) => {
|
||||
const isBound = bindingSet.has(g.id);
|
||||
const isHovered = hoveredGeometryId === g.id;
|
||||
const isHidden = geometryVisibility[g.id] === false;
|
||||
const idColor = getGeometryIdColor(g);
|
||||
const labelColor = g.isTimelineVisible ? "#22c55e" : "#e5e7eb";
|
||||
return (
|
||||
<div
|
||||
key={g.id}
|
||||
style={{
|
||||
padding: "8px",
|
||||
borderRadius: "6px",
|
||||
border: isHovered
|
||||
? "1px solid rgba(245, 158, 11, 0.95)"
|
||||
: isBound
|
||||
border: isBound
|
||||
? "1px solid rgba(20, 184, 166, 0.65)"
|
||||
: "1px solid #1f2937",
|
||||
background: isHovered
|
||||
? "rgba(245, 158, 11, 0.18)"
|
||||
: isBound
|
||||
background: isBound
|
||||
? "rgba(20, 184, 166, 0.12)"
|
||||
: "transparent",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
cursor: canFocusGeometry ? "pointer" : "default",
|
||||
opacity: canBindToggle ? 1 : 0.75,
|
||||
boxShadow: isHovered ? "0 0 0 2px rgba(251, 191, 36, 0.18)" : "none",
|
||||
opacity: isHidden ? 0.55 : canBindToggle ? 1 : 0.75,
|
||||
boxShadow: "none",
|
||||
}}
|
||||
title={g.id}
|
||||
role={canFocusGeometry ? "button" : undefined}
|
||||
tabIndex={canFocusGeometry ? 0 : undefined}
|
||||
onClick={() => handleFocusGeometry(g.id)}
|
||||
onKeyDown={(event) => handleFocusKeyDown(event, g.id)}
|
||||
onMouseEnter={() => setHoveredGeometryId(g.id)}
|
||||
>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div
|
||||
@@ -264,7 +287,7 @@ export default function GeometryBindingPanel({
|
||||
<span
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "#e5e7eb",
|
||||
color: labelColor,
|
||||
fontWeight: 700,
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
@@ -273,13 +296,14 @@ export default function GeometryBindingPanel({
|
||||
>
|
||||
{g.label || g.id}
|
||||
</span>
|
||||
{isHidden ? <span style={hiddenBadgeStyle}>hidden</span> : null}
|
||||
{isBound ? <span style={boundBadgeStyle}>bound</span> : null}
|
||||
{g.isNew ? <NewBadge /> : null}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "11px",
|
||||
color: "#94a3b8",
|
||||
color: idColor,
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
@@ -289,6 +313,19 @@ export default function GeometryBindingPanel({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
title={isHidden ? "Show geometry on map" : "Hide geometry on map"}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
toggleGeometryVisibility(g.id);
|
||||
}}
|
||||
style={iconButtonStyle}
|
||||
aria-label={isHidden ? `Show geometry ${g.id}` : `Hide geometry ${g.id}`}
|
||||
>
|
||||
{isHidden ? <EyeOffIcon /> : <EyeIcon />}
|
||||
</button>
|
||||
|
||||
{canBindToggle ? (
|
||||
<button
|
||||
type="button"
|
||||
@@ -356,6 +393,74 @@ const boundBadgeStyle: CSSProperties = {
|
||||
letterSpacing: 0,
|
||||
};
|
||||
|
||||
const hiddenBadgeStyle: CSSProperties = {
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flex: "0 0 auto",
|
||||
height: 17,
|
||||
padding: "0 6px",
|
||||
borderRadius: 999,
|
||||
border: "1px solid rgba(148, 163, 184, 0.45)",
|
||||
background: "rgba(71, 85, 105, 0.32)",
|
||||
color: "#cbd5e1",
|
||||
fontSize: 10,
|
||||
fontWeight: 900,
|
||||
lineHeight: 1,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: 0,
|
||||
};
|
||||
|
||||
const iconButtonStyle: CSSProperties = {
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 22,
|
||||
height: 22,
|
||||
borderRadius: 6,
|
||||
border: "1px solid #334155",
|
||||
background: "#0b1220",
|
||||
cursor: "pointer",
|
||||
flex: "0 0 auto",
|
||||
};
|
||||
|
||||
function getGeometryIdColor(geometry: GeometryChoice): string {
|
||||
const hasStart = typeof geometry.time_start === "number";
|
||||
const hasEnd = typeof geometry.time_end === "number";
|
||||
if (!hasStart && !hasEnd) return "#f87171";
|
||||
if (!hasStart || !hasEnd) return "#facc15";
|
||||
return "#94a3b8";
|
||||
}
|
||||
|
||||
function EyeIcon() {
|
||||
return (
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z"
|
||||
stroke="#cbd5e1"
|
||||
strokeWidth="2"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<circle cx="12" cy="12" r="3" stroke="#cbd5e1" strokeWidth="2" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function EyeOffIcon() {
|
||||
return (
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path d="M3 3l18 18" stroke="#fca5a5" strokeWidth="2" strokeLinecap="round" />
|
||||
<path
|
||||
d="M10.6 6.2A10.5 10.5 0 0 1 12 6c6 0 9.5 6 9.5 6a17 17 0 0 1-2.1 2.8M6.2 8.1A17 17 0 0 0 2.5 12s3.5 6 9.5 6c1.3 0 2.5-.3 3.5-.7"
|
||||
stroke="#fca5a5"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function LockIcon() {
|
||||
return (
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
"use client";
|
||||
|
||||
import type { ChangeEvent } from "react";
|
||||
import type { MapImageOverlay } from "@/uhm/components/map/imageOverlay";
|
||||
|
||||
type Props = {
|
||||
overlay: MapImageOverlay | null;
|
||||
onPickImage: (file: File | null) => void;
|
||||
onPasteImage: () => void;
|
||||
keyboardEnabled: boolean;
|
||||
onKeyboardEnabledChange: (enabled: boolean) => void;
|
||||
onOpacityChange: (opacity: number) => void;
|
||||
onRemove: () => void;
|
||||
};
|
||||
|
||||
export default function ImageOverlayPanel({
|
||||
overlay,
|
||||
onPickImage,
|
||||
onPasteImage,
|
||||
keyboardEnabled,
|
||||
onKeyboardEnabledChange,
|
||||
onOpacityChange,
|
||||
onRemove,
|
||||
}: Props) {
|
||||
const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0] || null;
|
||||
onPickImage(file);
|
||||
event.target.value = "";
|
||||
};
|
||||
|
||||
return (
|
||||
<section style={{ padding: 10, background: "#0b1220", borderRadius: 8, border: "1px solid #1f2937" }}>
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
|
||||
<div>
|
||||
<div style={{ fontWeight: 800, fontSize: 13, color: "white" }}>Trace Image</div>
|
||||
<div style={{ marginTop: 2, fontSize: 11, color: "#94a3b8" }}>
|
||||
Chuột phải kéo điểm vàng để di chuyển, điểm xanh để kéo dãn giữ ratio.
|
||||
{keyboardEnabled ? " WASD di chuyển, Q/E phóng to/thu nhỏ." : ""}
|
||||
</div>
|
||||
</div>
|
||||
{overlay ? (
|
||||
<button type="button" onClick={onRemove} style={dangerButtonStyle}>
|
||||
Remove
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: 10, display: "flex", flexWrap: "wrap", gap: 8 }}>
|
||||
<label style={uploadButtonStyle}>
|
||||
{overlay ? "Đổi ảnh" : "Thêm ảnh"}
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleFileChange}
|
||||
style={{ display: "none" }}
|
||||
/>
|
||||
</label>
|
||||
<button type="button" onClick={onPasteImage} style={uploadButtonStyle}>
|
||||
Paste ảnh
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onKeyboardEnabledChange(!keyboardEnabled)}
|
||||
disabled={!overlay}
|
||||
style={{
|
||||
...uploadButtonStyle,
|
||||
opacity: overlay ? 1 : 0.5,
|
||||
color: keyboardEnabled ? "#86efac" : "#93c5fd",
|
||||
cursor: overlay ? "pointer" : "not-allowed",
|
||||
}}
|
||||
title="Bật/tắt điều khiển ảnh bằng WASD và Q/E"
|
||||
>
|
||||
Keys: {keyboardEnabled ? "On" : "Off"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{overlay ? (
|
||||
<div style={{ marginTop: 10, display: "grid", gap: 8 }}>
|
||||
<div style={{ fontSize: 12, color: "#cbd5e1", overflowWrap: "anywhere" }}>
|
||||
{overlay.name}
|
||||
</div>
|
||||
<label style={{ display: "grid", gap: 6, fontSize: 12, color: "#cbd5e1" }}>
|
||||
<span>Opacity: {Math.round(overlay.opacity * 100)}%</span>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.05}
|
||||
value={overlay.opacity}
|
||||
onChange={(event) => onOpacityChange(Number(event.target.value))}
|
||||
style={{ width: "100%", accentColor: "#38bdf8" }}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ marginTop: 8, fontSize: 12, color: "#94a3b8" }}>
|
||||
Chưa có ảnh overlay.
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const uploadButtonStyle = {
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
border: "1px solid #334155",
|
||||
borderRadius: 6,
|
||||
background: "#111827",
|
||||
color: "#93c5fd",
|
||||
cursor: "pointer",
|
||||
fontSize: 12,
|
||||
fontWeight: 800,
|
||||
padding: "7px 10px",
|
||||
} as const;
|
||||
|
||||
const dangerButtonStyle = {
|
||||
border: "1px solid #7f1d1d",
|
||||
borderRadius: 6,
|
||||
background: "#1f1111",
|
||||
color: "#fecaca",
|
||||
cursor: "pointer",
|
||||
fontSize: 12,
|
||||
fontWeight: 800,
|
||||
padding: "6px 8px",
|
||||
} as const;
|
||||
@@ -8,8 +8,9 @@ import { useEditorStore } from "@/uhm/store/editorStore";
|
||||
|
||||
type Props = {
|
||||
onCreateEntityOnly: () => void;
|
||||
onUpdateEntity?: (entityId: string, payload: { name: string; description: string | null }) => void;
|
||||
onUpdateEntity?: (entityId: string, payload: { name: string; description: string | null; time_start: string; time_end: string }) => void;
|
||||
hasSelectedGeometry?: boolean;
|
||||
selectedGeometryTime?: { time_start: number | null; time_end: number | null } | null;
|
||||
onToggleBindEntityForSelectedGeometry?: (entityId: string, nextChecked: boolean) => void;
|
||||
};
|
||||
|
||||
@@ -17,6 +18,7 @@ export default function ProjectEntityRefsPanel({
|
||||
onCreateEntityOnly,
|
||||
onUpdateEntity,
|
||||
hasSelectedGeometry,
|
||||
selectedGeometryTime,
|
||||
onToggleBindEntityForSelectedGeometry,
|
||||
}: Props) {
|
||||
const {
|
||||
@@ -78,15 +80,35 @@ export default function ProjectEntityRefsPanel({
|
||||
);
|
||||
const [editName, setEditName] = useState("");
|
||||
const [editDescription, setEditDescription] = useState("");
|
||||
const [editTimeStart, setEditTimeStart] = useState("");
|
||||
const [editTimeEnd, setEditTimeEnd] = useState("");
|
||||
const canCopySelectedGeometryTime =
|
||||
selectedGeometryTime != null &&
|
||||
(selectedGeometryTime.time_start != null || selectedGeometryTime.time_end != null);
|
||||
|
||||
const openEntityEditor = (entity: EntitySnapshot) => {
|
||||
setActiveEntityId(String(entity.id));
|
||||
setEditName(typeof entity.name === "string" ? entity.name : "");
|
||||
setEditDescription(entity.description == null ? "" : String(entity.description));
|
||||
setEditTimeStart(entity.time_start != null ? String(entity.time_start) : "");
|
||||
setEditTimeEnd(entity.time_end != null ? String(entity.time_end) : "");
|
||||
};
|
||||
const handleEntityFormChange = (key: "name" | "description", value: string) => {
|
||||
const handleEntityFormChange = (key: "name" | "description" | "time_start" | "time_end", value: string) => {
|
||||
setEntityForm((prev) => ({ ...prev, [key]: value }));
|
||||
};
|
||||
const copySelectedGeometryTimeToCreateForm = () => {
|
||||
if (!canCopySelectedGeometryTime || !selectedGeometryTime) return;
|
||||
setEntityForm((prev) => ({
|
||||
...prev,
|
||||
time_start: selectedGeometryTime.time_start != null ? String(selectedGeometryTime.time_start) : "",
|
||||
time_end: selectedGeometryTime.time_end != null ? String(selectedGeometryTime.time_end) : "",
|
||||
}));
|
||||
};
|
||||
const copySelectedGeometryTimeToEditForm = () => {
|
||||
if (!canCopySelectedGeometryTime || !selectedGeometryTime) return;
|
||||
setEditTimeStart(selectedGeometryTime.time_start != null ? String(selectedGeometryTime.time_start) : "");
|
||||
setEditTimeEnd(selectedGeometryTime.time_end != null ? String(selectedGeometryTime.time_end) : "");
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -237,27 +259,27 @@ export default function ProjectEntityRefsPanel({
|
||||
</span>
|
||||
{isNewEntityRef(activeEntity) ? <NewBadge /> : null}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveEntityId(null)}
|
||||
title="Dong"
|
||||
aria-label="Dong sua entity"
|
||||
style={{
|
||||
width: 26,
|
||||
height: 26,
|
||||
borderRadius: 6,
|
||||
border: "1px solid #334155",
|
||||
background: "#0b1220",
|
||||
color: "#e2e8f0",
|
||||
cursor: "pointer",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flex: "0 0 auto",
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={copySelectedGeometryTimeToEditForm}
|
||||
disabled={!canCopySelectedGeometryTime || isEntitySubmitting}
|
||||
title="Lay nam cua GEO dang chon"
|
||||
aria-label="Lay nam cua GEO dang chon cho entity dang sua"
|
||||
style={iconButtonStyle(!canCopySelectedGeometryTime || isEntitySubmitting)}
|
||||
>
|
||||
<ClockIcon />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveEntityId(null)}
|
||||
title="Dong"
|
||||
aria-label="Dong sua entity"
|
||||
style={iconButtonStyle(false)}
|
||||
>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ fontSize: 11, color: "#94a3b8", overflowWrap: "anywhere" }}>
|
||||
@@ -277,10 +299,31 @@ export default function ProjectEntityRefsPanel({
|
||||
disabled={isEntitySubmitting}
|
||||
style={entityInputStyle}
|
||||
/>
|
||||
<div style={timeInputGridStyle}>
|
||||
<input
|
||||
value={editTimeStart}
|
||||
onChange={(event) => setEditTimeStart(event.target.value)}
|
||||
placeholder="time_start"
|
||||
disabled={isEntitySubmitting}
|
||||
style={entityInputStyle}
|
||||
/>
|
||||
<input
|
||||
value={editTimeEnd}
|
||||
onChange={(event) => setEditTimeEnd(event.target.value)}
|
||||
placeholder="time_end"
|
||||
disabled={isEntitySubmitting}
|
||||
style={entityInputStyle}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onUpdateEntity!(String(activeEntity.id), { name: editName, description: editDescription.trim().length ? editDescription : null })}
|
||||
onClick={() => onUpdateEntity!(String(activeEntity.id), {
|
||||
name: editName,
|
||||
description: editDescription.trim().length ? editDescription : null,
|
||||
time_start: editTimeStart,
|
||||
time_end: editTimeEnd,
|
||||
})}
|
||||
disabled={isEntitySubmitting}
|
||||
style={{
|
||||
border: "none",
|
||||
@@ -315,29 +358,30 @@ export default function ProjectEntityRefsPanel({
|
||||
<div style={{ color: "#bfdbfe", fontWeight: 700, fontSize: "12px" }}>
|
||||
Tạo entity mới
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsCreateOpen((v) => !v)}
|
||||
disabled={isEntitySubmitting}
|
||||
title={isCreateOpen ? "Dong" : "Mo"}
|
||||
aria-label={isCreateOpen ? "Dong tao entity" : "Mo tao entity"}
|
||||
style={{
|
||||
width: 26,
|
||||
height: 26,
|
||||
borderRadius: 6,
|
||||
border: "1px solid #334155",
|
||||
background: "#0b1220",
|
||||
color: "#e2e8f0",
|
||||
cursor: isEntitySubmitting ? "not-allowed" : "pointer",
|
||||
opacity: isEntitySubmitting ? 0.6 : 1,
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flex: "0 0 auto",
|
||||
}}
|
||||
>
|
||||
{isCreateOpen ? <CloseIcon /> : <PlusIcon />}
|
||||
</button>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
|
||||
{isCreateOpen ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={copySelectedGeometryTimeToCreateForm}
|
||||
disabled={!canCopySelectedGeometryTime || isEntitySubmitting}
|
||||
title="Lay nam cua GEO dang chon"
|
||||
aria-label="Lay nam cua GEO dang chon cho entity moi"
|
||||
style={iconButtonStyle(!canCopySelectedGeometryTime || isEntitySubmitting)}
|
||||
>
|
||||
<ClockIcon />
|
||||
</button>
|
||||
) : null}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsCreateOpen((v) => !v)}
|
||||
disabled={isEntitySubmitting}
|
||||
title={isCreateOpen ? "Dong" : "Mo"}
|
||||
aria-label={isCreateOpen ? "Dong tao entity" : "Mo tao entity"}
|
||||
style={iconButtonStyle(isEntitySubmitting)}
|
||||
>
|
||||
{isCreateOpen ? <CloseIcon /> : <PlusIcon />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isCreateOpen ? (
|
||||
@@ -356,6 +400,22 @@ export default function ProjectEntityRefsPanel({
|
||||
disabled={isEntitySubmitting}
|
||||
style={entityInputStyle}
|
||||
/>
|
||||
<div style={timeInputGridStyle}>
|
||||
<input
|
||||
value={entityForm.time_start}
|
||||
onChange={(event) => handleEntityFormChange("time_start", event.target.value)}
|
||||
placeholder="time_start"
|
||||
disabled={isEntitySubmitting}
|
||||
style={entityInputStyle}
|
||||
/>
|
||||
<input
|
||||
value={entityForm.time_end}
|
||||
onChange={(event) => handleEntityFormChange("time_end", event.target.value)}
|
||||
placeholder="time_end"
|
||||
disabled={isEntitySubmitting}
|
||||
style={entityInputStyle}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@@ -403,6 +463,29 @@ const entityInputStyle: CSSProperties = {
|
||||
fontSize: "13px",
|
||||
};
|
||||
|
||||
const timeInputGridStyle: CSSProperties = {
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr 1fr",
|
||||
gap: 8,
|
||||
};
|
||||
|
||||
function iconButtonStyle(disabled: boolean): CSSProperties {
|
||||
return {
|
||||
width: 26,
|
||||
height: 26,
|
||||
borderRadius: 6,
|
||||
border: "1px solid #334155",
|
||||
background: "#0b1220",
|
||||
color: "#e2e8f0",
|
||||
cursor: disabled ? "not-allowed" : "pointer",
|
||||
opacity: disabled ? 0.55 : 1,
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flex: "0 0 auto",
|
||||
};
|
||||
}
|
||||
|
||||
const boundBadgeStyle: CSSProperties = {
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
@@ -488,3 +571,12 @@ function CloseIcon() {
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function ClockIcon() {
|
||||
return (
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="8" stroke="#fbbf24" strokeWidth="2" />
|
||||
<path d="M12 7v5l3 2" stroke="#fbbf24" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,465 @@
|
||||
import maplibregl from "maplibre-gl";
|
||||
|
||||
export type MapImageOverlay = {
|
||||
url: string;
|
||||
name: string;
|
||||
opacity: number;
|
||||
aspectRatio: number;
|
||||
coordinates: maplibregl.Coordinates;
|
||||
};
|
||||
|
||||
const IMAGE_OVERLAY_SOURCE_ID = "uhm-image-overlay-source";
|
||||
const IMAGE_OVERLAY_LAYER_ID = "uhm-image-overlay-layer";
|
||||
const IMAGE_OVERLAY_CONTROL_SOURCE_ID = "uhm-image-overlay-control-source";
|
||||
const IMAGE_OVERLAY_HANDLE_LAYER_ID = "uhm-image-overlay-handles";
|
||||
const IMAGE_OVERLAY_CENTER_LAYER_ID = "uhm-image-overlay-center";
|
||||
|
||||
type OverlayControlAction = "move" | "resize";
|
||||
type OverlayResizeEdge = "top" | "right" | "bottom" | "left";
|
||||
|
||||
type OverlayControlFeature = GeoJSON.Feature<GeoJSON.Point, {
|
||||
action: OverlayControlAction;
|
||||
edge?: OverlayResizeEdge;
|
||||
}>;
|
||||
|
||||
export function applyImageOverlay(
|
||||
map: maplibregl.Map,
|
||||
overlay: MapImageOverlay | null | undefined
|
||||
) {
|
||||
if (!overlay) {
|
||||
removeImageOverlay(map);
|
||||
return;
|
||||
}
|
||||
|
||||
const existingSource = map.getSource(IMAGE_OVERLAY_SOURCE_ID) as maplibregl.ImageSource | undefined;
|
||||
if (existingSource) {
|
||||
if (existingSource.url === overlay.url) {
|
||||
existingSource.setCoordinates(overlay.coordinates);
|
||||
} else {
|
||||
existingSource.updateImage({
|
||||
url: overlay.url,
|
||||
coordinates: overlay.coordinates,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
map.addSource(IMAGE_OVERLAY_SOURCE_ID, {
|
||||
type: "image",
|
||||
url: overlay.url,
|
||||
coordinates: overlay.coordinates,
|
||||
});
|
||||
}
|
||||
|
||||
if (!map.getLayer(IMAGE_OVERLAY_LAYER_ID)) {
|
||||
map.addLayer({
|
||||
id: IMAGE_OVERLAY_LAYER_ID,
|
||||
type: "raster",
|
||||
source: IMAGE_OVERLAY_SOURCE_ID,
|
||||
paint: {
|
||||
"raster-opacity": clampOpacity(overlay.opacity),
|
||||
"raster-fade-duration": 0,
|
||||
"raster-resampling": "linear",
|
||||
},
|
||||
});
|
||||
} else {
|
||||
map.setPaintProperty(IMAGE_OVERLAY_LAYER_ID, "raster-opacity", clampOpacity(overlay.opacity));
|
||||
map.setPaintProperty(IMAGE_OVERLAY_LAYER_ID, "raster-fade-duration", 0);
|
||||
}
|
||||
|
||||
// Không truyền beforeId để layer được đưa lên trên cùng, phục vụ trace khi vẽ.
|
||||
map.moveLayer(IMAGE_OVERLAY_LAYER_ID);
|
||||
applyImageOverlayControls(map, overlay);
|
||||
}
|
||||
|
||||
export function removeImageOverlay(map: maplibregl.Map) {
|
||||
removeImageOverlayControls(map);
|
||||
|
||||
if (map.getLayer(IMAGE_OVERLAY_LAYER_ID)) {
|
||||
map.removeLayer(IMAGE_OVERLAY_LAYER_ID);
|
||||
}
|
||||
|
||||
if (map.getSource(IMAGE_OVERLAY_SOURCE_ID)) {
|
||||
map.removeSource(IMAGE_OVERLAY_SOURCE_ID);
|
||||
}
|
||||
}
|
||||
|
||||
export function getViewportImageCoordinates(
|
||||
map: maplibregl.Map,
|
||||
aspectRatio: number
|
||||
): maplibregl.Coordinates {
|
||||
const canvas = map.getCanvas();
|
||||
const canvasWidth = Math.max(canvas.clientWidth || canvas.width || 800, 1);
|
||||
const canvasHeight = Math.max(canvas.clientHeight || canvas.height || 600, 1);
|
||||
const safeAspectRatio = normalizeAspectRatio(aspectRatio);
|
||||
|
||||
let width = canvasWidth * 0.72;
|
||||
let height = width / safeAspectRatio;
|
||||
const maxHeight = canvasHeight * 0.72;
|
||||
if (height > maxHeight) {
|
||||
height = maxHeight;
|
||||
width = height * safeAspectRatio;
|
||||
}
|
||||
|
||||
return buildCoordinatesFromScreenBox(
|
||||
map,
|
||||
{ x: canvasWidth / 2, y: canvasHeight / 2 },
|
||||
width,
|
||||
height
|
||||
);
|
||||
}
|
||||
|
||||
export function moveImageOverlayCoordinatesByPixels(
|
||||
map: maplibregl.Map,
|
||||
coordinates: maplibregl.Coordinates,
|
||||
deltaX: number,
|
||||
deltaY: number
|
||||
): maplibregl.Coordinates {
|
||||
return moveCoordinates(map, coordinates, new maplibregl.Point(deltaX, deltaY));
|
||||
}
|
||||
|
||||
export function scaleImageOverlayCoordinatesByFactor(
|
||||
map: maplibregl.Map,
|
||||
coordinates: maplibregl.Coordinates,
|
||||
factor: number,
|
||||
aspectRatio: number
|
||||
): maplibregl.Coordinates {
|
||||
const safeFactor = Number.isFinite(factor) && factor > 0 ? factor : 1;
|
||||
const screenBox = getScreenBox(map, coordinates);
|
||||
const minimumSize = 48;
|
||||
const width = Math.max(screenBox.width * safeFactor, minimumSize);
|
||||
const height = width / normalizeAspectRatio(aspectRatio);
|
||||
return buildCoordinatesFromScreenBox(map, screenBox.center, width, height);
|
||||
}
|
||||
|
||||
export function bindImageOverlayInteractions(
|
||||
map: maplibregl.Map,
|
||||
getOverlay: () => MapImageOverlay | null,
|
||||
onChange: (overlay: MapImageOverlay) => void
|
||||
) {
|
||||
let rafId: number | null = null;
|
||||
let pendingCoordinates: maplibregl.Coordinates | null = null;
|
||||
let latestOverlay: MapImageOverlay | null = null;
|
||||
let activeDrag: {
|
||||
action: OverlayControlAction;
|
||||
edge: OverlayResizeEdge | null;
|
||||
startPoint: maplibregl.Point;
|
||||
startCoordinates: maplibregl.Coordinates;
|
||||
startBox: ScreenBox;
|
||||
aspectRatio: number;
|
||||
wasDragPanEnabled: boolean;
|
||||
} | null = null;
|
||||
|
||||
const startDrag = (event: maplibregl.MapLayerMouseEvent) => {
|
||||
if ((event.originalEvent as MouseEvent | undefined)?.button !== 2) return;
|
||||
|
||||
const overlay = getOverlay();
|
||||
const feature = event.features?.[0] as OverlayControlFeature | undefined;
|
||||
if (!overlay || !feature?.properties?.action) return;
|
||||
|
||||
event.preventDefault();
|
||||
event.originalEvent.preventDefault();
|
||||
event.originalEvent.stopPropagation();
|
||||
|
||||
activeDrag = {
|
||||
action: feature.properties.action,
|
||||
edge: feature.properties.edge || null,
|
||||
startPoint: event.point,
|
||||
startCoordinates: overlay.coordinates,
|
||||
startBox: getScreenBox(map, overlay.coordinates),
|
||||
aspectRatio: normalizeAspectRatio(overlay.aspectRatio),
|
||||
wasDragPanEnabled: map.dragPan.isEnabled(),
|
||||
};
|
||||
latestOverlay = overlay;
|
||||
map.dragPan.disable();
|
||||
map.getCanvas().style.cursor = activeDrag.action === "move" ? "grabbing" : "nwse-resize";
|
||||
};
|
||||
|
||||
const moveDrag = (event: maplibregl.MapMouseEvent) => {
|
||||
if (!activeDrag) return;
|
||||
const overlay = getOverlay();
|
||||
if (!overlay) return;
|
||||
|
||||
event.preventDefault();
|
||||
const nextCoordinates = activeDrag.action === "move"
|
||||
? moveCoordinates(map, activeDrag.startCoordinates, event.point.sub(activeDrag.startPoint))
|
||||
: resizeCoordinates(map, activeDrag.startBox, event.point, activeDrag.edge, activeDrag.aspectRatio);
|
||||
|
||||
latestOverlay = {
|
||||
...overlay,
|
||||
coordinates: nextCoordinates,
|
||||
};
|
||||
scheduleImageOverlayCoordinateUpdate(map, nextCoordinates);
|
||||
};
|
||||
|
||||
const endDrag = () => {
|
||||
if (!activeDrag) return;
|
||||
const finishedDrag = activeDrag;
|
||||
activeDrag = null;
|
||||
flushImageOverlayCoordinateUpdate(map);
|
||||
if (latestOverlay) {
|
||||
onChange(latestOverlay);
|
||||
latestOverlay = null;
|
||||
}
|
||||
if (finishedDrag.wasDragPanEnabled && !map.dragPan.isEnabled()) {
|
||||
map.dragPan.enable();
|
||||
}
|
||||
map.getCanvas().style.cursor = "";
|
||||
};
|
||||
|
||||
const preventContextMenu = (event: maplibregl.MapLayerMouseEvent) => {
|
||||
event.preventDefault();
|
||||
event.originalEvent.preventDefault();
|
||||
event.originalEvent.stopPropagation();
|
||||
};
|
||||
|
||||
map.on("mousedown", IMAGE_OVERLAY_HANDLE_LAYER_ID, startDrag);
|
||||
map.on("mousedown", IMAGE_OVERLAY_CENTER_LAYER_ID, startDrag);
|
||||
map.on("mousemove", moveDrag);
|
||||
map.on("mouseup", endDrag);
|
||||
map.on("contextmenu", IMAGE_OVERLAY_HANDLE_LAYER_ID, preventContextMenu);
|
||||
map.on("contextmenu", IMAGE_OVERLAY_CENTER_LAYER_ID, preventContextMenu);
|
||||
|
||||
return () => {
|
||||
endDrag();
|
||||
if (rafId !== null) {
|
||||
cancelAnimationFrame(rafId);
|
||||
rafId = null;
|
||||
}
|
||||
pendingCoordinates = null;
|
||||
map.off("mousedown", IMAGE_OVERLAY_HANDLE_LAYER_ID, startDrag);
|
||||
map.off("mousedown", IMAGE_OVERLAY_CENTER_LAYER_ID, startDrag);
|
||||
map.off("mousemove", moveDrag);
|
||||
map.off("mouseup", endDrag);
|
||||
map.off("contextmenu", IMAGE_OVERLAY_HANDLE_LAYER_ID, preventContextMenu);
|
||||
map.off("contextmenu", IMAGE_OVERLAY_CENTER_LAYER_ID, preventContextMenu);
|
||||
};
|
||||
|
||||
function scheduleImageOverlayCoordinateUpdate(
|
||||
targetMap: maplibregl.Map,
|
||||
coordinates: maplibregl.Coordinates
|
||||
) {
|
||||
pendingCoordinates = coordinates;
|
||||
if (rafId !== null) return;
|
||||
|
||||
rafId = requestAnimationFrame(() => {
|
||||
rafId = null;
|
||||
flushImageOverlayCoordinateUpdate(targetMap);
|
||||
});
|
||||
}
|
||||
|
||||
function flushImageOverlayCoordinateUpdate(targetMap: maplibregl.Map) {
|
||||
if (!pendingCoordinates) return;
|
||||
updateImageOverlayCoordinates(targetMap, pendingCoordinates);
|
||||
pendingCoordinates = null;
|
||||
}
|
||||
}
|
||||
|
||||
export function getImageOverlayInteractiveLayerIds() {
|
||||
return [IMAGE_OVERLAY_HANDLE_LAYER_ID, IMAGE_OVERLAY_CENTER_LAYER_ID];
|
||||
}
|
||||
|
||||
function applyImageOverlayControls(map: maplibregl.Map, overlay: MapImageOverlay) {
|
||||
const data = buildControlFeatureCollection(overlay.coordinates);
|
||||
const existingSource = map.getSource(IMAGE_OVERLAY_CONTROL_SOURCE_ID) as maplibregl.GeoJSONSource | undefined;
|
||||
if (existingSource) {
|
||||
existingSource.setData(data);
|
||||
} else {
|
||||
map.addSource(IMAGE_OVERLAY_CONTROL_SOURCE_ID, {
|
||||
type: "geojson",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
if (!map.getLayer(IMAGE_OVERLAY_HANDLE_LAYER_ID)) {
|
||||
map.addLayer({
|
||||
id: IMAGE_OVERLAY_HANDLE_LAYER_ID,
|
||||
type: "circle",
|
||||
source: IMAGE_OVERLAY_CONTROL_SOURCE_ID,
|
||||
filter: ["==", ["get", "action"], "resize"],
|
||||
paint: {
|
||||
"circle-color": "#38bdf8",
|
||||
"circle-radius": 7,
|
||||
"circle-stroke-color": "#0f172a",
|
||||
"circle-stroke-width": 2,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (!map.getLayer(IMAGE_OVERLAY_CENTER_LAYER_ID)) {
|
||||
map.addLayer({
|
||||
id: IMAGE_OVERLAY_CENTER_LAYER_ID,
|
||||
type: "circle",
|
||||
source: IMAGE_OVERLAY_CONTROL_SOURCE_ID,
|
||||
filter: ["==", ["get", "action"], "move"],
|
||||
paint: {
|
||||
"circle-color": "#fbbf24",
|
||||
"circle-radius": 8,
|
||||
"circle-stroke-color": "#0f172a",
|
||||
"circle-stroke-width": 2,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
map.moveLayer(IMAGE_OVERLAY_HANDLE_LAYER_ID);
|
||||
map.moveLayer(IMAGE_OVERLAY_CENTER_LAYER_ID);
|
||||
}
|
||||
|
||||
function updateImageOverlayCoordinates(
|
||||
map: maplibregl.Map,
|
||||
coordinates: maplibregl.Coordinates
|
||||
) {
|
||||
const imageSource = map.getSource(IMAGE_OVERLAY_SOURCE_ID) as maplibregl.ImageSource | undefined;
|
||||
imageSource?.setCoordinates(coordinates);
|
||||
|
||||
const controlSource = map.getSource(IMAGE_OVERLAY_CONTROL_SOURCE_ID) as maplibregl.GeoJSONSource | undefined;
|
||||
controlSource?.setData(buildControlFeatureCollection(coordinates));
|
||||
}
|
||||
|
||||
function removeImageOverlayControls(map: maplibregl.Map) {
|
||||
if (map.getLayer(IMAGE_OVERLAY_CENTER_LAYER_ID)) {
|
||||
map.removeLayer(IMAGE_OVERLAY_CENTER_LAYER_ID);
|
||||
}
|
||||
if (map.getLayer(IMAGE_OVERLAY_HANDLE_LAYER_ID)) {
|
||||
map.removeLayer(IMAGE_OVERLAY_HANDLE_LAYER_ID);
|
||||
}
|
||||
if (map.getSource(IMAGE_OVERLAY_CONTROL_SOURCE_ID)) {
|
||||
map.removeSource(IMAGE_OVERLAY_CONTROL_SOURCE_ID);
|
||||
}
|
||||
}
|
||||
|
||||
function buildControlFeatureCollection(
|
||||
coordinates: maplibregl.Coordinates
|
||||
): GeoJSON.FeatureCollection<GeoJSON.Point, OverlayControlFeature["properties"]> {
|
||||
const [topLeft, topRight, bottomRight, bottomLeft] = coordinates;
|
||||
const center = averageCoordinates(coordinates);
|
||||
|
||||
return [
|
||||
createControlFeature(center, { action: "move" }),
|
||||
createControlFeature(midpoint(topLeft, topRight), { action: "resize", edge: "top" }),
|
||||
createControlFeature(midpoint(topRight, bottomRight), { action: "resize", edge: "right" }),
|
||||
createControlFeature(midpoint(bottomRight, bottomLeft), { action: "resize", edge: "bottom" }),
|
||||
createControlFeature(midpoint(bottomLeft, topLeft), { action: "resize", edge: "left" }),
|
||||
].reduce<GeoJSON.FeatureCollection<GeoJSON.Point, OverlayControlFeature["properties"]>>(
|
||||
(collection, feature) => {
|
||||
collection.features.push(feature);
|
||||
return collection;
|
||||
},
|
||||
{ type: "FeatureCollection", features: [] }
|
||||
);
|
||||
}
|
||||
|
||||
function createControlFeature(
|
||||
coordinates: [number, number],
|
||||
properties: OverlayControlFeature["properties"]
|
||||
): OverlayControlFeature {
|
||||
return {
|
||||
type: "Feature",
|
||||
properties,
|
||||
geometry: {
|
||||
type: "Point",
|
||||
coordinates,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
type ScreenPoint = { x: number; y: number };
|
||||
type ScreenBox = {
|
||||
center: ScreenPoint;
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
|
||||
function getScreenBox(map: maplibregl.Map, coordinates: maplibregl.Coordinates): ScreenBox {
|
||||
const points = coordinates.map((coordinate) => map.project(coordinate));
|
||||
const minX = Math.min(...points.map((point) => point.x));
|
||||
const maxX = Math.max(...points.map((point) => point.x));
|
||||
const minY = Math.min(...points.map((point) => point.y));
|
||||
const maxY = Math.max(...points.map((point) => point.y));
|
||||
return {
|
||||
center: {
|
||||
x: (minX + maxX) / 2,
|
||||
y: (minY + maxY) / 2,
|
||||
},
|
||||
width: Math.max(maxX - minX, 40),
|
||||
height: Math.max(maxY - minY, 40),
|
||||
};
|
||||
}
|
||||
|
||||
function moveCoordinates(
|
||||
map: maplibregl.Map,
|
||||
coordinates: maplibregl.Coordinates,
|
||||
delta: maplibregl.Point
|
||||
): maplibregl.Coordinates {
|
||||
return coordinates.map((coordinate) => {
|
||||
const point = map.project(coordinate);
|
||||
return lngLatToCoordinate(map.unproject([point.x + delta.x, point.y + delta.y]));
|
||||
}) as maplibregl.Coordinates;
|
||||
}
|
||||
|
||||
function resizeCoordinates(
|
||||
map: maplibregl.Map,
|
||||
startBox: ScreenBox,
|
||||
currentPoint: maplibregl.Point,
|
||||
edge: OverlayResizeEdge | null,
|
||||
aspectRatio: number
|
||||
): maplibregl.Coordinates {
|
||||
const minimumSize = 48;
|
||||
let width = startBox.width;
|
||||
let height = startBox.height;
|
||||
|
||||
if (edge === "left" || edge === "right") {
|
||||
width = Math.max(Math.abs(currentPoint.x - startBox.center.x) * 2, minimumSize);
|
||||
height = width / aspectRatio;
|
||||
} else {
|
||||
height = Math.max(Math.abs(currentPoint.y - startBox.center.y) * 2, minimumSize);
|
||||
width = height * aspectRatio;
|
||||
}
|
||||
|
||||
return buildCoordinatesFromScreenBox(map, startBox.center, width, height);
|
||||
}
|
||||
|
||||
function buildCoordinatesFromScreenBox(
|
||||
map: maplibregl.Map,
|
||||
center: ScreenPoint,
|
||||
width: number,
|
||||
height: number
|
||||
): maplibregl.Coordinates {
|
||||
const halfWidth = width / 2;
|
||||
const halfHeight = height / 2;
|
||||
return [
|
||||
lngLatToCoordinate(map.unproject([center.x - halfWidth, center.y - halfHeight])),
|
||||
lngLatToCoordinate(map.unproject([center.x + halfWidth, center.y - halfHeight])),
|
||||
lngLatToCoordinate(map.unproject([center.x + halfWidth, center.y + halfHeight])),
|
||||
lngLatToCoordinate(map.unproject([center.x - halfWidth, center.y + halfHeight])),
|
||||
];
|
||||
}
|
||||
|
||||
function averageCoordinates(coordinates: maplibregl.Coordinates): [number, number] {
|
||||
const total = coordinates.reduce(
|
||||
(sum, coordinate) => ({
|
||||
lng: sum.lng + coordinate[0],
|
||||
lat: sum.lat + coordinate[1],
|
||||
}),
|
||||
{ lng: 0, lat: 0 }
|
||||
);
|
||||
return [total.lng / coordinates.length, total.lat / coordinates.length];
|
||||
}
|
||||
|
||||
function midpoint(a: [number, number], b: [number, number]): [number, number] {
|
||||
return [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
|
||||
}
|
||||
|
||||
function lngLatToCoordinate(lngLat: maplibregl.LngLat): [number, number] {
|
||||
return [lngLat.lng, lngLat.lat];
|
||||
}
|
||||
|
||||
function normalizeAspectRatio(value: number) {
|
||||
if (!Number.isFinite(value) || value <= 0) return 1;
|
||||
return value;
|
||||
}
|
||||
|
||||
function clampOpacity(value: number) {
|
||||
if (!Number.isFinite(value)) return 0.55;
|
||||
if (value < 0) return 0;
|
||||
if (value > 1) return 1;
|
||||
return value;
|
||||
}
|
||||
@@ -13,12 +13,14 @@ import { PATH_RENDER_BY_TYPE } from "@/uhm/lib/map/styles/style";
|
||||
import { getBackgroundRasterSourceSpecification } from "@/uhm/api/tiles";
|
||||
import { newId } from "@/uhm/lib/utils/id";
|
||||
import { normalizeGeoTypeKey } from "@/uhm/lib/map/geo/geoTypeMap";
|
||||
import type { EntityLabelCandidate } from "@/uhm/types/geo";
|
||||
|
||||
type Coordinate = [number, number];
|
||||
type PolygonCoordinates = Coordinate[][];
|
||||
type FeatureLabelInfo = {
|
||||
entityId: string;
|
||||
label: string;
|
||||
timeEnd: number | null;
|
||||
};
|
||||
|
||||
export function applyBackgroundLayerVisibility(
|
||||
@@ -230,8 +232,12 @@ export function splitDraftFeatures(fc: FeatureCollection) {
|
||||
return { polygons, points };
|
||||
}
|
||||
|
||||
export function decoratePointFeaturesWithLabels(fc: FeatureCollection, labelContext: FeatureCollection = fc): FeatureCollection {
|
||||
const getLabel = createFeatureLabelResolver(labelContext);
|
||||
export function decoratePointFeaturesWithLabels(
|
||||
fc: FeatureCollection,
|
||||
labelContext: FeatureCollection = fc,
|
||||
timelineYear?: number | null
|
||||
): FeatureCollection {
|
||||
const getLabel = createFeatureLabelResolver(labelContext, timelineYear);
|
||||
return {
|
||||
...fc,
|
||||
features: fc.features.map((feature) => ({
|
||||
@@ -244,8 +250,12 @@ export function decoratePointFeaturesWithLabels(fc: FeatureCollection, labelCont
|
||||
};
|
||||
}
|
||||
|
||||
export function decorateLineFeaturesWithLabels(fc: FeatureCollection, labelContext: FeatureCollection = fc): FeatureCollection {
|
||||
const getLabel = createFeatureLabelResolver(labelContext);
|
||||
export function decorateLineFeaturesWithLabels(
|
||||
fc: FeatureCollection,
|
||||
labelContext: FeatureCollection = fc,
|
||||
timelineYear?: number | null
|
||||
): FeatureCollection {
|
||||
const getLabel = createFeatureLabelResolver(labelContext, timelineYear);
|
||||
return {
|
||||
...fc,
|
||||
features: fc.features.map((feature) => ({
|
||||
@@ -258,8 +268,12 @@ export function decorateLineFeaturesWithLabels(fc: FeatureCollection, labelConte
|
||||
};
|
||||
}
|
||||
|
||||
export function buildPolygonLabelFeatureCollection(fc: FeatureCollection, labelContext: FeatureCollection = fc): FeatureCollection {
|
||||
const getLabel = createFeatureLabelResolver(labelContext);
|
||||
export function buildPolygonLabelFeatureCollection(
|
||||
fc: FeatureCollection,
|
||||
labelContext: FeatureCollection = fc,
|
||||
timelineYear?: number | null
|
||||
): FeatureCollection {
|
||||
const getLabel = createFeatureLabelResolver(labelContext, timelineYear);
|
||||
const features: Feature[] = [];
|
||||
|
||||
for (const feature of fc.features) {
|
||||
@@ -655,12 +669,15 @@ export function roundZoom(value: number): number {
|
||||
return Math.round(value * 10) / 10;
|
||||
}
|
||||
|
||||
function createFeatureLabelResolver(fc: FeatureCollection): (feature: Feature) => string | null {
|
||||
function createFeatureLabelResolver(
|
||||
fc: FeatureCollection,
|
||||
timelineYear?: number | null
|
||||
): (feature: Feature) => string | null {
|
||||
const directLabelsByFeatureId = new Map<string, FeatureLabelInfo>();
|
||||
const inheritedLabelsByChildId = new Map<string, FeatureLabelInfo | null>();
|
||||
|
||||
for (const feature of fc.features) {
|
||||
const labelInfo = getSingleEntityFeatureLabelInfo(feature);
|
||||
const labelInfo = getSingleEntityFeatureLabelInfo(feature, timelineYear);
|
||||
if (!labelInfo) continue;
|
||||
directLabelsByFeatureId.set(String(feature.properties.id), labelInfo);
|
||||
}
|
||||
@@ -710,14 +727,97 @@ function mergeInheritedFeatureLabel(
|
||||
}
|
||||
}
|
||||
|
||||
function getSingleEntityFeatureLabelInfo(feature: Feature): FeatureLabelInfo | null {
|
||||
function getSingleEntityFeatureLabelInfo(
|
||||
feature: Feature,
|
||||
timelineYear?: number | null
|
||||
): FeatureLabelInfo | null {
|
||||
const candidates = getFeatureEntityLabelCandidates(feature);
|
||||
if (candidates.length > 0) {
|
||||
const timelineCandidate = getLatestTimelineEntityCandidate(candidates, timelineYear);
|
||||
if (!timelineCandidate) return null;
|
||||
return {
|
||||
entityId: timelineCandidate.id,
|
||||
label: timelineCandidate.name,
|
||||
timeEnd: normalizeLabelYear(timelineCandidate.time_end),
|
||||
};
|
||||
}
|
||||
|
||||
const entityIds = getFeatureEntityIds(feature);
|
||||
if (entityIds.length !== 1) return null;
|
||||
|
||||
const label = getSingleEntityName(feature);
|
||||
if (!label) return null;
|
||||
|
||||
return { entityId: entityIds[0], label };
|
||||
return { entityId: entityIds[0], label, timeEnd: null };
|
||||
}
|
||||
|
||||
function getLatestTimelineEntityCandidate(
|
||||
candidates: EntityLabelCandidate[],
|
||||
timelineYear?: number | null
|
||||
): EntityLabelCandidate | null {
|
||||
if (!candidates.length) return null;
|
||||
|
||||
const activeCandidates = candidates.filter((candidate) =>
|
||||
isEntityCandidateVisibleAtYear(candidate, timelineYear)
|
||||
);
|
||||
if (!activeCandidates.length) return null;
|
||||
|
||||
return activeCandidates.sort(compareEntityLabelCandidates)[0] || null;
|
||||
}
|
||||
|
||||
function getFeatureEntityLabelCandidates(feature: Feature): EntityLabelCandidate[] {
|
||||
const rawCandidates = feature.properties.entity_label_candidates;
|
||||
if (!Array.isArray(rawCandidates)) return [];
|
||||
|
||||
const byId = new Map<string, EntityLabelCandidate>();
|
||||
for (const raw of rawCandidates) {
|
||||
if (!raw || typeof raw !== "object") continue;
|
||||
const candidate = raw as EntityLabelCandidate;
|
||||
const id = String(candidate.id || "").trim();
|
||||
const name = String(candidate.name || "").trim();
|
||||
if (!id || !name) continue;
|
||||
byId.set(id, {
|
||||
id,
|
||||
name,
|
||||
time_start: normalizeLabelYear(candidate.time_start),
|
||||
time_end: normalizeLabelYear(candidate.time_end),
|
||||
});
|
||||
}
|
||||
|
||||
return Array.from(byId.values());
|
||||
}
|
||||
|
||||
function isEntityCandidateVisibleAtYear(
|
||||
candidate: EntityLabelCandidate,
|
||||
timelineYear?: number | null
|
||||
): boolean {
|
||||
if (typeof timelineYear !== "number" || !Number.isFinite(timelineYear)) return true;
|
||||
|
||||
const start = normalizeLabelYear(candidate.time_start);
|
||||
const end = normalizeLabelYear(candidate.time_end);
|
||||
if (start != null && timelineYear < start) return false;
|
||||
if (end != null && timelineYear > end) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
function compareEntityLabelCandidates(a: EntityLabelCandidate, b: EntityLabelCandidate): number {
|
||||
const endA = normalizeLabelYear(a.time_end);
|
||||
const endB = normalizeLabelYear(b.time_end);
|
||||
const endScoreA = endA == null ? Number.NEGATIVE_INFINITY : endA;
|
||||
const endScoreB = endB == null ? Number.NEGATIVE_INFINITY : endB;
|
||||
if (endScoreA !== endScoreB) return endScoreB - endScoreA;
|
||||
|
||||
const startA = normalizeLabelYear(a.time_start);
|
||||
const startB = normalizeLabelYear(b.time_start);
|
||||
const startScoreA = startA == null ? Number.NEGATIVE_INFINITY : startA;
|
||||
const startScoreB = startB == null ? Number.NEGATIVE_INFINITY : startB;
|
||||
if (startScoreA !== startScoreB) return startScoreB - startScoreA;
|
||||
|
||||
return a.name.localeCompare(b.name);
|
||||
}
|
||||
|
||||
function normalizeLabelYear(value: unknown): number | null {
|
||||
return typeof value === "number" && Number.isFinite(value) ? value : null;
|
||||
}
|
||||
|
||||
function getFeatureEntityIds(feature: Feature): string[] {
|
||||
|
||||
@@ -29,6 +29,8 @@ export function useMapInstance() {
|
||||
|
||||
const [isMapLoaded, setIsMapLoaded] = useState(false);
|
||||
const geolocationCenteredRef = useRef(false);
|
||||
// Ref khóa sync zoom từ MapLibre trong lúc user kéo slider để tránh value bị animate ghi ngược.
|
||||
const isZoomSliderDraggingRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
@@ -60,6 +62,7 @@ export function useMapInstance() {
|
||||
mapRef.current = map;
|
||||
|
||||
const syncZoomLevel = () => {
|
||||
if (isZoomSliderDraggingRef.current) return;
|
||||
setZoomLevel(roundZoom(map.getZoom()));
|
||||
};
|
||||
|
||||
@@ -80,7 +83,8 @@ export function useMapInstance() {
|
||||
};
|
||||
} catch (err) {
|
||||
console.error("Map initialization failed", err);
|
||||
setFatalInitError(err instanceof Error ? err.message : "Map initialization failed.");
|
||||
const message = err instanceof Error ? err.message : "Map initialization failed.";
|
||||
window.setTimeout(() => setFatalInitError(message), 0);
|
||||
}
|
||||
}, []);
|
||||
|
||||
@@ -121,10 +125,22 @@ export function useMapInstance() {
|
||||
const map = mapRef.current;
|
||||
if (!map || !Number.isFinite(nextRaw)) return;
|
||||
const next = clampNumber(nextRaw, zoomBounds.min, zoomBounds.max);
|
||||
map.easeTo({ zoom: next, duration: 80 });
|
||||
// Slider cần phản hồi trực tiếp theo pointer; easeTo liên tục sẽ làm thumb bị nhảy ngược.
|
||||
map.jumpTo({ zoom: next });
|
||||
setZoomLevel(next);
|
||||
}, [zoomBounds]);
|
||||
|
||||
const beginZoomSliderDrag = useCallback(() => {
|
||||
isZoomSliderDraggingRef.current = true;
|
||||
}, []);
|
||||
|
||||
const endZoomSliderDrag = useCallback(() => {
|
||||
const map = mapRef.current;
|
||||
isZoomSliderDraggingRef.current = false;
|
||||
if (!map) return;
|
||||
setZoomLevel(roundZoom(map.getZoom()));
|
||||
}, []);
|
||||
|
||||
const getViewState = useCallback(() => {
|
||||
const map = mapRef.current;
|
||||
if (!map) return null;
|
||||
@@ -152,6 +168,8 @@ export function useMapInstance() {
|
||||
geolocationCenteredRef,
|
||||
handleZoomByStep,
|
||||
handleZoomSliderChange,
|
||||
beginZoomSliderDrag,
|
||||
endZoomSliderDrag,
|
||||
getViewState,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -29,6 +29,7 @@ type UseMapInteractionProps = {
|
||||
onSetModeRef: React.MutableRefObject<((mode: EditorMode, featureId?: string | number) => void) | undefined>;
|
||||
onCreateRef: React.MutableRefObject<((feature: FeatureCollection["features"][number]) => void) | undefined>;
|
||||
onDeleteRef: React.MutableRefObject<((id: string | number) => void) | undefined>;
|
||||
onHideRef: React.MutableRefObject<((id: string | number) => void) | undefined>;
|
||||
onUpdateRef: React.MutableRefObject<((id: string | number, geometry: Geometry) => void) | undefined>;
|
||||
onHoverFeatureChangeRef: React.MutableRefObject<((payload: MapHoverPayload | null) => void) | undefined>;
|
||||
};
|
||||
@@ -44,6 +45,7 @@ export function useMapInteraction({
|
||||
onSetModeRef,
|
||||
onCreateRef,
|
||||
onDeleteRef,
|
||||
onHideRef,
|
||||
onUpdateRef,
|
||||
onHoverFeatureChangeRef,
|
||||
}: UseMapInteractionProps) {
|
||||
@@ -149,8 +151,26 @@ export function useMapInteraction({
|
||||
);
|
||||
}
|
||||
: undefined,
|
||||
allowGeometryEditing
|
||||
? (id: string | number) => {
|
||||
const originalFeature = draftRef.current.features.find(
|
||||
(item) => String(item.properties.id) === String(id)
|
||||
);
|
||||
if (!originalFeature) return;
|
||||
|
||||
const nextFeature = buildDuplicatedFeatureShapeOnly(originalFeature);
|
||||
onCreateRef.current?.(nextFeature);
|
||||
}
|
||||
: undefined,
|
||||
allowGeometryEditing
|
||||
? (id: string | number) => {
|
||||
onHideRef.current?.(id);
|
||||
onSelectFeatureIdsRef.current?.([]);
|
||||
}
|
||||
: undefined,
|
||||
(ids) => onSelectFeatureIdsRef.current?.(ids),
|
||||
(id: string | number) => onSetModeRef.current?.("replay", id)
|
||||
(id: string | number) => onSetModeRef.current?.("replay", id),
|
||||
() => Boolean(editingEngineRef.current?.editingRef.current)
|
||||
);
|
||||
|
||||
const cleanupPoint = initPoint(
|
||||
@@ -324,3 +344,30 @@ export function useMapInteraction({
|
||||
cleanupMapInteractions,
|
||||
};
|
||||
}
|
||||
|
||||
function buildDuplicatedFeatureShapeOnly(
|
||||
feature: FeatureCollection["features"][number]
|
||||
): FeatureCollection["features"][number] {
|
||||
const geometry = cloneGeometry(feature.geometry);
|
||||
return {
|
||||
type: "Feature",
|
||||
properties: {
|
||||
id: buildClientFeatureId(),
|
||||
type: feature.properties.type ?? null,
|
||||
geometry_preset: feature.properties.geometry_preset ?? null,
|
||||
entity_id: null,
|
||||
entity_ids: [],
|
||||
entity_name: null,
|
||||
entity_names: [],
|
||||
binding: [],
|
||||
},
|
||||
geometry,
|
||||
};
|
||||
}
|
||||
|
||||
function cloneGeometry(geometry: Geometry): Geometry {
|
||||
if (typeof structuredClone === "function") {
|
||||
return structuredClone(geometry);
|
||||
}
|
||||
return JSON.parse(JSON.stringify(geometry)) as Geometry;
|
||||
}
|
||||
|
||||
@@ -16,11 +16,13 @@ import {
|
||||
setSelectedFeatureState,
|
||||
splitDraftFeatures,
|
||||
} from "./mapUtils";
|
||||
import { applyImageOverlay, type MapImageOverlay } from "./imageOverlay";
|
||||
|
||||
type UseMapSyncProps = {
|
||||
mapRef: React.MutableRefObject<maplibregl.Map | null>;
|
||||
draft: FeatureCollection;
|
||||
labelContextDraft?: FeatureCollection;
|
||||
labelTimelineYear?: number | null;
|
||||
backgroundVisibility: BackgroundLayerVisibility;
|
||||
geometryVisibility?: Record<string, boolean>;
|
||||
selectedFeatureIds: (string | number)[];
|
||||
@@ -31,6 +33,7 @@ type UseMapSyncProps = {
|
||||
focusFeatureCollection?: FeatureCollection | null;
|
||||
focusRequestKey?: string | number | null;
|
||||
focusPadding?: number | maplibregl.PaddingOptions;
|
||||
imageOverlay?: MapImageOverlay | null;
|
||||
allowGeometryEditing: boolean;
|
||||
editingEngineRef: React.MutableRefObject<{
|
||||
editingRef: React.MutableRefObject<{ id: string | number } | null>;
|
||||
@@ -43,6 +46,7 @@ export function useMapSync({
|
||||
mapRef,
|
||||
draft,
|
||||
labelContextDraft,
|
||||
labelTimelineYear,
|
||||
backgroundVisibility,
|
||||
geometryVisibility,
|
||||
selectedFeatureIds,
|
||||
@@ -53,29 +57,34 @@ export function useMapSync({
|
||||
focusFeatureCollection,
|
||||
focusRequestKey,
|
||||
focusPadding,
|
||||
imageOverlay,
|
||||
allowGeometryEditing,
|
||||
editingEngineRef,
|
||||
geolocationCenteredRef,
|
||||
}: UseMapSyncProps) {
|
||||
const draftRef = useRef<FeatureCollection>(draft);
|
||||
const labelContextDraftRef = useRef<FeatureCollection | undefined>(labelContextDraft);
|
||||
const labelTimelineYearRef = useRef<number | null | undefined>(labelTimelineYear);
|
||||
const backgroundVisibilityRef = useRef<BackgroundLayerVisibility>(backgroundVisibility);
|
||||
const geometryVisibilityRef = useRef<Record<string, boolean> | undefined>(geometryVisibility);
|
||||
const selectedFeatureIdsRef = useRef<(string | number)[]>(selectedFeatureIds);
|
||||
const respectBindingFilterRef = useRef(respectBindingFilter);
|
||||
const fitToDraftBoundsRef = useRef(fitToDraftBounds);
|
||||
const highlightFeaturesRef = useRef<FeatureCollection | null>(highlightFeatures || null);
|
||||
const imageOverlayRef = useRef<MapImageOverlay | null>(imageOverlay || null);
|
||||
|
||||
const fitBoundsAppliedRef = useRef(false);
|
||||
|
||||
useEffect(() => { draftRef.current = draft; }, [draft]);
|
||||
useEffect(() => { labelContextDraftRef.current = labelContextDraft; }, [labelContextDraft]);
|
||||
useEffect(() => { labelTimelineYearRef.current = labelTimelineYear; }, [labelTimelineYear]);
|
||||
useEffect(() => { backgroundVisibilityRef.current = backgroundVisibility; }, [backgroundVisibility]);
|
||||
useEffect(() => { geometryVisibilityRef.current = geometryVisibility; }, [geometryVisibility]);
|
||||
useEffect(() => { selectedFeatureIdsRef.current = selectedFeatureIds; }, [selectedFeatureIds]);
|
||||
useEffect(() => { respectBindingFilterRef.current = respectBindingFilter; }, [respectBindingFilter]);
|
||||
useEffect(() => { fitToDraftBoundsRef.current = fitToDraftBounds; }, [fitToDraftBounds]);
|
||||
useEffect(() => { highlightFeaturesRef.current = highlightFeatures || null; }, [highlightFeatures]);
|
||||
useEffect(() => { imageOverlayRef.current = imageOverlay || null; }, [imageOverlay]);
|
||||
|
||||
useEffect(() => {
|
||||
fitBoundsAppliedRef.current = false;
|
||||
@@ -102,10 +111,11 @@ export function useMapSync({
|
||||
: fc;
|
||||
const visibleDraft = filterDraftByGeometryVisibility(visibleDraftRaw, geometryVisibilityRef.current);
|
||||
const labelContext = labelContextDraftRef.current || fc;
|
||||
const labelTimelineYear = labelTimelineYearRef.current;
|
||||
const { polygons, points } = splitDraftFeatures(visibleDraft);
|
||||
const labeledGeometries = decorateLineFeaturesWithLabels(polygons, labelContext);
|
||||
const labeledPoints = decoratePointFeaturesWithLabels(points, labelContext);
|
||||
const polygonLabels = buildPolygonLabelFeatureCollection(polygons, labelContext);
|
||||
const labeledGeometries = decorateLineFeaturesWithLabels(polygons, labelContext, labelTimelineYear);
|
||||
const labeledPoints = decoratePointFeaturesWithLabels(points, labelContext, labelTimelineYear);
|
||||
const polygonLabels = buildPolygonLabelFeatureCollection(polygons, labelContext, labelTimelineYear);
|
||||
const pathArrowShapes = buildPathArrowFeatureCollection(visibleDraft);
|
||||
|
||||
countriesSource.setData(labeledGeometries);
|
||||
@@ -135,6 +145,7 @@ export function useMapSync({
|
||||
const source = map.getSource("entity-focus") as maplibregl.GeoJSONSource | undefined;
|
||||
if (!source) return;
|
||||
source.setData(fc);
|
||||
moveHighlightLayersToTop(map);
|
||||
}, [mapRef]);
|
||||
|
||||
const tryCenterToUserLocation = useCallback(() => {
|
||||
@@ -175,6 +186,12 @@ export function useMapSync({
|
||||
source?.setData(highlightFeatures || EMPTY_FEATURE_COLLECTION);
|
||||
}, [highlightFeatures, mapRef]);
|
||||
|
||||
useEffect(() => {
|
||||
const map = mapRef.current;
|
||||
if (!map || !map.isStyleLoaded()) return;
|
||||
applyImageOverlay(map, imageOverlay);
|
||||
}, [imageOverlay, mapRef]);
|
||||
|
||||
useEffect(() => {
|
||||
applyDraftToMap(draft);
|
||||
const editingId = editingEngineRef.current?.editingRef?.current?.id;
|
||||
@@ -188,6 +205,7 @@ export function useMapSync({
|
||||
allowGeometryEditing,
|
||||
draft,
|
||||
labelContextDraft,
|
||||
labelTimelineYear,
|
||||
selectedFeatureIds,
|
||||
respectBindingFilter,
|
||||
geometryVisibility,
|
||||
@@ -231,5 +249,19 @@ export function useMapSync({
|
||||
applyDraftToMap,
|
||||
applyHighlightToMap,
|
||||
tryCenterToUserLocation,
|
||||
applyImageOverlayToMap: () => {
|
||||
const map = mapRef.current;
|
||||
if (!map || !map.isStyleLoaded()) return;
|
||||
applyImageOverlay(map, imageOverlayRef.current);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function moveHighlightLayersToTop(map: maplibregl.Map) {
|
||||
const layerIds = ["entity-focus-fill", "entity-focus-line", "entity-focus-points"];
|
||||
for (const layerId of layerIds) {
|
||||
if (map.getLayer(layerId)) {
|
||||
map.moveLayer(layerId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user