All function fixed
This commit is contained in:
parent
89d137e577
commit
478ff1d7d5
456
Drawing.js
456
Drawing.js
@ -185,7 +185,7 @@ function DrawArrow(coordinates, polygonId) {
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
updatePolygonOnMap(ARROW, polygonId, drawArrowOnMap, arrowGeoJSON);
|
updatePolygonOnMap(ARROW, polygonId, drawOnMap, arrowGeoJSON);
|
||||||
}
|
}
|
||||||
|
|
||||||
function DrawFrontline(coordinates, polygonId) {
|
function DrawFrontline(coordinates, polygonId) {
|
||||||
@ -213,14 +213,14 @@ function DrawFrontline(coordinates, polygonId) {
|
|||||||
|
|
||||||
// Both sides
|
// Both sides
|
||||||
if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
|
if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
|
||||||
updatePolygonOnMap(FRONTLINE, polygonId, drawFrontlineOnMap, polygonToDraw);
|
updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw);
|
||||||
|
|
||||||
let additionalPolygonToDraw = frontlineGeoJSON.rightPoly;
|
let additionalPolygonToDraw = frontlineGeoJSON.rightPoly;
|
||||||
drawFrontlineOnMap(additionalPolygonToDraw, FRONTLINE + "-" + (polygonId+1));
|
drawOnMap(additionalPolygonToDraw, FRONTLINE + "-" + (polygonId+1));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
updatePolygonOnMap(FRONTLINE, polygonId, drawFrontlineOnMap, polygonToDraw);
|
updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw);
|
||||||
}
|
}
|
||||||
|
|
||||||
function updatePolygonOnMap(prefix, polygonId, drawFunction, geojson) {
|
function updatePolygonOnMap(prefix, polygonId, drawFunction, geojson) {
|
||||||
@ -235,297 +235,277 @@ function updatePolygonOnMap(prefix, polygonId, drawFunction, geojson) {
|
|||||||
currentFeature = allFeatures.find(f => f.polygonId === polygonId);
|
currentFeature = allFeatures.find(f => f.polygonId === polygonId);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function drawOnMap(frontlineGeoJSON, id) {
|
||||||
|
if (map.getLayer(id)) map.removeLayer(id);
|
||||||
|
if (map.getSource(id)) map.removeSource(id);
|
||||||
|
|
||||||
function drawArrowOnMap(geojson, id) {
|
map.addSource(id, {
|
||||||
map.addSource(id, {
|
type: 'geojson',
|
||||||
type: 'geojson',
|
data: frontlineGeoJSON
|
||||||
data: geojson
|
});
|
||||||
});
|
|
||||||
|
|
||||||
map.addLayer({
|
map.addLayer({
|
||||||
id: id,
|
id: id,
|
||||||
type: 'fill',
|
type: 'fill',
|
||||||
source: id,
|
source: id,
|
||||||
paint: {
|
paint: {
|
||||||
'fill-color': '#ff0000',
|
'fill-color': '#ff6600',
|
||||||
'fill-opacity': 0.5
|
'fill-opacity': 0.6,
|
||||||
}
|
'fill-outline-color': '#cc3300'
|
||||||
});
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function drawFrontlineOnMap(frontlineGeoJSON, id) {
|
function handleDelete(polygonType)
|
||||||
if (map.getLayer(id)) map.removeLayer(id);
|
|
||||||
if (map.getSource(id)) map.removeSource(id);
|
|
||||||
|
|
||||||
map.addSource(id, {
|
|
||||||
type: 'geojson',
|
|
||||||
data: frontlineGeoJSON
|
|
||||||
});
|
|
||||||
|
|
||||||
map.addLayer({
|
|
||||||
id: id,
|
|
||||||
type: 'fill',
|
|
||||||
source: id,
|
|
||||||
paint: {
|
|
||||||
'fill-color': '#ff6600',
|
|
||||||
'fill-opacity': 0.6,
|
|
||||||
'fill-outline-color': '#cc3300'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function MyDelete(polygonType)
|
|
||||||
{
|
{
|
||||||
if (!currentFeature) return;
|
if (!currentFeature) return;
|
||||||
|
|
||||||
const id = currentFeature.id;
|
const id = currentFeature.id;
|
||||||
|
|
||||||
draw.delete(id);
|
draw.delete(id);
|
||||||
//ARROW
|
|
||||||
if(polygonType == ARROW){
|
|
||||||
const arrowLayerId = polygonType + "-" + id;
|
|
||||||
if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
|
|
||||||
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
|
|
||||||
|
|
||||||
arrowParamsMap.delete(id);
|
//ARROW
|
||||||
}
|
if(polygonType == ARROW){
|
||||||
|
const arrowLayerId = polygonType + "-" + id;
|
||||||
//Frontline
|
DeleteFromMap(arrowLayerId, id);
|
||||||
if(polygonType == FRONTLINE){
|
}
|
||||||
const frontlineLayerId = polygonType + "-" + id;
|
|
||||||
|
|
||||||
if (frontlineParamsMap.get(id).style == 3){ //BOTH_SIDES
|
//Frontline
|
||||||
|
if(polygonType == FRONTLINE){
|
||||||
|
const frontlineLayerId = polygonType + "-" + id;
|
||||||
|
|
||||||
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
|
if (frontlineParamsMap.get(id).style == 3){ //BOTH_SIDES
|
||||||
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
|
const frontlineLayerIdB = polygonType + "-" + (id+1);
|
||||||
const frontlineLayerIdB = polygonType + "-" + (id+1);
|
|
||||||
if (map.getLayer(frontlineLayerIdB)) map.removeLayer(frontlineLayerIdB);
|
|
||||||
if (map.getSource(frontlineLayerIdB)) map.removeSource(frontlineLayerIdB);
|
|
||||||
frontlineParamsMap.delete(id);
|
|
||||||
frontlineParamsMap.delete(id+1);
|
|
||||||
|
|
||||||
hideArrowEditor();
|
|
||||||
hideFrontlineEditor();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
|
DeleteFromMap(frontlineLayerId, id);
|
||||||
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
|
DeleteFromMap(frontlineLayerIdB, id+1);
|
||||||
frontlineParamsMap.delete(id);
|
hideArrowEditor();
|
||||||
}
|
hideFrontlineEditor();
|
||||||
|
return;
|
||||||
hideArrowEditor();
|
}
|
||||||
hideFrontlineEditor();
|
|
||||||
|
DeleteFromMap(frontlineLayerId, id);
|
||||||
|
}
|
||||||
|
|
||||||
|
hideArrowEditor();
|
||||||
|
hideFrontlineEditor();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function DeleteFromMap(layerId, FeatureId){
|
||||||
|
if (map.getLayer(layerId)) map.removeLayer(layerId);
|
||||||
|
if (map.getSource(layerId)) map.removeSource(layerId);
|
||||||
|
|
||||||
|
arrowParamsMap.delete(FeatureId);
|
||||||
|
}
|
||||||
|
|
||||||
function showArrowEditor(params) {
|
function showArrowEditor(params) {
|
||||||
const popup = document.getElementById('arrow-editor');
|
const popup = document.getElementById('arrow-editor');
|
||||||
popup.style.display = 'block';
|
popup.style.display = 'block';
|
||||||
|
|
||||||
popup.style.left = '10px';
|
popup.style.left = '10px';
|
||||||
popup.style.top = '70px';
|
popup.style.top = '70px';
|
||||||
|
|
||||||
document.getElementById('splineStep').value = params.splineStep;
|
document.getElementById('splineStep').value = params.splineStep;
|
||||||
document.getElementById('offsetDistance').value = params.offsetDistance;
|
document.getElementById('offsetDistance').value = params.offsetDistance;
|
||||||
document.getElementById('range').value = params.range;
|
document.getElementById('range').value = params.range;
|
||||||
document.getElementById('minValue').value = params.minValue;
|
document.getElementById('minValue').value = params.minValue;
|
||||||
document.getElementById('widthArrow').value = params.widthArrow;
|
document.getElementById('widthArrow').value = params.widthArrow;
|
||||||
document.getElementById('lengthArrow').value = params.lengthArrow;
|
document.getElementById('lengthArrow').value = params.lengthArrow;
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideArrowEditor() {
|
function hideArrowEditor() {
|
||||||
const popup = document.getElementById('arrow-editor');
|
const popup = document.getElementById('arrow-editor');
|
||||||
popup.style.display = 'none';
|
popup.style.display = 'none';
|
||||||
currentFeature = null;
|
currentFeature = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function showFrontlineEditor(params) {
|
function showFrontlineEditor(params) {
|
||||||
const popup = document.getElementById('frontline-editor');
|
const popup = document.getElementById('frontline-editor');
|
||||||
popup.style.display = 'block';
|
popup.style.display = 'block';
|
||||||
|
|
||||||
popup.style.left = '10px';
|
popup.style.left = '10px';
|
||||||
popup.style.top = '70px';
|
popup.style.top = '70px';
|
||||||
|
|
||||||
document.getElementById('splineStepFrontline').value = params.splineStep;
|
document.getElementById('splineStepFrontline').value = params.splineStep;
|
||||||
document.getElementById('offsetDistanceFrontline').value = params.offsetDistance;
|
document.getElementById('offsetDistanceFrontline').value = params.offsetDistance;
|
||||||
document.getElementById('styleFrontline').value = params.style;
|
document.getElementById('styleFrontline').value = params.style;
|
||||||
|
|
||||||
document.getElementById('protrusionLength').value = params.protrusion.length;
|
document.getElementById('protrusionLength').value = params.protrusion.length;
|
||||||
document.getElementById('protrusionStartSize').value = params.protrusion.startSize;
|
document.getElementById('protrusionStartSize').value = params.protrusion.startSize;
|
||||||
document.getElementById('protrusionEndSize').value = params.protrusion.endSize;
|
document.getElementById('protrusionEndSize').value = params.protrusion.endSize;
|
||||||
document.getElementById('protrusionGap').value = params.protrusion.gap;
|
document.getElementById('protrusionGap').value = params.protrusion.gap;
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideFrontlineEditor() {
|
function hideFrontlineEditor() {
|
||||||
const popup = document.getElementById('frontline-editor');
|
const popup = document.getElementById('frontline-editor');
|
||||||
popup.style.display = 'none';
|
popup.style.display = 'none';
|
||||||
currentFeature = null;
|
currentFeature = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateButtonStyles() {
|
||||||
|
const buttonsContainer = document.getElementById('drawStyleButtons');
|
||||||
|
Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => {
|
||||||
|
const isSelected = btn.getAttribute('data-style') === currentDrawStyle;
|
||||||
|
btn.style.backgroundColor = isSelected ? '#333' : '#f0f0f0';
|
||||||
|
btn.style.color = isSelected ? '#fff' : '#000';
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
|
||||||
document.getElementById('removeArrow').addEventListener('click', () => {
|
document.getElementById('removeArrow').addEventListener('click', () => {
|
||||||
|
|
||||||
MyDelete(ARROW);
|
handleDelete(ARROW);
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById('removeFrontline').addEventListener('click', () => {
|
document.getElementById('removeFrontline').addEventListener('click', () => {
|
||||||
|
|
||||||
MyDelete(FRONTLINE);
|
handleDelete(FRONTLINE);
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById('applyArrowChanges').addEventListener('click', () => {
|
document.getElementById('applyArrowChanges').addEventListener('click', () => {
|
||||||
|
|
||||||
if (!currentFeature) return;
|
if (!currentFeature) return;
|
||||||
console.log("Test");
|
console.log("Test");
|
||||||
const coords = currentFeature.geometry.coordinates;
|
const coords = currentFeature.geometry.coordinates;
|
||||||
const id = currentFeature.id;
|
const id = currentFeature.id;
|
||||||
|
|
||||||
const splineStep = parseFloat(document.getElementById('splineStep').value);
|
const splineStep = parseFloat(document.getElementById('splineStep').value);
|
||||||
const offsetDistance = parseFloat(document.getElementById('offsetDistance').value);
|
const offsetDistance = parseFloat(document.getElementById('offsetDistance').value);
|
||||||
const range = parseFloat(document.getElementById('range').value);
|
const range = parseFloat(document.getElementById('range').value);
|
||||||
const minValue = parseFloat(document.getElementById('minValue').value);
|
const minValue = parseFloat(document.getElementById('minValue').value);
|
||||||
const widthArrow = parseFloat(document.getElementById('widthArrow').value);
|
const widthArrow = parseFloat(document.getElementById('widthArrow').value);
|
||||||
const lengthArrow = parseFloat(document.getElementById('lengthArrow').value);
|
const lengthArrow = parseFloat(document.getElementById('lengthArrow').value);
|
||||||
|
|
||||||
arrowParamsMap.set(id, {
|
arrowParamsMap.set(id, {
|
||||||
splineStep,
|
splineStep,
|
||||||
offsetDistance,
|
offsetDistance,
|
||||||
calculation: ARROW_BODY_STYLE_LINEAR,
|
calculation: ARROW_BODY_STYLE_LINEAR,
|
||||||
range,
|
range,
|
||||||
minValue,
|
minValue,
|
||||||
widthArrow,
|
widthArrow,
|
||||||
lengthArrow
|
lengthArrow
|
||||||
});
|
});
|
||||||
|
|
||||||
const arrowGeoJSON = getArrowPolygon({
|
const arrowGeoJSON = getArrowPolygon({
|
||||||
points: coords,
|
points: coords,
|
||||||
splineStep,
|
splineStep,
|
||||||
offsetDistance
|
offsetDistance
|
||||||
}, {
|
}, {
|
||||||
calculation: ARROW_BODY_STYLE_LINEAR,
|
calculation: ARROW_BODY_STYLE_LINEAR,
|
||||||
range,
|
range,
|
||||||
minValue
|
minValue
|
||||||
}, {
|
}, {
|
||||||
widthArrow,
|
widthArrow,
|
||||||
lengthArrow
|
lengthArrow
|
||||||
});
|
});
|
||||||
|
|
||||||
//ARROW
|
//ARROW
|
||||||
const arrowLayerId = ARROW + "-" + id;
|
const arrowLayerId = ARROW + "-" + id;
|
||||||
if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
|
if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
|
||||||
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
|
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
|
||||||
|
|
||||||
drawArrowOnMap(arrowGeoJSON, ARROW + "-" + id);
|
drawOnMap(arrowGeoJSON, ARROW + "-" + id);
|
||||||
|
|
||||||
const allFeatures = draw.getAll().features;
|
const allFeatures = draw.getAll().features;
|
||||||
currentFeature = allFeatures.find(f => f.id === id);
|
currentFeature = allFeatures.find(f => f.id === id);
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById('applyFrontlineChanges').addEventListener('click', () => {
|
document.getElementById('applyFrontlineChanges').addEventListener('click', () => {
|
||||||
if (!currentFeature) return;
|
if (!currentFeature) return;
|
||||||
|
|
||||||
const coords = currentFeature.geometry.coordinates;
|
const coords = currentFeature.geometry.coordinates;
|
||||||
const id = currentFeature.id;
|
const id = currentFeature.id;
|
||||||
|
|
||||||
const splineStep = parseFloat(document.getElementById('splineStepFrontline').value);
|
const splineStep = parseFloat(document.getElementById('splineStepFrontline').value);
|
||||||
const offsetDistance = parseFloat(document.getElementById('offsetDistanceFrontline').value);
|
const offsetDistance = parseFloat(document.getElementById('offsetDistanceFrontline').value);
|
||||||
const style = parseInt(document.getElementById('styleFrontline').value);
|
const style = parseInt(document.getElementById('styleFrontline').value);
|
||||||
|
|
||||||
const length = parseFloat(document.getElementById('protrusionLength').value);
|
const length = parseFloat(document.getElementById('protrusionLength').value);
|
||||||
const startSize = parseFloat(document.getElementById('protrusionStartSize').value);
|
const startSize = parseFloat(document.getElementById('protrusionStartSize').value);
|
||||||
const endSize = parseFloat(document.getElementById('protrusionEndSize').value);
|
const endSize = parseFloat(document.getElementById('protrusionEndSize').value);
|
||||||
const gap = parseFloat(document.getElementById('protrusionGap').value);
|
const gap = parseFloat(document.getElementById('protrusionGap').value);
|
||||||
|
|
||||||
frontlineParamsMap.set(id, {
|
frontlineParamsMap.set(id, {
|
||||||
splineStep,
|
splineStep,
|
||||||
offsetDistance,
|
offsetDistance,
|
||||||
style,
|
style,
|
||||||
protrusion: {
|
protrusion: {
|
||||||
length,
|
length,
|
||||||
startSize,
|
startSize,
|
||||||
endSize,
|
endSize,
|
||||||
gap
|
gap
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const frontlineData = {
|
const frontlineData = {
|
||||||
points: coords,
|
points: coords,
|
||||||
splineStep,
|
splineStep,
|
||||||
offsetDistance,
|
offsetDistance,
|
||||||
style
|
style
|
||||||
};
|
};
|
||||||
|
|
||||||
const protrusionData = frontlineParamsMap.get(id).protrusion;
|
const protrusionData = frontlineParamsMap.get(id).protrusion;
|
||||||
|
|
||||||
console.log("Update");
|
console.log("Update");
|
||||||
console.log(frontlineData);
|
console.log(frontlineData);
|
||||||
console.log(protrusionData);
|
console.log(protrusionData);
|
||||||
|
|
||||||
const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
|
const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
|
||||||
|
|
||||||
console.log("frontlineGeoJSON", frontlineGeoJSON);
|
console.log("frontlineGeoJSON", frontlineGeoJSON);
|
||||||
let polygonToDraw = frontlineGeoJSON;
|
let polygonToDraw = frontlineGeoJSON;
|
||||||
|
|
||||||
if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {
|
if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {
|
||||||
polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
|
polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
|
||||||
}
|
}
|
||||||
if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
|
if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
|
||||||
let polygonToDrawLeft = frontlineGeoJSON.leftPoly;
|
let polygonToDrawLeft = frontlineGeoJSON.leftPoly;
|
||||||
let polygonToDrawRight = frontlineGeoJSON.rightPoly;
|
let polygonToDrawRight = frontlineGeoJSON.rightPoly;
|
||||||
|
|
||||||
console.log("polygonToDrawLeft", polygonToDrawLeft);
|
console.log("polygonToDrawLeft", polygonToDrawLeft);
|
||||||
console.log("polygonToDrawRight", polygonToDrawRight);
|
console.log("polygonToDrawRight", polygonToDrawRight);
|
||||||
|
|
||||||
const frontlineLayerId = FRONTLINE + "-" + id;
|
const frontlineLayerId = FRONTLINE + "-" + id;
|
||||||
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
|
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
|
||||||
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
|
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
|
||||||
|
|
||||||
console.log(frontlineLayerId);
|
console.log(frontlineLayerId);
|
||||||
console.log(FRONTLINE + "-" + (id+1));
|
console.log(FRONTLINE + "-" + (id+1));
|
||||||
drawFrontlineOnMap(polygonToDrawLeft, FRONTLINE + "-" + id);
|
drawOnMap(polygonToDrawLeft, FRONTLINE + "-" + id);
|
||||||
drawFrontlineOnMap(polygonToDrawRight, FRONTLINE + "-" + (id+1));
|
drawOnMap(polygonToDrawRight, FRONTLINE + "-" + (id+1));
|
||||||
|
|
||||||
const allFeatures = draw.getAll().features;
|
const allFeatures = draw.getAll().features;
|
||||||
currentFeature = allFeatures.find(f => f.id === id);
|
currentFeature = allFeatures.find(f => f.id === id);
|
||||||
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
//if (last was both destroy id+1) TODO
|
//if (last was both destroy id+1) TODO
|
||||||
console.log("Test2");
|
console.log("Test2");
|
||||||
const frontlineLayerId = FRONTLINE + "-" + id;
|
const frontlineLayerId = FRONTLINE + "-" + id;
|
||||||
if (map.getLayer(frontlineLayerId+1)) map.removeLayer(frontlineLayerId+1);
|
if (map.getLayer(frontlineLayerId+1)) map.removeLayer(frontlineLayerId+1);
|
||||||
if (map.getSource(frontlineLayerId+1)) map.removeSource(frontlineLayerId+1);
|
if (map.getSource(frontlineLayerId+1)) map.removeSource(frontlineLayerId+1);
|
||||||
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
|
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
|
||||||
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
|
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
|
||||||
|
|
||||||
drawFrontlineOnMap(polygonToDraw, FRONTLINE + "-" + id);
|
drawOnMap(polygonToDraw, FRONTLINE + "-" + id);
|
||||||
|
|
||||||
const allFeatures = draw.getAll().features;
|
|
||||||
currentFeature = allFeatures.find(f => f.id === id);
|
|
||||||
});
|
|
||||||
|
|
||||||
const buttonsContainer = document.getElementById('drawStyleButtons');
|
const allFeatures = draw.getAll().features;
|
||||||
buttonsContainer.addEventListener('click', (event) => {
|
currentFeature = allFeatures.find(f => f.id === id);
|
||||||
if (event.target.tagName !== 'BUTTON') return;
|
});
|
||||||
|
|
||||||
Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => btn.classList.remove('active'));
|
const buttonsContainer = document.getElementById('drawStyleButtons');
|
||||||
|
buttonsContainer.addEventListener('click', (event) => {
|
||||||
event.target.classList.add('active');
|
if (event.target.tagName !== 'BUTTON') return;
|
||||||
|
|
||||||
currentDrawStyle = event.target.getAttribute('data-style');
|
Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => btn.classList.remove('active'));
|
||||||
updateButtonStyles();
|
|
||||||
});
|
event.target.classList.add('active');
|
||||||
updateButtonStyles();
|
|
||||||
|
currentDrawStyle = event.target.getAttribute('data-style');
|
||||||
|
updateButtonStyles();
|
||||||
|
});
|
||||||
|
updateButtonStyles();
|
||||||
});
|
});
|
||||||
|
|
||||||
function updateButtonStyles() {
|
|
||||||
const buttonsContainer = document.getElementById('drawStyleButtons');
|
|
||||||
Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => {
|
|
||||||
const isSelected = btn.getAttribute('data-style') === currentDrawStyle;
|
|
||||||
btn.style.backgroundColor = isSelected ? '#333' : '#f0f0f0';
|
|
||||||
btn.style.color = isSelected ? '#fff' : '#000';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user