@yappkit/front-module-map 0.1.8 → 0.2.0

package/lib/providers/google-maps.js

@@ -1,333 +1,288 @@
-import { defineComponent as p, ref as y, toRefs as u, shallowRef as g, provide as m, watch as c, h as v, inject as f, onMounted as L, onUnmounted as M, nextTick as O, toRaw as k } from "vue";
-class b {
-  constructor({ unwatchFn: e }) {
-    this.overlay = null, this.watching = { options: !1, layers: !1 }, this.unwatchFn = e;
-  }
-  watchOptions(e, s = {}) {
-    if (!this.overlay)
-      throw new Error("overlay should be set");
-    if (this.watching.options) {
-      console.warn("No need to call GoogleMapsDeckGLOverlay.watchOptions(). options are already being watched");
-      return;
-    }
-    this.watching.options = !0;
-    const t = c(e, () => {
-      this.overlay.setProps({ ...e.value });
-    }, {
-      immediate: !0,
-      deep: !0,
-      ...s
-    });
-    this.unwatchFn.push(t);
-  }
-  watchLayers(e, s = {}) {
-    if (!this.overlay)
-      throw new Error("overlay should be set");
-    if (this.watching.layers) {
-      console.warn("No need to call GoogleMapsDeckGLOverlay.watchLayers(). layers are already being watched");
-      return;
-    }
-    this.watching.layers = !0;
-    const t = c(e, () => {
-      this.overlay.setProps({ layers: e.value });
-    }, {
-      immediate: !0,
-      ...s
-    });
-    this.unwatchFn.push(t);
-  }
-}
-class G {
-  constructor() {
-    this.map = null, this.unwatchFn = [];
-  }
-  async setDeckGLOverlay(e = {}) {
-    if (!this.map)
-      throw new Error("map should be set");
-    const { GoogleMapsOverlay: s } = await import("@deck.gl/google-maps"), t = new b({ unwatchFn: this.unwatchFn });
-    return t.overlay = new s(e), t.overlay.setMap(this.map), t;
-  }
-}
-class D {
-  constructor() {
-    this.map = null, this.watching = { options: !1, layers: !1 }, this.unwatchFn = [];
-  }
-  _getSetters(e) {
-    const s = [], t = { ...Object.getOwnPropertyDescriptors(Object.getPrototypeOf(e)) };
-    for (const [r, a] of Object.entries(t))
-      a.enumerable && s.push(r);
-    return s;
-  }
-  _getOptions(e) {
-    const s = {}, t = this._getSetters(e);
-    for (const r of t) {
-      let a = e[r];
-      e[r] instanceof Object && (a = this._getOptions(e[r])), s[r] = a;
-    }
-    return s;
-  }
-  setProps(e = {}) {
-    for (const [s, t] of Object.entries(e))
-      this.map[s] = t;
-  }
-  getProps() {
-    return this._getOptions(this.map);
-  }
-  getLayer(e) {
-    if (!this.map)
-      throw new Error("map should be set");
-    return this.map.children.namedItem(e);
-  }
-  watchOptions(e, s = {}) {
-    if (!this.map)
-      throw new Error("map should be set");
-    if (this.watching.options) {
-      console.warn("No need to call GoogleMapsMap3D.watchOptions(). options are already being watched");
-      return;
-    }
-    this.watching.options = !0;
-    let t = {};
-    const r = c(e, async () => {
-      await O();
-      const a = k(e.value);
-      for (const [o, n] of Object.entries(a))
-        JSON.stringify(n) !== JSON.stringify(t[o]) && (this.map[o] = n);
-      t = structuredClone(a);
-    }, {
-      immediate: !0,
-      deep: !0,
-      ...s
-    });
-    this.unwatchFn.push(r);
-  }
-  watchLayers(e, s = {}) {
-    if (!this.map)
-      throw new Error("map should be set");
-    if (this.watching.layers) {
-      console.warn("No need to call GoogleMapsMap3D.watchLayers(). layers are already being watched");
-      return;
-    }
-    this.watching.layers = !0;
-    const t = c(e, async (r, a) => {
-      const o = a || [], n = r || [], i = n.filter((l, w) => l !== o[w]), h = o.filter((l, w) => l !== n[w]);
-      await O();
-      for (const l of h)
-        this.map.children.namedItem(l.id).remove();
-      for (const l of i)
-        l.element.setAttribute("name", l.id), this.map.appendChild(l.element);
-    }, {
-      immediate: !0,
-      ...s
-    });
-    this.unwatchFn.push(t);
-  }
-}
-class F {
-  constructor(e) {
-    if (this.apiKey = e.apiKey, !this.apiKey)
-      throw new Error("apiKey is required");
-    this.libraries = [...e.libraries || []], this.version = e.version || "weekly", this.loader = null, this.sdk = {}, this.deckgl = null, this.getSDK();
-  }
-  get Map() {
-    return p(
-      (e, { emit: s, slots: t }) => {
-        const r = y(null), { options: a } = u(e), o = g(null);
-        return m("googleMapsMap", o), this.createMap(r, a.value).then((n) => {
-          o.value = n, c(a, () => {
-            console.error("Cannot update options (missing function similar to deckglMap.setProps()). Use SDK dedicated functions instead");
-          }, { once: !0 }), s("loaded", n);
-        }), () => v("div", { ref: r }, o.value ? t : []);
-      },
-      {
-        props: {
-          options: {
-            type: Object,
-            default: () => ({})
-          }
-        },
-        emits: ["loaded"]
-      }
-    );
-  }
-  get Map3D() {
-    return p(
-      (e, { emit: s, attrs: t, slots: r }) => {
-        const a = y(null), { options: o, layers: n } = u(e), i = g(null);
-        return m("googleMapsMap3D", i), this.createMap3D(a, o.value).then((h) => {
-          i.value = h, h.watchOptions(o, o.value.watchOptionsOptions), h.watchLayers(n, o.value.watchLayersOptions), s("loaded", h);
-        }), () => v("div", { ref: a }, i.value ? r : []);
-      },
-      {
-        props: {
-          options: {
-            type: Object,
-            default: () => ({})
-          },
-          layers: {
-            type: Array,
-            default: () => []
-          }
-        },
-        emits: ["loaded"]
-      }
-    );
-  }
-  get DeckGLOverlay() {
-    return p(
-      (e, { emit: s, slots: t }) => {
-        const { options: r, layers: a } = u(e), o = f("googleMapsMap");
-        if (!o || !o.value)
-          throw new Error("map should exist");
-        return o.value.setDeckGLOverlay(r.value).then((n) => {
-          n.watchOptions(r, r.value.watchOptionsOptions), n.watchLayers(a, r.value.watchLayersOptions), s("loaded", n);
-        }), () => {
-        };
-      },
-      {
-        props: {
-          options: {
-            type: Object,
-            default: () => ({})
-          },
-          layers: {
-            type: Array,
-            default: () => []
-          }
-        },
-        emits: ["loaded"]
-      }
-    );
-  }
-  get DeckGL3DTileLayer() {
-    return p(
-      (e, { emit: s, slots: t }) => {
-        const { options: r } = u(e), a = f("deckGLPrependLayers");
-        if (!a || !a.value)
-          throw new Error("deckGLPrependLayers should exist");
-        const o = y("");
-        this.createDeckGL3DTileLayer(o, r.value).then((i) => {
-          c(r, () => {
-            console.error("Cannot update options on DeckGL layer. Replace layer instead");
-          }, { once: !0 }), a.value = [
-            ...a.value,
-            i
-          ];
-        });
-        const n = f("deckGLAppendVNodeFn");
-        if (!n)
-          throw new Error("deckGLAppendVNodeFn should exist");
-        return t.appendMap && n.value.push(() => t.appendMap({ credits: o.value })), () => {
-        };
-      },
-      {
-        props: {
-          options: {
-            type: Object,
-            default: () => ({})
-          }
-        }
-      }
-    );
-  }
-  async loadGoogleMapsSDK({ libraries: e = [] } = {}) {
-    const { Loader: s } = await import("@googlemaps/js-api-loader"), t = [.../* @__PURE__ */ new Set([...this.libraries, ...e])];
-    this.libraries.length === t.length && this.libraries.every((a) => t.includes(a)) || console.error("GoogleMaps Loader does not allow loading one library after the other. Set libraries option on a single googleMaps config"), this.libraries = t, this.loader = new s({
-      apiKey: this.apiKey,
-      version: this.version,
-      libraries: this.libraries
-    });
-    const r = await Promise.all(this.libraries.map((a) => this.sdk[a] || this.loader.importLibrary(a)));
-    for (const [a, o] of this.libraries.entries())
-      this.sdk[o] = r[a];
-  }
-  async getSDK(e) {
-    let s = {};
-    if (typeof e == "string" ? s.libraries = [e] : s = { ...e }, await this.loadGoogleMapsSDK(s), typeof e == "string") {
-      if (!this.sdk[e] || !Object.keys(this.sdk[e]).length)
-        throw new Error(`${e} library is not loaded${e === "maps3d" ? ". Missing version: 'alpha' or apiKey not authorized?" : ""}`);
-      return this.sdk[e];
-    }
-    return this.sdk;
-  }
-  async createMap(e, s = {}) {
-    const t = new G(), r = () => {
-      for (const a of t.unwatchFn)
-        a();
-      t.unwatchFn = [], t.map && (t.map = null);
-    };
-    return new Promise((a, o) => {
-      L(async () => {
-        await this.getSDK("maps");
-        const n = () => {
-          if (!e.value)
-            throw new Error("Missing HTML element");
-          const i = c(e, () => {
-            e.value || (r(), i());
-          });
-          t.map = new this.sdk.maps.Map(e.value, {
-            ...s
-          }), a(t);
-        };
-        s.onMounted ? s.onMounted(n) : n();
-      }), M(() => {
-        r();
-      });
-    });
-  }
-  async createMap3D(e, s = {}) {
-    const t = new D(), r = () => {
-      for (const a of t.unwatchFn)
-        a();
-      t.unwatchFn = [], t.map && (t.map = null);
-    };
-    return new Promise((a, o) => {
-      L(async () => {
-        await this.getSDK("maps3d");
-        const n = () => {
-          if (!e.value)
-            throw new Error("Missing HTML element");
-          const i = c(e, () => {
-            e.value || (r(), i());
-          });
-          t.map = new this.sdk.maps3d.Map3DElement({
-            ...s
-          }), e.value.appendChild(t.map), a(t);
-        };
-        s.onMounted ? s.onMounted(n) : n();
-      }), M(() => {
-        r();
-      });
-    });
-  }
-  async loadDeckGL() {
-    const { Tile3DLayer: e } = await import("deck.gl");
-    this.deckgl = { Tile3DLayer: e };
-  }
-  async createDeckGL3DTileLayer(e, s = {}) {
-    return await (this.deckgl ? Promise.resolve() : this.loadDeckGL()), new this.deckgl.Tile3DLayer({
-      id: "google-3d-tiles",
-      data: "https://tile.googleapis.com/v1/3dtiles/root.json",
-      loadOptions: {
-        fetch: {
-          headers: {
-            "X-GOOG-API-KEY": this.apiKey
-          }
-        }
-      },
-      onTilesetLoad: (t) => {
-        e && (t.options.onTraversalComplete = (r) => {
-          const a = /* @__PURE__ */ new Set();
-          return r.forEach((o) => {
-            const { copyright: n } = o.content.gltf.asset;
-            n.split(";").forEach(a.add, a), e.value = [...a].join("; ");
-          }), r;
-        });
-      },
-      operation: "terrain+draw",
-      ...s
-    });
-  }
-}
-export {
-  F as default
+import { DeckGLOverlay as e, makeDeckGLOverlayComponent as t } from "../DeckGLOverlay.js";
+import { isString as n } from "lodash-es";
+import { defineComponent as r, h as i, inject as a, nextTick as o, onMounted as s, onUnmounted as c, provide as l, ref as u, shallowRef as d, toRaw as f, toRefs as p, watch as m } from "vue";
+var h = class extends e {
+	_detach() {
+		this.overlay.setMap(null), this.overlay.finalize();
+	}
+}, g = class {
+	constructor() {
+		this.map = null, this.unwatchFn = [], this.overlays = [];
+	}
+	async setDeckGLOverlay(e = {}) {
+		if (!this.map) throw Error("map should be set");
+		let { GoogleMapsOverlay: t } = await import("@deck.gl/google-maps"), n = new h({
+			unwatchFn: [],
+			trackedIn: this.overlays
+		});
+		return n.overlay = new t(e), n.overlay.setMap(this.map), this.overlays.push(n), n;
+	}
+}, _ = class {
+	constructor() {
+		this.map = null, this.watching = {
+			options: !1,
+			layers: !1
+		}, this.unwatchFn = [];
+	}
+	_getSetters(e) {
+		let t = [], n = { ...Object.getOwnPropertyDescriptors(Object.getPrototypeOf(e)) };
+		for (let [e, r] of Object.entries(n)) r.enumerable && (r.get || r.set) && t.push(e);
+		return t;
+	}
+	_getOptions(e, t = /* @__PURE__ */ new WeakSet()) {
+		let n = {};
+		t.add(e);
+		let r = this._getSetters(e);
+		for (let i of r) {
+			let r = e[i];
+			r instanceof Object && !t.has(r) && this._getSetters(r).length && (r = this._getOptions(r, t)), n[i] = r;
+		}
+		return n;
+	}
+	setProps(e = {}) {
+		if (!this.map) throw Error("map should be set");
+		for (let [t, n] of Object.entries(e)) this.map[t] = n;
+	}
+	getProps() {
+		if (!this.map) throw Error("map should be set");
+		return this._getOptions(this.map);
+	}
+	getLayer(e) {
+		if (!this.map) throw Error("map should be set");
+		return this.map.children.namedItem(e);
+	}
+	watchOptions(e, t = {}) {
+		if (!this.map) throw Error("map should be set");
+		if (this.watching.options) {
+			console.warn("No need to call GoogleMapsMap3D.watchOptions(). options are already being watched");
+			return;
+		}
+		this.watching.options = !0;
+		let n = {}, r = m(e, async () => {
+			await o();
+			let t = f(e.value), r = {};
+			for (let [e, i] of Object.entries(t)) r[e] = JSON.stringify(i), r[e] !== n[e] && (this.map[e] = i);
+			n = r;
+		}, {
+			immediate: !0,
+			deep: !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 GoogleMapsMap3D.watchLayers(). layers are already being watched");
+			return;
+		}
+		this.watching.layers = !0;
+		let n = m(() => [...e.value || []], async (e, t) => {
+			let n = t || [], r = e || [], i = new Map(n.map((e) => [e.id, e])), a = new Map(r.map((e) => [e.id, e])), s = r.filter((e) => e !== i.get(e.id)), c = n.filter((e) => e !== a.get(e.id));
+			await o();
+			for (let e of c) this.map.children.namedItem(e.id).remove();
+			let l = new Set(s.map((e) => e.id));
+			for (let e = 0; e < r.length; e++) {
+				let t = r[e];
+				if (l.has(t.id)) {
+					t.element.setAttribute("name", t.id);
+					let n;
+					for (let t = e + 1; t < r.length; t++) if (!l.has(r[t].id)) {
+						n = r[t].id;
+						break;
+					}
+					this.map.insertBefore(t.element, n ? this.map.children.namedItem(n) : null);
+				}
+			}
+		}, {
+			immediate: !0,
+			...t
+		});
+		this.unwatchFn.push(n);
+	}
+}, v = class {
+	constructor(e) {
+		if (this.apiKey = e.apiKey, !this.apiKey) throw Error("apiKey is required");
+		this.libraries = [...e.libraries || []], this.version = e.version || "weekly", this._mapsApiConfigured = !1, this.authFailed = !1, this.sdk = {}, this.deckgl = null, this._MapComponent = null, this._Map3DComponent = null, this._DeckGLOverlayComponent = null, this._DeckGL3DTileLayerComponent = null, this.ready = this.getSDK(), this.ready.catch((e) => {
+			console.error(`${this.constructor.name} SDK preload failed`, e);
+		});
+	}
+	get Map() {
+		return this._MapComponent ??= r((e, { emit: t, slots: n }) => {
+			let r = u(null), { options: a } = p(e), o = d(null);
+			return l("googleMapsMap", o), this.createMap(r, a.value).then((e) => {
+				o.value = e, e.unwatchFn.push(m(a, () => {
+					console.error("Cannot update options (missing function similar to deckglMap.setProps()). Use SDK dedicated functions instead");
+				}, { once: !0 })), t("loaded", e);
+			}).catch((e) => {
+				e?.code !== "MAP_UNMOUNTED" && t("error", e);
+			}), () => i("div", { ref: r }, o.value ? n : []);
+		}, {
+			props: { options: {
+				type: Object,
+				default: () => ({})
+			} },
+			emits: ["loaded", "error"]
+		}), this._MapComponent;
+	}
+	get Map3D() {
+		return this._Map3DComponent ??= r((e, { emit: t, slots: n }) => {
+			let r = u(null), { options: a, layers: o } = p(e), s = d(null);
+			return l("googleMapsMap3D", s), this.createMap3D(r, a.value).then((e) => {
+				s.value = e, e.watchOptions(a, a.value.watchOptionsOptions), e.watchLayers(o, a.value.watchLayersOptions), t("loaded", e);
+			}).catch((e) => {
+				e?.code !== "MAP_UNMOUNTED" && t("error", e);
+			}), () => i("div", { ref: r }, s.value ? n : []);
+		}, {
+			props: {
+				options: {
+					type: Object,
+					default: () => ({})
+				},
+				layers: {
+					type: Array,
+					default: () => []
+				}
+			},
+			emits: ["loaded", "error"]
+		}), this._Map3DComponent;
+	}
+	get DeckGLOverlay() {
+		return this._DeckGLOverlayComponent ??= t("googleMapsMap"), this._DeckGLOverlayComponent;
+	}
+	get DeckGL3DTileLayer() {
+		return this._DeckGL3DTileLayerComponent ??= r((e, { slots: t, emit: n }) => {
+			let { options: r } = p(e), i = a("deckGLPrependLayers");
+			if (!i || !i.value) throw Error("deckGLPrependLayers should exist");
+			let o = u(""), s = null, l = !1, d = null;
+			this.createDeckGL3DTileLayer(o, r.value).then((e) => {
+				l || (s = e, d = m(r, () => {
+					console.error("Cannot update options on DeckGL layer. Replace layer instead");
+				}, { once: !0 }), i.value = [...i.value, e]);
+			}).catch((e) => {
+				l || n("error", e);
+			});
+			let f = a("deckGLAppendVNodeFn");
+			if (!f) throw Error("deckGLAppendVNodeFn should exist");
+			let h = t.appendMap ? () => t.appendMap({ credits: o.value }) : null;
+			return h && f.value.push(h), c(() => {
+				l = !0, d?.(), s &&= (i.value = i.value.filter((e) => e !== s), null), h && (f.value = f.value.filter((e) => e !== h));
+			}), () => {};
+		}, {
+			props: { options: {
+				type: Object,
+				default: () => ({})
+			} },
+			emits: ["error"]
+		}), this._DeckGL3DTileLayerComponent;
+	}
+	async loadGoogleMapsSDK({ libraries: e = [] } = {}) {
+		let { setOptions: t, importLibrary: n } = await import("@googlemaps/js-api-loader");
+		if (!this._mapsApiConfigured) {
+			if (t({
+				key: this.apiKey,
+				v: this.version
+			}), globalThis.window) {
+				let e = window.gm_authFailure;
+				window.gm_authFailure = (...t) => {
+					this.authFailed = !0, console.error("Google Maps authentication failed (invalid key or unauthorized referrer): rendered maps stay greyed. Check maps.<key>.apiKey and the key restrictions."), e?.(...t);
+				};
+			}
+			this._mapsApiConfigured = !0;
+		}
+		let r = [.../* @__PURE__ */ new Set([...this.libraries, ...e])], i = await Promise.all(r.map((e) => this.sdk[e] || n(e)));
+		for (let [e, t] of r.entries()) this.sdk[t] = i[e];
+		this.libraries = r;
+	}
+	async getSDK(e) {
+		let t = n(e), r = {};
+		if (t ? r.libraries = [e] : r = { ...e }, await this.loadGoogleMapsSDK(r), t) {
+			if (!this.sdk[e] || !Object.keys(this.sdk[e]).length) throw Error(`${e} library is not loaded${e === "maps3d" ? ". Missing version: 'alpha' or apiKey not authorized?" : ""}`);
+			return this.sdk[e];
+		}
+		return this.sdk;
+	}
+	async createMap(e, t = {}) {
+		if (this.authFailed) throw Error("Google Maps authentication already failed on this page (gm_authFailure): fix the API key / referrer restrictions before creating more maps.");
+		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 &&= (window.google?.maps?.event && window.google.maps.event.clearInstanceListeners(n.map), null);
+		};
+		return new Promise((i, a) => {
+			s(() => {
+				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.sdk.maps.Map(e.value, { ...t }), i(n);
+				};
+				(async () => {
+					await this.getSDK("maps"), t.onMounted ? t.onMounted(o) : o();
+				})().catch(a);
+			}), c(() => {
+				r();
+				let e = /* @__PURE__ */ Error("Map unmounted before load");
+				e.code = "MAP_UNMOUNTED", a(e);
+			});
+		});
+	}
+	async createMap3D(e, t = {}) {
+		if (this.authFailed) throw Error("Google Maps authentication already failed on this page (gm_authFailure): fix the API key / referrer restrictions before creating more maps.");
+		let n = new _(), r = () => {
+			for (let e of n.unwatchFn) e();
+			n.unwatchFn = [], n.map &&= (n.map.remove(), null);
+		};
+		return new Promise((i, a) => {
+			s(() => {
+				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.sdk.maps3d.Map3DElement({ ...t }), e.value.appendChild(n.map), i(n);
+				};
+				(async () => {
+					await this.getSDK("maps3d"), t.onMounted ? t.onMounted(o) : o();
+				})().catch(a);
+			}), c(() => {
+				r();
+				let e = /* @__PURE__ */ Error("Map unmounted before load");
+				e.code = "MAP_UNMOUNTED", a(e);
+			});
+		});
+	}
+	async loadDeckGL() {
+		let { Tile3DLayer: e } = await import("@deck.gl/geo-layers");
+		this.deckgl = { Tile3DLayer: e };
+	}
+	async createDeckGL3DTileLayer(e, t = {}) {
+		await (this.deckgl ? Promise.resolve() : this.loadDeckGL());
+		let { onTilesetLoad: n, ...r } = t;
+		return new this.deckgl.Tile3DLayer({
+			id: "google-3d-tiles",
+			data: "https://tile.googleapis.com/v1/3dtiles/root.json",
+			loadOptions: { fetch: { headers: { "X-GOOG-API-KEY": this.apiKey } } },
+			onTilesetLoad: (t) => {
+				t.options.onTraversalComplete = (t) => {
+					let n = /* @__PURE__ */ new Set();
+					return t.forEach((e) => {
+						let { copyright: t } = e.content.gltf.asset;
+						t.split(";").forEach(n.add, n);
+					}), e.value = [...n].join("; "), t;
+				}, n?.(t);
+			},
+			operation: "terrain+draw",
+			...r
+		});
+	}
 };
+export { v as default };