@yappkit/front-module-map 0.1.3 → 0.1.5

package/lib/providers/deckgl.js

@@ -1,40 +1,62 @@
-import { defineComponent as y, ref as d, toRefs as f, shallowRef as u, provide as c, computed as k, h as L, onMounted as g, onUnmounted as v, watch as M } from "vue";
+import { defineComponent as y, ref as d, toRefs as g, shallowRef as w, provide as l, computed as k, h as v, onMounted as L, onUnmounted as M, watch as h } from "vue";
 class D {
   constructor() {
-    this.deckgl = null, this.map = null, this.watching = { layers: !1 };
+    this.deckgl = null, this.map = null, this.watching = { options: !1, layers: !1 }, this.unwatchFn = [];
   }
-  watchLayers(e, t = {}) {
+  watchOptions(e, a = {}) {
+    if (!this.map)
+      throw new Error("map should be set");
+    if (this.watching.options) {
+      console.warn("No need to call DeckGLMap.watchOptions(). options are already being watched");
+      return;
+    }
+    this.watching.options = !0;
+    const t = h(e, () => {
+      this.map.setProps({ ...e.value });
+    }, {
+      immediate: !0,
+      deep: !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 DeckGLMap.watchLayers(). layers are already being watched");
       return;
     }
-    this.watching.layers = !0, M(e, () => {
+    this.watching.layers = !0;
+    const t = h(e, () => {
       this.map.setProps({ layers: e.value });
-    }, t);
+    }, {
+      immediate: !0,
+      ...a
+    });
+    this.unwatchFn.push(t);
   }
 }
-class P {
+class G {
   constructor(e) {
     this.deckgl = null;
   }
   get Map() {
     return y(
-      (e, { emit: t, attrs: a, slots: s }) => {
-        const l = d(null), { options: n, layers: m } = f(e), o = u(null);
-        c("deckGLMap", o);
-        const i = u([]);
-        c("deckGLPrependLayers", i);
-        const w = k(() => [
-          ...i.value,
-          ...m.value
+      (e, { emit: a, attrs: t, slots: c }) => {
+        const n = d(null), { options: o, layers: i } = g(e), r = w(null);
+        l("deckGLMap", r);
+        const u = w([]);
+        l("deckGLPrependLayers", u);
+        const f = k(() => [
+          ...u.value,
+          ...i.value
         ]);
-        this.createMap(l, n.value).then((r) => {
-          o.value = r, r.watchLayers(w, n.value.watchLayersOptions || { immediate: !0 }), t("loaded", r);
+        this.createMap(n, o.value).then((s) => {
+          r.value = s, s.watchOptions(o, o.value.watchOptionsOptions), s.watchLayers(f, o.value.watchLayersOptions), a("loaded", s);
         });
         const p = d([]);
-        return c("deckGLAppendVNodeFn", p), () => [L("div", { ...a, ref: l }, o.value ? s : []), p.value.map((r) => r())];
+        return l("deckGLAppendVNodeFn", p), () => [v("div", { ...t, ref: n }, r.value ? c : []), p.value.map((s) => s())];
       },
       {
         props: {
@@ -46,34 +68,44 @@ class P {
             type: Array,
             default: () => []
           }
-        }
+        },
+        emits: ["loaded"]
       }
     );
   }
   async loadDeckGL() {
-    const { Deck: e } = await import("deck.gl");
-    this.deckgl = { Deck: e };
+    if (!this.deckgl) {
+      const { Deck: e } = await import("deck.gl");
+      this.deckgl = { Deck: e };
+    }
   }
-  async createMap(e, t = {}) {
-    const a = new D();
-    return new Promise((s, l) => {
-      g(async () => {
-        await (this.deckgl ? Promise.resolve() : this.loadDeckGL());
-        const n = () => {
+  async createMap(e, a = {}) {
+    const t = new D(), c = () => {
+      for (const n of t.unwatchFn)
+        n();
+      t.unwatchFn = [], t.map && (t.map.finalize(), t.map = null);
+    };
+    return new Promise((n, o) => {
+      L(async () => {
+        await this.loadDeckGL();
+        const i = () => {
           if (!e.value)
             throw new Error("Missing HTML element");
-          a.deckgl = this.deckgl, a.map = new this.deckgl.Deck({
+          const r = h(e, () => {
+            e.value || (c(), r());
+          });
+          t.deckgl = this.deckgl, t.map = new this.deckgl.Deck({
             parent: e.value,
-            ...t
-          }), s(a);
+            ...a
+          }), n(t);
         };
-        t.onMounted ? t.onMounted(n) : n();
-      }), v(() => {
-        a.map && (a.map.finalize(), a.map = null);
+        a.onMounted ? a.onMounted(i) : i();
+      }), M(() => {
+        c();
       });
     });
   }
 }
 export {
-  P as default
+  G as default
 };

package/lib/providers/google-maps.js

@@ -1,44 +1,142 @@
-import { defineComponent as l, ref as d, toRefs as n, shallowRef as u, provide as y, h as w, inject as p, onMounted as v, onUnmounted as L, watch as g } from "vue";
-class m {
-  constructor() {
-    this.overlay = null, this.watching = { layers: !1 };
+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, a = {}) {
+  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, g(e, () => {
+    this.watching.layers = !0;
+    const t = c(e, () => {
       this.overlay.setProps({ layers: e.value });
-    }, a);
+    }, {
+      immediate: !0,
+      ...s
+    });
+    this.unwatchFn.push(t);
   }
 }
-class k {
+class G {
   constructor() {
-    this.map = null;
+    this.map = null, this.unwatchFn = [];
   }
   async setDeckGLOverlay(e = {}) {
     if (!this.map)
       throw new Error("map should be set");
-    const { GoogleMapsOverlay: a } = await import("@deck.gl/google-maps"), t = new m();
-    return t.overlay = new a(e), t.overlay.setMap(this.map), t;
+    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 G {
+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 || ["maps"], this.version = e.version || "weekly", this.loader = null, this.sdk = {}, this.deckgl = null;
+    this.libraries = [...e.libraries || []], this.version = e.version || "weekly", this.loader = null, this.sdk = {}, this.deckgl = null, this.getSDK();
   }
   get Map() {
-    return l(
-      (e, { emit: a, slots: t }) => {
-        const r = d(null), { options: o } = n(e), s = u(null);
-        return y("googleMapsMap", s), this.createMap(r, o.value).then((i) => {
-          s.value = i, a("loaded", i);
-        }), () => w("div", { ref: r }, s.value ? t : []);
+    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: {
@@ -46,18 +144,42 @@ class G {
             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 l(
-      (e, { emit: a, slots: t }) => {
-        const { options: r, layers: o } = n(e), s = p("googleMapsMap");
-        if (!s || !s.value)
+    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 s.value.setDeckGLOverlay(r.value).then((i) => {
-          i.watchLayers(o, r.value.watchLayersOptions || { immediate: !0 }), a("loaded", i);
+        return o.value.setDeckGLOverlay(r.value).then((n) => {
+          n.watchOptions(r, r.value.watchOptionsOptions), n.watchLayers(a, r.value.watchLayersOptions), s("loaded", n);
         }), () => {
         };
       },
@@ -71,27 +193,30 @@ class G {
             type: Array,
             default: () => []
           }
-        }
+        },
+        emits: ["loaded"]
       }
     );
   }
   get DeckGL3DTileLayer() {
-    return l(
-      (e, { emit: a, slots: t }) => {
-        const { options: r } = n(e), o = p("deckGLPrependLayers");
-        if (!o || !o.value)
+    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 s = d("");
-        this.createDeckGL3DTileLayer(s, r).then((h) => {
-          o.value = [
-            ...o.value,
-            h
+        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 i = p("deckGLAppendVNodeFn");
-        if (!i)
+        const n = f("deckGLAppendVNodeFn");
+        if (!n)
           throw new Error("deckGLAppendVNodeFn should exist");
-        return t.appendMap && i.value.push(() => t.appendMap({ credits: s.value })), () => {
+        return t.appendMap && n.value.push(() => t.appendMap({ credits: o.value })), () => {
         };
       },
       {
@@ -104,35 +229,73 @@ class G {
       }
     );
   }
-  async loadGoogleMaps() {
-    const { Loader: e } = await import("@googlemaps/js-api-loader");
-    this.loader = new e({
+  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 a = await Promise.all(this.libraries.map((t) => this.loader.importLibrary(t)));
-    for (const [t, r] of this.libraries.entries())
-      this.sdk[r] = a[t];
-  }
-  async getSDK() {
-    return await (Object.keys(this.sdk).length ? Promise.resolve() : this.loadGoogleMaps()), this.sdk;
-  }
-  async createMap(e, a = {}) {
-    const t = new k();
-    return new Promise((r, o) => {
-      v(async () => {
-        await (this.sdk.maps ? Promise.resolve() : this.loadGoogleMaps());
-        const s = () => {
+    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, {
-            ...a
-          }), r(t);
+            ...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);
         };
-        a.onMounted ? a.onMounted(s) : s();
-      }), L(() => {
-        t.map && (t.map = null);
+        s.onMounted ? s.onMounted(n) : n();
+      }), M(() => {
+        r();
       });
     });
   }
@@ -140,7 +303,7 @@ class G {
     const { Tile3DLayer: e } = await import("deck.gl");
     this.deckgl = { Tile3DLayer: e };
   }
-  async createDeckGL3DTileLayer(e, a = {}) {
+  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",
@@ -153,18 +316,18 @@ class G {
       },
       onTilesetLoad: (t) => {
         e && (t.options.onTraversalComplete = (r) => {
-          const o = /* @__PURE__ */ new Set();
-          return r.forEach((s) => {
-            const { copyright: i } = s.content.gltf.asset;
-            i.split(";").forEach(o.add, o), e.value = [...o].join("; ");
+          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",
-      ...a
+      ...s
     });
   }
 }
 export {
-  G as default
+  F as default
 };