Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#324 Configurable Context Menu Actions #325

Merged
merged 2 commits into from
Feb 4, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions config/css/config.css
Original file line number Diff line number Diff line change
Expand Up @@ -301,6 +301,9 @@ textarea {
margin: 0px 161px 0px 173px;
border-bottom: 2px solid #1565c0 !important;
}
.col > .CodeMirror {
margin: 0px;
}

#missions {
margin: 5px 0px;
Expand Down
42 changes: 42 additions & 0 deletions config/js/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ var missionPath = "";
var tData;
var editors;
var layerEditors;
var tabEditors;
var usingCustomProjection;
var availableKinds = [];

Expand Down Expand Up @@ -132,6 +133,7 @@ function initialize() {

editors = {};
layerEditors = {};
tabEditors = {};

for (var i = 0; i < tData.length; i++) {
// prettier-ignore
Expand Down Expand Up @@ -199,6 +201,34 @@ function initialize() {
}
}

// Setup tabEditors
tabEditors["coordinatesVariables"] = CodeMirror.fromTextArea(
document.getElementById("coordinatesVariables"),
{
path: "js/codemirror/codemirror-5.19.0/",
mode: "javascript",
theme: "elegant",
viewportMargin: Infinity,
lineNumbers: true,
autoRefresh: true,
matchBrackets: true,
}
);
$("#coordinatesVariables_example").html(
JSON.stringify(
{
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]}",
},
],
},
null,
4
) || ""
);

//Make materialize initialize tabs
$("ul.tabs#missions").tabs();

Expand Down Expand Up @@ -242,6 +272,10 @@ function initialize() {
if (data.status == "success") {
var cData = data.config;

for (var e in tabEditors) {
tabEditors[e].setValue("");
}

//overall
$("#overall_mission_name").text(mission);

Expand Down Expand Up @@ -494,6 +528,11 @@ function initialize() {
$(
`.coordinates_coordMain[value="${cData.coordinates?.coordmain}"]`
).prop("checked", true);
tabEditors["coordinatesVariables"].setValue(
cData.coordinates?.variables
? JSON.stringify(cData.coordinates?.variables, null, 4)
: ""
);

//look
$("#tab_look #look_pagename").val("MMGIS");
Expand Down Expand Up @@ -2044,6 +2083,9 @@ function save() {
).val();
json.coordinates["coordmain"] =
$(`.coordinates_coordMain:checked`).val() || "ll";
json.coordinates["variables"] = JSON.parse(
tabEditors["coordinatesVariables"].getValue() || "{}"
);

//Look
json.look["pagename"] = $("#tab_look #look_pagename").val();
Expand Down
27 changes: 27 additions & 0 deletions docs/pages/Configure/Tabs/Coordinates/Coordinates_Tab.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
14 changes: 12 additions & 2 deletions src/essence/Ancillary/ContextMenu.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
}
64 changes: 54 additions & 10 deletions src/essence/Ancillary/ContextMenu.js
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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)

Expand All @@ -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) {
Expand Down
4 changes: 3 additions & 1 deletion src/essence/Ancillary/Coordinates.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down
8 changes: 6 additions & 2 deletions src/essence/Basics/Globe_/Globe_.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]}`
)
}
Expand Down
20 changes: 20 additions & 0 deletions views/configure.pug
Original file line number Diff line number Diff line change
Expand Up @@ -325,6 +325,15 @@ script(type='text/javascript' src='config/pre/RefreshAuth.js')
#coordinates_coordelevurlEl.input-field.col.s7.push-s1
input#coordinates_coordelevurl.validate(type='text' value='')
label(for='coordinates_coordelevurl') DEM URL
li.row.title(style='margin-top: 45px;')
.col.s2.push-s1 Raw Variables
.col.s6.push-s3(style='text-align: center; background-color: rgba(0,0,0,0.06); position: relative; padding: 0;')
a.waves-effect.waves-light.modal-trigger(href='#coordinatesVariables_modal' style='color: #111; width: 100%;') Click for configuration documentation
i.mdi.mdi-information.mdi-18px(style='position: absolute; right: 2px; top: -2px; color: #444;')

li.row(style='padding-bottom: 0px;')
#coordinates_variablseEl.input-field.col.s10.push-s1
textarea#coordinatesVariables

#tab_look.col.s12
a.helpFromDocs(href='docs/?page=Look_Tab' target='__blank' rel='noopener')
Expand Down Expand Up @@ -521,6 +530,17 @@ script(type='text/javascript' src='config/pre/RefreshAuth.js')
a#delete_mission_delete.modal-action.modal-close.btn-flat.waves-effect.waves-light.col.s12(style='border-radius: 0px; color: white;')
| Delete Mission
i.mdi.mdi-delete.mdi-24px(style='float: right; margin-top: 1px; padding-left: 5px;')
#coordinatesVariables_modal.modal
.modal-content(style='padding-bottom: 0;')
h4 Coordinates Raw Variables
#coordinatesVariables_info(style='margin-bottom: 0;')
#coordinatesVariables_title
hr
#coordinatesVariables_content
pre#coordinatesVariables_example
.modal-footer
a.modal-action.modal-close.waves-effect.waves-green.btn-flat(href='#!') Done
.row
#info_modal.modal
.modal-content(style='padding-bottom: 0;')
h4 Modal Header
Expand Down