Compare commits

...
7 Commits
7 changed files with 752 additions and 36 deletions

No files matched your search

+19 -1
View File
@@ -472,6 +472,7 @@
private bool DrawToolsVisible { get; set; }
private bool TrailEnabled { get; set; }
private bool LayerPanelOpen { get; set; }
private DotNetObjectReference<Home>? MapCallbackReference { get; set; }
private bool IncludeCadastralParcels { get; set; } = true;
private bool IncludeKmlSheetLayer { get; set; }
private bool ShowImportedSheetLayer { get; set; }
@@ -570,7 +571,8 @@
{
if (firstRender)
{
await JS.InvokeVoidAsync("lmeMap.init");
MapCallbackReference = DotNetObjectReference.Create(this);
await JS.InvokeVoidAsync("lmeMap.init", MapCallbackReference);
await ApplyFlagPreferencesToMapAsync();
await CenterOnInitialLocationAsync();
await MigrateLegacyProjectAsync();
@@ -1047,6 +1049,21 @@
await JS.InvokeVoidAsync("lmeMap.setDrawingMeasurementsVisible", ShowDrawingMeasurements);
}
[JSInvokable]
public Task SetMeasurementsFromLayerManager(string category, bool enabled)
{
if (category == "imported")
{
ShowImportedMeasurements = enabled;
}
else if (category == "drawings")
{
ShowDrawingMeasurements = enabled;
}
SaveFlagPreferences();
return InvokeAsync(StateHasChanged);
}
private async Task ToggleDrawTools()
{
DrawToolsVisible = !DrawToolsVisible;
@@ -1503,6 +1520,7 @@
LocationService.StopTracking();
GpsLookupCancellation?.Cancel();
GpsLookupCancellation?.Dispose();
MapCallbackReference?.Dispose();
return ValueTask.CompletedTask;
}
}
+2 -2
View File
@@ -28,8 +28,8 @@
<ApplicationId>com.companyname.lmemappecatastaliapp</ApplicationId>
<!-- Versions -->
<ApplicationDisplayVersion>0.2.20</ApplicationDisplayVersion>
<ApplicationVersion>24</ApplicationVersion>
<ApplicationDisplayVersion>0.2.27</ApplicationDisplayVersion>
<ApplicationVersion>31</ApplicationVersion>
<!-- To develop, package, and publish an app to the Microsoft Store, see: https://aka.ms/MauiTemplateUnpackaged -->
<WindowsPackageType>None</WindowsPackageType>
+1 -1
View File
@@ -13,7 +13,7 @@ public sealed class AzureMapsService
public AzureMapsService()
{
_httpClient.DefaultRequestHeaders.UserAgent.ParseAdd("LMEMappeCatastali/0.2.20");
_httpClient.DefaultRequestHeaders.UserAgent.ParseAdd("LMEMappeCatastali/0.2.22");
_httpClient.DefaultRequestHeaders.Accept.ParseAdd("application/json");
}
+27 -1
View File
@@ -78,6 +78,8 @@ public sealed class MapExportService
BuildStyle("drawing", "ff1679f9", "333c92fb"),
BuildStyle("poi", "ffff7a00", "33ff7a00"),
BuildStyle("gps-trail", "ff00a5ff", "2200a5ff"));
var categoryFolders = new Dictionary<string, XElement>(StringComparer.Ordinal);
var groupFolders = new Dictionary<(string Category, string Group), XElement>();
foreach (var feature in features.EnumerateArray())
{
@@ -102,7 +104,31 @@ public sealed class MapExportService
placemark.Add(extendedData);
}
placemark.Add(BuildGeometry(geometry));
document.Add(placemark);
var categoryName = GetString(properties, "_lmeCategoryName")?.Trim();
var groupName = GetString(properties, "_lmeGroupName")?.Trim();
var parent = document;
if (!string.IsNullOrWhiteSpace(categoryName))
{
if (!categoryFolders.TryGetValue(categoryName, out var categoryFolder))
{
categoryFolder = new XElement(Kml + "Folder", new XElement(Kml + "name", categoryName));
categoryFolders[categoryName] = categoryFolder;
document.Add(categoryFolder);
}
parent = categoryFolder;
}
if (!string.IsNullOrWhiteSpace(groupName))
{
var key = (categoryName ?? string.Empty, groupName);
if (!groupFolders.TryGetValue(key, out var groupFolder))
{
groupFolder = new XElement(Kml + "Folder", new XElement(Kml + "name", groupName));
groupFolders[key] = groupFolder;
parent.Add(groupFolder);
}
parent = groupFolder;
}
parent.Add(placemark);
}
return new XDocument(new XDeclaration("1.0", "utf-8", null), new XElement(Kml + "kml", document)).ToString();
+1 -1
View File
@@ -13,7 +13,7 @@ public sealed class NetworkLocationService
public NetworkLocationService()
{
httpClient.DefaultRequestHeaders.UserAgent.ParseAdd("LMEMappeCatastali/0.2.20");
httpClient.DefaultRequestHeaders.UserAgent.ParseAdd("LMEMappeCatastali/0.2.22");
}
public async Task<NetworkLocationSnapshot?> GetApproximateLocationAsync(
+160 -11
View File
@@ -176,10 +176,11 @@ input[type="checkbox"] {
position: absolute;
top: 72px;
right: 12px;
bottom: calc(var(--nav-height) + 8px);
z-index: 940;
display: grid;
width: min(320px, calc(100% - 24px));
max-height: calc(100% - 152px);
box-sizing: border-box;
width: min(480px, 50vw);
overflow-y: auto;
border: 1px solid var(--line);
border-radius: 8px;
@@ -265,17 +266,30 @@ input[type="checkbox"] {
.layer-manager-group,
.layer-manager-block,
.layer-manager-object {
border: 1px solid #dce3e6;
border: 1px solid var(--layer-group-border, #dce3e6);
border-radius: 6px;
background: #fff;
background: var(--layer-group-surface, #fff);
}
.layer-manager-group > summary,
.layer-manager-block > summary {
background: var(--layer-group-parent, #f6f8f9);
}
.layer-manager-object > summary {
background: var(--layer-group-surface, #fff);
}
.layer-manager-group > summary,
.layer-manager-block > summary,
.layer-manager-object > summary {
display: grid;
grid-template-columns: 28px 20px minmax(0, 1fr) auto auto;
align-items: center;
grid-template-columns: 28px minmax(0, 1fr) 50px;
grid-template-areas:
"handle title count"
". visibility moves"
". actions moves";
align-items: start;
gap: 6px;
min-height: 38px;
padding: 4px 6px;
@@ -290,6 +304,7 @@ input[type="checkbox"] {
}
.layer-drag-handle {
grid-area: handle;
width: 28px;
height: 28px;
border: 0;
@@ -302,7 +317,56 @@ input[type="checkbox"] {
cursor: grab;
}
.layer-row-actions {
grid-area: actions;
display: grid;
grid-template-columns: minmax(0, 1fr);
width: min(130px, 100%);
gap: 4px;
}
.layer-manager-group > summary > input,
.layer-manager-block > summary > input,
.layer-manager-object > summary > input {
grid-area: visibility;
justify-self: start;
width: 20px;
height: 20px;
margin: 1px 0;
}
.layer-rename-button,
.layer-remove-button {
width: 100%;
min-height: 28px;
min-width: 0;
padding: 4px;
border: 1px solid #bfd4cd;
border-radius: 4px;
background: #eef8f5;
color: var(--accent-strong);
font-size: 10px;
font-weight: 800;
line-height: 1.15;
overflow-wrap: anywhere;
}
.layer-rename-button:active {
background: #d9eee7;
}
.layer-remove-button {
border-color: #fecaca;
background: #fff1f2;
color: #b42318;
}
.layer-remove-button:active {
background: #ffe4e6;
}
.layer-move-buttons {
grid-area: moves;
display: inline-grid;
grid-template-columns: 24px 24px;
gap: 2px;
@@ -326,29 +390,108 @@ input[type="checkbox"] {
}
.layer-manager-title {
grid-area: title;
min-width: 0;
overflow-wrap: anywhere;
color: var(--layer-group-accent, var(--ink));
font-size: 12px;
font-weight: 700;
}
.layer-manager-group > summary > .layer-manager-title {
font-size: 13px;
font-weight: 800;
}
.layer-manager-block > summary > .layer-manager-title {
font-size: 12px;
font-weight: 800;
}
.layer-manager-object > summary > .layer-manager-title {
font-size: 11px;
font-style: italic;
font-weight: 400;
}
.layer-manager-count {
grid-area: count;
justify-self: end;
color: var(--muted);
font-size: 10px;
}
.layer-manager-children {
padding: 0 5px 5px 18px;
margin-left: 4px;
padding: 4px 3px 5px 6px;
border-left: 2px solid var(--layer-group-border, #dce3e6);
}
.layer-manager-block > .layer-manager-children {
margin-left: 5px;
padding-left: 5px;
}
.layer-manager-object {
margin-left: 3px;
border-radius: 4px;
}
.layer-manager-object > summary {
grid-template-columns: 24px minmax(0, 1fr) 46px;
gap: 4px;
padding: 3px 4px;
}
.layer-manager-object > summary > .layer-drag-handle {
width: 24px;
height: 24px;
font-size: 15px;
}
.layer-manager-object > summary > .layer-move-buttons {
grid-template-columns: 22px 22px;
}
.layer-manager-object > summary > .layer-move-buttons button {
width: 22px;
height: 24px;
}
.layer-manager-object > summary .layer-rename-button,
.layer-manager-object > summary .layer-remove-button {
min-height: 24px;
font-size: 9px;
}
.layer-manager-details {
display: grid;
gap: 2px;
padding: 0 8px 7px 40px;
padding: 0 6px 7px 12px;
color: var(--muted);
font-size: 10px;
}
.layer-manager-suboption {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
align-items: center;
gap: 6px;
min-height: 30px;
color: var(--ink);
font-size: 11px;
font-weight: 700;
}
.layer-manager-suboption input {
margin: 0;
}
.layer-manager-info {
display: grid;
gap: 2px;
padding: 3px 0 0 24px;
}
.layer-manager-dragging {
opacity: 0.55;
outline: 2px solid #2563eb;
@@ -359,6 +502,12 @@ input[type="checkbox"] {
box-shadow: inset 3px 0 #ff00d4;
}
.layer-manager-parent-highlighted > summary,
.layer-manager-parent-selected > summary {
background: #fff0fb;
box-shadow: inset 3px 0 #ff00d4;
}
.gps-overlay {
position: absolute;
top: 72px;
@@ -868,8 +1017,8 @@ footer {
.map-layer-panel {
top: 68px;
right: 8px;
width: min(320px, calc(100% - 16px));
max-height: calc(100% - 144px);
bottom: calc(var(--nav-height) + 8px);
width: 50vw;
}
.tool-sheet {
+542 -19
View File
@@ -51,11 +51,21 @@ const lmeState = {
managerHighlight: null,
managerHighlightedObjectId: null,
managerHighlightedCategoryKey: null,
managerHighlightedParentKey: null,
managerHighlightedParentRecords: null,
managerHoveredParentKey: null,
managerHoveredParentRecords: null,
managerOutsideSelectionBound: false,
managerHiddenObjects: new Map(),
managerHiddenObjectIds: new Set(),
managerHiddenMeasurementSummaryIds: new Set(),
managerHiddenMeasurementSideIds: new Set(),
managerHiddenCategories: new Set(),
managerObjectOrder: {}
managerRemovedCategories: new Set(),
managerObjectOrder: {},
managerCategoryNames: {},
managerExpandedRows: new Set(),
dotNetReference: null
};
// AdE publishes the cadastral WMS in ETRS89. WMS 1.1.1 keeps the longitude,
@@ -108,7 +118,10 @@ window.lmeMap = {
showInfo: setInfo
};
function init() {
function init(dotNetReference) {
if (dotNetReference) {
lmeState.dotNetReference = dotNetReference;
}
if (lmeState.map) {
return;
}
@@ -216,11 +229,13 @@ function init() {
});
if (!lmeState.managerOutsideSelectionBound) {
document.addEventListener("pointerdown", event => {
if (!lmeState.managerHighlightedObjectId) {
if (!lmeState.managerHighlightedObjectId && !lmeState.managerHighlightedParentKey) {
return;
}
const selectedRow = event.target?.closest?.(".layer-manager-object");
if (selectedRow?.dataset.objectId === lmeState.managerHighlightedObjectId) {
const selectedObject = event.target?.closest?.(".layer-manager-object");
const selectedParent = event.target?.closest?.("[data-highlight-key]");
if (selectedObject?.dataset.objectId === lmeState.managerHighlightedObjectId
|| selectedParent?.dataset.highlightKey === lmeState.managerHighlightedParentKey) {
return;
}
clearManagerHighlight();
@@ -1138,6 +1153,179 @@ function managedObjectLabel(record, index) {
return `Oggetto ${index + 1}`;
}
function managedObjectEditableName(record) {
const properties = record?.layer?.feature?.properties || {};
return properties.name || properties.Name || properties.label || properties.LABEL || "";
}
function managedObjectCanRename(record) {
return ["drawings", "imported", "importedSheets"].includes(record.categoryKey)
&& record.layer?.feature?.properties;
}
function renameManagedObject(record, index) {
if (!managedObjectCanRename(record)) {
return;
}
const currentName = String(managedObjectEditableName(record) || managedObjectLabel(record, index)).trim();
const requestedName = window.prompt("Nuovo nome oggetto", currentName);
if (requestedName === null) {
return;
}
const name = requestedName.trim().slice(0, 120);
if (!name) {
setInfo("Nome non modificato: inserisci un testo.");
return;
}
const properties = record.layer.feature.properties;
properties.name = name;
record.layer.lmeManagerLabel = record.categoryKey === "drawings" && record.layer instanceof L.Marker
? `POI: ${name}`
: null;
updateStoredFeaturePopup(record.layer);
refreshImportedMeasurements();
refreshDrawingMeasurements();
refreshLayerManager();
setInfo(`Oggetto rinominato: ${name}.`);
}
function managedCategoryName(category, records) {
const storedName = lmeState.managerCategoryNames[category.key];
const featureName = records
.map(record => record.layer?.feature?.properties?._lmeCategoryName)
.find(Boolean);
const name = String(storedName || featureName || category.label).trim();
if (name !== category.label) {
lmeState.managerCategoryNames[category.key] = name;
}
return name;
}
function managedCategoryCanRename(category) {
return ["drawings", "imported", "importedSheets"].includes(category.key);
}
function renameManagedCategory(category, records) {
const currentName = managedCategoryName(category, records);
const requestedName = window.prompt("Nuovo nome gruppo", currentName);
if (requestedName === null) {
return;
}
const name = requestedName.trim().slice(0, 120);
if (!name) {
setInfo("Nome non modificato: inserisci un testo.");
return;
}
lmeState.managerCategoryNames[category.key] = name;
records.forEach(record => {
if (record.layer?.feature?.properties) {
record.layer.feature.properties._lmeCategoryName = name;
}
});
refreshLayerManager();
setInfo(`Gruppo rinominato: ${name}.`);
}
function managedBlockName(source, records) {
return String(records
.map(record => record.layer?.feature?.properties?._lmeGroupName)
.find(Boolean) || source);
}
function renameManagedBlock(category, source, records) {
const currentName = managedBlockName(source, records);
const requestedName = window.prompt("Nuovo nome gruppo", currentName);
if (requestedName === null) {
return;
}
const name = requestedName.trim().slice(0, 120);
if (!name) {
setInfo("Nome non modificato: inserisci un testo.");
return;
}
records.forEach(record => {
if (record.layer?.feature?.properties) {
record.layer.feature.properties._lmeGroupName = name;
}
});
refreshLayerManager();
setInfo(`Gruppo rinominato: ${name}.`);
}
function managedCategoryCanRemove(category, records) {
return records.length > 0
&& ["drawings", "imported", "importedSheets", "selectedParcels", "gpsParcels"].includes(category.key);
}
function managedObjectCanRemove(record) {
return ["drawings", "imported", "importedSheets", "selectedParcels", "gpsParcels"].includes(record.categoryKey);
}
function layerManagerRowActions(renameButton, removeButton) {
if (!renameButton && !removeButton) {
return "";
}
return `<span class="layer-row-actions">${renameButton}${removeButton}</span>`;
}
const layerManagerPalettes = [
{ surface: "#f0fdf4", parent: "#dcfce7", border: "#86efac", accent: "#166534" },
{ surface: "#eff6ff", parent: "#dbeafe", border: "#93c5fd", accent: "#1d4ed8" },
{ surface: "#fffbeb", parent: "#fef3c7", border: "#fcd34d", accent: "#92400e" },
{ surface: "#fff1f2", parent: "#ffe4e6", border: "#fda4af", accent: "#be123c" },
{ surface: "#f5f3ff", parent: "#ede9fe", border: "#c4b5fd", accent: "#6d28d9" },
{ surface: "#ecfeff", parent: "#cffafe", border: "#67e8f9", accent: "#0e7490" },
{ surface: "#f7fee7", parent: "#ecfccb", border: "#bef264", accent: "#3f6212" }
];
function applyLayerManagerPalette(row, key) {
const hash = [...String(key)].reduce((value, character) =>
((value * 31) + character.charCodeAt(0)) >>> 0, 0);
const palette = layerManagerPalettes[hash % layerManagerPalettes.length];
row.style.setProperty("--layer-group-surface", palette.surface);
row.style.setProperty("--layer-group-parent", palette.parent);
row.style.setProperty("--layer-group-border", palette.border);
row.style.setProperty("--layer-group-accent", palette.accent);
}
function removeManagedRecords(records, subject) {
if (!records.length) {
return;
}
const message = records.length === 1
? `Rimuovere ${subject} dal progetto? Non verra incluso nel prossimo salvataggio.`
: `Rimuovere ${subject} e tutti i suoi ${records.length} oggetti dal progetto? Non verranno inclusi nel prossimo salvataggio.`;
if (!window.confirm(message)) {
return;
}
const removedIds = new Set(records.map(record => record.id));
const categoryKeys = new Set(records.map(record => record.categoryKey));
records.forEach(record => {
if (record.parent?.hasLayer?.(record.layer)) {
record.parent.removeLayer(record.layer);
}
lmeState.managerHiddenObjects.delete(record.id);
lmeState.managerHiddenObjectIds.delete(record.id);
lmeState.managerHiddenMeasurementSummaryIds.delete(record.id);
lmeState.managerHiddenMeasurementSideIds.delete(record.id);
});
categoryKeys.forEach(categoryKey => {
const order = lmeState.managerObjectOrder[categoryKey] || [];
lmeState.managerObjectOrder[categoryKey] = order.filter(id => !removedIds.has(id));
const category = layerManagerCategories().find(item => item.key === categoryKey);
if (category && managedRecordsForCategory(category).length === 0) {
lmeState.managerRemovedCategories.add(categoryKey);
delete lmeState.managerCategoryNames[categoryKey];
}
});
clearManagerHighlight();
refreshImportedMeasurements();
refreshDrawingMeasurements();
updateGpsInsideState();
refreshLayerManager();
setInfo(`${records.length === 1 ? "Oggetto rimosso" : `${records.length} oggetti rimossi`} dal progetto.`);
}
function managedObjectDetails(layer) {
const details = [];
const properties = layer?.feature?.properties || {};
@@ -1180,6 +1368,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();
@@ -1190,6 +1381,11 @@ function refreshLayerManager() {
return;
}
const records = managedRecordsForCategory(category);
if (records.length) {
lmeState.managerRemovedCategories.delete(category.key);
} else if (lmeState.managerRemovedCategories.has(category.key)) {
return;
}
const savedOrder = lmeState.managerObjectOrder[category.key] || [];
const positions = new Map(savedOrder.map((id, index) => [id, index]));
records.sort((left, right) =>
@@ -1200,22 +1396,51 @@ function refreshLayerManager() {
applyManagedVisualOrder(container);
bindLayerManagerDrag(container);
bindLayerManagerMoveButtons(container);
if (scrollHost) {
scrollHost.scrollTop = scrollTop;
window.requestAnimationFrame(() => {
scrollHost.scrollTop = scrollTop;
});
}
}
function renderLayerManagerCategory(category, records) {
const group = document.createElement("details");
group.className = "layer-manager-group";
group.dataset.dragType = "category";
group.dataset.layerDepth = "0";
group.dataset.categoryKey = category.key;
applyLayerManagerPalette(group, `category:${category.key}`);
bindLayerManagerExpansion(group, `category:${category.key}`);
const categoryName = managedCategoryName(category, records);
const renameButton = managedCategoryCanRename(category)
? `<button type="button" class="layer-rename-button" aria-label="Rinomina gruppo" title="Rinomina">Rinomina</button>`
: "";
const removeButton = managedCategoryCanRemove(category, records)
? `<button type="button" class="layer-remove-button" aria-label="Rimuovi gruppo dal progetto" title="Rimuovi dal progetto">Rimuovi</button>`
: "";
const rowActions = layerManagerRowActions(renameButton, removeButton);
group.classList.toggle("layer-manager-with-actions", Boolean(rowActions));
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)));
const visible = categoryVisible;
group.innerHTML = `<summary><button type="button" class="layer-drag-handle" aria-label="Trascina gruppo">☰</button><input type="checkbox" ${visible ? "checked" : ""} aria-label="Mostra ${escapeHtml(category.label)}"><span class="layer-manager-title">${escapeHtml(category.label)}</span>${layerManagerMoveButtons("gruppo")}<span class="layer-manager-count">${records.length}</span></summary><div class="layer-manager-children"></div>`;
group.innerHTML = `<summary><button type="button" class="layer-drag-handle" aria-label="Trascina gruppo">☰</button><input type="checkbox" ${visible ? "checked" : ""} aria-label="Mostra ${escapeHtml(categoryName)}"><span class="layer-manager-title">${escapeHtml(categoryName)}</span>${rowActions}${layerManagerMoveButtons("gruppo")}<span class="layer-manager-count">${records.length}</span></summary><div class="layer-manager-children"></div>`;
const checkbox = group.querySelector("input");
checkbox.indeterminate = categoryVisible && records.length > 0 && visibleCount < records.length;
checkbox.addEventListener("click", event => event.stopPropagation());
checkbox.addEventListener("change", () => setManagedCategoryVisible(category, checkbox.checked));
group.querySelector(".layer-rename-button")?.addEventListener("click", event => {
event.preventDefault();
event.stopPropagation();
renameManagedCategory(category, records);
});
group.querySelector(".layer-remove-button")?.addEventListener("click", event => {
event.preventDefault();
event.stopPropagation();
removeManagedRecords(records, `il gruppo '${categoryName}'`);
});
bindManagedParentHighlight(group, `category:${category.key}`, records);
const children = group.querySelector(".layer-manager-children");
if (category.blocks) {
const blocks = new Map();
@@ -1235,11 +1460,19 @@ function renderLayerManagerBlock(category, source, records) {
const block = document.createElement("details");
block.className = "layer-manager-block";
block.dataset.dragType = "block";
block.dataset.layerDepth = "1";
block.dataset.categoryKey = category.key;
block.dataset.blockKey = source;
applyLayerManagerPalette(block, `block:${category.key}:${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>`;
const blockName = managedBlockName(source, records);
const rowActions = layerManagerRowActions(
`<button type="button" class="layer-rename-button" aria-label="Rinomina gruppo" title="Rinomina">Rinomina</button>`,
`<button type="button" class="layer-remove-button" aria-label="Rimuovi gruppo dal progetto" title="Rimuovi dal progetto">Rimuovi</button>`);
block.classList.add("layer-manager-with-actions");
block.innerHTML = `<summary><button type="button" class="layer-drag-handle" aria-label="Trascina blocco">☰</button><input type="checkbox" ${visible ? "checked" : ""} aria-label="Mostra ${escapeHtml(blockName)}"><span class="layer-manager-title">${escapeHtml(blockName)}</span>${rowActions}${layerManagerMoveButtons("blocco")}<span class="layer-manager-count">${records.length}</span></summary><div class="layer-manager-children"></div>`;
const checkbox = block.querySelector("input");
checkbox.indeterminate = visibleCount > 0 && !visible;
checkbox.addEventListener("click", event => event.stopPropagation());
@@ -1247,6 +1480,17 @@ function renderLayerManagerBlock(category, source, records) {
records.forEach(record => setManagedObjectVisible(record, checkbox.checked, false));
refreshLayerManager();
});
block.querySelector(".layer-rename-button").addEventListener("click", event => {
event.preventDefault();
event.stopPropagation();
renameManagedBlock(category, source, records);
});
block.querySelector(".layer-remove-button").addEventListener("click", event => {
event.preventDefault();
event.stopPropagation();
removeManagedRecords(records, `il gruppo '${blockName}'`);
});
bindManagedParentHighlight(block, `block:${category.key}:${source}`, records);
const children = block.querySelector(".layer-manager-children");
records.forEach((record, index) => children.appendChild(renderLayerManagerObject(record, index)));
return block;
@@ -1259,12 +1503,33 @@ function renderLayerManagerObject(record, index) {
object.classList.add("layer-manager-object-selected");
}
object.dataset.dragType = "object";
object.dataset.layerDepth = "2";
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 renameButton = managedObjectCanRename(record)
? `<button type="button" class="layer-rename-button" aria-label="Rinomina oggetto" title="Rinomina">Rinomina</button>`
: "";
const removeButton = managedObjectCanRemove(record)
? `<button type="button" class="layer-remove-button" aria-label="Rimuovi oggetto dal progetto" title="Rimuovi dal progetto">Rimuovi</button>`
: "";
const rowActions = layerManagerRowActions(renameButton, removeButton);
object.classList.toggle("layer-manager-with-actions", Boolean(rowActions));
const objectName = managedObjectLabel(record, index);
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(objectName)}</span>${rowActions}${layerManagerMoveButtons("oggetto")}<span class="layer-manager-count">›</span></summary><div class="layer-manager-details"></div>`;
const checkbox = object.querySelector("input");
checkbox.addEventListener("click", event => event.stopPropagation());
checkbox.addEventListener("change", () => setManagedObjectVisible(record, checkbox.checked, true));
object.querySelector(".layer-rename-button")?.addEventListener("click", event => {
event.preventDefault();
event.stopPropagation();
renameManagedObject(record, index);
});
object.querySelector(".layer-remove-button")?.addEventListener("click", event => {
event.preventDefault();
event.stopPropagation();
removeManagedRecords([record], `'${objectName}'`);
});
object.querySelector(".layer-manager-title").addEventListener("click", event => {
event.preventDefault();
event.stopPropagation();
@@ -1272,13 +1537,137 @@ function renderLayerManagerObject(record, index) {
highlightManagedObject(record);
});
const details = object.querySelector(".layer-manager-details");
details.appendChild(renderLayerManagerVisibilityOption(
geometryVisibilityLabel(record.layer),
visible,
checked => setManagedObjectVisible(record, checked, true)));
if (supportsManagedMeasurements(record)) {
managedMeasurementKinds(record).forEach(kind => {
const measurementsVisible = managedMeasurementsGloballyVisible(record.categoryKey)
&& !managedMeasurementHiddenSet(kind.key).has(record.id);
details.appendChild(renderLayerManagerVisibilityOption(
kind.label,
measurementsVisible,
checked => setManagedMeasurementKindVisible(record, kind.key, checked)));
});
}
const rows = managedObjectDetails(record.layer);
details.innerHTML = rows.length
const info = document.createElement("div");
info.className = "layer-manager-info";
info.innerHTML = rows.length
? rows.map(value => `<span>${escapeHtml(value)}</span>`).join("")
: "<span>Nessuna misura disponibile</span>";
details.appendChild(info);
return object;
}
function renderLayerManagerVisibilityOption(label, checked, onChange) {
const option = document.createElement("label");
option.className = "layer-manager-suboption";
option.innerHTML = `<input type="checkbox" ${checked ? "checked" : ""}><span>${escapeHtml(label)}</span>`;
const checkbox = option.querySelector("input");
checkbox.addEventListener("click", event => event.stopPropagation());
checkbox.addEventListener("change", () => onChange(checkbox.checked));
return option;
}
function geometryVisibilityLabel(layer) {
if (layer instanceof L.Polygon || layer instanceof L.Circle) {
return "Area/geometria sulla mappa";
}
if (layer instanceof L.Polyline) {
return "Linea sulla mappa";
}
return "Punto sulla mappa";
}
function supportsManagedMeasurements(record) {
return ["imported", "drawings"].includes(record.categoryKey)
&& (record.layer instanceof L.Circle
|| record.layer instanceof L.Polygon
|| record.layer instanceof L.Polyline);
}
function managedMeasurementsGloballyVisible(categoryKey) {
return categoryKey === "imported"
? lmeState.showImportedMeasurements
: lmeState.showDrawingMeasurements;
}
function managedMeasurementKinds(record) {
if (record.layer instanceof L.Polygon) {
return [
{ key: "summary", label: "Superficie e perimetro sulla mappa" },
{ key: "sides", label: "Misure dei lati sulla mappa" }
];
}
if (record.layer instanceof L.Circle) {
return [{ key: "summary", label: "Superficie, raggio e circonferenza sulla mappa" }];
}
return [
{ key: "summary", label: "Lunghezza totale sulla mappa" },
{ key: "sides", label: "Misure dei tratti sulla mappa" }
];
}
function managedMeasurementHiddenSet(kind) {
return kind === "sides"
? lmeState.managerHiddenMeasurementSideIds
: lmeState.managerHiddenMeasurementSummaryIds;
}
function setManagedMeasurementKindVisible(record, kind, visible) {
const hiddenSet = managedMeasurementHiddenSet(kind);
if (visible) {
if (!managedMeasurementsGloballyVisible(record.categoryKey)) {
lmeState.managerRecords.forEach(candidate => {
if (candidate.categoryKey === record.categoryKey
&& supportsManagedMeasurements(candidate)) {
lmeState.managerHiddenMeasurementSummaryIds.add(candidate.id);
lmeState.managerHiddenMeasurementSideIds.add(candidate.id);
}
});
if (record.categoryKey === "imported") {
lmeState.showImportedMeasurements = true;
} else {
lmeState.showDrawingMeasurements = true;
}
void lmeState.dotNetReference?.invokeMethodAsync(
"SetMeasurementsFromLayerManager",
record.categoryKey,
true);
}
hiddenSet.delete(record.id);
} else {
hiddenSet.add(record.id);
}
refreshImportedMeasurements();
refreshDrawingMeasurements();
refreshLayerManager();
}
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;
@@ -1372,9 +1761,75 @@ function highlightManagedObject(record) {
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, {
renderManagerHighlight([record]);
fitLayer(record.layer);
}
function bindManagedParentHighlight(row, key, records) {
const summary = row.querySelector(":scope > summary");
row.dataset.highlightKey = key;
row.classList.toggle("layer-manager-parent-selected", lmeState.managerHighlightedParentKey === key);
if (lmeState.managerHighlightedParentKey === key) {
lmeState.managerHighlightedParentRecords = records;
}
row.querySelector(":scope > summary > .layer-manager-title").addEventListener("click", event => {
event.preventDefault();
event.stopPropagation();
row.open = true;
highlightManagedParent(row, key, records);
});
summary.addEventListener("pointerenter", () => {
lmeState.managerHoveredParentKey = key;
lmeState.managerHoveredParentRecords = records;
row.classList.add("layer-manager-parent-highlighted");
renderManagerHighlight(records);
});
summary.addEventListener("pointerleave", () => {
if (lmeState.managerHoveredParentKey !== key) {
return;
}
lmeState.managerHoveredParentKey = null;
lmeState.managerHoveredParentRecords = null;
row.classList.remove("layer-manager-parent-highlighted");
renderSelectedManagerHighlight();
});
}
function highlightManagedParent(row, key, records) {
if (lmeState.managerHighlightedParentKey === key) {
clearManagerHighlight();
return;
}
clearManagerHighlight();
lmeState.managerHighlightedParentKey = key;
lmeState.managerHighlightedParentRecords = records;
lmeState.managerHighlightedCategoryKey = records[0]?.categoryKey || null;
row.classList.add("layer-manager-parent-selected");
renderManagerHighlight(records);
}
function renderSelectedManagerHighlight() {
if (lmeState.managerHighlightedParentRecords?.length) {
renderManagerHighlight(lmeState.managerHighlightedParentRecords);
return;
}
const selected = lmeState.managerRecords.get(lmeState.managerHighlightedObjectId);
renderManagerHighlight(selected ? [selected] : []);
}
function renderManagerHighlight(records) {
lmeState.managerHighlight?.clearLayers();
const features = records.flatMap(record => {
const geojson = record.layer?.toGeoJSON?.();
if (!geojson) {
return [];
}
return geojson.type === "FeatureCollection" ? geojson.features : [geojson];
});
if (!features.length) {
return;
}
L.geoJSON({ type: "FeatureCollection", features }, {
pane: "managerHighlightPane",
interactive: false,
style: { color: "#ff00d4", weight: 8, opacity: 1, fillColor: "#00fff0", fillOpacity: 0.16 },
@@ -1389,16 +1844,24 @@ function highlightManagedObject(record) {
})
}).addTo(lmeState.managerHighlight);
}
fitLayer(record.layer);
}
function clearManagerHighlight() {
lmeState.managerHighlight?.clearLayers();
lmeState.managerHighlightedObjectId = null;
lmeState.managerHighlightedCategoryKey = null;
lmeState.managerHighlightedParentKey = null;
lmeState.managerHighlightedParentRecords = null;
lmeState.managerHoveredParentKey = null;
lmeState.managerHoveredParentRecords = null;
document.querySelectorAll(".layer-manager-object-selected").forEach(row => {
row.classList.remove("layer-manager-object-selected");
});
document.querySelectorAll(".layer-manager-parent-highlighted").forEach(row => {
row.classList.remove("layer-manager-parent-highlighted");
});
document.querySelectorAll(".layer-manager-parent-selected").forEach(row => {
row.classList.remove("layer-manager-parent-selected");
});
}
function layerManagerMoveButtons(label) {
@@ -1624,6 +2087,7 @@ function applyImportedSheetVisibility() {
function setImportedMeasurementsVisible(enabled) {
lmeState.showImportedMeasurements = Boolean(enabled);
refreshImportedMeasurements();
refreshLayerManager();
setInfo(lmeState.showImportedMeasurements
? "Misure dei file GIS visibili."
: "Misure dei file GIS nascoste.");
@@ -1632,6 +2096,7 @@ function setImportedMeasurementsVisible(enabled) {
function setDrawingMeasurementsVisible(enabled) {
lmeState.showDrawingMeasurements = Boolean(enabled);
refreshDrawingMeasurements();
refreshLayerManager();
setInfo(lmeState.showDrawingMeasurements
? "Misure dei disegni visibili."
: "Misure dei disegni nascoste.");
@@ -1901,15 +2366,27 @@ function renderMeasurements(sourceGroup, targetGroup, visible, sourceType) {
sourceType
};
visitMeasurableLayers(sourceGroup, layer => {
const categoryKey = sourceType === "imported" ? "imported" : "drawings";
const objectId = managedLayerId(layer, categoryKey);
const showSummary = !lmeState.managerHiddenMeasurementSummaryIds.has(objectId);
const showSides = !lmeState.managerHiddenMeasurementSideIds.has(objectId);
if (!showSummary && !showSides) {
return;
}
if (context.count >= context.max || !layerIsInView(layer, context.bounds)) {
return;
}
const layerContext = {
...context,
showSummary,
showSides: context.showSides && showSides
};
if (layer instanceof L.Circle) {
renderCircleMeasurement(layer, targetGroup, context);
renderCircleMeasurement(layer, targetGroup, layerContext);
} else if (layer instanceof L.Polygon) {
renderPolygonMeasurement(layer, targetGroup, context);
renderPolygonMeasurement(layer, targetGroup, layerContext);
} else if (layer instanceof L.Polyline) {
renderPolylineMeasurement(layer, targetGroup, context);
renderPolylineMeasurement(layer, targetGroup, layerContext);
}
});
}
@@ -1936,6 +2413,9 @@ function layerIsInView(layer, mapBounds) {
}
function renderCircleMeasurement(layer, targetGroup, context) {
if (!context.showSummary) {
return;
}
const radius = layer.getRadius();
const area = Math.PI * radius * radius;
const circumference = 2 * Math.PI * radius;
@@ -1964,6 +2444,7 @@ function renderPolygonMeasurement(layer, targetGroup, context) {
const center = typeof layer.getCenter === "function"
? layer.getCenter()
: layer.getBounds().getCenter();
if (context.showSummary) {
addMeasurementLabel(
targetGroup,
center,
@@ -1971,6 +2452,7 @@ function renderPolygonMeasurement(layer, targetGroup, context) {
"summary",
context);
}
}
function renderPolylineMeasurement(layer, targetGroup, context) {
const lines = lineLatLngGroups(layer.getLatLngs());
@@ -1979,7 +2461,7 @@ function renderPolylineMeasurement(layer, targetGroup, context) {
lines.forEach(line => addSegmentLabels(line, false, targetGroup, context));
}
const longest = lines.reduce((current, line) => line.length > current.length ? line : current, []);
if (longest.length) {
if (context.showSummary && longest.length) {
addMeasurementLabel(
targetGroup,
longest[Math.floor(longest.length / 2)],
@@ -2325,7 +2807,11 @@ function captureDisplayOptions() {
selectedParcelsVisible: lmeState.selectedParcelsVisible,
layerOrder: [...lmeState.layerOrder],
layerObjectOrder: { ...lmeState.managerObjectOrder },
layerCategoryNames: { ...lmeState.managerCategoryNames },
removedLayerCategories: [...lmeState.managerRemovedCategories],
hiddenLayerObjects: [...lmeState.managerHiddenObjectIds],
hiddenLayerMeasurementSummaries: [...lmeState.managerHiddenMeasurementSummaryIds],
hiddenLayerMeasurementSides: [...lmeState.managerHiddenMeasurementSideIds],
hiddenLayerCategories: [...lmeState.managerHiddenCategories],
trailEnabled: lmeState.gpsTrailEnabled
};
@@ -2359,9 +2845,21 @@ function applyProjectDisplayOptions(options) {
if (options.layerObjectOrder && typeof options.layerObjectOrder === "object") {
lmeState.managerObjectOrder = options.layerObjectOrder;
}
if (options.layerCategoryNames && typeof options.layerCategoryNames === "object") {
lmeState.managerCategoryNames = { ...options.layerCategoryNames };
}
if (Array.isArray(options.removedLayerCategories)) {
lmeState.managerRemovedCategories = new Set(options.removedLayerCategories);
}
if (Array.isArray(options.hiddenLayerObjects)) {
lmeState.managerHiddenObjectIds = new Set(options.hiddenLayerObjects);
}
if (Array.isArray(options.hiddenLayerMeasurementSummaries)) {
lmeState.managerHiddenMeasurementSummaryIds = new Set(options.hiddenLayerMeasurementSummaries);
}
if (Array.isArray(options.hiddenLayerMeasurementSides)) {
lmeState.managerHiddenMeasurementSideIds = new Set(options.hiddenLayerMeasurementSides);
}
if (Array.isArray(options.hiddenLayerCategories)) {
lmeState.managerHiddenCategories = new Set(options.hiddenLayerCategories);
}
@@ -2439,18 +2937,35 @@ function managedGroupGeoJson(group, categoryKey) {
}
});
});
const categoryName = lmeState.managerCategoryNames[categoryKey];
if (categoryName) {
features.forEach(feature => {
feature.properties = { ...(feature.properties || {}), _lmeCategoryName: categoryName };
});
}
return { type: "FeatureCollection", features };
}
function resetLayerManagerProjectState() {
lmeState.managerHiddenObjects.clear();
lmeState.managerHiddenObjectIds.clear();
lmeState.managerHiddenMeasurementSummaryIds.clear();
lmeState.managerHiddenMeasurementSideIds.clear();
lmeState.managerHiddenCategories.clear();
lmeState.managerRemovedCategories.clear();
lmeState.managerObjectOrder = {};
lmeState.managerCategoryNames = {};
clearManagerHighlight();
}
function clearManagedCategoryState(categoryKey) {
const category = layerManagerCategories().find(item => item.key === categoryKey);
if (category) {
managedRecordsForCategory(category).forEach(record => {
lmeState.managerHiddenMeasurementSummaryIds.delete(record.id);
lmeState.managerHiddenMeasurementSideIds.delete(record.id);
});
}
[...lmeState.managerHiddenObjects.entries()].forEach(([id, record]) => {
if (record.categoryKey === categoryKey) {
lmeState.managerHiddenObjects.delete(id);
@@ -2462,10 +2977,18 @@ function clearManagedCategoryState(categoryKey) {
}
function bindStoredFeaturePopup(feature, layer) {
const properties = feature?.properties || {};
updateStoredFeaturePopup(layer, feature?.properties);
}
function updateStoredFeaturePopup(layer, sourceProperties) {
const properties = sourceProperties || layer?.feature?.properties || {};
const label = properties.name || properties.Name || properties.label || properties.LABEL;
if (label) {
layer.bindPopup(`<strong>${escapeHtml(label)}</strong>`);
return;
}
if (typeof layer?.unbindPopup === "function") {
layer.unbindPopup();
}
}