Merge pull request #179 from giorgiabosello/bugfix/175

🐛 fix errors on draggable markers - #175
giorgiabosello · Dec 20, 2023 · 68de2c3 · 68de2c3
2 parents 153666a + d5b68b3
commit 68de2c3
Show file tree

Hide file tree

Showing 14 changed files with 548 additions and 402 deletions.
diff --git a/dist/index.cjs b/dist/index.cjs
@@ -4,6 +4,6 @@ var react = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
 
-var S={};function Y(e){let r=document.querySelector(`script[src="${e}"]`),a=r==null?void 0:r.getAttribute("data-status");return {node:r,status:a}}function J(e={src:"",attributes:{},callbacks:{onLoadCallback:()=>{},onErrorCallback:()=>{}},elementIdToAppend:""},r,a={removeOnUnmount:!1,shouldPreventLoad:!1}){let[l,s]=react.useState(()=>!e.src||a!=null&&a.shouldPreventLoad?"idle":typeof window>"u"?"loading":S[e.src]??"loading");return react.useEffect(()=>{var u,n,m;if(r){s(r);return}if(!(e!=null&&e.src)||a!=null&&a.shouldPreventLoad)return;let i=S[e.src];if(i==="ready"||i==="error"){s(i);return}let c=Y(e.src),t=c.node;if(t){let p=c.status??i??"loading";switch(p){case"loading":case"ready":(n=e.callbacks)!=null&&n.onLoadCallback&&e.callbacks.onLoadCallback();break;case"error":(m=e.callbacks)!=null&&m.onErrorCallback&&e.callbacks.onErrorCallback();break;}s(p);}else {t=document.createElement("script"),t.src=e.src,t.async=!0,t.setAttribute("data-status","loading"),e.attributes&&Object.entries(e.attributes).length>0&&Object.entries(e.attributes).map(([g,d])=>t==null?void 0:t.setAttribute(g,d)),e.elementIdToAppend&&document.getElementById(e.elementIdToAppend)?(u=document.getElementById(e.elementIdToAppend))==null||u.appendChild(t):document.body.appendChild(t);let p=g=>{let d=g.type==="load"?"ready":"error";t==null||t.setAttribute("data-status",d);};t.addEventListener("load",p),t.addEventListener("error",p);}let o=p=>{var d,f;let g=p.type==="load"?"ready":"error";p.type==="load"?(d=e.callbacks)!=null&&d.onLoadCallback&&e.callbacks.onLoadCallback():(f=e.callbacks)!=null&&f.onErrorCallback&&e.callbacks.onErrorCallback(),s(g),S[e.src]=g;};return t.addEventListener("load",o),t.addEventListener("error",o),()=>{t&&(t.removeEventListener("load",o),t.removeEventListener("error",o)),t&&(a!=null&&a.removeOnUnmount)&&t.remove();}},[e,r,l]),l}var O=J;var T=({apiKey:e,libraries:r=[],loadScriptExternally:a=!1,status:l="idle",externalApiParams:s,callback:i})=>{var o;typeof window<"u"&&(window.googleMapsCallback=i);let c=(o=new URLSearchParams(s))==null?void 0:o.toString(),t=e?{src:`https://maps.googleapis.com/maps/api/js?key=${e}&callback=googleMapsCallback&libraries=${r==null?void 0:r.join(",")}${c?`&${c}`:""}`,attributes:{id:"googleMapsApi"}}:{src:`https://maps.googleapis.com/maps/api/js?callback=googleMapsCallback&libraries=${r==null?void 0:r.join(",")}`,attributes:{id:"googleMapsApi"}};return O(t,a?l:void 0)};var x=(e,r,a=1e-6)=>{if(e.length&&r.length){for(let l=0;l!==e.length;++l)if(Math.abs(e[l]-r[l])>a)return !1;return !0}return !1};var _=(e,r)=>{let a=react.useRef(),l=a.current,s=r(l,e);return react.useEffect(()=>{s||(a.current=e);}),s?l:e},H=_;var k=e=>{try{return {lat:e==null?void 0:e.lat(),lng:e==null?void 0:e.lng()}}catch{return e}},K=({container:e,pane:r,position:a,maps:l,drag:s})=>{class i extends google.maps.OverlayView{onAdd=()=>{var u;let t=this;s!=null&&s.draggable&&(this.get("map").getDiv().addEventListener("mouseleave",()=>{google.maps.event.trigger(this.container,"mouseup");}),this.container.addEventListener("mousedown",n=>{var m;this.container.style.cursor="grabbing",(m=t.map)==null||m.set("draggable",!1),t.set("origin",n),s.onDragStart(n,{latLng:k(this.position)}),t.moveHandler=this.get("map").getDiv().addEventListener("mousemove",p=>{let g=t.get("origin"),d=g.clientX-p.clientX,f=g.clientY-p.clientY,b=t.getProjection().fromLatLngToDivPixel(t.position);if(b===null)return;let v=t.getProjection().fromDivPixelToLatLng(new l.Point(b.x-d,b.y-f));t.set("position",v),t.set("origin",p),t.draw(),s.onDrag(p,{latLng:k(v)});});}),this.container.addEventListener("mouseup",n=>{var m;(m=t.map)==null||m.set("draggable",!0),this.container.style.cursor="default",t.moveHandler&&(google.maps.event.removeListener(t.moveHandler),t.moveHandler=null),s.onDragEnd(n,{latLng:k(t.position)});}));let o=(u=this.getPanes())==null?void 0:u[this.pane];o==null||o.classList.add("google-map-markers-overlay"),o==null||o.appendChild(this.container);};draw=()=>{let o=this.getProjection().fromLatLngToDivPixel(this.position);o!==null&&(this.container.style.transform=`translate(${o.x}px, ${o.y}px)`,this.container.style.width="0px",this.container.style.height="0px");};onRemove=()=>{this.container.parentNode!==null&&(google.maps.event.clearInstanceListeners(this.container),this.container.parentNode.removeChild(this.container));};container;pane;position;map=this.getMap();moveHandler;constructor(t,o,u){super(),this.container=t,this.pane=o,this.position=u,this.moveHandler=null;}}return new i(e,r,a)},U=K;var ee=({pane:e="floatPane",position:r,map:a,maps:l,zIndex:s=0,children:i,drag:c})=>{let t=react.useMemo(()=>{let n=document.createElement("div");return n.style.position="absolute",n},[]),o=react.useMemo(()=>U({container:t,pane:e,position:r,maps:l,drag:c}),[t,c,l,e,r]),u=H(i==null?void 0:i.props,(n,m)=>n&&n.lat===m.lat&&n.lng===m.lng);return react.useEffect(()=>!o.map&&a?(o==null||o.setMap(a),()=>{o==null||o.setMap(null);}):()=>{},[a,u]),react.useEffect(()=>{t.style.zIndex=`${s}`;},[s,t]),reactDom.createPortal(i,t)},R=ee;var P=()=>{},ae=({children:e,map:r,maps:a})=>{let l=react.useMemo(()=>!r||!a?[]:react.Children.map(e,s=>{if(react.isValidElement(s)){let i={lat:s.props.lat,lng:s.props.lng},{zIndex:c,draggable:t=!1,onDragStart:o=P,onDrag:u=P,onDragEnd:n=P}=s.props||{};return s=react.cloneElement(s,{...s.props,draggable:void 0,onDragStart:void 0,onDrag:void 0,onDragEnd:void 0}),jsxRuntime.jsx(R,{position:new a.LatLng(i.lat,i.lng),map:r,maps:a,zIndex:c,drag:{draggable:t,onDragStart:o,onDrag:u,onDragEnd:n},children:s})}return null}),[e,r,a]);return jsxRuntime.jsx("div",{children:l})},j=ae;function le({children:e=null,style:r={width:"100%",height:"100%",left:0,top:0,margin:0,padding:0,position:"absolute"},defaultCenter:a,defaultZoom:l,onGoogleApiLoaded:s,onChange:i,options:c={},events:t=[]}){let o=react.useRef(null),u=react.useRef([]),[n,m]=react.useState(),[p,g]=react.useState(),[d,f]=react.useState(!1),b=react.useCallback(()=>{var v,y;try{if(!n)return;let E=n.getZoom()??l,M=n.getBounds(),F=[(v=n.getCenter())==null?void 0:v.lng(),(y=n.getCenter())==null?void 0:y.lat()],h=M==null?void 0:M.getNorthEast(),L=M==null?void 0:M.getSouthWest();if(!h||!L||!M)return;let D=[L.lng(),L.lat(),h.lng(),h.lat()];x(D,u.current)||(i&&i({zoom:E,center:F,bounds:M}),u.current=D);}catch(E){console.error(E);}},[n,i]);return react.useEffect(()=>{o.current&&!n&&(m(new google.maps.Map(o.current,{center:a,zoom:l,...c})),g(google.maps));},[a,l,n,o,c]),react.useEffect(()=>{n&&!d&&(typeof s=="function"&&p&&s({map:n,maps:p,ref:o.current}),f(!0),google.maps.event.hasListeners(n,"idle")&&google.maps.event.clearListeners(n,"idle"),google.maps.event.addListener(n,"idle",b));},[d,n,s]),react.useEffect(()=>()=>{n&&google.maps.event.clearListeners(n,"idle");},[n]),jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{ref:o,style:r,className:"google-map",...t==null?void 0:t.reduce((v,{name:y,handler:E})=>(v[y]=E,v),{})}),e&&n&&p&&jsxRuntime.jsx(j,{map:n,maps:p,children:e})]})}var q=le;var ue=react.forwardRef(({apiKey:e="",libraries:r=["places","geometry"],children:a=null,loadingContent:l="Google Maps is loading",idleContent:s="Google Maps is on idle",errorContent:i="Google Maps is on error",mapMinHeight:c="unset",containerProps:t={},loadScriptExternally:o=!1,status:u="idle",scriptCallback:n=()=>{},externalApiParams:m={},...p},g)=>{let d={ready:jsxRuntime.jsx(q,{...p,children:a}),loading:l,idle:s,error:i},f=T({apiKey:e,libraries:r,loadScriptExternally:o,status:u,externalApiParams:m,callback:n});return jsxRuntime.jsx("div",{ref:g,style:{height:"100%",width:"100%",overflow:"hidden",position:"relative",minHeight:c},...t,children:d[f]||null})}),B=ue;var qe=B;
+var S={};function Y(t){let r=document.querySelector(`script[src="${t}"]`),a=r==null?void 0:r.getAttribute("data-status");return {node:r,status:a}}function J(t={src:"",attributes:{},callbacks:{onLoadCallback:()=>{},onErrorCallback:()=>{}},elementIdToAppend:""},r,a={removeOnUnmount:!1,shouldPreventLoad:!1}){let[l,s]=react.useState(()=>!t.src||a!=null&&a.shouldPreventLoad?"idle":typeof window>"u"?"loading":S[t.src]??"loading");return react.useEffect(()=>{var u,n,m;if(r){s(r);return}if(!(t!=null&&t.src)||a!=null&&a.shouldPreventLoad)return;let i=S[t.src];if(i==="ready"||i==="error"){s(i);return}let c=Y(t.src),e=c.node;if(e){let p=c.status??i??"loading";switch(p){case"loading":case"ready":(n=t.callbacks)!=null&&n.onLoadCallback&&t.callbacks.onLoadCallback();break;case"error":(m=t.callbacks)!=null&&m.onErrorCallback&&t.callbacks.onErrorCallback();break;}s(p);}else {e=document.createElement("script"),e.src=t.src,e.async=!0,e.setAttribute("data-status","loading"),t.attributes&&Object.entries(t.attributes).length>0&&Object.entries(t.attributes).map(([g,d])=>e==null?void 0:e.setAttribute(g,d)),t.elementIdToAppend&&document.getElementById(t.elementIdToAppend)?(u=document.getElementById(t.elementIdToAppend))==null||u.appendChild(e):document.body.appendChild(e);let p=g=>{let d=g.type==="load"?"ready":"error";e==null||e.setAttribute("data-status",d);};e.addEventListener("load",p),e.addEventListener("error",p);}let o=p=>{var d,M;let g=p.type==="load"?"ready":"error";p.type==="load"?(d=t.callbacks)!=null&&d.onLoadCallback&&t.callbacks.onLoadCallback():(M=t.callbacks)!=null&&M.onErrorCallback&&t.callbacks.onErrorCallback(),s(g),S[t.src]=g;};return e.addEventListener("load",o),e.addEventListener("error",o),()=>{e&&(e.removeEventListener("load",o),e.removeEventListener("error",o)),e&&(a!=null&&a.removeOnUnmount)&&e.remove();}},[t,r,l]),l}var O=J;var T=({apiKey:t,libraries:r=[],loadScriptExternally:a=!1,status:l="idle",externalApiParams:s,callback:i})=>{var o;typeof window<"u"&&(window.googleMapsCallback=i);let c=(o=new URLSearchParams(s))==null?void 0:o.toString(),e=t?{src:`https://maps.googleapis.com/maps/api/js?key=${t}&callback=googleMapsCallback&libraries=${r==null?void 0:r.join(",")}${c?`&${c}`:""}`,attributes:{id:"googleMapsApi"}}:{src:`https://maps.googleapis.com/maps/api/js?callback=googleMapsCallback&libraries=${r==null?void 0:r.join(",")}`,attributes:{id:"googleMapsApi"}};return O(e,a?l:void 0)};var x=(t,r,a=1e-6)=>{if(t.length&&r.length){for(let l=0;l!==t.length;++l)if(Math.abs(t[l]-r[l])>a)return !1;return !0}return !1};var _=(t,r)=>{let a=react.useRef(),l=a.current,s=r(l,t);return react.useEffect(()=>{s||(a.current=t);}),s?l:t},H=_;var k=t=>{try{return {lat:t==null?void 0:t.lat(),lng:t==null?void 0:t.lng()}}catch{return t}},K=({container:t,pane:r,position:a,maps:l,drag:s})=>{class i extends google.maps.OverlayView{onAdd=()=>{var u;let e=this;s!=null&&s.draggable&&(this.get("map").getDiv().addEventListener("mouseleave",()=>{google.maps.event.trigger(this.container,"mouseup");}),this.container.addEventListener("mousedown",n=>{var m,p;this.container.style.cursor="grabbing",(m=e.map)==null||m.set("draggable",!1),e.set("origin",n),s.onDragStart(n,{latLng:k(this.position)}),e.moveHandler=(p=this.get("map"))==null?void 0:p.getDiv().addEventListener("mousemove",g=>{var b,f;let d=e.get("origin");if(!d)return;let M=d.clientX-g.clientX,y=d.clientY-g.clientY,v=(b=e.getProjection())==null?void 0:b.fromLatLngToDivPixel(e.position);if(!v)return;let E=(f=e.getProjection())==null?void 0:f.fromDivPixelToLatLng(new l.Point(v.x-M,v.y-y));e.set("position",E),e.set("origin",g),e.draw(),s.onDrag(g,{latLng:k(E)});});}),this.container.addEventListener("mouseup",n=>{var m;(m=e.map)==null||m.set("draggable",!0),this.container.style.cursor="default",e.moveHandler&&(google.maps.event.removeListener(e.moveHandler),e.moveHandler=null),e.set("position",e.position),e.set("origin",void 0),e.draw(),s.onDragEnd(n,{latLng:k(e.position)});}));let o=(u=this.getPanes())==null?void 0:u[this.pane];o==null||o.classList.add("google-map-markers-overlay"),o==null||o.appendChild(this.container);};draw=()=>{let e=this.getProjection(),o=e==null?void 0:e.fromLatLngToDivPixel(this.position);o&&(this.container.style.transform=`translate(${o.x}px, ${o.y}px)`,this.container.style.width="0px",this.container.style.height="0px");};onRemove=()=>{this.container.parentNode!==null&&(google.maps.event.clearInstanceListeners(this.container),this.container.parentNode.removeChild(this.container));};container;pane;position;map=this.getMap();moveHandler;constructor(e,o,u){super(),this.container=e,this.pane=o,this.position=u,this.moveHandler=null;}}return new i(t,r,a)},U=K;var ee=({pane:t="floatPane",position:r,map:a,maps:l,zIndex:s=0,children:i,drag:c})=>{let e=react.useMemo(()=>{let n=document.createElement("div");return n.style.position="absolute",n},[]),o=react.useMemo(()=>U({container:e,pane:t,position:r,maps:l,drag:c}),[e,c,l,t,r]),u=H(i==null?void 0:i.props,(n,m)=>n&&n.lat===m.lat&&n.lng===m.lng);return react.useEffect(()=>!o.map&&a?(o==null||o.setMap(a),()=>{o==null||o.setMap(null);}):()=>{},[a,u]),react.useEffect(()=>{e.style.zIndex=`${s}`;},[s,e]),reactDom.createPortal(i,e)},R=ee;var P=()=>{},ae=({children:t,map:r,maps:a})=>{let l=react.useMemo(()=>!r||!a?[]:react.Children.map(t,s=>{if(react.isValidElement(s)){let i={lat:s.props.lat,lng:s.props.lng},{zIndex:c,draggable:e=!1,onDragStart:o=P,onDrag:u=P,onDragEnd:n=P}=s.props||{};return s=react.cloneElement(s,{...s.props,onDragStart:void 0,onDrag:void 0,onDragEnd:void 0}),jsxRuntime.jsx(R,{position:new a.LatLng(i.lat,i.lng),map:r,maps:a,zIndex:c,drag:{draggable:e,onDragStart:o,onDrag:u,onDragEnd:n},children:s})}return null}),[t,r,a]);return jsxRuntime.jsx("div",{children:l})},$=ae;function le({children:t=null,style:r={width:"100%",height:"100%",left:0,top:0,margin:0,padding:0,position:"absolute"},defaultCenter:a,defaultZoom:l,onGoogleApiLoaded:s,onChange:i,options:c={},events:e=[]}){let o=react.useRef(null),u=react.useRef([]),[n,m]=react.useState(),[p,g]=react.useState(),[d,M]=react.useState(!1),y=react.useCallback(()=>{var v,E;try{if(!n)return;let b=n.getZoom()??l,f=n.getBounds(),F=[(v=n.getCenter())==null?void 0:v.lng(),(E=n.getCenter())==null?void 0:E.lat()],h=f==null?void 0:f.getNorthEast(),L=f==null?void 0:f.getSouthWest();if(!h||!L||!f)return;let D=[L.lng(),L.lat(),h.lng(),h.lat()];x(D,u.current)||(i&&i({zoom:b,center:F,bounds:f}),u.current=D);}catch(b){console.error(b);}},[n,i]);return react.useEffect(()=>{o.current&&!n&&(m(new google.maps.Map(o.current,{center:a,zoom:l,...c})),g(google.maps));},[a,l,n,o,c]),react.useEffect(()=>{n&&!d&&(typeof s=="function"&&p&&s({map:n,maps:p,ref:o.current}),M(!0),google.maps.event.hasListeners(n,"idle")&&google.maps.event.clearListeners(n,"idle"),google.maps.event.addListener(n,"idle",y));},[d,n,s]),react.useEffect(()=>()=>{n&&google.maps.event.clearListeners(n,"idle");},[n]),jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{ref:o,style:r,className:"google-map",...e==null?void 0:e.reduce((v,{name:E,handler:b})=>(v[E]=b,v),{})}),t&&n&&p&&jsxRuntime.jsx($,{map:n,maps:p,children:t})]})}var q=le;var ue=react.forwardRef(({apiKey:t="",libraries:r=["places","geometry"],children:a=null,loadingContent:l="Google Maps is loading",idleContent:s="Google Maps is on idle",errorContent:i="Google Maps is on error",mapMinHeight:c="unset",containerProps:e={},loadScriptExternally:o=!1,status:u="idle",scriptCallback:n=()=>{},externalApiParams:m={},...p},g)=>{let d={ready:jsxRuntime.jsx(q,{...p,children:a}),loading:l,idle:s,error:i},M=T({apiKey:t,libraries:r,loadScriptExternally:o,status:u,externalApiParams:m,callback:n});return jsxRuntime.jsx("div",{ref:g,style:{height:"100%",width:"100%",overflow:"hidden",position:"relative",minHeight:c},...e,children:d[M]||null})}),B=ue;var qe=B;
 
 module.exports = qe;