@mapcomponents/react-maplibre 0.1.45 → 0.1.49

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">78.78% </span>
+                <span class="strong">78.94% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>26/33</span>
+                <span class='fraction'>30/38</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">68% </span>
+                <span class="strong">68.96% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>17/25</span>
+                <span class='fraction'>20/29</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">71.42% </span>
+                <span class="strong">75% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>5/7</span>
+                <span class='fraction'>6/8</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">78.78% </span>
+                <span class="strong">80.55% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>26/33</span>
+                <span class='fraction'>29/36</span>
             </div>
         
             
@@ -201,8 +201,9 @@
 <a name='L136'></a><a href='#L136'>136</a>
 <a name='L137'></a><a href='#L137'>137</a>
 <a name='L138'></a><a href='#L138'>138</a>
-<a name='L139'></a><a href='#L139'>139</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L139'></a><a href='#L139'>139</a>
+<a name='L140'></a><a href='#L140'>140</a>
+<a name='L141'></a><a href='#L141'>141</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-neutral">&nbsp;</span>
@@ -251,12 +252,10 @@
 <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-yes">16x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">16x</span>
 <span class="cline-any cline-yes">16x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">16x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">16x</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -264,15 +263,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">16x</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">16x</span>
 <span class="cline-any cline-yes">12x</span>
-<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-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
@@ -301,7 +292,6 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -310,25 +300,39 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">16x</span>
-<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</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>
-<span class="cline-any cline-yes">4x</span>
 <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-yes">16x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
 <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-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">16x</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">4x</span>
+<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-yes">16x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -350,26 +354,25 @@ import CustomDirectSelectMode from "./custom-direct-select-mode.js";
 &nbsp;
 import useMap from "../../hooks/useMap";
 &nbsp;
-&nbsp;
 interface MlFeatureEditorProps {
   /**
    * Id of the target MapLibre instance in mapContext
    */
-  mapId: string;
+  mapId?: string;
   /**
    * Id of an existing layer in the mapLibre instance to help specify the layer order
    * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
    */
-  insertBeforeLayer: string;
+  insertBeforeLayer?: string;
   /**
    * Input GeoJson data at initialization
    */
-  geojson: any;
+  geojson?: any;
   /**
    * Callback function that is called each time the GeoJson data within has changed within MlFeatureEditor.
    * First parameter is the new GeoJson feature.
    */
-  onChange?: Function
+  onChange?: Function;
   /**
    * Feature editor mode:
    * - "custom_select" edit features
@@ -377,40 +380,30 @@ interface MlFeatureEditorProps {
    * - "draw_point" draw Point
    * - "draw_line_string" draw LineString
    */
-  mode?:string
+  mode?: string;
 }
 &nbsp;
 /**
  * GeoJson Feature editor that allows to create or manipulate GeoJson data
  */
-const MlFeatureEditor = (props:MlFeatureEditorProps) =&gt; {
+const MlFeatureEditor = (props: MlFeatureEditorProps) =&gt; {
   const draw = useRef&lt;MapboxDraw&gt;();
   const mapHook = useMap({
     mapId: props.mapId,
     waitForLayer: props.insertBeforeLayer,
   });
-  const onChangeRef = useRef(props.onChange);
 &nbsp;
   const drawToolsInitialized = useRef(false);
   const [drawToolsReady, setDrawToolsReady] = useState(false);
 &nbsp;
-  const [mouseUpTrigger, setMouseUpTrigger] = useState(0);
 &nbsp;
-  const modeChangeHandler = <span class="fstat-no" title="function not covered" >(e</span>:any) =&gt; {
+  const modeChangeHandler = <span class="fstat-no" title="function not covered" >(e</span>: any) =&gt; {
 <span class="cstat-no" title="statement not covered" >    console.log("MlFeatureEditor mode change to " + e.mode);</span>
     //setDrawMode(e.mode);
   };
-&nbsp;
-  const mouseUpHandler = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >    setMouseUpTrigger(Math.random());</span>
-  };
 &nbsp;
   useEffect(() =&gt; {
-    if (
-      mapHook.map &amp;&amp;
-      !drawToolsInitialized.current
-    ) {
-      
+    if (mapHook.map &amp;&amp; !drawToolsInitialized.current) {
       drawToolsInitialized.current = true;
 &nbsp;
       <span class="missing-if-branch" title="if path not taken" >I</span>if (
@@ -436,35 +429,48 @@ const MlFeatureEditor = (props:MlFeatureEditorProps) =&gt; {
           MapboxDraw.modes
         ),
       });
-&nbsp;
-      mapHook.map.on("draw.modechange", modeChangeHandler, mapHook.componentId);
 &nbsp;
       mapHook.map.addControl(draw.current, "top-left", mapHook.componentId);
 &nbsp;
-      mapHook.map.on("mouseup", mouseUpHandler, mapHook.componentId);
+&nbsp;
+      mapHook.map.on("draw.modechange", modeChangeHandler, mapHook.componentId);
 &nbsp;
       setDrawToolsReady(true);
     }
-  }, [mapHook.map,  props, drawToolsInitialized]);
+  }, [mapHook.map, props, drawToolsInitialized]);
 &nbsp;
   useEffect(() =&gt; {
-    if (
-      draw.current &amp;&amp;
-      props.geojson?.geometry
-    ) {
-      draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
+    if (!mapHook.map || !drawToolsReady) return;
+&nbsp;
+    const changeHandler = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >      if (draw.current) {</span>
+        // update drawnFeatures state object
+<span class="cstat-no" title="statement not covered" >        if (typeof props.onChange === "function") {</span>
+          let currentFeatureCollection = <span class="cstat-no" title="statement not covered" >draw.current.getAll?.();</span>
+<span class="cstat-no" title="statement not covered" >          props.onChange(currentFeatureCollection?.features);</span>
+        }
+      }
+    };
+&nbsp;
+    mapHook.map.on("mouseup", changeHandler);
+&nbsp;
+    mapHook.map.on("touchend", changeHandler);
+&nbsp;
+    return () =&gt; {
+      <span class="missing-if-branch" title="if path not taken" >I</span>if (!mapHook.map) <span class="cstat-no" title="statement not covered" >return;</span>
+&nbsp;
+      mapHook.map.map.off("mouseup", changeHandler);
+&nbsp;
+      mapHook.map.map.off("touchend", changeHandler);
     }
-  }, [props.geojson, drawToolsReady]);
+&nbsp;
+  }, [drawToolsReady, mapHook.map])
 &nbsp;
   useEffect(() =&gt; {
-    <span class="missing-if-branch" title="if path not taken" >I</span>if (draw.current &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >mouseUpTrigger)</span> {
-      // update drawnFeatures state object
-      let currentFeatureCollection = <span class="cstat-no" title="statement not covered" >draw.current.getAll();</span>
-<span class="cstat-no" title="statement not covered" >      if (typeof onChangeRef.current === "function") {</span>
-<span class="cstat-no" title="statement not covered" >        onChangeRef.current(currentFeatureCollection.features);</span>
-      }
+    if (draw.current &amp;&amp; props.geojson?.geometry) {
+      draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
     }
-  }, [mouseUpTrigger]);
+  }, [props.geojson, drawToolsReady]);
 &nbsp;
   useEffect(() =&gt; {
     <span class="missing-if-branch" title="if path not taken" >I</span>if (props.mode &amp;&amp; draw.current) {
@@ -473,8 +479,8 @@ const MlFeatureEditor = (props:MlFeatureEditorProps) =&gt; {
     }
   }, [props.mode]);
 &nbsp;
-  return (&lt;&gt;&lt;/&gt;);
-}
+  return &lt;&gt;&lt;/&gt;;
+};
 &nbsp;
 export default MlFeatureEditor;
 &nbsp;</pre></td></tr></table></pre>
