@spatika/react 1.4.0 → 1.5.0

package/src/lib/geo.test.ts

@@ -1,42 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { featureId, fitFeatures, geoPath, mercator } from "./geo";
-
-describe("geo", () => {
-  it("projects the equator to the mercator midpoint", () => {
-    const [x, y] = mercator([0, 0]);
-    expect(x).toBeCloseTo(0.5);
-    expect(y).toBeCloseTo(0.5);
-  });
-
-  it("builds a closed polygon path fitted to a viewport", () => {
-    const features = [
-      {
-        type: "Feature" as const,
-        id: "box",
-        properties: { name: "Box" },
-        geometry: {
-          type: "Polygon" as const,
-          coordinates: [
-            [
-              [0, 0],
-              [10, 0],
-              [10, 10],
-              [0, 10],
-              [0, 0],
-            ],
-          ],
-        },
-      },
-    ];
-    const project = fitFeatures(features, 200, 100, 10);
-    const d = geoPath(features[0]!.geometry, project);
-    expect(d.startsWith("M")).toBe(true);
-    expect(d.includes("Z")).toBe(true);
-    expect(featureId(features[0]!)).toBe("box");
-  });
-
-  it("projects a point to a move-to command", () => {
-    const d = geoPath({ type: "Point", coordinates: [0, 0] }, mercator);
-    expect(d.startsWith("M")).toBe(true);
-  });
-});

package/src/lib/geo.ts

@@ -1,138 +0,0 @@
-/**
- * Tiny GeoJSON helpers — Mercator / equirectangular, no d3-geo.
- */
-
-export type GeoPosition = [number, number];
-
-export type GeoJsonGeometry =
-  | { type: "Polygon"; coordinates: GeoPosition[][] }
-  | { type: "MultiPolygon"; coordinates: GeoPosition[][][] }
-  | { type: "Point"; coordinates: GeoPosition }
-  | { type: "LineString"; coordinates: GeoPosition[] }
-  | { type: "MultiLineString"; coordinates: GeoPosition[][] };
-
-export type GeoJsonFeature = {
-  type: "Feature";
-  id?: string | number;
-  properties?: Record<string, unknown> | null;
-  geometry: GeoJsonGeometry | null;
-};
-
-export type GeoJsonFeatureCollection = {
-  type: "FeatureCollection";
-  features: GeoJsonFeature[];
-};
-
-export type GeoProjectionKind = "mercator" | "equirectangular";
-
-export function mercator([lon, lat]: GeoPosition): [number, number] {
-  const x = (lon + 180) / 360;
-  const clamped = Math.min(85.051129, Math.max(-85.051129, lat));
-  const sin = Math.sin((clamped * Math.PI) / 180);
-  const y = 0.5 - Math.log((1 + sin) / (1 - sin)) / (4 * Math.PI);
-  return [x, y];
-}
-
-export function equirectangular([lon, lat]: GeoPosition): [number, number] {
-  return [(lon + 180) / 360, (90 - lat) / 180];
-}
-
-export function projectLonLat(pos: GeoPosition, kind: GeoProjectionKind): [number, number] {
-  return kind === "equirectangular" ? equirectangular(pos) : mercator(pos);
-}
-
-export function featureId(feature: GeoJsonFeature, idProperty = "id"): string {
-  if (feature.id != null) return String(feature.id);
-  const value = feature.properties?.[idProperty] ?? feature.properties?.name;
-  return value != null ? String(value) : "";
-}
-
-function walkGeometry(geometry: GeoJsonGeometry, visit: (pos: GeoPosition) => void) {
-  if (geometry.type === "Point") {
-    visit(geometry.coordinates);
-    return;
-  }
-  if (geometry.type === "LineString") {
-    geometry.coordinates.forEach(visit);
-    return;
-  }
-  if (geometry.type === "MultiLineString") {
-    geometry.coordinates.forEach((line) => line.forEach(visit));
-    return;
-  }
-  if (geometry.type === "Polygon") {
-    geometry.coordinates.forEach((ring) => ring.forEach(visit));
-    return;
-  }
-  geometry.coordinates.forEach((poly) => poly.forEach((ring) => ring.forEach(visit)));
-}
-
-export function walkFeatures(features: GeoJsonFeature[], visit: (pos: GeoPosition) => void) {
-  for (const feature of features) {
-    if (feature.geometry) walkGeometry(feature.geometry, visit);
-  }
-}
-
-function ringPath(ring: GeoPosition[], project: (pos: GeoPosition) => [number, number]): string {
-  if (!ring.length) return "";
-  const pts = ring.map(project);
-  return `M${pts.map(([x, y]) => `${x} ${y}`).join("L")}Z`;
-}
-
-function linePath(line: GeoPosition[], project: (pos: GeoPosition) => [number, number]): string {
-  if (!line.length) return "";
-  const pts = line.map(project);
-  return `M${pts.map(([x, y]) => `${x} ${y}`).join("L")}`;
-}
-
-export function geoPath(
-  geometry: GeoJsonGeometry,
-  project: (pos: GeoPosition) => [number, number],
-): string {
-  if (geometry.type === "Polygon") {
-    return geometry.coordinates.map((ring) => ringPath(ring, project)).join(" ");
-  }
-  if (geometry.type === "MultiPolygon") {
-    return geometry.coordinates
-      .map((poly) => poly.map((ring) => ringPath(ring, project)).join(" "))
-      .join(" ");
-  }
-  if (geometry.type === "LineString") return linePath(geometry.coordinates, project);
-  if (geometry.type === "MultiLineString") {
-    return geometry.coordinates.map((line) => linePath(line, project)).join(" ");
-  }
-  const [x, y] = project(geometry.coordinates);
-  return `M${x} ${y}m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0`;
-}
-
-export function fitFeatures(
-  features: GeoJsonFeature[],
-  width: number,
-  height: number,
-  padding: number,
-  kind: GeoProjectionKind = "mercator",
-): (pos: GeoPosition) => [number, number] {
-  const raw = (pos: GeoPosition) => projectLonLat(pos, kind);
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  walkFeatures(features, (pos) => {
-    const [x, y] = raw(pos);
-    minX = Math.min(minX, x);
-    minY = Math.min(minY, y);
-    maxX = Math.max(maxX, x);
-    maxY = Math.max(maxY, y);
-  });
-  const bw = Math.max(1e-6, maxX - minX);
-  const bh = Math.max(1e-6, maxY - minY);
-  const innerW = Math.max(1, width - padding * 2);
-  const innerH = Math.max(1, height - padding * 2);
-  const scale = Math.min(innerW / bw, innerH / bh);
-  const tx = padding + (innerW - bw * scale) / 2;
-  const ty = padding + (innerH - bh * scale) / 2;
-  return (pos) => {
-    const [x, y] = raw(pos);
-    return [tx + (x - minX) * scale, ty + (y - minY) * scale];
-  };
-}

