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