@elabs-ai/components-maps 4.2.0 → 5.1.0

package/src/map-arc/map-arc.tsx

@@ -5,6 +5,7 @@ import { useEffect, useId, useMemo, useRef } from "react";
 
 import { useMap } from "../map-canvas/map-context";
 import { buildArcCoordinates } from "../lib/arc-math";
+import type { PlanPoint } from "../lib/plan-crs";
 import { mergeHoverPaint } from "../lib/merge-hover-paint";
 import { useTokenColor } from "../lib/use-token-color";
 
@@ -12,9 +13,12 @@ import { useTokenColor } from "../lib/use-token-color";
 export type MapArcDatum = {
   /** Unique identifier for this arc. Required for hover state tracking and event payloads. */
   id: string | number;
-  /** Start coordinate as [longitude, latitude]. */
+  /**
+   * Start coordinate as [longitude, latitude] — or, inside a `<MapCanvas plan>`,
+   * as [x, y] in plan units.
+   */
   from: [number, number];
-  /** End coordinate as [longitude, latitude]. */
+  /** End coordinate, in the same units as `from`. */
   to: [number, number];
 };
 
@@ -26,6 +30,8 @@ export type MapArcEvent<T extends MapArcDatum = MapArcDatum> = {
   longitude: number;
   /** Latitude of the cursor at the time of the event. */
   latitude: number;
+  /** The cursor in plan units, on a plan map; `null` on a geographic one. */
+  plan: PlanPoint | null;
   /** The underlying MapLibre mouse event for advanced use cases. */
   originalEvent: MapLibreGL.MapMouseEvent;
 };
