@devgateway/dvz-ui-react/dist/esm/embeddable/d3Map/Map.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 g } from "react/jsx-runtime";
import a from "react";
import * as s from "d3";
class u extends a.Component {
  constructor(t) {
    super(t), this.svgRef = a.createRef(), this.dragged = this.dragged.bind(this);
  }
  componentDidUpdate(t, o, r) {
    if (t.projection !== this.props.projection) {
      const n = s.geoPath().projection(this.props.projection);
      this.setState({ projection: this.props.projection, path: n });
    }
    const { rotationEnabled: i } = this.props, e = s.select(this.svgRef.current).datum({
      x: 0,
      y: 0
    });
    i ? e.call(s.drag().on("drag", this.dragged)) : e.on(".drag", null);
  }
  componentDidMount() {
    const { rotationEnabled: t } = this.props, o = s.select(this.svgRef.current).datum({
      x: 0,
      y: 0
    });
    t && o.call(s.drag().on("drag", this.dragged));
  }
  dragged(t, o) {
    const r = {
      x: 0,
      y: 0
    }, { projection: i, width: e, height: n } = this.props, c = s.scaleLinear().domain([-e, e]).range([-180, 180]), h = s.scaleLinear().domain([-n, n]).range([90, -90]), p = {
      x: c(o.x = t.x),
      y: h(o.y = t.y)
    };
    i.rotate([r.x + p.x, r.y + p.y]);
    const d = s.geoPath().projection(i);
    this.setState({ projection: i, path: d });
  }
  render() {
    const { projection: t, width: o, height: r, path: i } = this.props;
    return /* @__PURE__ */ g("svg", { viewBox: `0 0 ${o} ${r}`, className: "map", height: r, width: o, ref: this.svgRef, children: t && this.props.children ? this.props.children.map((e) => a.cloneElement(e, {
      ...this.props,
      svg: this.svgRef.current,
      ...this.state
    })) : null });
  }
}
export {
  u as default
};