@mapslibvn/web 0.4.0 → 0.5.0

package/dist/index.js

@@ -16,6 +16,351 @@ function applyLanguage(gl, lang) {
   }
 }
 
+// src/navigation.ts
+import {
+  createNavigator
+} from "@mapslibvn/core";
+
+// src/position-source.ts
+function toGeoFix(position) {
+  const c = position.coords;
+  return {
+    lng: c.longitude,
+    lat: c.latitude,
+    accuracy_m: c.accuracy,
+    heading: typeof c.heading === "number" && Number.isFinite(c.heading) ? c.heading : null,
+    speed_mps: typeof c.speed === "number" && Number.isFinite(c.speed) ? c.speed : null,
+    timestamp: Number.isFinite(position.timestamp) ? position.timestamp : Date.now()
+  };
+}
+function toPositionError(error) {
+  const code = error.code === 1 ? "denied" : error.code === 3 ? "timeout" : "unavailable";
+  return { code, message: error.message || code, raw: error };
+}
+function geolocationSource(options = {}) {
+  const geo = "geolocation" in options ? options.geolocation : typeof navigator !== "undefined" ? navigator.geolocation : void 0;
+  const positionOptions = {
+    enableHighAccuracy: options.enableHighAccuracy ?? true,
+    maximumAge: options.maximumAge ?? 1e3,
+    timeout: options.timeout ?? 1e4
+  };
+  return {
+    subscribe(onFix, onError) {
+      if (!geo) {
+        onError?.({ code: "unavailable", message: "Tr\xECnh duy\u1EC7t kh\xF4ng c\xF3 Geolocation" });
+        return () => {
+        };
+      }
+      const id = geo.watchPosition(
+        (p) => onFix(toGeoFix(p)),
+        (e) => onError?.(toPositionError(e)),
+        positionOptions
+      );
+      return () => geo.clearWatch(id);
+    }
+  };
+}
+function playbackSource(fixes, options = {}) {
+  const rate = options.rate ?? 1;
+  return {
+    subscribe(onFix) {
+      let stopped = false;
+      let timer = null;
+      let i = 0;
+      const emitNext = () => {
+        if (stopped) return;
+        const fix = fixes[i];
+        if (!fix) return;
+        onFix(fix);
+        i += 1;
+        const next = fixes[i];
+        if (!next) return;
+        timer = setTimeout(emitNext, Math.max(0, (next.timestamp - fix.timestamp) / rate));
+      };
+      timer = setTimeout(
+        rate <= 0 ? () => {
+          for (const f of fixes) {
+            if (stopped) break;
+            onFix(f);
+          }
+        } : emitNext,
+        0
+      );
+      return () => {
+        stopped = true;
+        if (timer !== null) clearTimeout(timer);
+      };
+    }
+  };
+}
+
+// src/speech.ts
+var BCP47 = { vi: "vi-VN", en: "en-US" };
+function createSpeech(opts) {
+  const synth = "synth" in opts ? opts.synth : typeof speechSynthesis !== "undefined" ? speechSynthesis : void 0;
+  const prefix = opts.lang;
+  let voice = null;
+  let voicesKnown = false;
+  let reported = false;
+  let current = 0;
+  const reportUnavailable = () => {
+    if (reported) return;
+    reported = true;
+    opts.onUnavailable?.();
+  };
+  const pickVoice = () => {
+    if (!synth) return;
+    const voices = synth.getVoices();
+    if (voices.length === 0) return;
+    voicesKnown = true;
+    voice = voices.find((v) => v.lang.toLowerCase().replace("_", "-").startsWith(prefix)) ?? null;
+    if (!voice) reportUnavailable();
+  };
+  if (!synth) reportUnavailable();
+  else {
+    pickVoice();
+    if (!voicesKnown && typeof synth.addEventListener === "function") {
+      synth.addEventListener("voiceschanged", pickVoice, { once: true });
+    }
+  }
+  const utterance = (text) => {
+    const u = new SpeechSynthesisUtterance(text);
+    u.lang = BCP47[opts.lang];
+    if (voice) u.voice = voice;
+    u.rate = opts.rate ?? 1;
+    u.volume = opts.volume ?? 1;
+    return u;
+  };
+  return {
+    get available() {
+      return Boolean(synth) && (!voicesKnown || voice !== null);
+    },
+    speak(text, priority) {
+      if (!synth || !text) return;
+      if (voicesKnown && !voice) return;
+      if ((synth.speaking || synth.pending) && priority >= current) synth.cancel();
+      const u = utterance(text);
+      current = priority;
+      u.onend = () => {
+        current = 0;
+      };
+      u.onerror = () => {
+        current = 0;
+      };
+      synth.speak(u);
+    },
+    warmUp() {
+      if (!synth) return;
+      const u = utterance("");
+      u.volume = 0;
+      synth.speak(u);
+    },
+    cancel() {
+      synth?.cancel();
+      current = 0;
+    }
+  };
+}
+
+// src/navigation.ts
+var FOLLOW_ZOOM = {
+  walk: 17,
+  motorbike: 16.5,
+  car: 15.5
+};
+var FOLLOW_PITCH = 45;
+var PUCK_STYLE = "width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:26px solid #2458a6;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 1px 3px rgba(0,0,0,.5));";
+var NAV_EVENTS = [
+  "status",
+  "progress",
+  "step",
+  "waypoint",
+  "offRoute",
+  "reroute",
+  "rerouteFailed",
+  "announce",
+  "arrive"
+];
+function createNavigation(deps) {
+  const { gl, ml, routes } = deps;
+  const doc = "document" in deps ? deps.document : typeof document !== "undefined" ? document : void 0;
+  const wakeLockApi = "wakeLock" in deps ? deps.wakeLock : typeof navigator !== "undefined" ? navigator.wakeLock : void 0;
+  const listeners = /* @__PURE__ */ new Map();
+  const emit = (k, e) => {
+    for (const fn of listeners.get(k) ?? []) fn(e);
+  };
+  let nav = null;
+  let unsubscribe = null;
+  let speech = null;
+  let puck = null;
+  let puckOnMap = false;
+  let running = false;
+  let following = false;
+  let follow = null;
+  let sentinel = null;
+  let lastFixTs = null;
+  const onUserMove = () => {
+    if (!following) return;
+    following = false;
+    emit("followChange", false);
+  };
+  const camera = (p) => {
+    if (!follow) return;
+    const dt = lastFixTs === null ? 500 : p.fix.timestamp - lastFixTs;
+    lastFixTs = p.fix.timestamp;
+    const options = {
+      center: p.snapped,
+      bearing: p.bearing,
+      zoom: follow.zoom,
+      pitch: follow.pitch,
+      duration: Math.max(0, Math.min(1e3, dt))
+    };
+    if (follow.padding) options.padding = follow.padding;
+    gl.easeTo(options);
+  };
+  const requestWakeLock = async () => {
+    if (!wakeLockApi) return;
+    try {
+      sentinel = await wakeLockApi.request("screen");
+    } catch {
+      sentinel = null;
+    }
+  };
+  const releaseWakeLock = () => {
+    void sentinel?.release();
+    sentinel = null;
+  };
+  const onVisibility = () => {
+    if (running && doc?.visibilityState === "visible" && sentinel === null) void requestWakeLock();
+  };
+  function stop() {
+    if (!running) return;
+    running = false;
+    unsubscribe?.();
+    unsubscribe = null;
+    speech?.cancel();
+    speech = null;
+    releaseWakeLock();
+    doc?.removeEventListener("visibilitychange", onVisibility);
+    gl.off("dragstart", onUserMove);
+    gl.off("wheel", onUserMove);
+    puck?.remove();
+    puck = null;
+    puckOnMap = false;
+    nav?.stop();
+    nav = null;
+    lastFixTs = null;
+    following = false;
+    follow = null;
+  }
+  function start(opts) {
+    if (running) stop();
+    running = true;
+    const lang = opts.lang ?? deps.lang;
+    const routeIndex = opts.routeIndex ?? 0;
+    const navOptions = {
+      response: opts.response,
+      routeIndex,
+      provider: opts.provider ?? deps.places,
+      reroute: opts.reroute ?? "auto",
+      lang
+    };
+    if (opts.thresholds) navOptions.thresholds = opts.thresholds;
+    const engine = createNavigator(navOptions);
+    nav = engine;
+    routes.show(opts.response, { active: routeIndex });
+    if (opts.voice !== false) {
+      const v = typeof opts.voice === "object" ? opts.voice : {};
+      const speechOptions = {
+        lang,
+        onUnavailable: () => emit("voiceUnavailable", void 0)
+      };
+      if (v.rate !== void 0) speechOptions.rate = v.rate;
+      if (v.volume !== void 0) speechOptions.volume = v.volume;
+      speech = createSpeech(speechOptions);
+      speech.warmUp();
+    }
+    if (opts.follow !== false) {
+      const f = typeof opts.follow === "object" ? opts.follow : {};
+      const mode = opts.response.routes[routeIndex]?.mode ?? "motorbike";
+      follow = { zoom: f.zoom ?? FOLLOW_ZOOM[mode], pitch: f.pitch ?? FOLLOW_PITCH };
+      if (f.padding) follow.padding = f.padding;
+      following = true;
+      gl.on("dragstart", onUserMove);
+      gl.on("wheel", onUserMove);
+    }
+    const el = doc?.createElement("div");
+    if (el) {
+      el.setAttribute("style", PUCK_STYLE);
+      el.setAttribute("aria-hidden", "true");
+      puck = new ml.Marker({ element: el, rotationAlignment: "map", pitchAlignment: "map" });
+    }
+    engine.on("progress", (p) => {
+      routes.setProgress(p.shapeIndex, p.snapped);
+      if (puck) {
+        puck.setLngLat(p.snapped).setRotation(p.bearing);
+        if (!puckOnMap) {
+          puck.addTo(gl);
+          puckOnMap = true;
+        }
+      }
+      if (following) camera(p);
+    });
+    engine.on("announce", (a) => speech?.speak(a.text, a.priority));
+    engine.on("reroute", (e) => routes.show(e.response, { active: 0 }));
+    engine.on("arrive", () => {
+      unsubscribe?.();
+      unsubscribe = null;
+      releaseWakeLock();
+    });
+    for (const name of NAV_EVENTS) {
+      engine.on(name, (e) => emit(name, e));
+    }
+    const source = opts.source ?? geolocationSource();
+    unsubscribe = source.subscribe(
+      (fix) => engine.update(fix),
+      (error) => emit("positionError", error)
+    );
+    if (opts.wakeLock !== false) {
+      void requestWakeLock();
+      doc?.addEventListener("visibilitychange", onVisibility);
+    }
+  }
+  return {
+    start,
+    stop,
+    recenter() {
+      if (!running || !follow) return;
+      following = true;
+      emit("followChange", true);
+      if (nav?.progress) camera(nav.progress);
+    },
+    reroute() {
+      return nav ? nav.reroute() : Promise.reject(new Error("map.navigation ch\u01B0a start()"));
+    },
+    get state() {
+      return nav?.progress ?? null;
+    },
+    get status() {
+      return nav?.status ?? "idle";
+    },
+    get following() {
+      return following;
+    },
+    on(event, handler) {
+      let set = listeners.get(event);
+      if (!set) {
+        set = /* @__PURE__ */ new Set();
+        listeners.set(event, set);
+      }
+      set.add(handler);
+    },
+    off(event, handler) {
+      listeners.get(event)?.delete(handler);
+    }
+  };
+}
+
 // src/protocol.ts
 import { Protocol } from "pmtiles";
 var registered = false;
