Skip to content

Commit

Permalink
#578 Current Extent, Pan to and touchups
Browse files Browse the repository at this point in the history
  • Loading branch information
@tariqksoliman
tariqksoliman committed Aug 7, 2024
1 parent 79ea5f7 commit 11dd256
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 53 deletions.
3 changes: 2 additions & 1 deletion src/essence/Ancillary/Description.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,10 @@
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
width: 200px;
border-top: 1px solid var(--color-a1);
transition: left 0.2s ease-out;
}
#mainDescNavPopoverTitle {
background: var(--color-a-5);
background: var(--color-a2);
text-align: center;
padding: 4px 0px;
font-size: 14px;
Expand Down
156 changes: 106 additions & 50 deletions src/essence/Ancillary/Description.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import * as d3 from 'd3'
import F_ from '../Basics/Formulae_/Formulae_'
import Dropy from '../../external/Dropy/dropy'
import flat from 'flat'
import { booleanIntersects } from '@turf/turf'
import calls from '../../pre/calls'

import tippy from 'tippy.js'
Expand Down Expand Up @@ -106,6 +107,8 @@ const Description = {
.attr('id', 'mainDescNavPopover_global')
.html(navPopoverMarkup)

document.addEventListener('toolChange', Description.alignNavPopover)

$(`#mainDescNavBarMenu`).on('click', () => {
const pop = $(`#mainDescNavPopover`)
const willOpen = pop.css('display') === 'none'
Expand All @@ -116,15 +119,7 @@ const Description = {
background: willOpen ? 'var(--color-c)' : 'var(--color-a)',
})
if (willOpen) {
const bcr = $(`#mainDescNavBarMenu`)
.get(0)
.getBoundingClientRect()
pop.css({
position: 'fixed',
left: bcr.left,
right: bcr.right,
top: bcr.top + 30,
})
Description.alignNavPopover()

// Populate Fields dropdown
const geojson = L_.layers.layer[
Expand Down Expand Up @@ -161,38 +156,44 @@ const Description = {
}
})

$(`#mainDescNavBarPrevious`).on('click', () => {
if (L_.activeFeature) {
L_.selectFeature(
L_.activeFeature.layerName,
L_.activeFeature.feature,
Description.navPopoverField === NAV_DEFAULT_FIELD
? -1
: Description.getFeatureDistance(
L_.activeFeature,
Description.navPopoverField,
'previous'
)
)
Description.onNextPrev()
$(`#mainDescNavBarPrevious, #mainDescNavPopoverBottomPrevious`).on(
'click',
() => {
if (L_.activeFeature) {
L_.selectFeature(
L_.activeFeature.layerName,
L_.activeFeature.feature,
Description.navPopoverField === NAV_DEFAULT_FIELD
? -1
: Description.getFeatureDistance(
L_.activeFeature,
Description.navPopoverField,
'previous'
)
)
Description.onNextPrev()
}
}
})
$(`#mainDescNavBarNext`).on('click', () => {
if (L_.activeFeature) {
L_.selectFeature(
L_.activeFeature.layerName,
L_.activeFeature.feature,
Description.navPopoverField === NAV_DEFAULT_FIELD
? 1
: Description.getFeatureDistance(
L_.activeFeature,
Description.navPopoverField,
'next'
)
)
Description.onNextPrev()
)
$(`#mainDescNavBarNext, #mainDescNavPopoverBottomNext`).on(
'click',
() => {
if (L_.activeFeature) {
L_.selectFeature(
L_.activeFeature.layerName,
L_.activeFeature.feature,
Description.navPopoverField === NAV_DEFAULT_FIELD
? 1
: Description.getFeatureDistance(
L_.activeFeature,
Description.navPopoverField,
'next'
)
)
Description.onNextPrev()
}
}
})
)

this.descPoint = this.descCont.append('p').attr('id', 'mainDescPoint')

Expand Down Expand Up @@ -221,10 +222,7 @@ const Description = {
.style('overflow', 'hidden')

Description.descPointInner.on('click', function () {
if (typeof Map_.activeLayer.getBounds === 'function')
Map_.map.fitBounds(Map_.activeLayer.getBounds())
else if (Map_.activeLayer._latlng)
Map_.map.panTo(Map_.activeLayer._latlng)
Description.panToActive()
})

this.inited = true
Expand All @@ -235,13 +233,40 @@ const Description = {
$(`#mainDescPointLinks_global`).empty()
})
},
panToActive() {
if (typeof Description.Map_.activeLayer.getBounds === 'function')
Description.Map_.map.fitBounds(
Description.Map_.activeLayer.getBounds()
)
else if (Description.Map_.activeLayer._latlng)
Description.Map_.map.panTo(Description.Map_.activeLayer._latlng)
},
onNextPrev() {
$('#mainDescNavPopoverFieldValue').text(
F_.getIn(
Description.L_.activeFeature.feature.properties,
Description.navPopoverField
)
)

if ($('#mainDescNavPopoverPanTo input').is(':checked')) {
Description.panToActive()
}
},
alignNavPopover(e) {
if (e == null) {
const bcr = $(`#mainDescNavBarMenu`).get(0).getBoundingClientRect()
$(`#mainDescNavPopover`).css({
position: 'fixed',
left: bcr.left,
right: bcr.right,
top: bcr.top + 30,
})
} else {
setTimeout(() => {
Description.alignNavPopover()
}, 200)
}
},
getFeatureDistance(active, field, direction) {
if (active) {
Expand Down Expand Up @@ -272,26 +297,49 @@ const Description = {
}
features[i].properties.__i__ = i
}
console.log('her', currentIdx, active)
if (currentIdx == null) return 0

// Limit to current map extent if checkbox is true
if ($('#mainDescNavPopoverExtent input').is(':checked')) {
const b = Description.Map_.map.getBounds()
const bounds = {
type: 'Feature',
properties: {},
geometry: {
type: 'Polygon',
coordinates: [
[
[b._northEast.lng, b._northEast.lat],
[b._southWest.lng, b._northEast.lat],
[b._southWest.lng, b._southWest.lat],
[b._northEast.lng, b._southWest.lat],
[b._northEast.lng, b._northEast.lat],
],
],
},
}
features = features.filter((f) => {
return booleanIntersects(bounds, f)
})
}

if (field != null && field != NAV_DEFAULT_FIELD) {
features = features.sort((a, b) => {
features.sort((a, b) => {
let sign = 1
if (direction === 'previous') sign = -1
const af = F_.getIn(a, field, 0)
const bf = F_.getIn(b, field, 1)
const af = F_.getIn(a, `properties.${field}`, 0)
const bf = F_.getIn(b, `properties.${field}`, 1)
if (typeof af === 'string' || typeof bf === 'string') {
return af.localeCompare(bf) * sign
} else return (af - bf) * sign
})
}

for (let i = 0; i < features.length; i++) {
for (let i = 0; i < features.length - 1; i++) {
if (features[i].properties.__i__ === currentIdx) {
return (
features[i].properties.__i__ -
features[i + 1].properties.__i__
features[i + 1].properties.__i__ -
features[i].properties.__i__
)
}
}
Expand Down Expand Up @@ -587,6 +635,14 @@ const Description = {

// Reset the style
this.descCont.attr('style', null)

// Close Nav Popover
$(`#mainDescNavBarMenu`).css({
background: 'var(--color-a)',
})
$(`#mainDescNavPopover`).css({
display: 'none',
})
},
}

Expand Down
2 changes: 0 additions & 2 deletions src/essence/mmgisAPI/mmgisAPI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -373,10 +373,8 @@ var mmgisAPI_ = {
const listener = mmgisAPI_.getLeafletMapEvent(eventName)
const mmgisListener = mmgisAPI_.checkMMGISEvent(eventName)
if (listener) {
console.log('Add listener:', listener)
mmgisAPI_.map.addEventListener(listener, functionReference)
} else if (mmgisListener) {
console.log('Add listener', eventName)
document.addEventListener(eventName, functionReference)
} else {
//mmgisAPI_.customListeners[eventName] = mmgisAPI_.customListeners[eventName] || []
Expand Down

0 comments on commit 11dd256

Please sign in to comment.