@mapcomponents/react-maplibre 0.1.56 → 0.1.58

package/coverage/lcov-report/src/components/MlScaleReference/MlScaleReference.js.html

@@ -23,9 +23,9 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">2% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/50</span>
+                <span class='fraction'>1/50</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">2.08% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/48</span>
+                <span class='fraction'>1/48</span>
             </div>
         
             
@@ -168,7 +168,7 @@
 <a name='L103'></a><a href='#L103'>103</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -270,102 +270,102 @@
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect, useState, useCallback } from "react";
 import useMap from "../../hooks/useMap";
 &nbsp;
-const MlScaleReference = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(p</span>rops) =&gt; {</span>
-  const zoomRef = <span class="cstat-no" title="statement not covered" >useRef(0);</span>
-  const mapHook = <span class="cstat-no" title="statement not covered" >useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });</span>
+const MlScaleReference = <span class="fstat-no" title="function not covered" >(p</span>rops) =&gt; {
+	const zoomRef = <span class="cstat-no" title="statement not covered" >useRef(0);</span>
+	const mapHook = <span class="cstat-no" title="statement not covered" >useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });</span>
 &nbsp;
-  const [pxWidth, setPxWidth] = <span class="cstat-no" title="statement not covered" >useState(0);</span>
-  const [text, setText] = <span class="cstat-no" title="statement not covered" >useState("");</span>
+	const [pxWidth, setPxWidth] = <span class="cstat-no" title="statement not covered" >useState(0);</span>
+	const [text, setText] = <span class="cstat-no" title="statement not covered" >useState("");</span>
 &nbsp;
-  const updateScale = <span class="cstat-no" title="statement not covered" >useCallback(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    if (mapHook.map?.map.getZoom() === zoomRef.current) {</span>
-<span class="cstat-no" title="statement not covered" >      return;</span>
-    }
-<span class="cstat-no" title="statement not covered" >    if (!mapHook.map) <span class="cstat-no" title="statement not covered" >return;</span></span>
+	const updateScale = <span class="cstat-no" title="statement not covered" >useCallback(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >		if (mapHook.map?.map.getZoom() === zoomRef.current) {</span>
+<span class="cstat-no" title="statement not covered" >			return;</span>
+		}
+<span class="cstat-no" title="statement not covered" >		if (!mapHook.map) <span class="cstat-no" title="statement not covered" >return;</span></span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    zoomRef.current = mapHook.map?.map.getZoom();</span>
-    // Calculation from MapLibre
-    // A horizontal scale is imagined to be present at center of the map
-    // Using spherical law of cosines approximation, the real distance is
-    // found between the two coordinates.
-    const maxWidth = <span class="cstat-no" title="statement not covered" >props.maxWidth || 100;</span>
+<span class="cstat-no" title="statement not covered" >		zoomRef.current = mapHook.map?.map.getZoom();</span>
+		// Calculation from MapLibre
+		// A horizontal scale is imagined to be present at center of the map
+		// Using spherical law of cosines approximation, the real distance is
+		// found between the two coordinates.
+		const maxWidth = <span class="cstat-no" title="statement not covered" >props.maxWidth || 100;</span>
 &nbsp;
-    const y = <span class="cstat-no" title="statement not covered" >mapHook.map._container.clientHeight / 2;</span>
-    const left = <span class="cstat-no" title="statement not covered" >mapHook.map.unproject([0, y]);</span>
-    const right = <span class="cstat-no" title="statement not covered" >mapHook.map.unproject([maxWidth, y]);</span>
-    const maxMeters = <span class="cstat-no" title="statement not covered" >left.distanceTo(right);</span>
-    // The real distance corresponding to 100px scale length is rounded off to
-    // near pretty number and the scale length for the same is found out.
-    // Default unit of the scale is based on User's locale.
-<span class="cstat-no" title="statement not covered" >    if (props.unit === "imperial") {</span>
-      const maxFeet = <span class="cstat-no" title="statement not covered" >3.2808 * maxMeters;</span>
-<span class="cstat-no" title="statement not covered" >      if (maxFeet &gt; 5280) {</span>
-        const maxMiles = <span class="cstat-no" title="statement not covered" >maxFeet / 5280;</span>
-<span class="cstat-no" title="statement not covered" >        setScale(maxWidth, maxMiles, mapHook.map._getUIString("ScaleControl.Miles"));</span>
-      } else {
-<span class="cstat-no" title="statement not covered" >        setScale(maxWidth, maxFeet, mapHook.map._getUIString("ScaleControl.Feet"));</span>
-      }
-    } else <span class="cstat-no" title="statement not covered" >if (props.unit === "nautical") {</span>
-      const maxNauticals = <span class="cstat-no" title="statement not covered" >maxMeters / 1852;</span>
-<span class="cstat-no" title="statement not covered" >      setScale(maxWidth, maxNauticals, mapHook.map._getUIString("ScaleControl.NauticalMiles"));</span>
-    } else <span class="cstat-no" title="statement not covered" >if (maxMeters &gt;= 1000) {</span>
-<span class="cstat-no" title="statement not covered" >      setScale(maxWidth, maxMeters / 1000, mapHook.map._getUIString("ScaleControl.Kilometers"));</span>
-    } else {
-<span class="cstat-no" title="statement not covered" >      setScale(maxWidth, maxMeters, mapHook.map._getUIString("ScaleControl.Meters"));</span>
-    }
-  }, [mapHook.map, props.unit, props.maxWidth]);
+		const y = <span class="cstat-no" title="statement not covered" >mapHook.map._container.clientHeight / 2;</span>
+		const left = <span class="cstat-no" title="statement not covered" >mapHook.map.unproject([0, y]);</span>
+		const right = <span class="cstat-no" title="statement not covered" >mapHook.map.unproject([maxWidth, y]);</span>
+		const maxMeters = <span class="cstat-no" title="statement not covered" >left.distanceTo(right);</span>
+		// The real distance corresponding to 100px scale length is rounded off to
+		// near pretty number and the scale length for the same is found out.
+		// Default unit of the scale is based on User's locale.
+<span class="cstat-no" title="statement not covered" >		if (props.unit === "imperial") {</span>
+			const maxFeet = <span class="cstat-no" title="statement not covered" >3.2808 * maxMeters;</span>
+<span class="cstat-no" title="statement not covered" >			if (maxFeet &gt; 5280) {</span>
+				const maxMiles = <span class="cstat-no" title="statement not covered" >maxFeet / 5280;</span>
+<span class="cstat-no" title="statement not covered" >				setScale(maxWidth, maxMiles, mapHook.map._getUIString("ScaleControl.Miles"));</span>
+			} else {
+<span class="cstat-no" title="statement not covered" >				setScale(maxWidth, maxFeet, mapHook.map._getUIString("ScaleControl.Feet"));</span>
+			}
+		} else <span class="cstat-no" title="statement not covered" >if (props.unit === "nautical") {</span>
+			const maxNauticals = <span class="cstat-no" title="statement not covered" >maxMeters / 1852;</span>
+<span class="cstat-no" title="statement not covered" >			setScale(maxWidth, maxNauticals, mapHook.map._getUIString("ScaleControl.NauticalMiles"));</span>
+		} else <span class="cstat-no" title="statement not covered" >if (maxMeters &gt;= 1000) {</span>
+<span class="cstat-no" title="statement not covered" >			setScale(maxWidth, maxMeters / 1000, mapHook.map._getUIString("ScaleControl.Kilometers"));</span>
+		} else {
+<span class="cstat-no" title="statement not covered" >			setScale(maxWidth, maxMeters, mapHook.map._getUIString("ScaleControl.Meters"));</span>
+		}
+	}, [mapHook.map, props.unit, props.maxWidth]);
 &nbsp;
