Merge pull request #303 from Bayer-Group/v1-merge-supportv0

V1 merge supportv0

package.json

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

src/Controls/ScaleLine.js

@@ -1,5 +1,4 @@
-import React, { useEffect } from 'react'
-import ReactDOM from 'react-dom'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { ScaleLineContainer } from './styled'
 import { ScaleLine as olScaleLine } from 'ol/control'
@@ -17,7 +16,7 @@ class ScaleLine extends React.Component {
     const scale = new olScaleLine({
       target: this.scaleLineContainer.current,
       units: units,
-      text: false,
+      text: false
     })
 
     this.setState({ scale }, () => scale.setMap(map))
@@ -45,4 +44,4 @@ ScaleLine.propTypes = {
   units: PropTypes.string
 }
 
-export default connectToContext(ScaleLine)
+export default connectToContext(ScaleLine)

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.9.1\\"
+        title=\\"Powered by ol-kit v1.10.0\\"
       >
         <svg
           viewBox=\\"0 0 204.76 236.44\\"
@@ -164,5 +164,5 @@ exports[`<DrawContainer /> should render a basic prebuilt DrawContainer componen
               </span>
             </div>
             <div
-              class=\\"MuiInputBase-root MuiInput-root MuiIn..."
+              class=\\"MuiInputBase-root MuiInput-root MuiI..."
 `;

src/Draw/utils.js

@@ -109,21 +109,6 @@ function calculateScale (map, feature) {
   return vmfLabel.scaling ? scaleFactor : 1
 }
 
-function formatStyleString (textStyle) {
-  const font = textStyle.getFont() || 14
-  const scale = textStyle.getScale() || 1
-  const px = font.indexOf('px')
-  const size = font.slice(px - 2, px)
-  const scaledSize = (size - 6) * scale // Size - 6 is just done to make the text appear the same relative size as it is on the map
-  const scaledFont = font.replace(`${size}px`, `${scaledSize}px`)
-  const fillColor = textStyle.getFill().getColor()
-  const stroke = textStyle.getStroke()
-  const strokeColor = stroke.getColor()
-  const strokeWidth = stroke.getWidth()
-
-  return `font: ${scaledFont}; letter-spacing: 0px; paint-order: stroke; stroke: ${strokeColor}; stroke-width: ${strokeWidth}; fill: ${fillColor}`
-}
-
 function calcGeodesicLength (sourceProj, lineString) {
   let length = 0
 
@@ -389,12 +374,6 @@ function flatten (array) {
   }, [])
 }
 
-function scaleDistanceToMap (distance, map) {
-  const currentResolution = map.getView().getResolution()
-
-  return distance * currentResolution
-}
-
 /**
  * Generate a 2D array of features paired to a style representing how they are currently styled on the map.
  * OpenLayers Features will inherit the style set on their parent layer if their own style is undefined.  This Function helps resolve the style that is actually being used to render the feature on the map.
@@ -425,7 +404,7 @@ export function getStyledFeatures (layers, resolution) {
       // Try every avenue for getting the style from the feature itself since that style will override the layer's style.
       const featureStyleFunction = feature.getStyleFunction()
       const featureStyle = typeof featureStyleFunction === 'function'
-        ? featureStyleFunction.call(feature, resolution) // eslint-disable-line no-useless-call // This isn't actually a useless call and I don't know why eslint doesn't like it.
+        ? featureStyleFunction.call(feature, resolution)
         : feature.getStyle()
 
       if (featureStyle || !layerStyleFunction) { // If we have a valid style from the feature we use that.  This is an or because if we don't have a style from the feature or the layer than we return it as undefined.

src/LayerPanel/LayerPanelActionExport/index.js

@@ -53,15 +53,15 @@ class LayerPanelActionExport extends Component {
         disableGutters={false}
         disabled={this.isExportable()}
         onClick={() => this.handleExport('kml')} >
-        {translations['_ol_kit.LayerPanelActions.kml'] || 'Export KML'}
+        {translations['_ol_kit.LayerPanelActions.kml']}
       </MenuItem>,
       <MenuItem
         key='exportShp'
         data-testid='LayerPanel.exportShapefile'
         disableGutters={false}
         disabled={this.isExportable()}
         onClick={() => this.handleExport('shp')} >
-        {translations['_ol_kit.LayerPanelActions.shapefile'] || 'Export Shapefile'}
+        {translations['_ol_kit.LayerPanelActions.shapefile']}
       </MenuItem>,
       <MenuItem
         key='exportGeoJSON'

src/LayerPanel/LayerPanelActionExtent/index.js

@@ -39,7 +39,7 @@ class LayerPanelActionExtent extends Component {
 
     return (
       <MenuItem data-testid='LayerPanelAction.extent' key={'zoom'} onClick={() => this.gotoLayerExtent(layer)}>
-        {translations['_ol_kit.actions.zoomToExtent'] || 'Zoom to Layer Extent'}
+        {translations['_ol_kit.actions.zoomToExtent']}
       </MenuItem>
     )
   }

src/LayerPanel/LayerPanelActionImport/index.js

@@ -40,7 +40,7 @@ class LayerPanelActionImport extends Component {
     return (
       <MenuItem disableGutters={false}>
         <label htmlFor='file-upload'>
-          {translations['_ol_kit.LayerPanelActions.import'] || 'Import File'}
+          {translations['_ol_kit.LayerPanelActions.import']}
         </label>
         <UploadInput
           value={this.state.value || ''}

src/LayerPanel/LayerPanelActionRemove/index.js

@@ -42,8 +42,8 @@ class LayerPanelActionRemove extends Component {
   render () {
     const { layers, layer, translations } = this.props
     const noVisibleLayers = layers && this.getVisibleLayers().length === 0
-    const removeLayer = translations['_ol_kit.actions.removeLayer'] || 'Remove Layer'
-    const removeLayers = translations['_ol_kit.actions.removeLayers'] || 'Remove All Layers'
+    const removeLayer = translations['_ol_kit.actions.removeLayer']
+    const removeLayers = translations['_ol_kit.actions.removeLayers']
 
     return (
       <MenuItem data-testid='LayerPanelAction.remove' disableGutters={false} disabled={layers && noVisibleLayers} onClick={this.handleRemove}>

src/LayerPanel/LayerPanelLayersPage/index.js

@@ -55,7 +55,7 @@ class LayerPanelLayersPage extends Component {
       layers: [],
       masterCheckboxVisibility: true,
       featureListeners: [],
-      filterText: null,
+      filterText: '',
       expandedLayers: []
     }
   }
@@ -65,7 +65,7 @@ class LayerPanelLayersPage extends Component {
 
     if (disableHover) return // opt-out
 
-    const { stroke = 'red', fill = '#ffffff', color = 'red'} = setHoverStyle()
+    const { stroke = 'red', fill = '#ffffff', color = 'red' } = setHoverStyle()
 
     const style = new olStyleStyle({
       stroke: new olStroke({
@@ -96,11 +96,14 @@ class LayerPanelLayersPage extends Component {
     if (disableHover) return
     // clear the previously selected feature before adding newly selected feature so only one feature is "selected" at a time
     this.selectInteraction.getFeatures().clear()
-    features.forEach(feature => {
-      if (feature.get('_ol_kit_feature_visibility')) {
-        this.selectInteraction.getFeatures().push(feature)
-      }
-    })
+
+    if (features?.length) {
+      features.forEach(feature => {
+        if (feature.get('_ol_kit_feature_visibility')) {
+          this.selectInteraction.getFeatures().push(feature)
+        }
+      })
+    }
   }
 
   componentDidMount = () => {
@@ -259,7 +262,8 @@ class LayerPanelLayersPage extends Component {
   handleMasterCheckbox = () => {
     const visibleLayers = this.getVisibleLayers().length
     const allLayers = this.state.layers.length
-    const indeterminateLayers = this.getVisibleLayers().filter(layer => layer.getVisible() === INDETERMINATE).length
+    const indeterminateLayers = this.getVisibleLayers().filter(layer => layer.get('_ol_kit_layerpanel_visibility') === INDETERMINATE).length
+
     const masterCheckboxState = indeterminateLayers ? INDETERMINATE : visibleLayers === allLayers && allLayers > 0 ? true : visibleLayers > 0 ? INDETERMINATE : false // eslint-disable-line
 
     this.setState({ masterCheckboxVisibility: masterCheckboxState })
@@ -273,8 +277,15 @@ class LayerPanelLayersPage extends Component {
 
     if (layerCheckboxClick && layerVisibility === INDETERMINATE) {
       layer.setVisible(true)
+      layer.set('_ol_kit_layerpanel_visibility', true)
+    } else if (layerCheckboxClick) {
+      const lv = !layer.getVisible()
+
+      layer.setVisible(lv)
+      layer.set('_ol_kit_layerpanel_visibility', lv)
     } else {
-      layerCheckboxClick ? layer.setVisible(!layer.getVisible()) : layer.setVisible(layerVisibility)
+      layer.setVisible(layerVisibility === INDETERMINATE ? true : layerVisibility)
+      layer.set('_ol_kit_layerpanel_visibility', layerVisibility)
     }
 
     if (layerCheckboxClick) this.setVisibilityForAllFeaturesOfLayer(layer, layer.getVisible())
@@ -354,17 +365,15 @@ class LayerPanelLayersPage extends Component {
 
     return (
       <LayerPanelPage tabIcon={tabIcon}>
-        {enableFilter &&
-          <TextField
-            id='feature-filter-input'
-            label={translations['_ol_kit.LayerPanelLayersPage.filterText']}
-            type='text'
-            style={{ margin: '8px' }}
-            fullWidth
-            value={filterText}
-            onChange={(e) => this.handleFilter(e.target.value)} />
-        }
-        <LayerPanelContent padding='0px 15px'>
+        <TextField
+          id='feature-filter-input'
+          label={translations['_ol_kit.LayerPanelLayersPage.filterText']}
+          type='text'
+          style={{ margin: '8px', display: enableFilter ? 'block' : 'none' }}
+          fullWidth
+          value={filterText}
+          onChange={(e) => this.handleFilter(e.target.value)} />
+        <LayerPanelContent padding={enableFilter ? '0px 15px 58px 15px !important' : '0px 15px'}>
           <LayerPanelList
             disableDrag={disableDrag}
             onSort={this.zIndexSort}
@@ -396,15 +405,15 @@ class LayerPanelLayersPage extends Component {
             {layerFilter(layers).filter((layer) => {
               const filteredFeatures = this.getFeaturesForLayer(layer)
 
-              return !enableFilter || !(layer instanceof olLayerVector) ? true : filteredFeatures?.length
+              return !enableFilter || !(layer instanceof olLayerVector) || this.props.shouldHideFeatures(layer) ? true : filteredFeatures?.length
             }).map((layer, i) => {
               const features = this.getFeaturesForLayer(layer)
 
               return (
                 <div key={i} onMouseEnter={() => this.selectFeatures(features)} onMouseLeave={() => this.selectFeatures([])}>
                   <LayerPanelListItem handleDoubleClick={() => { handleLayerDoubleClick(layer) }}>
                     {<LayerPanelCheckbox
-                      checkboxState={!layer ? null : layer.getVisible()}
+                      checkboxState={!layer ? null : layer.get('_ol_kit_layerpanel_visibility') || layer.getVisible()}
                       handleClick={(e) => this.handleVisibility(e, layer)} />}
                     {<LayerPanelExpandableList
                       show={!!features}

src/LayerPanel/LayerPanelList/index.js

@@ -31,13 +31,13 @@ const applyDrag = (arr, dragResult) => {
  * @since 0.5.0
  */
 class LayerPanelList extends Component {
-
   handleDrop = e => {
-    const { onSort, onReorderedItems, items } = this.props
+    const { onSort, onReorderedItems, items, onLayerReorder } = this.props
     const reorderedItems = applyDrag(items.sort(onSort), e)
 
     if (onReorderedItems) {
       onReorderedItems(reorderedItems)
+      onLayerReorder()
     }
   }
 
@@ -70,8 +70,8 @@ class LayerPanelList extends Component {
 
     do {
       if (dropNode.className === 'draggable') {
-        const removedIndex = this.dragTarget.id[0]
-        const addedIndex = this.displaced.id[0]
+        const removedIndex = parseInt(this.dragTarget.id.split('_')[0]) - 1
+        const addedIndex = parseInt(this.displaced.id.split('_')[0]) - 1
         const payload = this.dragTarget
 
         this.handleDrop({ ...e, removedIndex, addedIndex, payload })
@@ -92,7 +92,6 @@ class LayerPanelList extends Component {
         <List>
           <div id='_ol_kit_layer_panel_drag_container' onDragEnd={this.onDragEnd} >
             {React.Children.map(this.props.children, (child, i) => {
-
               const id = `${i}_${nanoid(6)}`
 
               return (
@@ -143,12 +142,16 @@ LayerPanelList.propTypes = {
   items: PropTypes.array,
 
   /** A boolean to disable the drag event on the LayerPanelList */
-  disableDrag: PropTypes.bool
+  disableDrag: PropTypes.bool,
+
+  /** A callback function to inform when the list is reordered */
+  onLayerReorder: PropTypes.func
 }
 
 LayerPanelList.defaultProps = {
   onSort: (a, b) => { return a - b },
-  disableDrag: false
+  disableDrag: false,
+  onLayerReorder: () => {}
 }
 
 export default LayerPanelList

src/Popup/PopupInsert/PopupActionGroup/index.js

@@ -18,8 +18,19 @@ class PopupActionGroup extends Component {
     }
   }
 
-  onHover (hover) {
-    this.setState({ showFlyout: hover })
+  onHover (hover, delay = false) {
+    if (delay) {
+      // allow a slight delay to account for mousing over scroll bars
+      // when moving to flyout on certain browsers/OS
+      this.timeout = setTimeout(() => this.setState({ showFlyout: hover }), 50)
+    } else {
+      if (this.timeout) {
+        // clear the timeout if mouse enters the flyout before timeout fires
+        clearTimeout(this.timeout)
+        this.timeout = null
+      }
+      this.setState({ showFlyout: hover })
+    }
   }
 
   render () {
@@ -31,7 +42,7 @@ class PopupActionGroup extends Component {
     return (
       <div style={{ position: 'relative' }} ref={(element) => { this.el = element }}>
         <Container onMouseEnter={() => this.onHover(true)}
-          onMouseLeave={() => this.onHover(false)}
+          onMouseLeave={() => this.onHover(false, true)}
           hover={this.state.showFlyout}>
           <Title>{title}</Title>
           <ActionIcon>

src/Popup/PopupInsert/PopupActionGroup/styled.js

@@ -36,7 +36,7 @@ export const Flyout = styled.div`
   background-color: white;
   width: 192px;
   font-family: 'ArialMT','Arial';
-  z-index: 2;
+  z-index: 100;
   box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
   left: ${p => p.left}px;
   top: ${p => p.top}px;

src/Popup/PopupInsert/PopupDefaultPage/index.js

@@ -43,7 +43,6 @@ class PopupDefaultPage extends Component {
       currentPage,
       onClose,
       onSettingsClick,
-      showCustomizeDetails,
       subtitle
     } = this.props
 
@@ -98,14 +97,14 @@ class PopupDefaultPage extends Component {
                 {childrenCount > 3
                   ? <Frame title={translations['_ol_kit.PopupDefaultPage.actions']} height={169}>
                     {React.Children.map(children, item =>
-                      React.cloneElement(item, {
+                      item && React.cloneElement(item, {
                         ...item.props, onClose: onClose
                       })
                     )}
                   </Frame>
                   : <div title={translations['_ol_kit.PopupDefaultPage.actions']} style={{ height: '169px', overflowY: 'scroll' }}>
                     {React.Children.map(children, item =>
-                      React.cloneElement(item, {
+                      item && React.cloneElement(item, {
                         ...item.props, onClose: onClose
                       })
                     )}