@devgateway/dvz-ui-react 1.1.1 → 1.2.0

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

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