#324 Configurable context menu actions

config/js/config.js

@@ -220,7 +220,7 @@ function initialize() {
               rightClickMenuActions: [
                 {
                   name: "The text for this menu entry when users right-click",
-                  link: "https://www.domain.com?I={ll[0]}&will={ll[1]}&replace={ll[2]}&these={en[0]}&brackets={en[1]}&for={cproj[0]}&you={sproj[0]}&with={rxy[0]}&coordinates={site[2]}",
+                  link: "https://domain?I={ll[0]}&will={ll[1]}&replace={ll[2]}&these={en[0]}&brackets={en[1]}&for={cproj[0]}&you={sproj[0]}&with={rxy[0]}&coordinates={site[2]}",
                 },
               ],
             },

docs/pages/Configure/Tabs/Coordinates/Coordinates_Tab.md

@@ -37,3 +37,30 @@ Check to display Y, X, -Z coordinates to users relative to point features they h
 #### With Elevation
 
 Check to query for and append elevation values to the lower-right coordinates as users mouse around. DEM URL must be set.
+
+#### Raw Variables
+
+All raw variables are optional.
+
+Example:
+
+```javascript
+{
+    "rightClickMenuActions": [
+        {
+            "name": "The text for this menu entry when users right-click",
+            "link": "https://domain?I={ll[0]}&will={ll[1]}&replace={ll[2]}&these={en[0]}&brackets={en[1]}&for={cproj[0]}&you={sproj[0]}&with={rxy[0]}&coordinates={site[2]}"
+        }
+    ]
+}
+```
+
+- `rightClickMenuActions`: When right-clicking on the Map or Globe, a custom context-menu appears. By default it only offers "Copy Coordinates". By adding objects to the `rightClickMenuActions` array, entries can be added to the context-menu to send users to links with parameters populated with the current coordinates.
+  - `name`: The button text for this action in the right-click context-menu.
+  - `link`: A url template. Curly brackets are included. The available coordinate parameters (with array index in brackets and assuming they are enabled) are:
+    - `ll`: `[longitude, latitude, elevation]` - Longitude Latitude
+    - `en`: `[easting, northing, elevation]` - Easting Northing
+    - `cproj`: `[easting, northing, elevation]` - Projected
+    - `sproj`: `[easting, northing, elevation]` - Secondary Projected
+    - `rxy`: `[x, y, z]` - Relative
+    - `site`: `[y, x, -z]` - Local Level

src/essence/Ancillary/ContextMenu.css

@@ -3,7 +3,8 @@
     background: var(--color-a);
     box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
     border: 1px solid var(--color-i);
-    border-radius: 3px;
+    border-radius: 1px;
+    font-size: 15px;
     z-index: 1;
     transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
 }
@@ -36,11 +37,20 @@
     padding: 0;
 }
 .ContextMenuMap li {
-    padding: 4px 16px;
+    padding: 5px 8px 5px 16px;
     cursor: pointer;
     color: #aaa;
+    border-top: 1px solid var(--color-a1);
+    display: flex;
     transition: color 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
 }
+.ContextMenuMap li:first-child {
+    border-top: none;
+}
+.ContextMenuMap li i {
+    padding: 0px 6px;
+}
 .ContextMenuMap li:hover {
     color: white;
+    background: var(--color-a1);
 }

src/essence/Ancillary/ContextMenu.js

@@ -1,5 +1,6 @@
 import $ from 'jquery'
 import * as d3 from 'd3'
+import L_ from '../Basics/Layers_/Layers_'
 import F_ from '../Basics/Formulae_/Formulae_'
 import Map_ from '../Basics/Map_/Map_'
 import Coordinates from './Coordinates'
