@mapcomponents/react-maplibre 0.1.48 → 0.1.49

package/dist/setupTests.d.ts

@@ -0,0 +1,12 @@
+export var uuid_regex: string;
+export namespace mockMapLibreMethods {
+    const on: any;
+    const off: any;
+    const addControl: any;
+    const removeControl: any;
+    const hasControl: any;
+    function getCanvas(): HTMLCanvasElement;
+    function getContainer(): {
+        style: {};
+    };
+}

package/dist/stories/components/Readme.d.ts

@@ -0,0 +1,2 @@
+export default Readme;
+declare function Readme(): JSX.Element;

package/dist/ui_components/ImageLoader.d.ts

@@ -0,0 +1,2 @@
+export default ImageLoader;
+declare function ImageLoader(props: any): JSX.Element;

package/dist/ui_components/Legend.d.ts

@@ -0,0 +1 @@
+export default function Legend(props: any): JSX.Element;

package/dist/ui_components/LoadingOverlay.d.ts

@@ -0,0 +1,2 @@
+export default LoadingOverlay;
+declare function LoadingOverlay(): JSX.Element;

package/dist/ui_components/LoadingOverlayContext.d.ts

@@ -0,0 +1,11 @@
+export const LoadingOverlayContext: React.Context<{}>;
+export function LoadingOverlayProvider({ children }: {
+    children: any;
+}): JSX.Element;
+export namespace LoadingOverlayProvider {
+    namespace propTypes {
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    }
+}
+import React from "react";
+import PropTypes from "prop-types";

package/dist/ui_components/Sidebar.d.ts

@@ -0,0 +1 @@
+export default function Sidebar(props: any): JSX.Element;

package/dist/ui_components/Tooltip.d.ts

@@ -0,0 +1 @@
+export default function Legend(props: any): JSX.Element;

package/dist/ui_components/TopToolbar.d.ts

@@ -0,0 +1 @@
+export default function TopToolbar(props: any): JSX.Element;

package/dist/util/index.d.ts

@@ -0,0 +1,3 @@
+import layerRemovalTest from "./layerRemovalTest";
+import sourceRemovalTest from "./sourceRemovalTest";
+export { layerRemovalTest, sourceRemovalTest };

package/dist/util/layerRemovalTest.d.ts

@@ -0,0 +1,2 @@
+export default layerRemovalTest;
+declare function layerRemovalTest(ComponentName: any, Component: any, regexLayerNameTest: any, humanReadableLayerName: any, beforeWrapperInit: any, afterWrapperInit: any, createWrapperFunction: any): void;

package/dist/util/sourceRemovalTest.d.ts

@@ -0,0 +1,2 @@
+export default sourceRemovalTest;
+declare function sourceRemovalTest(ComponentName: any, Component: any, regexLayerNameTest: any, humanReadableLayerName: any, beforeWrapperInit: any, afterWrapperInit: any): void;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.48",
+  "version": "0.1.49",
   "main": "index.js",
   "license": "MIT",
   "module": "dist/index.esm.js",
   "source": "src/index.ts",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup -c",
     "start": "start-storybook -p 6006 -s public",

package/src/components/MapLibreMap/MapLibreMap.tsx

