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