package/src/lib/iso.test.ts

@@ -1,22 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { ellipseSlicePath, isoBoxFaces, isoPoint } from "./iso";
-
-describe("iso", () => {
-  it("projects isometric points with y up", () => {
-    const origin = isoPoint(0, 0, 0, 40, 80);
-    const raised = isoPoint(0, 10, 0, 40, 80);
-    expect(raised.y).toBeLessThan(origin.y);
-  });
-
-  it("emits three faces for a box", () => {
-    const faces = isoBoxFaces(0, 0, 0, 10, 20, 8, 40, 80);
-    expect(faces.front.startsWith("M")).toBe(true);
-    expect(faces.top).not.toEqual(faces.front);
-    expect(faces.side).not.toEqual(faces.top);
-  });
-
-  it("draws an elliptical pie slice", () => {
-    const d = ellipseSlicePath(50, 40, 30, 12, 0, 90);
-    expect(d.includes("A30 12")).toBe(true);
-  });
-});

package/src/lib/iso.ts

@@ -1,102 +0,0 @@
-/**
- * Isometric 2.5D helpers for SVG bar and pie charts.
- */
-
-const COS = Math.cos(Math.PI / 6);
-const SIN = Math.sin(Math.PI / 6);
-
-export function isoPoint(
-  x: number,
-  y: number,
-  z: number,
-  originX: number,
-  originY: number,
-): { x: number; y: number } {
-  return {
-    x: originX + (x - z) * COS,
-    y: originY - y + (x + z) * SIN,
-  };
-}
-
-function poly(points: Array<{ x: number; y: number }>): string {
-  if (!points.length) return "";
-  return `M${points.map((p) => `${p.x} ${p.y}`).join("L")}Z`;
-}
-
-export type IsoBoxFaces = {
-  front: string;
-  top: string;
-  side: string;
-};
-
-/** Axis-aligned box: x/z on the ground plane, y up. */
-export function isoBoxFaces(
-  x: number,
-  y0: number,
-  z: number,
-  w: number,
-  h: number,
-  d: number,
-  originX: number,
-  originY: number,
-): IsoBoxFaces {
-  const p = (px: number, py: number, pz: number) => isoPoint(px, py, pz, originX, originY);
-  const a = p(x, y0, z);
-  const b = p(x + w, y0, z);
-  const c = p(x + w, y0 + h, z);
-  const e = p(x, y0 + h, z);
-  const f = p(x + w, y0, z + d);
-  const g = p(x + w, y0 + h, z + d);
-  const k = p(x, y0 + h, z + d);
-  return {
-    front: poly([a, b, c, e]),
-    top: poly([e, c, g, k]),
-    side: poly([b, f, g, c]),
-  };
-}
-
-export function ellipsePoint(
-  cx: number,
-  cy: number,
-  rx: number,
-  ry: number,
-  angleDeg: number,
-): { x: number; y: number } {
-  const rad = ((angleDeg - 90) * Math.PI) / 180;
-  return { x: cx + rx * Math.cos(rad), y: cy + ry * Math.sin(rad) };
-}
-
-export function ellipseSlicePath(
-  cx: number,
-  cy: number,
-  rx: number,
-  ry: number,
-  startAngle: number,
-  endAngle: number,
-): string {
-  const start = ellipsePoint(cx, cy, rx, ry, startAngle);
-  const end = ellipsePoint(cx, cy, rx, ry, endAngle);
-  const sweep = ((endAngle - startAngle) % 360 + 360) % 360;
-  if (sweep <= 0) return "";
-  const large = sweep > 180 ? 1 : 0;
-  return `M${cx} ${cy} L${start.x} ${start.y} A${rx} ${ry} 0 ${large} 1 ${end.x} ${end.y} Z`;
-}
-
-export function ellipseWallPath(
-  cx: number,
-  cy: number,
-  rx: number,
-  ry: number,
-  startAngle: number,
-  endAngle: number,
-  thickness: number,
-): string {
-  const top0 = ellipsePoint(cx, cy, rx, ry, startAngle);
-  const top1 = ellipsePoint(cx, cy, rx, ry, endAngle);
-  const bot0 = { x: top0.x, y: top0.y + thickness };
-  const bot1 = { x: top1.x, y: top1.y + thickness };
-  const sweep = ((endAngle - startAngle) % 360 + 360) % 360;
-  if (sweep <= 0) return "";
-  const large = sweep > 180 ? 1 : 0;
-  return `M${bot0.x} ${bot0.y} L${top0.x} ${top0.y} A${rx} ${ry} 0 ${large} 1 ${top1.x} ${top1.y} L${bot1.x} ${bot1.y} A${rx} ${ry} 0 ${large} 0 ${bot0.x} ${bot0.y} Z`;
-}