@@ -16,7 +16,7 @@ type MapLibreMapProps = {
    * See https://maplibre.org/maplibre-gl-js-docs/api/map/ for a formal documentation of al
    * available properties.
    */
-  options?: MapOptionsType;
+  options?: Partial<MapOptionsType>;
   /**
    * css style definition passed to the map container DOM element
    */

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

@@ -15,11 +15,10 @@ export default storyoptions;
 const Template = (args) => {
   return (
     <MlFeatureEditor
-      debug={true}
+      {...args}
       onChange={(features) => {
         console.log(features);
       }}
-      {...args}
     />
   );
 };

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

@@ -82,7 +82,7 @@ describe("<MlFeatureEditor>", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6));
+    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(7));
   });
 
   it("should deregister 2 event listeners to the maplibre instance", async () => {
@@ -93,11 +93,11 @@ describe("<MlFeatureEditor>", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6);
+    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(7);
 
     wrapper.find(".toggle_layer_visible").simulate("click");
 
-    expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2);
+    expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(3);
   });
 
   it("should add MapBox-Gl-draw instance using map.addControl to the maplibre instance", async () => {

package/src/components/MlFeatureEditor/MlFeatureEditor.tsx

@@ -9,7 +9,6 @@ import CustomDirectSelectMode from "./custom-direct-select-mode.js";
 
 import useMap from "../../hooks/useMap";
 
-
 interface MlFeatureEditorProps {
   /**
    * Id of the target MapLibre instance in mapContext
@@ -28,7 +27,7 @@ interface MlFeatureEditorProps {
    * 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
@@ -36,40 +35,30 @@ interface MlFeatureEditorProps {
    * - "draw_point" draw Point
    * - "draw_line_string" draw LineString
    */
-  mode?:string
+  mode?: string;
 }
 
 /**
  * GeoJson Feature editor that allows to create or manipulate GeoJson data
  */
-const MlFeatureEditor = (props:MlFeatureEditorProps) => {
+const MlFeatureEditor = (props: MlFeatureEditorProps) => {
   const draw = useRef<MapboxDraw>();
   const mapHook = useMap({
     mapId: props.mapId,
     waitForLayer: props.insertBeforeLayer,
   });
-  const onChangeRef = useRef(props.onChange);
 
   const drawToolsInitialized = useRef(false);
   const [drawToolsReady, setDrawToolsReady] = useState(false);
 
-  const [mouseUpTrigger, setMouseUpTrigger] = useState(0);
 
-  const modeChangeHandler = (e:any) => {
+  const modeChangeHandler = (e: any) => {
     console.log("MlFeatureEditor mode change to " + e.mode);
     //setDrawMode(e.mode);
   };
 
-  const mouseUpHandler = () => {
-    setMouseUpTrigger(Math.random());
-  };
-
   useEffect(() => {
-    if (
-      mapHook.map &&
-      !drawToolsInitialized.current
-    ) {
-      
+    if (mapHook.map && !drawToolsInitialized.current) {
       drawToolsInitialized.current = true;
 
       if (
@@ -96,34 +85,47 @@ const MlFeatureEditor = (props:MlFeatureEditorProps) => {
         ),
       });
 
-      mapHook.map.on("draw.modechange", modeChangeHandler, mapHook.componentId);
-
       mapHook.map.addControl(draw.current, "top-left", mapHook.componentId);
 
-      mapHook.map.on("mouseup", mouseUpHandler, mapHook.componentId);
+
+      mapHook.map.on("draw.modechange", modeChangeHandler, mapHook.componentId);
 
       setDrawToolsReady(true);
     }
-  }, [mapHook.map,  props, drawToolsInitialized]);
+  }, [mapHook.map, props, drawToolsInitialized]);
 
   useEffect(() => {
-    if (
-      draw.current &&
-      props.geojson?.geometry
-    ) {
-      draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
+    if (!mapHook.map || !drawToolsReady) return;
+
+    const changeHandler = () => {
+      if (draw.current) {
+        // update drawnFeatures state object
+        if (typeof props.onChange === "function") {
+          let currentFeatureCollection = draw.current.getAll?.();
+          props.onChange(currentFeatureCollection?.features);
+        }
+      }
+    };
+
+    mapHook.map.on("mouseup", changeHandler);
+
+    mapHook.map.on("touchend", changeHandler);
+
+    return () => {
+      if (!mapHook.map) return;
+
+      mapHook.map.map.off("mouseup", changeHandler);
+
+      mapHook.map.map.off("touchend", changeHandler);
     }
-  }, [props.geojson, drawToolsReady]);
+
+  }, [drawToolsReady, mapHook.map])
 
   useEffect(() => {
-    if (draw.current && mouseUpTrigger) {
-      // update drawnFeatures state object
-      let currentFeatureCollection = draw.current.getAll();
-      if (typeof onChangeRef.current === "function") {
-        onChangeRef.current(currentFeatureCollection.features);
-      }
+    if (draw.current && props.geojson?.geometry) {
+      draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
     }
-  }, [mouseUpTrigger]);
+  }, [props.geojson, drawToolsReady]);
 
   useEffect(() => {
     if (props.mode && draw.current) {
@@ -132,7 +134,7 @@ const MlFeatureEditor = (props:MlFeatureEditorProps) => {
     }
   }, [props.mode]);
 
-  return (<></>);
-}
+  return <></>;
+};
 
 export default MlFeatureEditor;

