Skip to content

Commit

Permalink
#429 Hotkeys (#430)
Browse files Browse the repository at this point in the history 
* #239 Hotkeys 1

* #429 DrawTool toggle last file hotkey
  • Loading branch information
@tariqksoliman
tariqksoliman authored Oct 3, 2023
1 parent ba2d8bc commit 440ea15
Show file tree
Hide file tree
Showing 11 changed files with 317 additions and 5 deletions.
1 change: 1 addition & 0 deletions config/js/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2773,6 +2773,7 @@ function layerPopulateVariable(modalId, layerType) {
value: "Example",
},
];
currentLayerVars.shortcutSuffix = null;

if (layerType == "data") {
currentLayerVars = currentLayerVars.shader
Expand Down
2 changes: 2 additions & 0 deletions docs/pages/Configure/Layers/Vector/Vector.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ Example:
```javascript
{
"useKeyAsName": "propKey || [propKey1, propKey2, ...]",
"shortcutSuffix": "single letter to 'ATL + {letter}' toggle the layer on and off",
"hideMainFeature": false,
"datasetLinks": [
{
Expand Down Expand Up @@ -252,6 +253,7 @@ Example:
```

- `useKeyAsName`: The property key whose value should be the hover text of each feature. If left unset, the hover key and value will be the first one listed in the feature's properties. This may also be an array of keys.
- `shortcutSuffix`: A single letter to 'ATL + {letter}' toggle the layer on and off.
- `hideMainFeature`: If true, hides all typically rendered features. This is useful if showing only `*Attachments` sublayers is desired. Default false
- `datasetLinks`: Datasets are csvs uploaded from the "Manage Datasets" page accessible on the lower left. Every time a feature from this layer is clicked with datasetLinks configured, it will request the data from the server and include it with it's regular geojson properties. This is especially useful when single features need a lot of metadata to perform a task as it loads it only as needed.
- `prop`: This is a property key already within the features properties. It's value will be searched for in the specified dataset column.
Expand Down
15 changes: 13 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@
"geojson-validation": "^1.0.2",
"hammerjs": "^2.0.8",
"helmet": "^4.1.1",
"hotkeys-js": "^3.12.0",
"html-webpack-plugin": "4.0.0-beta.11",
"html2canvas": "^1.4.1",
"html2pug": "^4.0.0",
Expand Down
79 changes: 79 additions & 0 deletions src/essence/Basics/UserInterface_/BottomBar.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,62 @@
#mainHotkeysModal {
background: var(--color-k);
max-width: 90vw;
margin: 40px;
border-radius: 3px;
}
#mainHotkeysModalTitle {
padding: 0px 0px 0px 10px;
height: 40px;
line-height: 39px;
font-size: 18px;
background: var(--color-i);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
display: flex;
justify-content: space-between;
}
#mainHotkeysModalTitle > div:first-child {
display: flex;
}
#mainHotkeysModalTitle > div:first-child > div {
margin-left: 6px;
line-height: 40px;
}
#mainHotkeysModalClose {
width: 40px;
height: 40px;
text-align: center;
}
#mainHotkeysModalContent {
padding: 10px 20px;
display: flex;
}
.mainHotkeysModalSection:not(:last-child) {
padding-right: 10px;
margin-right: 10px;
border-right: 1px solid var(--color-a2);
}
.mainHotkeysModalSectionOptions > li {
display: flex;
justify-content: space-between;
padding: 2px 0px;
font-size: 14px;
white-space: nowrap;
}
.mainHotkeysModalSectionOptions > li > div:first-child {
color: var(--color-a5);
}
.mainHotkeysModalSectionOptions > li > div:last-child {
color: var(--color-a6);
margin-left: 20px;
font-size: 13px;
}
.mainHotkeysModalSectionSubtitle {
color: var(--color-yellow);
font-size: 12px !important;
text-transform: uppercase;
}

#mainSettingsModal {
background: var(--color-k);
width: 400px;
Expand Down Expand Up @@ -66,3 +125,23 @@
color: #999;
cursor: help;
}

#hotkeyIndicator {
position: absolute;
top: 48px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
#hotkeyIndicator > div:not(:last-child) {
margin-right: 4px;
}
#hotkeyIndicator > div {
padding: 2px 6px;
border-radius: 3px;
text-transform: uppercase;
background: var(--color-r7);
font-size: 14px;
color: var(--color-a-5);
box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.35);
}
163 changes: 162 additions & 1 deletion src/essence/Basics/UserInterface_/BottomBar.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import $ from 'jquery'
import * as d3 from 'd3'
import hotkeys from 'hotkeys-js'

import F_ from '../Formulae_/Formulae_'
import L_ from '../Layers_/Layers_'
Expand Down Expand Up @@ -222,6 +223,28 @@ let BottomBar = {
theme: 'blue',
})

// Hotkeys
bottomBar
.append('i')
.attr('id', 'bottomBarHotkeys')
.attr('tabindex', 104)
.attr('class', 'mmgisHoverBlue mdi mdi-keyboard mdi-18px')
.style('padding', '5px 10px')
.style('width', '40px')
.style('height', '36px')
.style('line-height', '26px')
.style('cursor', 'pointer')
.on('click', function () {
const that = $('#bottomBarHotkeys')
const wasOn = that.hasClass('active')
BottomBar.toggleHotkeys(!wasOn)
})
tippy(`#bottomBarHotkeys`, {
content: `Hotkeys`,
placement: 'right',
theme: 'blue',
})