package/src/lib/webgl-scatter.test.ts

@@ -1,36 +0,0 @@
-import { describe, expect, it } from "vitest";
-import {
-  nearestScatterHit,
-  parseCssColor,
-  shouldUseWebGL,
-  WEBGL_AUTO_THRESHOLD,
-} from "./webgl-scatter";
-
-describe("webgl scatter helpers", () => {
-  it("parses hex and rgb colors", () => {
-    expect(parseCssColor("#ff0000")).toEqual([1, 0, 0, 1]);
-    expect(parseCssColor("rgb(0, 128, 255)")).toEqual([0, 128 / 255, 1, 1]);
-    expect(parseCssColor("not-a-color")).toBeNull();
-  });
-
-  it("selects webgl for auto clouds above the threshold", () => {
-    expect(shouldUseWebGL("svg", 10_000)).toBe(false);
-    expect(shouldUseWebGL("webgl", 3)).toBe(true);
-    expect(shouldUseWebGL("auto", WEBGL_AUTO_THRESHOLD)).toBe(true);
-    expect(shouldUseWebGL("auto", 10)).toBe(false);
-  });
-
-  it("finds the nearest point within the hit radius", () => {
-    const hit = nearestScatterHit(
-      [
-        { x: 10, y: 10, r: 4, seriesIndex: 0, pointIndex: 0 },
-        { x: 40, y: 40, r: 4, seriesIndex: 1, pointIndex: 2 },
-      ],
-      41,
-      39,
-    );
-    expect(hit?.seriesIndex).toBe(1);
-    expect(hit?.pointIndex).toBe(2);
-    expect(nearestScatterHit([{ x: 0, y: 0, r: 2, seriesIndex: 0, pointIndex: 0 }], 80, 80)).toBeNull();
-  });
-});

