@mapcomponents/react-maplibre 0.1.56 → 0.1.58

package/src/components/MlNavigationCompass/MlNavigationCompass.stories.js

@@ -5,9 +5,9 @@ import MlNavigationCompass from "./MlNavigationCompass";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
 
 const storyoptions = {
-  title: "MapComponents/MlNavigationCompass",
-  component: MlNavigationCompass,
-  decorators: mapContextDecorator,
+	title: "MapComponents/MlNavigationCompass",
+	component: MlNavigationCompass,
+	decorators: mapContextDecorator,
 };
 export default storyoptions;
 
@@ -15,49 +15,49 @@ const Template = (props) => <MlNavigationCompass {...props} />;
 
 export const Standard = Template.bind({});
 Standard.args = {
-  style: {
-    transform: "scale(4)",
-    left: "50%",
-    marginLeft: "-100px",
-    top: "50%",
-    marginTop: "-100px",
-  },
+	style: {
+		transform: "scale(4)",
+		left: "50%",
+		marginLeft: "-100px",
+		top: "50%",
+		marginTop: "-100px",
+	},
 };
 export const StyleExample = Template.bind({});
 StyleExample.args = {
-  style: {
-    transform: "scale(4)",
-    left: "50%",
-    marginLeft: "-100px",
-    top: "50%",
-    marginTop: "-100px",
-  },
-  backgroundStyle: {
-    border: "12px solid #adad44",
-    background: "radial-gradient(#417741, #111)",
-  },
-  needleStyle: {
-    ":hover svg path:nth-of-type(1)": {
-      fill: "#eded66",
-    },
-    ":hover svg path:nth-of-type(2)": {
-      fill: "#252f1b",
-    },
-    "svg path:nth-of-type(1)": {
-      fill: "#adad44",
-    },
-    "svg path:nth-of-type(2)": {
-      fill: "#1a1d15",
-    },
-  },
-  rotateRightStyle: {
-    "svg:hover path": {
-      fill: "#ededb1",
-    },
-  },
-  rotateLeftStyle: {
-    "svg:hover path": {
-      fill: "#ededb1",
-    },
-  },
+	style: {
+		transform: "scale(4)",
+		left: "50%",
+		marginLeft: "-100px",
+		top: "50%",
+		marginTop: "-100px",
+	},
+	backgroundStyle: {
+		border: "12px solid #adad44",
+		background: "radial-gradient(#417741, #111)",
+	},
+	needleStyle: {
+		":hover svg path:nth-of-type(1)": {
+			fill: "#eded66",
+		},
+		":hover svg path:nth-of-type(2)": {
+			fill: "#252f1b",
+		},
+		"svg path:nth-of-type(1)": {
+			fill: "#adad44",
+		},
+		"svg path:nth-of-type(2)": {
+			fill: "#1a1d15",
+		},
+	},
+	rotateRightStyle: {
+		"svg:hover path": {
+			fill: "#ededb1",
+		},
+	},
+	rotateLeftStyle: {
+		"svg:hover path": {
+			fill: "#ededb1",
+		},
+	},
 };

package/src/components/MlNavigationCompass/MlNavigationCompass.test.js

