@@ -51,10 +51,12 @@ const lmeState = {
managerHighlight : null ,
managerHighlightedObjectId : null ,
managerHighlightedCategoryKey : null ,
managerOutsideSelectionBound : false ,
managerHiddenObjects : new Map ( ) ,
managerHiddenObjectIds : new Set ( ) ,
managerHiddenCategories : new Set ( ) ,
managerObjectOrder : { }
managerObjectOrder : { } ,
managerExpandedRows : new Set ( )
} ;
// AdE publishes the cadastral WMS in ETRS89. WMS 1.1.1 keeps the longitude,
@@ -78,6 +80,7 @@ window.lmeMap = {
setImportedSheetLayerVisible ,
setLayerOrder ,
refreshLayerManager ,
clearLayerManagerSelection : clearManagerHighlight ,
setImportedMeasurementsVisible ,
setDrawingMeasurementsVisible ,
addProjectMarker ,
@@ -190,6 +193,7 @@ function init() {
}
lmeState . map . on ( "click" , async event => {
clearManagerHighlight ( ) ;
const info = await queryFeatureInfo ( event . latlng ) ;
if ( info ) {
L . popup ( ) . setLatLng ( event . latlng ) . setContent ( info ) . openOn ( lmeState . map ) ;
@@ -211,6 +215,19 @@ function init() {
closeCadastrePreview ( ) ;
}
} ) ;
if ( ! lmeState . managerOutsideSelectionBound ) {
document . addEventListener ( "pointerdown" , event => {
if ( ! lmeState . managerHighlightedObjectId ) {
return ;
}
const selectedRow = event . target ? . closest ? . ( ".layer-manager-object" ) ;
if ( selectedRow ? . dataset . objectId === lmeState . managerHighlightedObjectId ) {
return ;
}
clearManagerHighlight ( ) ;
} ) ;
lmeState . managerOutsideSelectionBound = true ;
}
setInfo ( "Mappa pronta: satellite + catasto AdE" ) ;
}
@@ -1164,6 +1181,9 @@ function refreshLayerManager() {
if ( ! container || ! lmeState . map ) {
return ;
}
captureLayerManagerExpansion ( container ) ;
const scrollHost = container . closest ( ".map-layer-panel" ) ;
const scrollTop = scrollHost ? . scrollTop || 0 ;
applyStoredLayerManagerVisibility ( ) ;
container . innerHTML = "" ;
lmeState . managerRecords = new Map ( ) ;
@@ -1184,6 +1204,12 @@ function refreshLayerManager() {
applyManagedVisualOrder ( container ) ;
bindLayerManagerDrag ( container ) ;
bindLayerManagerMoveButtons ( container ) ;
if ( scrollHost ) {
scrollHost . scrollTop = scrollTop ;
window . requestAnimationFrame ( ( ) => {
scrollHost . scrollTop = scrollTop ;
} ) ;
}
}
function renderLayerManagerCategory ( category , records ) {
@@ -1191,6 +1217,7 @@ function renderLayerManagerCategory(category, records) {
group . className = "layer-manager-group" ;
group . dataset . dragType = "category" ;
group . dataset . categoryKey = category . key ;
bindLayerManagerExpansion ( group , ` category: ${ category . key } ` ) ;
const visibleCount = records . filter ( record => ! lmeState . managerHiddenObjectIds . has ( record . id ) ) . length ;
const categoryVisible = ! lmeState . managerHiddenCategories . has ( category . key )
&& ( ! category . roots . length || category . roots . some ( layer => lmeState . map . hasLayer ( layer ) ) ) ;
@@ -1221,6 +1248,7 @@ function renderLayerManagerBlock(category, source, records) {
block . dataset . dragType = "block" ;
block . dataset . categoryKey = category . key ;
block . dataset . blockKey = source ;
bindLayerManagerExpansion ( block , ` block: ${ category . key } : ${ source } ` ) ;
const visibleCount = records . filter ( record => ! lmeState . managerHiddenObjectIds . has ( record . id ) ) . length ;
const visible = visibleCount === records . length ;
block . innerHTML = ` <summary><button type="button" class="layer-drag-handle" aria-label="Trascina blocco">☰</button><input type="checkbox" ${ visible ? "checked" : "" } aria-label="Mostra blocco"><span class="layer-manager-title"> ${ escapeHtml ( source ) } </span> ${ layerManagerMoveButtons ( "blocco" ) } <span class="layer-manager-count"> ${ records . length } </span></summary><div class="layer-manager-children"></div> ` ;
@@ -1239,8 +1267,12 @@ function renderLayerManagerBlock(category, source, records) {
function renderLayerManagerObject ( record , index ) {
const object = document . createElement ( "details" ) ;
object . className = "layer-manager-object" ;
if ( record . id === lmeState . managerHighlightedObjectId ) {
object . classList . add ( "layer-manager-object-selected" ) ;
}
object . dataset . dragType = "object" ;
object . dataset . objectId = record . id ;
bindLayerManagerExpansion ( object , ` object: ${ record . id } ` ) ;
const visible = ! lmeState . managerHiddenObjectIds . has ( record . id ) ;
object . innerHTML = ` <summary><button type="button" class="layer-drag-handle" aria-label="Trascina oggetto">☰</button><input type="checkbox" ${ visible ? "checked" : "" } aria-label="Mostra oggetto"><span class="layer-manager-title"> ${ escapeHtml ( managedObjectLabel ( record , index ) ) } </span> ${ layerManagerMoveButtons ( "oggetto" ) } <span class="layer-manager-count">› </span></summary><div class="layer-manager-details"></div> ` ;
const checkbox = object . querySelector ( "input" ) ;
@@ -1260,6 +1292,28 @@ function renderLayerManagerObject(record, index) {
return object ;
}
function captureLayerManagerExpansion ( container ) {
container . querySelectorAll ( "details[data-expansion-key]" ) . forEach ( row => {
if ( row . open ) {
lmeState . managerExpandedRows . add ( row . dataset . expansionKey ) ;
} else {
lmeState . managerExpandedRows . delete ( row . dataset . expansionKey ) ;
}
} ) ;
}
function bindLayerManagerExpansion ( row , key ) {
row . dataset . expansionKey = key ;
row . open = lmeState . managerExpandedRows . has ( key ) ;
row . addEventListener ( "toggle" , ( ) => {
if ( row . open ) {
lmeState . managerExpandedRows . add ( key ) ;
} else {
lmeState . managerExpandedRows . delete ( key ) ;
}
} ) ;
}
function setManagedCategoryVisible ( category , visible ) {
if ( category . key === "imported" ) {
lmeState . importedVisible = visible ;
@@ -1343,9 +1397,16 @@ function managedCategoryEnabled(categoryKey) {
}
function highlightManagedObject ( record ) {
lmeState . managerHighlight . clearLayers ( ) ;
if ( lmeState . managerHighlightedObjectId === record . id ) {
clearManagerHighlight ( ) ;
return ;
}
clearManagerHighlight ( ) ;
lmeState . managerHighlightedObjectId = record . id ;
lmeState . managerHighlightedCategoryKey = record . categoryKey ;
document . querySelectorAll ( ".layer-manager-object" ) . forEach ( row => {
row . classList . toggle ( "layer-manager-object-selected" , row . dataset . objectId === record . id ) ;
} ) ;
const geojson = record . layer . toGeoJSON ? . ( ) ;
if ( geojson ) {
L . geoJSON ( geojson , {
@@ -1370,6 +1431,9 @@ function clearManagerHighlight() {
lmeState . managerHighlight ? . clearLayers ( ) ;
lmeState . managerHighlightedObjectId = null ;
lmeState . managerHighlightedCategoryKey = null ;
document . querySelectorAll ( ".layer-manager-object-selected" ) . forEach ( row => {
row . classList . remove ( "layer-manager-object-selected" ) ;
} ) ;
}
function layerManagerMoveButtons ( label ) {