feat: extend supply workbench demo and map navigation

src/features/map/core/components/camera-actions.test.ts

@@ -0,0 +1,69 @@
+import type { Map as MapLibreMap } from "maplibre-gl";
+import { describe, expect, it, vi } from "vitest";
+import { getCombinedCameraAction, setThreeDimensionalNavigation } from "./camera-actions";
+
+describe("combined camera mode action", () => {
+  it.each([
+    { bearing: 0, pitch: 0, expected: "enter-3d" },
+    { bearing: 0.4, pitch: 50, expected: "exit-3d" },
+    { bearing: 0.6, pitch: 50, expected: "reset-north" },
+    { bearing: -35, pitch: 45, expected: "reset-north" }
+  ] as const)(
+    "resolves $expected for bearing=$bearing pitch=$pitch",
+    ({ bearing, pitch, expected }) => {
+      expect(getCombinedCameraAction(bearing, pitch)).toBe(expected);
+    }
+  );
+
+  it("enables and disables only the 3D navigation gestures", () => {
+    const canvas = document.createElement("canvas");
+    const handlers = {
+      dragRotate: { enable: vi.fn(), disable: vi.fn() },
+      getCanvas: () => canvas,
+      touchPitch: { enable: vi.fn(), disable: vi.fn() },
+      touchZoomRotate: { enableRotation: vi.fn(), disableRotation: vi.fn() }
+    };
+    const map = handlers as unknown as MapLibreMap;
+
+    setThreeDimensionalNavigation(map, true);
+    expect(handlers.dragRotate.enable).toHaveBeenCalledOnce();
+    expect(handlers.touchPitch.enable).toHaveBeenCalledOnce();
+    expect(handlers.touchZoomRotate.enableRotation).toHaveBeenCalledOnce();
+
+    setThreeDimensionalNavigation(map, false);
+    expect(handlers.dragRotate.disable).toHaveBeenCalledOnce();
+    expect(handlers.touchPitch.disable).toHaveBeenCalledOnce();
+    expect(handlers.touchZoomRotate.disableRotation).toHaveBeenCalledOnce();
+  });
+
+  it("overrides the browser context menu while 3D navigation is enabled", () => {
+    const canvas = document.createElement("canvas");
+    const onMapMouseDown = vi.fn();
+    canvas.addEventListener("mousedown", onMapMouseDown);
+    const map = {
+      dragRotate: { enable: vi.fn(), disable: vi.fn() },
+      getCanvas: () => canvas,
+      touchPitch: { enable: vi.fn(), disable: vi.fn() },
+      touchZoomRotate: { enableRotation: vi.fn(), disableRotation: vi.fn() }
+    } as unknown as MapLibreMap;
+
+    setThreeDimensionalNavigation(map, true);
+    canvas.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, button: 2 }));
+    expect(onMapMouseDown).toHaveBeenCalledOnce();
+    expect(
+      canvas.dispatchEvent(
+        new MouseEvent("contextmenu", { bubbles: true, cancelable: true, button: 2 })
+      )
+    ).toBe(false);
+
+    canvas.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, button: 0, ctrlKey: true }));
+    expect(onMapMouseDown).toHaveBeenCalledTimes(2);
+
+    setThreeDimensionalNavigation(map, false);
+    expect(
+      canvas.dispatchEvent(
+        new MouseEvent("contextmenu", { bubbles: true, cancelable: true, button: 2 })
+      )
+    ).toBe(true);
+  });
+});

src/features/map/core/components/camera-actions.ts

@@ -0,0 +1,42 @@
+import type { Map as MapLibreMap } from "maplibre-gl";
+
+export type CombinedCameraAction = "enter-3d" | "reset-north" | "exit-3d";
+
+export const CAMERA_MODE_ANGLE_TOLERANCE = 0.5;
+
+const browserContextMenuOverrides = new WeakMap<MapLibreMap, () => void>();
+
+export function getCombinedCameraAction(bearing: number, pitch: number): CombinedCameraAction {
+  if (pitch <= CAMERA_MODE_ANGLE_TOLERANCE) return "enter-3d";
+  if (Math.abs(bearing) > CAMERA_MODE_ANGLE_TOLERANCE) return "reset-north";
+  return "exit-3d";
+}
+
+export function setThreeDimensionalNavigation(map: MapLibreMap, enabled: boolean) {
+  if (enabled) {
+    overrideBrowserContextMenu(map);
+    map.dragRotate.enable();
+    map.touchPitch.enable();
+    map.touchZoomRotate.enableRotation();
+    return;
+  }
+
+  browserContextMenuOverrides.get(map)?.();
+  map.dragRotate.disable();
+  map.touchPitch.disable();
+  map.touchZoomRotate.disableRotation();
+}
+
+function overrideBrowserContextMenu(map: MapLibreMap) {
+  if (browserContextMenuOverrides.has(map)) return;
+  const canvas = map.getCanvas();
+  const preventBrowserContextMenu = (event: MouseEvent) => {
+    event.preventDefault();
+  };
+
+  canvas.addEventListener("contextmenu", preventBrowserContextMenu, true);
+  browserContextMenuOverrides.set(map, () => {
+    canvas.removeEventListener("contextmenu", preventBrowserContextMenu, true);
+    browserContextMenuOverrides.delete(map);
+  });
+}

