@devgateway/dvz-ui-react 1.0.7 → 1.1.1

package/dist/esm/embeddable/d3Map/ZoomControl.js

@@ -1,57 +1,92 @@
-import { jsx as o, jsxs as u } from "react/jsx-runtime";
-import c from "react";
-import * as l from "d3";
-import { Icon as r, Popup as p } from "semantic-ui-react";
-import { FormattedMessage as g } from "react-intl";
-class y extends c.Component {
+import { jsx as l, jsxs as x } from "react/jsx-runtime";
+import y from "react";
+import * as m from "d3";
+import { Icon as b, Popup as I } from "semantic-ui-react";
+import { FormattedMessage as k } from "react-intl";
+class O extends y.Component {
   constructor(t) {
-    super(t), this.zooming = !1, this.zoomstarted = this.zoomStarted.bind(this), this.zoomEnd = this.zoomEnd.bind(this), this.zoomed = this.zoomed.bind(this), this.zoomIn = this.zoomIn.bind(this), this.zoomOut = this.zoomOut.bind(this), this.reset = this.reset.bind(this), this.fullView = this.fullView.bind(this), this.transition2fullView = this.transition2fullView.bind(this), this._fullView = this._fullView.bind(this), this.zoomRef = c.createRef(), this.zoom = l.zoom().scaleExtent([0, 300]).on("start", this.zoomStarted).on("zoom", this.zoomed).on("end", this.zoomEnd);
+    super(t), this.zoomRef = y.createRef(), this.lastInternalZoom = null, this.lastUserTransform = null, this.zoomed = this.zoomed.bind(this), this.zoomEnd = this.zoomEnd.bind(this), this.zoomIn = this.zoomIn.bind(this), this.zoomOut = this.zoomOut.bind(this), this.reset = this.reset.bind(this), this.fullView = this.fullView.bind(this), this.transition2fullView = this.transition2fullView.bind(this), this._fullView = this._fullView.bind(this), this.zoom = m.zoom().scaleExtent([0.1, 300]).on("zoom", this.zoomed).on("end", this.zoomEnd);
   }
   componentDidMount() {
-    const { zoomEnabled: t = !0, rotationEnabled: i } = this.props, s = this.getSelection();
-    s && t && (s.call(this.zoom), this.transition2fullView());
+    const { zoomEnabled: t = !0 } = this.props, o = this.getSelection();
+    o && (this.fullView(), t && (this.props.editing || (o.on("dblclick.zoom", null), o.on("dblclick", (i) => {
+      i.preventDefault(), console.log("double click event"), o.transition().duration(250).call(this.zoom.scaleBy, 1.5);
+    }), o.on("wheel.zoom", null), o.on("wheel", (i) => {
+      console.log("wheel event", i.deltaY, i.deltaX, i.deltaZ), i.preventDefault();
+      const s = i.deltaY > 0 ? 1 / 1.5 : 1.5;
+      o.transition().duration(250).call(this.zoom.scaleBy, s);
+    }), o.call(this.zoom))));
   }
-  componentDidUpdate(t, i, s) {
-    const e = this.getSelection();
-    t.zoomEnabled != this.props.zoomEnabled && (this.props.zoomEnabled ? e && (e.call(this.zoom), e.on(".zoom", this.zoom), this.transition2fullView()) : e && e.on(".zoom", null)), !t.readyState && this.props.readyState && this.fullView(), (t.height !== this.props.height || t.width !== this.props.width) && this.fullView();
+  componentDidUpdate(t) {
+    const o = this.getSelection(), { zoomEnabled: i, initialPosition: s, readyState: c, height: d, width: a, selectedPoint: n, projection: h } = this.props, r = JSON.stringify(t.initialPosition) !== JSON.stringify(s);
+    if (t.zoomEnabled !== i || r)
+      if (i && o) {
+        if (s && this.lastInternalZoom) {
+          const e = (V, S = 3) => Number(V.toFixed(S)), { x: f, y: p, k: u } = s, { x: z, y: g, k: w } = this.lastInternalZoom;
+          if (Math.abs(e(f) - e(z)) < 1 && Math.abs(e(p) - e(g)) < 1 && Math.abs(e(u) - e(w)) < 1e-3) {
+            this.lastInternalZoom = null;
+            return;
+          }
+        }
+        o.call(this.zoom).on(".zoom", this.zoom), this.transition2fullView();
+      } else o && o.on(".zoom", null);
+    !t.readyState && c && this.fullView(), (t.height !== d || t.width !== a) && this.fullView(), n != t.selectedPoint && n && this.zoomTo(h([n.y, n.x]));
   }
-  reset() {
-    const {
-      editing: t
-    } = this.props;
-    if (t) {
-      const i = this.getSelection();
-      i && i.call(
-        this.zoom.transform,
-        l.zoomIdentity.translate(0, 0).scale(1)
-      );
-    } else
-      this.transition2fullView();
+  zoomed(t) {
+    var i, s;
+    const o = this.getSelection();
+    o && (o.selectAll("g.zoomable").attr("transform", t.transform), (s = (i = this.props).onZoomed) == null || s.call(i, t.transform), this.props.editing && t.sourceEvent && (this.lastUserTransform = t.transform));
   }
-  zoomStarted() {
+  zoomEnd(t) {
+    var n, h;
+    const { identifier: o, editing: i, width: s, height: c, postMessageOrigin: d = "*" } = this.props, a = this.lastUserTransform || t.transform;
+    if (this.lastUserTransform = null, (h = (n = this.props).onZoomed) == null || h.call(n, a), i) {
+      const r = (g, w = 3) => Number(g.toFixed(w)), { x: e, y: f, k: p } = a, u = { x: r(e), y: r(f), k: r(p) };
+      this.lastInternalZoom = u;
+      const z = {
+        type: `d3_map_${o}`,
+        value: {
+          ...u,
+          width: s,
+          height: c
+        }
+      };
+      window.parent.postMessage(z, d);
+    }
   }
-  zoomed(t) {
-    this.props.onZoomed(t.transform);
+  zoomIn() {
+    const t = this.getSelection();
+    if (t) {
+      const o = this.props.editing ? 0 : this.props.transitionDuration || 500;
+      t.transition().duration(o).call(this.zoom.scaleBy, 2);
+    }
   }
-  /*Button Zoom in*/
-  zoomIn(t) {
-    const i = this.getSelection();
-    i && i.transition().call(this.zoom.scaleBy, 1.5);
+  zoomTo(t) {
+    const o = m.zoomIdentity.translate(this.props.width / 2, this.props.height / 2).scale(200).translate(-t[0], -t[1]), i = this.getSelection();
+    this.props.editing || this.props.transitionDuration, i.transition().duration(750).call(this.zoom.transform, o);
   }
-  /*Button zoom oit*/
   zoomOut() {
     const t = this.getSelection();
-    t && t.transition().call(this.zoom.scaleBy, 0.6667);
+    if (t) {
+      const o = this.props.editing ? 0 : this.props.transitionDuration || 500;
+      t.transition().duration(o).call(this.zoom.scaleBy, 0.5);
+    }
+  }
+  reset() {
+    const t = this.getSelection();
+    t && (this.props.editing ? t.call(this.zoom.transform, m.zoomIdentity.translate(0, 0).scale(1)) : this.transition2fullView());
   }
   getSelection() {
-    return this.zoomRef.current ? l.select(this.zoomRef.current.parentNode.getElementsByTagName("svg")[0]) : null;
+    var t;
+    return (t = this.props.svgRef) != null && t.current ? m.select(this.props.svgRef.current) : this.zoomRef.current ? m.select(this.zoomRef.current.parentNode.querySelector("svg")) : null;
   }
   _fullView(t = !0) {
-    const { editing: i, initialPosition: s, width: e, height: m } = this.props, { x: h = 100, y: a = 23, k: n = 1, width: f, height: z } = s || {}, d = this.getSelection();
-    z && f && n && d && d.transition().call(
-      this.zoom.transform,
-      l.zoomIdentity.translate(h, a).scale(n)
-    );
+    const { initialPosition: o, width: i, height: s, transform: c } = this.props;
+    if (!o) return;
+    const { x: d = 100, y: a = 23, k: n = 1, width: h, height: r } = o;
+    if (!h || !r || !n) return;
+    const e = this.getSelection();
+    e && e.transition().duration(t ? 750 : 0).attr("transform", c).call(this.zoom.transform, m.zoomIdentity.translate(d, a).scale(n));
   }
   transition2fullView() {
     this._fullView(!0);
@@ -59,28 +94,21 @@ class y extends c.Component {
   fullView() {
     this._fullView(!1);
   }
-  zoomEnd(t) {
-    const { group: i, editing: s, width: e, height: m } = this.props;
-    if (s) {
-      const { x: h, y: a, k: n } = t.transform;
-      window.parent.postMessage({ type: `d3_map_${i}`, value: { k: n, x: h, y: a, width: e, height: m } }, "*");
-    }
-  }
   render() {
-    const { editing: t, zoomEnabled: i = !0 } = this.props;
-    return /* @__PURE__ */ o("div", { ref: this.zoomRef, className: `zoom ${i ? "" : "disabled"}`, children: (t || i) && /* @__PURE__ */ u("div", { children: [
-      /* @__PURE__ */ o("div", { className: " button plus", onClick: this.zoomIn, children: /* @__PURE__ */ o(r, { name: "plus", size: "small" }) }),
-      /* @__PURE__ */ o("div", { className: " button minus", onClick: this.zoomOut, children: /* @__PURE__ */ o(r, { name: "minus", size: "small" }) }),
-      /* @__PURE__ */ o(
-        p,
+    const { editing: t, zoomEnabled: o = !0 } = this.props;
+    return /* @__PURE__ */ l("div", { ref: this.zoomRef, className: `zoom ${o ? "" : "disabled"}`, children: (t || o) && /* @__PURE__ */ x("div", { children: [
+      /* @__PURE__ */ l("div", { className: "button plus", onClick: this.zoomIn, children: /* @__PURE__ */ l(b, { name: "plus", size: "small" }) }),
+      /* @__PURE__ */ l("div", { className: "button minus", onClick: this.zoomOut, children: /* @__PURE__ */ l(b, { name: "minus", size: "small" }) }),
+      /* @__PURE__ */ l(
+        I,
         {
-          content: /* @__PURE__ */ o(g, { id: "map.reset.tooltip", defaultMessage: "Reset zoom" }),
-          trigger: /* @__PURE__ */ o("div", { className: "button reset", onClick: this.reset, children: /* @__PURE__ */ o(r, { name: "repeat", size: "small" }) })
+          content: /* @__PURE__ */ l(k, { id: "map.reset.tooltip", defaultMessage: "Reset zoom" }),
+          trigger: /* @__PURE__ */ l("div", { className: "button reset", onClick: this.reset, children: /* @__PURE__ */ l(b, { name: "repeat", size: "small" }) })
         }
       )
     ] }) });
   }
 }
 export {
-  y as default
+  O as default
 };

package/dist/esm/embeddable/d3Map/index.js

@@ -1,123 +1,156 @@
-import { jsx as t, jsxs as M } from "react/jsx-runtime";
-import { useState as h, useRef as y, useEffect as S } from "react";
-import { connect as k } from "react-redux";
-import { parse as n, compareJsonProps as D, decode as I } from "../utils/parseUtils.js";
-import N from "./Map.js";
-import R from "./BaseLayer.js";
-import T from "./DataLayer.js";
-import U from "./LatLongLayer.js";
-import Z from "./ZoomControl.js";
-import q from "./ProjectedContainer.js";
-import A from "./Legends.js";
-import B from "./FlowLayer.js";
-import { SettingProvider as F, SettingsConsumer as J } from "@devgateway/wp-react-lib";
-const V = (p) => {
+import { jsx as a, jsxs as B } from "react/jsx-runtime";
+import { useState as f, useRef as F, useEffect as V } from "react";
+import { connect as J } from "react-redux";
+import { parse as i, compareJsonProps as E, decode as W } from "../utils/parseUtils.js";
+import G from "./Map.js";
+import H from "./BaseLayer.js";
+import K from "./DataLayer.js";
+import O from "./LatLongLayer.js";
+import Q from "./ZoomControl.js";
+import U from "./ProjectedContainer.js";
+import X from "./Legends.js";
+import Y from "./FlowLayer.js";
+const _ = (L) => {
   const {
-    unique: r,
-    editing: a,
-    "data-group": i,
-    "data-layers": f = "[]",
-    "data-height": u = 400,
-    "data-width": g = 1e3,
-    "data-back-ground-color": w = "#88e8dc",
-    "data-map-position": P = "{}",
-    "data-projection": z = "geoMercator",
-    "data-zoom-enabled": C = !0,
-    "data-rotation-enabled": b = !1,
-    intl: s
-  } = p, [m, L] = h(n(f), []), E = y(null), d = y(null), [c, j] = h(null);
-  S(() => {
-    const o = n(f);
-    D(m, o) || L(o);
-  }, [f]);
-  const v = (o) => {
-    const e = m.slice(), l = e.find((x) => x.id == o);
-    l && (l.visible = !l.visible), L(e);
+    unique: l,
+    editing: r,
+    "data-identifier": M,
+    "data-group": c,
+    "data-layers": g = "[]",
+    "data-height": w = 400,
+    "data-width": h = 1e3,
+    "data-back-ground-color": j = "#88e8dc",
+    "data-map-position": y = "{}",
+    "data-projection": k = "geoMercator",
+    "data-zoom-enabled": x = !0,
+    "data-rotation-enabled": z = !1,
+    "data-wait-for-filters": n = "false",
+    intl: p
+  } = L, [P, S] = f(i(y, r), []), [s, u] = f(i(g), []), T = F(null), d = F(null), [b, v] = f(null), [C, I] = f(null), [Z, D] = f(null);
+  V(() => {
+    const o = i(y, r);
+    E(P, o) || S(o);
+  }, [y]), V(() => {
+    const o = i(g);
+    E(s, o) || u(o);
+  }, [g]);
+  const N = (o) => {
+    const e = s.slice(), t = e.find((m) => m.id == o);
+    t && (t.visible = !t.visible), u(e);
+  }, R = (o) => {
+    const e = s.slice(), t = e.find((m) => m.id == o);
+    t && (t.patternsVisible = t.patternsVisible == null ? !1 : !t.patternsVisible), u(e);
+  }, q = (o) => {
+    D(o);
+  }, A = (o) => {
+    const e = s.slice(), t = e.find((m) => m.id == o);
+    t && (t.colorLayerVisible = t.colorLayerVisible == null ? !1 : !t.colorLayerVisible), u(e);
   };
-  return /* @__PURE__ */ t("div", { ref: E, className: "d3map-container", children: /* @__PURE__ */ t(F, { locale: s.locale, changeUUID: r, children: /* @__PURE__ */ t(J, { children: /* @__PURE__ */ M(
-    q,
+  return /* @__PURE__ */ a("div", { ref: T, className: "d3map-container", children: /* @__PURE__ */ B(
+    U,
     {
-      backgroundColor: I(w),
-      height: u,
-      width: g,
-      projectionName: z,
-      editing: a,
-      initialPosition: n(P, a),
+      backgroundColor: W(j),
+      height: w,
+      width: h,
+      projectionName: k,
+      editing: r,
+      initialPosition: P,
       children: [
-        /* @__PURE__ */ t(N, { rotationEnabled: n(b, a), children: m && m.filter((o) => o.visible != !1).map((o, e) => {
+        /* @__PURE__ */ a(G, { rotationEnabled: i(z, r), children: s.map((o, e) => {
           if (o.type === "base")
-            return /* @__PURE__ */ t(
-              R,
+            return /* @__PURE__ */ a(
+              H,
               {
-                transform: c,
-                intl: s,
+                transform: b,
+                intl: p,
                 zoom: d,
-                unique: r,
+                unique: l,
                 ...o
               },
               e
             );
           if (o.type === "data")
-            return /* @__PURE__ */ t(
-              T,
+            return /* @__PURE__ */ a(
+              K,
               {
-                onLayerCreated: (l) => {
+                editing: r,
+                onLayerCreated: (t) => {
                 },
-                transform: c,
-                intl: s,
-                group: i,
+                transform: b,
+                intl: p,
+                group: c,
                 zoom: d,
-                unique: r,
+                unique: l,
                 ...o,
-                settings: p.wordress
+                settings: L.wordress,
+                togglePatterns: R,
+                initialPosition: P,
+                waitForFilters: n == "true" || n == !0
               },
               e
             );
           if (o.type === "flow")
-            return /* @__PURE__ */ t(
-              B,
+            return /* @__PURE__ */ a(
+              Y,
               {
-                transform: c,
-                intl: s,
-                group: i,
+                transform: b,
+                intl: p,
+                group: c,
                 zoom: d,
-                unique: r,
-                ...o
+                unique: l,
+                ...o,
+                waitForFilters: n == "true" || n == !0
               },
               e
             );
           if (o.type === "dataPoints")
-            return /* @__PURE__ */ t(
-              U,
+            return /* @__PURE__ */ a(
+              O,
               {
-                transform: c,
-                intl: s,
-                group: i,
+                onZoomToPoint: q,
+                selectedItem: C,
+                transform: b,
+                intl: p,
+                group: c,
                 zoom: d,
-                unique: r,
-                ...o
+                unique: l,
+                ...o,
+                waitForFilters: n == "true" || n == !0
               },
               e
             );
         }) }),
-        /* @__PURE__ */ t(A, { patternsData: null, layers: m, group: i, onItemClick: v }),
-        /* @__PURE__ */ t(
-          Z,
+        /* @__PURE__ */ a(
+          X,
+          {
+            selectedItem: C,
+            d2Click: (o) => I(o),
+            patternsData: null,
+            layers: s,
+            group: c,
+            onItemClick: N,
+            toggleColorLayer: A
+          }
+        ),
+        /* @__PURE__ */ a(
+          Q,
           {
-            rootationEmabled: n(b, a),
-            zoomEnabled: n(C, a),
-            onZoomed: j,
-            width: g,
-            height: u,
+            selectedPoint: Z,
+            rootationEmabled: i(z, r),
+            zoomEnabled: i(x, r),
+            onZoomed: v,
+            width: h,
+            height: w,
             ref: d,
-            group: i,
-            editing: a
+            group: c,
+            identifier: M,
+            editing: r
           }
         )
       ]
     }
-  ) }) }) });
-}, W = (p, r) => ({}), G = {}, no = k(W, G)(V);
+  ) });
+}, $ = (L, l) => ({}), oo = {}, uo = J($, oo)(_);
 export {
-  no as default
+  uo as default
 };

package/dist/esm/embeddable/data/CategoriesProvider.js

@@ -1,35 +1,40 @@
-import { jsx as t, jsxs as h } from "react/jsx-runtime";
-import { useState as J, useRef as b, useEffect as m } from "react";
-import { useDispatch as j, useSelector as u } from "react-redux";
-import { CategoriesContext as w } from "./DataContext.js";
-import { getCategories as v, setData as z } from "../reducers/data.js";
-import { Container as S, Segment as x } from "semantic-ui-react";
-const k = (d) => {
-  const {
-    app: e,
-    filters: n,
-    source: a,
-    store: C,
-    params: r = {},
-    csv: s,
-    group: I,
-    editing: g,
-    children: P
-  } = d, f = j(), [L, y] = J(!1), o = b({ filters: n, params: r, app: e, source: a, csv: s }), c = ["data", "categories", e];
-  r.dvzProxyDatasetId && c.push(r.dvzProxyDatasetId);
-  const l = u((i) => i.getIn([...c, "items"])), D = u((i) => i.getIn([...c, "error"])), p = u((i) => i.getIn([...c, "loading"]));
-  return m(() => {
-    !l && !p && f(v(d));
-  }, []), m(() => {
-    (n !== o.current.filters || JSON.stringify(r) !== JSON.stringify(o.current.params) || e !== o.current.app || o.current.source !== a || s !== o.current.csv) && (e === "csv" ? f(z({ app: e, csv: s, store: C, params: r, group: I })) : (g && (r.v = (Math.random() + 1).toString(36).substring(7)), y(!1), f(v(d)))), o.current = { filters: n, params: r, app: e, source: a, csv: s };
-  }, [n, r, e, a, s, g]), p ? /* @__PURE__ */ t(S, {}) : l ? /* @__PURE__ */ t(w.Provider, { value: l.toJS(), children: P }) : D ? /* @__PURE__ */ h(x, { color: "red", children: [
-    /* @__PURE__ */ t("h1", { children: "500" }),
-    /* @__PURE__ */ t("p", { children: "Wasn't able to load data" })
-  ] }) : /* @__PURE__ */ t(S, { children: /* @__PURE__ */ h(x, { color: "red", children: [
-    /* @__PURE__ */ t("h1", { children: "404" }),
-    /* @__PURE__ */ t("p", { children: "Can't find this page" })
-  ] }) });
-};
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import u from "react";
+import { connect as S } from "react-redux";
+import { injectIntl as C } from "react-intl";
+import { CategoriesContext as D } from "./DataContext.js";
+import { getCategories as v } from "../reducers/data.js";
+import { Container as h, Segment as l } from "semantic-ui-react";
+class x extends u.Component {
+  componentDidMount() {
+    const { categories: t } = this.props;
+    !t && !this.props.loading && this.props.onLoadData(this.props);
+  }
+  componentDidUpdate(t, s, n) {
+    const { app: e, filters: a, source: o, store: m, params: p, csv: d, group: g, editing: f } = this.props;
+    (a != t.filters || JSON.stringify(p) != JSON.stringify(t.params) || e != t.app || t.source != o || d != t.csv) && (e === "csv" ? this.props.onSetData({ app: e, csv: d, store: m, params: p, group: g }) : (f && (p.v = (Math.random() + 1).toString(36).substring(7)), this.setState({ showLoading: !1 }), this.props.onLoadData(this.props), setTimeout(this.checkLoadingTime, 100)));
+  }
+  render() {
+    const { data: t, loading: s, error: n } = this.props;
+    return s ? /* @__PURE__ */ r(h, {}) : t ? /* @__PURE__ */ r(D.Provider, { value: t.toJS(), children: this.props.children }) : n ? /* @__PURE__ */ c(l, { color: "red", children: [
+      /* @__PURE__ */ r("h1", { children: "500" }),
+      /* @__PURE__ */ r("p", { children: "Wasn't able to load data" })
+    ] }) : /* @__PURE__ */ r(h, { children: /* @__PURE__ */ c(l, { color: "red", children: [
+      /* @__PURE__ */ r("h1", { children: "404" }),
+      /* @__PURE__ */ r("p", { children: "Can't find this page" })
+    ] }) });
+  }
+}
+const I = (i, t) => {
+  const { app: s, params: n, dvzProxyDatasetId: e, uniqueStorage: a } = t, o = ["data", "categories", s];
+  return e && o.push(e), a && o.push(a), {
+    data: i.getIn([...o, "items"]),
+    error: i.getIn([...o, "error"]),
+    loading: i.getIn([...o, "loading"])
+  };
+}, L = {
+  onLoadData: v
+}, O = S(I, L)(C(x));
 export {
-  k as default
+  O as default
 };