@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 f from "d3";
import y from "./Layer.js";
class A extends y {
  constructor() {
    super(), this.gRef = R.createRef();
  }
  createPaths(e) {
    const {
      path: s,
      fillColor: a,
      borderColor: r,
      projection: o
    } = 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"));
  }
  createLabels(e) {
    const {
      path: s,
      labelFilter: a = [],
      labelSettings: r = {},
      labelField: o,
      labelFontSize: i,
      labelColor: n,
      projection: h,
      initialPosition: d
    } = 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");
    }
  }
  createLayer(e) {
    this.createPaths(e), this.createLabels(e);
  }
  componentDidMount() {
    super.componentDidMount();
  }
  componentDidUpdate(e, s, a) {
    const {
      editing: r
    } = this.props;
    r && this.create(), e.visible != this.props.visible && this.g.style("display", this.props.visible ? "block" : "none");
  }
  render() {
    const { name: e, height: s, width: a } = this.props;
    return /* @__PURE__ */ x("g", { ref: this.gRef });
  }
}
export {
  A as default
};