@mapcomponents/react-maplibre 0.1.57 → 0.1.59

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

@@ -508,31 +508,31 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, {
-  useContext,
-  useCallback,
-  useRef,
-  useEffect,
-  useState,
-  useMemo
+	useContext,
+	useCallback,
+	useRef,
+	useEffect,
+	useState,
+	useMemo
 } from "react";
 // @ts-ignore
 import syncMove from "@mapbox/mapbox-gl-sync-move";
 import "./style.css";
-import  MapContext  from "../../contexts/MapContext";
+import	MapContext	from "../../contexts/MapContext";
 &nbsp;
 interface MlLayerMagnifyProps {
-  /**
-   * Id of the first MapLibre instance
-   */
-  map1Id: string;
-  /**
-   * Id of the second MapLibre instance
-   */
-  map2Id: string;
-  /**
-   * Size of the "magnifier"-circle
-   */
-  magnifierRadius?: number;
+	/**
+	 * Id of the first MapLibre instance
+	 */
+	map1Id: string;
+	/**
+	 * Id of the second MapLibre instance
+	 */
+	map2Id: string;
+	/**
+	 * Size of the "magnifier"-circle
+	 */
+	magnifierRadius?: number;
 }
 &nbsp;
 /**
@@ -541,191 +541,191 @@ interface MlLayerMagnifyProps {
  * the map and can be dragged around on top of the MapLibreMap referenced by props.map1Id
  */
 const MlLayerMagnify = (props: MlLayerMagnifyProps) =&gt; {
-  const mapContext:MapContextType = useContext(MapContext);
-  const syncMoveInitializedRef = useRef(false);
-  const syncCleanupFunctionRef = useRef(<span class="fstat-no" title="function not covered" >()</span> =&gt; {});
+	const mapContext:MapContextType = useContext(MapContext);
+	const syncMoveInitializedRef = useRef(false);
+	const syncCleanupFunctionRef = useRef(<span class="fstat-no" title="function not covered" >()</span> =&gt; {});
 &nbsp;
-  const [swipeX, setSwipeX] = useState('50');
-  const swipeXRef = useRef('50');
-  const [swipeY, setSwipeY] = useState('50');
-  const swipeYRef = useRef('50');
+	const [swipeX, setSwipeX] = useState('50');
+	const swipeXRef = useRef('50');
+	const [swipeY, setSwipeY] = useState('50');
+	const swipeYRef = useRef('50');
 &nbsp;
-  const magnifierRadius = useMemo(() =&gt; {
-    return props.magnifierRadius || <span class="branch-1 cbranch-no" title="branch not covered" >200;</span>
-  },[props.magnifierRadius]);
+	const magnifierRadius = useMemo(() =&gt; {
+		return props.magnifierRadius || <span class="branch-1 cbranch-no" title="branch not covered" >200;</span>
+	},[props.magnifierRadius]);
 &nbsp;
-  const mapExists = useCallback(() =&gt; {
-    <span class="missing-if-branch" title="if path not taken" >I</span>if (!props.map1Id || !props.map2Id) {
-<span class="cstat-no" title="statement not covered" >      return false;</span>
-    }
-    if (!mapContext.getMap(props.map1Id) || !mapContext.getMap(props.map2Id)) {
-      return false;
-    }
+	const mapExists = useCallback(() =&gt; {
+		<span class="missing-if-branch" title="if path not taken" >I</span>if (!props.map1Id || !props.map2Id) {
+<span class="cstat-no" title="statement not covered" >			return false;</span>
+		}
+		if (!mapContext.getMap(props.map1Id) || !mapContext.getMap(props.map2Id)) {
+			return false;
+		}
 &nbsp;
-    return true;
-  }, [props, mapContext]);
+		return true;
+	}, [props, mapContext]);
 &nbsp;
-  const onResize = useRef(<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >    if (!mapExists()) <span class="cstat-no" title="statement not covered" >return;</span></span>
+	const onResize = useRef(<span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >		if (!mapExists()) <span class="cstat-no" title="statement not covered" >return;</span></span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    onMove({</span>
-      clientX: swipeXRef.current,
-      clientY: swipeYRef.current,
-    });
-  });
+<span class="cstat-no" title="statement not covered" >		onMove({</span>
+			clientX: swipeXRef.current,
+			clientY: swipeYRef.current,
+		});
+	});
 &nbsp;
