Merge pull request #361 from Bayer-Group/HOTFIX-pixel

[HOTFIX] Pixel error fix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bayer/ol-kit",
-  "version": "1.17.0",
+  "version": "1.17.1",
   "license": "BSD",
   "description": "Mapping components & utils built with openlayers + react",
   "keywords": [
@@ -22,7 +22,6 @@
       "email": "[email protected]",
       "url": "https://github.com/chrisreams91"
     },
-
     {
       "name": "Gabriel Schuetzner",
       "email": "[email protected]",
@@ -92,7 +91,7 @@
   },
   "repository": {
     "type": "git",
-    "url":"[email protected]:Bayer-Group/ol-kit.git"
+    "url": "[email protected]:Bayer-Group/ol-kit.git"
   },
   "dependencies": {
     "@date-io/moment": "~1.3.13",
@@ -192,7 +191,7 @@
     "jest-styled-components": "~7.0.2",
     "jsdoc": "~3.6.7",
     "mui-datatables": "~3.5.0",
-    "ol": "~6.4.3",
+    "ol": "6.5.0",
     "parcel": "2.0.0-alpha.3.2",
     "puppeteer": "~4.0.1",
     "react": "~16.11.0",
@@ -213,7 +212,7 @@
     "@material-ui/core": ">=4.0.0",
     "@material-ui/icons": ">=4.0.0",
     "@material-ui/styles": ">=4.0.0",
-    "ol": "~6.4.3",
+    "ol": ">=6.5.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": ">=5.0.0"

src/Controls/__snapshots__/Controls.test.js.snap

@@ -578,6 +578,7 @@ exports[`<Controls /> should shallow controls default position 1`] = `
             style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;"
           />
         </div>,
+        "emulateClicks_": false,
         "eventTarget_": [Circular],
         "listeners_": Object {
           "click": Array [
@@ -711,7 +712,6 @@ exports[`<Controls /> should shallow controls default position 1`] = `
       "previousExtent_": null,
       "renderer_": CompositeMapRenderer {
         "children_": Array [],
-        "declutterTree_": null,
         "disposed": false,
         "element_": <div
           class="ol-unselectable ol-layers"
@@ -888,6 +888,7 @@ exports[`<Controls /> should shallow controls default position 1`] = `
           "minZoom_": 0,
           "ol_uid": "15",
           "options_": Object {},
+          "padding": undefined,
           "pendingRemovals_": null,
           "projection_": EPSG3857Projection {
             "axisOrientation_": "enu",
@@ -957,6 +958,7 @@ exports[`<Controls /> should shallow controls default position 1`] = `
           "minZoom_": 0,
           "ol_uid": "15",
           "options_": Object {},
+          "padding": undefined,
           "pendingRemovals_": null,
           "projection_": EPSG3857Projection {
             "axisOrientation_": "enu",
@@ -1027,6 +1029,7 @@ exports[`<Controls /> should shallow controls default position 1`] = `
           "minZoom_": 0,
           "ol_uid": "15",
           "options_": Object {},
+          "padding": undefined,
           "pendingRemovals_": null,
           "projection_": EPSG3857Projection {
             "axisOrientation_": "enu",
@@ -1669,6 +1672,7 @@ exports[`<Controls /> should shallow controls in bottom left 1`] = `
             style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;"
           />
         </div>,
+        "emulateClicks_": false,
         "eventTarget_": [Circular],
         "listeners_": Object {
           "click": Array [
@@ -1802,7 +1806,6 @@ exports[`<Controls /> should shallow controls in bottom left 1`] = `
       "previousExtent_": null,
       "renderer_": CompositeMapRenderer {
         "children_": Array [],
-        "declutterTree_": null,
         "disposed": false,
         "element_": <div
           class="ol-unselectable ol-layers"
@@ -1982,6 +1985,7 @@ exports[`<Controls /> should shallow controls in bottom left 1`] = `
           "minZoom_": 0,
           "ol_uid": "63",
           "options_": Object {},
+          "padding": undefined,
           "pendingRemovals_": null,
           "projection_": EPSG3857Projection {
             "axisOrientation_": "enu",
@@ -2051,6 +2055,7 @@ exports[`<Controls /> should shallow controls in bottom left 1`] = `
           "minZoom_": 0,
           "ol_uid": "63",
           "options_": Object {},
+          "padding": undefined,
           "pendingRemovals_": null,
           "projection_": EPSG3857Projection {
             "axisOrientation_": "enu",
@@ -2121,6 +2126,7 @@ exports[`<Controls /> should shallow controls in bottom left 1`] = `
           "minZoom_": 0,
           "ol_uid": "63",
           "options_": Object {},
+          "padding": undefined,
           "pendingRemovals_": null,
           "projection_": EPSG3857Projection {
             "axisOrientation_": "enu",
@@ -2763,6 +2769,7 @@ exports[`<Controls /> should shallow controls in top left 1`] = `
             style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;"
           />
         </div>,
+        "emulateClicks_": false,
         "eventTarget_": [Circular],
         "listeners_": Object {
           "click": Array [
@@ -2896,7 +2903,6 @@ exports[`<Controls /> should shallow controls in top left 1`] = `
       "previousExtent_": null,
       "renderer_": CompositeMapRenderer {
         "children_": Array [],
-        "declutterTree_": null,
         "disposed": false,
         "element_": <div
           class="ol-unselectable ol-layers"
@@ -3074,6 +3080,7 @@ exports[`<Controls /> should shallow controls in top left 1`] = `
           "minZoom_": 0,
           "ol_uid": "31",
           "options_": Object {},
+          "padding": undefined,
           "pendingRemovals_": null,
           "projection_": EPSG3857Projection {
             "axisOrientation_": "enu",
@@ -3143,6 +3150,7 @@ exports[`<Controls /> should shallow controls in top left 1`] = `
           "minZoom_": 0,
           "ol_uid": "31",
           "options_": Object {},
+          "padding": undefined,
           "pendingRemovals_": null,
           "projection_": EPSG3857Projection {
             "axisOrientation_": "enu",
@@ -3213,6 +3221,7 @@ exports[`<Controls /> should shallow controls in top left 1`] = `
           "minZoom_": 0,
           "ol_uid": "31",
           "options_": Object {},
+          "padding": undefined,
           "pendingRemovals_": null,
           "projection_": EPSG3857Projection {
             "axisOrientation_": "enu",
@@ -3855,6 +3864,7 @@ exports[`<Controls /> should shallow controls in top right 1`] = `
             style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;"
           />
         </div>,
+        "emulateClicks_": false,
         "eventTarget_": [Circular],
         "listeners_": Object {
           "click": Array [
@@ -3988,7 +3998,6 @@ exports[`<Controls /> should shallow controls in top right 1`] = `
       "previousExtent_": null,
       "renderer_": CompositeMapRenderer {
         "children_": Array [],
-        "declutterTree_": null,
         "disposed": false,
         "element_": <div
           class="ol-unselectable ol-layers"
@@ -4167,6 +4176,7 @@ exports[`<Controls /> should shallow controls in top right 1`] = `
           "minZoom_": 0,
           "ol_uid": "47",
           "options_": Object {},
+          "padding": undefined,
           "pendingRemovals_": null,
           "projection_": EPSG3857Projection {
             "axisOrientation_": "enu",
@@ -4236,6 +4246,7 @@ exports[`<Controls /> should shallow controls in top right 1`] = `
           "minZoom_": 0,
           "ol_uid": "47",
           "options_": Object {},
+          "padding": undefined,
           "pendingRemovals_": null,
           "projection_": EPSG3857Projection {
             "axisOrientation_": "enu",
@@ -4306,6 +4317,7 @@ exports[`<Controls /> should shallow controls in top right 1`] = `
           "minZoom_": 0,
           "ol_uid": "47",
           "options_": Object {},
+          "padding": undefined,
           "pendingRemovals_": null,
           "projection_": EPSG3857Projection {
             "axisOrientation_": "enu",

src/Draw/__snapshots__/DrawContainer.test.js.snap

@@ -18,7 +18,7 @@ exports[`<DrawContainer /> should render a basic prebuilt DrawContainer componen
         class=\\"sc-gtssRu fBppYk\\"
         href=\\"https://ol-kit.com/\\"
         target=\\"_blank\\"
-        title=\\"Powered by ol-kit v1.17.0\\"
+        title=\\"Powered by ol-kit v1.17.1\\"
       >
         <svg
           viewBox=\\"0 0 204.76 236.44\\"

src/Popup/utils.js

@@ -29,7 +29,10 @@ export const getPixelValue = (layer, event) => {
 
   if (layer.isGeoserverLayer) renderedLayer = layer.getWMSLayer()
 
-  const renderContext = renderedLayer.getRenderer().context
+  const renderContext = renderedLayer?.getRenderer()?.context
+
+  if (!renderContext) return null
+
   const pixelImageData = renderContext.getImageData(pixel[0], pixel[1], 1, 1)
   const [red, green, blue, alpha] = pixelImageData.data
 
@@ -127,22 +130,6 @@ const wfsSelector = (layer, event, opts) => {
   if (features.length) return setParentLayer({ features, layer })
 }
 
-const wmsSelector = (layer, event) => {
-  const { pixel, map } = event
-  const coords = map.getCoordinateFromPixel(pixel)
-
-  return new Promise(async resolve => { // eslint-disable-line no-async-promise-executor
-    const rawFeatures = await layer.fetchFeaturesAtClick(coords, map)
-    const { features } = await setParentLayer({ features: rawFeatures, layer })
-
-    if (features.length) {
-      resolve({ features, layer })
-    } else {
-      resolve({ features: [getPixelValue(layer, event)], layer })
-    }
-  })
-}
-
 const vectorTileSelector = (layer, event, opts) => {
   const { map, pixel } = event
   // check for featuresAtPixel to account for hitTolerance
@@ -198,15 +185,28 @@ export const getLayersAndFeaturesForEvent = (event, opts = {}) => {
     } else if (layer.isVectorLayer || layer instanceof olLayerVector || !layer.getLayerState().managed) { // layer.getLayerState().managed is an undocumented ol prop that lets us ignore select's vector layer
       // handle non vector tile wfs layers
       return wfsSelector(layer, event, opts)
-    } else if (layer.isGeoserverLayer) {
-      // handle geoserver layers
-      return wmsSelector(layer, event)
-    } else if (!layer.getProperties()._ol_kit_basemap) {
-      // get the pixel value for any other non-basemap layers
-      return { features: [getPixelValue(layer, event)] }
     }
   }).filter(Boolean)
 
+  const wmsSelector = layer => {
+    if (layer.get('_ol_kit_parent')?.isGeoserverLayer) {
+      // this logic handles clicks on GeoserverLayers
+      const geoserverLayer = layer.get('_ol_kit_parent')
+      const coords = map.getCoordinateFromPixel(pixel)
+      const wmsPromise = new Promise(async resolve => { // eslint-disable-line no-async-promise-executor
+        const rawFeatures = await geoserverLayer.fetchFeaturesAtClick(coords, map)
+        const { features } = await setParentLayer({ features: rawFeatures, layer })
+
+        resolve({ features, layer })
+      })
+
+      promises.push(wmsPromise)
+    }
+  }
+
+  // We have to look for ImageLayers with a parent GeoserverLayer this way, as the ImageLayer doesn't show up in map.getLayers()
+  map.forEachLayerAtPixel(pixel, wmsSelector)
+
   return promises
 }