@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";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),x=require("react"),I=require("d3"),z=require("semantic-ui-react"),O=require("react-intl");function _(c){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const i in c)if(i!=="default"){const o=Object.getOwnPropertyDescriptor(c,i);Object.defineProperty(t,i,o.get?o:{enumerable:!0,get:()=>c[i]})}}return t.default=c,Object.freeze(t)}const f=_(I);class k extends x.Component{constructor(t){super(t),this.zoomRef=x.createRef(),this.lastInternalZoom=null,this.lastUserTransform=null,this.zoomed=this.zoomed.bind(this),this.zoomEnd=this.zoomEnd.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.initialized=!1,this.zoom=f.zoom().scaleExtent([.1,300]).on("zoom",this.zoomed).on("end",this.zoomEnd)}componentDidMount(){const{zoomEnabled:t=!0}=this.props,i=this.getSelection();this._fullView(!1),t&&(this.props.editing||(i.on("dblclick.zoom",null),i.on("dblclick",o=>{o.preventDefault(),i.transition().duration(250).call(this.zoom.scaleBy,1.5)}),i.on("wheel.zoom",null),i.on("wheel",o=>{o.preventDefault();const e=o.deltaY>0?1/1.5:1.5;i.transition().duration(250).call(this.zoom.scaleBy,e)}),i.call(this.zoom))),this.fullView()}componentDidUpdate(t){const i=this.getSelection(),{zoomEnabled:o,initialPosition:e,readyState:m,height:u,width:h,selectedPoint:s,projection:d,editing:a}=this.props;!this.initialized&&this.props.readyToZoom&&(this.fullView(),this.initialized=!0);const l=JSON.stringify(t.initialPosition)!==JSON.stringify(e);if(t.zoomEnabled!==o||l)if(o&&i||a){if(e&&this.lastInternalZoom){const r=(V,j=3)=>Number(V.toFixed(j)),{x:g,y:p,k:b}=e,{x:w,y,k:S}=this.lastInternalZoom;if(Math.abs(r(g)-r(w))<1&&Math.abs(r(p)-r(y))<1&&Math.abs(r(b)-r(S))<.001){this.lastInternalZoom=null;return}}i.call(this.zoom).on(".zoom",this.zoom),this.transition2fullView()}else i&&i.on(".zoom",null);!t.readyState&&m&&this.fullView(),(t.height!==u||t.width!==h)&&this.fullView(),s!=t.selectedPoint&&s&&this.zoomTo(d([s.y,s.x]))}zoomed(t){var o,e;const i=this.getSelection();i&&(i.selectAll("g.zoomable").attr("transform",t.transform),(e=(o=this.props).onZoomed)==null||e.call(o,t.transform),this.props.editing&&t.sourceEvent&&(this.lastUserTransform=t.transform))}zoomEnd(t){var s,d;const{identifier:i,editing:o,width:e,height:m,postMessageOrigin:u="*"}=this.props,h=this.lastUserTransform||t.transform;if(this.lastUserTransform=null,(d=(s=this.props).onZoomed)==null||d.call(s,h),o){const a=(w,y=3)=>Number(w.toFixed(y)),{x:l,y:r,k:g}=h,p={x:a(l),y:a(r),k:a(g)};this.lastInternalZoom=p;const b={type:`d3_map_${i}`,value:{...p,width:e,height:m}};window.parent.postMessage(b,u)}}zoomIn(){const t=this.getSelection();if(t){const i=this.props.editing?0:this.props.transitionDuration||500;t.transition().duration(i).call(this.zoom.scaleBy,2)}}zoomTo(t){const i=f.zoomIdentity.translate(this.props.width/2,this.props.height/2).scale(200).translate(-t[0],-t[1]),o=this.getSelection();this.props.editing||this.props.transitionDuration,o.transition().duration(750).call(this.zoom.transform,i)}zoomOut(){const t=this.getSelection();if(t){const i=this.props.editing?0:this.props.transitionDuration||500;t.transition().duration(i).call(this.zoom.scaleBy,.5)}}reset(){const t=this.getSelection();t&&(this.props.editing?t.call(this.zoom.transform,f.zoomIdentity.translate(0,0).scale(1)):this.transition2fullView())}getSelection(){return f.select(this.zoomRef.current.parentNode.querySelector("svg"))}_fullView(t=!0){const{initialPosition:i,width:o,height:e,transform:m}=this.props;if(!i)return;const{x:u=100,y:h=23,k:s=1,width:d,height:a}=i;if(!d||!a||!s)return;const l=this.getSelection();l&&(console.log("SVG parent client sizes:",l.node().parentNode.clientWidth,l.node().parentNode.clientHeight),l.transition().duration(t?750:0).attr("transform",m).call(this.zoom.transform,f.zoomIdentity.translate(u,h).scale(s)))}transition2fullView(){this._fullView(!0)}fullView(){this._fullView(!1)}render(){const{editing:t,zoomEnabled:i=!0}=this.props;return n.jsx("div",{ref:this.zoomRef,className:`zoom ${i?"":"disabled"}`,children:(t||i)&&n.jsxs("div",{children:[n.jsx("div",{className:"button plus",onClick:this.zoomIn,children:n.jsx(z.Icon,{name:"plus",size:"small"})}),n.jsx("div",{className:"button minus",onClick:this.zoomOut,children:n.jsx(z.Icon,{name:"minus",size:"small"})}),n.jsx(z.Popup,{content:n.jsx(O.FormattedMessage,{id:"map.reset.tooltip",defaultMessage:"Reset zoom"}),trigger:n.jsx("div",{className:"button reset",onClick:this.reset,children:n.jsx(z.Icon,{name:"repeat",size:"small"})})})]})})}}exports.default=k;