fixed cut overlays and solved the docker duplication thing
This commit is contained in:
@@ -183,92 +183,123 @@ export class CutManager {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Display a cut on the map (enhanced to support multiple cuts)
|
||||
*/
|
||||
/**
|
||||
* Display a cut on the map (enhanced to support multiple cuts)
|
||||
*/
|
||||
displayCut(cutData, autoDisplayed = false) {
|
||||
if (!this.map) {
|
||||
console.error('Map not initialized');
|
||||
return false;
|
||||
}
|
||||
|
||||
// Normalize field names for consistent access
|
||||
const normalizedCut = {
|
||||
...cutData,
|
||||
id: cutData.id || cutData.Id || cutData.ID,
|
||||
name: cutData.name || cutData.Name,
|
||||
description: cutData.description || cutData.Description,
|
||||
color: cutData.color || cutData.Color,
|
||||
opacity: cutData.opacity || cutData.Opacity,
|
||||
category: cutData.category || cutData.Category,
|
||||
geojson: cutData.geojson || cutData.GeoJSON || cutData['GeoJSON Data'],
|
||||
is_public: cutData.is_public || cutData['Public Visibility'],
|
||||
is_official: cutData.is_official || cutData['Official Cut'],
|
||||
autoDisplayed: autoDisplayed // Track if this was auto-displayed
|
||||
};
|
||||
|
||||
// Check if already displayed
|
||||
if (this.cutLayers.has(normalizedCut.id)) {
|
||||
console.log(`Cut already displayed: ${normalizedCut.name}`);
|
||||
return true;
|
||||
}
|
||||
|
||||
if (!normalizedCut.geojson) {
|
||||
console.error('Cut has no GeoJSON data');
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const geojsonData = typeof normalizedCut.geojson === 'string' ?
|
||||
JSON.parse(normalizedCut.geojson) : normalizedCut.geojson;
|
||||
|
||||
const cutLayer = L.geoJSON(geojsonData, {
|
||||
style: {
|
||||
color: normalizedCut.color || '#3388ff',
|
||||
fillColor: normalizedCut.color || '#3388ff',
|
||||
fillOpacity: parseFloat(normalizedCut.opacity) || 0.3,
|
||||
weight: 2,
|
||||
opacity: 1,
|
||||
className: 'cut-polygon'
|
||||
}
|
||||
});
|
||||
|
||||
// Add popup with cut info
|
||||
cutLayer.bindPopup(`
|
||||
<div class="cut-popup">
|
||||
<h3>${normalizedCut.name}</h3>
|
||||
${normalizedCut.description ? `<p>${normalizedCut.description}</p>` : ''}
|
||||
${normalizedCut.category ? `<p><strong>Category:</strong> ${normalizedCut.category}</p>` : ''}
|
||||
${normalizedCut.is_official ? '<span class="badge official">Official Cut</span>' : ''}
|
||||
</div>
|
||||
`);
|
||||
|
||||
cutLayer.addTo(this.map);
|
||||
|
||||
// Store in both tracking systems
|
||||
this.cutLayers.set(normalizedCut.id, cutLayer);
|
||||
this.displayedCuts.set(normalizedCut.id, normalizedCut);
|
||||
|
||||
// Update current cut reference (for legacy compatibility)
|
||||
this.currentCut = normalizedCut;
|
||||
this.currentCutLayer = cutLayer;
|
||||
|
||||
console.log(`Displayed cut: ${normalizedCut.name} (ID: ${normalizedCut.id})`);
|
||||
return true;
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error displaying cut:', error);
|
||||
return false;
|
||||
}
|
||||
|
||||
// ...existing code...
|
||||
|
||||
displayCut(cutData, autoDisplayed = false) {
|
||||
if (!this.map) {
|
||||
console.error('Map not initialized');
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the currently displayed cut (legacy method - now hides all cuts)
|
||||
*/
|
||||
// Normalize field names for consistent access
|
||||
const normalizedCut = {
|
||||
...cutData,
|
||||
id: cutData.id || cutData.Id || cutData.ID,
|
||||
name: cutData.name || cutData.Name,
|
||||
description: cutData.description || cutData.Description,
|
||||
color: cutData.color || cutData.Color,
|
||||
opacity: cutData.opacity || cutData.Opacity,
|
||||
category: cutData.category || cutData.Category,
|
||||
geojson: cutData.geojson || cutData.GeoJSON || cutData['GeoJSON Data'],
|
||||
is_public: cutData.is_public || cutData['Public Visibility'],
|
||||
is_official: cutData.is_official || cutData['Official Cut'],
|
||||
autoDisplayed: autoDisplayed // Track if this was auto-displayed
|
||||
};
|
||||
|
||||
// Check if already displayed
|
||||
if (this.cutLayers.has(normalizedCut.id)) {
|
||||
console.log(`Cut already displayed: ${normalizedCut.name}`);
|
||||
return true;
|
||||
}
|
||||
|
||||
if (!normalizedCut.geojson) {
|
||||
console.error('Cut has no GeoJSON data');
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const geojsonData = typeof normalizedCut.geojson === 'string' ?
|
||||
JSON.parse(normalizedCut.geojson) : normalizedCut.geojson;
|
||||
|
||||
// Parse opacity value - ensure it's a number between 0 and 1
|
||||
let opacityValue = parseFloat(normalizedCut.opacity);
|
||||
|
||||
// Validate opacity is within range
|
||||
if (isNaN(opacityValue) || opacityValue < 0 || opacityValue > 1) {
|
||||
opacityValue = 0.3; // Default fallback
|
||||
console.log(`Invalid opacity value (${normalizedCut.opacity}), using default: ${opacityValue}`);
|
||||
}
|
||||
|
||||
const cutLayer = L.geoJSON(geojsonData, {
|
||||
style: {
|
||||
color: normalizedCut.color || '#3388ff',
|
||||
fillColor: normalizedCut.color || '#3388ff',
|
||||
fillOpacity: opacityValue,
|
||||
weight: 2,
|
||||
opacity: 0.8, // Stroke opacity - keeping this slightly transparent for better visibility
|
||||
className: 'cut-polygon'
|
||||
},
|
||||
// Add onEachFeature to apply styles to each individual feature
|
||||
onEachFeature: function (feature, layer) {
|
||||
// Apply styles directly to the layer to ensure they override CSS
|
||||
if (layer.setStyle) {
|
||||
layer.setStyle({
|
||||
fillOpacity: opacityValue,
|
||||
color: normalizedCut.color || '#3388ff',
|
||||
fillColor: normalizedCut.color || '#3388ff',
|
||||
weight: 2,
|
||||
opacity: 0.8
|
||||
});
|
||||
}
|
||||
|
||||
// Add cut-polygon class to the path element
|
||||
if (layer._path) {
|
||||
layer._path.classList.add('cut-polygon');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Add popup with cut info
|
||||
cutLayer.bindPopup(`
|
||||
<div class="cut-popup">
|
||||
<h3>${normalizedCut.name}</h3>
|
||||
${normalizedCut.description ? `<p>${normalizedCut.description}</p>` : ''}
|
||||
${normalizedCut.category ? `<p><strong>Category:</strong> ${normalizedCut.category}</p>` : ''}
|
||||
${normalizedCut.is_official ? '<span class="badge official">Official Cut</span>' : ''}
|
||||
</div>
|
||||
`);
|
||||
|
||||
cutLayer.addTo(this.map);
|
||||
|
||||
// Ensure cut-polygon class is applied to all path elements after adding to map
|
||||
cutLayer.eachLayer(function(layer) {
|
||||
if (layer._path) {
|
||||
layer._path.classList.add('cut-polygon');
|
||||
// Force the fill-opacity style to ensure it overrides CSS
|
||||
layer._path.style.fillOpacity = opacityValue;
|
||||
}
|
||||
});
|
||||
|
||||
// Store in both tracking systems
|
||||
this.cutLayers.set(normalizedCut.id, cutLayer);
|
||||
this.displayedCuts.set(normalizedCut.id, normalizedCut);
|
||||
|
||||
// Update current cut reference (for legacy compatibility)
|
||||
this.currentCut = normalizedCut;
|
||||
this.currentCutLayer = cutLayer;
|
||||
|
||||
console.log(`Displayed cut: ${normalizedCut.name} (ID: ${normalizedCut.id}) with opacity: ${opacityValue} (raw: ${normalizedCut.opacity})`);
|
||||
return true;
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error displaying cut:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// ...existing code...
|
||||
|
||||
hideCut() {
|
||||
this.hideAllCuts();
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user