@dxos/solid-ui-geo 0.0.0

package/src/components/Globe/Globe.tsx

@@ -0,0 +1,339 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createResizeObserver } from '@solid-primitives/resize-observer';
+import {
+  type GeoProjection,
+  easeLinear,
+  easeSinOut,
+  geoMercator,
+  geoOrthographic,
+  geoPath,
+  geoTransverseMercator,
+  interpolateNumber,
+  transition,
+} from 'd3';
+import { type ControlPosition } from 'leaflet';
+import { type Accessor, type JSX, type Setter, Show, createEffect, createMemo, createSignal } from 'solid-js';
+import { type Topology } from 'topojson-specification';
+
+import { GlobeContextProvider, type GlobeContextProviderProps, useGlobeContext } from '../../hooks';
+import {
+  type Features,
+  type StyleSet,
+  createLayers,
+  geoToPosition,
+  positionToRotation,
+  renderLayers,
+  timer,
+} from '../../util';
+import { ActionControls, type ControlProps, ZoomControls, controlPositions } from '../Toolbar';
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
+ */
+const defaultStyles: Record<string, StyleSet> = {
+  light: {
+    background: {
+      fillStyle: '#EEE',
+    },
+
+    water: {
+      fillStyle: '#555',
+    },
+
+    land: {
+      fillStyle: '#999',
+    },
+
+    line: {
+      strokeStyle: 'darkred',
+    },
+
+    point: {
+      fillStyle: '#111111',
+      strokeStyle: '#111111',
+      strokeWidth: 1,
+      pointRadius: 0.5,
+    },
+  },
+  dark: {
+    background: {
+      fillStyle: '#111111',
+    },
+
+    water: {
+      fillStyle: '#123E6A',
+    },
+
+    land: {
+      fillStyle: '#032153',
+    },
+
+    line: {
+      strokeStyle: '#111111',
+    },
+
+    point: {
+      fillStyle: '#111111',
+      strokeStyle: '#111111',
+      strokeWidth: 1,
+      pointRadius: 0.5,
+    },
+  },
+};
+
+export type GlobeController = {
+  canvas: HTMLCanvasElement;
+  projection: GeoProjection;
+  zoom: number;
+  translation: Accessor<{ x: number; y: number } | undefined>;
+  rotation: Accessor<[number, number, number] | undefined>;
+  setZoom: (zoom: number | ((prev: number) => number)) => void;
+  setTranslation: Setter<{ x: number; y: number } | undefined>;
+  setRotation: (rotation: [number, number, number]) => void;
+};
+
+export type ProjectionType = 'orthographic' | 'mercator' | 'transverse-mercator';
+
+const projectionMap: Record<ProjectionType, () => GeoProjection> = {
+  orthographic: geoOrthographic,
+  mercator: geoMercator,
+  'transverse-mercator': geoTransverseMercator,
+};
+
+const getProjection = (type: GlobeCanvasProps['projection'] = 'orthographic'): GeoProjection => {
+  if (typeof type === 'string') {
+    const constructor = projectionMap[type] ?? geoOrthographic;
+    return constructor();
+  }
+
+  return type ?? geoOrthographic();
+};
+
+//
+// Root
+//
+
+type GlobeRootProps = {
+  children: JSX.Element;
+  class?: string;
+} & Partial<GlobeContextProviderProps> &
+  JSX.HTMLAttributes<HTMLDivElement>;
+
+const GlobeRoot = (props: GlobeRootProps) => {
+  let containerRef: HTMLDivElement | undefined;
+  const [size, setSize] = createSignal({ width: 0, height: 0 });
+
+  // Use @solid-primitives/resize-observer
+  createResizeObserver(
+    () => containerRef,
+    ({ width, height }) => {
+      setSize({ width, height });
+    },
+  );
+
+  return (
+    <div ref={containerRef} class={`relative flex grow overflow-hidden ${props.class ?? ''}`} {...props}>
+      <GlobeContextProvider size={size()} {...props}>
+        {props.children}
+      </GlobeContextProvider>
+    </div>
+  );
+};
+
+//
+// Canvas
+//
+
+type GlobeCanvasProps = {
+  ref?: (controller: GlobeController) => void;
+  projection?: ProjectionType | GeoProjection;
+  topology?: Topology;
+  features?: Features;
+  styles?: StyleSet;
+};
+
+/**
+ * Basic globe renderer.
+ * https://github.com/topojson/world-atlas
+ */
+
+const GlobeCanvas = (props: GlobeCanvasProps) => {
+  const themeMode = 'dark'; // TODO: Get from theme context
+  const styles = createMemo(() => props.styles ?? defaultStyles[themeMode]);
+
+  // Canvas.
+  const [canvas, setCanvas] = createSignal<HTMLCanvasElement | null>(null);
+
+  // Projection.
+  const projection = createMemo(() => getProjection(props.projection));
+
+  // Layers.
+  const layers = createMemo(() => {
+    return timer(() => createLayers(props.topology as Topology, props.features, styles()));
+  });
+
+  // State.
+  const { size, center, zoom, translation, rotation, setCenter, setZoom, setTranslation, setRotation } =
+    useGlobeContext();
+
+  let zoomValue = zoom();
+  let zooming = false;
+
+  createEffect(() => {});
+
+  // Update rotation.
+  createEffect(() => {
+    const c = center();
+    if (c) {
+      setZoom(1);
+      setRotation(positionToRotation(geoToPosition(c)));
+    }
+  });
+
+  // External controller.
+  createEffect(() => {
+    const canvasEl = canvas();
+    if (canvasEl && props.ref) {
+      const controller: GlobeController = {
+        canvas: canvasEl,
+        projection: projection(),
+        get zoom() {
+          return zoomValue;
+        },
+        translation,
+        rotation,
+        setZoom: (s) => {
+          if (typeof s === 'function') {
+            const is = interpolateNumber(zoomValue, s(zoomValue));
+            // Stop easing if already zooming.
+            transition()
+              .ease(zooming ? easeLinear : easeSinOut)
+              .duration(200)
+              .tween('scale', () => (t) => {
+                const newZoom = is(t);
+                zoomValue = newZoom;
+                setZoom(newZoom);
+              })
+              .on('end', () => {
+                zooming = false;
+              });
+          } else {
+            zoomValue = s;
+            setZoom(s);
+          }
+        },
+        setTranslation,
+        setRotation,
+      };
+      props.ref(controller);
+    }
+  });
+
+  // https://d3js.org/d3-geo/path#geoPath
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext
+  const generator = createMemo(() => {
+    const canvasEl = canvas();
+    const proj = projection();
+    return canvasEl && proj && geoPath(proj, canvasEl.getContext('2d', { alpha: false }));
+  });
+
+  // Render on change.
+  createEffect(() => {
+    const canvasEl = canvas();
+    const proj = projection();
+    const gen = generator();
+    const z = zoom();
+    const t = translation();
+    const r = rotation();
+    const s = size();
+
+    if (canvasEl && proj && gen) {
+      timer(() => {
+        // https://d3js.org/d3-geo/projection
+        proj
+          .scale((Math.min(s.width, s.height) / 2) * z)
+          .translate([s.width / 2 + (t?.x ?? 0), s.height / 2 + (t?.y ?? 0)])
+          .rotate(r ?? [0, 0, 0]);
+
+        renderLayers(gen, layers(), z, styles());
+      });
+    }
+  });
+
+  return (
+    <Show when={size().width > 0 && size().height > 0}>
+      <canvas ref={setCanvas} width={size().width} height={size().height} />
+    </Show>
+  );
+};
+
+//
+// Debug
+//
+
+const GlobeDebug = (props: { position?: ControlPosition }) => {
+  const { size, zoom, translation, rotation } = useGlobeContext();
+  return (
+    <div
+      class={`z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded ${
+        controlPositions[props.position ?? 'topleft']
+      }`}
+    >
+      <pre class='font-mono text-xs text-green-700'>
+        {JSON.stringify({ size, zoom: zoom(), translation: translation(), rotation: rotation() }, null, 2)}
+      </pre>
+    </div>
+  );
+};
+
+//
+// Panel
+//
+
+const GlobePanel = (props: { children: JSX.Element; position?: ControlPosition; class?: string }) => {
+  return (
+    <div class={`z-10 absolute overflow-hidden ${controlPositions[props.position ?? 'topleft']} ${props.class ?? ''}`}>
+      {props.children}
+    </div>
+  );
+};
+
+//
+// Controls
+//
+
+const CustomControl = (props: { children: JSX.Element; position: ControlPosition }) => {
+  return <div class={`z-10 absolute overflow-hidden ${controlPositions[props.position]}`}>{props.children}</div>;
+};
+
+type GlobeControlProps = { position?: ControlPosition } & Pick<ControlProps, 'onAction'>;
+
+const GlobeZoom = (props: GlobeControlProps) => (
+  <CustomControl position={props.position ?? 'bottomleft'}>
+    <ZoomControls onAction={props.onAction} />
+  </CustomControl>
+);
+
+const GlobeAction = (props: GlobeControlProps) => (
+  <CustomControl position={props.position ?? 'bottomright'}>
+    <ActionControls onAction={props.onAction} />
+  </CustomControl>
+);
+
+//
+// Globe
+//
+
+export const Globe = {
+  Root: GlobeRoot,
+  Canvas: GlobeCanvas,
+  Zoom: GlobeZoom,
+  Action: GlobeAction,
+  Debug: GlobeDebug,
+  Panel: GlobePanel,
+};
+
+export type { GlobeRootProps, GlobeCanvasProps };