@@ -484,7 +490,7 @@ export default MlFeatureEditor;
             <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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Mon Jul 11 2022 18:41:30 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">78.78% </span>
+                <span class="strong">78.94% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>26/33</span>
+                <span class='fraction'>30/38</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">68% </span>
+                <span class="strong">68.96% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>17/25</span>
+                <span class='fraction'>20/29</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">71.42% </span>
+                <span class="strong">75% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>5/7</span>
+                <span class='fraction'>6/8</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">78.78% </span>
+                <span class="strong">80.55% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>26/33</span>
+                <span class='fraction'>29/36</span>
             </div>
         
             
@@ -80,17 +80,17 @@
 </thead>
 <tbody><tr>
 	<td class="file medium" data-value="MlFeatureEditor.tsx"><a href="MlFeatureEditor.tsx.html">MlFeatureEditor.tsx</a></td>
-	<td data-value="78.78" class="pic medium">
+	<td data-value="78.94" class="pic medium">
 	<div class="chart"><div class="cover-fill" style="width: 78%"></div><div class="cover-empty" style="width: 22%"></div></div>
 	</td>
-	<td data-value="78.78" class="pct medium">78.78%</td>
-	<td data-value="33" class="abs medium">26/33</td>
-	<td data-value="68" class="pct medium">68%</td>
-	<td data-value="25" class="abs medium">17/25</td>
-	<td data-value="71.42" class="pct medium">71.42%</td>
-	<td data-value="7" class="abs medium">5/7</td>
-	<td data-value="78.78" class="pct medium">78.78%</td>
-	<td data-value="33" class="abs medium">26/33</td>
+	<td data-value="78.94" class="pct medium">78.94%</td>
+	<td data-value="38" class="abs medium">30/38</td>
+	<td data-value="68.96" class="pct medium">68.96%</td>
+	<td data-value="29" class="abs medium">20/29</td>
+	<td data-value="75" class="pct medium">75%</td>
+	<td data-value="8" class="abs medium">6/8</td>
+	<td data-value="80.55" class="pct high">80.55%</td>
+	<td data-value="36" class="abs high">29/36</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 Tue May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Mon Jul 11 2022 18:41:30 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -325,7 +325,7 @@ export default MlFillExtrusionLayer;
             <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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Mon Jul 11 2022 18:41:30 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlFillExtrusionLayer/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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Mon Jul 11 2022 18:41:30 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -763,7 +763,7 @@ export default MlFollowGps;
             <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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Mon Jul 11 2022 18:41:30 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlFollowGps/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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Mon Jul 11 2022 18:41:30 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -1201,7 +1201,7 @@ export default MlGPXViewer;
             <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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Mon Jul 11 2022 18:41:30 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlGPXViewer/gpxConverter.js.html

@@ -1630,7 +1630,7 @@ export default toGeoJSON;
             <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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Mon Jul 11 2022 18:41:30 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -116,7 +116,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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Mon Jul 11 2022 18:41:30 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -388,7 +388,7 @@ export default MlGeoJsonLayer;
             <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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Mon Jul 11 2022 18:41:30 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlGeoJsonLayer/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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Mon Jul 11 2022 18:41:30 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>