@mapcomponents/react-maplibre 0.1.57 → 0.1.59

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

@@ -490,195 +490,195 @@ import PropTypes from "prop-types";
  * @component
  */
 const MlThreeJsLayer = (props) => {
-  const mapContext = useContext(MapContext);
+	const mapContext = useContext(MapContext);
  
-  const layerName = "3d-model";
-  const [showLayer, setShowLayer] = useState(true);
-  const showLayerRef = useRef(true);
-  const initializedRef = useRef(false);
-  const mapRef = useRef(null);
-  const initFuncRef = useRef(props.init);
+	const layerName = "3d-model";
+	const [showLayer, setShowLayer] = useState(true);
+	const showLayerRef = useRef(true);
+	const initializedRef = useRef(false);
+	const mapRef = useRef(null);
+	const initFuncRef = useRef(props.init);
  
-  const cleanup = () => {
-    <span class="missing-if-branch" title="else path not taken" >E</span>if (mapRef.current &amp;&amp; mapRef.current.style) {
-      <span class="missing-if-branch" title="else path not taken" >E</span>if (mapRef.current.getLayer(layerName)) {
-        mapRef.current.removeLayer(layerName);
-      }
-      mapRef.current = null;
-    }
-  };
+	const cleanup = () =&gt; {
+		<span class="missing-if-branch" title="else path not taken" >E</span>if (mapRef.current &amp;&amp; mapRef.current.style) {
+			<span class="missing-if-branch" title="else path not taken" >E</span>if (mapRef.current.getLayer(layerName)) {
+				mapRef.current.removeLayer(layerName);
+			}
+			mapRef.current = null;
+		}
+	};
 &nbsp;
-  useEffect(() =&gt; {
-    <span class="missing-if-branch" title="if path not taken" >I</span>if (typeof initFuncRef.current === "function") {
-<span class="cstat-no" title="statement not covered" >      initFuncRef.current();</span>
-    }
+	useEffect(() =&gt; {
+		<span class="missing-if-branch" title="if path not taken" >I</span>if (typeof initFuncRef.current === "function") {
+<span class="cstat-no" title="statement not covered" >			initFuncRef.current();</span>
+		}
 &nbsp;
-    return cleanup;
-  }, []);
+		return cleanup;
+	}, []);
 &nbsp;
-  useEffect(() =&gt; {
-    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
+	useEffect(() =&gt; {
+		if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
 &nbsp;
-    initializedRef.current = true;
-    mapRef.current = mapContext.getMap(props.mapId);
+		initializedRef.current = true;
+		mapRef.current = mapContext.getMap(props.mapId);
 &nbsp;
-    mapRef.current.setCenter([7.099771581806502, 50.73395746209983]);
-    mapRef.current.setZoom(15);
-    mapRef.current.setPitch(45);
+		mapRef.current.setCenter([7.099771581806502, 50.73395746209983]);
+		mapRef.current.setZoom(15);
+		mapRef.current.setPitch(45);
 &nbsp;
-    // parameters to ensure the model is georeferenced correctly on the map
-    var modelOrigin = [7.099771581806502, 50.73395746209983];
-    // 50.73395746209983, 7.099771581806502
-    var modelAltitude = 0;
-    var modelRotate = [Math.PI / 2, 90, 0];
+		// parameters to ensure the model is georeferenced correctly on the map
+		var modelOrigin = [7.099771581806502, 50.73395746209983];
+		// 50.73395746209983, 7.099771581806502
+		var modelAltitude = 0;
+		var modelRotate = [Math.PI / 2, 90, 0];
 &nbsp;
-    var modelAsMercatorCoordinate = maplibregl.MercatorCoordinate.fromLngLat(
-      modelOrigin,
-      modelAltitude
-    );
+		var modelAsMercatorCoordinate = maplibregl.MercatorCoordinate.fromLngLat(
+			modelOrigin,
+			modelAltitude
+		);
 &nbsp;
-    // transformation parameters to position, rotate and scale the 3D model onto the map
-    var modelTransform = {
-      translateX: modelAsMercatorCoordinate.x + 0.0000008,
-      translateY: modelAsMercatorCoordinate.y + 0.0000018,
-      translateZ: modelAsMercatorCoordinate.z,
-      rotateX: modelRotate[0],
-      rotateY: modelRotate[1],
-      rotateZ: modelRotate[2],
-      /* Since our 3D model is in real world meters, a scale transform needs to be
-       * applied since the CustomLayerInterface expects units in MercatorCoordinates.
-       */
-      scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits() + 0.00000003,
-    };
+		// transformation parameters to position, rotate and scale the 3D model onto the map
+		var modelTransform = {
+			translateX: modelAsMercatorCoordinate.x + 0.0000008,
+			translateY: modelAsMercatorCoordinate.y + 0.0000018,
+			translateZ: modelAsMercatorCoordinate.z,
+			rotateX: modelRotate[0],
+			rotateY: modelRotate[1],
+			rotateZ: modelRotate[2],
+			/* Since our 3D model is in real world meters, a scale transform needs to be
+			 * applied since the CustomLayerInterface expects units in MercatorCoordinates.
+			 */
+			scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits() + 0.00000003,
+		};
 &nbsp;
-    //var THREE = window.THREE;
+		//var THREE = window.THREE;
 &nbsp;
-    // configuration of the custom layer for a 3D model per the CustomLayerInterface
-    var customLayer = {
-      id: "3d-model",
-      type: "custom",
-      renderingMode: "3d",
-      onAdd: <span class="fstat-no" title="function not covered" >fu</span>nction (map, gl) {
-<span class="cstat-no" title="statement not covered" >        this.camera = new THREE.Camera();</span>
-<span class="cstat-no" title="statement not covered" >        this.scene = new THREE.Scene();</span>
+		// configuration of the custom layer for a 3D model per the CustomLayerInterface
+		var customLayer = {
+			id: "3d-model",
+			type: "custom",
+			renderingMode: "3d",
+			onAdd: <span class="fstat-no" title="function not covered" >fu</span>nction (map, gl) {
+<span class="cstat-no" title="statement not covered" >				this.camera = new THREE.Camera();</span>
+<span class="cstat-no" title="statement not covered" >				this.scene = new THREE.Scene();</span>
 &nbsp;
-        // create two three.js lights to illuminate the model
-        var directionalLight = <span class="cstat-no" title="statement not covered" >new THREE.DirectionalLight(0xffffff);</span>
-<span class="cstat-no" title="statement not covered" >        directionalLight.position.set(0, -70, 100).normalize();</span>
-<span class="cstat-no" title="statement not covered" >        this.scene.add(directionalLight);</span>
+				// create two three.js lights to illuminate the model
+				var directionalLight = <span class="cstat-no" title="statement not covered" >new THREE.DirectionalLight(0xffffff);</span>
+<span class="cstat-no" title="statement not covered" >				directionalLight.position.set(0, -70, 100).normalize();</span>
+<span class="cstat-no" title="statement not covered" >				this.scene.add(directionalLight);</span>
 &nbsp;
-        var directionalLight2 = <span class="cstat-no" title="statement not covered" >new THREE.DirectionalLight(0xffffff);</span>
-<span class="cstat-no" title="statement not covered" >        directionalLight2.position.set(0, 70, 100).normalize();</span>
-<span class="cstat-no" title="statement not covered" >        this.scene.add(directionalLight2);</span>
+				var directionalLight2 = <span class="cstat-no" title="statement not covered" >new THREE.DirectionalLight(0xffffff);</span>
+<span class="cstat-no" title="statement not covered" >				directionalLight2.position.set(0, 70, 100).normalize();</span>
+<span class="cstat-no" title="statement not covered" >				this.scene.add(directionalLight2);</span>
 &nbsp;
-        // use the three.js GLTF loader to add the 3D model to the three.js scene
-        var loader = <span class="cstat-no" title="statement not covered" >new GLTFLoader();</span>
-<span class="cstat-no" title="statement not covered" >        loader.load(</span>
-          "assets/3D/godzilla_simple.glb",
-          //"https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf",
-<span class="fstat-no" title="function not covered" >          fu</span>nction (gltf) {
-<span class="cstat-no" title="statement not covered" >            this.scene.add(gltf.scene);</span>
-<span class="cstat-no" title="statement not covered" >            if (typeof props.onDone === "function") {</span>
-<span class="cstat-no" title="statement not covered" >              props.onDone();</span>
-            }
-          }.bind(this)
-        );
-<span class="cstat-no" title="statement not covered" >        this.map = map;</span>
+				// use the three.js GLTF loader to add the 3D model to the three.js scene
+				var loader = <span class="cstat-no" title="statement not covered" >new GLTFLoader();</span>
+<span class="cstat-no" title="statement not covered" >				loader.load(</span>
+					"assets/3D/godzilla_simple.glb",
+					//"https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf",
+<span class="fstat-no" title="function not covered" >					fu</span>nction (gltf) {
+<span class="cstat-no" title="statement not covered" >						this.scene.add(gltf.scene);</span>
+<span class="cstat-no" title="statement not covered" >						if (typeof props.onDone === "function") {</span>
+<span class="cstat-no" title="statement not covered" >							props.onDone();</span>
+						}
+					}.bind(this)
+				);
+<span class="cstat-no" title="statement not covered" >				this.map = map;</span>
 &nbsp;
-        // use the Mapbox GL JS map canvas for three.js
-<span class="cstat-no" title="statement not covered" >        this.renderer = new THREE.WebGLRenderer({</span>
-          canvas: map.getCanvas(),
-          context: gl,
-          antialias: true,
-        });
+				// use the Mapbox GL JS map canvas for three.js
+<span class="cstat-no" title="statement not covered" >				this.renderer = new THREE.WebGLRenderer({</span>
+					canvas: map.getCanvas(),
+					context: gl,
+					antialias: true,
+				});
 &nbsp;
-<span class="cstat-no" title="statement not covered" >        this.renderer.autoClear = false;</span>
-      },
-      render: <span class="fstat-no" title="function not covered" >fu</span>nction (gl, matrix) {
-        var rotationX = <span class="cstat-no" title="statement not covered" >new THREE.Matrix4().makeRotationAxis(</span>
-          new THREE.Vector3(1, 0, 0),
-          modelTransform.rotateX
-        );
-        var rotationY = <span class="cstat-no" title="statement not covered" >new THREE.Matrix4().makeRotationAxis(</span>
-          new THREE.Vector3(0, 1, 0),
-          modelTransform.rotateY
-        );
-        var rotationZ = <span class="cstat-no" title="statement not covered" >new THREE.Matrix4().makeRotationAxis(</span>
-          new THREE.Vector3(0, 0, 1),
-          modelTransform.rotateZ
-        );
+<span class="cstat-no" title="statement not covered" >				this.renderer.autoClear = false;</span>
+			},
+			render: <span class="fstat-no" title="function not covered" >fu</span>nction (gl, matrix) {
+				var rotationX = <span class="cstat-no" title="statement not covered" >new THREE.Matrix4().makeRotationAxis(</span>
+					new THREE.Vector3(1, 0, 0),
+					modelTransform.rotateX
+				);
+				var rotationY = <span class="cstat-no" title="statement not covered" >new THREE.Matrix4().makeRotationAxis(</span>
+					new THREE.Vector3(0, 1, 0),
+					modelTransform.rotateY
+				);
+				var rotationZ = <span class="cstat-no" title="statement not covered" >new THREE.Matrix4().makeRotationAxis(</span>
+					new THREE.Vector3(0, 0, 1),
+					modelTransform.rotateZ
+				);
 &nbsp;
-        var m = <span class="cstat-no" title="statement not covered" >new THREE.Matrix4().fromArray(matrix);</span>
-        var l = <span class="cstat-no" title="statement not covered" >new THREE.Matrix4()</span>
-          .makeTranslation(
-            modelTransform.translateX,
-            modelTransform.translateY,
-            modelTransform.translateZ
-          )
-          .scale(
-            new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale)
-          )
-          .multiply(rotationX)
-          .multiply(rotationY)
-          .multiply(rotationZ);
+				var m = <span class="cstat-no" title="statement not covered" >new THREE.Matrix4().fromArray(matrix);</span>
+				var l = <span class="cstat-no" title="statement not covered" >new THREE.Matrix4()</span>
+					.makeTranslation(
+						modelTransform.translateX,
+						modelTransform.translateY,
+						modelTransform.translateZ
+					)
+					.scale(
+						new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale)
+					)
+					.multiply(rotationX)
+					.multiply(rotationY)
+					.multiply(rotationZ);
 &nbsp;
-<span class="cstat-no" title="statement not covered" >        this.camera.projectionMatrix = m.multiply(l);</span>
-<span class="cstat-no" title="statement not covered" >        this.renderer.resetState();</span>
-<span class="cstat-no" title="statement not covered" >        this.renderer.render(this.scene, this.camera);</span>
-<span class="cstat-no" title="statement not covered" >        this.map.triggerRepaint();</span>
-      },
-    };
+<span class="cstat-no" title="statement not covered" >				this.camera.projectionMatrix = m.multiply(l);</span>
+<span class="cstat-no" title="statement not covered" >				this.renderer.resetState();</span>
+<span class="cstat-no" title="statement not covered" >				this.renderer.render(this.scene, this.camera);</span>
+<span class="cstat-no" title="statement not covered" >				this.map.triggerRepaint();</span>
+			},
+		};
 &nbsp;
-    mapRef.current.addLayer(customLayer);
+		mapRef.current.addLayer(customLayer);
 &nbsp;
-    <span class="missing-if-branch" title="else path not taken" >E</span>if (mapRef.current.getLayer(layerName)) {
-      mapRef.current.setLayoutProperty(layerName, "visibility", "visible");
-    }
-  }, [mapContext.mapIds, mapContext, props]);
+		<span class="missing-if-branch" title="else path not taken" >E</span>if (mapRef.current.getLayer(layerName)) {
+			mapRef.current.setLayoutProperty(layerName, "visibility", "visible");
+		}
+	}, [mapContext.mapIds, mapContext, props]);
 &nbsp;
-  useEffect(() =&gt; {
-    if (!mapRef.current) return;
+	useEffect(() =&gt; {
+		if (!mapRef.current) return;
 &nbsp;
-    <span class="missing-if-branch" title="else path not taken" >E</span>if (mapRef.current.getLayer(layerName)) {
-      // toggle layer visibility by changing the layout object's visibility property
-      if (showLayer) {
-        mapRef.current.setLayoutProperty(layerName, "visibility", "visible");
-      } else <span class="missing-if-branch" title="else path not taken" >E</span>{
-<span class="cstat-no" title="statement not covered" >        mapRef.current.setLayoutProperty(layerName, "visibility", "none");</span>
-      }
-    }
-    //
-  }, [showLayer, mapContext]);
+		<span class="missing-if-branch" title="else path not taken" >E</span>if (mapRef.current.getLayer(layerName)) {
+			// toggle layer visibility by changing the layout object's visibility property
+			if (showLayer) {
+				mapRef.current.setLayoutProperty(layerName, "visibility", "visible");
+			} else <span class="missing-if-branch" title="else path not taken" >E</span>{
+<span class="cstat-no" title="statement not covered" >				mapRef.current.setLayoutProperty(layerName, "visibility", "none");</span>
+			}
+		}
+		//
+	}, [showLayer, mapContext]);
 &nbsp;
-  return (
-    &lt;&gt;
-      &lt;Button
-        color="primary"
-        variant={showLayer ? "contained" : <span class="branch-1 cbranch-no" title="branch not covered" >"outlined"}</span>
-        onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >          setShowLayer(!showLayer);</span>
-<span class="cstat-no" title="statement not covered" >          showLayerRef.current = !showLayer;</span>
-        }}
-      &gt;
-        3D
-      &lt;/Button&gt;
-    &lt;/&gt;
-  );
+	return (
+		&lt;&gt;
+			&lt;Button
+				color="primary"
+				variant={showLayer ? "contained" : <span class="branch-1 cbranch-no" title="branch not covered" >"outlined"}</span>
+				onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >					setShowLayer(!showLayer);</span>
+<span class="cstat-no" title="statement not covered" >					showLayerRef.current = !showLayer;</span>
+				}}
+			&gt;
+				3D
+			&lt;/Button&gt;
+		&lt;/&gt;
+	);
 };
 &nbsp;
 MlThreeJsLayer.propTypes = {
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId: PropTypes.string,
-  /**
-   * function that gets called when initialized
-   */
-  init: PropTypes.func,
-  /**
-   * function that gets called when models are loaded
-   */
-  onDone: PropTypes.func,
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId: PropTypes.string,
+	/**
+	 * function that gets called when initialized
+	 */
+	init: PropTypes.func,
+	/**
+	 * function that gets called when models are loaded
+	 */
+	onDone: PropTypes.func,
 };
 &nbsp;
 export default MlThreeJsLayer;</pre></td></tr></table></pre>
@@ -688,7 +688,7 @@ export default MlThreeJsLayer;</pre></td></tr></table></pre>
             <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/MlThreeJsLayer/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>