interactive-regions-map - npm Package Compare versions

Comparing version 0.0.19 to 0.0.20

dist/interactive-regions-map.js

@@ -1,4 +0,4 @@
-import { openBlock as m, createElementBlock as h, renderSlot as P, createElementVNode as C, Fragment as T, renderList as O, createBlock as q, computed as E, ref as g, watch as S, onMounted as F } from "vue";
+import { openBlock as m, createElementBlock as h, createElementVNode as k, toDisplayString as T, renderSlot as C, Fragment as O, renderList as S, createBlock as q, computed as I, ref as g, watch as A, onMounted as F } from "vue";
 import * as l from "d3";
-const A = { class: "map-region" }, L = ["id", "d"], V = {
+const L = { class: "map-region" }, V = { class: "map-region-title" }, G = ["id", "d"], H = {
   __name: "MapRegion",
@@ -9,8 +9,11 @@ props: ["d", "data"],
     const e = o, r = d;
-    return (c, i) => (m(), h("g", A, [
-      P(c.$slots, "map-region-component", {
+    return (c, i) => (m(), h("g", L, [
+      k("title", V, `
+      ` + T(o.data.properties.NAME_1) + `
+    `, 1),
+      C(c.$slots, "map-region-component", {
         d: e.d,
         onClick: i[0] || (i[0] = (a) => r("regionClicked", { event: a, data: o.data }))
       }, () => [
-        C("path", {
+        k("path", {
           id: `path_${o.data.properties.id}`,
@@ -20,11 +23,11 @@ class: "map-region-path",
           onClick: i[1] || (i[1] = (a) => r("regionClicked", { event: a, data: o.data }))
-        }, null, 8, L)
+        }, null, 8, G)
       ])
     ]));
   }
-}, G = { class: "map-container w-100" }, H = ["width", "height", "viewBox"], J = { id: "regions-container" }, K = /* @__PURE__ */ C("path", {
+}, J = { class: "map-container w-100" }, K = ["width", "height", "viewBox"], Q = { id: "regions-container" }, U = /* @__PURE__ */ k("path", {
   fill: "none",
   stroke: "white",
   "stroke-linejoin": "round"
-}, null, -1), Y = {
+}, null, -1), ee = {
   __name: "RegionsMap",
@@ -52,3 +55,3 @@ props: {
     const e = o, r = d;
-    return (c, i) => (m(), h("div", G, [
+    return (c, i) => (m(), h("div", J, [
       (m(), h("svg", {
@@ -60,4 +63,4 @@ id: "map",
       }, [
-        C("g", J, [
-          (m(!0), h(T, null, O(o.mapData.features, (a) => (m(), q(V, {
+        k("g", Q, [
+          (m(!0), h(O, null, S(o.mapData.features, (a) => (m(), q(H, {
             key: a.properties.NAME_1,
@@ -69,8 +72,8 @@ id: a.properties.id,
           }, null, 8, ["id", "data", "d"]))), 128)),
-          K
+          U
         ])
-      ], 8, H))
+      ], 8, K))
     ]));
   }
-}, Q = (o, d) => {
+}, W = (o, d) => {
   const e = o.__vccOpts || o;
@@ -80,3 +83,3 @@ for (const [r, c] of d)
   return e;
-}, U = { class: "map-provider-container" }, W = {
+}, X = { class: "map-provider-container" }, Y = {
   __name: "MapProvider",
@@ -120,10 +123,10 @@ props: {
   setup(o, { emit: d }) {
-    const e = o, r = d, c = e.mapData.features.length, i = /* @__PURE__ */ new Map(), a = E(() => e.mapProjection ?? l.geoTransverseMercator().fitSize([e.width, e.height], e.mapData).rotate([-90, 0]).center([-20, -20])), u = E(() => e.mapData.features[f.value]), f = g(0), I = g(l.geoPath().projection(a.value)), k = g(
-      l.zoom().scaleExtent([1, 8]).on("zoom", z)
-    ), v = g(null), y = g(null);
-    S(u, (t, n) => {
+    const e = o, r = d, c = e.mapData.features.length, i = /* @__PURE__ */ new Map(), a = I(() => e.mapProjection ?? l.geoTransverseMercator().fitSize([e.width, e.height], e.mapData).rotate([-90, 0]).center([-20, -20])), u = I(() => e.mapData.features[f.value]), f = g(0), E = g(l.geoPath().projection(a.value)), y = g(
+      l.zoom().scaleExtent([1, 8]).on("zoom", N)
+    ), v = g(null), x = g(null);
+    A(u, (t, n) => {
       var s, p;
       (s = i.get(n.properties.id)) == null || s.style.setProperty("fill", null), (p = i.get(t.properties.id)) == null || p.style.setProperty("fill", e.color);
     });
-    function x(t) {
+    function R(t) {
       t >= 0 && t < c && (f.value = t);
@@ -140,19 +143,19 @@ }
     }
+    function $() {
+      R(++f.value), w(), r("nextRegion");
+    }
     function j() {
-      x(++f.value), R(), r("nextRegion");
+      R(--f.value), w(), r("previousRegion");
     }
-    function $() {
-      x(--f.value), R(), r("previousRegion");
-    }
-    function R() {
+    function w() {
       let t = u.value.properties.id;
       i.get(t).dispatchEvent(new PointerEvent("click", void 0));
     }
-    function z(t) {
+    function N(t) {
       const { transform: n } = t;
-      y.value.attr("transform", n), y.value.attr("stroke-width", 1 / n.k);
+      x.value.attr("transform", n), x.value.attr("stroke-width", 1 / n.k);
     }
-    function N() {
+    function z() {
       v.value.transition().duration(e.animationDurationTime).call(
-        k.value.transform,
+        y.value.transform,
         l.zoomIdentity,
@@ -163,8 +166,8 @@ l.zoomTransform(v.value.node()).invert([e.width / 2, e.height / 2])
     function B({ event: t, data: n }) {
-      const [[s, p], [w, D]] = I.value.bounds(n);
-      t.stopPropagation(), console.log(s, p, w, D);
-      let _;
-      e.mapDataIndexes ? _ = b(n) : _ = M(n), x(_), v.value.transition().duration(e.animationDurationTime).call(
-        k.value.transform,
-        l.zoomIdentity.translate(e.width / 2, e.height / 2).scale(Math.min(8, 0.9 / Math.max((w - s) / e.width, (D - p) / e.height))).translate(-(s + w) / 2, -(p + D) / 2)
+      const [[s, p], [D, _]] = E.value.bounds(n);
+      t.stopPropagation(), console.log(s, p, D, _);
+      let P;
+      e.mapDataIndexes ? P = b(n) : P = M(n), R(P), v.value.transition().duration(e.animationDurationTime).call(
+        y.value.transform,
+        l.zoomIdentity.translate(e.width / 2, e.height / 2).scale(Math.min(8, 0.9 / Math.max((D - s) / e.width, (_ - p) / e.height))).translate(-(s + D) / 2, -(p + _) / 2)
       );
@@ -174,27 +177,27 @@ }
       var n;
-      v.value = l.select("svg").on("click", N).call(k.value), y.value = l.select("#regions-container");
+      v.value = l.select("svg").on("click", z).call(y.value), x.value = l.select("#regions-container");
       const t = document.querySelectorAll("path.map-region-path").values();
       for (let s of t)
         i.set(s.parentElement.id, s);
-      (n = i.get(u.value.properties.id)) == null || n.style.setProperty("fill", e.color), R();
-    }), (t, n) => (m(), h("div", U, [
-      P(t.$slots, "map", {
+      (n = i.get(u.value.properties.id)) == null || n.style.setProperty("fill", e.color), w();
+    }), (t, n) => (m(), h("div", X, [
+      C(t.$slots, "map", {
         width: o.width,
         height: o.height,
         mapData: o.mapData,
-        path: I.value,
+        path: E.value,
         onRegionClicked: B
       }, void 0, !0),
-      P(t.$slots, "default", {
+      C(t.$slots, "default", {
         currentRegion: u.value,
-        onNextRegion: j,
-        onPreviousRegion: $
+        onNextRegion: $,
+        onPreviousRegion: j
       }, void 0, !0)
     ]));
   }
-}, Z = /* @__PURE__ */ Q(W, [["__scopeId", "data-v-aaf3ea3d"]]);
+}, te = /* @__PURE__ */ W(Y, [["__scopeId", "data-v-aaf3ea3d"]]);
 export {
-  Z as MapProvider,
-  V as MapRegion,
-  Y as RegionsMap
+  te as MapProvider,
+  H as MapRegion,
+  ee as RegionsMap
 };

package.json

 {
   "name": "interactive-regions-map",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "private": false,
@@ -5,0 +5,0 @@ "type": "module",

No alert changes

Improved metrics

Total package byte prevSize

28507

increased by3.62%

Number of package files

10

increased by11.11%

Lines of code

218

increased by2.35%

No dependency changes