@devgateway/dvz-ui-react/dist/esm/embeddable/d3Map/BaseLayer.js

A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.

import { jsx as x } from "react/jsx-runtime";
import R from "react";
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: r,
      borderColor: o,
      projection: i
    } = this.props;
    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: r = [],
      labelSettings: o = {},
      labelField: i,
      labelFontSize: f,
      labelColor: l,
      projection: h,
      initialPosition: d,
      minLabelZoomVisible: b
    } = this.props;
    if (this.gRef && this.gRef.current) {
      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, m = o[t.properties[i] + "_offsetX"] || 0, g = o[t.properties[i] + "_offsetY"] || 0, u = s.centroid(t)[0] + m / a, y = s.centroid(t)[1] + g / 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, 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), this.props.onReady && this.props.onReady();
  }
  componentDidMount() {
    super.componentDidMount();
  }
  componentDidUpdate(e, s, r) {
    const {
      editing: o
    } = this.props;
    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: r } = this.props;
    return /* @__PURE__ */ x("g", { ref: this.gRef });
  }
}
export {
  F as default
};