-  useEffect(() =&gt; {
-    window.addEventListener("resize", onResize.current);
-    let _onResize = onResize.current;
+	useEffect(() =&gt; {
+		window.addEventListener("resize", onResize.current);
+		let _onResize = onResize.current;
 &nbsp;
-    return () =&gt; {
-      window.removeEventListener("resize", _onResize);
-      syncCleanupFunctionRef.current();
-    };
-  }, []);
+		return () =&gt; {
+			window.removeEventListener("resize", _onResize);
+			syncCleanupFunctionRef.current();
+		};
+	}, []);
 &nbsp;
-  const onMove = useCallback(
-    (e) =&gt; {
-      <span class="missing-if-branch" title="if path not taken" >I</span>if (!mapExists()) <span class="cstat-no" title="statement not covered" >return;</span>
+	const onMove = useCallback(
+		(e) =&gt; {
+			<span class="missing-if-branch" title="if path not taken" >I</span>if (!mapExists()) <span class="cstat-no" title="statement not covered" >return;</span>
 &nbsp;
-      let bounds = mapContext.maps[props.map1Id]
-        .getCanvas()
-        .getBoundingClientRect();
-      let clientX =
-        e.clientX ||
-        (typeof e.touches !== "undefined" &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >typeof e.touches[0] !== "undefined"</span>
-          ? <span class="branch-0 cbranch-no" title="branch not covered" >e.touches[0].clientX</span>
-          : 0);
-      let clientY =
-        e.clientY ||
-        (typeof e.touches !== "undefined" &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >typeof e.touches[0] !== "undefined"</span>
-          ? <span class="branch-0 cbranch-no" title="branch not covered" >e.touches[0].clientY</span>
-          : 0);
+			let bounds = mapContext.maps[props.map1Id]
+				.getCanvas()
+				.getBoundingClientRect();
+			let clientX =
+				e.clientX ||
+				(typeof e.touches !== "undefined" &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >typeof e.touches[0] !== "undefined"</span>
+					? <span class="branch-0 cbranch-no" title="branch not covered" >e.touches[0].clientX</span>
+					: 0);
+			let clientY =
+				e.clientY ||
+				(typeof e.touches !== "undefined" &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >typeof e.touches[0] !== "undefined"</span>
+					? <span class="branch-0 cbranch-no" title="branch not covered" >e.touches[0].clientY</span>
+					: 0);
 &nbsp;
-      clientX -= bounds.x;
-      clientY -= bounds.y;
-      let swipeX_tmp = ((clientX / bounds.width) * 100).toFixed(2);
-      let swipeY_tmp = ((clientY / bounds.height) * 100).toFixed(2);
+			clientX -= bounds.x;
+			clientY -= bounds.y;
+			let swipeX_tmp = ((clientX / bounds.width) * 100).toFixed(2);
+			let swipeY_tmp = ((clientY / bounds.height) * 100).toFixed(2);
 &nbsp;
-      <span class="missing-if-branch" title="else path not taken" >E</span>if (
-        swipeXRef.current !== swipeX_tmp ||
-<span class="branch-1 cbranch-no" title="branch not covered" >        swipeYRef.current !== swipeY_tmp</span>
-      ) {
-        setSwipeX(swipeX_tmp);
-        swipeXRef.current = swipeX_tmp;
-        setSwipeY(swipeY_tmp);
-        swipeYRef.current = swipeY_tmp;
+			<span class="missing-if-branch" title="else path not taken" >E</span>if (
+				swipeXRef.current !== swipeX_tmp ||
+<span class="branch-1 cbranch-no" title="branch not covered" >				swipeYRef.current !== swipeY_tmp</span>
+			) {
+				setSwipeX(swipeX_tmp);
+				swipeXRef.current = swipeX_tmp;
+				setSwipeY(swipeY_tmp);
+				swipeYRef.current = swipeY_tmp;
 &nbsp;
-        mapContext.maps[props.map2Id].getContainer().style.clipPath =
-          `circle(${magnifierRadius}px at ` +
-          (parseFloat(swipeXRef.current) * bounds.width) / 100 +
-          "px " +
-          (parseFloat(swipeYRef.current) * bounds.height) / 100 +
-          "px)";
-      }
-    },
-    [mapContext, mapExists, props, magnifierRadius]
-  );
+				mapContext.maps[props.map2Id].getContainer().style.clipPath =
+					`circle(${magnifierRadius}px at ` +
+					(parseFloat(swipeXRef.current) * bounds.width) / 100 +
+					"px " +
+					(parseFloat(swipeYRef.current) * bounds.height) / 100 +
+					"px)";
+			}
+		},
+		[mapContext, mapExists, props, magnifierRadius]
+	);
 &nbsp;
