livio/LMEMappeCatastaliProApp
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

Fix layer actions and add reusable color editors

Browse Source
This commit is contained in:
livio committed 2026-09-25 15:40:20 +02:00
1 parent cfba1b998b
commit 00053e4d5f
7 files changed
+254 -37
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

wwwroot/js/lme-map.js
+181 -24
View File
@@ -410,9 +410,7 @@ function displayOfficialParcel(xmlText, latitude, longitude, parcel, label, shou
? findParcelLayerByReference(targetGroup, ref) || restoreHiddenParcelLayerByReference(ref)
: null;
if (existingLayer) {
if (typeof existingLayer.setStyle === "function") {
existingLayer.setStyle({ color: "#ef4444", weight: 4, opacity: 1, fillColor: "#fbbf24", fillOpacity: 0.26 });
}
applyStyleFromProperties(existingLayer);
targetGroup.bringToFront();
if (shouldFit) {
fitLayer(existingLayer);
@@ -444,7 +442,12 @@ function displayOfficialParcel(xmlText, latitude, longitude, parcel, label, shou
feature.properties = {
...(feature.properties || {}),
_lmeParcelReference: String(ref || label || normalizedParcel)
_lmeParcelReference: String(ref || label || normalizedParcel),
_lmeColor: feature.properties?._lmeColor || "#ef4444",
_lmeFillColor: feature.properties?._lmeFillColor || "#fbbf24",
_lmeWeight: Number(feature.properties?._lmeWeight) || 4,
_lmeOpacity: Number.isFinite(Number(feature.properties?._lmeOpacity)) ? Number(feature.properties._lmeOpacity) : 1,
_lmeFillOpacity: Number.isFinite(Number(feature.properties?._lmeFillOpacity)) ? Number(feature.properties._lmeFillOpacity) : 0.26
};
const layer = L.geoJSON(feature, {
pane: normalizedParcel ? "selectedParcelsPane" : "gpsParcelsPane",
@@ -1493,6 +1496,10 @@ function managedObjectCanRemove(record) {
return ["drawings", "imported", "importedSheets", "selectedParcels", "gpsParcels"].includes(record.categoryKey);
}
function managedCategoryCanMove(categoryKey) {
return ["drawings", "imported", "importedSheets", "selectedParcels"].includes(categoryKey);
}
function layerManagerRowActions(renameButton, moveButton, removeButton) {
if (!renameButton && !moveButton && !removeButton) {
return "";
@@ -1607,7 +1614,7 @@ function managedMoveDestinations() {
function showMoveManagedRecordsDialog(records, subject) {
if (lmeState.readOnly) { setInfo("Il progetto e' in sola lettura."); return; }
if (!records.length || records.some(record => !["drawings", "imported"].includes(record.categoryKey))) {
if (!records.length || records.some(record => !managedCategoryCanMove(record.categoryKey))) {
setInfo("Questo oggetto o gruppo non puo essere spostato.");
return;
}
@@ -1623,9 +1630,12 @@ function showMoveManagedRecordsDialog(records, subject) {
const categorySelect = form.elements.category;
const groupSelect = form.elements.group;
const newGroupInput = form.elements.newGroup;
const currentCategory = records.every(record => record.categoryKey === records[0].categoryKey)
const sourceCategory = records.every(record => record.categoryKey === records[0].categoryKey)
? records[0].categoryKey
: "drawings";
const currentCategory = destinations.some(destination => destination.key === sourceCategory)
? sourceCategory
: "imported";
categorySelect.value = currentCategory;
const refreshGroups = () => {
const destination = destinations.find(item => item.key === categorySelect.value);
@@ -1665,7 +1675,7 @@ function showMoveManagedRecordsDialog(records, subject) {
function moveManagedRecordsToGroup(records, targetCategory, targetSource, targetGroupName) {
if (lmeState.readOnly) { setInfo("Il progetto e' in sola lettura."); return; }
const movable = records.filter(record => ["drawings", "imported"].includes(record.categoryKey));
const movable = records.filter(record => managedCategoryCanMove(record.categoryKey));
if (!movable.length || !["drawings", "imported"].includes(targetCategory)) {
setInfo("Questo gruppo non puo essere spostato.");
return;
@@ -1808,7 +1818,7 @@ function renderLayerManagerCategory(category, records) {
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 moveButton = records.length && ["drawings", "imported"].includes(category.key)
const moveButton = records.length && managedCategoryCanMove(category.key)
? `<button type="button" class="layer-membership-button" aria-label="Sposta gruppo in un altro gruppo" title="Sposta nel gruppo">Sposta nel gruppo</button>`
: "";
const rowActions = layerManagerRowActions(renameButton, moveButton, removeButton);
@@ -1932,7 +1942,7 @@ function renderLayerManagerObject(record, index) {
const removeButton = managedObjectCanRemove(record)
? `<button type="button" class="layer-remove-button" aria-label="Rimuovi oggetto dal progetto" title="Rimuovi dal progetto">Rimuovi</button>`
: "";
const moveButton = ["drawings", "imported"].includes(record.categoryKey)
const moveButton = managedCategoryCanMove(record.categoryKey)
? `<button type="button" class="layer-membership-button" aria-label="Sposta oggetto in un altro gruppo" title="Sposta nel gruppo">Sposta nel gruppo</button>`
: "";
const rowActions = layerManagerRowActions(renameButton, moveButton, removeButton);
@@ -2033,16 +2043,26 @@ function renderLayerSelectionToolbar() {
function renderManagedGroupTools(records) {
const tools = document.createElement("div");
tools.className = "layer-group-tools";
const properties = records[0]?.layer?.feature?.properties || {};
const firstLayer = records[0]?.layer;
const properties = firstLayer?.feature?.properties || {};
const lineColor = normalizedColor(properties._lmeColor || firstLayer?.options?.color, "#16806a");
const fillColor = normalizedColor(properties._lmeFillColor || firstLayer?.options?.fillColor, lineColor);
tools.innerHTML = `<strong>Azioni gruppo</strong><span class="layer-group-totals">${escapeHtml(managedGroupTotals(records))}</span><div class="layer-style-controls">
<label>Colore<input type="color" value="${normalizedColor(properties._lmeColor, "#16806a")}"></label>
<label>Spessore<input type="range" min="1" max="10" step="1" value="${Number(properties._lmeWeight) || 3}"></label>
<label>Opacita<input type="range" min="0.1" max="1" step="0.1" value="${Number(properties._lmeOpacity) || 1}"></label></div>
${managedColorEditorMarkup("color", "Colore linea", lineColor)}
${managedColorEditorMarkup("fillColor", "Colore riempimento", fillColor)}
<label>Spessore<input type="range" data-field="weight" min="1" max="10" step="1" value="${Number(properties._lmeWeight) || Number(firstLayer?.options?.weight) || 3}"></label>
<label>Opacita<input type="range" data-field="opacity" min="0.1" max="1" step="0.1" value="${Number.isFinite(Number(properties._lmeOpacity)) ? Number(properties._lmeOpacity) : Number(firstLayer?.options?.opacity) || 1}"></label></div>
<div class="layer-compact-actions"><button type="button" data-group-action="select">Seleziona tutti</button><button type="button" data-group-action="lock">Blocca/sblocca</button><button type="button" data-group-action="labels">Etichette</button></div>`;
const inputs = tools.querySelectorAll("input");
inputs.forEach(input => input.addEventListener("change", () => {
applyManagedStyle(records, { color: inputs[0].value, weight: Number(inputs[1].value), opacity: Number(inputs[2].value) });
}));
const applyCurrentStyle = () => {
applyManagedStyle(records, {
color: tools.querySelector("[data-color-picker='color']").value,
fillColor: tools.querySelector("[data-color-picker='fillColor']").value,
weight: Number(tools.querySelector("[data-field='weight']").value),
opacity: Number(tools.querySelector("[data-field='opacity']").value)
});
};
bindManagedColorEditors(tools, applyCurrentStyle);
tools.querySelectorAll("input[type='range']").forEach(input => input.addEventListener("change", applyCurrentStyle));
tools.querySelector("[data-group-action='select']").addEventListener("click", () => {
records.forEach(record => lmeState.managerSelectedObjectIds.add(record.id)); refreshLayerManager();
});
@@ -2079,11 +2099,13 @@ function renderManagedObjectTools(record) {
const locked = Boolean(properties._lmeLocked);
const tools = document.createElement("section");
tools.className = "layer-object-tools";
const lineColor = normalizedColor(properties._lmeColor || record.layer?.options?.color, "#f97316");
const fillColor = normalizedColor(properties._lmeFillColor || record.layer?.options?.fillColor, lineColor);
tools.innerHTML = `<label class="layer-manager-suboption"><input type="checkbox" data-field="selected" ${selected ? "checked" : ""}><span>Seleziona per azioni multiple</span></label>
<label class="layer-manager-suboption"><input type="checkbox" data-field="locked" ${locked ? "checked" : ""}><span>Blocca modifiche e rimozione</span></label>
<label class="layer-manager-suboption"><input type="checkbox" data-field="label" ${properties._lmeLabelVisible ? "checked" : ""}><span>Etichetta permanente sulla mappa</span></label>
<div class="layer-style-controls"><label>Linea<input type="color" data-field="color" value="${normalizedColor(properties._lmeColor, "#f97316")}"></label>
<label>Riempimento<input type="color" data-field="fillColor" value="${normalizedColor(properties._lmeFillColor, "#fb923c")}"></label>
<div class="layer-style-controls">${managedColorEditorMarkup("color", "Colore linea", lineColor)}
${managedColorEditorMarkup("fillColor", "Colore riempimento", fillColor)}
<label>Spessore<input type="range" data-field="weight" min="1" max="10" step="1" value="${Number(properties._lmeWeight) || 3}"></label>
<label>Opacita<input type="range" data-field="opacity" min="0.1" max="1" step="0.1" value="${Number(properties._lmeOpacity) || 1}"></label>
<label>Riempimento %<input type="range" data-field="fillOpacity" min="0" max="0.8" step="0.05" value="${Number.isFinite(Number(properties._lmeFillOpacity)) ? Number(properties._lmeFillOpacity) : 0.2}"></label>
@@ -2099,14 +2121,16 @@ function renderManagedObjectTools(record) {
});
tools.querySelector("[data-field='locked']").addEventListener("change", event => updateManagedProperties([record], value => { value._lmeLocked = event.target.checked; }));
tools.querySelector("[data-field='label']").addEventListener("change", event => updateManagedProperties([record], value => { value._lmeLabelVisible = event.target.checked; }));
tools.querySelectorAll(".layer-style-controls input,.layer-style-controls select").forEach(input => input.addEventListener("change", () => applyManagedStyle([record], {
color: tools.querySelector("[data-field='color']").value,
fillColor: tools.querySelector("[data-field='fillColor']").value,
const applyCurrentStyle = () => applyManagedStyle([record], {
color: tools.querySelector("[data-color-picker='color']").value,
fillColor: tools.querySelector("[data-color-picker='fillColor']").value,
weight: Number(tools.querySelector("[data-field='weight']").value),
opacity: Number(tools.querySelector("[data-field='opacity']").value),
fillOpacity: Number(tools.querySelector("[data-field='fillOpacity']").value),
dash: tools.querySelector("[data-field='dash']").value
})));
});
bindManagedColorEditors(tools, applyCurrentStyle);
tools.querySelectorAll(".layer-style-controls input[type='range'],.layer-style-controls select").forEach(input => input.addEventListener("change", applyCurrentStyle));
tools.querySelector("[data-field='notes']").addEventListener("change", event => updateManagedProperties([record], value => { value._lmeNotes = event.target.value.trim(); }));
tools.querySelector("[data-field='photo']").addEventListener("change", async event => {
const file = event.target.files?.[0]; if (!file) return;
@@ -2128,6 +2152,131 @@ function normalizedColor(value, fallback) {
return /^#[0-9a-f]{6}$/i.test(String(value || "")) ? value : fallback;
}
function managedColorEditorMarkup(field, label, color) {
const formats = managedColorFormats(color);
return `<section class="layer-color-editor" data-color-editor="${field}">
<header><strong>${escapeHtml(label)}</strong><input type="color" data-color-picker="${field}" value="${formats.hex}" aria-label="Seleziona ${escapeHtml(label.toLocaleLowerCase("it"))}"><button type="button" data-color-eyedropper title="Preleva un colore dallo schermo">Preleva</button></header>
<div class="layer-color-formats">
<label>HEX<input type="text" data-color-format="hex" value="${formats.hex}" maxlength="7" spellcheck="false"></label>
<label>RGB<input type="text" data-color-format="rgb" value="${formats.rgb}" spellcheck="false"></label>
<label>HSL<input type="text" data-color-format="hsl" value="${formats.hsl}" spellcheck="false"></label>
</div>
<button type="button" class="layer-color-copy" data-color-copy>Copia HEX</button>
</section>`;
}
function bindManagedColorEditors(container, onChanged) {
container.querySelectorAll("[data-color-editor]").forEach(editor => {
const picker = editor.querySelector("[data-color-picker]");
const formatInputs = [...editor.querySelectorAll("[data-color-format]")];
const sync = (color, notify) => {
const formats = managedColorFormats(color);
picker.value = formats.hex;
formatInputs.forEach(input => { input.value = formats[input.dataset.colorFormat]; });
if (notify) onChanged();
};
picker.addEventListener("change", () => sync(picker.value, true));
formatInputs.forEach(input => input.addEventListener("change", () => {
const parsed = parseManagedColor(input.value);
if (!parsed) {
sync(picker.value, false);
setInfo("Colore non valido. Usa HEX, rgb(r, g, b) oppure hsl(h, s%, l%).");
return;
}
sync(parsed, true);
}));
const eyedropper = editor.querySelector("[data-color-eyedropper]");
if (typeof window.EyeDropper !== "function") {
eyedropper.hidden = true;
} else {
eyedropper.addEventListener("click", async () => {
try {
const result = await new window.EyeDropper().open();
if (result?.sRGBHex) sync(result.sRGBHex, true);
} catch (error) {
if (error?.name !== "AbortError") setInfo("Contagocce non disponibile su questo dispositivo.");
}
});
}
editor.querySelector("[data-color-copy]").addEventListener("click", async () => {
const value = picker.value.toUpperCase();
try {
await navigator.clipboard.writeText(value);
setInfo(`Colore ${value} copiato. Puoi incollarlo nel campo HEX di un altro oggetto.`);
} catch {
const hexInput = editor.querySelector("[data-color-format='hex']");
hexInput.focus();
hexInput.select();
setInfo(`Selezionato ${value}: usa il comando Copia del dispositivo.`);
}
});
});
}
function parseManagedColor(value) {
const text = String(value || "").trim();
const shortHex = text.match(/^#([0-9a-f]{3})$/i);
if (shortHex) return `#${[...shortHex[1]].map(part => part + part).join("")}`.toUpperCase();
if (/^#[0-9a-f]{6}$/i.test(text)) return text.toUpperCase();
const rgb = text.match(/^rgba?\(\s*(\d{1,3})\s*[, ]\s*(\d{1,3})\s*[, ]\s*(\d{1,3})(?:\s*[,/]\s*[\d.]+)?\s*\)$/i);
if (rgb) {
const values = rgb.slice(1, 4).map(Number);
if (values.every(channel => channel >= 0 && channel <= 255)) return managedRgbToHex(...values);
}
const hsl = text.match(/^hsla?\(\s*(-?[\d.]+)(?:deg)?\s*[, ]\s*([\d.]+)%\s*[, ]\s*([\d.]+)%(?:\s*[,/]\s*[\d.]+)?\s*\)$/i);
if (hsl) {
const saturation = Number(hsl[2]); const lightness = Number(hsl[3]);
if (saturation >= 0 && saturation <= 100 && lightness >= 0 && lightness <= 100) {
return managedRgbToHex(...managedHslToRgb(Number(hsl[1]), saturation, lightness));
}
}
return null;
}
function managedColorFormats(color) {
const hex = normalizedColor(color, "#000000").toUpperCase();
const [red, green, blue] = [1, 3, 5].map(index => parseInt(hex.slice(index, index + 2), 16));
const redUnit = red / 255; const greenUnit = green / 255; const blueUnit = blue / 255;
const max = Math.max(redUnit, greenUnit, blueUnit); const min = Math.min(redUnit, greenUnit, blueUnit);
const lightness = (max + min) / 2; const delta = max - min;
let hue = 0; let saturation = 0;
if (delta) {
saturation = delta / (1 - Math.abs(2 * lightness - 1));
if (max === redUnit) hue = 60 * (((greenUnit - blueUnit) / delta) % 6);
else if (max === greenUnit) hue = 60 * ((blueUnit - redUnit) / delta + 2);
else hue = 60 * ((redUnit - greenUnit) / delta + 4);
}
if (hue < 0) hue += 360;
return {
hex,
rgb: `rgb(${red}, ${green}, ${blue})`,
hsl: `hsl(${managedColorDecimal(hue)}, ${managedColorDecimal(saturation * 100)}%, ${managedColorDecimal(lightness * 100)}%)`
};
}
function managedColorDecimal(value) {
return String(Number(value.toFixed(2)));
}
function managedRgbToHex(red, green, blue) {
return `#${[red, green, blue].map(channel => Math.round(channel).toString(16).padStart(2, "0")).join("")}`.toUpperCase();
}
function managedHslToRgb(hue, saturation, lightness) {
const normalizedHue = ((hue % 360) + 360) % 360;
const saturationUnit = saturation / 100; const lightnessUnit = lightness / 100;
const chroma = (1 - Math.abs(2 * lightnessUnit - 1)) * saturationUnit;
const section = normalizedHue / 60; const intermediate = chroma * (1 - Math.abs(section % 2 - 1));
const values = section < 1 ? [chroma, intermediate, 0]
: section < 2 ? [intermediate, chroma, 0]
: section < 3 ? [0, chroma, intermediate]
: section < 4 ? [0, intermediate, chroma]
: section < 5 ? [intermediate, 0, chroma]
: [chroma, 0, intermediate];
const offset = lightnessUnit - chroma / 2;
return values.map(channel => Math.round((channel + offset) * 255));
}
function editManagedAttributes(record) {
if (lmeState.readOnly) { setInfo("Il progetto e' in sola lettura."); return; }
const properties = record.layer?.feature?.properties || {};
@@ -4340,7 +4489,14 @@ function loadProjectSnapshot(raw, projectName) {
applyImportedSheetVisibility();
L.geoJSON(data.selectedParcels || emptyFeatureCollection(), {
pane: "selectedParcelsPane",
style: { color: "#ef4444", weight: 4, opacity: 1, fillColor: "#fbbf24", fillOpacity: 0.26 },
style: feature => ({
color: feature?.properties?._lmeColor || "#ef4444",
weight: Number(feature?.properties?._lmeWeight) || 4,
opacity: Number.isFinite(Number(feature?.properties?._lmeOpacity)) ? Number(feature.properties._lmeOpacity) : 1,
fillColor: feature?.properties?._lmeFillColor || "#fbbf24",
fillOpacity: Number.isFinite(Number(feature?.properties?._lmeFillOpacity)) ? Number(feature.properties._lmeFillOpacity) : 0.26,
dashArray: feature?.properties?._lmeDash || null
}),
onEachFeature: (feature, layer) => {
const properties = feature?.properties || {};
const reference = properties.NATIONALCADASTRALREFERENCE
@@ -4349,6 +4505,7 @@ function loadProjectSnapshot(raw, projectName) {
|| "Particella catastale";
layer.lmeParcelReference = reference;
layer.bindPopup(`<strong>${escapeHtml(reference)}</strong>`);
applyStyleFromProperties(layer);
}
}).addTo(lmeState.selectedParcelsLayer);