src/features/map/core/components/zoom.tsx

@@ -1,13 +1,13 @@
 import type { Map as MapLibreMap } from "maplibre-gl";
-import { Home, Minus, Plus, type LucideIcon } from "lucide-react";
-import { type RefObject, useCallback } from "react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger
-} from "@/shared/ui/tooltip";
+import { Home, Minus, Navigation2, Plus, type LucideIcon } from "lucide-react";
+import { type ReactNode, type RefObject, useCallback, useEffect, useState } from "react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/shared/ui/tooltip";
 import { cn } from "@/shared/ui/cn";
+import {
+  CAMERA_MODE_ANGLE_TOLERANCE,
+  getCombinedCameraAction,
+  setThreeDimensionalNavigation
+} from "./camera-actions";
 import {
   MAP_CONTROL_HOVER_CLASS_NAME,
   MAP_CONTROL_RADIUS_CLASS_NAME,
@@ -19,10 +19,60 @@ type MapZoomProps = {
   mapRef: RefObject<MapLibreMap | null>;
   mapReady: boolean;
   onHome: () => void;
+  reducedMotion?: boolean;
   className?: string;
 };
 
-export function MapZoom({ mapRef, mapReady, onHome, className = "" }: MapZoomProps) {
+export function MapZoom({
+  mapRef,
+  mapReady,
+  onHome,
+  reducedMotion = false,
+  className = ""
+}: MapZoomProps) {
+  const [orientation, setOrientation] = useState({ bearing: 0, pitch: 0 });
+  const is3d = orientation.pitch > CAMERA_MODE_ANGLE_TOLERANCE;
+  const cameraAction = getCombinedCameraAction(orientation.bearing, orientation.pitch);
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map || !mapReady) return;
+    const syncOrientation = () => {
+      const nextOrientation = { bearing: map.getBearing(), pitch: map.getPitch() };
+      setOrientation(nextOrientation);
+      setThreeDimensionalNavigation(map, nextOrientation.pitch > CAMERA_MODE_ANGLE_TOLERANCE);
+    };
+    syncOrientation();
+    map.on("pitch", syncOrientation);
+    map.on("rotate", syncOrientation);
+    return () => {
+      map.off("pitch", syncOrientation);
+      map.off("rotate", syncOrientation);
+    };
+  }, [mapRef, mapReady]);
+
+  const handleCameraMode = useCallback(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    const action = getCombinedCameraAction(map.getBearing(), map.getPitch());
+    const duration = reducedMotion ? 0 : 350;
+
+    if (action === "enter-3d") {
+      setThreeDimensionalNavigation(map, true);
+      map.easeTo({
+        pitch: window.matchMedia("(max-width: 639px)").matches ? 45 : 50,
+        duration
+      });
+      return;
+    }
+
+    if (action === "reset-north") {
+      map.easeTo({ bearing: 0, duration });
+      return;
+    }
+
+    setThreeDimensionalNavigation(map, false);
+    map.easeTo({ pitch: 0, bearing: 0, duration });
+  }, [mapRef, reducedMotion]);
   const handleZoomIn = useCallback(() => {
     mapRef.current?.zoomIn({ duration: 260 });
   }, [mapRef]);