@@ -10,29 +11,38 @@ var ContextMenu = {
     init: function () {
         this.remove()
         Map_.map.on('contextmenu', showContextMenuMap)
+        $('#_lithosphere_scene').on('contextmenu', showContextMenuMap)
     },
     remove: function () {
         hideContextMenuMap()
         Map_.map.off('contextmenu', showContextMenuMap)
+        $('#_lithosphere_scene').off('contextmenu', showContextMenuMap)
     },
 }
 
 function showContextMenuMap(e) {
+    const contextMenuActions = F_.getIn(
+        L_,
+        'configData.coordinates.variables.rightClickMenuActions',
+        []
+    )
+
     hideContextMenuMap(true)
     var x = e.originalEvent.clientX
     var y = e.originalEvent.clientY
     // prettier-ignore
     var markup = [
-            "<div class='ContextMenuMap' style='left: " + x + "px; top: " + y + "px;'>",
-                "<div id='contextMenuCursor'>",
-                    "<div></div>",
-                    "<div></div>",
-                "</div>",
-                "<ul>",
-                    "<li id='contextMenuMapCopyCoords'>Copy Coordinates</div>",
-                "</ul>",
-            "</div>"
-        ].join('\n');
+        "<div class='ContextMenuMap' style='left: " + x + "px; top: " + y + "px;'>",
+            "<div id='contextMenuCursor'>",
+                "<div></div>",
+                "<div></div>",
+            "</div>",
+            "<ul>",
+                "<li id='contextMenuMapCopyCoords'>Copy Coordinates</li>",
+                contextMenuActions.map((a, idx) => `<li id='contextMenuAction_${idx}'>${a.name}${a.link != null ? `<div><i class='mdi mdi-open-in-new mdi-18px'></i>` : ''}</li>` ).join('\n'),
+            "</ul>",
+        "</div>"
+    ].join('\n');
 
     $('body').append(markup)
 
@@ -47,6 +57,40 @@ function showContextMenuMap(e) {
             $('#contextMenuMapCopyCoords').text('Copy Coordinates')
         }, 2000)
     })
+
+    contextMenuActions.forEach((a, idx) => {
+        $(`#contextMenuAction_${idx}`).on('click', function () {
+            if (a.link) {
+                let link = a.link
+                const lnglat = Coordinates.getLngLat()
+
+                Object.keys(Coordinates.states).forEach((s) => {
+                    if (link.indexOf(`{${s}[`) !== -1) {
+                        const converted = Coordinates.convertLngLat(
+                            lnglat[0],
+                            lnglat[1],
+                            s,
+                            false,
+                            true
+                        )
+                        link = link.replace(
+                            new RegExp(`{${s}\\[0\\]}`, 'gi'),
+                            converted[0]
+                        )
+                        link = link.replace(
+                            new RegExp(`{${s}\\[1\\]}`, 'gi'),
+                            converted[1]
+                        )
+                        link = link.replace(
+                            new RegExp(`{${s}\\[2\\]}`, 'gi'),
+                            converted[2]
+                        )
+                    }
+                })
+                window.open(link, '_blank').focus()
+            }
+        })
+    })
 }
 
 function hideContextMenuMap(immediately) {

src/essence/Ancillary/Coordinates.js

@@ -319,7 +319,9 @@ const Coordinates = {
     },
     getAllCoordinates: function () {
         return {
-            description: d3.select('#mouseDesc').html(),
+            description: d3
+                .select('#changeCoordTypeDropdown .dropy__title > span')
+                .html(),
             coordinates: [
                 ...d3.select('#mouseLngLat').html().split(','),
                 d3.select('#mouseElev').html(),

src/essence/Basics/Globe_/Globe_.js

@@ -128,15 +128,19 @@ let Globe_ = {
                 hideElement: true,
                 onChange: (lng, lat, elev) => {
                     if (lng == null || lat == null) {
-                        $('#mouseLngLat').text(`Outer Space`)
+                        L_.Coordinates.setCoords(
+                            [null, null, null],
+                            'Outer Space'
+                        )
                     } else {
                         const converted = L_.Coordinates.convertLngLat(
                             lng,
                             lat,
                             L_.Coordinates.currentType,
                             true
                         )
-                        $('#mouseLngLat').text(
+                        L_.Coordinates.setCoords(
+                            [lng, lat, elev],
                             `${converted[0]}, ${converted[1]}`
                         )
                     }