canvas-globe 0.1.0 → 0.1.2

package/src/media.js

@@ -1,160 +1,160 @@
-/**
- * Media sources that can be painted inside a country's outline: a still, an
- * animated GIF, a video, another canvas, or a live MediaStream.
- *
- * Everything is drawn with `drawImage`, so the only real work is keeping a
- * drawable element alive and knowing whether it needs a redraw each frame.
- */
-
-const VIDEO_RE = /\.(mp4|webm|ogv|mov|m4v)(\?|#|$)/i;
-const GIF_RE = /\.gif(\?|#|$)/i;
-
-const isDrawable = (v) =>
-  !!v && typeof v === "object" &&
-  (v.nodeName === "IMG" || v.nodeName === "VIDEO" || v.nodeName === "CANVAS" ||
-    (typeof ImageBitmap !== "undefined" && v instanceof ImageBitmap) ||
-    (typeof OffscreenCanvas !== "undefined" && v instanceof OffscreenCanvas));
-
-const isStream = (v) => typeof MediaStream !== "undefined" && v instanceof MediaStream;
-
-/** Keeps GIFs advancing: browsers only animate images attached to the document. */
-const parkOffscreen = (el) => {
-  if (typeof document === "undefined") return;
-  el.style.cssText = "position:fixed;right:0;bottom:0;width:1px;height:1px;opacity:.01;pointer-events:none;z-index:-1";
-  document.body.appendChild(el);
-};
-
-export class Media {
-  constructor(spec, onReady) {
-    const config = spec && typeof spec === "object" && "src" in spec && !isDrawable(spec) ? spec : { src: spec };
-    this.fit = config.fit || "cover";
-    this.opacity = config.opacity ?? 1;
-    this.blend = config.blend || null;
-    this.scale = config.scale ?? 1;
-    this.offset = config.offset || [0, 0];
-    this.ready = false;
-    this.error = null;
-    this._owned = false;
-    this._onReady = onReady;
-    this._load(config);
-  }
-
-  _load(config) {
-    const src = config.src;
-    if (isDrawable(src)) {
-      this.element = src;
-      this.ready = true;
-      this._kind = src.nodeName === "VIDEO" ? "video" : "static";
-      return;
-    }
-    if (isStream(src)) {
-      this.element = this._video(config);
-      if (this.element) this.element.srcObject = src;
-      this._kind = "video";
-      return;
-    }
-    if (typeof src !== "string") {
-      this.error = new Error("canvas-globe: unsupported media source");
-      return;
-    }
-    if (config.type === "video" || (config.type !== "image" && VIDEO_RE.test(src))) {
-      this.element = this._video(config);
-      if (this.element) this.element.src = src;
-      this._kind = "video";
-      return;
-    }
-    if (typeof Image === "undefined") return;
-    const img = new Image();
-    img.crossOrigin = config.crossOrigin ?? "anonymous";
-    img.onload = () => {
-      this.ready = true;
-      this._onReady?.(this);
-    };
-    img.onerror = () => {
-      this.error = new Error(`canvas-globe: could not load "${src}"`);
-      this._onReady?.(this);
-    };
-    img.src = src;
-    this.element = img;
-    this._owned = true;
-    this._kind = GIF_RE.test(src) ? "gif" : "static";
-    if (this._kind === "gif") parkOffscreen(img);
-  }
-
-  _video(config) {
-    if (typeof document === "undefined") {
-      this.error = new Error("canvas-globe: video media needs a DOM");
-      return null;
-    }
-    const el = document.createElement("video");
-    el.muted = config.muted !== false;
-    el.loop = config.loop !== false;
-    el.autoplay = true;
-    el.playsInline = true;
-    el.crossOrigin = config.crossOrigin ?? "anonymous";
-    el.oncanplay = () => {
-      this.ready = true;
-      this._onReady?.(this);
-    };
-    el.onerror = () => {
-      this.error = new Error("canvas-globe: video could not be played");
-      this._onReady?.(this);
-    };
-    this._owned = true;
-    parkOffscreen(el);
-    el.play?.().catch(() => {});
-    return el;
-  }
-
-  /** Natural pixel size of the current frame. */
-  size() {
-    const el = this.element;
-    if (!el) return null;
-    const w = el.videoWidth || el.naturalWidth || el.width;
-    const h = el.videoHeight || el.naturalHeight || el.height;
-    return w && h ? [w, h] : null;
-  }
-
-  /** True when the source changes on its own and needs a redraw every frame. */
-  get animated() {
-    if (!this.element) return false;
-    if (this._kind === "gif") return true;
-    return this._kind === "video" && !this.element.paused && !this.element.ended;
-  }
-
-  destroy() {
-    if (!this._owned || !this.element) return;
-    if (this._kind === "video") {
-      this.element.pause?.();
-      this.element.srcObject = null;
-      this.element.removeAttribute("src");
-    }
-    this.element.remove?.();
-    this.element = null;
-    this.ready = false;
-  }
-}
-
-/**
- * Draws media into a screen rect the way CSS `object-fit` would.
- * The caller is expected to have clipped to the target shape already.
- */
-export function drawFitted(ctx, media, box) {
-  const size = media.size();
-  if (!size) return false;
-  const [mw, mh] = size;
-  const [x, y, w, h] = box;
-  if (w <= 0 || h <= 0) return false;
-  let scale;
-  if (media.fit === "contain") scale = Math.min(w / mw, h / mh);
-  else if (media.fit === "fill") scale = null;
-  else scale = Math.max(w / mw, h / mh);
-  const k = media.scale || 1;
-  if (scale === null) {
-    ctx.drawImage(media.element, x, y, w, h);
-    return true;
-  }
-  const dw = mw * scale * k, dh = mh * scale * k;
-  ctx.drawImage(media.element, x + (w - dw) / 2 + media.offset[0], y + (h - dh) / 2 + media.offset[1], dw, dh);
-  return true;
-}
+/**
+ * Media sources that can be painted inside a country's outline: a still, an
+ * animated GIF, a video, another canvas, or a live MediaStream.
+ *
+ * Everything is drawn with `drawImage`, so the only real work is keeping a
+ * drawable element alive and knowing whether it needs a redraw each frame.
+ */
+
+const VIDEO_RE = /\.(mp4|webm|ogv|mov|m4v)(\?|#|$)/i;
+const GIF_RE = /\.gif(\?|#|$)/i;
+
+const isDrawable = (v) =>
+  !!v && typeof v === "object" &&
+  (v.nodeName === "IMG" || v.nodeName === "VIDEO" || v.nodeName === "CANVAS" ||
+    (typeof ImageBitmap !== "undefined" && v instanceof ImageBitmap) ||
+    (typeof OffscreenCanvas !== "undefined" && v instanceof OffscreenCanvas));
+
+const isStream = (v) => typeof MediaStream !== "undefined" && v instanceof MediaStream;
+
+/** Keeps GIFs advancing: browsers only animate images attached to the document. */
+const parkOffscreen = (el) => {
+  if (typeof document === "undefined") return;
+  el.style.cssText = "position:fixed;right:0;bottom:0;width:1px;height:1px;opacity:.01;pointer-events:none;z-index:-1";
+  document.body.appendChild(el);
+};
+
+export class Media {
+  constructor(spec, onReady) {
+    const config = spec && typeof spec === "object" && "src" in spec && !isDrawable(spec) ? spec : { src: spec };
+    this.fit = config.fit || "cover";
+    this.opacity = config.opacity ?? 1;
+    this.blend = config.blend || null;
+    this.scale = config.scale ?? 1;
+    this.offset = config.offset || [0, 0];
+    this.ready = false;
+    this.error = null;
+    this._owned = false;
+    this._onReady = onReady;
+    this._load(config);
+  }
+
+  _load(config) {
+    const src = config.src;
+    if (isDrawable(src)) {
+      this.element = src;
+      this.ready = true;
+      this._kind = src.nodeName === "VIDEO" ? "video" : "static";
+      return;
+    }
+    if (isStream(src)) {
+      this.element = this._video(config);
+      if (this.element) this.element.srcObject = src;
+      this._kind = "video";
+      return;
+    }
+    if (typeof src !== "string") {
+      this.error = new Error("canvas-globe: unsupported media source");
+      return;
+    }
+    if (config.type === "video" || (config.type !== "image" && VIDEO_RE.test(src))) {
+      this.element = this._video(config);
+      if (this.element) this.element.src = src;
+      this._kind = "video";
+      return;
+    }
+    if (typeof Image === "undefined") return;
+    const img = new Image();
+    img.crossOrigin = config.crossOrigin ?? "anonymous";
+    img.onload = () => {
+      this.ready = true;
+      this._onReady?.(this);
+    };
+    img.onerror = () => {
+      this.error = new Error(`canvas-globe: could not load "${src}"`);
+      this._onReady?.(this);
+    };
+    img.src = src;
+    this.element = img;
+    this._owned = true;
+    this._kind = GIF_RE.test(src) ? "gif" : "static";
+    if (this._kind === "gif") parkOffscreen(img);
+  }
+
+  _video(config) {
+    if (typeof document === "undefined") {
+      this.error = new Error("canvas-globe: video media needs a DOM");
+      return null;
+    }
+    const el = document.createElement("video");
+    el.muted = config.muted !== false;
+    el.loop = config.loop !== false;
+    el.autoplay = true;
+    el.playsInline = true;
+    el.crossOrigin = config.crossOrigin ?? "anonymous";
+    el.oncanplay = () => {
+      this.ready = true;
+      this._onReady?.(this);
+    };
+    el.onerror = () => {
+      this.error = new Error("canvas-globe: video could not be played");
+      this._onReady?.(this);
+    };
+    this._owned = true;
+    parkOffscreen(el);
+    el.play?.().catch(() => {});
+    return el;
+  }
+
+  /** Natural pixel size of the current frame. */
+  size() {
+    const el = this.element;
+    if (!el) return null;
+    const w = el.videoWidth || el.naturalWidth || el.width;
+    const h = el.videoHeight || el.naturalHeight || el.height;
+    return w && h ? [w, h] : null;
+  }
+
+  /** True when the source changes on its own and needs a redraw every frame. */
+  get animated() {
+    if (!this.element) return false;
+    if (this._kind === "gif") return true;
+    return this._kind === "video" && !this.element.paused && !this.element.ended;
+  }
+
+  destroy() {
+    if (!this._owned || !this.element) return;
+    if (this._kind === "video") {
+      this.element.pause?.();
+      this.element.srcObject = null;
+      this.element.removeAttribute("src");
+    }
+    this.element.remove?.();
+    this.element = null;
+    this.ready = false;
+  }
+}
+
+/**
+ * Draws media into a screen rect the way CSS `object-fit` would.
+ * The caller is expected to have clipped to the target shape already.
+ */
+export function drawFitted(ctx, media, box) {
+  const size = media.size();
+  if (!size) return false;
+  const [mw, mh] = size;
+  const [x, y, w, h] = box;
+  if (w <= 0 || h <= 0) return false;
+  let scale;
+  if (media.fit === "contain") scale = Math.min(w / mw, h / mh);
+  else if (media.fit === "fill") scale = null;
+  else scale = Math.max(w / mw, h / mh);
+  const k = media.scale || 1;
+  if (scale === null) {
+    ctx.drawImage(media.element, x, y, w, h);
+    return true;
+  }
+  const dw = mw * scale * k, dh = mh * scale * k;
+  ctx.drawImage(media.element, x + (w - dw) / 2 + media.offset[0], y + (h - dh) / 2 + media.offset[1], dw, dh);
+  return true;
+}

package/src/presets.js

@@ -1,21 +1,21 @@
-/**
- * Named bundles of theme + render style. `createGlobe(canvas, { preset })`
- * applies one, and your own options still win over anything it sets.
- */
-export const presets = {
-  atlas: { theme: "atlas", landStyle: "fill", graticule: true, stars: true, shade: true, orbits: 0 },
-  midnight: { theme: "midnight", landStyle: "fill", graticule: true, stars: true, shade: true, orbits: 0 },
-  mono: { theme: "mono", landStyle: "fill", graticule: true, stars: false, shade: false, orbits: 0 },
-  political: { theme: "political", landStyle: "fill", countryColors: "auto", graticule: true, stars: false, shade: true, orbits: 0 },
-  hologram: { theme: "hologram", landStyle: "dots", dotSpacing: 2, dotSize: 1.15, graticule: true, stars: true, shade: false, orbits: 0 },
-  neon: { theme: "neon", landStyle: "glow", graticule: true, stars: true, shade: false, orbits: 0 },
-  blueprint: { theme: "blueprint", landStyle: "outline", graticule: true, stars: false, shade: false, orbits: 3 },
-  aurora: { theme: "aurora", landStyle: "dots", dotSpacing: 2.6, dotSize: 1.4, graticule: false, stars: true, shade: false, orbits: 2 },
-  noir: { theme: "noir", landStyle: "outline", graticule: false, stars: false, shade: false, orbits: 0 },
-  constellation: { theme: "hologram", landStyle: "dots", dotSpacing: 3, dotSize: 1.6, graticule: true, stars: true, shade: false, orbits: 3 },
-};
-
-/** Option keys a preset owns; anything unset falls back to the default. */
-export const presetKeys = [
-  "theme", "landStyle", "dotSpacing", "dotSize", "graticule", "stars", "shade", "orbits", "countryColors",
-];
+/**
+ * Named bundles of theme + render style. `createGlobe(canvas, { preset })`
+ * applies one, and your own options still win over anything it sets.
+ */
+export const presets = {
+  atlas: { theme: "atlas", landStyle: "fill", graticule: true, stars: true, shade: true, orbits: 0 },
+  midnight: { theme: "midnight", landStyle: "fill", graticule: true, stars: true, shade: true, orbits: 0 },
+  mono: { theme: "mono", landStyle: "fill", graticule: true, stars: false, shade: false, orbits: 0 },
+  political: { theme: "political", landStyle: "fill", countryColors: "auto", graticule: true, stars: false, shade: true, orbits: 0 },
+  hologram: { theme: "hologram", landStyle: "dots", dotSpacing: 2, dotSize: 1.15, graticule: true, stars: true, shade: false, orbits: 0 },
+  neon: { theme: "neon", landStyle: "glow", graticule: true, stars: true, shade: false, orbits: 0 },
+  blueprint: { theme: "blueprint", landStyle: "outline", graticule: true, stars: false, shade: false, orbits: 3 },
+  aurora: { theme: "aurora", landStyle: "dots", dotSpacing: 2.6, dotSize: 1.4, graticule: false, stars: true, shade: false, orbits: 2 },
+  noir: { theme: "noir", landStyle: "outline", graticule: false, stars: false, shade: false, orbits: 0 },
+  constellation: { theme: "hologram", landStyle: "dots", dotSpacing: 3, dotSize: 1.6, graticule: true, stars: true, shade: false, orbits: 3 },
+};
+
+/** Option keys a preset owns; anything unset falls back to the default. */
+export const presetKeys = [
+  "theme", "landStyle", "dotSpacing", "dotSize", "graticule", "stars", "shade", "orbits", "countryColors",
+];

package/src/react.js

@@ -1,60 +1,60 @@
-/**
- * React binding. `import { Globe } from "canvas-globe/react"`.
- * React is a peer dependency and is only required by this entry point.
- */
-import { createElement, forwardRef, useEffect, useImperativeHandle, useRef } from "react";
-import { GeoGlobe } from "./geo-globe.js";
-import { mapAspect } from "./geo.js";
-
-const CALLBACKS = ["onHover", "onClick", "onCountryHover", "onCountryClick", "onRender"];
-
-export const Globe = forwardRef(function Globe(props, ref) {
-  const { className, style, ...rest } = props;
-  const options = {};
-  for (const key of Object.keys(rest)) if (!CALLBACKS.includes(key)) options[key] = rest[key];
-
-  const canvasRef = useRef(null);
-  const globeRef = useRef(null);
-  const handlers = useRef(props);
-  const previous = useRef(null);
-  const initial = useRef(options);
-  handlers.current = props;
-
-  useEffect(() => {
-    const bound = {};
-    for (const name of CALLBACKS) bound[name] = (...args) => handlers.current[name]?.(...args);
-    const globe = new GeoGlobe(canvasRef.current, { ...initial.current, ...bound });
-    globeRef.current = globe;
-    previous.current = initial.current;
-    return () => {
-      globe.destroy();
-      globeRef.current = null;
-    };
-  }, []);
-
-  // Shallow diff every render so callers can pass inline objects freely.
-  useEffect(() => {
-    const globe = globeRef.current;
-    if (!globe) return;
-    const patch = {};
-    let changed = false;
-    for (const key of Object.keys(options)) {
-      if (previous.current && previous.current[key] === options[key]) continue;
-      patch[key] = options[key];
-      changed = true;
-    }
-    previous.current = options;
-    if (changed) globe.setOptions(patch);
-  });
-
-  useImperativeHandle(ref, () => globeRef.current);
-
-  const aspect = options.mode === "map" ? 1 / mapAspect(options.latRange, options.projection) : 1;
-  return createElement("canvas", {
-    ref: canvasRef,
-    className,
-    style: { width: "100%", aspectRatio: String(aspect), ...style },
-  });
-});
-
-export default Globe;
+/**
+ * React binding. `import { Globe } from "canvas-globe/react"`.
+ * React is a peer dependency and is only required by this entry point.
+ */
+import { createElement, forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { GeoGlobe } from "./geo-globe.js";
+import { mapAspect } from "./geo.js";
+
+const CALLBACKS = ["onHover", "onClick", "onCountryHover", "onCountryClick", "onRender"];
+
+export const Globe = forwardRef(function Globe(props, ref) {
+  const { className, style, ...rest } = props;
+  const options = {};
+  for (const key of Object.keys(rest)) if (!CALLBACKS.includes(key)) options[key] = rest[key];
+
+  const canvasRef = useRef(null);
+  const globeRef = useRef(null);
+  const handlers = useRef(props);
+  const previous = useRef(null);
+  const initial = useRef(options);
+  handlers.current = props;
+
+  useEffect(() => {
+    const bound = {};
+    for (const name of CALLBACKS) bound[name] = (...args) => handlers.current[name]?.(...args);
+    const globe = new GeoGlobe(canvasRef.current, { ...initial.current, ...bound });
+    globeRef.current = globe;
+    previous.current = initial.current;
+    return () => {
+      globe.destroy();
+      globeRef.current = null;
+    };
+  }, []);
+
+  // Shallow diff every render so callers can pass inline objects freely.
+  useEffect(() => {
+    const globe = globeRef.current;
+    if (!globe) return;
+    const patch = {};
+    let changed = false;
+    for (const key of Object.keys(options)) {
+      if (previous.current && previous.current[key] === options[key]) continue;
+      patch[key] = options[key];
+      changed = true;
+    }
+    previous.current = options;
+    if (changed) globe.setOptions(patch);
+  });
+
+  useImperativeHandle(ref, () => globeRef.current);
+
+  const aspect = options.mode === "map" ? 1 / mapAspect(options.latRange, options.projection) : 1;
+  return createElement("canvas", {
+    ref: canvasRef,
+    className,
+    style: { width: "100%", aspectRatio: String(aspect), ...style },
+  });
+});
+
+export default Globe;

package/src/recorder.js

@@ -1,70 +1,70 @@
-/**
- * Canvas → WebM recording via MediaRecorder. No encoder dependency, no upload,
- * no server: the clip is produced entirely in the tab.
- */
-
-const CANDIDATES = [
-  "video/webm;codecs=vp9",
-  "video/webm;codecs=vp8",
-  "video/webm",
-  "video/mp4",
-];
-
-/** First container the browser can actually encode, or null. */
-export function supportedRecordingType() {
-  if (typeof MediaRecorder === "undefined") return null;
-  for (const type of CANDIDATES) if (MediaRecorder.isTypeSupported?.(type)) return type;
-  return null;
-}
-
-export const canRecord = () => supportedRecordingType() !== null;
-
-/**
- * Records the canvas and resolves to a Blob. Pass `duration` for a fixed-length
- * clip, or call `stop()` on the returned handle.
- */
-export function recordCanvas(canvas, { duration = 6000, fps = 30, bitrate = 6e6, type } = {}) {
-  const mimeType = type || supportedRecordingType();
-  if (!mimeType) return { promise: Promise.reject(new Error("canvas-globe: MediaRecorder is unavailable")), stop() {} };
-  if (!canvas.captureStream) {
-    return { promise: Promise.reject(new Error("canvas-globe: canvas.captureStream is unavailable")), stop() {} };
-  }
-
-  const stream = canvas.captureStream(fps);
-  const recorder = new MediaRecorder(stream, { mimeType, videoBitsPerSecond: bitrate });
-  const chunks = [];
-  let timer = null;
-
-  const promise = new Promise((resolve, reject) => {
-    recorder.ondataavailable = (e) => {
-      if (e.data && e.data.size) chunks.push(e.data);
-    };
-    recorder.onerror = (e) => reject(e.error || new Error("canvas-globe: recording failed"));
-    recorder.onstop = () => {
-      clearTimeout(timer);
-      for (const track of stream.getTracks()) track.stop();
-      resolve(new Blob(chunks, { type: mimeType }));
-    };
-    recorder.start();
-    if (duration > 0) timer = setTimeout(() => recorder.state !== "inactive" && recorder.stop(), duration);
-  });
-
-  return {
-    promise,
-    mimeType,
-    stop() {
-      if (recorder.state !== "inactive") recorder.stop();
-      return promise;
-    },
-  };
-}
-
-/** Triggers a browser download for a Blob. */
-export function downloadBlob(blob, filename) {
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = filename;
-  a.click();
-  setTimeout(() => URL.revokeObjectURL(url), 1000);
-}
+/**
+ * Canvas → WebM recording via MediaRecorder. No encoder dependency, no upload,
+ * no server: the clip is produced entirely in the tab.
+ */
+
+const CANDIDATES = [
+  "video/webm;codecs=vp9",
+  "video/webm;codecs=vp8",
+  "video/webm",
+  "video/mp4",
+];
+
+/** First container the browser can actually encode, or null. */
+export function supportedRecordingType() {
+  if (typeof MediaRecorder === "undefined") return null;
+  for (const type of CANDIDATES) if (MediaRecorder.isTypeSupported?.(type)) return type;
+  return null;
+}
+
+export const canRecord = () => supportedRecordingType() !== null;
+
+/**
+ * Records the canvas and resolves to a Blob. Pass `duration` for a fixed-length
+ * clip, or call `stop()` on the returned handle.
+ */
+export function recordCanvas(canvas, { duration = 6000, fps = 30, bitrate = 6e6, type } = {}) {
+  const mimeType = type || supportedRecordingType();
+  if (!mimeType) return { promise: Promise.reject(new Error("canvas-globe: MediaRecorder is unavailable")), stop() {} };
+  if (!canvas.captureStream) {
+    return { promise: Promise.reject(new Error("canvas-globe: canvas.captureStream is unavailable")), stop() {} };
+  }
+
+  const stream = canvas.captureStream(fps);
+  const recorder = new MediaRecorder(stream, { mimeType, videoBitsPerSecond: bitrate });
+  const chunks = [];
+  let timer = null;
+
+  const promise = new Promise((resolve, reject) => {
+    recorder.ondataavailable = (e) => {
+      if (e.data && e.data.size) chunks.push(e.data);
+    };
+    recorder.onerror = (e) => reject(e.error || new Error("canvas-globe: recording failed"));
+    recorder.onstop = () => {
+      clearTimeout(timer);
+      for (const track of stream.getTracks()) track.stop();
+      resolve(new Blob(chunks, { type: mimeType }));
+    };
+    recorder.start();
+    if (duration > 0) timer = setTimeout(() => recorder.state !== "inactive" && recorder.stop(), duration);
+  });
+
+  return {
+    promise,
+    mimeType,
+    stop() {
+      if (recorder.state !== "inactive") recorder.stop();
+      return promise;
+    },
+  };
+}
+
+/** Triggers a browser download for a Blob. */
+export function downloadBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}