Merge pull request #195 from MonsantoCo/offset-support

fix popup offset from margins added to map container

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bayer/ol-kit",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "license": "BSD",
   "description": "Mapping components & utils built with openlayers + react",
   "keywords": [

runfile.js

@@ -6,17 +6,17 @@ const packageJson = require('./package.json')
 const packageName = packageJson.name
 
 function ship () {
-  const tag = packageJson.version.includes('-') ? 'next' : 'latest'
-  const latestVersion = child_process.execSync(`npm view ${packageName}@latest version`).toString()
+  const tag = packageJson.version.includes('-') ? 'next' : 'legacy'
+  const legacyVersion = child_process.execSync(`npm view ${packageName}@legacy version`).toString()
 
-  // publish with a `shipping` tag so we can control the latest/next tags manually since NPM defaults to latest if no tag is provided
+  // publish with a `shipping` tag so we can control the legacy/next tags manually since NPM defaults to legacy if no tag is provided
   run(`export SHIP=true && npm run build && npm publish -f --tag shipping`)
   // remove the temporary shipping tag
   run(`npm dist-tags remove ${packageName} shipping || true`)
 
-  // only if the latest is less than the current version do we tag it (this ignores support branches)
-  if (semver.gt(packageJson.version, latestVersion)) {
-    // add the appropriate next or latest tag manually to the version just published
+  // only if the legacy is less than the current version do we tag it (this ignores support branches)
+  if (semver.gt(packageJson.version, legacyVersion)) {
+    // add the appropriate next or legacy tag manually to the version just published
     run(`npm dist-tags add ${packageName}@${packageJson.version} ${tag}`)
   }
 }

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

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

src/Popup/utils.js

@@ -184,15 +184,6 @@ export const getPopupPositionFromFeatures = (event, features = [], opts = {}) =>
     bottom: getPadding(2),
     left: getPadding(3)
   }
-  // olMap.getPixelFromCoordinate returns a pixel relative to the map's target element so we need to convert that to a pixel relative to the window.
-  const mapToScreenPixel = (pixel = [0, 0]) => {
-    const { x, y } = map.getTargetElement().getBoundingClientRect()
-    const offset = [x, y]
-
-    return pixel.map((val, i) => {
-      return val + offset[i]
-    })
-  }
 
   // find bbox for passed features
   const getFitsForFeatures = rawFeatures => {
@@ -231,21 +222,21 @@ export const getPopupPositionFromFeatures = (event, features = [], opts = {}) =>
 
   // the order of these checks determine which side is tried first (right, left, top, and then bottom)
   const getPosition = bbox => {
-    if (fitsRight(bbox.right)) return { arrow: 'left', pixel: mapToScreenPixel(bbox.right), fits: true }
-    if (fitsLeft(bbox.left)) return { arrow: 'right', pixel: mapToScreenPixel(bbox.left), fits: true }
-    if (fitsAbove(bbox.top)) return { arrow: 'bottom', pixel: mapToScreenPixel(bbox.top), fits: true }
-    if (fitsBelow(bbox.bottom)) return { arrow: 'top', pixel: mapToScreenPixel(bbox.bottom), fits: true }
+    if (fitsRight(bbox.right)) return { arrow: 'left', pixel: bbox.right, fits: true }
+    if (fitsLeft(bbox.left)) return { arrow: 'right', pixel: bbox.left, fits: true }
+    if (fitsAbove(bbox.top)) return { arrow: 'bottom', pixel: bbox.top, fits: true }
+    if (fitsBelow(bbox.bottom)) return { arrow: 'top', pixel: bbox.bottom, fits: true }
 
     if (opts.lastPosition) {
-      if (opts.lastPosition.arrow === 'left') return { arrow: 'left', pixel: mapToScreenPixel(bbox.right), fits: false }
-      if (opts.lastPosition.arrow === 'top') return { arrow: 'top', pixel: mapToScreenPixel(bbox.bottom), fits: false }
-      if (opts.lastPosition.arrow === 'bottom') return { arrow: 'bottom', pixel: mapToScreenPixel(bbox.top), fits: false }
-      if (opts.lastPosition.arrow === 'right') return { arrow: 'right', pixel: mapToScreenPixel(bbox.left), fits: false }
-      if (opts.lastPosition.arrow === 'none') return { arrow: 'none', pixel: mapToScreenPixel(opts.lastPosition.pixel), fits: false }
+      if (opts.lastPosition.arrow === 'left') return { arrow: 'left', pixel: bbox.right, fits: false }
+      if (opts.lastPosition.arrow === 'top') return { arrow: 'top', pixel: bbox.bottom, fits: false }
+      if (opts.lastPosition.arrow === 'bottom') return { arrow: 'bottom', pixel: bbox.top, fits: false }
+      if (opts.lastPosition.arrow === 'right') return { arrow: 'right', pixel: bbox.left, fits: false }
+      if (opts.lastPosition.arrow === 'none') return { arrow: 'none', pixel: opts.lastPosition.pixel, fits: false }
     }
 
     // if none of the above return, it doesn't fit on any side (it's on top of or within)
-    return { arrow: 'none', pixel: mapToScreenPixel(pixel), fits: false }
+    return { arrow: 'none', pixel, fits: false }
   }
 
   return getPosition(getFitsForFeatures(features))