#403 rightClickMenuActions - Polygons and WKT

config/js/config.js

@@ -225,6 +225,11 @@ function initialize() {
                   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]}",
                 },
+                {
+                  name: "WKT text insertions. Do so only for polygons.",
+                  link: "https://domain?regularWKT={wkt}&wkt_where_commas_are_replaced_with_underscores={wkt_}",
+                  for: "polygon",
+                },
               ],
             },
             null,

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

@@ -50,6 +50,11 @@ Example:
         {
             "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]}"
+        },
+        {
+            "name": "WKT text insertions. Do so only for polygons.",
+            "link": "https://domain?regularWKT={wkt}&wkt_where_commas_are_replaced_with_underscores={wkt_}",
+            "for": "polygon"
         }
     ]
 }

package.json

@@ -49,6 +49,7 @@
     "@eonasdan/tempus-dominus": "^6.2.6",
     "@popperjs/core": "^2.11.6",
     "@svgr/webpack": "4.3.3",
+    "@terraformer/wkt": "^2.2.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",

src/essence/Ancillary/ContextMenu.css

@@ -2,11 +2,11 @@
     position: absolute;
     background: var(--color-a);
     box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
-    border: 1px solid var(--color-i);
     border-radius: 1px;
     font-size: 15px;
     z-index: 1;
     transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
+    overflow-y: auto;
 }
 
 .ContextMenuMap #contextMenuCursor {
@@ -37,12 +37,13 @@
     padding: 0;
 }
 .ContextMenuMap li {
-    padding: 5px 8px 5px 16px;
+    padding: 5px 16px 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);
+    line-height: 18px;
 }
 .ContextMenuMap li:first-child {
     border-top: none;
@@ -54,3 +55,34 @@
     color: white;
     background: var(--color-a1);
 }
+
+.ContextMenuMap .contextMenuHeader {
+}
+.ContextMenuMap .contextMenuHeader span:nth-child(1) {
+    color: var(--color-h);
+    padding-right: 4px;
+    font-size: 12px;
+    line-height: 18px;
+}
+.ContextMenuMap .contextMenuHeader span:nth-child(2) {
+    color: var(--color-a5);
+    padding-right: 4px;
+}
+.ContextMenuMap .contextMenuHeader span:nth-child(3) {
+    color: var(--color-a4);
+    font-size: 12px;
+    line-height: 18px;
+    padding-left: 4px;
+}
+.ContextMenuMap .contextMenuHeader span:nth-child(4) {
+    padding-left: 4px;
+    color: var(--color-a7);
+}
+
+.ContextMenuMap .contextMenuFeatureItem {
+    margin-left: 15px;
+    padding-left: 15px;
+    font-size: 13px;
+    line-height: 15px;
+    border-left: 1px solid var(--color-a1);
+}

src/essence/Ancillary/ContextMenu.js

@@ -5,6 +5,8 @@ import F_ from '../Basics/Formulae_/Formulae_'
 import Map_ from '../Basics/Map_/Map_'
 import Coordinates from './Coordinates'
 
+import { geojsonToWKT } from '@terraformer/wkt'
+
 import './ContextMenu.css'
 
 var ContextMenu = {
@@ -26,20 +28,56 @@ function showContextMenuMap(e) {
         'configData.coordinates.variables.rightClickMenuActions',
         []
     )
+    const contextMenuActionsFull = []
+    e.latlng = e.latlng || Coordinates.getLatLng(true)
+
+    const featuresAtClick = L_.getFeaturesAtPoint(e, true)
+    featuresAtClick.splice(100)
 
     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 class='ContextMenuMap' style='left: ${x}px; top: ${y}px; max-height: ${window.innerHeight - 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'),