package/src/components/MlFeatureEditor/lib/utils.js

@@ -39,8 +39,7 @@ const drawUtils = {
   getDrawInstance: (map) => {
     for (var i = map._controls.length - 1; i >= 0; i--) {
       if (
-        map._controls[i].options &&
-        map._controls[i].options.defaultMode === "custom_select"
+        map._controls[i]?.modes?.SIMPLE_SELECT === "simple_select"
       ) {
         return map._controls[i];
       }

package/src/components/MlWmsLoader/MlWmsLoader.stories.js

@@ -43,5 +43,5 @@ ExampleConfig.args = {
    * https://www.wms.nrw.de/wms/kitas
    * https://www.wms.nrw.de/geobasis/wms_nw_vdop
    */
-  url: "https://www.wms.nrw.de/wms/kitas",
+  url: "https://www.wms.nrw.de/geobasis/wms_nw_vdop",
 };

package/src/hooks/useLayer.test.js

@@ -0,0 +1,205 @@
+import React, { useContext, useState } from "react";
+import { mount, configure } from "enzyme";
+import MapContext, { MapComponentsProvider } from "../contexts/MapContext";
+import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
+import { waitFor } from "@testing-library/react";
+import { mockMapLibreMethods } from "../setupTests";
+
+import useLayer from "./useLayer";
+
+const UseLayerTestComponent = (props) => {
+  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
+  useLayer({
+    mapId: props.mapId,
+    layerId: props.layerId || "TestComponent",
+    geojson: props.geojson,
+    options: {
+      paint: props.paint,
+      layout: props.layout || {},
+      type: props.type,
+      ...props.options,
+    },
+    insertBeforeLayer: props.insertBeforeLayer,
+    onHover: props.onHover,
+    onClick: props.onClick,
+    onLeave: props.onLeave,
+  });
+
+  return <></>;
+};
+
+const TestComponent = (props) => {
+  const [includeComponent, setIncludeComponent] = useState(true);
+  const [testType, setTestType] = useState('line');
+
+  return (
+    <>
+      <button
+        className="change_testType"
+        onClick={() => {
+          setTestType('circle');
+        }}
+      >
+        change type
+      </button>
+      <button
+        className="toggle_includeComponent"
+        onClick={() => {
+          setIncludeComponent(!includeComponent);
+        }}
+      >
+        toggle
+      </button>
+      {includeComponent && <UseLayerTestComponent {...props} type={testType} />}
+      <MapLibreMap />
+    </>
+  );
+};
+
+describe("useLayer hook", () => {
+  it("should register 1 event listener 'hover' to the maplibre instance", async () => {
+    var testAttributes = {
+      onHover: () => {},
+    };
+
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <TestComponent {...testAttributes} />
+      </MapComponentsProvider>
+    );
+
+    // MapLibreGlWrapper now subscribes to 4 events events on its own
+    // useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
+    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6));
+  });
+  it("should deregister 1 event listener 'hover' to the maplibre instance", async () => {
+    var testAttributes = {
+      onHover: () => {},
+    };
+
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <TestComponent {...testAttributes} />
+      </MapComponentsProvider>
+    );
+
+    wrapper.find(".toggle_includeComponent").simulate("click");
+
+    // useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
+    await waitFor(() => expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2));
+  });
+  it("should register 1 event listener 'leave' to the maplibre instance", async () => {
+    var testAttributes = {
+      onLeave: () => {},
+    };
+
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <TestComponent {...testAttributes} />
+      </MapComponentsProvider>
+    );
+
+    // MapLibreGlWrapper now subscribes to 4 events events on its own
+    // useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
+    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6));
+  });
+  it("should deregister 1 event listener 'leave' to the maplibre instance", async () => {
+    var testAttributes = {
+      onLeave: () => {},
+    };
+
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <TestComponent {...testAttributes} />
+      </MapComponentsProvider>
+    );
+
+    wrapper.find(".toggle_includeComponent").simulate("click");
+
+    // useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
+    await waitFor(() => expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2));
+  });
+
+
+  it("should register 1 event listener 'click' to the maplibre instance", async () => {
+    var testAttributes = {
+      onClick: () => {},
+    };
+
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <TestComponent {...testAttributes} />
+      </MapComponentsProvider>
+    );
+
+    // MapLibreGlWrapper now subscribes to 4 events events on its own
+    // useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
+    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6));
+  });
+  it("should deregister 1 event listener 'click' to the maplibre instance", async () => {
+    var testAttributes = {
+      onClick: () => {},
+    };
+
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <TestComponent {...testAttributes} />
+      </MapComponentsProvider>
+    );
+
+    wrapper.find(".toggle_includeComponent").simulate("click");
+
+    // useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
+    await waitFor(() => expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2));
+  });
+
+  // if props.type is changed during runtime the hook needs to remove existing additions to the maplibre instance and reinitialize its representation in the maplibre instance
+  it("should deregister 1 event listener 'hover' to the maplibre instance if type is changed during component runtime", async () => {
+    var testAttributes = {
+      onHover: () => {},
+    };
+
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <TestComponent {...testAttributes} />
+      </MapComponentsProvider>
+    );
+
+    wrapper.find(".change_testType").simulate("click");
+
+    // useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
+    await waitFor(() => expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2));
+  });
+  it("should deregister 1 event listener 'hover' to the maplibre instance if type is changed during component runtime", async () => {
+    var testAttributes = {
+      onHover: () => {},
+    };
+
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <TestComponent {...testAttributes} />
+      </MapComponentsProvider>
+    );
+
+    wrapper.find(".change_testType").simulate("click");
+
+    // useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
+    await waitFor(() => expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2));
+  });
+  it("should deregister 1 event listener 'click' to the maplibre instance if type is changed during component runtime", async () => {
+    var testAttributes = {
+      onClick: () => {},
+    };
+
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <TestComponent {...testAttributes} />
+      </MapComponentsProvider>
+    );
+
+    wrapper.find(".change_testType").simulate("click");
+
+    // useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
+    await waitFor(() => expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2));
+  });
+});