@@ -89,6 +95,11 @@ const DEFAULT_ARC_LAYOUT: MapArcLineLayout = {
 /**
  * Curved great-circle-style arcs between coordinate pairs (flight paths,
  * network links). Pairs well with `<MapCanvas blank projection={{ type: "globe" }}>`.
+ *
+ * Inside a `<MapCanvas plan>` the same component draws plan-space curves — a
+ * material flow between two machine cells, a walking route across a floor. The
+ * curve is built in PLAN units and each sample is then converted, because a
+ * straight lng/lat line bows once Mercator has had its say.
  */
 export function MapArc<T extends MapArcDatum = MapArcDatum>({
   data,
@@ -103,7 +114,7 @@ export function MapArc<T extends MapArcDatum = MapArcDatum>({
   interactive = true,
   beforeId,
 }: MapArcProps<T>) {
-  const { map, isLoaded } = useMap();
+  const { map, isLoaded, plan } = useMap();
   const autoId = useId();
   const id = propId ?? autoId;
   const sourceId = `arc-source-${id}`;
@@ -133,21 +144,29 @@ export function MapArc<T extends MapArcDatum = MapArcDatum>({
       type: "FeatureCollection",
       features: data.map((arc) => {
         const { from, to, ...properties } = arc;
+        // In plan mode the curve is sampled in plan units with the antimeridian
+        // unwrap OFF — x is a position on a floor, not a longitude — and each
+        // sample is converted afterwards.
+        const sampled = buildArcCoordinates(from, to, curvature, samples, plan == null);
         return {
           type: "Feature",
           properties,
           geometry: {
             type: "LineString",
-            coordinates: buildArcCoordinates(from, to, curvature, samples),
+            coordinates: plan ? sampled.map((point) => plan.toLngLat(point)) : sampled,
           },
         };
       }),
     }),
-    [data, curvature, samples],
+    [data, curvature, samples, plan],
   );
 
   const latestRef = useRef({ data, onClick, onHover });
   latestRef.current = { data, onClick, onHover };
+  // The interaction effect is bound once per map; the plan is read through a ref
+  // so a plan arriving later does not rebind every listener.
+  const planRef = useRef(plan);
+  planRef.current = plan;
 
   // Add source and layers on mount. The invisible hit layer widens the
   // pointer target so thin arcs stay hoverable/clickable.
@@ -255,6 +274,7 @@ export function MapArc<T extends MapArcDatum = MapArcDatum>({
           arc: arc as T,
           longitude: e.lngLat.lng,
           latitude: e.lngLat.lat,
+          plan: planRef.current ? planRef.current.toPlan([e.lngLat.lng, e.lngLat.lat]) : null,
           originalEvent: e,
         });
       }
@@ -273,6 +293,7 @@ export function MapArc<T extends MapArcDatum = MapArcDatum>({
         arc: arc as T,
         longitude: e.lngLat.lng,
         latitude: e.lngLat.lat,
+        plan: planRef.current ? planRef.current.toPlan([e.lngLat.lng, e.lngLat.lat]) : null,
         originalEvent: e,
       });
     };

package/src/map-canvas/map-canvas.stories.tsx

@@ -1,7 +1,21 @@
+import { useEffect, useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor } from "storybook/test";
+import { resolveTokenColor } from "@elabs-ai/components-tokens";
 
 import { MapCanvas } from "./map-canvas";
 import { MapControls } from "../map-controls";
+import { MapGeoJSON } from "../map-geojson";
+import { MapInset } from "../map-inset";
+import { MapLegend } from "../map-legend";
+import { MapMarker, MapMarkerContent, MapMarkerTooltip } from "../map-marker";
+import { MapScaleBar } from "../map-scale-bar";
+import {
+  GREATER_TORONTO,
+  LAKE_ONTARIO,
+  LOCATOR_BOUNDS,
+  LOCATOR_PLACES,
+} from "../test-utils/locator-fixture";
 
 const meta = {
   title: "Maps/MapCanvas",
@@ -52,3 +66,200 @@ export const Globe: Story = {
     </div>
   ),
 };
+
+/**
+ * Consumer-side paint needs concrete colours (WebGL cannot read CSS
+ * variables): resolve a token and re-resolve when the theme flips.
+ */
+function useThemedTokenColor(name: string): string {
+  const [color, setColor] = useState("#000000");
+  useEffect(() => {
+    const update = () => setColor(resolveTokenColor(name));
+    update();
+    const observer = new MutationObserver(update);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme", "class"],
+    });
+    return () => observer.disconnect();
+  }, [name]);
+  return color;
+}
+
+function LakeOntarioLocator() {
+  const lake = useThemedTokenColor("--chart-1");
+  const region = useThemedTokenColor("--chart-2");
+  return (
+    <div className="w-full p-4">
+      <MapCanvas
+        interactive={false}
+        // c-11: the basemap printed "Toronto" 16 px from the marker that
+        // names it, with the marker dot over the basemap word's last letters.
+        // A locator's editorial labels are the only labels on it.
+        basemapLabels={false}
+        bounds={LOCATOR_BOUNDS}
+        // Room at the top for the inset, at the bottom for the scale bar.
+        fitBoundsOptions={{ padding: { top: 152, right: 24, bottom: 56, left: 24 } }}
+      >
+        <MapGeoJSON
+          id="gta"
+          data={GREATER_TORONTO}
+          fillPaint={{ "fill-color": region }}
+          fillOpacity={0.3}
+          vignette={{ width: 10, opacity: 0.4 }}
+          linePaint={false}
+        />
+        <MapGeoJSON
+          id="lake"
+          data={LAKE_ONTARIO}
+          fillPaint={{ "fill-color": lake }}
+          pattern={{ kind: "stripes", width: 2, gap: 4 }}
+          vignette={{ width: 14, opacity: 0.35 }}
+          linePaint={{ "line-color": lake, "line-width": 1 }}
+        />
+        <MapMarker {...LOCATOR_PLACES.lakeLabel} label={{ text: "Lake Ontario", box: true }} />
+        <MapMarker {...LOCATOR_PLACES.gtaLabel} label={{ text: "Greater Toronto Area" }} />
+        <MapMarker {...LOCATOR_PLACES.toronto} label={{ text: "Toronto", position: "bottom-left" }}>
+          <MapMarkerContent />
+          <MapMarkerTooltip>Toronto — Ontario’s capital</MapMarkerTooltip>
+        </MapMarker>
+        <MapMarker
+          {...LOCATOR_PLACES.rochester}
+          showAt={{ base: true, narrow: false }}
+          label={{ text: "Rochester, NY", position: "right" }}
+        >
+          <MapMarkerContent />
+        </MapMarker>
+        <MapInset kind="globe" position="top-right" />
+        <MapScaleBar unit="km" position="bottom-left" />
+        <MapLegend
+          position={{ base: "top-left", narrow: "below" }}
+          items={[
+            { label: "Lake Ontario", color: "var(--chart-1)", shape: "square" },
+            { label: "Greater Toronto Area", color: "var(--chart-2)", shape: "square" },
+          ]}
+        />
+      </MapCanvas>
+    </div>
+  );
+}
+
+/**
+ * An editorial locator: static (no zoom or pan; tooltips still open),
+ * two area markers with a stripe pattern and a vignette glow, inline labels,
+ * a globe inset, a scale bar and a key. The map sets no height of its own:
+ * it takes 1.6 : 1, and turns square at `narrow` so a phone still gets a map
+ * worth reading; there the key moves under the map and Rochester's label
+ * (`showAt: { narrow: false }`) steps aside.
+ */
+export const StaticLocator: Story = {
+  parameters: { layout: "fullscreen" },
+  render: () => <LakeOntarioLocator />,
+  play: async ({ canvasElement }) => {
+    // Without WebGL the canvas degrades to an error panel and no furniture mounts.
+    const map = await waitFor(
+      () => {
+        const el = canvasElement.querySelector<HTMLElement>('[data-slot="map-canvas"]');
+        expect(el ?? canvasElement.querySelector('[role="alert"]')).not.toBeNull();
+        return el;
+      },
+      { timeout: 5000 },
+    );
+    if (!map) return;
+    await expect(map).toHaveAttribute("data-interactive", "false");
+    const tier = map.getAttribute("data-map-breakpoint");
+    await waitFor(() =>
+      expect(canvasElement.querySelector('[data-slot="map-scale-bar"]')).not.toBeNull(),
+    );
+    const legend = canvasElement.querySelector('[data-slot="map-legend"]');
+    if (tier === "narrow") {
+      // Square at narrow; the key sits under the map. The tier is measured
+      // after mount, so wait for the box rather than reading it once.
+      await waitFor(() => {
+        const box = map.getBoundingClientRect();
+        expect(box.height).toBeGreaterThanOrEqual(box.width - 1);
+      });
+      await expect(canvasElement.querySelector('[data-slot="map-canvas-below"]')).not.toBeNull();
+      await expect(map.contains(legend)).toBe(false);
+    } else {
+      await expect(map.contains(legend)).toBe(true);
+    }
+  },
+};
+
+function ViewportReadout() {
+  const [viewport, setViewport] = useState("not moved");
+  return (
+    <div className="flex w-full flex-col gap-2 p-4">
+      <div className="h-[360px]">
+        <MapCanvas
+          interactive={false}
+          center={[-79.38, 43.65]}
+          zoom={9}
+          onViewportChange={(v) =>
+            setViewport(
+              `${v.center[0].toFixed(3)}, ${v.center[1].toFixed(3)} @ ${v.zoom.toFixed(2)}`,
+            )
+          }
+        >
+          <MapMarker {...LOCATOR_PLACES.toronto}>
+            <MapMarkerContent />
+            <MapMarkerTooltip>Toronto</MapMarkerTooltip>
+          </MapMarker>
+        </MapCanvas>
+      </div>
+      <p className="text-caption text-muted-foreground">
+        Viewport: <output data-testid="viewport">{viewport}</output>
+      </p>
+    </div>
+  );
+}
+
+/**
+ * `interactive={false}`: wheel, drag, double-click and keys leave the viewport
+ * alone and the cursor stays an arrow, but hovering the marker still opens
+ * its tooltip. The readout only changes when the viewport does.
+ */
+export const StaticMode: Story = {
+  parameters: { layout: "fullscreen" },
+  render: () => <ViewportReadout />,
+  play: async ({ canvasElement }) => {
+    const canvas = await waitFor(
+      () => {
+        const el = canvasElement.querySelector<HTMLCanvasElement>(".maplibregl-canvas");
+        const fallback = canvasElement.querySelector('[role="alert"]');
+        expect(el ?? fallback).not.toBeNull();
+        return el;
+      },
+      { timeout: 5000 },
+    );
+    if (!canvas) return;
+    const readout = canvasElement.querySelector('[data-testid="viewport"]')!;
+    const before = readout.textContent;
+    canvas.dispatchEvent(
+      new WheelEvent("wheel", {
+        deltaY: -600,
+        bubbles: true,
+        cancelable: true,
+        clientX: 100,
+        clientY: 100,
+      }),
+    );
+    await new Promise((resolve) => setTimeout(resolve, 400));
+    await expect(readout.textContent).toBe(before);
+    await expect(canvas.tabIndex).toBe(-1);
+  },
+};
+
+/**
+ * A map in a parent with no height of its own: `height` resolves per tier —
+ * here 320 px, and a square at `narrow`.
+ */
+export const ResponsiveHeight: Story = {
+  parameters: { layout: "fullscreen" },
+  render: () => (
+    <div className="w-full p-4">
+      <MapCanvas center={[-79.38, 43.65]} zoom={8} height={{ base: 320, narrow: { aspect: 1 } }} />
+    </div>
+  ),
+};