@@ -8,61 +8,61 @@ import maplibregl from "maplibre-gl/dist/maplibre-gl";
 import { mockMapLibreMethods } from "../../setupTests";
 
 jest.mock("@mapbox/mapbox-gl-draw", () => {
-  return function () {
-    return {
-      set: jest.fn(),
-    };
-  };
+	return function () {
+		return {
+			set: jest.fn(),
+		};
+	};
 });
 const mapLibreInstance = new maplibregl.Map();
 
 const MlNavigationCompassTestComponent = (props) => {
-  const [componentVisible, setComponentVisible] = useState(true);
+	const [componentVisible, setComponentVisible] = useState(true);
 
-  return (
-    <>
-      <MapLibreMap />
+	return (
+		<>
+			<MapLibreMap />
 
-      {componentVisible && <MlNavigationCompass {...props} />}
+			{componentVisible && <MlNavigationCompass {...props} />}
 
-      <button
-        className="toggle_layer_visible"
-        onClick={() => {
-          setComponentVisible(!componentVisible);
-        }}
-      >
-        toggle component
-      </button>
-    </>
-  );
+			<button
+				className="toggle_layer_visible"
+				onClick={() => {
+					setComponentVisible(!componentVisible);
+				}}
+			>
+				toggle component
+			</button>
+		</>
+	);
 };
 
 let testAttributes = {};
 
 describe("<MlNavigationCompass>", () => {
-  it("should register 1 event listener to the maplibre instance", async () => {
-    const wrapper = mount(
-      <MapComponentsProvider>
-        <MlNavigationCompassTestComponent {...testAttributes} />
-      </MapComponentsProvider>
-    );
+	it("should register 1 event listener to the maplibre instance", async () => {
+		const wrapper = mount(
+			<MapComponentsProvider>
+				<MlNavigationCompassTestComponent {...testAttributes} />
+			</MapComponentsProvider>
+		);
 
-    // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(5));
-  });
+		// MapLibreGlWrapper now subscribes to "data", "move" events on its own
+		await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(5));
+	});
 
-  it("should deregister 1 event listener to the maplibre instance", async () => {
-    const wrapper = mount(
-      <MapComponentsProvider>
-        <MlNavigationCompassTestComponent {...testAttributes} />
-      </MapComponentsProvider>
-    );
+	it("should deregister 1 event listener to the maplibre instance", async () => {
+		const wrapper = mount(
+			<MapComponentsProvider>
+				<MlNavigationCompassTestComponent {...testAttributes} />
+			</MapComponentsProvider>
+		);
 
-    // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(5);
+		// MapLibreGlWrapper now subscribes to "data", "move" events on its own
+		expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(5);
 
-    wrapper.find(".toggle_layer_visible").simulate("click");
+		wrapper.find(".toggle_layer_visible").simulate("click");
 
-    expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2);
-  });
+		expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2);
+	});
 });

package/src/components/MlNavigationCompass/MlNavigationCompass.tsx

@@ -10,82 +10,82 @@ import { css } from "@emotion/css";
 import useMap from "../../hooks/useMap";
 
 const NeedleButton = styled.div`
-  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;
-  }
+	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;
+	}
 `;
 const NeedleContainer = styled.div`
-  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;
-  }
+	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;
+	}
 `;
 const RotateButton = styled.div`
-  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;
-  }
+	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;
+	}
 `;
 
 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.
