Sync globe layer rebuild during projection transition
This commit is contained in:
부모
ed5b0da5f9
커밋
03d728589f
@ -1630,6 +1630,7 @@ export function Map3D({
|
||||
zoneLabelExpr.push(["coalesce", ["get", "zoneName"], ["get", "zoneLabel"], ["get", "NAME"], "수역"]);
|
||||
|
||||
const ensure = () => {
|
||||
if (projectionBusyRef.current) return;
|
||||
// Always update visibility if the layers exist.
|
||||
const visibility = overlays.zones ? "visible" : "none";
|
||||
try {
|
||||
@ -1913,6 +1914,7 @@ export function Map3D({
|
||||
};
|
||||
|
||||
const ensure = () => {
|
||||
if (projectionBusyRef.current) return;
|
||||
if (!map.isStyleLoaded()) return;
|
||||
|
||||
if (projection !== "globe" || !settings.showShips) {
|
||||
@ -2414,6 +2416,7 @@ export function Map3D({
|
||||
};
|
||||
|
||||
const ensure = () => {
|
||||
if (projectionBusyRef.current) return;
|
||||
if (!map.isStyleLoaded()) return;
|
||||
if (projection !== "globe" || !overlays.pairLines || (pairLinks?.length ?? 0) === 0) {
|
||||
remove();
|
||||
@ -2515,6 +2518,7 @@ export function Map3D({
|
||||
};
|
||||
|
||||
const ensure = () => {
|
||||
if (projectionBusyRef.current) return;
|
||||
if (!map.isStyleLoaded()) return;
|
||||
if (projection !== "globe" || !overlays.fcLines) {
|
||||
remove();
|
||||
@ -2630,6 +2634,7 @@ export function Map3D({
|
||||
};
|
||||
|
||||
const ensure = () => {
|
||||
if (projectionBusyRef.current) return;
|
||||
if (!map.isStyleLoaded()) return;
|
||||
if (projection !== "globe" || !overlays.fleetCircles || (fleetCircles?.length ?? 0) === 0) {
|
||||
remove();
|
||||
@ -2790,6 +2795,7 @@ export function Map3D({
|
||||
};
|
||||
|
||||
const ensure = () => {
|
||||
if (projectionBusyRef.current) return;
|
||||
if (!map.isStyleLoaded()) return;
|
||||
if (projection !== "globe" || !overlays.pairRange) {
|
||||
remove();
|
||||
@ -3028,6 +3034,11 @@ export function Map3D({
|
||||
resetGlobeHoverStates();
|
||||
return;
|
||||
}
|
||||
if (projectionBusyRef.current) {
|
||||
resetGlobeHoverStates();
|
||||
clearGlobeTooltip();
|
||||
return;
|
||||
}
|
||||
if (!map.isStyleLoaded()) {
|
||||
clearDeckGlobeHoverState();
|
||||
clearGlobeTooltip();
|
||||
@ -3248,6 +3259,8 @@ export function Map3D({
|
||||
useEffect(() => {
|
||||
const map = mapRef.current;
|
||||
if (!map) return;
|
||||
if (projectionBusyRef.current) return;
|
||||
|
||||
let deckTarget = projection === "globe" ? globeDeckLayerRef.current : overlayRef.current;
|
||||
|
||||
if (projection === "mercator") {
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { useMemo, type MouseEvent } from "react";
|
||||
import { VESSEL_TYPES } from "../../entities/vessel/model/meta";
|
||||
import type { DerivedLegacyVessel } from "../../features/legacyDashboard/model/types";
|
||||
import { haversineNm } from "../../shared/lib/geo/haversineNm";
|
||||
@ -7,9 +8,56 @@ type Props = {
|
||||
vessels: DerivedLegacyVessel[];
|
||||
fleetVessels: DerivedLegacyVessel[];
|
||||
onSelectMmsi: (mmsi: number) => void;
|
||||
onToggleHighlightMmsi: (mmsi: number) => void;
|
||||
onHoverMmsi: (mmsis: number[]) => void;
|
||||
onClearHover: () => void;
|
||||
onHoverPair: (mmsis: number[]) => void;
|
||||
onClearPairHover: () => void;
|
||||
onHoverFleet: (ownerKey: string | null, mmsis: number[]) => void;
|
||||
onClearFleetHover: () => void;
|
||||
hoveredFleetOwnerKey?: string | null;
|
||||
hoveredFleetMmsiSet?: number[];
|
||||
onContextMenuFleet?: (ownerKey: string, mmsis: number[]) => void;
|
||||
};
|
||||
|
||||
export function RelationsPanel({ selectedVessel, vessels, fleetVessels, onSelectMmsi }: Props) {
|
||||
export function RelationsPanel({
|
||||
selectedVessel,
|
||||
vessels,
|
||||
fleetVessels,
|
||||
onSelectMmsi,
|
||||
onToggleHighlightMmsi,
|
||||
onHoverMmsi,
|
||||
onClearHover,
|
||||
onHoverPair,
|
||||
onClearPairHover,
|
||||
onHoverFleet,
|
||||
onClearFleetHover,
|
||||
hoveredFleetOwnerKey,
|
||||
hoveredFleetMmsiSet,
|
||||
onContextMenuFleet,
|
||||
}: Props) {
|
||||
const handlePrimaryAction = (e: MouseEvent, mmsi: number) => {
|
||||
if (e.shiftKey || e.ctrlKey || e.metaKey) {
|
||||
onToggleHighlightMmsi(mmsi);
|
||||
return;
|
||||
}
|
||||
onSelectMmsi(mmsi);
|
||||
};
|
||||
|
||||
const clearAllHovers = () => {
|
||||
onClearHover();
|
||||
onClearPairHover();
|
||||
onClearFleetHover();
|
||||
};
|
||||
|
||||
const hoveredFleetMmsis = useMemo(() => new Set(hoveredFleetMmsiSet ?? []), [hoveredFleetMmsiSet]);
|
||||
|
||||
const isFleetHighlightByOwner = (ownerKey: string | null) =>
|
||||
hoveredFleetOwnerKey != null && ownerKey != null && hoveredFleetOwnerKey === ownerKey;
|
||||
|
||||
const isVesselHighlight = (mmsi: number, ownerKey: string | null) =>
|
||||
hoveredFleetMmsis.has(mmsi) || isFleetHighlightByOwner(ownerKey);
|
||||
|
||||
if (selectedVessel) {
|
||||
const v = selectedVessel;
|
||||
const meta = VESSEL_TYPES[v.shipCode];
|
||||
@ -19,7 +67,7 @@ export function RelationsPanel({ selectedVessel, vessels, fleetVessels, onSelect
|
||||
const fcNearby = vessels.filter((fc) => fc.shipCode === "FC" && fc.mmsi !== v.mmsi && haversineNm(fc.lat, fc.lon, v.lat, v.lon) < 5);
|
||||
|
||||
return (
|
||||
<div className="rel-panel">
|
||||
<div className="rel-panel" onMouseLeave={clearAllHovers}>
|
||||
<div className="rel-header">
|
||||
<span style={{ fontSize: 14 }}>{meta.icon}</span>
|
||||
<span style={{ fontSize: 11, fontWeight: 800, color: meta.color }}>{v.permitNo}</span>
|
||||
@ -59,12 +107,22 @@ export function RelationsPanel({ selectedVessel, vessels, fleetVessels, onSelect
|
||||
<>
|
||||
<div className="rel-line">
|
||||
<div className="dot" style={{ background: meta.color }} />
|
||||
<span style={{ fontSize: 9, fontWeight: 600, cursor: "pointer" }} onClick={() => onSelectMmsi(v.mmsi)}>
|
||||
<span
|
||||
style={{ fontSize: 9, fontWeight: 600, cursor: "pointer" }}
|
||||
onMouseEnter={() => onHoverPair([v.mmsi, pair.mmsi])}
|
||||
onMouseLeave={onClearPairHover}
|
||||
onClick={(e) => handlePrimaryAction(e, v.mmsi)}
|
||||
>
|
||||
{v.permitNo}
|
||||
</span>
|
||||
<div className="rel-link">{warn ? "⚠" : "⟷"}</div>
|
||||
<div className="dot" style={{ background: pairMeta.color }} />
|
||||
<span style={{ fontSize: 9, fontWeight: 600, cursor: "pointer" }} onClick={() => onSelectMmsi(pair.mmsi)}>
|
||||
<span
|
||||
style={{ fontSize: 9, fontWeight: 600, cursor: "pointer" }}
|
||||
onMouseEnter={() => onHoverPair([v.mmsi, pair.mmsi])}
|
||||
onMouseLeave={onClearPairHover}
|
||||
onClick={(e) => handlePrimaryAction(e, pair.mmsi)}
|
||||
>
|
||||
{pair.permitNo}
|
||||
</span>
|
||||
<span
|
||||
@ -98,7 +156,12 @@ export function RelationsPanel({ selectedVessel, vessels, fleetVessels, onSelect
|
||||
return (
|
||||
<div key={fc.mmsi} className="rel-line">
|
||||
<div className="dot" style={{ background: VESSEL_TYPES.FC.color }} />
|
||||
<span style={{ fontSize: 9, fontWeight: 600, cursor: "pointer" }} onClick={() => onSelectMmsi(fc.mmsi)}>
|
||||
<span
|
||||
style={{ fontSize: 9, fontWeight: 600, cursor: "pointer" }}
|
||||
onMouseEnter={() => onHoverPair([v.mmsi, fc.mmsi])}
|
||||
onMouseLeave={onClearPairHover}
|
||||
onClick={(e) => handlePrimaryAction(e, fc.mmsi)}
|
||||
>
|
||||
{fc.permitNo}
|
||||
</span>
|
||||
<span className="rel-dist" style={{ background: "#D9770622", color: "#D97706" }}>
|
||||
@ -144,7 +207,14 @@ export function RelationsPanel({ selectedVessel, vessels, fleetVessels, onSelect
|
||||
{sameOwner.slice(0, 8).map((sv) => {
|
||||
const m = VESSEL_TYPES[sv.shipCode];
|
||||
return (
|
||||
<div key={sv.mmsi} className="fleet-vessel" onClick={() => onSelectMmsi(sv.mmsi)} style={{ cursor: "pointer" }}>
|
||||
<div
|
||||
key={sv.mmsi}
|
||||
className={`fleet-vessel ${isVesselHighlight(sv.mmsi, v.ownerKey) ? "hl" : ""}`}
|
||||
onMouseEnter={() => onHoverFleet(v.ownerKey, [v.mmsi, ...sameOwner.map((x) => x.mmsi), sv.mmsi])}
|
||||
onMouseLeave={onClearFleetHover}
|
||||
onClick={(e) => handlePrimaryAction(e, sv.mmsi)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<div className="dot" style={{ background: m.color }} />
|
||||
<span style={{ color: m.color, fontWeight: 600 }}>{sv.shipCode}</span> {sv.permitNo}
|
||||
<span style={{ color: "var(--muted)" }}>
|
||||
@ -160,7 +230,6 @@ export function RelationsPanel({ selectedVessel, vessels, fleetVessels, onSelect
|
||||
);
|
||||
}
|
||||
|
||||
// No vessel selected: show top fleets
|
||||
if (fleetVessels.length === 0) {
|
||||
return <div style={{ fontSize: 11, color: "var(--muted)" }}>(현재 지도에 표시중인 대상 선박이 없습니다)</div>;
|
||||
}
|
||||
@ -176,24 +245,33 @@ export function RelationsPanel({ selectedVessel, vessels, fleetVessels, onSelect
|
||||
const topFleets = Array.from(group.entries())
|
||||
.map(([ownerKey, vs]) => ({ ownerKey, vs }))
|
||||
.filter((x) => x.vs.length >= 3)
|
||||
.sort((a, b) => b.vs.length - a.vs.length)
|
||||
.slice(0, 5);
|
||||
.sort((a, b) => b.vs.length - a.vs.length);
|
||||
|
||||
if (topFleets.length === 0) {
|
||||
return <div style={{ fontSize: 11, color: "var(--muted)" }}>(표시 중인 선단(3척 이상) 없음)</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div onMouseLeave={clearAllHovers}>
|
||||
{topFleets.map(({ ownerKey, vs }) => {
|
||||
const displayOwner = vs.find((v) => v.ownerCn)?.ownerCn || vs.find((v) => v.ownerRoman)?.ownerRoman || ownerKey;
|
||||
const displayTitle = ownerKey && displayOwner !== ownerKey ? `${displayOwner} (${ownerKey})` : displayOwner;
|
||||
const isHighlightedFleetRow = isFleetHighlightByOwner(ownerKey) || vs.some((v) => hoveredFleetMmsis.has(v.mmsi));
|
||||
const codes: Record<string, number> = {};
|
||||
for (const v of vs) codes[v.shipCode] = (codes[v.shipCode] ?? 0) + 1;
|
||||
|
||||
return (
|
||||
<div key={ownerKey} className="fleet-card">
|
||||
<div className="fleet-owner">
|
||||
<div
|
||||
key={ownerKey}
|
||||
className={`fleet-card ${isHighlightedFleetRow ? "hl" : ""}`}
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault();
|
||||
onContextMenuFleet?.(ownerKey, vs.map((x) => x.mmsi));
|
||||
}}
|
||||
onMouseEnter={() => onHoverFleet(ownerKey, vs.map((v) => v.mmsi))}
|
||||
onMouseLeave={onClearFleetHover}
|
||||
>
|
||||
<div className={`fleet-owner ${isHighlightedFleetRow ? "hl" : ""}`}>
|
||||
🏢{" "}
|
||||
<span
|
||||
style={{
|
||||
@ -203,10 +281,12 @@ export function RelationsPanel({ selectedVessel, vessels, fleetVessels, onSelect
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
color: "var(--text)",
|
||||
marginRight: 4,
|
||||
}}
|
||||
title={displayTitle}
|
||||
>
|
||||
{displayOwner}
|
||||
{displayTitle}
|
||||
</span>{" "}
|
||||
<span style={{ fontSize: 8, color: "var(--muted)" }}>{vs.length}척</span>
|
||||
</div>
|
||||
@ -234,11 +314,15 @@ export function RelationsPanel({ selectedVessel, vessels, fleetVessels, onSelect
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
|
||||
{vs.slice(0, 18).map((v) => {
|
||||
const m = VESSEL_TYPES[v.shipCode];
|
||||
const text = v.shipCode === "FC" ? "F" : v.shipCode === "PT" ? "M" : v.shipCode === "PT-S" ? "S" : v.shipCode[0];
|
||||
const text =
|
||||
v.shipCode === "FC" ? "F" : v.shipCode === "PT" ? "M" : v.shipCode === "PT-S" ? "S" : v.shipCode[0];
|
||||
return (
|
||||
<span key={v.mmsi} style={{ display: "inline-flex", alignItems: "center", gap: 2 }}>
|
||||
<div
|
||||
onClick={() => onSelectMmsi(v.mmsi)}
|
||||
className={`fleet-dot ${isVesselHighlight(v.mmsi, ownerKey) ? "hl" : ""}`}
|
||||
onMouseEnter={() => onHoverMmsi([v.mmsi])}
|
||||
onMouseLeave={onClearHover}
|
||||
onClick={(e) => handlePrimaryAction(e, v.mmsi)}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
width: 16,
|
||||
|
||||
불러오는 중...
Reference in New Issue
Block a user