-  useEffect(() =&gt; {
-    if (!mapExists() || syncMoveInitializedRef.current) return;
+	useEffect(() =&gt; {
+		if (!mapExists() || syncMoveInitializedRef.current) return;
 &nbsp;
-    syncMoveInitializedRef.current = true;
-    syncCleanupFunctionRef.current = syncMove(
-      mapContext.getMap(props.map1Id).map,
-      mapContext.getMap(props.map2Id).map
-    );
+		syncMoveInitializedRef.current = true;
+		syncCleanupFunctionRef.current = syncMove(
+			mapContext.getMap(props.map1Id).map,
+			mapContext.getMap(props.map2Id).map
+		);
 &nbsp;
-    /*
-    automatically adjust radius for small screens
-    if (
-      mapContext.maps[props.map1Id].getCanvas().clientWidth &gt;
-        mapContext.maps[props.map1Id].getCanvas().clientHeight &amp;&amp;
-      magnifierRadius * 2 &gt;
-        mapContext.maps[props.map1Id].getCanvas().clientHeight
-    ) {
-      magnifierRadius = Math.floor(
-        mapContext.maps[props.map1Id].getCanvas().clientHeight / 2
-      );
-      setMagnifierRadius(magnifierRadius);
-    }
+		/*
+		automatically adjust radius for small screens
+		if (
+			mapContext.maps[props.map1Id].getCanvas().clientWidth &gt;
+				mapContext.maps[props.map1Id].getCanvas().clientHeight &amp;&amp;
+			magnifierRadius * 2 &gt;
+				mapContext.maps[props.map1Id].getCanvas().clientHeight
+		) {
+			magnifierRadius = Math.floor(
+				mapContext.maps[props.map1Id].getCanvas().clientHeight / 2
+			);
+			setMagnifierRadius(magnifierRadius);
+		}
 &nbsp;
-    if (
-      mapContext.maps[props.map1Id].getCanvas().clientHeight &gt;
-        mapContext.maps[props.map1Id].getCanvas().clientWidth &amp;&amp;
-      magnifierRadius * 2 &gt;
-        mapContext.maps[props.map1Id].getCanvas().clientWidth
-    ) {
-      magnifierRadius = Math.floor(
-        mapContext.maps[props.map1Id].getCanvas().clientWidth / 2
-      );
-      setMagnifierRadius(magnifierRadius);
-    }
-    */
+		if (
+			mapContext.maps[props.map1Id].getCanvas().clientHeight &gt;
+				mapContext.maps[props.map1Id].getCanvas().clientWidth &amp;&amp;
+			magnifierRadius * 2 &gt;
+				mapContext.maps[props.map1Id].getCanvas().clientWidth
+		) {
+			magnifierRadius = Math.floor(
+				mapContext.maps[props.map1Id].getCanvas().clientWidth / 2
+			);
+			setMagnifierRadius(magnifierRadius);
+		}
+		*/
 &nbsp;
-    onMove({
-      clientX: mapContext.maps[props.map1Id].getCanvas().clientWidth / 2,
-      clientY: mapContext.maps[props.map1Id].getCanvas().clientHeight / 2,
-    });
-  }, [mapContext.mapIds, mapContext, mapExists, props, onMove]);
+		onMove({
+			clientX: mapContext.maps[props.map1Id].getCanvas().clientWidth / 2,
+			clientY: mapContext.maps[props.map1Id].getCanvas().clientHeight / 2,
+		});
+	}, [mapContext.mapIds, mapContext, mapExists, props, onMove]);
 &nbsp;
-  const onDown = <span class="fstat-no" title="function not covered" >(e</span>:any) =&gt; {
-<span class="cstat-no" title="statement not covered" >    if (e.touches) {</span>
-<span class="cstat-no" title="statement not covered" >      document.addEventListener("touchmove", onMove);</span>
-<span class="cstat-no" title="statement not covered" >      document.addEventListener("touchend", onTouchEnd);</span>
-    } else {
-<span class="cstat-no" title="statement not covered" >      document.addEventListener("mousemove", onMove);</span>
-<span class="cstat-no" title="statement not covered" >      document.addEventListener("mouseup", onMouseUp);</span>
-    }
-  };
+	const onDown = <span class="fstat-no" title="function not covered" >(e</span>:any) =&gt; {
+<span class="cstat-no" title="statement not covered" >		if (e.touches) {</span>
+<span class="cstat-no" title="statement not covered" >			document.addEventListener("touchmove", onMove);</span>
+<span class="cstat-no" title="statement not covered" >			document.addEventListener("touchend", onTouchEnd);</span>
+		} else {
+<span class="cstat-no" title="statement not covered" >			document.addEventListener("mousemove", onMove);</span>
+<span class="cstat-no" title="statement not covered" >			document.addEventListener("mouseup", onMouseUp);</span>
+		}
+	};
 &nbsp;