@@ -95,132 +95,132 @@ interface MlNavigationCompassProps {
  * @component
  */
 const MlNavigationCompass = (props: MlNavigationCompassProps) => {
-  const mapHook = useMap({
-    mapId: props.mapId,
-    waitForLayer: props.insertBeforeLayer,
-  });
-  const [bearing, setBearing] = useState(0);
-
-  useEffect(() => {
-    if (!mapHook.map) return;
-
-    let _updateBearing = () => {
-      if (!mapHook.map?.map?.getBearing) return;
-      setBearing(Math.round(mapHook.map.map.getBearing()));
-    };
-
-    mapHook.map.on("rotate", _updateBearing, mapHook.componentId);
-    _updateBearing();
-
-    return () => {
-      mapHook.map?.map.off("rotate", _updateBearing);
-    };
-  }, [mapHook.map, props.mapId]);
-
-  return (
-    <>
-      <div
-        className={css({
-          zIndex: 1000,
-          top: 0,
-          position: "absolute",
-          ...props.style,
-        })}
-      >
-        <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,
-          })}
-        >
-          <RotateButton className={css({ ...props.rotateRightStyle })}>
-            <RotateRightIcon
-              onClick={() => {
-                if(!mapHook.map)return;
-
-                let bearing = Math.round(mapHook.map.map.getBearing());
-                let rest = Math.round(bearing % 90);
-                if (bearing > 0) {
-                  rest = 90 - rest;
-                }
-                if (rest === 0) {
-                  rest = 90;
-                }
-                mapHook.map.map.setBearing(Math.round(bearing + Math.abs(rest)));
-              }}
-            ></RotateRightIcon>
-          </RotateButton>
-          <NeedleButton
-            className={css({ ...props.needleStyle })}
-            onClick={() => {
-              mapHook.map?.map.setBearing(0);
-            }}
-          >
-            <NeedleContainer
-              style={{
-                transform: "rotate(" + (bearing>0?"-"+bearing:-1*bearing) + "deg)",
-              }}
-            >
-              <NeedleIcon />
-            </NeedleContainer>
-          </NeedleButton>
-          <RotateButton className={css({ ...props.rotateLeftStyle })}>
-            <RotateLeftIcon
-              onClick={() => {
-                if(!mapHook.map)return;
-
-                let bearing = Math.round(mapHook.map.map.getBearing());
-                let rest = Math.round(bearing % 90);
-                if (bearing < 0) {
-                  rest = 90 + rest;
-                }
-                if (rest === 0) {
-                  rest = 90;
-                }
-                mapHook.map.map.setBearing(Math.round(bearing - Math.abs(rest)));
-              }}
-            ></RotateLeftIcon>
-          </RotateButton>
-        </div>
-      </div>
-    </>
-  );
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
+	const [bearing, setBearing] = useState(0);
+
+	useEffect(() => {
+		if (!mapHook.map) return;
+
+		let _updateBearing = () => {
+			if (!mapHook.map?.map?.getBearing) return;
+			setBearing(Math.round(mapHook.map.map.getBearing()));
+		};
+
+		mapHook.map.on("rotate", _updateBearing, mapHook.componentId);
+		_updateBearing();
+
+		return () => {
+			mapHook.map?.map.off("rotate", _updateBearing);
+		};
+	}, [mapHook.map, props.mapId]);
+
+	return (
+		<>
+			<div
+				className={css({
+					zIndex: 1000,
+					top: 0,
+					position: "absolute",
+					...props.style,
+				})}
+			>
+				<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,
+					})}
+				>
+					<RotateButton className={css({ ...props.rotateRightStyle })}>
+						<RotateRightIcon
+							onClick={() => {
+								if(!mapHook.map)return;
+
+								let bearing = Math.round(mapHook.map.map.getBearing());
+								let rest = Math.round(bearing % 90);
+								if (bearing > 0) {
+									rest = 90 - rest;
+								}
+								if (rest === 0) {
+									rest = 90;
+								}
+								mapHook.map.map.setBearing(Math.round(bearing + Math.abs(rest)));
+							}}
+						></RotateRightIcon>
+					</RotateButton>
+					<NeedleButton
+						className={css({ ...props.needleStyle })}
+						onClick={() => {
+							mapHook.map?.map.setBearing(0);
+						}}
+					>
+						<NeedleContainer
+							style={{
+								transform: "rotate(" + (bearing>0?"-"+bearing:-1*bearing) + "deg)",
+							}}
+						>
+							<NeedleIcon />
+						</NeedleContainer>
+					</NeedleButton>
+					<RotateButton className={css({ ...props.rotateLeftStyle })}>
+						<RotateLeftIcon
+							onClick={() => {
+								if(!mapHook.map)return;
+
+								let bearing = Math.round(mapHook.map.map.getBearing());
+								let rest = Math.round(bearing % 90);
+								if (bearing < 0) {
+									rest = 90 + rest;
+								}
+								if (rest === 0) {
+									rest = 90;
+								}
+								mapHook.map.map.setBearing(Math.round(bearing - Math.abs(rest)));
+							}}
+						></RotateLeftIcon>
+					</RotateButton>
+				</div>
+			</div>
+		</>
+	);
 };
 
 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,
 };
 
 export default MlNavigationCompass;