@mapcomponents/react-maplibre 0.1.57 → 0.1.59

package/coverage/lcov-report/src/components/MlNavigationCompass/MlNavigationCompass.tsx.html

@@ -527,82 +527,82 @@ import { css } from "@emotion/css";
 import useMap from "../../hooks/useMap";
  
 const NeedleButton = styled.div`
-  width: 40%;
-  display: flex;
-  align-items: center;
+	width: 40%;
+	display: flex;
+	align-items: center;
  
-  &:hover {
-    cursor: pointer;
-  }
-  path {
-    filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.2));
-  }
-  &:hover path {
-    filter: drop-shadow(0px 0px 13px rgba(255, 255, 255, 0.1));
-  }
-  path:nth-of-type(2) {
-    fill: #343434;
-  }
-  &:hover path:nth-of-type(2) {
-    fill: #434343;
-  }
-  path:nth-of-type(1) {
-    fill: #e90318;
-  }
-  &:hover path:nth-of-type(1) {
-    fill: #fb4052;
-  }
+	&:hover {
+		cursor: pointer;
+	}
+	path {
+		filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.2));
+	}
+	&:hover path {
+		filter: drop-shadow(0px 0px 13px rgba(255, 255, 255, 0.1));
+	}
+	path:nth-of-type(2) {
+		fill: #343434;
+	}
+	&:hover path:nth-of-type(2) {
+		fill: #434343;
+	}
+	path:nth-of-type(1) {
+		fill: #e90318;
+	}
+	&:hover path:nth-of-type(1) {
+		fill: #fb4052;
+	}
 `;
 const NeedleContainer = styled.div`
-  pointer-events: none;
-  display: flex;
-  z-index: 1002;
-  position: absolute;
-  align-items: center;
+	pointer-events: none;
+	display: flex;
+	z-index: 1002;
+	position: absolute;
+	align-items: center;
  
-  margin-left: -30%;
-  path:nth-of-type(2) {
-  }
-  svg g {
-    transform: translate(-76.7053, -29.7727) scale(2, 1);
-  }
-  svg {
-    z-index: 9990;
-    height: 150px;
-    width: 200px;
-  }
+	margin-left: -30%;
+	path:nth-of-type(2) {
+	}
+	svg g {
+		transform: translate(-76.7053, -29.7727) scale(2, 1);
+	}
+	svg {
+		z-index: 9990;
+		height: 150px;
+		width: 200px;
+	}
 `;
 const RotateButton = styled.div`
-  width: 30%;
-  margin-top: 14px;
-  z-index: 999;
-  display: flex;
+	width: 30%;
+	margin-top: 14px;
+	z-index: 999;
+	display: flex;
  
-  svg:hover {
-    cursor: pointer;
-  }
-  svg:hover path {
-    fill: #ececec;
-    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));
-  }
-  path {
-    fill: #bbb;
-  }
-  svg {
-    transform: scale(0.6);
-    z-index: 9990;
-    height: 172px;
-  }
+	svg:hover {
+		cursor: pointer;
+	}
+	svg:hover path {
+		fill: #ececec;
+		filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));
+	}
+	path {
+		fill: #bbb;
+	}
+	svg {
+		transform: scale(0.6);
+		z-index: 9990;
+		height: 172px;
+	}
 `;
  
 interface MlNavigationCompassProps {
-  mapId?: string;
-  insertBeforeLayer?: string;
-  style?: any;
-  backgroundStyle?: any;
-  needleStyle?: any;
-  rotateRightStyle?: any;
-  rotateLeftStyle?: any;
+	mapId?: string;
+	insertBeforeLayer?: string;
+	style?: any;
+	backgroundStyle?: any;
+	needleStyle?: any;
+	rotateRightStyle?: any;
+	rotateLeftStyle?: any;
 }
 /**
  * Navigation component that displays a compass component which indicates the current oriantation of the map it is registered for and offers controls to turn the bearing 90° left/right or reset north to point up.
@@ -612,132 +612,132 @@ interface MlNavigationCompassProps {
  * @component
  */
 const MlNavigationCompass = (props: MlNavigationCompassProps) => {
-  const mapHook = useMap({
-    mapId: props.mapId,
-    waitForLayer: props.insertBeforeLayer,
-  });
-  const [bearing, setBearing] = useState(0);
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
+	const [bearing, setBearing] = useState(0);
  
-  useEffect(() => {
-    if (!mapHook.map) return;
+	useEffect(() => {
+		if (!mapHook.map) return;
  
-    let _updateBearing = () => {
-      <span class="missing-if-branch" title="else path not taken" >E</span>if (!mapHook.map?.map?.getBearing) return;
-<span class="cstat-no" title="statement not covered" >      setBearing(Math.round(mapHook.map.map.getBearing()));</span>
-    };
+		let _updateBearing = () =&gt; {
+			<span class="missing-if-branch" title="else path not taken" >E</span>if (!mapHook.map?.map?.getBearing) return;
+<span class="cstat-no" title="statement not covered" >			setBearing(Math.round(mapHook.map.map.getBearing()));</span>
+		};
 &nbsp;
-    mapHook.map.on("rotate", _updateBearing, mapHook.componentId);
-    _updateBearing();
+		mapHook.map.on("rotate", _updateBearing, mapHook.componentId);
+		_updateBearing();
 &nbsp;
-    return () =&gt; {
-      mapHook.map?.map.off("rotate", _updateBearing);
-    };
-  }, [mapHook.map, props.mapId]);
+		return () =&gt; {
+			mapHook.map?.map.off("rotate", _updateBearing);
+		};
+	}, [mapHook.map, props.mapId]);
 &nbsp;
-  return (
-    &lt;&gt;
-      &lt;div
-        className={css({
-          zIndex: 1000,
-          top: 0,
-          position: "absolute",
-          ...props.style,
-        })}
-      &gt;
-        &lt;div
-          className={css({
-            position: "absolute",
-            border: "10px solid #bcbcbc",
-            backgroundColor: "#717171",
-            background: "radial-gradient(#717171, #414141)",
-            height: "200px",
-            width: "200px",
-            borderRadius: "50%",
-            display: "flex",
-            justifyContent: "center",
-            transform: "scale(0.2) translateX(-448px) translateY(-448px)",
-            ...props.backgroundStyle,
-          })}
-        &gt;
-          &lt;RotateButton className={css({ ...props.rotateRightStyle })}&gt;
-            &lt;RotateRightIcon
-              onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >                if(!mapHook.map)<span class="cstat-no" title="statement not covered" >return;</span></span>
+	return (
+		&lt;&gt;
+			&lt;div
+				className={css({
+					zIndex: 1000,
+					top: 0,
+					position: "absolute",
+					...props.style,
+				})}
+			&gt;
+				&lt;div
+					className={css({
+						position: "absolute",
+						border: "10px solid #bcbcbc",
+						backgroundColor: "#717171",
+						background: "radial-gradient(#717171, #414141)",
+						height: "200px",
+						width: "200px",
+						borderRadius: "50%",
+						display: "flex",
+						justifyContent: "center",
+						transform: "scale(0.2) translateX(-448px) translateY(-448px)",
+						...props.backgroundStyle,
+					})}
+				&gt;
+					&lt;RotateButton className={css({ ...props.rotateRightStyle })}&gt;
+						&lt;RotateRightIcon
+							onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >								if(!mapHook.map)<span class="cstat-no" title="statement not covered" >return;</span></span>
 &nbsp;
-                let bearing = <span class="cstat-no" title="statement not covered" >Math.round(mapHook.map.map.getBearing());</span>
-                let rest = <span class="cstat-no" title="statement not covered" >Math.round(bearing % 90);</span>
-<span class="cstat-no" title="statement not covered" >                if (bearing &gt; 0) {</span>
-<span class="cstat-no" title="statement not covered" >                  rest = 90 - rest;</span>
-                }
-<span class="cstat-no" title="statement not covered" >                if (rest === 0) {</span>
-<span class="cstat-no" title="statement not covered" >                  rest = 90;</span>
-                }
-<span class="cstat-no" title="statement not covered" >                mapHook.map.map.setBearing(Math.round(bearing + Math.abs(rest)));</span>
-              }}
-            &gt;&lt;/RotateRightIcon&gt;
-          &lt;/RotateButton&gt;
-          &lt;NeedleButton
-            className={css({ ...props.needleStyle })}
-            onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >              mapHook.map?.map.setBearing(0);</span>
-            }}
-          &gt;
-            &lt;NeedleContainer
-              style={{
-                transform: "rotate(" + (bearing&gt;0?<span class="branch-0 cbranch-no" title="branch not covered" >"-"+bearing:</span>-1*bearing) + "deg)",
-              }}
-            &gt;
-              &lt;NeedleIcon /&gt;
-            &lt;/NeedleContainer&gt;
-          &lt;/NeedleButton&gt;
-          &lt;RotateButton className={css({ ...props.rotateLeftStyle })}&gt;
-            &lt;RotateLeftIcon
-              onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >                if(!mapHook.map)<span class="cstat-no" title="statement not covered" >return;</span></span>
+								let bearing = <span class="cstat-no" title="statement not covered" >Math.round(mapHook.map.map.getBearing());</span>
+								let rest = <span class="cstat-no" title="statement not covered" >Math.round(bearing % 90);</span>
+<span class="cstat-no" title="statement not covered" >								if (bearing &gt; 0) {</span>
+<span class="cstat-no" title="statement not covered" >									rest = 90 - rest;</span>
+								}
+<span class="cstat-no" title="statement not covered" >								if (rest === 0) {</span>
+<span class="cstat-no" title="statement not covered" >									rest = 90;</span>
+								}
+<span class="cstat-no" title="statement not covered" >								mapHook.map.map.setBearing(Math.round(bearing + Math.abs(rest)));</span>
+							}}
+						&gt;&lt;/RotateRightIcon&gt;
+					&lt;/RotateButton&gt;
+					&lt;NeedleButton
+						className={css({ ...props.needleStyle })}
+						onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >							mapHook.map?.map.setBearing(0);</span>
+						}}
+					&gt;
+						&lt;NeedleContainer
+							style={{
+								transform: "rotate(" + (bearing&gt;0?<span class="branch-0 cbranch-no" title="branch not covered" >"-"+bearing:</span>-1*bearing) + "deg)",
+							}}
+						&gt;
+							&lt;NeedleIcon /&gt;
+						&lt;/NeedleContainer&gt;
+					&lt;/NeedleButton&gt;
+					&lt;RotateButton className={css({ ...props.rotateLeftStyle })}&gt;
+						&lt;RotateLeftIcon
+							onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >								if(!mapHook.map)<span class="cstat-no" title="statement not covered" >return;</span></span>
 &nbsp;
