@devgateway/dvz-ui-react/dist/esm/embeddable/d3Map/ZoomControl.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 o, jsxs as u } from "react/jsx-runtime";
import c from "react";
import * as l from "d3";
import { Icon as r, Popup as p } from "semantic-ui-react";
import { FormattedMessage as g } from "react-intl";
class y extends c.Component {
  constructor(t) {
    super(t), this.zooming = !1, this.zoomstarted = this.zoomStarted.bind(this), this.zoomEnd = this.zoomEnd.bind(this), this.zoomed = this.zoomed.bind(this), this.zoomIn = this.zoomIn.bind(this), this.zoomOut = this.zoomOut.bind(this), this.reset = this.reset.bind(this), this.fullView = this.fullView.bind(this), this.transition2fullView = this.transition2fullView.bind(this), this._fullView = this._fullView.bind(this), this.zoomRef = c.createRef(), this.zoom = l.zoom().scaleExtent([0, 300]).on("start", this.zoomStarted).on("zoom", this.zoomed).on("end", this.zoomEnd);
  }
  componentDidMount() {
    const { zoomEnabled: t = !0, rotationEnabled: i } = this.props, s = this.getSelection();
    s && t && (s.call(this.zoom), this.transition2fullView());
  }
  componentDidUpdate(t, i, s) {
    const e = this.getSelection();
    t.zoomEnabled != this.props.zoomEnabled && (this.props.zoomEnabled ? e && (e.call(this.zoom), e.on(".zoom", this.zoom), this.transition2fullView()) : e && e.on(".zoom", null)), !t.readyState && this.props.readyState && this.fullView(), (t.height !== this.props.height || t.width !== this.props.width) && this.fullView();
  }
  reset() {
    const {
      editing: t
    } = this.props;
    if (t) {
      const i = this.getSelection();
      i && i.call(
        this.zoom.transform,
        l.zoomIdentity.translate(0, 0).scale(1)
      );
    } else
      this.transition2fullView();
  }
  zoomStarted() {
  }
  zoomed(t) {
    this.props.onZoomed(t.transform);
  }
  /*Button Zoom in*/
  zoomIn(t) {
    const i = this.getSelection();
    i && i.transition().call(this.zoom.scaleBy, 1.5);
  }
  /*Button zoom oit*/
  zoomOut() {
    const t = this.getSelection();
    t && t.transition().call(this.zoom.scaleBy, 0.6667);
  }
  getSelection() {
    return this.zoomRef.current ? l.select(this.zoomRef.current.parentNode.getElementsByTagName("svg")[0]) : null;
  }
  _fullView(t = !0) {
    const { editing: i, initialPosition: s, width: e, height: m } = this.props, { x: h = 100, y: a = 23, k: n = 1, width: f, height: z } = s || {}, d = this.getSelection();
    z && f && n && d && d.transition().call(
      this.zoom.transform,
      l.zoomIdentity.translate(h, a).scale(n)
    );
  }
  transition2fullView() {
    this._fullView(!0);
  }
  fullView() {
    this._fullView(!1);
  }
  zoomEnd(t) {
    const { group: i, editing: s, width: e, height: m } = this.props;
    if (s) {
      const { x: h, y: a, k: n } = t.transform;
      window.parent.postMessage({ type: `d3_map_${i}`, value: { k: n, x: h, y: a, width: e, height: m } }, "*");
    }
  }
  render() {
    const { editing: t, zoomEnabled: i = !0 } = this.props;
    return /* @__PURE__ */ o("div", { ref: this.zoomRef, className: `zoom ${i ? "" : "disabled"}`, children: (t || i) && /* @__PURE__ */ u("div", { children: [
      /* @__PURE__ */ o("div", { className: " button plus", onClick: this.zoomIn, children: /* @__PURE__ */ o(r, { name: "plus", size: "small" }) }),
      /* @__PURE__ */ o("div", { className: " button minus", onClick: this.zoomOut, children: /* @__PURE__ */ o(r, { name: "minus", size: "small" }) }),
      /* @__PURE__ */ o(
        p,
        {
          content: /* @__PURE__ */ o(g, { id: "map.reset.tooltip", defaultMessage: "Reset zoom" }),
          trigger: /* @__PURE__ */ o("div", { className: "button reset", onClick: this.reset, children: /* @__PURE__ */ o(r, { name: "repeat", size: "small" }) })
        }
      )
    ] }) });
  }
}
export {
  y as default
};