@react-x11/components 0.8.0 → 0.10.0

package/src/maps/style.ts

@@ -23,6 +23,7 @@
 // the whole performance argument for the restriction: a dense tile has
 // twelve thousand features and eighteen layers, so anything computed per
 // layer is free and anything computed per feature is the frame.
+import type { MapIcon } from './icons.js';
 import type { FeatureValue } from './mvt.js';
 import { GeomType } from './mvt.js';
 import type { FeatureCursor } from './mvt.js';
@@ -151,6 +152,37 @@ export interface SymbolLayer extends LayerBase {
    * distance is where that line goes.
    */
   repeatDistance?: number;
+  /**
+   * A pictogram set on the point, with the text beside it — the bus that
+   * says "Lyons Ave/Yuille St" is a stop, not a street. The icon is centred
+   * on the feature and the text sits to its right; the two are placed, and
+   * give way, as one. Point labels only: a name along a street has no point
+   * to stand an icon on, and is set as though there were none.
+   *
+   * One icon per layer, like {@link rank} and for the same reason — a
+   * `filter` split says which features get which, exactly.
+   */
+  icon?: MapIcon;
+  /** Logical pixels across the icon's plate. 14 by default. */
+  iconSize?: Zoomed<number>;
+  /** The plate's colour. */
+  iconColor?: Zoomed<string>;
+  /** The pictogram's colour, over the plate. White by default. */
+  iconGlyphColor?: Zoomed<string>;
+  /**
+   * Move each point label into the polygon of `sourceLayer` it belongs to —
+   * a house number into its house. A point inside a polygon belongs to it;
+   * one outside, to the nearest polygon within `within` metres (15 by
+   * default). It moves only where it is the one point that polygon is
+   * claimed by, and then to the polygon's middle; every other point stays
+   * where the data put it. Absent, nothing moves.
+   *
+   * Worth having because address data is often not *on* its building: an
+   * address point sits in the lot, metres from the house, and a number
+   * drawn there reads as the garden's. On OpenStreetMap's tiles around
+   * Melbourne, 42% of address points were inside a building.
+   */
+  snapInto?: { sourceLayer: string; within?: number };
 }
 
 export type MapStyleLayer = FillLayer | LineLayer | CircleLayer | SymbolLayer;

package/src/maps/styles.ts

@@ -19,7 +19,14 @@
 // Every layer's `id` is stable, because that is what an application filters
 // on to hide one (`style.layers.filter((l) => l.id !== 'buildings')`) and
 // what a `<Map>` event names.
-import type { MapStyle, MapStyleLayer, Zoomed } from './style.js';
+import type { MapIcon } from './icons.js';
+import type {
+  MapFilter,
+  MapStyle,
+  MapStyleLayer,
+  SymbolLayer,
+  Zoomed,
+} from './style.js';
 
 /** The tags Shortbread puts a road's class in, grouped as a style wants
  *  them rather than as the schema lists them. */
@@ -108,6 +115,8 @@ export interface MapPalette {
   text: string;
   textMinor: string;
   halo: string;
+  /** The plate a public-transport stop's pictogram is set on. */
+  transit: string;
 }
 
 /** OSM Carto's hues, near enough that a user's eye reads the map as the one
@@ -135,6 +144,7 @@ export const LIGHT_PALETTE: MapPalette = {
   text: '#33322e',
   textMinor: '#6b6862',
   halo: 'rgba(255,255,255,0.85)',
+  transit: '#2a6fb8',
 };
 
 /** The dark counterpart. Desaturated rather than inverted: an inverted map
@@ -162,6 +172,7 @@ export const DARK_PALETTE: MapPalette = {
   text: '#d3d7de',
   textMinor: '#9299a3',
   halo: 'rgba(12,14,18,0.85)',
+  transit: '#3b78c4',
 };
 
 /** How wide a road class is, at each zoom. */