-                let bearing = <span class="cstat-no" title="statement not covered" >Math.round(mapHook.map.map.getBearing());</span>
-                let rest = <span class="cstat-no" title="statement not covered" >Math.round(bearing % 90);</span>
-<span class="cstat-no" title="statement not covered" >                if (bearing &lt; 0) {</span>
-<span class="cstat-no" title="statement not covered" >                  rest = 90 + rest;</span>
-                }
-<span class="cstat-no" title="statement not covered" >                if (rest === 0) {</span>
-<span class="cstat-no" title="statement not covered" >                  rest = 90;</span>
-                }
-<span class="cstat-no" title="statement not covered" >                mapHook.map.map.setBearing(Math.round(bearing - Math.abs(rest)));</span>
-              }}
-            &gt;&lt;/RotateLeftIcon&gt;
-          &lt;/RotateButton&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/&gt;
-  );
+								let bearing = <span class="cstat-no" title="statement not covered" >Math.round(mapHook.map.map.getBearing());</span>
+								let rest = <span class="cstat-no" title="statement not covered" >Math.round(bearing % 90);</span>
+<span class="cstat-no" title="statement not covered" >								if (bearing &lt; 0) {</span>
+<span class="cstat-no" title="statement not covered" >									rest = 90 + rest;</span>
+								}
+<span class="cstat-no" title="statement not covered" >								if (rest === 0) {</span>
+<span class="cstat-no" title="statement not covered" >									rest = 90;</span>
+								}
+<span class="cstat-no" title="statement not covered" >								mapHook.map.map.setBearing(Math.round(bearing - Math.abs(rest)));</span>
+							}}
+						&gt;&lt;/RotateLeftIcon&gt;
+					&lt;/RotateButton&gt;
+				&lt;/div&gt;
+			&lt;/div&gt;
+		&lt;/&gt;
+	);
 };
 &nbsp;
 MlNavigationCompass.propTypes = {
-  /**
-   * Component id prefix
-   */
-  idPrefix: PropTypes.string,
-  /**
-   * Style object to adjust css definitions of the component.
-   */
-  style: PropTypes.object,
-  /**
-   * Style object to adjust css definitions of the background.
-   */
-  backgroundStyle: PropTypes.object,
-  /**
-   * Style object to adjust css definitions of the compass needle.
-   */
-  needleStyle: PropTypes.object,
-  /**
-   * Style object to adjust css definitions of the rotate right button.
-   */
-  rotateRightStyle: PropTypes.object,
-  /**
-   * Style object to adjust css definitions of the rotate left button.
-   */
-  rotateLeftStyle: PropTypes.object,
+	/**
+	 * Component id prefix
+	 */
+	idPrefix: PropTypes.string,
+	/**
+	 * Style object to adjust css definitions of the component.
+	 */
+	style: PropTypes.object,
+	/**
+	 * Style object to adjust css definitions of the background.
+	 */
+	backgroundStyle: PropTypes.object,
+	/**
+	 * Style object to adjust css definitions of the compass needle.
+	 */
+	needleStyle: PropTypes.object,
+	/**
+	 * Style object to adjust css definitions of the rotate right button.
+	 */
+	rotateRightStyle: PropTypes.object,
+	/**
+	 * Style object to adjust css definitions of the rotate left button.
+	 */
+	rotateLeftStyle: PropTypes.object,
 };
 &nbsp;
 export default MlNavigationCompass;
@@ -748,7 +748,7 @@ export default MlNavigationCompass;
             <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 Tue Aug 30 2022 13:27:18 GMT+0000 (Coordinated Universal Time)
+                at Tue Oct 04 2022 12:11:13 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -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 Tue Aug 30 2022 13:27:18 GMT+0000 (Coordinated Universal Time)
+                at Tue Oct 04 2022 12:11:13 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>