@dxos/react-ui-geo 0.8.4-staging.ac66bdf99f → 0.9.0

package/src/util/inertia.ts

@@ -28,14 +28,20 @@ export const geoInertiaDrag = (target, render, projection, options) => {
   }
   target = select(target);
 
-  // Complete params: (projection, render, startDrag, dragging, endDrag).
-  const inertia = geoInertiaDragHelper({
+  // `linear` (default) constrains rotation so that mouse Δx maps to lambda
+  // (polar spin) and Δy maps to phi (tilt); gamma is held at 0.
+  // `versor` lets the dragged point follow the cursor exactly, at the cost of
+  // inducing some roll. In linear mode `lockTilt` keeps phi pinned but still
+  // allows lambda from Δx.
+  const linear = (options.mode ?? 'linear') === 'linear';
+  const axis = restrictAxis(options.lockTilt ? [true, false, false] : [true, true, true]);
+  const sharedHandlers = {
     projection,
     render: (rotation) => {
       projection.rotate(rotation);
       render && render();
     },
-    axis: restrictAxis(options.xAxis ? [true, false, false] : [true, true, true]),
+    axis,
     start: options.start,
     move: options.move,
     end: options.end,
@@ -43,7 +49,16 @@ export const geoInertiaDrag = (target, render, projection, options) => {
     finish: options.finish,
     time: options.time,
     hold: options.hold,
-  });
+  };
+
+  // Complete params: (projection, render, startDrag, dragging, endDrag).
+  const inertia = linear
+    ? geoInertiaDragLinearHelper({
+        ...sharedHandlers,
+        sensitivity: options.sensitivity,
+        getZoom: options.getZoom,
+      })
+    : geoInertiaDragHelper(sharedHandlers);
 
   target.call(drag().on('start', inertia.start).on('drag', inertia.move).on('end', inertia.end));
   return inertia;
@@ -112,6 +127,74 @@ const geoInertiaDragHelper = (opt) => {
   return inertia;
 };
 
+/**
+ * Linear pixel-to-Euler drag: Δx → lambda, Δy → phi, gamma fixed at 0.
+ * Inertia spin-down reuses the same shared decay curve as the versor path.
+ */
+const DEFAULT_LINEAR_SENSITIVITY = 0.25;
+
+const geoInertiaDragLinearHelper = (opt) => {
+  const projection = opt.projection;
+  const sensitivity = opt.sensitivity ?? DEFAULT_LINEAR_SENSITIVITY;
+  // Scale degrees-per-pixel by 1/zoom so the drag feels consistent at any zoom
+  // level (mirrors useWheel — a more zoomed-in globe needs smaller angular
+  // rotation per pixel of cursor travel). Clamped to a floor so very small
+  // zoom values don't blow up the gain.
+  const gain = () => sensitivity / Math.max(opt.getZoom?.() ?? 1, 0.1);
+
+  let r0; // Projection rotation as Euler angles at start of drag.
+  let p0; // Pointer pixel position at start of drag.
+  let kStart; // Gain captured at start of drag (held for the gesture + inertia).
+  let rEnd; // Projection rotation at end of drag.
+  let vEnd; // Pointer velocity (px/s) at end of drag.
+
+  const inertia = inertiaHelper({
+    axis: opt.axis,
+
+    start: () => {
+      r0 = projection.rotate();
+      p0 = [inertia.position[0], inertia.position[1]];
+      // Lock the gain at gesture start so a zoom change mid-gesture doesn't
+      // teleport the globe; inertia continues at the same gain.
+      kStart = gain();
+      opt.start && opt.start();
+    },
+
+    move: () => {
+      const dx = inertia.position[0] - p0[0];
+      const dy = inertia.position[1] - p0[1];
+      // Screen y grows downward; negate so dragging down rotates the globe to
+      // match the cursor (matches the feel of the versor-based path).
+      const r1 = [r0[0] + dx * kStart, r0[1] - dy * kStart, 0];
+      const r2 = opt.axis(r0, r1);
+      opt.render(r2);
+      opt.move && opt.move();
+    },
+
+    end: () => {
+      rEnd = projection.rotate();
+      vEnd = [inertia.velocity[0], inertia.velocity[1]];
+      opt.end && opt.end();
+    },
+
+    stop: opt.stop,
+
+    finish: opt.finish,
+
+    render: (t) => {
+      // t goes 0→1 along the decay curve; at t=1 we've added ~1s of velocity.
+      // dy sign flipped to match the move handler.
+      const r1 = [rEnd[0] + vEnd[0] * kStart * t, rEnd[1] - vEnd[1] * kStart * t, 0];
+      const r2 = opt.axis(rEnd, r1);
+      opt.render && opt.render(r2);
+    },
+
+    time: opt.time,
+  });
+
+  return inertia;
+};
+
 function inertiaHelper(opt) {
   const A = opt.time || 5_000; // Reference time in ms.
   const limit = 1.0001;

package/src/util/render.ts

@@ -2,7 +2,8 @@
 // Copyright 2020 DXOS.org
 //
 
-import { type GeoPath, type GeoPermissibleObjects, geoGraticule } from 'd3';
+import { type GeoPath, type GeoPermissibleObjects, geoBounds, geoCentroid, geoDistance, geoGraticule } from 'd3';
+import { type Feature, type Geometry } from 'geojson';
 import { feature, mesh } from 'topojson-client';
 import { type Topology } from 'topojson-specification';
 
@@ -30,9 +31,57 @@ export type Features = {
   lines?: { source: LatLngLiteral; target: LatLngLiteral }[];
 };
 
+/**
+ * Per-feature bounding circle used for view-frustum culling on an
+ * orthographic globe. `centroid` is in lon/lat degrees and `radius` is the
+ * angular distance (degrees) from the centroid to the farthest sampled
+ * vertex of the feature.
+ */
+export type FeatureBounds = {
+  geometry: Geometry;
+  centroid: [number, number];
+  radius: number;
+};
+
 export type Layer = {
   styles: Styles;
   path: GeoPermissibleObjects;
+  /**
+   * If present, this layer is treated as a `GeometryCollection` whose
+   * member geometries are filtered per-frame by `viewCenter` against each
+   * member's `FeatureBounds`. `path` becomes the *unculled* fallback used
+   * when no `viewCenter` is supplied (e.g. non-orthographic projections).
+   */
+  cullable?: FeatureBounds[];
+};
+
+const RAD_TO_DEG = 180 / Math.PI;
+
+/**
+ * Compute a spherical bounding circle for a GeoJSON feature. We sample the
+ * geoBounds corners (cheap, sufficient for typical country shapes); for
+ * features crossing the antimeridian d3.geoBounds returns west > east, which
+ * geoDistance handles correctly when called on the actual centroid.
+ */
+const computeBounds = (geometry: Geometry): FeatureBounds => {
+  const feat: Feature = { type: 'Feature', geometry, properties: {} };
+  const centroid = geoCentroid(feat) as [number, number];
+  const [[w, s], [e, n]] = geoBounds(feat);
+  // Sample the four bbox corners; widest is the bounding radius.
+  const corners: Array<[number, number]> = [
+    [w, s],
+    [w, n],
+    [e, s],
+    [e, n],
+  ];
+  let radius = 0;
+  for (const corner of corners) {
+    const d = geoDistance(centroid, corner) * RAD_TO_DEG;
+    if (d > radius) {
+      radius = d;
+    }
+  }
+  return { geometry, centroid, radius };
 };
 
 /**
@@ -62,11 +111,25 @@ export const createLayers = (topology: Topology, features: Features, styles: Sty
   //
 
   if (topology) {
-    if (topology.objects.land && styles.land) {
-      layers.push({
-        styles: styles.land,
-        path: feature(topology, topology.objects.land),
-      });
+    if (styles.land) {
+      // Prefer the `countries` GeometryCollection over the merged `land`
+      // multipolygon so each country can be culled independently. Visually
+      // identical (countries collectively tile the land surface).
+      if (topology.objects.countries) {
+        const fc = feature(topology, topology.objects.countries) as any;
+        const memberGeoms: Geometry[] = fc.features.map((f: Feature) => f.geometry);
+        const bounds = memberGeoms.map(computeBounds);
+        layers.push({
+          styles: styles.land,
+          path: { type: 'GeometryCollection', geometries: memberGeoms } as any,
+          cullable: bounds,
+        });
+      } else if (topology.objects.land) {
+        layers.push({
+          styles: styles.land,
+          path: feature(topology, topology.objects.land),
+        });
+      }
     }
 
     if (topology.objects.countries && styles.border) {
@@ -91,22 +154,24 @@ export const createLayers = (topology: Topology, features: Features, styles: Sty
   if (features) {
     const { points, lines } = features;
 
-    if (points && styles.point) {
+    // Lines first so points (drawn after) sit on top — the route nodes should
+    // never be occluded by an arc that passes through them.
+    if (lines && styles.line) {
       layers.push({
-        styles: styles.point,
+        styles: styles.line,
         path: {
           type: 'GeometryCollection',
-          geometries: points.map((point) => geoPoint(point)),
+          geometries: lines.map(({ source, target }) => geoLine(source, target)),
         },
       });
     }
 
-    if (lines && styles.line) {
+    if (points && styles.point) {
       layers.push({
-        styles: styles.line,
+        styles: styles.point,
         path: {
           type: 'GeometryCollection',
-          geometries: lines.map(({ source, target }) => geoLine(source, target)),
+          geometries: points.map((point) => geoPoint(point)),
         },
       });
     }
@@ -117,8 +182,19 @@ export const createLayers = (topology: Topology, features: Features, styles: Sty
 
 /**
  * Render layers created above.
+ *
+ * When `viewCenter` is supplied (orthographic globe), layers with a
+ * `cullable` index are filtered to just the features whose bounding circle
+ * intersects the visible hemisphere — keeping the d3-geo walk proportional
+ * to what's actually on-screen.
  */
-export const renderLayers = (generator: GeoPath, layers: Layer[] = [], scale: number, styles: StyleSet) => {
+export const renderLayers = (
+  generator: GeoPath,
+  layers: Layer[] = [],
+  scale: number,
+  styles: StyleSet,
+  viewCenter?: [number, number],
+) => {
   const context: CanvasRenderingContext2D = generator.context();
   const {
     canvas: { width, height },
@@ -135,7 +211,8 @@ export const renderLayers = (generator: GeoPath, layers: Layer[] = [], scale: nu
 
   // Render features.
   // https://github.com/d3/d3-geo#_path
-  layers.forEach(({ path, styles }) => {
+  layers.forEach((layer) => {
+    const { path, styles, cullable } = layer;
     context.save();
     let fill = false;
     let stroke = false;
@@ -151,9 +228,21 @@ export const renderLayers = (generator: GeoPath, layers: Layer[] = [], scale: nu
       });
     }
 
-    context.beginPath();
+    let renderPath = path;
+    if (cullable && viewCenter) {
+      const geometries: Geometry[] = [];
+      for (let index = 0; index < cullable.length; index++) {
+        const bounds = cullable[index];
+        const angularDistance = geoDistance(viewCenter, bounds.centroid) * RAD_TO_DEG;
+        if (angularDistance < 90 + bounds.radius) {
+          geometries.push(bounds.geometry);
+        }
+      }
+      renderPath = { type: 'GeometryCollection', geometries } as any;
+    }
 
-    generator(path);
+    context.beginPath();
+    generator(renderPath);
     fill && context.fill();
     stroke && context.stroke();
     context.restore();

package/src/util/styles.ts

@@ -0,0 +1,62 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type ThemeMode } from '@dxos/react-ui';
+
+import { type StyleSet } from './render';
+
+/**
+ * Default style set for the Globe, theme-aware. Originated in plugin-map's
+ * GlobeControl; lifted here so other plugins (plugin-trip, etc.) get the same
+ * baseline without copying the palette.
+ */
+// Point colour; lines pick up the same colour at reduced alpha so the route
+// reads as belonging to the same node set without competing with the nodes.
+const POINT_COLOR = 'rgb(220, 38, 38)';
+const LINE_COLOR = 'rgba(220, 38, 38, 0.5)';
+
+export const globeStyles = (themeMode: ThemeMode): StyleSet =>
+  themeMode === 'dark'
+    ? {
+        water: {
+          fillStyle: '#191919',
+        },
+        land: {
+          fillStyle: '#444',
+          strokeStyle: '#222',
+        },
+        border: {
+          strokeStyle: '#111',
+        },
+        graticule: {
+          strokeStyle: '#111',
+        },
+        line: {
+          lineWidth: 1.5,
+          lineDash: [4, 16],
+          strokeStyle: LINE_COLOR,
+        },
+        point: {
+          radius: 0.2,
+          fillStyle: POINT_COLOR,
+        },
+      }
+    : {
+        water: {
+          fillStyle: '#C0DAE4',
+        },
+        land: {
+          fillStyle: '#C2D8B4',
+          strokeStyle: '#A6C291',
+        },
+        line: {
+          lineWidth: 1.5,
+          lineDash: [4, 16],
+          strokeStyle: LINE_COLOR,
+        },
+        point: {
+          radius: 0.2,
+          fillStyle: POINT_COLOR,
+        },
+      };

package/dist/lib/browser/chunk-GMWLKTLN.mjs

@@ -1,9 +0,0 @@
-// src/data.ts
-var loadTopology = async () => {
-  return (await import("./countries-110m-ZM3ZIEFS.mjs")).default;
-};
-
-export {
-  loadTopology
-};
-//# sourceMappingURL=chunk-GMWLKTLN.mjs.map

package/dist/lib/browser/chunk-GMWLKTLN.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/data.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Topology } from 'topojson-specification';\n\nexport const loadTopology = async (): Promise<Topology> => {\n  return (await import('../data/countries-110m.ts')).default;\n};\n"],
-  "mappings": ";AAMO,IAAMA,eAAe,YAAA;AAC1B,UAAQ,MAAM,OAAO,+BAAA,GAA8BC;AACrD;",
-  "names": ["loadTopology", "default"]
-}