@@ -36,10 +86,7 @@ export function MapZoom({ mapRef, mapReady, onHome, className = "" }: MapZoomPro
       <div
         role="group"
         aria-label="地图缩放"
-        className={cn(
-          "pointer-events-auto flex w-12 flex-col gap-2",
-          className
-        )}
+        className={cn("pointer-events-auto flex w-12 flex-col gap-2", className)}
       >
         <div
           className={cn(
@@ -48,34 +95,33 @@ export function MapZoom({ mapRef, mapReady, onHome, className = "" }: MapZoomPro
             MAP_CONTROL_SURFACE_CLASS_NAME
           )}
         >
-          <ControlButton
-            icon={Plus}
-            label="放大"
-            disabled={!mapReady}
-            onClick={handleZoomIn}
-          />
+          <ControlButton icon={Plus} label="放大" disabled={!mapReady} onClick={handleZoomIn} />
+          <Divider />
+          <ControlButton icon={Minus} label="缩小" disabled={!mapReady} onClick={handleZoomOut} />
           <Divider />
           <ControlButton
-            icon={Minus}
-            label="缩小"
+            content={
+              <CompassModeIndicator
+                bearing={orientation.bearing}
+                pitch={orientation.pitch}
+                mode={is3d ? "3D" : "2D"}
+              />
+            }
+            label={
+              cameraAction === "reset-north"
+                ? "恢复北向"
+                : cameraAction === "exit-3d"
+                  ? "切换到二维"
+                  : "切换到三维"
+            }
+            pressed={is3d}
             disabled={!mapReady}
-            onClick={handleZoomOut}
+            onClick={handleCameraMode}
           />
         </div>
 
-        <div
-          className={cn(
-            "p-1",
-            MAP_CONTROL_RADIUS_CLASS_NAME,
-            MAP_CONTROL_SURFACE_CLASS_NAME
-          )}
-        >
-          <ControlButton
-            icon={Home}
-            label="缩放到全局"
-            disabled={!mapReady}
-            onClick={onHome}
-          />
+        <div className={cn("p-1", MAP_CONTROL_RADIUS_CLASS_NAME, MAP_CONTROL_SURFACE_CLASS_NAME)}>
+          <ControlButton icon={Home} label="缩放到全局" disabled={!mapReady} onClick={onHome} />
         </div>
       </div>
     </TooltipProvider>
@@ -83,19 +129,29 @@ export function MapZoom({ mapRef, mapReady, onHome, className = "" }: MapZoomPro
 }
 
 type ControlButtonProps = {
-  icon: LucideIcon;
+  icon?: LucideIcon;
+  content?: ReactNode;
+  pressed?: boolean;
   label: string;
   disabled: boolean;
   onClick: () => void;
 };
 
-function ControlButton({ icon: Icon, label, disabled, onClick }: ControlButtonProps) {
+function ControlButton({
+  icon: Icon,
+  content,
+  pressed,
+  label,
+  disabled,
+  onClick
+}: ControlButtonProps) {
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <button
           type="button"
           aria-label={label}
+          aria-pressed={pressed}
           disabled={disabled}
           onClick={onClick}
           className={cn(
@@ -103,11 +159,11 @@ function ControlButton({ icon: Icon, label, disabled, onClick }: ControlButtonPr
             MAP_ICON_CELL_RADIUS_CLASS_NAME,
             "bg-transparent text-slate-700",
             MAP_CONTROL_HOVER_CLASS_NAME,
-            disabled &&
-              "text-slate-400 opacity-45 hover:bg-transparent hover:text-slate-400"
+            pressed && "bg-blue-50 text-blue-700",
+            disabled && "text-slate-400 opacity-45 hover:bg-transparent hover:text-slate-400"
           )}
         >
-          <Icon size={18} strokeWidth={2.2} aria-hidden="true" />
+          {Icon ? <Icon size={18} strokeWidth={2.2} aria-hidden="true" /> : content}
         </button>
       </TooltipTrigger>
       <TooltipContent
@@ -121,11 +177,45 @@ function ControlButton({ icon: Icon, label, disabled, onClick }: ControlButtonPr
   );
 }
 
-function Divider() {
+function CompassModeIndicator({
+  bearing,
+  pitch,
+  mode
+}: {
+  bearing: number;
+  pitch: number;
+  mode: "2D" | "3D";
+}) {
   return (
-    <div
-      className="my-0.5 h-px w-3.5 self-center bg-slate-300/70"
+    <span
+      className="relative grid h-7 w-7 place-items-center"
+      style={{ perspective: "70px" }}
       aria-hidden="true"
-    />
+      data-map-compass="true"
+      data-bearing={bearing.toFixed(1)}
+      data-pitch={pitch.toFixed(1)}
+      data-map-mode={mode.toLowerCase()}
+    >
+      <Navigation2
+        size={17}
+        strokeWidth={2.2}
+        className="transition-transform duration-150 ease-out motion-reduce:transition-none"
+        style={{ transform: `rotateX(${Math.min(pitch, 60) * 0.65}deg) rotateZ(${-bearing}deg)` }}
+      />
+      <span
+        className={cn(
+          "absolute -bottom-0.5 -right-0.5 min-w-4 rounded-[4px] px-0.5 text-center text-[8px] font-bold leading-3 tracking-[-0.02em] shadow-xs ring-1",
+          mode === "3D"
+            ? "bg-blue-600 text-white ring-blue-700/30"
+            : "bg-white text-slate-600 ring-slate-300"
+        )}
+      >
+        {mode}
+      </span>
+    </span>
   );
 }
+
+function Divider() {
+  return <div className="my-0.5 h-px w-3.5 self-center bg-slate-300/70" aria-hidden="true" />;
+}