@devgateway/dvz-ui-react 1.1.0 → 1.2.0

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

@@ -1,9 +1,9 @@
-import { jsx as F } from "react/jsx-runtime";
+import { jsx as L } from "react/jsx-runtime";
 import "react";
 import q from "./BaseLayer.js";
 import G from "../data/DataProvider.js";
 import H from "../data/DataConsumer.js";
-import * as O from "d3";
+import * as P from "d3";
 import { injectIntl as X } from "react-intl";
 import K from "papaparse";
 import Q from "./BreaksStyles.js";
@@ -11,64 +11,64 @@ class Z extends q {
   constructor() {
     super(), this.createDataLayer = this.createDataLayer.bind(this);
   }
-  createDataLayer(i) {
+  createDataLayer(r) {
     const {
       format: s,
       path: a,
-      tooltip: v,
-      markFillColor: y,
-      markBorderColor: k,
-      markSizeScale: L,
+      tooltip: k,
+      markFillColor: n,
+      markBorderColor: g,
+      markSizeScale: F,
       //circle size
-      featureJoinAttribute: m,
+      featureJoinAttribute: d,
       apiJoinAttribute: A,
-      projection: w,
+      projection: b,
       breaks: C,
-      markSizeScale2: x,
+      markSizeScale2: w,
       //arrow size
       measures: u,
-      zoom: g,
-      offsetPixels: n = 10,
-      waitForFilters: V
-    } = this.props, E = u[0], D = new Q({
+      zoom: v,
+      offsetPixels: l = 10,
+      waitForFilters: N
+    } = this.props, E = u[0], x = new Q({
       breaks: C,
-      defaultFillColor: y,
-      defaultBorderColor: k,
-      defaultSize: x
+      defaultFillColor: n,
+      defaultBorderColor: g,
+      defaultSize: w
     });
     s.style === "compacted" || s.style, s.style, s.currency, parseInt(s.minimumFractionDigits), parseInt(s.maximumFractionDigits);
-    const P = i.features.filter((t) => t.properties._value != null);
-    this.g = O.select(this.gRef.current), this.g.attr("class", "base-layer"), this.props.transform && this.g.attr("transform", this.props.transform), this.g.selectAll(".flow-line").remove(), this.g.selectAll(".start-point").remove(), this.g.selectAll(".end-point").remove(), this.g.select("defs").selectAll("*").remove();
-    const I = this.props.transform ? this.props.transform.k : 1, b = [];
-    P.forEach((t) => {
-      b.push(t), t.properties.destinations.sort((l, e) => l[E] - e[E]).forEach((l) => {
-        const e = l[E];
-        i.features.filter((r) => r.properties[m] == l.value).forEach((r) => {
-          r.properties.meta = l;
-          const p = t.properties[m], o = t.properties[m] + "--" + r.properties[m], d = a.centroid(t), f = a.centroid(r), _ = f[0] - d[0], T = f[1] - d[1], B = Math.sqrt(_ * _ + T * T), M = _ / B, N = T / B, R = [
-            f[0] - M * n,
-            f[1] - N * n
-          ], U = w.invert(R), W = {
+    const _ = r.features.filter((t) => t.properties._value != null);
+    this.g = P.select(this.gRef.current), this.g.attr("class", "base-layer zoomable"), this.props.transform && this.g.attr("transform", this.props.transform), this.g.selectAll(".flow-line").remove(), this.g.selectAll(".start-point").remove(), this.g.selectAll(".end-point").remove(), this.g.select("defs").selectAll("*").remove();
+    const J = this.props.transform ? this.props.transform.k : 1, S = [];
+    _.forEach((t) => {
+      S.push(t), t.properties.destinations.sort((p, e) => p[E] - e[E]).forEach((p) => {
+        const e = p[E];
+        r.features.filter((o) => o.properties[d] == p.value).forEach((o) => {
+          o.properties.meta = p;
+          const c = t.properties[d], i = t.properties[d] + "--" + o.properties[d], f = a.centroid(t), h = a.centroid(o), O = h[0] - f[0], T = h[1] - f[1], I = Math.sqrt(O * O + T * T), V = O / I, M = T / I, R = [
+            h[0] - V * l,
+            h[1] - M * l
+          ], U = b.invert(R), W = {
             type: "LineString",
             coordinates: [
-              w.invert(d),
+              b.invert(f),
               // Start in geo coords
               U
               // New endpoint before d2
             ]
-          }, c = this.g.append("g");
-          this.g.select("defs").append("marker").attr("id", "arrow" + o).attr("markerUnits", "strokeWidth").attr("markerWidth", "6").attr("markerHeight", "6").attr("viewBox", "0 0 24 24").attr("refX", "6").attr("refY", "6").attr("orient", "auto").append("path").attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2").attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2").attr("style", (S) => "fill: " + D.getColor(e) + ";"), c.append("path").attr("d", a(W)).attr("id", o).attr("class", "flow-line").style("fill", "none").style("cursor", "pointer").style("stroke-dasharray", "0").style("stroke", (S) => D.getColor(e)).style("stroke-width", (S) => D.getSize(e)).attr("marker-end", "url(#arrow" + o + ")").on("mouseenter", (S, tt) => {
-            if (c.selectAll("marker").transition().duration("200").style("opacity", 0), c.selectAll(".start-point").transition().duration("200").style("opacity", 0), c.selectAll(".flow-line").transition().duration("200").style("opacity", 0), O.select(S.target).transition().duration("200").style("opacity", 1), c.selectAll("#arrow" + o).transition().duration("200").style("opacity", 1), c.selectAll(".start-point.circle_" + p).transition().duration("200").style("opacity", 1), e) {
-              const J = {}, j = {};
-              Object.keys(t.properties).forEach((h) => {
-                J["origin_" + h] = t.properties[h];
-              }), Object.keys(r.properties).forEach((h) => {
-                j["target_" + h] = r.properties[h];
-              }), Object.keys(r.properties.meta).forEach((h) => {
-                j["target_" + h] = r.properties.meta[h];
+          }, m = this.g.append("g");
+          this.g.select("defs").append("marker").attr("id", "arrow" + i).attr("markerUnits", "strokeWidth").attr("markerWidth", "6").attr("markerHeight", "6").attr("viewBox", "0 0 24 24").attr("refX", "6").attr("refY", "6").attr("orient", "auto").append("path").attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2").attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2").attr("style", (D) => "fill: " + x.getColor(e) + ";"), m.append("path").attr("d", a(W)).attr("id", i).attr("class", "flow-line").style("fill", "none").style("cursor", "pointer").style("stroke-dasharray", "0").style("stroke", (D) => x.getColor(e)).style("stroke-width", (D) => x.getSize(e)).attr("marker-end", "url(#arrow" + i + ")").on("mouseenter", (D, tt) => {
+            if (m.selectAll("marker").transition().duration("200").style("opacity", 0), m.selectAll(".start-point").transition().duration("200").style("opacity", 0), m.selectAll(".flow-line").transition().duration("200").style("opacity", 0), P.select(D.target).transition().duration("200").style("opacity", 1), m.selectAll("#arrow" + i).transition().duration("200").style("opacity", 1), m.selectAll(".start-point.circle_" + c).transition().duration("200").style("opacity", 1), e) {
+              const B = {}, j = {};
+              Object.keys(t.properties).forEach((y) => {
+                B["origin_" + y] = t.properties[y];
+              }), Object.keys(o.properties).forEach((y) => {
+                j["target_" + y] = o.properties[y];
+              }), Object.keys(o.properties.meta).forEach((y) => {
+                j["target_" + y] = o.properties.meta[y];
               });
               const Y = {
-                ...J,
+                ...B,
                 ...j,
                 meta: {
                   [A]: t.properties.meta ? t.properties.meta.value : "",
@@ -76,106 +76,109 @@ class Z extends q {
                   value: e
                 }
               };
-              this.showToolTip(v, Y, D.getColor(r.properties._value));
+              this.showToolTip(k, Y, x.getColor(o.properties._value));
             }
-          }).on("mouseout", (S) => {
-            this.hiddenToolTip(), O.selectAll(".flow-line").transition().duration("100").style("opacity", 1), c.selectAll(".start-point").transition().duration("100").style("opacity", 1), c.selectAll("marker").transition().duration("100").style("opacity", 1);
-          }), c.append("text").append("textPath").attr("xlink:href", o).style("text-anchor", "middle").attr("startOffset", "50%").attr("fill", "#fff").text("Yay, my text is on a wavy path");
+          }).on("mouseout", (D) => {
+            this.hiddenToolTip(), P.selectAll(".flow-line").transition().duration("100").style("opacity", 1), m.selectAll(".start-point").transition().duration("100").style("opacity", 1), m.selectAll("marker").transition().duration("100").style("opacity", 1);
+          }), m.append("text").append("textPath").attr("xlink:href", i).style("text-anchor", "middle").attr("startOffset", "50%").attr("fill", "#fff").text("Yay, my text is on a wavy path");
         });
       });
-    }), b.forEach((t) => {
-      this.g.append("circle").attr("fill", y).attr("stroke", k).attr("class", "start-point circle_" + t.properties[m]).attr("stroke-width", 2).style("vector-effect", "non-scaling-stroke").attr("cx", a.centroid(t)[0]).attr("cy", a.centroid(t)[1]).attr("r", () => L * 1 / I).on("mouseenter", (l) => {
+    }), S.forEach((t) => {
+      this.g.append("circle").attr("fill", n).attr("stroke", g).attr("class", "start-point circle_" + t.properties[d]).attr("stroke-width", 2).style("vector-effect", "non-scaling-stroke").attr("cx", a.centroid(t)[0]).attr("cy", a.centroid(t)[1]).attr("r", () => F * 1 / J).on("mouseenter", (p) => {
         this.showToolTip("{name_en}", t.properties, "");
-      }).on("mouseout", (l) => {
+      }).on("mouseout", (p) => {
         this.hiddenToolTip();
       });
     });
   }
   create() {
     const {
-      app: i,
+      app: r,
       name: s,
       file: a,
-      path: v,
-      csv: y,
-      zoom: k,
-      labelFilter: L = [],
-      labelField: m,
+      path: k,
+      csv: n,
+      zoom: g,
+      labelFilter: F = [],
+      labelField: d,
       labelFontSize: A,
-      labelColor: w,
+      labelColor: b,
       fillColor: C,
-      borderColor: x,
+      borderColor: w,
       featureJoinAttribute: u,
-      editing: g,
-      data: n,
-      breaks: V,
+      editing: v,
+      data: l,
+      breaks: N,
       markFillColor: E,
-      markSizeScale: D,
-      measures: P,
-      flowValuesFrom: I
+      markSizeScale: x,
+      measures: _,
+      flowValuesFrom: J
     } = this.props;
-    a != "none" && this.loadJSON(a).then((b) => {
-      const t = b.features.map((e) => {
-        const r = e.properties[u];
-        if (i != "csv" && n && n.children) {
-          const p = n.children.filter((o) => o.value.indexOf(r) > -1);
-          if (p.length > 0) {
-            const o = p[0][P[0]];
-            e.properties.meta = p[0], e.properties._value = o, e.properties.destinations = p[0].children;
+    a != "none" && this.loadJSON(a).then((S) => {
+      const t = S.features.map((e) => {
+        const o = e.properties[u];
+        if (r != "csv" && l && l.children) {
+          const c = l.children.filter((i) => i.value.indexOf(o) > -1);
+          if (c.length > 0) {
+            const i = c[0][_[0]];
+            e.properties.meta = c[0], e.properties._value = i, e.properties.destinations = c[0].children;
           }
-        } else if (i == "csv") {
-          const p = K.parse(y, { header: !0, dynamicTyping: !0 }), o = e.properties[u];
-          p.data.filter((f) => f.origin == o);
-          const d = p.data.filter((f) => f.origin == o)[0];
-          d != null && (alert("CSV Not implemented Yet, please do it if you have time"), e.properties.meta = d, e.properties._value = d.value, e.properties.destinations = d.destination);
+        } else if (r == "csv") {
+          const c = K.parse(n, { header: !0, dynamicTyping: !0 }), i = e.properties[u];
+          c.data.filter((h) => h.origin == i);
+          const f = c.data.filter((h) => h.origin == i)[0];
+          f != null && (alert("CSV Not implemented Yet, please do it if you have time"), e.properties.meta = f, e.properties._value = f.value, e.properties.destinations = f.destination);
         }
         return e;
-      }), l = { ...b, features: t };
-      this.createDataLayer(l);
+      }), p = { ...S, features: t };
+      this.createDataLayer(p);
     });
   }
-  componentDidUpdate(i, s, a) {
-    const { projection: v } = this.props;
-    this.create();
+  componentDidUpdate(r, s, a) {
+    const { projection: k, editing: n, data: g } = this.props;
+    if ((n || JSON.stringify(r.data) !== JSON.stringify(g)) && this.create(), r.visible != this.props.visible) {
+      debugger;
+      this.g.style("display", this.props.visible ? "" : "none");
+    }
   }
   componentDidMount() {
     this.create(), this.props.zoom.current.fullView();
   }
   render() {
-    const { id: i } = this.props;
-    return /* @__PURE__ */ F("g", { id: "data-" + i, className: "data " + i, ref: this.gRef, children: /* @__PURE__ */ F("defs", {}) });
+    const { id: r } = this.props;
+    return /* @__PURE__ */ L("g", { id: "data-" + r, className: "data " + r, ref: this.gRef, children: /* @__PURE__ */ L("defs", {}) });
   }
 }
 const $ = (z) => {
   const {
-    id: i,
+    id: r,
     unique: s,
     filters: a,
-    csv: v,
-    app: y,
-    group: k = "default",
-    flowOrigin: L,
-    editing: m,
+    csv: k,
+    app: n,
+    group: g = "default",
+    flowOrigin: F,
+    editing: d,
     flowDestination: A,
-    dvzProxyDatasetId: w,
+    dvzProxyDatasetId: b,
     waitForFilters: C
-  } = z, x = { dvzProxyDatasetId: w }, u = a || {};
-  return u && u.forEach && u.forEach((g) => {
-    g.value != null && g.value.filter((n) => n != null && n.toString().trim() != "").length > 0 && (x[g.param] = g.value);
-  }), /* @__PURE__ */ F(
+  } = z, w = { dvzProxyDatasetId: b }, u = a || {};
+  return u && u.forEach && u.forEach((v) => {
+    v.value != null && v.value.filter((l) => l != null && l.toString().trim() != "").length > 0 && (w[v.param] = v.value);
+  }), /* @__PURE__ */ L(
     G,
     {
-      editing: m,
-      params: x,
+      editing: d,
+      params: w,
       waitForFilters: C,
-      app: y,
-      csv: decodeURIComponent(v),
-      group: k,
+      app: n,
+      csv: decodeURIComponent(k),
+      group: g,
       ignoreErrors: !0,
       isSvg: !0,
-      store: [y, s, i],
-      source: L + "/" + A,
-      children: /* @__PURE__ */ F(H, { children: /* @__PURE__ */ F(Z, { ...z }) })
+      store: [n, s, r],
+      source: F + "/" + A,
+      children: /* @__PURE__ */ L(H, { children: /* @__PURE__ */ L(Z, { ...z }) })
     }
   );
 }, pt = X($);

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

@@ -1,50 +1,61 @@
-import { jsx as l, jsxs as x } from "react/jsx-runtime";
+import { jsx as n, jsxs as I } 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 {
+import * as f from "d3";
+import { Icon as b, Popup as k } from "semantic-ui-react";
+import { FormattedMessage as N } from "react-intl";
+class T extends y.Component {
   constructor(t) {
-    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);
+    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.initialized = !1, this.zoom = f.zoom().scaleExtent([0.1, 300]).on("zoom", this.zoomed).on("end", this.zoomEnd);
   }
   componentDidMount() {
-    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))));
+    const { zoomEnabled: t = !0 } = this.props, i = this.getSelection();
+    this._fullView(!1), t && (this.props.editing || (i.on("dblclick.zoom", null), i.on("dblclick", (o) => {
+      o.preventDefault(), i.transition().duration(250).call(this.zoom.scaleBy, 1.5);
+    }), i.on("wheel.zoom", null), i.on("wheel", (o) => {
+      o.preventDefault();
+      const s = o.deltaY > 0 ? 1 / 1.5 : 1.5;
+      i.transition().duration(250).call(this.zoom.scaleBy, s);
+    }), i.call(this.zoom))), 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) {
+    const i = this.getSelection(), {
+      zoomEnabled: o,
+      initialPosition: s,
+      readyState: c,
+      height: d,
+      width: h,
+      selectedPoint: e,
+      projection: m,
+      editing: a
+    } = this.props;
+    !this.initialized && this.props.readyToZoom && (this.fullView(), this.initialized = !0);
+    const l = JSON.stringify(t.initialPosition) !== JSON.stringify(s);
+    if (t.zoomEnabled !== o || l)
+      if (o && i || a) {
         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) {
+          const r = (S, x = 3) => Number(S.toFixed(x)), { x: p, y: u, k: z } = s, { x: g, y: w, k: V } = this.lastInternalZoom;
+          if (Math.abs(r(p) - r(g)) < 1 && Math.abs(r(u) - r(w)) < 1 && Math.abs(r(z) - r(V)) < 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]));
+        i.call(this.zoom).on(".zoom", this.zoom), this.transition2fullView();
+      } else i && i.on(".zoom", null);
+    !t.readyState && c && this.fullView(), (t.height !== d || t.width !== h) && this.fullView(), e != t.selectedPoint && e && this.zoomTo(m([e.y, e.x]));
   }
   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));
+    var o, s;
+    const i = this.getSelection();
+    i && (i.selectAll("g.zoomable").attr("transform", t.transform), (s = (o = this.props).onZoomed) == null || s.call(o, t.transform), this.props.editing && t.sourceEvent && (this.lastUserTransform = t.transform));
   }
   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) };
+    var e, m;
+    const { identifier: i, editing: o, width: s, height: c, postMessageOrigin: d = "*" } = this.props, h = this.lastUserTransform || t.transform;
+    if (this.lastUserTransform = null, (m = (e = this.props).onZoomed) == null || m.call(e, h), o) {
+      const a = (g, w = 3) => Number(g.toFixed(w)), { x: l, y: r, k: p } = h, u = { x: a(l), y: a(r), k: a(p) };
       this.lastInternalZoom = u;
       const z = {
-        type: `d3_map_${o}`,
+        type: `d3_map_${i}`,
         value: {
           ...u,
           width: s,
@@ -57,36 +68,35 @@ class O extends y.Component {
   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);
+      const i = this.props.editing ? 0 : this.props.transitionDuration || 500;
+      t.transition().duration(i).call(this.zoom.scaleBy, 2);
     }
   }
   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);
+    const i = f.zoomIdentity.translate(this.props.width / 2, this.props.height / 2).scale(200).translate(-t[0], -t[1]), o = this.getSelection();
+    this.props.editing || this.props.transitionDuration, o.transition().duration(750).call(this.zoom.transform, i);
   }
   zoomOut() {
     const t = this.getSelection();
     if (t) {
-      const o = this.props.editing ? 0 : this.props.transitionDuration || 500;
-      t.transition().duration(o).call(this.zoom.scaleBy, 0.5);
+      const i = this.props.editing ? 0 : this.props.transitionDuration || 500;
+      t.transition().duration(i).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());
+    t && (this.props.editing ? t.call(this.zoom.transform, f.zoomIdentity.translate(0, 0).scale(1)) : this.transition2fullView());
   }
   getSelection() {
-    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;
+    return f.select(this.zoomRef.current.parentNode.querySelector("svg"));
   }
   _fullView(t = !0) {
-    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));
+    const { initialPosition: i, width: o, height: s, transform: c } = this.props;
+    if (!i) return;
+    const { x: d = 100, y: h = 23, k: e = 1, width: m, height: a } = i;
+    if (!m || !a || !e) return;
+    const l = this.getSelection();
+    l && (console.log("SVG parent client sizes:", l.node().parentNode.clientWidth, l.node().parentNode.clientHeight), l.transition().duration(t ? 750 : 0).attr("transform", c).call(this.zoom.transform, f.zoomIdentity.translate(d, h).scale(e)));
   }
   transition2fullView() {
     this._fullView(!0);
@@ -95,20 +105,20 @@ class O extends y.Component {
     this._fullView(!1);
   }
   render() {
-    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,
+    const { editing: t, zoomEnabled: i = !0 } = this.props;
+    return /* @__PURE__ */ n("div", { ref: this.zoomRef, className: `zoom ${i ? "" : "disabled"}`, children: (t || i) && /* @__PURE__ */ I("div", { children: [
+      /* @__PURE__ */ n("div", { className: "button plus", onClick: this.zoomIn, children: /* @__PURE__ */ n(b, { name: "plus", size: "small" }) }),
+      /* @__PURE__ */ n("div", { className: "button minus", onClick: this.zoomOut, children: /* @__PURE__ */ n(b, { name: "minus", size: "small" }) }),
+      /* @__PURE__ */ n(
+        k,
         {
-          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" }) })
+          content: /* @__PURE__ */ n(N, { id: "map.reset.tooltip", defaultMessage: "Reset zoom" }),
+          trigger: /* @__PURE__ */ n("div", { className: "button reset", onClick: this.reset, children: /* @__PURE__ */ n(b, { name: "repeat", size: "small" }) })
         }
       )
     ] }) });
   }
 }
 export {
-  O as default
+  T as default
 };