+                contextMenuActions.map((a, idx) => {
+                    const items = []
+                    if(a.for == null) {
+                            items.push(`<li id='contextMenuAction_${idx}_0'>${a.name}${a.link != null ? `<div><i class='mdi mdi-open-in-new mdi-18px'></i>` : ''}</li>`)
+                            contextMenuActionsFull.push({contextMenuAction: a, idx: idx, idx2: 0})
+                    }
+                    return items.join('\n')
+                } ).join('\n'),
+                featuresAtClick.map((f, idx2) => {
+                    const items = []
+                    const layerName = f.options.layerName
+                    const displayName = L_.layers.data[layerName].display_name
+                    const pv = L_.getLayersChosenNamePropVal(f.feature, layerName)
+                    const key = Object.keys(pv)[0]
+                    const val = pv[key]
+                    items.push(`<li class='contextMenuHeader' id='contextMenuAction_${'head'}_${idx2}'><span>${f.feature.geometry.type}</span><span>${displayName}</span>-<span>${key}</span>:<span>${val}</span></li>`)
+                    contextMenuActionsFull.push({contextMenuAction: { goto: true }, idx: 'head', idx2: idx2, feature: f})
+                    contextMenuActions.map((a, idx) => {
+                        const forLower = a.for ? a.for.toLowerCase() : null
+                        switch(forLower) {
+                            case "polygon":
+                                    if( f.feature.geometry.type.toLowerCase() === forLower) {
+                                        items.push(`<li class='contextMenuFeatureItem' id='contextMenuAction_${idx}_${idx2}'>${a.name}${a.link != null ? `<div><i class='mdi mdi-open-in-new mdi-18px'></i>` : ''}</li>`)
+                                        contextMenuActionsFull.push({contextMenuAction: a, idx: idx, idx2: idx2, feature: f})
+                                    }
+                                break;
+                            default:
+                        }
+                    } )
+                    return items.join('\n')
+                }).join('\n'),
             "</ul>",
         "</div>"
     ].join('\n');
@@ -58,12 +96,14 @@ function showContextMenuMap(e) {
         }, 2000)
     })
 
-    contextMenuActions.forEach((a, idx) => {
-        $(`#contextMenuAction_${idx}`).on('click', function () {
+    contextMenuActionsFull.forEach((c) => {
+        $(`#contextMenuAction_${c.idx}_${c.idx2}`).on('click', function () {
+            const a = c.contextMenuAction
+            const l = featuresAtClick[c.idx2]
             if (a.link) {
                 let link = a.link
-                const lnglat = Coordinates.getLngLat()
 
+                const lnglat = Coordinates.getLngLat()
                 Object.keys(Coordinates.states).forEach((s) => {
                     if (link.indexOf(`{${s}[`) !== -1) {
                         const converted = Coordinates.convertLngLat(
@@ -87,8 +127,28 @@ function showContextMenuMap(e) {
                         )
                     }
                 })
+
+                let wkt
+                if (link.indexOf(`{wkt}`) !== -1) {
+                    wkt = geojsonToWKT(l.feature.geometry)
+                    link = link.replace(new RegExp(`{wkt}`, 'gi'), wkt)
+                }
+                if (link.indexOf(`{wkt_}`) !== -1) {
+                    wkt = geojsonToWKT(l.feature.geometry)
+                    link = link.replace(
+                        new RegExp(`{wkt_}`, 'gi'),
+                        wkt.replace(/,/g, '_')
+                    )
+                }
                 window.open(link, '_blank').focus()
             }
+            if (a.goto === true) {
+                if (l) {
+                    if (typeof l.getBounds === 'function')
+                        Map_.map.fitBounds(l.getBounds())
+                    else if (l._latlng) Map_.map.panTo(l._latlng)
+                }
+            }
         })
     })
 }

src/essence/Ancillary/Coordinates.js

@@ -328,7 +328,12 @@ const Coordinates = {
     getLngLat: function () {
         return Coordinates.mouseLngLat
     },
-    getLatLng: function () {
+    getLatLng: function (asObject) {
+        if (asObject)
+            return {
+                lat: Coordinates.mouseLngLat[1],
+                lng: Coordinates.mouseLngLat[0],
+            }
         return [Coordinates.mouseLngLat[1], Coordinates.mouseLngLat[0]]
     },
     getAllCoordinates: function () {

src/essence/Basics/Layers_/LayerConstructors.js

@@ -67,10 +67,12 @@ export const constructVectorLayer = (
             if (feature.properties.hasOwnProperty('style')) {
                 let className = layerObj.style.className
                 let layerName = layerObj.style.layerName
+                layerObj.style = Object.assign({}, layerObj.style)
                 layerObj.style = {
-                    ...JSON.parse(JSON.stringify(layerObj.style)),
+                    ...layerObj.style,
                     ...JSON.parse(JSON.stringify(feature.properties.style)),
                 }
+
                 if (className) layerObj.style.className = className
                 if (layerName) layerObj.style.layerName = layerName
             } else {