-<span class="cstat-no" title="statement not covered" >  useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    if (!mapHook.map) <span class="cstat-no" title="statement not covered" >return;</span></span>
+<span class="cstat-no" title="statement not covered" >	useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >		if (!mapHook.map) <span class="cstat-no" title="statement not covered" >return;</span></span>
 &nbsp;
-    let _updateScale = <span class="cstat-no" title="statement not covered" >updateScale;</span>
-<span class="cstat-no" title="statement not covered" >    mapHook.map.on("move", _updateScale, mapHook.componentId);</span>
-<span class="cstat-no" title="statement not covered" >    updateScale();</span>
+		let _updateScale = <span class="cstat-no" title="statement not covered" >updateScale;</span>
+<span class="cstat-no" title="statement not covered" >		mapHook.map.on("move", _updateScale, mapHook.componentId);</span>
+<span class="cstat-no" title="statement not covered" >		updateScale();</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    return <span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >      mapHook.map.off("move", _updateScale);</span>
-    };
-  }, [mapHook.map, updateScale]);
+<span class="cstat-no" title="statement not covered" >		return <span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >			mapHook.map.off("move", _updateScale);</span>
+		};
+	}, [mapHook.map, updateScale]);
 &nbsp;
-  const setScale = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(m</span>axWidth, maxDistance, unit) =&gt; {</span>
-    const distance = <span class="cstat-no" title="statement not covered" >getRoundNum(maxDistance);</span>
-    const ratio = <span class="cstat-no" title="statement not covered" >distance / maxDistance;</span>
-<span class="cstat-no" title="statement not covered" >    setPxWidth(maxWidth * ratio);</span>
-<span class="cstat-no" title="statement not covered" >    setText(distance + "&amp;nbsp;" + unit);</span>
-  };
+	const setScale = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(m</span>axWidth, maxDistance, unit) =&gt; {</span>
+		const distance = <span class="cstat-no" title="statement not covered" >getRoundNum(maxDistance);</span>
+		const ratio = <span class="cstat-no" title="statement not covered" >distance / maxDistance;</span>
+<span class="cstat-no" title="statement not covered" >		setPxWidth(maxWidth * ratio);</span>
+<span class="cstat-no" title="statement not covered" >		setText(distance + "&amp;nbsp;" + unit);</span>
+	};
 &nbsp;
