@mapcomponents/react-maplibre 0.1.56 → 0.1.58

package/src/components/MlCreatePdfForm/lib/pdf.templates.ts

@@ -0,0 +1,82 @@
+interface PdfTemplateType{
+	width: number;
+	height: number;
+};
+interface PdfTemplateObject{
+	[key:string]:({[key:string]:PdfTemplateType});
+};
+
+const PdfTemplates:PdfTemplateObject = {
+	A4: {
+		'300dpi': {
+			width: 2480,
+			height: 3508,
+		},
+		'150dpi': {
+			width: 1240,
+			height: 1754,
+		},
+		'72dpi': {
+			width: 595,
+			height: 842,
+		},
+	},
+	A3: {
+		'300dpi': {
+			width: 3505,
+			height: 4961,
+		},
+		'150dpi': {
+			width: 1754,
+			height: 2480,
+		},
+		'72dpi': {
+			width: 842,
+			height: 1191,
+		},
+	},
+	A2: {
+		'300dpi': {
+			width: 4961,
+			height: 7016,
+		},
+		'150dpi': {
+			width: 2480,
+			height: 3508,
+		},
+		'72dpi': {
+			width: 1191,
+			height: 1684,
+		},
+	},
+	A1: {
+		'300dpi': {
+			width: 7016,
+			height: 9933,
+		},
+		'150dpi': {
+			width: 3508,
+			height: 4967,
+		},
+		'72dpi': {
+			width: 1684,
+			height: 2384,
+		},
+	},
+	A0: {
+		'300dpi': {
+			width: 9933,
+			height: 14043,
+		},
+		'150dpi': {
+			width: 4967,
+			height: 7022,
+		},
+		'72dpi': {
+			width: 2384,
+			height: 3370,
+		},
+	},
+};
+
+export default PdfTemplates;

package/src/components/MlFeatureEditor/MlFeatureEditor.stories.js

@@ -5,87 +5,87 @@ import MlFeatureEditor from "./MlFeatureEditor";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
 
 const storyoptions = {
-  title: "MapComponents/MlFeatureEditor",
-  component: MlFeatureEditor,
-  argTypes: {},
-  decorators: mapContextDecorator,
+	title: "MapComponents/MlFeatureEditor",
+	component: MlFeatureEditor,
+	argTypes: {},
+	decorators: mapContextDecorator,
 };
 export default storyoptions;
 
 const Template = (args) => {
-  return (
-    <MlFeatureEditor
-      {...args}
-      onChange={(features) => {
-        console.log(features);
-      }}
-    />
-  );
+	return (
+		<MlFeatureEditor
+			{...args}
+			onChange={(features) => {
+				console.log(features);
+			}}
+		/>
+	);
 };
 
 export const EditPolygon = Template.bind({});
 EditPolygon.args = {
-  mode: "custom_select",
-  geojson: {
-    type: "Feature",
-    properties: {},
-    geometry: {
-      coordinates: [
-        [
-          [7.0904979943736635, 50.73948334574527],
-          [7.087554458473562, 50.73827346433987],
-          [7.093562913197076, 50.73723639825727],
-          [7.096294028980594, 50.7387727842636],
-          [7.0904979943736635, 50.73948334574527],
-        ],
-      ],
-      type: "Polygon",
-    },
-  },
+	mode: "custom_select",
+	geojson: {
+		type: "Feature",
+		properties: {},
+		geometry: {
+			coordinates: [
+				[
+					[7.0904979943736635, 50.73948334574527],
+					[7.087554458473562, 50.73827346433987],
+					[7.093562913197076, 50.73723639825727],
+					[7.096294028980594, 50.7387727842636],
+					[7.0904979943736635, 50.73948334574527],
+				],
+			],
+			type: "Polygon",
+		},
+	},
 };
 
 export const EditPoint = Template.bind({});
 EditPoint.args = {
-  mode: "custom_select",
-  geojson: {
-    type: "Feature",
-    properties: {},
-    geometry: {
-      type: "Point",
-      coordinates: [7.0904979943736635, 50.73948334574527],
-    },
-  },
+	mode: "custom_select",
+	geojson: {
+		type: "Feature",
+		properties: {},
+		geometry: {
+			type: "Point",
+			coordinates: [7.0904979943736635, 50.73948334574527],
+		},
+	},
 };
 
 export const EditLineString = Template.bind({});
 EditLineString.args = {
-  mode: "simple_select",
-  geojson: {
-    type: "Feature",
-    properties: {},
-    geometry: {
-      coordinates: [
-        [7.0904979943736635, 50.73948334574527],
-        [7.087554458473562, 50.73827346433987],
-        [7.093562913197076, 50.73723639825727],
-        [7.096294028980594, 50.7387727842636],
-      ],
-      type: "LineString",
-    },
-  },
+	mode: "simple_select",
+	geojson: {
+		type: "Feature",
+		properties: {},
+		geometry: {
+			coordinates: [
+				[7.0904979943736635, 50.73948334574527],
+				[7.087554458473562, 50.73827346433987],
+				[7.093562913197076, 50.73723639825727],
+				[7.096294028980594, 50.7387727842636],
+			],
+			type: "LineString",
+		},
+	},
 };
 
 export const DrawPolygon = Template.bind({});
 DrawPolygon.args = {
-  mode: "custom_polygon",
+	mode: "custom_polygon",
 };
 
 export const DrawPoint = Template.bind({});
 DrawPoint.args = {
-  mode: "draw_point",
+	mode: "draw_point",
 };
 
 export const DrawLineString = Template.bind({});
 DrawLineString.args = {
-  mode: "draw_line_string",
+	mode: "draw_line_string",
 };

