fix: map context menu positioning and refactoring (#447)

* chore: refactor plugin context menu to use hooks
* chore: refactor context menu
* fix: upgrade to latest maps-gl

package.json

@@ -54,7 +54,7 @@
         "@dhis2/d2-ui-org-unit-dialog": "5.2.10",
         "@dhis2/d2-ui-org-unit-tree": "5.2.10",
         "@dhis2/gis-api": "^34.0.11",
-        "@dhis2/maps-gl": "^1.0.3",
+        "@dhis2/maps-gl": "^1.0.4",
         "@dhis2/ui-core": "^4.1.1",
         "@dhis2/ui-widgets": "^2.0.5",
         "@material-ui/core": "^3.9.3",

src/components/map/BoundaryLayer.js

@@ -100,20 +100,8 @@ export default class BoundaryLayer extends Layer {
         this.setState({ popup: evt });
     }
 
-    onFeatureRightClick(evt) {
-        const { id, layer } = this.props;
-
-        this.props.openContextMenu({
-            ...evt,
-            layerId: id,
-            layerType: layer,
-        });
-    }
-
     removeLayer() {
         this.layer.off('click', this.onFeatureClick, this);
-        this.layer.off('contextmenu', this.onFeatureRightClick, this);
-
         super.removeLayer();
     }
 }

src/components/map/ContextMenu.js

