world-map-svg 0.4.2 → 0.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/world-map-svg.cjs.js +1 -1
  2. package/dist/world-map-svg.es.js +1 -1
  3. package/package.json +1 -1
package/dist/world-map-svg.cjs.js CHANGED
@@ -1035,4 +1035,4 @@ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{val
1035
1035
  title="Zimbabwe"
1036
1036
  id="ZW" />
1037
1037
  </svg>
1038
- `,r={AD:{x:479.3,y:331.5},AE:{x:626.4,y:392.9},AF:{x:664.9,y:361.8},AG:{x:301.5,y:413.8},AI:{x:297.9,y:411.2},AL:{x:531.5,y:336.6},AM:{x:601.2,y:340.6},AO:{x:525.1,y:494.6},AR:{x:296.3,y:586.5},AS:{x:1006.2,y:503.2},AT:{x:512.3,y:310.9},AU:{x:856.4,y:568.8},AW:{x:278.5,y:427.7},AX:{x:531.2,y:250.9},AZ:{x:608.4,y:340.3},BA:{x:524.5,y:326.1},BB:{x:307.8,y:425.8},BD:{x:728.4,y:394.8},BE:{x:487.4,y:299},BF:{x:470.5,y:428.5},BG:{x:546.4,y:330.7},BH:{x:616.7,y:387.7},BI:{x:558.8,y:472.4},BJ:{x:481.3,y:436.8},BL:{x:298.5,y:412.2},BN:{x:796.8,y:450.3},BO:{x:296.5,y:509.3},BM:{x:293.1,y:367.5},BQ:{x:290.6,y:421},BR:{x:322.2,y:505.6},BS:{x:262,y:394},BT:{x:728.6,y:383.1},BV:{x:484.5,y:644.8},BW:{x:544.1,y:527},BY:{x:553.3,y:284.1},BZ:{x:226.5,y:414.3},CA:{x:203.1,y:173.2},CC:{x:746.8,y:497.1},CD:{x:535.9,y:474.4},CF:{x:533.6,y:444.3},CG:{x:516.6,y:464.8},CH:{x:497.9,y:314.7},CI:{x:459.3,y:441.8},CK:{x:26.4,y:523.5},CL:{x:228.1,y:582.3},CM:{x:509.6,y:442.2},CN:{x:767.3,y:348.2},CO:{x:270.2,y:451.4},CR:{x:238.5,y:435.9},CU:{x:251.7,y:401.4},CV:{x:407.5,y:417.7},CW:{x:281.4,y:428.6},CX:{x:771.4,y:492.4},CY:{x:568.7,y:358.2},CZ:{x:518.3,y:302},DE:{x:504.2,y:295.3},DJ:{x:594.4,y:429.7},DK:{x:507.5,y:272.2},DM:{x:302.7,y:419.4},DO:{x:278,y:409.6},DZ:{x:479.5,y:380.2},EC:{x:240.7,y:467.9},EG:{x:561.3,y:384.9},EE:{x:545.1,y:259.8},EH:{x:438.7,y:393.1},ER:{x:586.5,y:420},ES:{x:455.5,y:354.7},ET:{x:588.5,y:437.2},FI:{x:548.1,y:218.7},FJ:{x:974.9,y:511.5},FK:{x:308,y:632.6},FM:{x:897.3,y:442.1},FO:{x:455.5,y:241.2},FR:{x:481.6,y:316.1},GA:{x:507.4,y:465.2},GB:{x:465.9,y:274.3},GE:{x:596.5,y:332.3},GD:{x:301.8,y:428.9},GF:{x:325.8,y:451.9},GG:{x:467.7,y:303.5},GH:{x:472,y:440.6},GI:{x:459.9,y:354.7},GL:{x:356.7,y:126.7},GM:{x:431.9,y:425.1},GN:{x:443,y:435},GO:{x:607.6,y:495.4},GP:{x:302.3,y:417.1},GQ:{x:502.6,y:456.3},GR:{x:542.1,y:346.6},GS:{x:384.7,y:654.1},GT:{x:221.7,y:418.3},GU:{x:881.3,y:425.1},GW:{x:432.3,y:429.8},GY:{x:309.5,y:449.3},HK:{x:795.1,y:398.9},HM:{x:681.3,y:638.5},HN:{x:232.8,y:421.3},HR:{x:521.1,y:323.9},HT:{x:269.8,y:408.7},HU:{x:529.6,y:313.2},ID:{x:806.3,y:470},IE:{x:451.9,y:285.6},IL:{x:573.3,y:370.3},IM:{x:462.1,y:281.9},IN:{x:707.1,y:400.5},IO:{x:678.2,y:483.4},IQ:{x:597.4,y:364.2},IR:{x:625.5,y:366.2},IS:{x:421.5,y:221.6},IT:{x:510.1,y:333.2},JE:{x:468.9,y:304.6},JM:{x:258,y:411.5},JO:{x:579.1,y:370.9},JP:{x:853.1,y:356.5},JU:{x:594.9,y:511.2},KE:{x:581.2,y:461.8},KG:{x:684.6,y:336.3},KH:{x:769.5,y:427.6},KI:{x:516.3,y:473.5},KM:{x:598,y:496.3},KN:{x:299,y:414.1},KP:{x:832.8,y:339.4},KR:{x:835.4,y:355.3},XK:{x:533.5,y:331.4},KW:{x:608.2,y:377.3},KY:{x:248.7,y:407.4},KZ:{x:662.8,y:307.5},LA:{x:766.4,y:411.1},LB:{x:575.5,y:362.4},LC:{x:303.8,y:423.8},LI:{x:501.7,y:313.2},LK:{x:701.6,y:440.9},LR:{x:448.4,y:444.9},LS:{x:554.1,y:549.5},LT:{x:541.8,y:277.4},LU:{x:492,y:302.1},LV:{x:544,y:268.8},LY:{x:523.3,y:386.1},MA:{x:454.9,y:369},MC:{x:495.7,y:326.8},MD:{x:554.5,y:314},MG:{x:606.4,y:516.8},ME:{x:529.3,y:330.8},MF:{x:297.9,y:411.6},MH:{x:950,y:439.2},MK:{x:535.9,y:335},ML:{x:463.6,y:412.7},MO:{x:793.5,y:399.3},MM:{x:746.2,y:407.6},MN:{x:766.3,y:313.4},MP:{x:883.2,y:416.3},MQ:{x:303.6,y:421.6},MR:{x:444.2,y:402.6},MS:{x:300.4,y:415.6},MT:{x:515.2,y:355.3},MU:{x:636.4,y:520.6},MV:{x:681,y:452.5},MW:{x:571.1,y:500.3},MX:{x:187.1,y:394.1},MY:{x:782.1,y:451.4},MZ:{x:574.6,y:516.5},NA:{x:526.8,y:529.1},NC:{x:935.3,y:522.5},NE:{x:497.5,y:412.7},NF:{x:946.2,y:547.7},NG:{x:499.2,y:437.4},NI:{x:235.2,y:426.7},NL:{x:489.7,y:291.4},NO:{x:525.1,y:219.1},NP:{x:710.9,y:380.3},NR:{x:943.4,y:464.4},NU:{x:1008.5,y:517.1},NZ:{x:965.7,y:600.7},OM:{x:631.8,y:401.3},PA:{x:250.1,y:439.4},PE:{x:264.4,y:489},PF:{x:71,y:505},PG:{x:891.4,y:481.1},PH:{x:816.7,y:426.1},PK:{x:669.4,y:373.1},PL:{x:528.5,y:292.2},PM:{x:317,y:314.2},PN:{x:114.8,y:533},PR:{x:287.9,y:411.2},PS:{x:572.8,y:369},PT:{x:422.3,y:349.7},PW:{x:847.9,y:447.9},PY:{x:310.9,y:530.3},QA:{x:618.5,y:389.8},RE:{x:630.8,y:523.2},RO:{x:545,y:317.9},RS:{x:533.6,y:325},RU:{x:769.4,y:187.8},RW:{x:558.7,y:468.3},SA:{x:601.5,y:392.4},SB:{x:927.6,y:488.8},SC:{x:630.6,y:476},SD:{x:559.7,y:419},SE:{x:524.4,y:234.6},SG:{x:766.3,y:459.1},SH:{x:446.7,y:496.6},SI:{x:516.8,y:317.4},SJ:{x:509.3,y:121.1},SK:{x:530.2,y:306.9},SL:{x:441.8,y:439.3},SM:{x:509.9,y:326.1},SN:{x:434.3,y:422},SO:{x:604.5,y:448.5},SR:{x:317.7,y:452},SS:{x:558.3,y:440.9},ST:{x:494.4,y:460.5},SV:{x:225.4,y:424.1},SX:{x:297.9,y:411.8},SY:{x:584.5,y:359.1},SZ:{x:563.2,y:539.7},TC:{x:272.9,y:400.5},TD:{x:527.4,y:418.8},TF:{x:646.4,y:616.3},TG:{x:477.3,y:438.8},TH:{x:759.8,y:425.9},TJ:{x:674.8,y:344.9},TK:{x:1003,y:488},TL:{x:827.6,y:487.6},TM:{x:642.1,y:344.3},TN:{x:501.6,y:362.4},TO:{x:995.1,y:519.9},TR:{x:573.8,y:344.4},TT:{x:303.1,y:432.9},TV:{x:973.8,y:483.4},TW:{x:812,y:395.1},TZ:{x:572.8,y:480.8},UA:{x:562.3,y:307.5},UG:{x:565.5,y:459.1},"UM-DQ":{x:25.8,y:464},"UM-FQ":{x:990,y:462.3},"UM-HQ":{x:989.5,y:460.7},"UM-JQ":{x:1009.4,y:415.6},"UM-MQ":{x:987.4,y:380.9},"UM-WQ":{x:942.6,y:408.1},US:{x:143.6,y:291},UY:{x:318.3,y:559},UZ:{x:656.1,y:335.4},VA:{x:509.8,y:333.9},VC:{x:303,y:426.3},VE:{x:288,y:444.9},VG:{x:293.9,y:410.2},VI:{x:293,y:411.8},VN:{x:771.8,y:417.4},VU:{x:947,y:511},WF:{x:988,y:501.7},WS:{x:1002.2,y:501.6},YE:{x:611.1,y:418.6},YT:{x:601.6,y:499},ZA:{x:551.1,y:569},ZM:{x:553,y:500},ZW:{x:556.6,y:517.1}},i=e=>/^#([0-9a-fA-F]{3}){1,2}$/.test(e),a=e=>e.toString(16).padStart(2,`0`),o=(e,t)=>{if(!i(e))return e;let n=e.replace(`#`,``),r=n.length===3?n.split(``).map(e=>e+e).join(``):n,o=parseInt(r,16),s=Math.min(255,Math.max(0,(o>>16&255)+t)),c=Math.min(255,Math.max(0,(o>>8&255)+t)),l=Math.min(255,Math.max(0,(o&255)+t));return`#${a(s)}${a(c)}${a(l)}`};function s(e,t){let n=t.x-e.x,r=t.y-e.y,i=Math.sqrt(n*n+r*r),a=(e.y+t.y)/2,o=Math.max(Math.min(i*.35,220),15),s=e.x+n*.25,c=a-o,l=e.x+n*.75,u=a-o;return`M ${e.x} ${e.y} C ${s},${c} ${l},${u} ${t.x} ${t.y}`}function c({backgroundColor:i,countryColor:a=`#093C5D`,svgUrl:c,className:l,showConnections:u=!0,connectionBase:d=`BD`,connectedCountries:f=[`US`,`IN`],onCountryHover:p,onCountryClick:m,onConnectionDotHover:h,onConnectionDotClick:g}){let[_,v]=(0,e.useState)(``),[y,b]=(0,e.useState)({name:``,x:0,y:0,visible:!1}),[x,S]=(0,e.useState)({name:``,x:0,y:0,visible:!1}),[C,w]=(0,e.useState)(1),[T,E]=(0,e.useState)({x:0,y:0}),[D,O]=(0,e.useState)(!1),k=(0,e.useRef)(null),A=(0,e.useRef)({isPanning:!1,startX:0,startY:0,originX:0,originY:0,moved:!1}),j=(0,e.useMemo)(()=>({hover:o(a,24),selected:o(a,-24),stroke:o(a,-36)}),[a]);(0,e.useEffect)(()=>{let e=!0;return(async()=>{try{let t;if(c){let e=await fetch(c);if(!e.ok)throw Error(`Failed to fetch SVG: ${e.status}`);t=await e.text()}else t=n;if(!e)return;let i=new DOMParser().parseFromString(t,`image/svg+xml`),a=i.querySelector(`svg`);if(!a){v(``);return}if(!a.getAttribute(`viewBox`)){let e=parseFloat(a.getAttribute(`width`)||``),t=parseFloat(a.getAttribute(`height`)||``);Number.isFinite(e)&&Number.isFinite(t)&&a.setAttribute(`viewBox`,`0 0 ${e} ${t}`)}if(a.removeAttribute(`width`),a.removeAttribute(`height`),a.setAttribute(`class`,`map-svg`),a.querySelectorAll(`path[title]`).forEach(e=>{let t=e.getAttribute(`title`)||``;t&&(e.classList.add(`country`),e.setAttribute(`data-name`,t))}),u){let e=r[d];if(e){let t=e=>{let t=i.createElementNS(`http://www.w3.org/2000/svg`,`path`);return t.setAttribute(`d`,e),t.setAttribute(`class`,`connection-line`),t.setAttribute(`fill`,`none`),t},n=e=>a.querySelector(`#${e}`)?.getAttribute(`title`)||e,o=(e,t,n,r,a)=>{let o=i.createElementNS(`http://www.w3.org/2000/svg`,`circle`);return o.setAttribute(`cx`,String(e)),o.setAttribute(`cy`,String(t)),o.setAttribute(`r`,`3`),o.setAttribute(`class`,n),o.setAttribute(`data-country-code`,r),o.setAttribute(`data-country-name`,a),o},c=new Set;for(let i of f){let l=r[i];if(l&&i!==d){let r=s(l,e);if(a.appendChild(t(r)),!c.has(i)){let e=n(i);a.appendChild(o(l.x,l.y,`connection-dot connection-dot-start`,i,e)),c.add(i)}}}if(!c.has(d)){let t=n(d);a.appendChild(o(e.x,e.y,`connection-dot connection-dot-end`,d,t)),c.add(d)}}}v(new XMLSerializer().serializeToString(a))}catch{e&&v(``)}})(),()=>{e=!1}},[c,u,d,f]);let M=e=>!e||!(e instanceof Element)?null:e.closest(`[data-name]`),N=e=>!e||!(e instanceof Element)?null:e.closest(`.connection-dot`),P=e=>{let t=k.current?.getBoundingClientRect();return t?{x:e.clientX-t.left,y:e.clientY-t.top}:{x:0,y:0}},F=()=>{let e=k.current;if(!e)return;let t=e.querySelector(`.country.is-selected`);t&&t.classList.remove(`is-selected`)},I=e=>{if(A.current.isPanning){let t=e.clientX-A.current.startX,n=e.clientY-A.current.startY;E({x:A.current.originX+t,y:A.current.originY+n}),A.current.moved=!0,b(e=>({...e,visible:!1}));return}let t=N(e.target),n=t?.getAttribute(`data-country-code`),r=t?.getAttribute(`data-country-name`);if(n&&r){if(h){let{x:t,y:i}=P(e);h(n,r,t,i)}b(e=>({...e,visible:!1}));return}let i=M(e.target),a=i?.dataset.name;if(!a){b(e=>({...e,visible:!1}));return}let{x:o,y:s}=P(e);if(p){p(i.getAttribute(`id`)||``,a,o,s),b(e=>({...e,visible:!1}));return}b({name:a,x:o,y:s,visible:!0})},L=()=>{b(e=>({...e,visible:!1})),A.current.isPanning=!1,O(!1)},R=e=>{if(A.current.moved){A.current.moved=!1;return}let t=N(e.target),n=t?.getAttribute(`data-country-code`),r=t?.getAttribute(`data-country-name`);if(n&&r){if(g){let{x:t,y:i}=P(e);g(n,r,t,i)}return}let i=M(e.target),a=i?.dataset.name;if(!a){F(),S(e=>({...e,visible:!1}));return}let{x:o,y:s}=P(e);if(m){m(i.getAttribute(`id`)||``,a,o,s),S(e=>({...e,visible:!1}));return}S({name:a,x:o,y:s,visible:!0}),F(),i.classList.add(`is-selected`)},z=e=>{e.preventDefault();let t=e.deltaY>0?-1:1;w(e=>{let n=e+t*.1;return Math.min(3,Math.max(1,Number(n.toFixed(2))))})},B=e=>{e.button===0&&(e.currentTarget.setPointerCapture(e.pointerId),A.current.isPanning=!0,A.current.startX=e.clientX,A.current.startY=e.clientY,A.current.originX=T.x,A.current.originY=T.y,A.current.moved=!1,O(!0))},V=()=>{A.current.isPanning=!1,O(!1)},H={"--map-background":i||`transparent`,"--country-fill":a,"--country-hover":j.hover,"--country-selected":j.selected,"--country-stroke":j.stroke},U=[`map-container`,l].filter(Boolean).join(` `);return(0,t.jsxs)(`div`,{className:D?`${U} is-panning`.trim():U,style:H,ref:k,onPointerMove:I,onPointerLeave:L,onPointerDown:B,onPointerUp:V,onClick:R,onWheel:z,role:`img`,"aria-label":`World map with clickable countries`,children:[_?(0,t.jsx)(`div`,{className:`map-viewport`,style:{transform:`translate(${T.x}px, ${T.y}px) scale(${C})`},children:(0,t.jsx)(`div`,{className:`map-svg-wrap`,dangerouslySetInnerHTML:{__html:_}})}):(0,t.jsx)(`div`,{className:`map-loading`,children:`Loading map...`}),y.visible&&(0,t.jsx)(`div`,{className:`map-tooltip`,style:{left:y.x,top:y.y},role:`status`,children:y.name}),x.visible&&(0,t.jsx)(`div`,{className:`map-tooltip is-pinned`,style:{left:x.x,top:x.y},role:`status`,children:x.name})]})}exports.WorldMap=c,exports.default=c;
1038
+ `,r={AD:{x:479.3,y:331.5},AE:{x:626.4,y:392.9},AF:{x:664.9,y:361.8},AG:{x:301.5,y:413.8},AI:{x:297.9,y:411.2},AL:{x:531.5,y:336.6},AM:{x:601.2,y:340.6},AO:{x:525.1,y:494.6},AR:{x:296.3,y:586.5},AS:{x:1006.2,y:503.2},AT:{x:512.3,y:310.9},AU:{x:856.4,y:568.8},AW:{x:278.5,y:427.7},AX:{x:531.2,y:250.9},AZ:{x:608.4,y:340.3},BA:{x:524.5,y:326.1},BB:{x:307.8,y:425.8},BD:{x:728.4,y:394.8},BE:{x:487.4,y:299},BF:{x:470.5,y:428.5},BG:{x:546.4,y:330.7},BH:{x:616.7,y:387.7},BI:{x:558.8,y:472.4},BJ:{x:481.3,y:436.8},BL:{x:298.5,y:412.2},BN:{x:796.8,y:450.3},BO:{x:296.5,y:509.3},BM:{x:293.1,y:367.5},BQ:{x:290.6,y:421},BR:{x:322.2,y:505.6},BS:{x:262,y:394},BT:{x:728.6,y:383.1},BV:{x:484.5,y:644.8},BW:{x:544.1,y:527},BY:{x:553.3,y:284.1},BZ:{x:226.5,y:414.3},CA:{x:203.1,y:173.2},CC:{x:746.8,y:497.1},CD:{x:535.9,y:474.4},CF:{x:533.6,y:444.3},CG:{x:516.6,y:464.8},CH:{x:497.9,y:314.7},CI:{x:459.3,y:441.8},CK:{x:26.4,y:523.5},CL:{x:228.1,y:582.3},CM:{x:509.6,y:442.2},CN:{x:767.3,y:348.2},CO:{x:270.2,y:451.4},CR:{x:238.5,y:435.9},CU:{x:251.7,y:401.4},CV:{x:407.5,y:417.7},CW:{x:281.4,y:428.6},CX:{x:771.4,y:492.4},CY:{x:568.7,y:358.2},CZ:{x:518.3,y:302},DE:{x:504.2,y:295.3},DJ:{x:594.4,y:429.7},DK:{x:507.5,y:272.2},DM:{x:302.7,y:419.4},DO:{x:278,y:409.6},DZ:{x:479.5,y:380.2},EC:{x:240.7,y:467.9},EG:{x:561.3,y:384.9},EE:{x:545.1,y:259.8},EH:{x:438.7,y:393.1},ER:{x:586.5,y:420},ES:{x:455.5,y:354.7},ET:{x:588.5,y:437.2},FI:{x:548.1,y:218.7},FJ:{x:974.9,y:511.5},FK:{x:308,y:632.6},FM:{x:897.3,y:442.1},FO:{x:455.5,y:241.2},FR:{x:481.6,y:316.1},GA:{x:507.4,y:465.2},GB:{x:465.9,y:274.3},GE:{x:596.5,y:332.3},GD:{x:301.8,y:428.9},GF:{x:325.8,y:451.9},GG:{x:467.7,y:303.5},GH:{x:472,y:440.6},GI:{x:459.9,y:354.7},GL:{x:356.7,y:126.7},GM:{x:431.9,y:425.1},GN:{x:443,y:435},GO:{x:607.6,y:495.4},GP:{x:302.3,y:417.1},GQ:{x:502.6,y:456.3},GR:{x:542.1,y:346.6},GS:{x:384.7,y:654.1},GT:{x:221.7,y:418.3},GU:{x:881.3,y:425.1},GW:{x:432.3,y:429.8},GY:{x:309.5,y:449.3},HK:{x:795.1,y:398.9},HM:{x:681.3,y:638.5},HN:{x:232.8,y:421.3},HR:{x:521.1,y:323.9},HT:{x:269.8,y:408.7},HU:{x:529.6,y:313.2},ID:{x:806.3,y:470},IE:{x:451.9,y:285.6},IL:{x:573.3,y:370.3},IM:{x:462.1,y:281.9},IN:{x:707.1,y:400.5},IO:{x:678.2,y:483.4},IQ:{x:597.4,y:364.2},IR:{x:625.5,y:366.2},IS:{x:421.5,y:221.6},IT:{x:510.1,y:333.2},JE:{x:468.9,y:304.6},JM:{x:258,y:411.5},JO:{x:579.1,y:370.9},JP:{x:853.1,y:356.5},JU:{x:594.9,y:511.2},KE:{x:581.2,y:461.8},KG:{x:684.6,y:336.3},KH:{x:769.5,y:427.6},KI:{x:516.3,y:473.5},KM:{x:598,y:496.3},KN:{x:299,y:414.1},KP:{x:832.8,y:339.4},KR:{x:835.4,y:355.3},XK:{x:533.5,y:331.4},KW:{x:608.2,y:377.3},KY:{x:248.7,y:407.4},KZ:{x:662.8,y:307.5},LA:{x:766.4,y:411.1},LB:{x:575.5,y:362.4},LC:{x:303.8,y:423.8},LI:{x:501.7,y:313.2},LK:{x:701.6,y:440.9},LR:{x:448.4,y:444.9},LS:{x:554.1,y:549.5},LT:{x:541.8,y:277.4},LU:{x:492,y:302.1},LV:{x:544,y:268.8},LY:{x:523.3,y:386.1},MA:{x:454.9,y:369},MC:{x:495.7,y:326.8},MD:{x:554.5,y:314},MG:{x:606.4,y:516.8},ME:{x:529.3,y:330.8},MF:{x:297.9,y:411.6},MH:{x:950,y:439.2},MK:{x:535.9,y:335},ML:{x:463.6,y:412.7},MO:{x:793.5,y:399.3},MM:{x:746.2,y:407.6},MN:{x:766.3,y:313.4},MP:{x:883.2,y:416.3},MQ:{x:303.6,y:421.6},MR:{x:444.2,y:402.6},MS:{x:300.4,y:415.6},MT:{x:515.2,y:355.3},MU:{x:636.4,y:520.6},MV:{x:681,y:452.5},MW:{x:571.1,y:500.3},MX:{x:187.1,y:394.1},MY:{x:782.1,y:451.4},MZ:{x:574.6,y:516.5},NA:{x:526.8,y:529.1},NC:{x:935.3,y:522.5},NE:{x:497.5,y:412.7},NF:{x:946.2,y:547.7},NG:{x:499.2,y:437.4},NI:{x:235.2,y:426.7},NL:{x:489.7,y:291.4},NO:{x:525.1,y:219.1},NP:{x:710.9,y:380.3},NR:{x:943.4,y:464.4},NU:{x:1008.5,y:517.1},NZ:{x:965.7,y:600.7},OM:{x:631.8,y:401.3},PA:{x:250.1,y:439.4},PE:{x:264.4,y:489},PF:{x:71,y:505},PG:{x:891.4,y:481.1},PH:{x:816.7,y:426.1},PK:{x:669.4,y:373.1},PL:{x:528.5,y:292.2},PM:{x:317,y:314.2},PN:{x:114.8,y:533},PR:{x:287.9,y:411.2},PS:{x:572.8,y:369},PT:{x:422.3,y:349.7},PW:{x:847.9,y:447.9},PY:{x:310.9,y:530.3},QA:{x:618.5,y:389.8},RE:{x:630.8,y:523.2},RO:{x:545,y:317.9},RS:{x:533.6,y:325},RU:{x:769.4,y:187.8},RW:{x:558.7,y:468.3},SA:{x:601.5,y:392.4},SB:{x:927.6,y:488.8},SC:{x:630.6,y:476},SD:{x:559.7,y:419},SE:{x:524.4,y:234.6},SG:{x:766.3,y:459.1},SH:{x:446.7,y:496.6},SI:{x:516.8,y:317.4},SJ:{x:509.3,y:121.1},SK:{x:530.2,y:306.9},SL:{x:441.8,y:439.3},SM:{x:509.9,y:326.1},SN:{x:434.3,y:422},SO:{x:604.5,y:448.5},SR:{x:317.7,y:452},SS:{x:558.3,y:440.9},ST:{x:494.4,y:460.5},SV:{x:225.4,y:424.1},SX:{x:297.9,y:411.8},SY:{x:584.5,y:359.1},SZ:{x:563.2,y:539.7},TC:{x:272.9,y:400.5},TD:{x:527.4,y:418.8},TF:{x:646.4,y:616.3},TG:{x:477.3,y:438.8},TH:{x:759.8,y:425.9},TJ:{x:674.8,y:344.9},TK:{x:1003,y:488},TL:{x:827.6,y:487.6},TM:{x:642.1,y:344.3},TN:{x:501.6,y:362.4},TO:{x:995.1,y:519.9},TR:{x:573.8,y:344.4},TT:{x:303.1,y:432.9},TV:{x:973.8,y:483.4},TW:{x:812,y:395.1},TZ:{x:572.8,y:480.8},UA:{x:562.3,y:307.5},UG:{x:565.5,y:459.1},"UM-DQ":{x:25.8,y:464},"UM-FQ":{x:990,y:462.3},"UM-HQ":{x:989.5,y:460.7},"UM-JQ":{x:1009.4,y:415.6},"UM-MQ":{x:987.4,y:380.9},"UM-WQ":{x:942.6,y:408.1},US:{x:143.6,y:291},UY:{x:318.3,y:559},UZ:{x:656.1,y:335.4},VA:{x:509.8,y:333.9},VC:{x:303,y:426.3},VE:{x:288,y:444.9},VG:{x:293.9,y:410.2},VI:{x:293,y:411.8},VN:{x:771.8,y:417.4},VU:{x:947,y:511},WF:{x:988,y:501.7},WS:{x:1002.2,y:501.6},YE:{x:611.1,y:418.6},YT:{x:601.6,y:499},ZA:{x:551.1,y:569},ZM:{x:553,y:500},ZW:{x:556.6,y:517.1}},i=e=>/^#([0-9a-fA-F]{3}){1,2}$/.test(e),a=e=>e.toString(16).padStart(2,`0`),o=(e,t)=>{if(!i(e))return e;let n=e.replace(`#`,``),r=n.length===3?n.split(``).map(e=>e+e).join(``):n,o=parseInt(r,16),s=Math.min(255,Math.max(0,(o>>16&255)+t)),c=Math.min(255,Math.max(0,(o>>8&255)+t)),l=Math.min(255,Math.max(0,(o&255)+t));return`#${a(s)}${a(c)}${a(l)}`};function s(e,t){let n=t.x-e.x,r=t.y-e.y,i=Math.sqrt(n*n+r*r),a=(e.y+t.y)/2,o=Math.max(Math.min(i*.35,220),15),s=e.x+n*.25,c=a-o,l=e.x+n*.75,u=a-o;return`M ${e.x} ${e.y} C ${s},${c} ${l},${u} ${t.x} ${t.y}`}function c({backgroundColor:i,countryColor:a=`#093C5D`,svgUrl:c,className:l,showConnections:u=!0,connectionBase:d=`BD`,connectedCountries:f=[`US`,`IN`],onCountryHover:p,onCountryClick:m,onConnectionDotHover:h,onConnectionDotClick:g}){let[_,v]=(0,e.useState)(``),[y,b]=(0,e.useState)({name:``,x:0,y:0,visible:!1}),[x,S]=(0,e.useState)({name:``,x:0,y:0,visible:!1}),[C,w]=(0,e.useState)(1),[T,E]=(0,e.useState)({x:0,y:0}),[D,O]=(0,e.useState)(!1),k=(0,e.useRef)(null),A=(0,e.useRef)({isPanning:!1,startX:0,startY:0,originX:0,originY:0,moved:!1}),j=(0,e.useMemo)(()=>({hover:o(a,24),selected:o(a,-24),stroke:o(a,-36)}),[a]);(0,e.useEffect)(()=>{let e=!0;return(async()=>{try{let t;if(c){let e=await fetch(c);if(!e.ok)throw Error(`Failed to fetch SVG: ${e.status}`);t=await e.text()}else t=n;if(!e)return;let i=new DOMParser().parseFromString(t,`image/svg+xml`),a=i.querySelector(`svg`);if(!a){v(``);return}if(!a.getAttribute(`viewBox`)){let e=parseFloat(a.getAttribute(`width`)||``),t=parseFloat(a.getAttribute(`height`)||``);Number.isFinite(e)&&Number.isFinite(t)&&a.setAttribute(`viewBox`,`0 0 ${e} ${t}`)}if(a.removeAttribute(`width`),a.removeAttribute(`height`),a.setAttribute(`class`,`map-svg`),a.querySelectorAll(`path[title]`).forEach(e=>{let t=e.getAttribute(`title`)||``;t&&(e.classList.add(`country`),e.setAttribute(`data-name`,t))}),u){let e=r[d];if(e){let t=e=>{let t=i.createElementNS(`http://www.w3.org/2000/svg`,`path`);return t.setAttribute(`d`,e),t.setAttribute(`class`,`connection-line`),t.setAttribute(`fill`,`none`),t},n=e=>a.querySelector(`#${e}`)?.getAttribute(`title`)||e,o=(e,t,n,r,a)=>{let o=i.createElementNS(`http://www.w3.org/2000/svg`,`circle`);return o.setAttribute(`cx`,String(e)),o.setAttribute(`cy`,String(t)),o.setAttribute(`r`,`3`),o.setAttribute(`class`,n),o.setAttribute(`data-country-code`,r),o.setAttribute(`data-country-name`,a),o},c=new Set;for(let i of f){let l=r[i];if(l&&i!==d){let r=s(l,e);if(a.appendChild(t(r)),!c.has(i)){let e=n(i);a.appendChild(o(l.x,l.y,`connection-dot connection-dot-start`,i,e)),c.add(i)}}}if(!c.has(d)){let t=n(d);a.appendChild(o(e.x,e.y,`connection-dot connection-dot-end`,d,t)),c.add(d)}}}v(new XMLSerializer().serializeToString(a))}catch{e&&v(``)}})(),()=>{e=!1}},[c,u,d,f]);let M=e=>!e||!(e instanceof Element)?null:e.closest(`[data-name]`),N=e=>!e||!(e instanceof Element)?null:e.closest(`.connection-dot`),P=e=>{let t=k.current?.getBoundingClientRect();return t?{x:e.clientX-t.left,y:e.clientY-t.top}:{x:0,y:0}},F=()=>{let e=k.current;if(!e)return;let t=e.querySelector(`.country.is-selected`);t&&t.classList.remove(`is-selected`)},I=e=>{if(A.current.isPanning){let t=e.clientX-A.current.startX,n=e.clientY-A.current.startY;E({x:A.current.originX+t,y:A.current.originY+n}),Math.sqrt(t*t+n*n)>5&&(A.current.moved=!0),b(e=>({...e,visible:!1}));return}let t=N(e.target),n=t?.getAttribute(`data-country-code`),r=t?.getAttribute(`data-country-name`);if(n&&r){if(h){let{x:t,y:i}=P(e);h(n,r,t,i)}b(e=>({...e,visible:!1}));return}let i=M(e.target),a=i?.dataset.name;if(!a){b(e=>({...e,visible:!1}));return}let{x:o,y:s}=P(e);if(p){p(i.getAttribute(`id`)||``,a,o,s),b(e=>({...e,visible:!1}));return}b({name:a,x:o,y:s,visible:!0})},L=()=>{b(e=>({...e,visible:!1})),A.current.isPanning=!1,O(!1)},R=e=>{if(A.current.moved){A.current.moved=!1;return}let t=N(e.target),n=t?.getAttribute(`data-country-code`),r=t?.getAttribute(`data-country-name`);if(n&&r){if(g){let{x:t,y:i}=P(e);g(n,r,t,i)}return}let i=M(e.target),a=i?.dataset.name;if(!a){F(),S(e=>({...e,visible:!1}));return}let{x:o,y:s}=P(e);if(m){m(i.getAttribute(`id`)||``,a,o,s),S(e=>({...e,visible:!1}));return}S({name:a,x:o,y:s,visible:!0}),F(),i.classList.add(`is-selected`)},z=e=>{e.preventDefault();let t=e.deltaY>0?-1:1;w(e=>{let n=e+t*.1;return Math.min(3,Math.max(1,Number(n.toFixed(2))))})},B=e=>{e.button===0&&(e.currentTarget.setPointerCapture(e.pointerId),A.current.isPanning=!0,A.current.startX=e.clientX,A.current.startY=e.clientY,A.current.originX=T.x,A.current.originY=T.y,A.current.moved=!1,O(!0))},V=()=>{A.current.isPanning=!1,O(!1)},H={"--map-background":i||`transparent`,"--country-fill":a,"--country-hover":j.hover,"--country-selected":j.selected,"--country-stroke":j.stroke},U=[`map-container`,l].filter(Boolean).join(` `);return(0,t.jsxs)(`div`,{className:D?`${U} is-panning`.trim():U,style:H,ref:k,onPointerMove:I,onPointerLeave:L,onPointerDown:B,onPointerUp:V,onClick:R,onWheel:z,role:`img`,"aria-label":`World map with clickable countries`,children:[_?(0,t.jsx)(`div`,{className:`map-viewport`,style:{transform:`translate(${T.x}px, ${T.y}px) scale(${C})`},children:(0,t.jsx)(`div`,{className:`map-svg-wrap`,dangerouslySetInnerHTML:{__html:_}})}):(0,t.jsx)(`div`,{className:`map-loading`,children:`Loading map...`}),y.visible&&(0,t.jsx)(`div`,{className:`map-tooltip`,style:{left:y.x,top:y.y},role:`status`,children:y.name}),x.visible&&(0,t.jsx)(`div`,{className:`map-tooltip is-pinned`,style:{left:x.x,top:x.y},role:`status`,children:x.name})]})}exports.WorldMap=c,exports.default=c;
package/dist/world-map-svg.es.js CHANGED
@@ -1143,7 +1143,7 @@ function f({ backgroundColor: c, countryColor: l = "#093C5D", svgUrl: f, classNa
1143
1143
  A({
1144
1144
  x: P.current.originX + t,
1145
1145
  y: P.current.originY + n
1146
- }), P.current.moved = !0, w((e) => ({
1146
+ }), Math.sqrt(t * t + n * n) > 5 && (P.current.moved = !0), w((e) => ({
1147
1147
  ...e,
1148
1148
  visible: !1
1149
1149
  }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "world-map-svg",
3
- "version": "0.4.2",
3
+ "version": "0.4.3",
4
4
  "description": "Interactive SVG world map React component",
5
5
  "license": "MIT",
6
6
  "keywords": [