package/src/lib/webgl-scatter.ts

@@ -1,230 +0,0 @@
-/**
- * Raw WebGL scatter renderer — no three.js.
- * Canvas sits behind SVG axes; hit-testing stays on the CPU.
- */
-
-export type ScatterRenderer = "svg" | "webgl" | "auto";
-
-export const WEBGL_AUTO_THRESHOLD = 2000;
-
-export function shouldUseWebGL(renderer: ScatterRenderer | undefined, pointCount: number): boolean {
-  if (renderer === "webgl") return true;
-  if (renderer === "auto") return pointCount >= WEBGL_AUTO_THRESHOLD;
-  return false;
-}
-
-export type Rgba = [number, number, number, number];
-
-export function parseCssColor(css: string): Rgba | null {
-  const hex = css.trim();
-  const hexMatch = /^#([0-9a-f]{3,8})$/i.exec(hex);
-  if (hexMatch) {
-    let h = hexMatch[1]!;
-    if (h.length === 3 || h.length === 4) h = [...h].map((c) => c + c).join("");
-    const n = Number.parseInt(h.slice(0, 6), 16);
-    const a = h.length === 8 ? Number.parseInt(h.slice(6, 8), 16) / 255 : 1;
-    return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255, a];
-  }
-  const rgb = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/i.exec(hex);
-  if (rgb) {
-    return [
-      Number(rgb[1]) / 255,
-      Number(rgb[2]) / 255,
-      Number(rgb[3]) / 255,
-      rgb[4] != null ? Number(rgb[4]) : 1,
-    ];
-  }
-  return null;
-}
-
-export function resolveCssColor(color: string, el?: Element | null): Rgba {
-  const parsed = parseCssColor(color);
-  if (parsed) return parsed;
-  if (typeof document === "undefined" || !el) return [0.35, 0.55, 0.95, 1];
-  const probe = document.createElement("span");
-  probe.style.color = color;
-  probe.style.position = "absolute";
-  probe.style.pointerEvents = "none";
-  probe.style.opacity = "0";
-  el.appendChild(probe);
-  const computed = getComputedStyle(probe).color;
-  probe.remove();
-  return parseCssColor(computed) ?? [0.35, 0.55, 0.95, 1];
-}
-
-export type ScatterHitCandidate = {
-  x: number;
-  y: number;
-  r: number;
-  seriesIndex: number;
-  pointIndex: number;
-};
-
-export function nearestScatterHit(
-  candidates: ScatterHitCandidate[],
-  px: number,
-  py: number,
-  pad = 4,
-): ScatterHitCandidate | null {
-  let best: ScatterHitCandidate | null = null;
-  let bestDist = Infinity;
-  for (const item of candidates) {
-    const dx = item.x - px;
-    const dy = item.y - py;
-    const dist = Math.hypot(dx, dy);
-    if (dist <= item.r + pad && dist < bestDist) {
-      best = item;
-      bestDist = dist;
-    }
-  }
-  return best;
-}
-
-export function svgPointerPosition(
-  svg: SVGSVGElement,
-  clientX: number,
-  clientY: number,
-  width: number,
-  height: number,
-): { x: number; y: number } {
-  const bounds = svg.getBoundingClientRect();
-  const w = bounds.width || width;
-  const h = bounds.height || height;
-  return {
-    x: ((clientX - bounds.left) / w) * width,
-    y: ((clientY - bounds.top) / h) * height,
-  };
-}
-
-const VS = `
-attribute vec2 a_position;
-attribute float a_size;
-uniform vec2 u_resolution;
-uniform float u_dpr;
-void main() {
-  vec2 zeroToOne = a_position / u_resolution;
-  vec2 clip = zeroToOne * 2.0 - 1.0;
-  gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
-  gl_PointSize = max(1.0, a_size * u_dpr);
-}
-`;
-
-const FS = `
-precision mediump float;
-uniform vec4 u_color;
-void main() {
-  vec2 c = gl_PointCoord - vec2(0.5);
-  if (dot(c, c) > 0.25) discard;
-  gl_FragColor = u_color;
-}
-`;
-
-export type ScatterGL = {
-  gl: WebGLRenderingContext;
-  program: WebGLProgram;
-  buffer: WebGLBuffer;
-  aPosition: number;
-  aSize: number;
-  uResolution: WebGLUniformLocation | null;
-  uDpr: WebGLUniformLocation | null;
-  uColor: WebGLUniformLocation | null;
-};
-
-function compile(gl: WebGLRenderingContext, type: number, source: string): WebGLShader | null {
-  const shader = gl.createShader(type);
-  if (!shader) return null;
-  gl.shaderSource(shader, source);
-  gl.compileShader(shader);
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    gl.deleteShader(shader);
-    return null;
-  }
-  return shader;
-}
-
-export function createScatterGL(canvas: HTMLCanvasElement): ScatterGL | null {
-  const gl = canvas.getContext("webgl", {
-    alpha: true,
-    antialias: true,
-    premultipliedAlpha: true,
-  });
-  if (!gl) return null;
-  const vs = compile(gl, gl.VERTEX_SHADER, VS);
-  const fs = compile(gl, gl.FRAGMENT_SHADER, FS);
-  if (!vs || !fs) return null;
-  const program = gl.createProgram();
-  if (!program) return null;
-  gl.attachShader(program, vs);
-  gl.attachShader(program, fs);
-  gl.linkProgram(program);
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return null;
-  const buffer = gl.createBuffer();
-  if (!buffer) return null;
-  gl.enable(gl.BLEND);
-  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-  return {
-    gl,
-    program,
-    buffer,
-    aPosition: gl.getAttribLocation(program, "a_position"),
-    aSize: gl.getAttribLocation(program, "a_size"),
-    uResolution: gl.getUniformLocation(program, "u_resolution"),
-    uDpr: gl.getUniformLocation(program, "u_dpr"),
-    uColor: gl.getUniformLocation(program, "u_color"),
-  };
-}
-
-export type ScatterGLSeries = {
-  positions: Array<{ x: number; y: number; size: number }>;
-  color: string;
-};
-
-export function drawScatterGL(
-  gpu: ScatterGL,
-  canvas: HTMLCanvasElement,
-  width: number,
-  height: number,
-  series: ScatterGLSeries[],
-): void {
-  const dpr = typeof window !== "undefined" ? Math.min(window.devicePixelRatio || 1, 2) : 1;
-  const pixelW = Math.max(1, Math.round(width * dpr));
-  const pixelH = Math.max(1, Math.round(height * dpr));
-  if (canvas.width !== pixelW) canvas.width = pixelW;
-  if (canvas.height !== pixelH) canvas.height = pixelH;
-  canvas.style.width = `${width}px`;
-  canvas.style.height = `${height}px`;
-
-  const { gl } = gpu;
-  gl.viewport(0, 0, pixelW, pixelH);
-  gl.clearColor(0, 0, 0, 0);
-  gl.clear(gl.COLOR_BUFFER_BIT);
-  gl.useProgram(gpu.program);
-  gl.uniform2f(gpu.uResolution, width, height);
-  gl.uniform1f(gpu.uDpr, dpr);
-  gl.bindBuffer(gl.ARRAY_BUFFER, gpu.buffer);
-
-  const stride = 3 * 4;
-  for (const item of series) {
-    if (!item.positions.length) continue;
-    const data = new Float32Array(item.positions.length * 3);
-    item.positions.forEach((point, i) => {
-      data[i * 3] = point.x;
-      data[i * 3 + 1] = point.y;
-      data[i * 3 + 2] = point.size;
-    });
-    gl.bufferData(gl.ARRAY_BUFFER, data, gl.DYNAMIC_DRAW);
-    gl.enableVertexAttribArray(gpu.aPosition);
-    gl.vertexAttribPointer(gpu.aPosition, 2, gl.FLOAT, false, stride, 0);
-    gl.enableVertexAttribArray(gpu.aSize);
-    gl.vertexAttribPointer(gpu.aSize, 1, gl.FLOAT, false, stride, 8);
-    const [r, g, b, a] = resolveCssColor(item.color, canvas.parentElement ?? canvas);
-    gl.uniform4f(gpu.uColor, r, g, b, a);
-    gl.drawArrays(gl.POINTS, 0, item.positions.length);
-  }
-}
-
-export function destroyScatterGL(gpu: ScatterGL): void {
-  const { gl } = gpu;
-  gl.deleteBuffer(gpu.buffer);
-  gl.deleteProgram(gpu.program);
-}