// Settings
bottomBar
.append('i')
Expand Down Expand Up @@ -251,7 +274,10 @@ let BottomBar = {
.attr('id', 'topBarInfo')
.attr('title', 'Info')
.attr('tabindex', 105)
.attr('class', 'mmgisHoverBlue mdi mdi-information-outline mdi-18px')
.attr(
'class',
'mmgisHoverBlue mdi mdi-information-outline mdi-18px'
)
.style('padding', '5px 10px')
.style('width', '40px')
.style('height', '36px')
Expand Down Expand Up @@ -299,6 +325,138 @@ let BottomBar = {
theme: 'blue',
})
},
toggleHotkeys: function (on) {
if (on) {
// Layer toggles
let layerToggles = []
Object.keys(L_.layers.data).forEach((layerId, i) => {
const l = L_.layers.data[layerId]
if (l.variables?.shortcutSuffix != null)
layerToggles.push(
[
`<li>`,
`<div>${l.display_name}</div>`,
`<div>ALT + ${l.variables.shortcutSuffix.toUpperCase()}</div>`,
`</li>`,
].join('\n')
)
})

// prettier-ignore
const modalContent = [
`<div id='mainHotkeysModal'>`,
`<div id='mainHotkeysModalTitle'>`,
`<div><i class='mdi mdi-keyboard mdi-18px'></i><div>Hotkeys</div></div>`,
`<div id='mainHotkeysModalClose'><i class='mmgisHoverBlue mdi mdi-close mdi-18px'></i></div>`,
`</div>`,
`<div id='mainHotkeysModalContent'>`,
layerToggles.length > 0 ? [
`<div class='mainHotkeysModalSection'>`,
`<div class='mainHotkeysModalSectionTitle'>Layers</div>`,
`<ul class='mainHotkeysModalSectionOptions'>`,
`<li class='mainHotkeysModalSectionSubtitle'>Toggle</li>`,
layerToggles.join('\n'),
`</ul>`,
`</div>`
].join('\n') : '',
`<div class='mainHotkeysModalSection'>`,
`<div class='mainHotkeysModalSectionTitle'>Draw</div>`,
`<ul class='mainHotkeysModalSectionOptions'>`,
`<li class='mainHotkeysModalSectionSubtitle'>Toggle</li>`,
`<li>`,
`<div>Last File</div>`,
`<div>ALT + 1</div>`,
`</li>`,
`<li class='mainHotkeysModalSectionSubtitle'>Shapes Tab</li>`,
`<li>`,
`<div>Next Feature</div>`,
`<div>Arrow-Right</div>`,
`</li>`,
`<li>`,
`<div>Previous Feature</div>`,
`<div>Arrow-Left</div>`,
`</li>`,
`<li>`,
`<div>Add to Group</div>`,
`<div>CTRL + Click</div>`,
`</li>`,
`<li>`,
`<div>Group Range Select</div>`,
`<div>SHIFT + Click</div>`,
`</li>`,
`</ul>`,
`</div>`,
`<div class='mainHotkeysModalSection'>`,
`<div class='mainHotkeysModalSectionTitle'>Map</div>`,
`<ul class='mainHotkeysModalSectionOptions'>`,
`<li>`,
`<div>Zoom out</div>`,
`<div>-</div>`,
`</li>`,
`<li>`,
`<div>Zoom In</div>`,
`<div>+</div>`,
`</li>`,
`<li>`,
`<div>Zoom to Area</div>`,
`<div>SHIFT + Click-and-Drag</div>`,
`</li>`,
`</ul>`,
`</div>`,
`<div class='mainHotkeysModalSection'>`,
`<div class='mainHotkeysModalSectionTitle'>3D Globe</div>`,
`<ul class='mainHotkeysModalSectionOptions'>`,
`<li>`,
`<div>Pan Up</div>`,
`<div>Arrow-Up</div>`,
`</li>`,
`<li>`,
`<div>Pan Right</div>`,
`<div>Arrow-Right</div>`,
`</li>`,
`<li>`,
`<div>Pan Down</div>`,
`<div>Arrow-Down</div>`,
`</li>`,
`<li>`,
`<div>Pan Left</div>`,
`<div>Arrow-Left</div>`,
`</li>`,
`</ul>`,
`</div>`,
`</div>`,
`</div>`
].join('\n')

Modal.set(
modalContent,
function () {
$('#mainHotkeysModalClose').on('click', function () {
Modal.remove()
})
},
function () {}
)
} else {
}
},
attachHotkeys: function () {
Object.keys(L_.layers.data).forEach((layerId, i) => {
const l = L_.layers.data[layerId]
if (l.variables?.shortcutSuffix != null) {
hotkeys(
`alt+${l.variables.shortcutSuffix
.toLowerCase()
.split('+')}`,
{ keyUp: true, keyDown: false },
(e, handler) => {
if (e.repeat) return
window.mmgisAPI.toggleLayer(l.name)
}
)
}
})
},
toggleSettings: function (on) {
if (on) {
BottomBar.settings.visibility = BottomBar.settings.visibility || {
Expand Down Expand Up @@ -525,6 +683,9 @@ let BottomBar = {
}
}
},
fina: function () {
BottomBar.attachHotkeys()
},
}

export default BottomBar
1 change: 1 addition & 0 deletions src/essence/Basics/UserInterface_/UserInterface_.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1060,6 +1060,7 @@ var UserInterface = {
if (l_.configData.look && l_.configData.look.miscellaneous === false)
BottomBar.changeUIVisibility('miscellaneous', false)

BottomBar.fina()
UserInterface.show()
},
updateLayerUpdateButton: function (type) {
Expand Down
Loading

0 comments on commit 440ea15

Please sign in to comment.