@@ -190,6 +201,16 @@ export interface ShortbreadStyleOptions {
   /** Leave building footprints out. They are the densest polygon layer at
    *  high zoom and the first thing to drop on a slow machine. */
   buildings?: boolean;
+  /**
+   * Set each house number inside its building (`SymbolLayer.snapInto` on
+   * the `house-numbers` layer), where the address data puts it in the lot
+   * beside the house. Off by default, and off means every number is exactly
+   * where the data says. A number moves only into a building that is its
+   * alone and within 15 m, so a duplex's two numbers, or one whose house is
+   * not mapped, stay put. Needs the footprints: with `buildings: false`
+   * there is nothing to set a number in, and nothing moves.
+   */
+  snapBuildingNumbers?: boolean;
 }
 
 /**
@@ -593,11 +614,29 @@ export function shortbreadStyle(
         // a street's name is what they read once they are oriented.
         rank: 20,
       },
+      // Public transport, a layer per pictogram, which Shortbread's `kind`
+      // says. A stop's name alone reads as a street's: "Lyons Ave/Yuille
+      // St" is a bus stop, and only the bus says so.
+      ...SHORTBREAD_STOPS.map((stop) =>
+        stopLayer(
+          p,
+          name,
+          stop.id,
+          'public_transport',
+          ['in', 'kind', ...stop.kinds],
+          stop.icon,
+          stop.minZoom,
+          stop.rank,
+        ),
+      ),
       {
+        // What has no pictogram here — a helipad, a lift station — named
+        // as every stop used to be.
         id: 'transport-labels',
         type: 'symbol',
         sourceLayer: 'public_transport',
         minZoom: 15,
+        filter: ['!in', 'kind', ...SHORTBREAD_STOPS.flatMap((s) => s.kinds)],
         textField: name,
         textColor: p.textMinor,
         textHaloColor: p.halo,
@@ -605,6 +644,7 @@ export function shortbreadStyle(
         textSize: 10,
         rank: 10,
       },
+      houseNumbers(p, 'addresses', snapInto(options, 'buildings')),
     );
   }
 
@@ -618,6 +658,121 @@ function scaleWidth(base: Zoomed<number>, add: number): Zoomed<number> {
   return { stops: base.stops.map(([z, v]) => [z, v + add] as const) };
 }
 
+/** Shortbread's public-transport kinds that have a pictogram, and the zoom
+ *  and rank a stop of each is named at: an airport among the towns, a
+ *  station among the suburbs, a bus stop under the streets. */
+const SHORTBREAD_STOPS: readonly {
+  id: string;
+  kinds: readonly string[];
+  icon: MapIcon;
+  minZoom: number;
+  rank: number;
+}[] = [
+  {
+    id: 'transport-airport',
+    kinds: ['aerodrome'],
+    icon: 'airport',
+    minZoom: 11,
+    rank: 70,
+  },
+  {
+    id: 'transport-rail',
+    kinds: ['station', 'halt'],
+    icon: 'train',
+    minZoom: 13,
+    rank: 50,
+  },
+  {
+    id: 'transport-ferry',
+    kinds: ['ferry_terminal'],
+    icon: 'ferry',
+    minZoom: 13,
+    rank: 45,
+  },
+  {
+    id: 'transport-tram',
+    kinds: ['tram_stop'],
+    icon: 'tram',
+    minZoom: 15,
+    rank: 12,
+  },
+  {
+    id: 'transport-bus',
+    kinds: ['bus_stop', 'bus_station'],
+    icon: 'bus',
+    minZoom: 15,
+    rank: 10,
+  },
+];
+
+/** A public-transport stop: its pictogram on the point, its name beside
+ *  it. The same layer over either schema, less where the schema keeps it. */
+function stopLayer(
+  p: MapPalette,
+  name: string,
+  id: string,
+  sourceLayer: string,
+  filter: MapFilter | undefined,
+  icon: MapIcon,
+  minZoom: number,
+  rank: number,
+): SymbolLayer {
+  return {
+    id,
+    type: 'symbol',
+    sourceLayer,
+    minZoom,
+    filter,
+    textField: name,
+    textColor: p.textMinor,
+    textHaloColor: p.halo,
+    textHaloWidth: 1,
+    textSize: 10,
+    icon,
+    iconColor: p.transit,
+    rank,
+  };
+}
+
+/** The footprints house numbers snap into, where the options ask for it and
+ *  the footprints are there to snap into. */
+function snapInto(
+  options: ShortbreadStyleOptions,
+  buildings: string,
+): string | null {
+  return options.snapBuildingNumbers && options.buildings !== false
+    ? buildings
+    : null;
+}
+
+/**
+ * House numbers, once a house is big enough on screen to carry one: from
+ * zoom 18, which on this map's 512-pixel world is a 256-pixel map's 19 —
+ * where Google Maps sets them.
+ */
+function houseNumbers(
+  p: MapPalette,
+  sourceLayer: string,
+  buildings: string | null,
+): SymbolLayer {
+  return {
+    id: 'house-numbers',
+    type: 'symbol',
+    sourceLayer,
+    ...(buildings ? { snapInto: { sourceLayer: buildings } } : {}),
+    minZoom: 18,
+    textField: 'housenumber',
+    textColor: p.textMinor,
+    textHaloColor: p.halo,
+    textHaloWidth: 1,
+    textSize: 10,
+    // Under every other name, and held to no repeat distance: "2" is the
+    // number of a house on every street there is.
+    rank: 0,
+    repeatDistance: 0,
+  };
+}
+
 // --- OpenMapTiles -----------------------------------------------------------
 
 /**
@@ -682,9 +837,6 @@ export function openMapTilesStyle(
   };
   const name = options.nameField ?? 'name';
   const layers: MapStyleLayer[] = [
-    // One `water` layer for everything wet, with `class` telling the sea
-    // from a lake — where Shortbread has `ocean` and `water_polygons`.
-    { id: 'ocean', type: 'fill', sourceLayer: 'water', color: p.water },
     {
       id: 'landuse-green',
       type: 'fill',
@@ -708,6 +860,18 @@ export function openMapTilesStyle(
       filter: ['in', 'class', ...OMT_SITES],
       color: p.site,
     },
+    // One `water` layer for everything wet, with `class` telling the sea
+    // from a lake — where Shortbread has `ocean` and `water_polygons`.
+    //
+    // Drawn **over** the green and the built-up, as Shortbread's
+    // `water_polygons` are and as OSM Bright and OSM Liberty draw it. This
+    // schema has no land polygons — land is the background and the sea is
+    // cut out of it — and its `park` layer carries protected areas, which
+    // are often mostly sea: the Pearl River Estuary's dolphin reserve is a
+    // rectangle of water west of Lantau. Drawn first, the sea went under
+    // every park that reaches into it, and under every one with a lake in
+    // it.
+    { id: 'ocean', type: 'fill', sourceLayer: 'water', color: p.water },
     {
       id: 'water-lines',
       type: 'line',
@@ -1033,6 +1197,53 @@ export function openMapTilesStyle(
         textSize: 11,
         rank: 20,
       },
+      // Public transport, from `poi`'s classes — OpenMapTiles has no layer
+      // of its own for it — and airports from theirs.
+      stopLayer(
+        p,
+        name,
+        'transport-airport',
+        'aerodrome_label',
+        undefined,
+        'airport',
+        11,
+        70,
+      ),
+      stopLayer(
+        p,
+        name,
+        'transport-rail',
+        'poi',
+        [
+          'all',
+          ['==', 'class', 'railway'],
+          ['in', 'subclass', 'station', 'halt'],
+        ],
+        'train',
+        13,
+        50,
+      ),
+      stopLayer(
+        p,
+        name,
+        'transport-tram',
+        'poi',
+        ['==', 'subclass', 'tram_stop'],
+        'tram',
+        15,
+        12,
+      ),
+      stopLayer(
+        p,
+        name,
+        'transport-bus',
+        'poi',
+        ['==', 'class', 'bus'],
+        'bus',
+        15,
+        10,
+      ),
+      houseNumbers(p, 'housenumber', snapInto(options, 'building')),
     );
   }
 

package/src/maps/theme.ts

@@ -0,0 +1,51 @@
+// The theme's say in how a map looks: which of the default style's palettes
+// it gets, and the colours markers, overlays and the attribution fall back
+// to. Both renderers read the theme through these, so a map in a dark
+// application is dark whichever of them draws it.
+import type { OverlayPalette } from './overlay.js';
+import type { MapStyle } from './style.js';
+import { shortbreadStyle } from './styles.js';
+
+const defaults = new Map<boolean, MapStyle>();
+
+/**
+ * The style a map with no `mapStyle` is drawn in: `shortbreadStyle()` in the
+ * theme's light or dark palette. Made once each — a style's identity is
+ * what decides whether the GL renderer rebuilds its tiles.
+ */
+export function defaultStyleFor(dark: boolean): MapStyle {
+  let style = defaults.get(dark);
+  if (!style) {
+    style = shortbreadStyle({ dark });
+    defaults.set(dark, style);
+  }
+  return style;
+}
+
+/**
+ * Whether a theme is dark — the luminance of the surface the map sits on,
+ * the same reading `src/code-editor/`'s token themes make, rather than a flag
+ * nobody sets. A map inside a dark application that stays light is the thing
+ * everyone notices first.
+ */
+export function isDarkTheme(theme: unknown): boolean {
+  const background = (theme as Record<string, unknown> | undefined)?.background;
+  if (typeof background !== 'string') return false;
+  const hex = background.trim();
+  if (!hex.startsWith('#') || hex.length < 7) return false;
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b < 128;
+}
+
+/** The colours a marker, an overlay and the attribution use where they do
+ *  not name one. */
+export function overlayPalette(theme: unknown): OverlayPalette {
+  const t = theme as Record<string, unknown> | undefined;
+  return {
+    accent: (t?.accent as string) ?? '#2d6cdf',
+    background: (t?.background as string) ?? '#ffffff',
+    text: (t?.text as string) ?? '#111111',
+  };
+}