Sync globe layer rebuild during projection transition

apps/web/src/widgets/map3d/Map3D.tsx

@@ -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") {

apps/web/src/widgets/relations/RelationsPanel.tsx

@@ -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,40 +245,51 @@ 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)
+    .sort((a, b) => b.vs.length - a.vs.length);
-    .slice(0, 5);
 
   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
-            <div className="fleet-owner">
+            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
+                <span
-                style={{
+                  style={{
-                  display: "inline-block",
+                    display: "inline-block",
-                  maxWidth: 240,
+                    maxWidth: 240,
-                  verticalAlign: "bottom",
+                    verticalAlign: "bottom",
-                  whiteSpace: "nowrap",
+                    whiteSpace: "nowrap",
-                  overflow: "hidden",
+                    overflow: "hidden",
-                  textOverflow: "ellipsis",
+                    textOverflow: "ellipsis",
-                }}
+                    color: "var(--text)",
-                title={displayTitle}
+                    marginRight: 4,
-              >
+                  }}
-                {displayOwner}
+                  title={displayTitle}
-              </span>{" "}
+                >
-              <span style={{ fontSize: 8, color: "var(--muted)" }}>{vs.length}척</span>
+                  {displayTitle}
-            </div>
+                </span>{" "}
+                <span style={{ fontSize: 8, color: "var(--muted)" }}>{vs.length}척</span>
+              </div>
             <div style={{ display: "flex", gap: 4, flexWrap: "wrap", marginBottom: 3 }}>
               {Object.entries(codes).map(([c, n]) => {
                 const meta = VESSEL_TYPES[c as keyof typeof VESSEL_TYPES];
@@ -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,