interactive-regions-map - npm Package Compare versions

Comparing version 0.0.18 to 0.0.19

dist/interactive-regions-map.js

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

package.json

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

README.md

@@ -38,3 +38,41 @@ # interactive-regions-map
 
-<b>RegionsMap</b> - The Regions Map Component creates an SVG element with a map using the d3.js library. 
+#### MapProvider
+
+The main functionality provider component. It implements the basic functions to 
+calculate svg-component path from region coordinates, zoom etc. using d3.js library.
+
+<b>Props</b>
+
+|         Name          |                                    Description                                    | Default | Required |
+|:---------------------:|:---------------------------------------------------------------------------------:|:-------:|:--------:|
+|         width         |                            Width of main svg component                            |  900px  |    -     |
+|        height         |                           Height of main svg component                            |  900px  |    -     |
+|        mapData        |                            Object with all map regions                            |    -    |    +     |
+|    mapDataIndexes     |                        Object with all map regions indexes                        |  null   |    -     |
+|     mapProjection     | Custom map projection based on d3 mercators objects, using to manipulate your map |  null   |    -     |
+| animationDurationTime |                           Zoom animation duration time                            | 1500ms  |    -     |
+|         color         |                            The color of chosen region                             |   red   |    -     |
+
+<b>Events</b>
+
+|      Name      |                                      Description                                       |                          Effect                          |
+|:--------------:|:--------------------------------------------------------------------------------------:|:--------------------------------------------------------:|
+|   nextRegion   |   This event can be used on custom components to switch between regions sequentially   |   Changed currentRegionIndex to next (end + 1 = start)   |
+| previousRegion | This event can be used on custom components to switch between regions in reverse order | Changed currentRegionIndex to previous (start - 1 = end) |
+| regionClicked  |                        This event occurs after click on region                         |           By default zoom in to clicked region           |
+|   mapClicked   |                          This event occurs after click on map                          |                         nothing                          |
+
+
+<b>Slots</b>
+
+|     Name      |            Props             |         Listeners          |
+|:-------------:|:----------------------------:|:--------------------------:|
+|      map      | width, height, mapData, path | regionClicked, mapClicked  |
+|    default    |        currentRegion         | nextRegion, previousRegion |
+
+<br/>
+
+#### RegionsMap
+
+This component creates an SVG element with a map using the d3.js library. 
 Each region is a Map Region component.
@@ -44,14 +82,11 @@
 
-| Name | Description | Default | Required |
-|:---:|:---:|:---:|:---:|
-| width | Width of main svg component | 900px | - |
-| height | Height of main svg component | 900px | - |
-| regions | JSON object that stores region data | - | + |
-| regionsIndexes | JSON object that stores indexes of region to optimize their search | null | - |
-| mapProjection | Custom map projection based on d3 mercators objects, using to manipulate your map | geoTransverseMercator | - |
-| animationDurationTime | Oh wow, just duration time for your animations on map | 1500 | - |
+|          Name           |                         Description                          | Default  | Required  |
+|:-----------------------:|:------------------------------------------------------------:|:--------:|:---------:|
+|          path           |  Function to calculate path of svg object by it coordinates  |    -     |     +     |
+|          width          |                 Width of main svg component                  |  900px   |     -     |
+|         height          |                 Height of main svg component                 |  900px   |     -     |
+|         mapData         |                 Object with all map regions                  |   null   |     -     |
 
-<br/>
 
-The <b>regions</b> prop has a geo.json structure, so your object should look like this:
+The <b>mapData</b> prop has a geo.json structure, so your object should look like this:
 ```json
@@ -99,10 +134,12 @@ {
 
-<b>MapRegion</b> - The Map Region Component is a nested component that is part of the svg-element map.
+#### MapRegion
 
+This component is a nested component that is part of the svg-element map.
+
 <b>Props</b>:
 
-| Name | Description | Default | Required |
-|:---:|:---:|:---:|:---:|
-| d | Coordinates of the region rendering | - | + |
-| data | Information about the region | - | + |
+|  Name  |             Description             | Default | Required |
+|:------:|:-----------------------------------:|:-------:|:--------:|
+|   d    | Coordinates of the region rendering |    -    |    +     |
+|  data  |    Information about the region     |    -    |    +     |
 
@@ -115,25 +152,5 @@ <br/>
 
-| Name | Description | Effect |
-|:---:|:---:|:---:|
+|     Name      |                    Description                     |                       Effect                        |
+|:-------------:|:--------------------------------------------------:|:---------------------------------------------------:|
 | regionClicked | This event occurs after clicking on Region Element | By default fill region by default color and zoom it |
-
-<br/>
-
-<b>RegionInfo</b> - The Region Info Component is a component that visualize the data of the selected region,
-which is stored inside the Map Region Component using <b>data</b> prop.
-
-<b>Props</b>:
-
-| Name | Description | Default | Required |
-|:---:|:---:|:---:|:---:|
-| regionData | Data which stored inside clicked region | - | + |
-
-<b>Emits</b>:
-
-This component emits events with default handlers that can be updated
-
-| Name | Description | Effect |
-|:---:|:---:|:---:|
-| nextRegion | This event occurs after clicking the "Next" button | Change selected region - forward |
-| previousRegion | This event occurs after clicking the "Previous" button | Change selected region - backward |
  
@@ -145,6 +162,7 @@ <br/>
 
-1. <a href="https://d3js.org/">D3</a> - The library to draw svg elements using JavaScript
-2. <a href="https://gadm.org/download_country.html">GADM</a> - The data of the country's regions and not only them 
+1. [D3](https://d3js.org/) - The library to draw svg elements using JavaScript
+2. [GADM](https://gadm.org/download_country.html) - The data of the country's regions and not only them 
 (use <b>level1</b> from GeoJSON to build a map of the regions, and use map into the package)
-3. <a href="https://geojson.io/#map=2/0/20">geojson</a> - powered by <b>mapbox</b>
+3. [geojson.io](https://geojson.io/#map=2/0/20) - To check your .geojson file and edit
+4. [Vector.rocks](https://vector.rocks/) - To check your .geojson file and edit
 

No alert changes

Improved metrics

Total package byte prevSize

27510

increased by12.62%

Lines of code

213

increased by2.9%

Number of lines in readme file

164

increased by12.33%

Published versions last two months

4

increased by100%

No dependency changes