@devgateway/dvz-ui-react/dist/cjs/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.

"use strict";const o=require("react/jsx-runtime"),u=require("react"),p=require("d3"),r=require("semantic-ui-react"),g=require("react-intl");function b(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,i.get?i:{enumerable:!0,get:()=>n[e]})}}return t.default=n,Object.freeze(t)}const a=b(p);class w extends u.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=u.createRef(),this.zoom=a.zoom().scaleExtent([0,300]).on("start",this.zoomStarted).on("zoom",this.zoomed).on("end",this.zoomEnd)}componentDidMount(){const{zoomEnabled:t=!0,rotationEnabled:e}=this.props,i=this.getSelection();i&&t&&(i.call(this.zoom),this.transition2fullView())}componentDidUpdate(t,e,i){const s=this.getSelection();t.zoomEnabled!=this.props.zoomEnabled&&(this.props.zoomEnabled?s&&(s.call(this.zoom),s.on(".zoom",this.zoom),this.transition2fullView()):s&&s.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 e=this.getSelection();e&&e.call(this.zoom.transform,a.zoomIdentity.translate(0,0).scale(1))}else this.transition2fullView()}zoomStarted(){}zoomed(t){this.props.onZoomed(t.transform)}zoomIn(t){const e=this.getSelection();e&&e.transition().call(this.zoom.scaleBy,1.5)}zoomOut(){const t=this.getSelection();t&&t.transition().call(this.zoom.scaleBy,.6667)}getSelection(){return this.zoomRef.current?a.select(this.zoomRef.current.parentNode.getElementsByTagName("svg")[0]):null}_fullView(t=!0){const{editing:e,initialPosition:i,width:s,height:m}=this.props,{x:h=100,y:c=23,k:l=1,width:f,height:z}=i||{},d=this.getSelection();z&&f&&l&&d&&d.transition().call(this.zoom.transform,a.zoomIdentity.translate(h,c).scale(l))}transition2fullView(){this._fullView(!0)}fullView(){this._fullView(!1)}zoomEnd(t){const{group:e,editing:i,width:s,height:m}=this.props;if(i){const{x:h,y:c,k:l}=t.transform;window.parent.postMessage({type:`d3_map_${e}`,value:{k:l,x:h,y:c,width:s,height:m}},"*")}}render(){const{editing:t,zoomEnabled:e=!0}=this.props;return o.jsx("div",{ref:this.zoomRef,className:`zoom ${e?"":"disabled"}`,children:(t||e)&&o.jsxs("div",{children:[o.jsx("div",{className:" button plus",onClick:this.zoomIn,children:o.jsx(r.Icon,{name:"plus",size:"small"})}),o.jsx("div",{className:" button minus",onClick:this.zoomOut,children:o.jsx(r.Icon,{name:"minus",size:"small"})}),o.jsx(r.Popup,{content:o.jsx(g.FormattedMessage,{id:"map.reset.tooltip",defaultMessage:"Reset zoom"}),trigger:o.jsx("div",{className:"button reset",onClick:this.reset,children:o.jsx(r.Icon,{name:"repeat",size:"small"})})})]})})}}module.exports=w;