mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-22 12:01:23 +01:00
generic confirmationDialog for all files
This commit is contained in:
Azgaar
Peter
parent
556e651d52
commit
4bf901e849
20 changed files with 863 additions and 836 deletions
|
|
@ -1,9 +1,9 @@
|
|||
"use strict";
|
||||
'use strict';
|
||||
function editRoute(onClick) {
|
||||
if (customization) return;
|
||||
if (!onClick && elSelected && d3.event.target.id === elSelected.attr("id")) return;
|
||||
closeDialogs(".stable");
|
||||
if (!layerIsOn("toggleRoutes")) toggleRoutes();
|
||||
if (!onClick && elSelected && d3.event.target.id === elSelected.attr('id')) return;
|
||||
closeDialogs('.stable');
|
||||
if (!layerIsOn('toggleRoutes')) toggleRoutes();
|
||||
|
||||
$("#routeEditor").dialog({
|
||||
title: "Edit Route",
|
||||
|
|
@ -12,32 +12,32 @@ function editRoute(onClick) {
|
|||
close: closeRoutesEditor
|
||||
});
|
||||
|
||||
debug.append("g").attr("id", "controlPoints");
|
||||
debug.append('g').attr('id', 'controlPoints');
|
||||
const node = onClick ? elSelected.node() : d3.event.target;
|
||||
elSelected = d3.select(node).on("click", addInterimControlPoint);
|
||||
elSelected = d3.select(node).on('click', addInterimControlPoint);
|
||||
drawControlPoints(node);
|
||||
selectRouteGroup(node);
|
||||
|
||||
viewbox.on("touchmove mousemove", showEditorTips);
|
||||
viewbox.on('touchmove mousemove', showEditorTips);
|
||||
if (onClick) toggleRouteCreationMode();
|
||||
|
||||
if (modules.editRoute) return;
|
||||
modules.editRoute = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("routeGroupsShow").addEventListener("click", showGroupSection);
|
||||
document.getElementById("routeGroup").addEventListener("change", changeRouteGroup);
|
||||
document.getElementById("routeGroupAdd").addEventListener("click", toggleNewGroupInput);
|
||||
document.getElementById("routeGroupName").addEventListener("change", createNewGroup);
|
||||
document.getElementById("routeGroupRemove").addEventListener("click", removeRouteGroup);
|
||||
document.getElementById("routeGroupsHide").addEventListener("click", hideGroupSection);
|
||||
document.getElementById("routeElevationProfile").addEventListener("click", showElevationProfile);
|
||||
document.getElementById('routeGroupsShow').addEventListener('click', showGroupSection);
|
||||
document.getElementById('routeGroup').addEventListener('change', changeRouteGroup);
|
||||
document.getElementById('routeGroupAdd').addEventListener('click', toggleNewGroupInput);
|
||||
document.getElementById('routeGroupName').addEventListener('change', createNewGroup);
|
||||
document.getElementById('routeGroupRemove').addEventListener('click', removeRouteGroup);
|
||||
document.getElementById('routeGroupsHide').addEventListener('click', hideGroupSection);
|
||||
document.getElementById('routeElevationProfile').addEventListener('click', showElevationProfile);
|
||||
|
||||
document.getElementById("routeEditStyle").addEventListener("click", editGroupStyle);
|
||||
document.getElementById("routeSplit").addEventListener("click", toggleRouteSplitMode);
|
||||
document.getElementById("routeLegend").addEventListener("click", editRouteLegend);
|
||||
document.getElementById("routeNew").addEventListener("click", toggleRouteCreationMode);
|
||||
document.getElementById("routeRemove").addEventListener("click", removeRoute);
|
||||
document.getElementById('routeEditStyle').addEventListener('click', editGroupStyle);
|
||||
document.getElementById('routeSplit').addEventListener('click', toggleRouteSplitMode);
|
||||
document.getElementById('routeLegend').addEventListener('click', editRouteLegend);
|
||||
document.getElementById('routeNew').addEventListener('click', toggleRouteCreationMode);
|
||||
document.getElementById('routeRemove').addEventListener('click', removeRoute);
|
||||
|
||||
function showEditorTips() {
|
||||
showMainTip();
|
||||
|
|
@ -53,7 +53,7 @@ function editRoute(onClick) {
|
|||
const point = node.getPointAtLength(i);
|
||||
addControlPoint([point.x, point.y]);
|
||||
}
|
||||
routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value;
|
||||
routeLength.innerHTML = rn(l * distanceScaleInput.value) + ' ' + distanceUnitInput.value;
|
||||
}
|
||||
|
||||
function addControlPoint(point, before = null) {
|
||||
|
|
@ -69,8 +69,8 @@ function editRoute(onClick) {
|
|||
|
||||
function addInterimControlPoint() {
|
||||
const point = d3.mouse(this);
|
||||
const controls = document.getElementById("controlPoints").querySelectorAll("circle");
|
||||
const points = Array.from(controls).map(circle => [+circle.getAttribute("cx"), +circle.getAttribute("cy")]);
|
||||
const controls = document.getElementById('controlPoints').querySelectorAll('circle');
|
||||
const points = Array.from(controls).map((circle) => [+circle.getAttribute('cx'), +circle.getAttribute('cy')]);
|
||||
const index = getSegmentId(points, point, 2);
|
||||
addControlPoint(point, ":nth-child(" + (index + 1) + ")");
|
||||
|
||||
|
|
@ -78,8 +78,8 @@ function editRoute(onClick) {
|
|||
}
|
||||
|
||||
function dragControlPoint() {
|
||||
this.setAttribute("cx", d3.event.x);
|
||||
this.setAttribute("cy", d3.event.y);
|
||||
this.setAttribute('cx', d3.event.x);
|
||||
this.setAttribute('cy', d3.event.y);
|
||||
redrawRoute();
|
||||
}
|
||||
|
||||
|
|
@ -93,9 +93,9 @@ function editRoute(onClick) {
|
|||
points.push([this.getAttribute("cx"), this.getAttribute("cy")]);
|
||||
});
|
||||
|
||||
elSelected.attr("d", round(lineGen(points)));
|
||||
elSelected.attr('d', round(lineGen(points)));
|
||||
const l = elSelected.node().getTotalLength();
|
||||
routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value;
|
||||
routeLength.innerHTML = rn(l * distanceScaleInput.value) + ' ' + distanceUnitInput.value;
|
||||
|
||||
if (modules.elevation) showEPForRoute(elSelected.node());
|
||||
}
|
||||
|
|
@ -120,7 +120,7 @@ function editRoute(onClick) {
|
|||
|
||||
function selectRouteGroup(node) {
|
||||
const group = node.parentNode.id;
|
||||
const select = document.getElementById("routeGroup");
|
||||
const select = document.getElementById('routeGroup');
|
||||
select.options.length = 0; // remove all options
|
||||
|
||||
routes.selectAll("g").each(function () {
|
||||
|
|
@ -133,10 +133,10 @@ function editRoute(onClick) {
|
|||
}
|
||||
|
||||
function toggleNewGroupInput() {
|
||||
if (routeGroupName.style.display === "none") {
|
||||
routeGroupName.style.display = "inline-block";
|
||||
if (routeGroupName.style.display === 'none') {
|
||||
routeGroupName.style.display = 'inline-block';
|
||||
routeGroupName.focus();
|
||||
routeGroup.style.display = "none";
|
||||
routeGroup.style.display = 'none';
|
||||
} else {
|
||||
routeGroupName.style.display = "none";
|
||||
routeGroup.style.display = "inline-block";
|
||||
|
|
@ -154,17 +154,17 @@ function editRoute(onClick) {
|
|||
.replace(/[^\w\s]/gi, "");
|
||||
|
||||
if (document.getElementById(group)) {
|
||||
tip("Element with this id already exists. Please provide a unique name", false, "error");
|
||||
tip('Element with this id already exists. Please provide a unique name', false, 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (Number.isFinite(+group.charAt(0))) {
|
||||
tip("Group name should start with a letter", false, "error");
|
||||
tip('Group name should start with a letter', false, 'error');
|
||||
return;
|
||||
}
|
||||
// just rename if only 1 element left
|
||||
const oldGroup = elSelected.node().parentNode;
|
||||
const basic = ["roads", "trails", "searoutes"].includes(oldGroup.id);
|
||||
const basic = ['roads', 'trails', 'searoutes'].includes(oldGroup.id);
|
||||
if (!basic && oldGroup.childElementCount === 1) {
|
||||
document.getElementById("routeGroup").selectedOptions[0].remove();
|
||||
document.getElementById("routeGroup").options.add(new Option(group, group, false, true));
|
||||
|
|
@ -175,18 +175,18 @@ function editRoute(onClick) {
|
|||
}
|
||||
|
||||
const newGroup = elSelected.node().parentNode.cloneNode(false);
|
||||
document.getElementById("routes").appendChild(newGroup);
|
||||
document.getElementById('routes').appendChild(newGroup);
|
||||
newGroup.id = group;
|
||||
document.getElementById("routeGroup").options.add(new Option(group, group, false, true));
|
||||
document.getElementById('routeGroup').options.add(new Option(group, group, false, true));
|
||||
document.getElementById(group).appendChild(elSelected.node());
|
||||
|
||||
toggleNewGroupInput();
|
||||
document.getElementById("routeGroupName").value = "";
|
||||
document.getElementById('routeGroupName').value = '';
|
||||
}
|
||||
|
||||
function removeRouteGroup() {
|
||||
const group = elSelected.node().parentNode.id;
|
||||
const basic = ["roads", "trails", "searoutes"].includes(group);
|
||||
const basic = ['roads', 'trails', 'searoutes'].includes(group);
|
||||
const count = elSelected.node().parentNode.childElementCount;
|
||||
alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${
|
||||
basic ? "all elements in the group" : "the entire route group"
|
||||
|
|
@ -216,12 +216,12 @@ function editRoute(onClick) {
|
|||
|
||||
function editGroupStyle() {
|
||||
const g = elSelected.node().parentNode.id;
|
||||
editStyle("routes", g);
|
||||
editStyle('routes', g);
|
||||
}
|
||||
|
||||
function toggleRouteSplitMode() {
|
||||
document.getElementById("routeNew").classList.remove("pressed");
|
||||
this.classList.toggle("pressed");
|
||||
document.getElementById('routeNew').classList.remove('pressed');
|
||||
this.classList.toggle('pressed');
|
||||
}
|
||||
|
||||
function clickControlPoint() {
|
||||
|
|
@ -252,34 +252,54 @@ function editRoute(onClick) {
|
|||
this.remove();
|
||||
});
|
||||
|
||||
elSelected.attr("d", round(lineGen(points1)));
|
||||
const id = getNextId("route");
|
||||
group.append("path").attr("id", id).attr("d", lineGen(points2));
|
||||
debug.select("#controlPoints").selectAll("circle").remove();
|
||||
function splitRoute(clicked) {
|
||||
lineGen.curve(d3.curveCatmullRom.alpha(0.1));
|
||||
const group = d3.select(elSelected.node().parentNode);
|
||||
routeSplit.classList.remove('pressed');
|
||||
|
||||
const points1 = [],
|
||||
points2 = [];
|
||||
let points = points1;
|
||||
debug
|
||||
.select('#controlPoints')
|
||||
.selectAll('circle')
|
||||
.each(function () {
|
||||
points.push([this.getAttribute('cx'), this.getAttribute('cy')]);
|
||||
if (this === clicked) {
|
||||
points = points2;
|
||||
points.push([this.getAttribute('cx'), this.getAttribute('cy')]);
|
||||
}
|
||||
this.remove();
|
||||
});
|
||||
|
||||
elSelected.attr('d', round(lineGen(points1)));
|
||||
const id = getNextId('route');
|
||||
group.append('path').attr('id', id).attr('d', lineGen(points2));
|
||||
debug.select('#controlPoints').selectAll('circle').remove();
|
||||
drawControlPoints(elSelected.node());
|
||||
}
|
||||
|
||||
function toggleRouteCreationMode() {
|
||||
document.getElementById("routeSplit").classList.remove("pressed");
|
||||
document.getElementById("routeNew").classList.toggle("pressed");
|
||||
if (document.getElementById("routeNew").classList.contains("pressed")) {
|
||||
tip("Click on map to add control points", true);
|
||||
viewbox.on("click", addPointOnClick).style("cursor", "crosshair");
|
||||
elSelected.on("click", null);
|
||||
document.getElementById('routeSplit').classList.remove('pressed');
|
||||
document.getElementById('routeNew').classList.toggle('pressed');
|
||||
if (document.getElementById('routeNew').classList.contains('pressed')) {
|
||||
tip('Click on map to add control points', true);
|
||||
viewbox.on('click', addPointOnClick).style('cursor', 'crosshair');
|
||||
elSelected.on('click', null);
|
||||
} else {
|
||||
clearMainTip();
|
||||
viewbox.on("click", clicked).style("cursor", "default");
|
||||
elSelected.on("click", addInterimControlPoint).attr("data-new", null);
|
||||
viewbox.on('click', clicked).style('cursor', 'default');
|
||||
elSelected.on('click', addInterimControlPoint).attr('data-new', null);
|
||||
}
|
||||
}
|
||||
|
||||
function addPointOnClick() {
|
||||
// create new route
|
||||
if (!elSelected.attr("data-new")) {
|
||||
debug.select("#controlPoints").selectAll("circle").remove();
|
||||
if (!elSelected.attr('data-new')) {
|
||||
debug.select('#controlPoints').selectAll('circle').remove();
|
||||
const parent = elSelected.node().parentNode;
|
||||
const id = getNextId("route");
|
||||
elSelected = d3.select(parent).append("path").attr("id", id).attr("data-new", 1);
|
||||
const id = getNextId('route');
|
||||
elSelected = d3.select(parent).append('path').attr('id', id).attr('data-new', 1);
|
||||
}
|
||||
|
||||
addControlPoint(d3.mouse(this));
|
||||
|
|
@ -287,7 +307,7 @@ function editRoute(onClick) {
|
|||
}
|
||||
|
||||
function editRouteLegend() {
|
||||
const id = elSelected.attr("id");
|
||||
const id = elSelected.attr('id');
|
||||
editNotes(id, id);
|
||||
}
|
||||
|
||||
|
|
@ -310,11 +330,11 @@ function editRoute(onClick) {
|
|||
}
|
||||
|
||||
function closeRoutesEditor() {
|
||||
elSelected.attr("data-new", null).on("click", null);
|
||||
elSelected.attr('data-new', null).on('click', null);
|
||||
clearMainTip();
|
||||
routeSplit.classList.remove("pressed");
|
||||
routeNew.classList.remove("pressed");
|
||||
debug.select("#controlPoints").remove();
|
||||
routeSplit.classList.remove('pressed');
|
||||
routeNew.classList.remove('pressed');
|
||||
debug.select('#controlPoints').remove();
|
||||
unselect();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue