@mapcomponents/react-maplibre 0.1.56 → 0.1.58

package/src/components/MlLayerMagnify/MlLayerMagnify.tsx

@@ -1,29 +1,29 @@
 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";
 
 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;
 }
 
 /**
@@ -32,191 +32,191 @@ interface MlLayerMagnifyProps {
  * the map and can be dragged around on top of the MapLibreMap referenced by props.map1Id
  */
 const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
-  const mapContext:MapContextType = useContext(MapContext);
-  const syncMoveInitializedRef = useRef(false);
-  const syncCleanupFunctionRef = useRef(() => {});
-
-  const [swipeX, setSwipeX] = useState('50');
-  const swipeXRef = useRef('50');
-  const [swipeY, setSwipeY] = useState('50');
-  const swipeYRef = useRef('50');
-
-  const magnifierRadius = useMemo(() => {
-    return props.magnifierRadius || 200;
-  },[props.magnifierRadius]);
-
-  const mapExists = useCallback(() => {
-    if (!props.map1Id || !props.map2Id) {
-      return false;
-    }
-    if (!mapContext.getMap(props.map1Id) || !mapContext.getMap(props.map2Id)) {
-      return false;
-    }
-
-    return true;
-  }, [props, mapContext]);
-
-  const onResize = useRef(() => {
-    if (!mapExists()) return;
-
-    onMove({
-      clientX: swipeXRef.current,
-      clientY: swipeYRef.current,
-    });
-  });
-
-  useEffect(() => {
-    window.addEventListener("resize", onResize.current);
-    let _onResize = onResize.current;
-
-    return () => {
-      window.removeEventListener("resize", _onResize);
-      syncCleanupFunctionRef.current();
-    };
-  }, []);
-
-  const onMove = useCallback(
-    (e) => {
-      if (!mapExists()) return;
-
-      let bounds = mapContext.maps[props.map1Id]
-        .getCanvas()
-        .getBoundingClientRect();
-      let clientX =
-        e.clientX ||
-        (typeof e.touches !== "undefined" && typeof e.touches[0] !== "undefined"
-          ? e.touches[0].clientX
-          : 0);
-      let clientY =
-        e.clientY ||
-        (typeof e.touches !== "undefined" && typeof e.touches[0] !== "undefined"
-          ? e.touches[0].clientY
-          : 0);
-
-      clientX -= bounds.x;
-      clientY -= bounds.y;
-      let swipeX_tmp = ((clientX / bounds.width) * 100).toFixed(2);
-      let swipeY_tmp = ((clientY / bounds.height) * 100).toFixed(2);
-
-      if (
-        swipeXRef.current !== swipeX_tmp ||
-        swipeYRef.current !== swipeY_tmp
-      ) {
-        setSwipeX(swipeX_tmp);
-        swipeXRef.current = swipeX_tmp;
-        setSwipeY(swipeY_tmp);
-        swipeYRef.current = swipeY_tmp;
-
-        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]
-  );
-
-  useEffect(() => {
-    if (!mapExists() || syncMoveInitializedRef.current) return;
-
-    syncMoveInitializedRef.current = true;
-    syncCleanupFunctionRef.current = syncMove(
-      mapContext.getMap(props.map1Id).map,
-      mapContext.getMap(props.map2Id).map
-    );
-
-    /*
-    automatically adjust radius for small screens
-    if (
-      mapContext.maps[props.map1Id].getCanvas().clientWidth >
-        mapContext.maps[props.map1Id].getCanvas().clientHeight &&
-      magnifierRadius * 2 >
-        mapContext.maps[props.map1Id].getCanvas().clientHeight
-    ) {
-      magnifierRadius = Math.floor(
-        mapContext.maps[props.map1Id].getCanvas().clientHeight / 2
-      );
-      setMagnifierRadius(magnifierRadius);
-    }
-
-    if (
-      mapContext.maps[props.map1Id].getCanvas().clientHeight >
-        mapContext.maps[props.map1Id].getCanvas().clientWidth &&
-      magnifierRadius * 2 >
-        mapContext.maps[props.map1Id].getCanvas().clientWidth
-    ) {
-      magnifierRadius = Math.floor(
-        mapContext.maps[props.map1Id].getCanvas().clientWidth / 2
-      );
-      setMagnifierRadius(magnifierRadius);
-    }
-    */
-
-    onMove({
-      clientX: mapContext.maps[props.map1Id].getCanvas().clientWidth / 2,
-      clientY: mapContext.maps[props.map1Id].getCanvas().clientHeight / 2,
-    });
-  }, [mapContext.mapIds, mapContext, mapExists, props, onMove]);
-
-  const onDown = (e:any) => {
-    if (e.touches) {
-      document.addEventListener("touchmove", onMove);
-      document.addEventListener("touchend", onTouchEnd);
-    } else {
-      document.addEventListener("mousemove", onMove);
-      document.addEventListener("mouseup", onMouseUp);
-    }
-  };
-
-  const onTouchEnd = () => {
-    document.removeEventListener("touchmove", onMove);
-    document.removeEventListener("touchend", onTouchEnd);
-  };
-
-  const onMouseUp = () => {
-    document.removeEventListener("mousemove", onMove);
-    document.removeEventListener("mouseup", onMouseUp);
-  };
-
-  const onWheel = (e:any) => {
-    let evCopy = new WheelEvent(e.type, e);
-    mapContext.map.getCanvas().dispatchEvent(evCopy);
-  };
-
-  return (
-    <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}
-    ></div>
-  );
+	const mapContext:MapContextType = useContext(MapContext);
+	const syncMoveInitializedRef = useRef(false);
+	const syncCleanupFunctionRef = useRef(() => {});
+
+	const [swipeX, setSwipeX] = useState('50');
+	const swipeXRef = useRef('50');
+	const [swipeY, setSwipeY] = useState('50');
+	const swipeYRef = useRef('50');
+
+	const magnifierRadius = useMemo(() => {
+		return props.magnifierRadius || 200;
+	},[props.magnifierRadius]);
+
+	const mapExists = useCallback(() => {
+		if (!props.map1Id || !props.map2Id) {
+			return false;
+		}
+		if (!mapContext.getMap(props.map1Id) || !mapContext.getMap(props.map2Id)) {
+			return false;
+		}
+
+		return true;
+	}, [props, mapContext]);
+
+	const onResize = useRef(() => {
+		if (!mapExists()) return;
+
+		onMove({
+			clientX: swipeXRef.current,
+			clientY: swipeYRef.current,
+		});
+	});
+
+	useEffect(() => {
+		window.addEventListener("resize", onResize.current);
+		let _onResize = onResize.current;
+
+		return () => {
+			window.removeEventListener("resize", _onResize);
+			syncCleanupFunctionRef.current();
+		};
+	}, []);
+
+	const onMove = useCallback(
+		(e) => {
+			if (!mapExists()) return;
+
+			let bounds = mapContext.maps[props.map1Id]
+				.getCanvas()
+				.getBoundingClientRect();
+			let clientX =
+				e.clientX ||
+				(typeof e.touches !== "undefined" && typeof e.touches[0] !== "undefined"
+					? e.touches[0].clientX
+					: 0);
+			let clientY =
+				e.clientY ||
+				(typeof e.touches !== "undefined" && typeof e.touches[0] !== "undefined"
+					? e.touches[0].clientY
+					: 0);
+
+			clientX -= bounds.x;
+			clientY -= bounds.y;
+			let swipeX_tmp = ((clientX / bounds.width) * 100).toFixed(2);
+			let swipeY_tmp = ((clientY / bounds.height) * 100).toFixed(2);
+
+			if (
+				swipeXRef.current !== swipeX_tmp ||
+				swipeYRef.current !== swipeY_tmp
+			) {
+				setSwipeX(swipeX_tmp);
+				swipeXRef.current = swipeX_tmp;
+				setSwipeY(swipeY_tmp);
+				swipeYRef.current = swipeY_tmp;
+
+				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]
+	);
+
+	useEffect(() => {
+		if (!mapExists() || syncMoveInitializedRef.current) return;
+
+		syncMoveInitializedRef.current = true;
+		syncCleanupFunctionRef.current = syncMove(
+			mapContext.getMap(props.map1Id).map,
+			mapContext.getMap(props.map2Id).map
+		);
+
+		/*
+		automatically adjust radius for small screens
+		if (
+			mapContext.maps[props.map1Id].getCanvas().clientWidth >
+				mapContext.maps[props.map1Id].getCanvas().clientHeight &&
+			magnifierRadius * 2 >
+				mapContext.maps[props.map1Id].getCanvas().clientHeight
+		) {
+			magnifierRadius = Math.floor(
+				mapContext.maps[props.map1Id].getCanvas().clientHeight / 2
+			);
+			setMagnifierRadius(magnifierRadius);
+		}
+
+		if (
+			mapContext.maps[props.map1Id].getCanvas().clientHeight >
+				mapContext.maps[props.map1Id].getCanvas().clientWidth &&
+			magnifierRadius * 2 >
+				mapContext.maps[props.map1Id].getCanvas().clientWidth
+		) {
+			magnifierRadius = Math.floor(
+				mapContext.maps[props.map1Id].getCanvas().clientWidth / 2
+			);
+			setMagnifierRadius(magnifierRadius);
+		}
+		*/
+
+		onMove({
+			clientX: mapContext.maps[props.map1Id].getCanvas().clientWidth / 2,
+			clientY: mapContext.maps[props.map1Id].getCanvas().clientHeight / 2,
+		});
+	}, [mapContext.mapIds, mapContext, mapExists, props, onMove]);
+
+	const onDown = (e:any) => {
+		if (e.touches) {
+			document.addEventListener("touchmove", onMove);
+			document.addEventListener("touchend", onTouchEnd);
+		} else {
+			document.addEventListener("mousemove", onMove);
+			document.addEventListener("mouseup", onMouseUp);
+		}
+	};
+
+	const onTouchEnd = () => {
+		document.removeEventListener("touchmove", onMove);
+		document.removeEventListener("touchend", onTouchEnd);
+	};
+
+	const onMouseUp = () => {
+		document.removeEventListener("mousemove", onMove);
+		document.removeEventListener("mouseup", onMouseUp);
+	};
+
+	const onWheel = (e:any) => {
+		let evCopy = new WheelEvent(e.type, e);
+		mapContext.map.getCanvas().dispatchEvent(evCopy);
+	};
+
+	return (
+		<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}
+		></div>
+	);
 };
 
 MlLayerMagnify.defaultProps = {
-  magnifierRadius: 200,
+	magnifierRadius: 200,
 };
 
 export default MlLayerMagnify;

package/src/components/MlLayerSwipe/MlLayerSwipe.stories.js

@@ -6,30 +6,30 @@ import MlWmsLayer from "../MlWmsLayer/MlWmsLayer";
 import multiMapContextDecorator from "../../decorators/MultiMapContextDecorator";
 
 const storyoptions = {
-  title: "MapComponents/MlLayerSwipe",
-  name: "MlLayerSwipe",
-  component: MlLayerSwipe,
-  argTypes: {
-  },
-  decorators: multiMapContextDecorator,
+	title: "MapComponents/MlLayerSwipe",
+	name: "MlLayerSwipe",
+	component: MlLayerSwipe,
+	argTypes: {
+	},
+	decorators: multiMapContextDecorator,
 };
 export default storyoptions;
 
 const Template = (args) => (
-  <>
-    <MlWmsLayer
-      url="https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme"
-      urlParameters={{
-        layers: "nw_uraufnahme_rw",
-      }}
-      sourceOptions={{
-        minzoom: 13,
-        maxzoom: 20,
-      }}
-      mapId="map_2"
-    />
-    <MlLayerSwipe map1Id="map_1" map2Id="map_2" />
-  </>
+	<>
+		<MlWmsLayer
+			url="https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme"
+			urlParameters={{
+				layers: "nw_uraufnahme_rw",
+			}}
+			sourceOptions={{
+				minzoom: 13,
+				maxzoom: 20,
+			}}
+			mapId="map_2"
+		/>
+		<MlLayerSwipe map1Id="map_1" map2Id="map_2" />
+	</>
 );
 
 export const ExampleConfig = Template.bind({});

package/src/components/MlLayerSwipe/MlLayerSwipe.test.js

@@ -7,80 +7,80 @@ import MapLibreMap from "./../MapLibreMap/MapLibreMap";
 import syncMove from "@mapbox/mapbox-gl-sync-move";
 // Mapbox sync-move mockup
 var mockSyncMoveMethods = {
-  cleanup: jest.fn(),
+	cleanup: jest.fn(),
 };
 
 jest.mock("@mapbox/mapbox-gl-sync-move", () => {
-  const originalModule = jest.requireActual("@mapbox/mapbox-gl-sync-move");
-  return {
-    __esModule: true,
-    ...originalModule,
-    default: () => mockSyncMoveMethods.cleanup,
-  };
+	const originalModule = jest.requireActual("@mapbox/mapbox-gl-sync-move");
+	return {
+		__esModule: true,
+		...originalModule,
+		default: () => mockSyncMoveMethods.cleanup,
+	};
 });
 
 const syncMoveObj = {
-  syncMove: syncMove,
+	syncMove: syncMove,
 };
 
 const TestComponent = (props) => {
-  const [layerVisible, setLayerVisible] = useState(true);
-  const [refreshTrigger, setRefreshTrigger] = useState(0);
-  const mapContext = useContext(MapContext);
+	const [layerVisible, setLayerVisible] = useState(true);
+	const [refreshTrigger, setRefreshTrigger] = useState(0);
+	const mapContext = useContext(MapContext);
 
-  return (
-    <>
-      <MapLibreMap mapId="map_1" />
-      <MapLibreMap mapId="map_2" />
+	return (
+		<>
+			<MapLibreMap mapId="map_1" />
+			<MapLibreMap mapId="map_2" />
 
-      {layerVisible && <MlLayerSwipe map1Id="map_1" map2Id="map_2" />}
+			{layerVisible && <MlLayerSwipe map1Id="map_1" map2Id="map_2" />}
 
-      <button
-        className="toggle_layer_visible"
-        onClick={() => {
-          setLayerVisible(!layerVisible);
-        }}
-      >
-        toggle layer visible
-      </button>
-      <button
-        className="trigger_refresh"
-        onClick={() => {
-          setRefreshTrigger(refreshTrigger + 1);
-        }}
-      >
-        refresh
-      </button>
-      <div className="layers_json">
-        {mapContext.map && refreshTrigger && JSON.stringify(mapContext.map.layers)}
-      </div>
-    </>
-  );
+			<button
+				className="toggle_layer_visible"
+				onClick={() => {
+					setLayerVisible(!layerVisible);
+				}}
+			>
+				toggle layer visible
+			</button>
+			<button
+				className="trigger_refresh"
+				onClick={() => {
+					setRefreshTrigger(refreshTrigger + 1);
+				}}
+			>
+				refresh
+			</button>
+			<div className="layers_json">
+				{mapContext.map && refreshTrigger && JSON.stringify(mapContext.map.layers)}
+			</div>
+		</>
+	);
 };
 
 const createWrapper = () =>
-  mount(
-    <MapComponentsProvider>
-      <TestComponent />
-    </MapComponentsProvider>
-  );
+	mount(
+		<MapComponentsProvider>
+			<TestComponent />
+		</MapComponentsProvider>
+	);
 
 describe("<MlLayerSwipe/>", () => {
-  //it("should add a MlLayerSwipe Component to that calls syncMaps with both available MapLibre instances once", async () => {
-  //  const spy = jest.spyOn(syncMoveObj, "syncMove");
-  //  const wrapper = createWrapper(TestComponent);
+	//it("should add a MlLayerSwipe Component to that calls syncMaps with both available MapLibre instances once", async () => {
+	//	const spy = jest.spyOn(syncMoveObj, "syncMove");
+	//	const wrapper = createWrapper(TestComponent);
 
-  //  expect(spy).toHaveBeenCalledTimes(1);
-  //});
+	//	expect(spy).toHaveBeenCalledTimes(1);
+	//});
 
-  it("should call the syncMaps cleanup function once when it is removed from reactDOM", async () => {
-    const wrapper = createWrapper(TestComponent);
+	it("should call the syncMaps cleanup function once when it is removed from reactDOM", async () => {
+		const wrapper = createWrapper(TestComponent);
 
-    //expect(syncMove).toHaveBeenCalledTimes(1);
+		//expect(syncMove).toHaveBeenCalledTimes(1);
 
-    wrapper.find(".toggle_layer_visible").simulate("click");
+		wrapper.find(".toggle_layer_visible").simulate("click");
 
-    //TODO: Fix cleanup test
-    expect(mockSyncMoveMethods.cleanup).toHaveBeenCalledTimes(1);
-  });
+		//TODO: Fix cleanup test
+		expect(mockSyncMoveMethods.cleanup).toHaveBeenCalledTimes(1);
+	});
 });