285 lines
9.6 KiB
JavaScript
285 lines
9.6 KiB
JavaScript
import { getArrowPolygon } from "athena-utils/shape/Arrow.js";
|
|
import { ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_EXPONENTIAL } from "athena-utils/shape/Arrow.js";
|
|
import { getFrontline } from "./Frontline.js";
|
|
import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
|
|
import { updateButtonStyles } from "./Drawing.js";
|
|
import { ARROW, FRONTLINE, ADDITIONAL_SIDE } from "./Drawing.js";
|
|
|
|
const DEFAULT_ARROW_PARAMS = {
|
|
splineStep: 20,
|
|
offsetDistance: 12000,
|
|
calculation: ARROW_BODY_STYLE_LINEAR,
|
|
range: 1,
|
|
minValue: 0.1,
|
|
widthArrow: 5,
|
|
lengthArrow: 8,
|
|
paintOptions: {
|
|
"fill-color": "#0099ff",
|
|
"fill-outline-color": "#005588",
|
|
"fill-opacity": 0.6
|
|
}
|
|
};
|
|
|
|
const DEFAULT_FRONTLINE_PARAMS = {
|
|
splineStep: 0.08,
|
|
offsetDistance: 10000,
|
|
style: LEFT_SIDE,
|
|
protrusion: {
|
|
length: 15000,
|
|
startSize: 5000,
|
|
endSize: 500,
|
|
gap: 15000
|
|
},
|
|
paintOptionsLeft: {
|
|
"fill-color": "#00ff37",
|
|
"fill-outline-color": "#008809",
|
|
"fill-opacity": 0.6
|
|
},
|
|
paintOptionsRight: {
|
|
"fill-color": "#0011ff",
|
|
"fill-outline-color": "#002b88",
|
|
"fill-opacity": 0.6
|
|
}
|
|
};
|
|
|
|
export let currentFeature = null;
|
|
|
|
export function setCurrentFeature(feature) {
|
|
currentFeature = feature;
|
|
}
|
|
|
|
export const arrowParamsMap = new Map();
|
|
export const frontlineParamsMap = new Map();
|
|
|
|
export function handleDraw(e, myMap, myDraw, drawStyle) {
|
|
const feature = e.features[0];
|
|
const coords = feature.geometry.coordinates;
|
|
const id = feature.id;
|
|
|
|
if (drawStyle === ARROW) {
|
|
DrawArrow(coords, id, myMap, myDraw);
|
|
} else if (drawStyle === FRONTLINE) {
|
|
DrawFrontline(coords, id, myMap, myDraw);
|
|
}
|
|
}
|
|
|
|
export function handleClick(click, prefix, paramsMap, showEditorFunction, myMap, myDraw, drawStyle) {
|
|
const features = myMap.queryRenderedFeatures(click.point, {
|
|
layers: myMap.getStyle().layers
|
|
.filter(l => l.id.startsWith(prefix + "-"))
|
|
.map(l => l.id)
|
|
});
|
|
|
|
if (features.length === 0) return;
|
|
|
|
drawStyle = prefix;
|
|
updateButtonStyles(drawStyle);
|
|
const feature = features[0];
|
|
const featureId = feature.layer.id.replace(prefix + "-", '');
|
|
|
|
const allFeatures = myDraw.getAll().features;
|
|
currentFeature = allFeatures.find(f => f.id === featureId);
|
|
|
|
if (currentFeature) {
|
|
const params = paramsMap.get(featureId);
|
|
if (params) {
|
|
showEditorFunction(params);
|
|
}
|
|
myDraw.changeMode('direct_select', { featureId: featureId });
|
|
}
|
|
}
|
|
|
|
function DrawArrow(coordinates, polygonId, myMap, myDraw) {
|
|
if (!arrowParamsMap.has(polygonId)) {
|
|
arrowParamsMap.set(polygonId, structuredClone(DEFAULT_ARROW_PARAMS));
|
|
}
|
|
|
|
const params = arrowParamsMap.get(polygonId);
|
|
const arrowGeoJSON = getArrowPolygon(
|
|
{
|
|
points: coordinates,
|
|
splineStep: params.splineStep,
|
|
offsetDistance: params.offsetDistance
|
|
},
|
|
{
|
|
calculation: params.calculation,
|
|
range: params.range,
|
|
minValue: params.minValue
|
|
},
|
|
{
|
|
widthArrow: params.widthArrow,
|
|
lengthArrow: params.lengthArrow
|
|
}
|
|
);
|
|
updatePolygonOnMap(ARROW, polygonId, drawOnMap, arrowGeoJSON, params.paintOptions, myMap, myDraw);
|
|
}
|
|
|
|
function DrawFrontline(coordinates, polygonId, myMap, myDraw) {
|
|
if (!frontlineParamsMap.has(polygonId)) {
|
|
frontlineParamsMap.set(polygonId, structuredClone(DEFAULT_FRONTLINE_PARAMS));
|
|
}
|
|
|
|
const params = frontlineParamsMap.get(polygonId);
|
|
const frontlineGeoJSON = getFrontline(
|
|
{
|
|
points: coordinates,
|
|
splineStep: params.splineStep,
|
|
offsetDistance: params.offsetDistance,
|
|
style: params.style
|
|
},
|
|
params.protrusion
|
|
);
|
|
|
|
let polygonToDraw = frontlineGeoJSON;
|
|
|
|
// Only one side
|
|
if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {
|
|
polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
|
|
}
|
|
|
|
// Both sides
|
|
if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
|
|
updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsLeft, myMap, myDraw);
|
|
|
|
let additionalPolygonToDraw = frontlineGeoJSON.rightPoly;
|
|
|
|
drawOnMap(additionalPolygonToDraw, FRONTLINE + "-" + (polygonId + ADDITIONAL_SIDE), params.paintOptionsRight, myMap, myDraw);
|
|
return;
|
|
}
|
|
|
|
if (params.style == 1){ // LEFT_SIDE
|
|
updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsLeft, myMap, myDraw);
|
|
}else if(params.style == 2){ // RIGHT_SIDE
|
|
updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsRight, myMap, myDraw);
|
|
}
|
|
}
|
|
|
|
function updatePolygonOnMap(prefix, polygonId, drawFunction, geojson, paintOptions, myMap, myDraw) {
|
|
const layerId = prefix + "-" + polygonId;
|
|
|
|
if (myMap.getLayer(layerId)) myMap.removeLayer(layerId);
|
|
if (myMap.getSource(layerId)) myMap.removeSource(layerId);
|
|
|
|
drawFunction(geojson, layerId, paintOptions, myMap);
|
|
|
|
const allFeatures = myDraw.getAll().features;
|
|
currentFeature = allFeatures.find(f => f.id === polygonId);
|
|
}
|
|
|
|
export function drawOnMap(frontlineGeoJSON, id, paintOptions = {}, myMap) {
|
|
if (myMap.getLayer(id)) myMap.removeLayer(id);
|
|
if (myMap.getSource(id)) myMap.removeSource(id);
|
|
|
|
myMap.addSource(id, {
|
|
type: 'geojson',
|
|
data: frontlineGeoJSON
|
|
});
|
|
|
|
myMap.addLayer({
|
|
id: id,
|
|
type: 'fill',
|
|
source: id,
|
|
paint: {
|
|
'fill-color': paintOptions['fill-color'],
|
|
'fill-opacity': paintOptions['fill-opacity'],
|
|
'fill-outline-color': paintOptions['fill-outline-color']
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
export function handleDelete(polygonType, myMap, myDraw)
|
|
{
|
|
if (!currentFeature) return;
|
|
|
|
const id = currentFeature.id;
|
|
myDraw.delete(id);
|
|
|
|
//ARROW
|
|
if(polygonType == ARROW){
|
|
const arrowLayerId = polygonType + "-" + id;
|
|
DeleteFromMap(arrowLayerId, id, myMap);
|
|
}
|
|
|
|
//Frontline
|
|
if(polygonType == FRONTLINE){
|
|
const frontlineLayerId = polygonType + "-" + id;
|
|
|
|
if (frontlineParamsMap.get(id).style == 3){ //BOTH_SIDES
|
|
const frontlineLayerIdB = polygonType + "-" + (id + ADDITIONAL_SIDE);
|
|
|
|
DeleteFromMap(frontlineLayerId, id, myMap);
|
|
DeleteFromMap(frontlineLayerIdB, id + ADDITIONAL_SIDE, myMap);
|
|
hideArrowEditor();
|
|
hideFrontlineEditor();
|
|
return;
|
|
}
|
|
|
|
DeleteFromMap(frontlineLayerId, id, myMap);
|
|
}
|
|
|
|
hideArrowEditor();
|
|
hideFrontlineEditor();
|
|
}
|
|
|
|
function DeleteFromMap(layerId, FeatureId, myMap){
|
|
if (myMap.getLayer(layerId)) myMap.removeLayer(layerId);
|
|
if (myMap.getSource(layerId)) myMap.removeSource(layerId);
|
|
|
|
arrowParamsMap.delete(FeatureId);
|
|
}
|
|
|
|
export function showArrowEditor(params) {
|
|
const popup = document.getElementById('arrow-editor');
|
|
popup.style.display = 'block';
|
|
popup.style.left = '10px';
|
|
popup.style.top = '70px';
|
|
|
|
document.getElementById('splineStep').value = params.splineStep;
|
|
document.getElementById('offsetDistance').value = params.offsetDistance;
|
|
document.getElementById('range').value = params.range;
|
|
document.getElementById('minValue').value = params.minValue;
|
|
document.getElementById('widthArrow').value = params.widthArrow;
|
|
document.getElementById('lengthArrow').value = params.lengthArrow;
|
|
document.getElementById('styleArrow').value = params.calculation;
|
|
|
|
document.getElementById('arrowFillColor').value = params.paintOptions["fill-color"];
|
|
document.getElementById('arrowOutlineColor').value = params.paintOptions["fill-outline-color"];
|
|
parseFloat(document.getElementById('arrowOpacity').value = params.paintOptions["fill-opacity"]);
|
|
}
|
|
|
|
export function hideArrowEditor() {
|
|
const popup = document.getElementById('arrow-editor');
|
|
popup.style.display = 'none';
|
|
currentFeature = null;
|
|
}
|
|
|
|
export function showFrontlineEditor(params) {
|
|
const popup = document.getElementById('frontline-editor');
|
|
popup.style.display = 'block';
|
|
popup.style.left = '10px';
|
|
popup.style.top = '70px';
|
|
|
|
document.getElementById('splineStepFrontline').value = params.splineStep;
|
|
document.getElementById('offsetDistanceFrontline').value = params.offsetDistance;
|
|
document.getElementById('styleFrontline').value = params.style;
|
|
|
|
document.getElementById('protrusionLength').value = params.protrusion.length;
|
|
document.getElementById('protrusionStartSize').value = params.protrusion.startSize;
|
|
document.getElementById('protrusionEndSize').value = params.protrusion.endSize;
|
|
document.getElementById('protrusionGap').value = params.protrusion.gap;
|
|
|
|
document.getElementById('frontlineFillColorLeft').value = params.paintOptionsLeft["fill-color"];
|
|
document.getElementById('frontlineOutlineColorLeft').value = params.paintOptionsLeft["fill-outline-color"];
|
|
parseFloat(document.getElementById('frontlineOpacityLeft').value = params.paintOptionsLeft["fill-opacity"]);
|
|
|
|
document.getElementById('frontlineFillColorRight').value = params.paintOptionsRight["fill-color"];
|
|
document.getElementById('frontlineOutlineColorRight').value = params.paintOptionsRight["fill-outline-color"];
|
|
parseFloat(document.getElementById('frontlineOpacityRight').value = params.paintOptionsRight["fill-opacity"]);
|
|
}
|
|
|
|
export function hideFrontlineEditor() {
|
|
const popup = document.getElementById('frontline-editor');
|
|
popup.style.display = 'none';
|
|
currentFeature = null;
|
|
} |