@@ -70,9 +70,11 @@ const ContextMenu = (props, context) => {
     let attr = {};
 
     if (position) {
+        const [x, y] = position;
+
         anchorEl.style.position = 'fixed';
-        anchorEl.style.left = position[0] + 'px';
-        anchorEl.style.top = position[1] + 'px';
+        anchorEl.style.left = `${x}px`;
+        anchorEl.style.top = `${y}px`;
     }
 
     if (feature) {

src/components/map/FacilityLayer.js

@@ -112,16 +112,6 @@ class FacilityLayer extends Layer {
     onFeatureClick(evt) {
         this.setState({ popup: evt });
     }
-
-    onFeatureRightClick(evt) {
-        const { id, layer } = this.props;
-
-        this.props.openContextMenu({
-            ...evt,
-            layerId: id,
-            layerType: layer,
-        });
-    }
 }
 
 export default FacilityLayer;

src/components/map/Layer.js

@@ -12,11 +12,13 @@ class Layer extends PureComponent {
         dataFilters: PropTypes.object,
         id: PropTypes.string.isRequired,
         index: PropTypes.number,
+        layer: PropTypes.string,
         editCounter: PropTypes.number,
         opacity: PropTypes.number,
         isVisible: PropTypes.bool,
         config: PropTypes.object,
         labels: PropTypes.bool,
+        openContextMenu: PropTypes.func,
     };
 
     static defaultProps = {
@@ -138,6 +140,8 @@ class Layer extends PureComponent {
     removeLayer() {
         const map = this.context.map;
 
+        this.layer.off('contextmenu', this.onFeatureRightClick, this);
+
         if (map.hasLayer(this.layer)) {
             map.removeLayer(this.layer);
         }
@@ -149,6 +153,20 @@ class Layer extends PureComponent {
         return null;
     }
 
+    onFeatureRightClick(evt) {
+        const [x, y] = evt.position;
+        const { id, layer } = this.props;
+        const { map } = this.context;
+        const { left, top } = map.getContainer().getBoundingClientRect();
+
+        this.props.openContextMenu({
+            ...evt,
+            position: [left + x, top + y],
+            layerId: id,
+            layerType: layer,
+        });
+    }
+
     // Called when a map popup is closed
     onPopupClose = popup => {
         // Added check to avoid closing a new popup

src/components/map/Map.js

@@ -176,7 +176,13 @@ class Map extends Component {
     }
 
     onRightClick = evt => {
-        this.props.openContextMenu(evt);
+        const [x, y] = evt.position;
+        const { left, top } = this.map.getContainer().getBoundingClientRect();
+
+        this.props.openContextMenu({
+            ...evt,
+            position: [left + x, top + y],
+        });
     };
 
     onMapReady = map => this.setState({ map });

src/components/map/ThematicLayer.js

@@ -153,16 +153,6 @@ class ThematicLayer extends Layer {
     onFeatureClick(evt) {
         this.setState({ popup: evt });
     }
-
-    onFeatureRightClick(evt) {
-        const { id, layer } = this.props;
-
-        this.props.openContextMenu({
-            ...evt,
-            layerId: id,
-            layerType: layer,
-        });
-    }
 }
 
 export default ThematicLayer;

src/components/plugin/ContextMenu.js

@@ -1,43 +1,43 @@
-import React, { Component } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import i18n from '@dhis2/d2-i18n';
 import './ContextMenu.css';
 
-class ContextMenu extends Component {
-    componentDidUpdate() {
-        const { position } = this.props;
+const ContextMenu = props => {
+    const { position, feature, onDrill } = props;
+    const menuEl = useRef();
 
-        if (position) {
-            this.el.style.left = position[0] + 'px';
-            this.el.style.top = position[1] + 'px';
-        }
-    }
-
-    render() {
-        const { position, feature, onDrill } = this.props;
+    useEffect(() => {
+        if (menuEl && position) {
+            const { style } = menuEl.current;
+            const [x, y] = position;
 
-        if (!position || !feature) {
-            return null;
+            style.left = `${x}px`;
+            style.top = `${y}px`;
         }
+    }, [menuEl, position]);
 
-        const { hasCoordinatesUp, hasCoordinatesDown } = feature.properties;
-
-        return (
-            <div className="dhis2-map-context-menu" ref={el => (this.el = el)}>
-                {hasCoordinatesUp && (
-                    <div onClick={() => onDrill('up')}>
-                        {i18n.t('Drill up one level')}
-                    </div>
-                )}
-                {hasCoordinatesDown && (
-                    <div onClick={() => onDrill('down')}>
-                        {i18n.t('Drill down one level')}
-                    </div>
-                )}
-            </div>
-        );
+    if (!position || !feature) {
+        return null;
     }
-}
+
+    const { hasCoordinatesUp, hasCoordinatesDown } = feature.properties;
+
+    return (
+        <div className="dhis2-map-context-menu" ref={menuEl}>
+            {hasCoordinatesUp && (
+                <div onClick={() => onDrill('up')}>
+                    {i18n.t('Drill up one level')}
+                </div>
+            )}
+            {hasCoordinatesDown && (
+                <div onClick={() => onDrill('down')}>
+                    {i18n.t('Drill down one level')}
+                </div>
+            )}
+        </div>
+    );
+};
 
 ContextMenu.propTypes = {
     feature: PropTypes.object,

yarn.lock

@@ -457,10 +457,10 @@
     leaflet.markercluster "^1.4.1"
     whatwg-fetch "^3.0.0"
 
-"@dhis2/maps-gl@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@dhis2/maps-gl/-/maps-gl-1.0.3.tgz#67d6131e0e2bec0e6796dddfadc436745bc8b073"
-  integrity sha512-bw37JJr1uUMHszhBSjhGkpqtZ6g0UOPjvcjWTQdfg8r1g1SeMniX1fv7PAcrkziGOQbt46sg2hvA3DDg5nkf8A==
+"@dhis2/maps-gl@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@dhis2/maps-gl/-/maps-gl-1.0.4.tgz#83cc0d91e1c1cbaa26c61616f0e09842a3c62f36"
+  integrity sha512-4JKH4jMiEJ5v8BOv3iftkLP6CkI5wQaEN7n1K8VlDKTKtMjmjGG6QeofeD7oCpoVUtGfvUiTVEb+n+6bsabYHQ==
   dependencies:
     "@mapbox/sphericalmercator" "^1.1.0"
     "@turf/area" "^6.0.1"