@devgateway/dvz-ui-react 1.0.7 → 1.1.0

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

@@ -1,66 +1,59 @@
-import { jsx as g } from "react/jsx-runtime";
-import u from "react";
-import * as b from "d3";
-import R from "./Layer.js";
-class L extends R {
+import { jsx as x } from "react/jsx-runtime";
+import R from "react";
+import * as f from "d3";
+import y from "./Layer.js";
+class A extends y {
   constructor() {
-    super(), this.gRef = u.createRef();
+    super(), this.gRef = R.createRef();
   }
-  createPaths(t) {
+  createPaths(e) {
     const {
       path: s,
-      fillColor: o,
-      borderColor: a,
-      projection: r
+      fillColor: a,
+      borderColor: r,
+      projection: o
     } = this.props;
-    this.gRef && this.gRef.current && (this.g = b.select(this.gRef.current), b.select(this.gRef.current.parentElement), this.g.attr("class", "base-layer"), this.g.selectAll("path").remove(), this.g.selectAll(".label").remove(), this.g.selectAll("path").data(t.features).enter().append("path").attr("fill", o).attr("stroke", a).attr("id", "state-borders").attr("d", s), this.props.transform && this.g.attr("transform", this.props.transform));
+    this.gRef && this.gRef.current && (this.g = f.select(this.gRef.current), this.g.attr("class", "base-layer zoomable"), this.g.selectAll(".borders").remove(), this.g.selectAll(".feature-label").remove(), this.g.selectAll(".borders").data(e.features).enter().append("path").attr("fill", a).attr("stroke", r).attr("id", "state-borders").attr("class", "borders").attr("d", s).style("vector-effect", "non-scaling-stroke"));
   }
-  createLabels(t) {
+  createLabels(e) {
     const {
       path: s,
-      labelFilter: o = [],
-      labelSettings: a = {},
-      labelField: r,
-      labelFontSize: l,
-      labelColor: i,
-      projection: n
+      labelFilter: a = [],
+      labelSettings: r = {},
+      labelField: o,
+      labelFontSize: i,
+      labelColor: n,
+      projection: h,
+      initialPosition: d
     } = this.props;
     if (this.gRef && this.gRef.current) {
-      this.g = b.select(this.gRef.current);
-      const c = this.props.transform ? this.props.transform.k : 1;
-      this.g.selectAll(".label").data(t.features.filter((e) => o.indexOf(e.properties[r]) == -1)).enter().append("text").attr("class", "label").attr("font-size", (e) => Math.min(l * 1 / c, l / 2) + "px").text(function(e) {
-        return e.properties[r];
-      }).attr("color", i).attr("fill", i).attr("transform", function(e) {
-        const f = a[e.properties[r] + "_rotation"] || 0, h = a[e.properties[r] + "_offsetX"] || 0, p = a[e.properties[r] + "_offsetY"] || 0, m = s.centroid(e)[0] + h / n.scale(), d = s.centroid(e)[1] + p / n.scale();
-        return "translate(" + [m, d] + "),rotate(" + (f || 0) + ")";
-      }), this.props.transform && this.g.attr("transform", this.props.transform);
+      this.g = f.select(this.gRef.current);
+      const l = h.scale(), c = this.props.transform ? this.props.transform.k : d.k;
+      this.g.selectAll(".feature-label").data(e.features.filter((t) => a.indexOf(t.properties[o]) == -1)).enter().append("text").attr("class", "feature-label").attr("font-size", (t) => Math.max(0.5, i / c) + "px").style("pointer-events", "none").text(function(t) {
+        return t.properties[o];
+      }).attr("font-size", (t) => Math.max(0.5, i / c) + "px").attr("color", n).attr("fill", n).attr("transform", function(t) {
+        const p = r[t.properties[o] + "_rotation"] || 0, m = r[t.properties[o] + "_offsetX"] || 0, u = r[t.properties[o] + "_offsetY"] || 0, b = s.centroid(t)[0] + m / l, g = s.centroid(t)[1] + u / l;
+        return "translate(" + [b, g] + "),rotate(" + (p || 0) + ")";
+      }).attr("text-anchor", "middle").attr("dominant-baseline", "middle");
     }
   }
-  createLayer(t) {
-    this.createPaths(t), this.createLabels(t);
+  createLayer(e) {
+    this.createPaths(e), this.createLabels(e);
   }
-  componentDidUpdate(t, s, o) {
+  componentDidMount() {
+    super.componentDidMount();
+  }
+  componentDidUpdate(e, s, a) {
     const {
-      name: a,
-      file: r,
-      path: l,
-      transform: i,
-      labelFilter: n = [],
-      labelField: c,
-      labelFontSize: e,
-      labelColor: f,
-      fillColor: h,
-      borderColor: p,
-      projection: m,
-      update: d
+      editing: r
     } = this.props;
-    (r !== t.file || l !== t.path || m !== t.projection || i !== t.transform || n !== t.labelFilter || c !== t.labelField || e !== t.labelFontSize || f !== t.labelColor || h !== t.fillColor || p !== t.borderColor) && this.create();
+    r && this.create(), e.visible != this.props.visible && this.g.style("display", this.props.visible ? "block" : "none");
   }
   render() {
-    const { name: t, height: s, width: o } = this.props;
-    return /* @__PURE__ */ g("g", { className: "base", ref: this.gRef });
+    const { name: e, height: s, width: a } = this.props;
+    return /* @__PURE__ */ x("g", { ref: this.gRef });
   }
 }
 export {
-  L as default
+  A as default
 };