-  const onTouchEnd = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >    document.removeEventListener("touchmove", onMove);</span>
-<span class="cstat-no" title="statement not covered" >    document.removeEventListener("touchend", onTouchEnd);</span>
-  };
+	const onTouchEnd = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >		document.removeEventListener("touchmove", onMove);</span>
+<span class="cstat-no" title="statement not covered" >		document.removeEventListener("touchend", onTouchEnd);</span>
+	};
 &nbsp;
-  const onMouseUp = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >    document.removeEventListener("mousemove", onMove);</span>
-<span class="cstat-no" title="statement not covered" >    document.removeEventListener("mouseup", onMouseUp);</span>
-  };
+	const onMouseUp = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >		document.removeEventListener("mousemove", onMove);</span>
+<span class="cstat-no" title="statement not covered" >		document.removeEventListener("mouseup", onMouseUp);</span>
+	};
 &nbsp;
-  const onWheel = <span class="fstat-no" title="function not covered" >(e</span>:any) =&gt; {
-    let evCopy = <span class="cstat-no" title="statement not covered" >new WheelEvent(e.type, e);</span>
-<span class="cstat-no" title="statement not covered" >    mapContext.map.getCanvas().dispatchEvent(evCopy);</span>
-  };
+	const onWheel = <span class="fstat-no" title="function not covered" >(e</span>:any) =&gt; {
+		let evCopy = <span class="cstat-no" title="statement not covered" >new WheelEvent(e.type, e);</span>
+<span class="cstat-no" title="statement not covered" >		mapContext.map.getCanvas().dispatchEvent(evCopy);</span>
+	};
 &nbsp;
-  return (
-    &lt;div
-      style={{
-        position: "absolute",
-        left: swipeX + "%",
-        top: swipeY + "%",
-        borderRadius: "50%",
-        width: magnifierRadius * 2 + 1 + "px",
-        height: magnifierRadius * 2 + 1 + "px",
-        background: "rgba(0,0,0,0)",
-        border: "2px solid #fafafa",
-        boxShadow:
-          "1px 2px 2px rgba(19, 19, 19, .5), inset 1px 1px 1px rgba(19, 19, 19, .2)",
-        cursor: "pointer",
-        zIndex: "110",
-        marginLeft: magnifierRadius * -1 - 1 + "px",
-        marginTop: magnifierRadius * -1 - 1 + "px",
-        textAlign: "center",
-        lineHeight: "91px",
-        fontSize: "2em",
-        color: "#fafafa",
-        userSelect: "none",
-      }}
-      onTouchStart={onDown}
-      onMouseDown={onDown}
-      onWheel={onWheel}
-    &gt;&lt;/div&gt;
-  );
+	return (
+		&lt;div
+			style={{
+				position: "absolute",
+				left: swipeX + "%",
+				top: swipeY + "%",
+				borderRadius: "50%",
+				width: magnifierRadius * 2 + 1 + "px",
+				height: magnifierRadius * 2 + 1 + "px",
+				background: "rgba(0,0,0,0)",
+				border: "2px solid #fafafa",
+				boxShadow:
+					"1px 2px 2px rgba(19, 19, 19, .5), inset 1px 1px 1px rgba(19, 19, 19, .2)",
+				cursor: "pointer",
+				zIndex: "110",
+				marginLeft: magnifierRadius * -1 - 1 + "px",
+				marginTop: magnifierRadius * -1 - 1 + "px",
+				textAlign: "center",
+				lineHeight: "91px",
+				fontSize: "2em",
+				color: "#fafafa",
+				userSelect: "none",
+			}}
+			onTouchStart={onDown}
+			onMouseDown={onDown}
+			onWheel={onWheel}
+		&gt;&lt;/div&gt;
+	);
 };
 &nbsp;
 MlLayerMagnify.defaultProps = {
-  magnifierRadius: 200,
+	magnifierRadius: 200,
 };
 &nbsp;
 export default MlLayerMagnify;
@@ -736,7 +736,7 @@ export default MlLayerMagnify;
             <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/MlLayerMagnify/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>