Merge pull request #2 from eea/develop

Patch #1

CHANGELOG.md

@@ -4,10 +4,18 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.1.2](https://github.com/eea/volto-openlayers-map/compare/0.1.1...0.1.2)
+
+- Use ol#6.6.x version as there is a bug with the latest version [`8eab985`](https://github.com/eea/volto-openlayers-map/commit/8eab98575f93abf1f6e0e49855fd5737e0ca3b36)
+- Added Control; Improved performance [`41e3536`](https://github.com/eea/volto-openlayers-map/commit/41e35369aa97e55f17f8b60d23317671a85ca7dc)
+- Add Sonarqube tag using frontend addons list [`4bb1161`](https://github.com/eea/volto-openlayers-map/commit/4bb11615774d80b22f00a981380dbe02c1cf1c79)
+
 #### [0.1.1](https://github.com/eea/volto-openlayers-map/compare/0.1.0...0.1.1)
 
+> 31 May 2021
+
+- Cypress coverage [`#1`](https://github.com/eea/volto-openlayers-map/pull/1)
 - fix json [`2e0ae9d`](https://github.com/eea/volto-openlayers-map/commit/2e0ae9dc87d97d0cb5904dd8f8c51e153f0e29a2)
-- Cypress coverage [`0880a50`](https://github.com/eea/volto-openlayers-map/commit/0880a50d6803a38d4ca9687f7eec78455660cac1)
 
 #### 0.1.0
 

Jenkinsfile

@@ -4,7 +4,7 @@ pipeline {
   environment {
         GIT_NAME = "volto-openlayers-map"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu"
         DEPENDENCIES = ""
     }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-openlayers-map",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "@eeacms/volto-openlayers-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -17,7 +17,7 @@
     "url": "git@github.com:eea/volto-openlayers-map.git"
   },
   "dependencies": {
-    "ol": "^6.5.0"
+    "ol": "6.6.x"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

src/Controls/Control.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import cs from 'classnames';
+import { openlayers } from '..';
+import { getOptions } from '../helpers';
+import { withMapContext } from '../hocs';
+
+class Control extends React.Component {
+  control = undefined;
+
+  options = {
+    element: undefined,
+    render: undefined,
+    target: undefined,
+  };
+
+  constructor(props) {
+    super(props);
+    this.options = getOptions(Object.assign(this.options, this.props));
+    this.addControl = this.addControl.bind(this);
+    this.removeControl = this.removeControl.bind(this);
+    this.element = React.createRef();
+  }
+
+  addControl() {
+    const { map } = this.props;
+    if (!map) return;
+    let options = {
+      ...getOptions(Object.assign(this.options, this.props)),
+      element: this.element.current,
+    };
+    this.control = new openlayers.control.Control(options);
+    map.addControl(this.control);
+  }
+
+  removeControl() {
+    const { map } = this.props;
+    if (!map) return;
+    map.removeControl(this.control);
+  }
+
+  componentDidMount() {
+    this.addControl();
+  }
+
+  componentDidUpdate(prevProps) {
+    const { map } = this.props;
+    if (map && !prevProps.map) {
+      this.addControl();
+    } else if (map !== prevProps.map) {
+      this.removeControl();
+      this.addControl();
+    }
+  }
+
+  render() {
+    return (
+      <div
+        id={this.props.id}
+        className={cs('ol-control', this.props.className)}
+        style={{
+          top: this.props.top || '0.5rem',
+          left: this.props.left || '0.5rem',
+        }}
+        ref={this.element}
+      >
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default withMapContext(Control);

src/Controls/Controls.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { getOptions } from '../helpers';
 
 /**
  * Implementation of ol/control https://openlayers.org/en/latest/apidoc/module-ol_control.html
@@ -9,24 +8,9 @@ import { getOptions } from '../helpers';
  *   <Controls zoom={false} />
  * </Map>
  */
-class Controls extends React.Component {
-  options = {
-    attribution: undefined,
-    attributionOptions: undefined,
-    rotate: undefined,
-    rotateOptions: undefined,
-    zoom: undefined,
-    zoomOptions: undefined,
-  };
 
-  constructor(props) {
-    super(props);
-    this.options = getOptions(Object.assign(this.options, this.props));
-  }
-
-  render() {
-    return <div>{this.props.children}</div>;
-  }
-}
+const Controls = (props) => {
+  return <>{props.children}</>;
+};
 
 export default Controls;

src/Controls/index.js

@@ -1,3 +1,4 @@
 import Controls from './Controls';
+import Control from './Control';
 
-export { Controls };
+export { Controls, Control };

src/Interactions/Interactions.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { getOptions } from '../helpers';
 
 /**
  * Implementation of ol/interaction https://openlayers.org/en/latest/apidoc/module-ol_interaction.html
@@ -9,29 +8,9 @@ import { getOptions } from '../helpers';
  *   <Interactions mouseWheelZoom={false} />
  * </Map>
  */
-class Interactions extends React.Component {
-  options = {
-    altShiftDragRotate: undefined,
-    onFocusOnly: undefined,
-    doubleClickZoom: undefined,
-    keyboard: undefined,
-    mouseWheelZoom: undefined,
-    shiftDragZoom: undefined,
-    dragPan: undefined,
-    pinchRotate: undefined,
-    pinchZoom: undefined,
-    zoomDelta: undefined,
-    zoomDuration: undefined,
-  };
 
-  constructor(props) {
-    super(props);
-    this.options = getOptions(Object.assign(this.options, this.props));
-  }
-
-  render() {
-    return <div>{this.props.children}</div>;
-  }
-}
+const Interactions = (props) => {
+  return <>{props.children}</>;
+};
 
 export default Interactions;

src/Layers/Heatmap.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { MapContext } from '../Map';
-import { openlayers } from '../index';
+import { openlayers } from '..';
 import { getOptions, getEvents } from '../helpers';
+import { withMapContext } from '../hocs';
 
 const { layer } = openlayers;
 
@@ -46,51 +46,50 @@ class Heatmap extends React.Component {
 
   constructor(props) {
     super(props);
+    this.options = getOptions(Object.assign(this.options, this.props));
     this.addLayer = this.addLayer.bind(this);
     this.removeLayer = this.removeLayer.bind(this);
   }
 
-  addLayer(map) {
+  addLayer() {
+    const { map } = this.props;
     if (!map) return;
-    let options = getOptions(Object.assign(this.options, this.props));
     let events = getEvents(this.events, this.props);
-    this.layer = new layer.HeatmapLayer(options);
+    this.layer = new layer.HeatmapLayer(this.options);
     map.addLayer(this.layer);
 
     for (let event in events) {
       this.layer.on(event, events[event]);
     }
   }
 
-  removeLayer(map) {
+  removeLayer() {
+    const { map } = this.props;
     if (!map) return;
     map.removeLayer(this.layer);
   }
 
   componentDidMount() {
-    this.addLayer(this.context.map);
+    this.addLayer();
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
-    const map = this.context.map || nextContext.map;
-    if (
-      // !isEqual(nextProps, this.props) ||
-      nextContext.map !== this.context.map
-    ) {
-      this.removeLayer(map);
-      this.addLayer(map);
+  componentDidUpdate(prevProps) {
+    const { map } = this.props;
+    if (map && !prevProps.map) {
+      this.addLayer();
+    } else if (map !== prevProps.map) {
+      this.removeLayer();
+      this.addLayer();
     }
   }
 
   componentWillUnmount() {
-    this.removeLayer(this.context.map);
+    this.removeLayer();
   }
 
   render() {
     return null;
   }
 }
 
-Heatmap.contextType = MapContext;
-
-export default Heatmap;
+export default withMapContext(Heatmap);

src/Layers/Tile.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { MapContext } from '../Map';
-import { openlayers } from '../index';
+import { openlayers } from '..';
 import { getOptions, getEvents } from '../helpers';
+import { withMapContext } from '../hocs';
 
 const { layer, source } = openlayers;
 
@@ -44,52 +44,51 @@ class Tile extends React.Component {
 
   constructor(props) {
     super(props);
+    this.options = getOptions(Object.assign(this.options, this.props));
     this.addLayer = this.addLayer.bind(this);
     this.removeLayer = this.removeLayer.bind(this);
   }
 
-  addLayer(map, props) {
+  addLayer() {
+    const { map } = this.props;
     if (!map) return;
-    let options = getOptions(Object.assign(this.options, props));
-    let events = getEvents(this.events, props);
-    options.source = options.source || new source.OSM();
-    this.layer = new layer.Tile(options);
+    let events = getEvents(this.events, this.props);
+    this.options.source = this.options.source || new source.OSM();
+    this.layer = new layer.Tile(this.options);
     map.addLayer(this.layer);
 
     for (let event in events) {
       this.layer.on(event, events[event]);
     }
   }
 
-  removeLayer(map) {
+  removeLayer() {
+    const { map } = this.props;
     if (!map) return;
     map.removeLayer(this.layer);
   }
 
   componentDidMount() {
-    this.addLayer(this.context.map);
+    this.addLayer();
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
-    const map = this.context.map || nextContext.map;
-    if (
-      // !isEqual(nextProps.props, this.props.props) ||
-      nextContext.map !== this.context.map
-    ) {
-      this.removeLayer(map);
-      this.addLayer(map, nextProps);
+  componentDidUpdate(prevProps) {
+    const { map } = this.props;
+    if (map && !prevProps.map) {
+      this.addLayer();
+    } else if (map !== prevProps.map) {
+      this.removeLayer();
+      this.addLayer();
     }
   }
 
   componentWillUnmount() {
-    this.removeLayer(this.context.map);
+    this.removeLayer();
   }
 
   render() {
     return null;
   }
 }
 
-Tile.contextType = MapContext;
-
-export default Tile;
+export default withMapContext(Tile);