package/src/components/MlFeatureEditor/MlFeatureEditor.test.js

@@ -8,119 +8,119 @@ 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 MlFeatureEditorTestComponent = (props) => {
-  const [layerVisible, setLayerVisible] = useState(true);
-  const [refreshTrigger, setRefreshTrigger] = useState(0);
-  const mapContext = useContext(MapContext);
-
-  return (
-    <>
-      <MapLibreMap />
-
-      {layerVisible && <MlFeatureEditor {...props} />}
-
-      <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>
-      <div className="sources_json">
-        {mapContext.map && refreshTrigger && JSON.stringify(mapContext.map.sources)}
-      </div>
-    </>
-  );
+	const [layerVisible, setLayerVisible] = useState(true);
+	const [refreshTrigger, setRefreshTrigger] = useState(0);
+	const mapContext = useContext(MapContext);
+
+	return (
+		<>
+			<MapLibreMap />
+
+			{layerVisible && <MlFeatureEditor {...props} />}
+
+			<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>
+			<div className="sources_json">
+				{mapContext.map && refreshTrigger && JSON.stringify(mapContext.map.sources)}
+			</div>
+		</>
+	);
 };
 
 let testAttributes = {
-  mode: "custom_select",
-  geojson: {
-    type: "Feature",
-    properties: {},
-    geometry: {
-      coordinates: [
-        [
-          [7.0904979943736635, 50.73948334574527],
-          [7.087554458473562, 50.73827346433987],
-          [7.093562913197076, 50.73723639825727],
-          [7.096294028980594, 50.7387727842636],
-          [7.0904979943736635, 50.73948334574527],
-        ],
-      ],
-      type: "Polygon",
-    },
-  },
+	mode: "custom_select",
+	geojson: {
+		type: "Feature",
+		properties: {},
+		geometry: {
+			coordinates: [
+				[
+					[7.0904979943736635, 50.73948334574527],
+					[7.087554458473562, 50.73827346433987],
+					[7.093562913197076, 50.73723639825727],
+					[7.096294028980594, 50.7387727842636],
+					[7.0904979943736635, 50.73948334574527],
+				],
+			],
+			type: "Polygon",
+		},
+	},
 };
 
 describe("<MlFeatureEditor>", () => {
-  it("should register 2 event listeners to the maplibre instance", async () => {
-    const wrapper = mount(
-      <MapComponentsProvider>
-        <MlFeatureEditorTestComponent {...testAttributes} />
-      </MapComponentsProvider>
-    );
-
-    // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(7));
-  });
-
-  it("should deregister 2 event listeners to the maplibre instance", async () => {
-    const wrapper = mount(
-      <MapComponentsProvider>
-        <MlFeatureEditorTestComponent {...testAttributes} />
-      </MapComponentsProvider>
-    );
-
-    // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(7);
-
-    wrapper.find(".toggle_layer_visible").simulate("click");
-
-    expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(3);
-  });
-
-  it("should add MapBox-Gl-draw instance using map.addControl to the maplibre instance", async () => {
-    const wrapper = mount(
-      <MapComponentsProvider>
-        <MlFeatureEditorTestComponent {...testAttributes} />
-      </MapComponentsProvider>
-    );
-
-    expect(mockMapLibreMethods.addControl).toHaveBeenCalledTimes(1);
-  });
-
-  it("should remove MapBox-Gl-draw instance using map.addControl to the maplibre instance", async () => {
-    const wrapper = mount(
-      <MapComponentsProvider>
-        <MlFeatureEditorTestComponent {...testAttributes} />
-      </MapComponentsProvider>
-    );
-
-    expect(mockMapLibreMethods.addControl).toHaveBeenCalledTimes(1);
-
-    wrapper.find(".toggle_layer_visible").simulate("click");
-
-    expect(mockMapLibreMethods.removeControl).toHaveBeenCalledTimes(1);
-  });
+	it("should register 2 event listeners to the maplibre instance", async () => {
+		const wrapper = mount(
+			<MapComponentsProvider>
+				<MlFeatureEditorTestComponent {...testAttributes} />
+			</MapComponentsProvider>
+		);
+
+		// MapLibreGlWrapper now subscribes to "data", "move" events on its own
+		await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(7));
+	});
+
+	it("should deregister 2 event listeners to the maplibre instance", async () => {
+		const wrapper = mount(
+			<MapComponentsProvider>
+				<MlFeatureEditorTestComponent {...testAttributes} />
+			</MapComponentsProvider>
+		);
+
+		// MapLibreGlWrapper now subscribes to "data", "move" events on its own
+		expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(7);
+
+		wrapper.find(".toggle_layer_visible").simulate("click");
+
+		expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(3);
+	});
+
+	it("should add MapBox-Gl-draw instance using map.addControl to the maplibre instance", async () => {
+		const wrapper = mount(
+			<MapComponentsProvider>
+				<MlFeatureEditorTestComponent {...testAttributes} />
+			</MapComponentsProvider>
+		);
+
+		expect(mockMapLibreMethods.addControl).toHaveBeenCalledTimes(1);
+	});
+
+	it("should remove MapBox-Gl-draw instance using map.addControl to the maplibre instance", async () => {
+		const wrapper = mount(
+			<MapComponentsProvider>
+				<MlFeatureEditorTestComponent {...testAttributes} />
+			</MapComponentsProvider>
+		);
+
+		expect(mockMapLibreMethods.addControl).toHaveBeenCalledTimes(1);
+
+		wrapper.find(".toggle_layer_visible").simulate("click");
+
+		expect(mockMapLibreMethods.removeControl).toHaveBeenCalledTimes(1);
+	});
 });