-  const getDecimalRoundNum = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(d</span>) =&gt; {</span>
-    const multiplier = <span class="cstat-no" title="statement not covered" >Math.pow(10, Math.ceil(-Math.log(d) / Math.LN10));</span>
-<span class="cstat-no" title="statement not covered" >    return Math.round(d * multiplier) / multiplier;</span>
-  };
+	const getDecimalRoundNum = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(d</span>) =&gt; {</span>
+		const multiplier = <span class="cstat-no" title="statement not covered" >Math.pow(10, Math.ceil(-Math.log(d) / Math.LN10));</span>
+<span class="cstat-no" title="statement not covered" >		return Math.round(d * multiplier) / multiplier;</span>
+	};
 &nbsp;
-  const getRoundNum = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(n</span>um) =&gt; {</span>
-    const pow10 = <span class="cstat-no" title="statement not covered" >Math.pow(10, `${Math.floor(num)}`.length - 1);</span>
-    let d = <span class="cstat-no" title="statement not covered" >num / pow10;</span>
+	const getRoundNum = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(n</span>um) =&gt; {</span>
+		const pow10 = <span class="cstat-no" title="statement not covered" >Math.pow(10, `${Math.floor(num)}`.length - 1);</span>
+		let d = <span class="cstat-no" title="statement not covered" >num / pow10;</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    d = d &gt;= 10 ? 10 : d &gt;= 5 ? 5 : d &gt;= 3 ? 3 : d &gt;= 2 ? 2 : d &gt;= 1 ? 1 : getDecimalRoundNum(d);</span>
+<span class="cstat-no" title="statement not covered" >		d = d &gt;= 10 ? 10 : d &gt;= 5 ? 5 : d &gt;= 3 ? 3 : d &gt;= 2 ? 2 : d &gt;= 1 ? 1 : getDecimalRoundNum(d);</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    return pow10 * d;</span>
-  };
+<span class="cstat-no" title="statement not covered" >		return pow10 * d;</span>
+	};
 &nbsp;
-<span class="cstat-no" title="statement not covered" >  return (</span>
-    &lt;&gt;
-      &lt;div
-        style={{
-          backgroundColor: "hsla(0,0%,100%,.75)",
-          fontSize: "10px",
-          border: "2px solid #333",
-          borderTop: "#333",
-          padding: "0 5px",
-          color: "#333",
-          boxSizing: "border-box",
-          width: pxWidth + "px",
-          fontFamily: "sans-serif",
-        }}
-        dangerouslySetInnerHTML={{ __html: text }}
-      &gt;&lt;/div&gt;
-    &lt;/&gt;
-  );
+<span class="cstat-no" title="statement not covered" >	return (</span>
+		&lt;&gt;
+			&lt;div
+				style={{
+					backgroundColor: "hsla(0,0%,100%,.75)",
+					fontSize: "10px",
+					border: "2px solid #333",
+					borderTop: "#333",
+					padding: "0 5px",
+					color: "#333",
+					boxSizing: "border-box",
+					width: pxWidth + "px",
+					fontFamily: "sans-serif",
+				}}
+				dangerouslySetInnerHTML={{ __html: text }}
+			&gt;&lt;/div&gt;
+		&lt;/&gt;
+	);
 };
 &nbsp;
 export default MlScaleReference;
@@ -376,7 +376,7 @@ export default MlScaleReference;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Thu Aug 11 2022 13:20:32 GMT+0000 (Coordinated Universal Time)
+                at Tue Oct 04 2022 11:59:51 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlScaleReference/index.html

@@ -23,9 +23,9 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">2% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/50</span>
+                <span class='fraction'>1/50</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">2.08% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/48</span>
+                <span class='fraction'>1/48</span>
             </div>
         
             
@@ -80,17 +80,17 @@
 </thead>
 <tbody><tr>
 	<td class="file low" data-value="MlScaleReference.js"><a href="MlScaleReference.js.html">MlScaleReference.js</a></td>
-	<td data-value="0" class="pic low">
-	<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
+	<td data-value="2" class="pic low">
+	<div class="chart"><div class="cover-fill" style="width: 2%"></div><div class="cover-empty" style="width: 98%"></div></div>
 	</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="50" class="abs low">0/50</td>
+	<td data-value="2" class="pct low">2%</td>
+	<td data-value="50" class="abs low">1/50</td>
 	<td data-value="0" class="pct low">0%</td>
 	<td data-value="26" class="abs low">0/26</td>
 	<td data-value="0" class="pct low">0%</td>
 	<td data-value="7" class="abs low">0/7</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="48" class="abs low">0/48</td>
+	<td data-value="2.08" class="pct low">2.08%</td>
+	<td data-value="48" class="abs low">1/48</td>
 	</tr>
 
 </tbody>
@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Thu Aug 11 2022 13:20:32 GMT+0000 (Coordinated Universal Time)
+                at Tue Oct 04 2022 11:59:51 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>