@yappkit/front-module-map 0.1.8 → 0.2.0

package/lib/providers/mapbox.js

@@ -1,239 +1,231 @@
-import { defineComponent as m, ref as v, toRefs as y, shallowRef as g, provide as b, watch as d, h as M, inject as x, onMounted as S, onUnmounted as L, nextTick as f } from "vue";
-class O {
-  constructor({ unwatchFn: e }) {
-    this.overlay = null, this.watching = { options: !1, layers: !1 }, this.unwatchFn = e;
-  }
-  watchOptions(e, a = {}) {
-    if (!this.overlay)
-      throw new Error("overlay should be set");
-    if (this.watching.options) {
-      console.warn("No need to call MapboxDeckGLOverlay.watchOptions(). options are already being watched");
-      return;
-    }
-    this.watching.options = !0;
-    const t = d(e, () => {
-      this.overlay.setProps({ ...e.value });
-    }, {
-      immediate: !0,
-      deep: !0,
-      ...a
-    });
-    this.unwatchFn.push(t);
-  }
-  watchLayers(e, a = {}) {
-    if (!this.overlay)
-      throw new Error("overlay should be set");
-    if (this.watching.layers) {
-      console.warn("No need to call MapboxDeckGLOverlay.watchLayers(). layers are already being watched");
-      return;
-    }
-    this.watching.layers = !0;
-    const t = d(e, () => {
-      this.overlay.setProps({ layers: e.value });
-    }, {
-      immediate: !0,
-      ...a
-    });
-    this.unwatchFn.push(t);
-  }
-}
-class k {
-  constructor() {
-    this.map = null, this.watching = { sources: !1, layers: !1 }, this.unwatchFn = [];
-  }
-  watchSources(e, a = {}) {
-    if (!this.map)
-      throw new Error("map should be set");
-    if (this.watching.sources) {
-      console.warn("No need to call MapboxMap.watchSources(). sources are already being watched");
-      return;
-    }
-    this.watching.sources = !0;
-    const t = d(() => (e.value || []).map((s) => {
-      if (!s.propsId) {
-        const { data: n, ...o } = s;
-        s.propsId = JSON.stringify(o);
-      }
-      return s;
-    }), async (s, n) => {
-      const o = n || [], i = s || [], c = i.filter((r, h) => {
-        var u;
-        return r !== o[h] && r.propsId === ((u = o[h]) == null ? void 0 : u.propsId);
-      }), p = i.filter((r, h) => r !== o[h] && !c.find((u) => u.id === r.id)), l = o.filter((r, h) => r !== i[h] && !c.find((u) => u.id === r.id));
-      for (const r of c)
-        this.map.getSource(r.id).setData(r.data);
-      await f();
-      for (const r of l)
-        this.map.removeSource(r.id);
-      for (const r of p) {
-        const h = { ...r };
-        delete h.id, delete h.propsId, this.map.addSource(r.id, h);
-      }
-    }, {
-      immediate: !0,
-      ...a
-    });
-    this.unwatchFn.push(t);
-  }
-  watchLayers(e, a = {}) {
-    if (!this.map)
-      throw new Error("map should be set");
-    if (this.watching.layers) {
-      console.warn("No need to call MapboxMap.watchLayers(). layers are already being watched");
-      return;
-    }
-    this.watching.layers = !0;
-    const t = d(e, async (s, n) => {
-      const o = n || [], i = s || [], c = i.filter((l, r) => l !== o[r]), p = o.filter((l, r) => l !== i[r]);
-      for (const l of p)
-        this.map.removeLayer(l.id), this.map.getSource(l.id) && this.map.removeSource(l.id);
-      await f();
-      for (const l of c)
-        this.map.addLayer(l);
-    }, {
-      immediate: !0,
-      ...a
-    });
-    this.unwatchFn.push(t);
-  }
-  async setDeckGLOverlay(e = {}) {
-    if (!this.map)
-      throw new Error("map should be set");
-    const { MapboxOverlay: a } = await import("@deck.gl/mapbox"), t = new O({ unwatchFn: this.unwatchFn });
-    return t.overlay = new a(e), this.map.addControl(t.overlay), t;
-  }
-}
-class K {
-  constructor(e) {
-    if (this.apiKey = e.apiKey, !this.apiKey)
-      throw new Error("apiKey is required");
-    this.services = [...e.services || []], this.sdk = {}, this.mapboxgl = null, this.getSDK();
-  }
-  get Map() {
-    return m(
-      (e, { emit: a, slots: t }) => {
-        const s = v(null), { options: n, layers: o, sources: i } = y(e), c = g(null);
-        return b("mapboxMap", c), this.createMap(s, n.value).then((p) => {
-          c.value = p, d(n, () => {
-            console.error("Cannot update options (missing function similar to deckglMap.setProps()). Use SDK dedicated functions instead");
-          }, { once: !0 }), p.watchSources(i, n.value.watchSourcesOptions), p.watchLayers(o, n.value.watchLayersOptions), a("loaded", p);
-        }), () => M("div", { ref: s }, c.value ? t : []);
-      },
-      {
-        props: {
-          options: {
-            type: Object,
-            default: () => ({})
-          },
-          layers: {
-            type: Array,
-            default: () => []
-          },
-          sources: {
-            type: Array,
-            default: () => []
-          }
-        },
-        emits: ["loaded"]
-      }
-    );
-  }
-  get DeckGLOverlay() {
-    return m(
-      (e, { emit: a, slots: t }) => {
-        const { options: s, layers: n } = y(e), o = x("mapboxMap");
-        if (!o || !o.value)
-          throw new Error("map should exist");
-        return o.value.setDeckGLOverlay(s.value).then((i) => {
-          i.watchOptions(s, s.value.watchOptionsOptions), i.watchLayers(n, s.value.watchLayersOptions), a("loaded", i);
-        }), () => {
-        };
-      },
-      {
-        props: {
-          options: {
-            type: Object,
-            default: () => ({})
-          },
-          layers: {
-            type: Array,
-            default: () => []
-          }
-        },
-        emits: ["loaded"]
-      }
-    );
-  }
-  async loadMapbox() {
-    if (!this.mapboxgl) {
-      const e = await import("../mapbox-gl.js").then((a) => a.mapboxGl);
-      this.mapboxgl = e;
-    }
-  }
-  get servicesLoader() {
-    return {
-      datasets: () => import("@mapbox/mapbox-sdk/services/datasets.js"),
-      directions: () => import("@mapbox/mapbox-sdk/services/directions.js"),
-      geocoding: () => import("@mapbox/mapbox-sdk/services/geocoding.js"),
-      geocodingV6: () => import("@mapbox/mapbox-sdk/services/geocoding-v6.js"),
-      mapMatching: () => import("@mapbox/mapbox-sdk/services/map-matching.js"),
-      matrix: () => import("@mapbox/mapbox-sdk/services/matrix.js"),
-      optimization: () => import("@mapbox/mapbox-sdk/services/optimization.js"),
-      static: () => import("@mapbox/mapbox-sdk/services/static.js"),
-      styles: () => import("@mapbox/mapbox-sdk/services/styles.js"),
-      tilequery: () => import("@mapbox/mapbox-sdk/services/tilequery.js"),
-      tilesets: () => import("@mapbox/mapbox-sdk/services/tilesets.js"),
-      tokens: () => import("@mapbox/mapbox-sdk/services/tokens.js"),
-      uploads: () => import("@mapbox/mapbox-sdk/services/uploads.js"),
-      isochrone: () => import("@mapbox/mapbox-sdk/services/isochrone.js")
-    };
-  }
-  async loadMapboxSDK({ services: e = [] } = {}) {
-    const t = (await import("@mapbox/mapbox-sdk")).default({ accessToken: this.apiKey }), s = [.../* @__PURE__ */ new Set([...this.services, ...e])];
-    this.services = s;
-    const n = await Promise.all(this.services.map((o) => this.sdk[o] || this.servicesLoader[o]().then((i) => i.default(t))));
-    for (const [o, i] of this.services.entries())
-      this.sdk[i] = n[o];
-  }
-  async getSDK(e) {
-    let a = {};
-    if (typeof e == "string" ? a.services = [e] : a = { ...e }, await this.loadMapboxSDK(a), typeof e == "string") {
-      if (!this.sdk[e])
-        throw new Error(e + " service is not loaded");
-      return this.sdk[e];
-    }
-    return this.sdk;
-  }
-  async createMap(e, a = {}) {
-    const t = new k(), s = () => {
-      for (const n of t.unwatchFn)
-        n();
-      t.unwatchFn = [], t.map && (t.map.remove(), t.map = null);
-    };
-    return new Promise((n, o) => {
-      S(async () => {
-        await this.loadMapbox();
-        const i = () => {
-          if (!e.value)
-            throw new Error("Missing HTML element");
-          const c = d(e, () => {
-            e.value || (s(), c());
-          });
-          t.map = new this.mapboxgl.Map({
-            container: e.value,
-            accessToken: this.apiKey,
-            ...a
-          }), t.map.on("load", () => {
-            n(t);
-          });
-        };
-        a.onMounted ? a.onMounted(i) : i();
-      }), L(() => {
-        s();
-      });
-    });
-  }
-}
-export {
-  K as default
+import { DeckGLOverlay as e, makeDeckGLOverlayComponent as t } from "../DeckGLOverlay.js";
+import { isFunction as n, isPlainObject as r, isString as i } from "lodash-es";
+import { defineComponent as a, h as o, nextTick as s, onMounted as c, onUnmounted as l, provide as u, ref as d, shallowRef as f, toRefs as p, watch as m } from "vue";
+var h = class extends e {
+	constructor({ unwatchFn: e, map: t, trackedIn: n }) {
+		super({
+			unwatchFn: e,
+			trackedIn: n
+		}), this.map = t;
+	}
+	_detach() {
+		this.map.removeControl(this.overlay);
+	}
+	destroy() {
+		super.destroy(), this.map = null;
+	}
+}, g = class {
+	constructor() {
+		this.map = null, this.watching = {
+			sources: !1,
+			layers: !1
+		}, this.unwatchFn = [], this.overlays = [], this._propsIds = /* @__PURE__ */ new WeakMap();
+	}
+	_propsIdOf(e) {
+		if (!this._propsIds.has(e)) {
+			let { data: t, ...n } = e;
+			this._propsIds.set(e, JSON.stringify(n));
+		}
+		return this._propsIds.get(e);
+	}
+	watchSources(e, t = {}) {
+		if (!this.map) throw Error("map should be set");
+		if (this.watching.sources) {
+			console.warn("No need to call MapboxMap.watchSources(). sources are already being watched");
+			return;
+		}
+		this.watching.sources = !0;
+		let r = m(() => [...e.value || []], async (e, t) => {
+			let r = t || [], i = e || [], a = new Map(r.map((e) => [e.id, e])), o = new Map(i.map((e) => [e.id, e])), c = i.filter((e) => {
+				let t = a.get(e.id);
+				return t && e !== t && this._propsIdOf(e) === this._propsIdOf(t);
+			}), l = i.filter((e) => {
+				let t = a.get(e.id);
+				return !t || e !== t && this._propsIdOf(e) !== this._propsIdOf(t);
+			}), u = r.filter((e) => {
+				let t = o.get(e.id);
+				return !t || t !== e && this._propsIdOf(t) !== this._propsIdOf(e);
+			});
+			for (let e of c) {
+				let t = this.map.getSource(e.id);
+				n(t?.setData) && e.data !== void 0 && t.setData(e.data);
+			}
+			await s();
+			for (let e of u) this.map.getSource(e.id) && this.map.removeSource(e.id);
+			for (let e of l) {
+				let t = { ...e };
+				delete t.id;
+				try {
+					this.map.addSource(e.id, t);
+				} catch (t) {
+					console.warn(`MapboxMap.watchSources: could not recreate source "${e.id}" (still used by a layer?): ${t.message}`);
+				}
+			}
+		}, {
+			immediate: !0,
+			...t
+		});
+		this.unwatchFn.push(r);
+	}
+	watchLayers(e, t = {}) {
+		if (!this.map) throw Error("map should be set");
+		if (this.watching.layers) {
+			console.warn("No need to call MapboxMap.watchLayers(). layers are already being watched");
+			return;
+		}
+		this.watching.layers = !0;
+		let n = m(() => [...e.value || []], async (e, t) => {
+			let n = t || [], i = e || [], a = new Map(n.map((e) => [e.id, e])), o = new Map(i.map((e) => [e.id, e])), c = i.filter((e) => e !== a.get(e.id)), l = n.filter((e) => e !== o.get(e.id));
+			for (let e of l) this.map.removeLayer(e.id), r(e.source) && this.map.getSource(e.id) && this.map.removeSource(e.id);
+			await s();
+			let u = new Set(c.map((e) => e.id));
+			for (let e = 0; e < i.length; e++) {
+				let t = i[e];
+				if (u.has(t.id)) {
+					let n;
+					for (let t = e + 1; t < i.length; t++) if (!u.has(i[t].id)) {
+						n = i[t].id;
+						break;
+					}
+					this.map.addLayer(t, n);
+				}
+			}
+		}, {
+			immediate: !0,
+			...t
+		});
+		this.unwatchFn.push(n);
+	}
+	async setDeckGLOverlay(e = {}) {
+		if (!this.map) throw Error("map should be set");
+		let { MapboxOverlay: t } = await import("@deck.gl/mapbox"), n = new h({
+			unwatchFn: [],
+			map: this.map,
+			trackedIn: this.overlays
+		});
+		return n.overlay = new t(e), this.map.addControl(n.overlay), this.overlays.push(n), n;
+	}
+}, _ = class {
+	get requiresApiKey() {
+		return !0;
+	}
+	constructor(e) {
+		if (this.apiKey = e.apiKey, !this.apiKey && this.requiresApiKey) throw Error("apiKey is required");
+		this.services = [...e.services || []], this.sdk = {}, this.mapboxgl = null, this._MapComponent = null, this._DeckGLOverlayComponent = null, this.ready = this.getSDK(), this.ready.catch((e) => {
+			console.error(`${this.constructor.name} SDK preload failed`, e);
+		});
+	}
+	get Map() {
+		return this._MapComponent ??= a((e, { emit: t, slots: n }) => {
+			let r = d(null), { options: i, layers: a, sources: s } = p(e), c = f(null);
+			return u("mapboxMap", c), this.createMap(r, i.value).then((e) => {
+				c.value = e, e.unwatchFn.push(m(i, () => {
+					console.error("Cannot update options (missing function similar to deckglMap.setProps()). Use SDK dedicated functions instead");
+				}, { once: !0 })), e.watchSources(s, i.value.watchSourcesOptions), e.watchLayers(a, i.value.watchLayersOptions), t("loaded", e);
+			}).catch((e) => {
+				e?.code !== "MAP_UNMOUNTED" && t("error", e);
+			}), () => o("div", { ref: r }, c.value ? n : []);
+		}, {
+			props: {
+				options: {
+					type: Object,
+					default: () => ({})
+				},
+				layers: {
+					type: Array,
+					default: () => []
+				},
+				sources: {
+					type: Array,
+					default: () => []
+				}
+			},
+			emits: ["loaded", "error"]
+		}), this._MapComponent;
+	}
+	get DeckGLOverlay() {
+		return this._DeckGLOverlayComponent ??= t("mapboxMap"), this._DeckGLOverlayComponent;
+	}
+	async loadMapbox() {
+		if (!this.mapboxgl) {
+			let [e] = await Promise.all([import("mapbox-gl/esm"), import("mapbox-gl/dist/mapbox-gl.css")]);
+			this.mapboxgl = e;
+		}
+	}
+	get servicesLoader() {
+		return {
+			datasets: () => import("@mapbox/mapbox-sdk/services/datasets.js"),
+			directions: () => import("@mapbox/mapbox-sdk/services/directions.js"),
+			geocoding: () => import("@mapbox/mapbox-sdk/services/geocoding.js"),
+			geocodingV6: () => import("@mapbox/mapbox-sdk/services/geocoding-v6.js"),
+			mapMatching: () => import("@mapbox/mapbox-sdk/services/map-matching.js"),
+			matrix: () => import("@mapbox/mapbox-sdk/services/matrix.js"),
+			optimization: () => import("@mapbox/mapbox-sdk/services/optimization.js"),
+			static: () => import("@mapbox/mapbox-sdk/services/static.js"),
+			styles: () => import("@mapbox/mapbox-sdk/services/styles.js"),
+			tilequery: () => import("@mapbox/mapbox-sdk/services/tilequery.js"),
+			tilesets: () => import("@mapbox/mapbox-sdk/services/tilesets.js"),
+			tokens: () => import("@mapbox/mapbox-sdk/services/tokens.js"),
+			uploads: () => import("@mapbox/mapbox-sdk/services/uploads.js"),
+			isochrone: () => import("@mapbox/mapbox-sdk/services/isochrone.js")
+		};
+	}
+	async loadMapboxSDK({ services: e = [] } = {}) {
+		let t = (await import("@mapbox/mapbox-sdk")).default({ accessToken: this.apiKey }), n = [.../* @__PURE__ */ new Set([...this.services, ...e])], r = n.filter((e) => !this.servicesLoader[e]);
+		if (r.length) throw Error(`Unknown mapbox services: ${r.join(", ")}. Available services: ${Object.keys(this.servicesLoader).join(", ")}`);
+		this.services = n;
+		let i = await Promise.all(this.services.map((e) => this.sdk[e] || this.servicesLoader[e]().then((e) => e.default(t))));
+		for (let [e, t] of this.services.entries()) this.sdk[t] = i[e];
+	}
+	async getSDK(e) {
+		let t = i(e), n = {};
+		if (t ? n.services = [e] : n = { ...e }, await this.loadMapboxSDK(n), t) {
+			if (!this.sdk[e]) throw Error(e + " service is not loaded");
+			return this.sdk[e];
+		}
+		return this.sdk;
+	}
+	_getMapOptions(e, t) {
+		return {
+			container: e,
+			accessToken: this.apiKey,
+			...t
+		};
+	}
+	async createMap(e, t = {}) {
+		let n = new g(), r = () => {
+			for (let e of n.unwatchFn) e();
+			n.unwatchFn = [];
+			for (let e of [...n.overlays]) e.destroy();
+			n.overlays = [], n.map &&= (n.map.remove(), null);
+		};
+		return new Promise((i, a) => {
+			c(() => {
+				let o = () => {
+					if (!e.value) {
+						let e = /* @__PURE__ */ Error("Missing HTML element");
+						throw a(e), e;
+					}
+					let o = m(e, () => {
+						e.value || (r(), o());
+					});
+					n.map = new this.mapboxgl.Map(this._getMapOptions(e.value, t));
+					let s = (e) => {
+						a(e?.error ?? /* @__PURE__ */ Error("Map failed to load"));
+					};
+					n.map.on("error", s), n.map.on("load", () => {
+						n.map.off("error", s), i(n);
+					});
+				};
+				(async () => {
+					await this.loadMapbox(), t.onMounted ? t.onMounted(o) : o();
+				})().catch(a);
+			}), l(() => {
+				r();
+				let e = /* @__PURE__ */ Error("Map unmounted before load");
+				e.code = "MAP_UNMOUNTED", a(e);
+			});
+		});
+	}
 };
+export { _ as default };