package/src/components/Globe/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './Globe';

package/src/components/Map/Map.solid-stories.tsx

@@ -0,0 +1,69 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createSignal } from 'solid-js';
+import { type Meta, type StoryObj } from 'storybook-solidjs-vite';
+
+import { useMapZoomHandler } from '../../hooks';
+import { type GeoMarker } from '../../types';
+
+import { Map, type MapController } from './Map';
+
+const DefaultStory = ({ markers = [] }: { markers?: GeoMarker[] }) => {
+  const [controller, setController] = createSignal<MapController>();
+  const handleZoomAction = useMapZoomHandler(controller());
+
+  return (
+    <Map.Root ref={setController}>
+      <Map.Tiles />
+      <Map.Markers markers={() => markers} />
+      <Map.Zoom position='bottomleft' onAction={handleZoomAction} />
+      <Map.Action position='bottomright' />
+    </Map.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/solid-ui-geo/Map',
+  component: Map.Root as any,
+  render: DefaultStory,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithMarkers: Story = {
+  args: {
+    markers: [
+      { id: 'los angeles', title: 'Los Angeles', location: { lat: 34.0522, lng: -118.2437 } },
+      { id: 'new york', title: 'New York', location: { lat: 40.7128, lng: -74.006 } },
+      { id: 'warsaw', title: 'Warsaw', location: { lat: 52.2297, lng: 21.0122 } },
+      { id: 'london', title: 'London', location: { lat: 51.5074, lng: -0.1278 } },
+      { id: 'toronto', title: 'Toronto', location: { lat: 43.6532, lng: -79.3832 } },
+      { id: 'seattle', title: 'Seattle', location: { lat: 47.6062, lng: -122.3321 } },
+      { id: 'barcelona', title: 'Barcelona', location: { lat: 41.3851, lng: 2.1734 } },
+      { id: 'tokyo', title: 'Tokyo', location: { lat: 35.6762, lng: 139.6503 } },
+      { id: 'sydney', title: 'Sydney', location: { lat: -33.8688, lng: 151.2093 } },
+      { id: 'auckland', title: 'Auckland', location: { lat: -36.8509, lng: 174.7645 } },
+      { id: 'new-delhi', title: 'New Delhi', location: { lat: 28.6139, lng: 77.209 } },
+      { id: 'manila', title: 'Manila', location: { lat: 14.5995, lng: 120.9842 } },
+      { id: 'beijing', title: 'Beijing', location: { lat: 39.9042, lng: 116.4074 } },
+      { id: 'seoul', title: 'Seoul', location: { lat: 37.5665, lng: 126.978 } },
+      { id: 'bangkok', title: 'Bangkok', location: { lat: 13.7563, lng: 100.5018 } },
+      { id: 'singapore', title: 'Singapore', location: { lat: 1.3521, lng: 103.8198 } },
+      { id: 'kuala-lumpur', title: 'Kuala Lumpur', location: { lat: 3.139, lng: 101.6869 } },
+      { id: 'jakarta', title: 'Jakarta', location: { lat: -6.2088, lng: 106.8456 } },
+      { id: 'hanoi', title: 'Hanoi', location: { lat: 21.0285, lng: 105.8542 } },
+      { id: 'phnom-penh', title: 'Phnom Penh', location: { lat: 11.5564, lng: 104.9282 } },
+      { id: 'vientiane', title: 'Vientiane', location: { lat: 17.9757, lng: 102.6331 } },
+      { id: 'yangon', title: 'Yangon', location: { lat: 16.8661, lng: 96.1951 } },
+    ] as GeoMarker[],
+  },
+};