@@ -25,6 +370,130 @@ function ensurePmtilesProtocol(host) {
   registered = true;
 }
 
+// src/routes-layer.ts
+import {
+  EMPTY_ROUTE_FEATURES,
+  decodeRoutes,
+  routeFeatures
+} from "@mapslibvn/core";
+var ROUTE_SOURCE_ID = "mapslibvn-route";
+var ROUTE_LAYER_IDS = {
+  alt: "mapslibvn-route-alt",
+  casing: "mapslibvn-route-casing",
+  line: "mapslibvn-route-line",
+  traveled: "mapslibvn-route-traveled"
+};
+var ROUTE_COLOR = "#2458a6";
+var ALT_COLOR = "#9ca8ba";
+var DESTINATION_COLOR = "#d92d20";
+function createRoutesLayer(gl, ml, onRouteClick) {
+  let response = null;
+  let coords = [];
+  let active = 0;
+  let showMarkers = true;
+  let progress = null;
+  let markers = [];
+  let clickBound = false;
+  const firstSymbolLayerId = () => gl.getStyle()?.layers?.find((layer) => layer.type === "symbol")?.id;
+  const addLine = (id, kind, paint, before) => {
+    gl.addLayer(
+      {
+        id,
+        type: "line",
+        source: ROUTE_SOURCE_ID,
+        filter: ["==", ["get", "kind"], kind],
+        layout: { "line-join": "round", "line-cap": "round" },
+        paint
+      },
+      before
+    );
+  };
+  const ensureLayers = () => {
+    if (gl.getSource(ROUTE_SOURCE_ID)) return;
+    gl.addSource(ROUTE_SOURCE_ID, { type: "geojson", data: EMPTY_ROUTE_FEATURES });
+    const before = firstSymbolLayerId();
+    addLine(ROUTE_LAYER_IDS.alt, "alt", { "line-color": ALT_COLOR, "line-width": 5 }, before);
+    addLine(ROUTE_LAYER_IDS.casing, "active", { "line-color": "#ffffff", "line-width": 9 }, before);
+    addLine(ROUTE_LAYER_IDS.line, "active", { "line-color": ROUTE_COLOR, "line-width": 6 }, before);
+    addLine(
+      ROUTE_LAYER_IDS.traveled,
+      "traveled",
+      { "line-color": ROUTE_COLOR, "line-width": 6, "line-opacity": 0.35 },
+      before
+    );
+    if (!clickBound) {
+      clickBound = true;
+      gl.on("click", ROUTE_LAYER_IDS.alt, (e) => {
+        const index = e.features?.[0]?.properties?.index;
+        if (typeof index === "number") onRouteClick(index);
+      });
+    }
+  };
+  const setData = () => {
+    const source = gl.getSource(ROUTE_SOURCE_ID);
+    const data = response ? routeFeatures(coords, { active, progress }) : EMPTY_ROUTE_FEATURES;
+    source?.setData(data);
+  };
+  const apply = () => {
+    if (!response) return;
+    if (!gl.isStyleLoaded()) {
+      gl.once("style.load", apply);
+      return;
+    }
+    ensureLayers();
+    setData();
+  };
+  const clearMarkers = () => {
+    for (const m of markers) m.remove();
+    markers = [];
+  };
+  const placeMarkers = () => {
+    clearMarkers();
+    if (!response || !showMarkers) return;
+    const last = response.waypoints.length - 1;
+    response.waypoints.forEach((w, i) => {
+      if (i === 0) return;
+      markers.push(
+        new ml.Marker({ color: i === last ? DESTINATION_COLOR : ALT_COLOR }).setLngLat(w.snapped).addTo(gl)
+      );
+    });
+  };
+  gl.on("style.load", () => {
+    if (response && !gl.getSource(ROUTE_SOURCE_ID)) {
+      ensureLayers();
+      setData();
+    }
+  });
+  return {
+    show(next, opts = {}) {
+      response = next;
+      coords = decodeRoutes(next);
+      active = opts.active ?? 0;
+      showMarkers = opts.markers ?? true;
+      progress = null;
+      apply();
+      placeMarkers();
+    },
+    setActive(index) {
+      active = index;
+      progress = null;
+      setData();
+    },
+    setProgress(shapeIndex, snapped) {
+      progress = { shapeIndex, snapped };
+      setData();
+    },
+    clear() {
+      response = null;
+      coords = [];
+      progress = null;
+      clearMarkers();
+      const source = gl.getSource(ROUTE_SOURCE_ID);
+      source?.setData(EMPTY_ROUTE_FEATURES);
+    }
+  };
+}
+
 // src/map.ts
 var isTheme = (s) => s === "light" || s === "dark";
 function createMap(opts, deps) {
@@ -57,11 +526,14 @@ function createMap(opts, deps) {
   );
   const listeners = {
     poiClick: /* @__PURE__ */ new Set(),
-    load: /* @__PURE__ */ new Set()
+    load: /* @__PURE__ */ new Set(),
+    routeClick: /* @__PURE__ */ new Set()
   };
   const emit = (k, e) => {
     for (const fn of listeners[k]) fn(e);
   };
+  const routes = createRoutesLayer(gl, ml, (index) => emit("routeClick", { index }));
+  const navigation = createNavigation({ gl, ml, places, routes, lang: opts.lang ?? "vi" });
   gl.on("load", () => {
     if (opts.lang && opts.lang !== "vi") applyLanguage(gl, opts.lang);
     if (opts.poiLayer === false) {
@@ -89,6 +561,8 @@ function createMap(opts, deps) {
   return {
     gl,
     places,
+    routes,
+    navigation,
     addMarker(o) {
       const marker = new ml.Marker(o.color ? { color: o.color } : void 0).setLngLat([
         o.lng,
@@ -116,6 +590,8 @@ function createMap(opts, deps) {
       listeners[event].delete(handler);
     },
     remove() {
+      navigation.stop();
+      routes.clear();
       gl.remove();
     }
   };
@@ -353,15 +829,37 @@ function defineAutocomplete() {
 }
 
 // src/index.ts
-import { attributionHtml as attributionHtml2, attributionText, createClient as createClient3, MapsLibVNError } from "@mapslibvn/core";
+import {
+  attributionHtml as attributionHtml2,
+  attributionText,
+  createClient as createClient3,
+  createNavigator as createNavigator2,
+  formatDistance,
+  formatDistanceShort,
+  MapsLibVNError,
+  NAVIGATION_THRESHOLDS,
+  simulateFixes
+} from "@mapslibvn/core";
 export {
+  FOLLOW_ZOOM,
   MapsLibVNAutocomplete,
   MapsLibVNError,
+  NAVIGATION_THRESHOLDS,
+  ROUTE_LAYER_IDS,
+  ROUTE_SOURCE_ID,
   applyLanguage,
   attributionHtml2 as attributionHtml,
   attributionText,
   createClient3 as createClient,
   createMap,
+  createNavigator2 as createNavigator,
+  createSpeech,
   defineAutocomplete,
-  nameExpression
+  formatDistance,
+  formatDistanceShort,
+  geolocationSource,
+  nameExpression,
+  playbackSource,
+  simulateFixes,
+  toGeoFix
 };