package/tsconfig.json

@@ -1,15 +1,33 @@
 {
   "compilerOptions": {
+    "checkJs": false,
+    "esModuleInterop": true,
+    "importHelpers": false,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": false,
+    "types": [
+      "node",
+      "jest",
+      "geojson"
+    ],
     "outDir": "build/esm",
     "module": "esnext",
     "target": "es5",
-    "lib": ["es6", "dom", "es2016", "es2017"],
+    "lib": [
+      "es6",
+      "dom",
+      "es2016",
+      "es2017"
+    ],
     "jsx": "react",
     "declaration": true,
+    "declarationDir": "./dist",
     "moduleResolution": "node",
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "esModuleInterop": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noImplicitAny": true,
@@ -19,13 +37,23 @@
     "allowJs": true,
     "baseUrl": ".",
     "paths": {
-      "!maplibre-gl": ["node_modules/maplibre-gl"] // This mapping is relative to "baseUrl"
+      "!maplibre-gl": [
+        "node_modules/maplibre-gl"
+      ] // This mapping is relative to "baseUrl"
     }
   },
-  "include": ["src", "src/custom.d.tsx"],
-  "exclude": ["node_modules", "lib"],
+  "include": [
+    "src",
+    "src/custom.d.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
+  ],
   "typedocOptions": {
-    "entryPoints": ["src/index.ts"],
+    "entryPoints": [
+      "src/index.ts"
+    ],
     "out": "docs",
   }
-}
+}