v. 0.60.14b

Relief icons bulk remove
This commit is contained in:
Azgaar 2018-09-29 15:51:37 +03:00
parent fe239ce29b
commit c7ad317301
3 changed files with 71 additions and 25 deletions

View file

@ -231,10 +231,10 @@ div > input[type="number"].editNumber {
width: 34px; width: 34px;
} }
#riverEditor>*, #riverEditor > *,
#routeEditor>*, #routeEditor > *,
#iconEditor>*, #iconEditor > *,
#reliefEditor>*, #reliefEditor > *,
#burgEditor * { #burgEditor * {
display: inline-block; display: inline-block;
} }

View file

@ -31,8 +31,8 @@
<script src="libs/polylabel.min.js"></script> <script src="libs/polylabel.min.js"></script>
<script src="libs/quantize.min.js" defer></script> <script src="libs/quantize.min.js" defer></script>
<script src="libs/jquery.ui.touch-punch.min.js" defer></script> <script src="libs/jquery.ui.touch-punch.min.js" defer></script>
<link rel="stylesheet" type="text/css" href="index.css?version=0.60.07b"/> <link rel="stylesheet" type="text/css" href="index.css?version=0.60.14b"/>
<link rel="stylesheet" type="text/css" href="icons.css?version=0.60.06b"/> <link rel="stylesheet" type="text/css" href="icons.css?version=0.60.14b"/>
<link rel="stylesheet" type="text/css" href="libs/jquery-ui.css"/> <link rel="stylesheet" type="text/css" href="libs/jquery-ui.css"/>
</head> </head>
<body> <body>
@ -760,6 +760,7 @@
</div> </div>
<div id="reliefEditor" class="dialog" style="display: none"> <div id="reliefEditor" class="dialog" style="display: none">
<button id="reliefGroups" onmouseover="tip('Change relief icon')" class="icon-tags"></button> <button id="reliefGroups" onmouseover="tip('Change relief icon')" class="icon-tags"></button>
<div id="reliefGroupsSelection" style="display: none"> <div id="reliefGroupsSelection" style="display: none">
<select id="reliefGroup" onmouseover="tip('Change relief icon')"> <select id="reliefGroup" onmouseover="tip('Change relief icon')">
@ -770,9 +771,17 @@
</select> </select>
<i id="reliefRemoveGroup" onmouseover="tip('Remove all icons within selected group')" class="icon-trash pointer"></i> <i id="reliefRemoveGroup" onmouseover="tip('Remove all icons within selected group')" class="icon-trash pointer"></i>
</div> </div>
<button id="reliefCopy" onmouseover="tip('Copy the relief icon')" class="icon-clone"></button> <button id="reliefCopy" onmouseover="tip('Copy the relief icon')" class="icon-clone"></button>
<button id="reliefAddfromEditor" onmouseover="tip('Add relief Icon')" class="icon-plus"></button> <button id="reliefAddfromEditor" onmouseover="tip('Add relief Icon')" class="icon-plus"></button>
<button id="reliefRemove" onmouseover="tip('Remove the relief icon')" class="icon-trash"></button>
<button id="reliefBulkRemove" onmouseover="tip('Erase all relief icons in radius')" class="icon-eraser"></button>
<div id="reliefBulkRemoveSection" style="display: none">
<input id="reliefBulkRemoveRadius" oninput="tip('Eraser brush size: '+this.value); reliefBulkRemoveRadiusNumber.value = this.value" type="range" min="1" max="7" value="3">
<input id="reliefBulkRemoveRadiusNumber" oninput="tip('Eraser brush size: '+this.value); reliefBulkRemoveRadius.value = this.value" type="number" min="1" max="7" value="3">
</div>
<button id="reliefRemove" onmouseover="tip('Remove this relief icon')" class="icon-trash"></button>
</div> </div>
<div id="burgEditor" class="dialog" style="display: none"> <div id="burgEditor" class="dialog" style="display: none">
@ -1288,5 +1297,5 @@
<input type="file" accept=".txt" id="namesbaseToLoad"> <input type="file" accept=".txt" id="namesbaseToLoad">
</div> </div>
<script src="script.js?version=0.60.06b"></script> <script src="script.js?version=0.60.14b"></script>
</body> </body>

View file

@ -597,7 +597,7 @@ function fantasyMap() {
const brush = $("#brushesButtons > .pressed"); const brush = $("#brushesButtons > .pressed");
const brushId = brush.attr("id"); const brushId = brush.attr("id");
if (brushId === "brushRange" || brushId === "brushTrough") return; if (brushId === "brushRange" || brushId === "brushTrough") return;
if (!brush.length && !$("div.selected").length) return; if (customization !== 5 && !brush.length && !$("div.selected").length) return;
let radius = 0; let radius = 0;
if (customization === 1) { if (customization === 1) {
radius = brushRadius.value; radius = brushRadius.value;
@ -607,6 +607,7 @@ function fantasyMap() {
} }
else if (customization === 2) radius = countriesManuallyBrush.value; else if (customization === 2) radius = countriesManuallyBrush.value;
else if (customization === 4) radius = culturesManuallyBrush.value; else if (customization === 4) radius = culturesManuallyBrush.value;
else if (customization === 5) radius = reliefBulkRemoveRadius.value;
const r = rn(6 / graphSize * radius, 1); const r = rn(6 / graphSize * radius, 1);
let clr = "#373737"; let clr = "#373737";
@ -618,7 +619,7 @@ function fantasyMap() {
const culture = +$("div.selected").attr("id").slice(7); const culture = +$("div.selected").attr("id").slice(7);
clr = cultures[culture].color; clr = cultures[culture].color;
} }
moveCircle(point[0],point[1],r, clr); moveCircle(point[0], point[1], r, clr);
} }
} }
@ -3345,6 +3346,9 @@ function fantasyMap() {
const group = elSelected.node().parentNode.id; const group = elSelected.node().parentNode.id;
reliefGroup.value = group; reliefGroup.value = group;
let bulkRemoveSection = document.getElementById("reliefBulkRemoveSection");
if (bulkRemoveSection.style.display != "none") reliefBulkRemove.click();
$("#reliefEditor").dialog({ $("#reliefEditor").dialog({
title: "Edit relief icon", title: "Edit relief icon",
minHeight: 30, width: "auto", resizable: false, minHeight: 30, width: "auto", resizable: false,
@ -3368,7 +3372,7 @@ function fantasyMap() {
const cell = diagram.find(cx, cy).index; const cell = diagram.find(cx, cy).index;
const height = cell !== undefined ? cells[cell].height : 50; const height = cell !== undefined ? cells[cell].height : 50;
elSelected.remove(); elSelected.remove();
elSelected = addReliefIcon(height / 100, type, cx, cy); elSelected = addReliefIcon(height / 100, type, cx, cy, cell);
elSelected.call(d3.drag().on("start", elementDrag)); elSelected.call(d3.drag().on("start", elementDrag));
}); });
@ -3413,6 +3417,39 @@ function fantasyMap() {
}); });
}); });
$("#reliefBulkRemove").click(function() {
$("#reliefEditor > button").not(this).toggle();
let section = document.getElementById("reliefBulkRemoveSection");
if (section.style.display === "none") {
section.style.display = "inline-block";
tip("Drag to remove relief icons in radius", true);
viewbox.style("cursor", "crosshair").call(d3.drag().on("drag", dragToRemoveReliefIcons));
customization = 5;
} else {
section.style.display = "none";
restoreDefaultEvents();
customization = 0;
}
});
function dragToRemoveReliefIcons() {
let point = d3.mouse(this);
let cell = diagram.find(point[0], point[1]).index;
let radius = +reliefBulkRemoveRadius.value;
let r = rn(6 / graphSize * radius, 1);
moveCircle(point[0], point[1], r);
let selection = defineBrushSelection(cell, radius);
if (selection) removeReliefIcons(selection);
}
function removeReliefIcons(selection) {
if (selection.length === 0) return;
selection.map(function(index) {
const selected = terrain.selectAll("g").selectAll("g[data-cell='"+index+"']");
selected.remove();
});
}
$("#reliefRemove").click(function() { $("#reliefRemove").click(function() {
alertMessage.innerHTML = `Are you sure you want to remove the icon?`; alertMessage.innerHTML = `Are you sure you want to remove the icon?`;
$("#alert").dialog({resizable: false, title: "Remove relief icon", $("#alert").dialog({resizable: false, title: "Remove relief icon",
@ -4310,6 +4347,9 @@ function fantasyMap() {
// clear elSelected variable // clear elSelected variable
function unselect() { function unselect() {
tip("", true);
restoreDefaultEvents();
if (customization === 5) customization = 0;
if (!elSelected) return; if (!elSelected) return;
elSelected.call(d3.drag().on("drag", null)).attr("class", null); elSelected.call(d3.drag().on("drag", null)).attr("class", null);
debug.selectAll("*").remove(); debug.selectAll("*").remove();
@ -5833,7 +5873,7 @@ function fantasyMap() {
h = (height - 55) * 0.12; h = (height - 55) * 0.12;
for (let c = 0, a = area; Math.random() < a / 50; c++, a -= 50) { for (let c = 0, a = area; Math.random() < a / 50; c++, a -= 50) {
if (polygons[cell][c] === undefined) break; if (polygons[cell][c] === undefined) break;
const g = mounts.append("g"); const g = mounts.append("g").attr("data-cell", cell);
if (c < 2) { if (c < 2) {
cx = p[0] - h / 100 * (1 - c / 10) - c * 2; cx = p[0] - h / 100 * (1 - c / 10) - c * 2;
cy = p[1] + h / 400 + c; cy = p[1] + h / 400 + c;
@ -5858,7 +5898,7 @@ function fantasyMap() {
for (let c = 0, a = area; Math.random() < a / 30; c++, a -= 30) { for (let c = 0, a = area; Math.random() < a / 30; c++, a -= 30) {
if (land[i].ctype === 1 && c > 0) break; if (land[i].ctype === 1 && c > 0) break;
if (polygons[cell][c] === undefined) break; if (polygons[cell][c] === undefined) break;
const g = hills.append("g"); const g = hills.append("g").attr("data-cell", cell);
if (c < 2) { if (c < 2) {
cx = p[0] - h - c * 1.2; cx = p[0] - h - c * 1.2;
cy = p[1] + h / 4 + c / 1.6; cy = p[1] + h / 4 + c / 1.6;
@ -5879,14 +5919,14 @@ function fantasyMap() {
// swamp icons // swamp icons
if (height >= 21 && height < 22 && swampCount < +swampinessInput.value && land[i].used != 1) { if (height >= 21 && height < 22 && swampCount < +swampinessInput.value && land[i].used != 1) {
const g = swamps.append("g"); const g = swamps.append("g").attr("data-cell", cell);
swampCount++; swampCount++;
land[i].used = 1; land[i].used = 1;
let swamp = drawSwamp(p[0],p[1]); let swamp = drawSwamp(p[0],p[1]);
land[i].neighbors.forEach(function(e) { land[i].neighbors.forEach(function(e) {
if (cells[e].height >= 20 && cells[e].height < 30 && !cells[e].river && cells[e].used != 1) { if (cells[e].height >= 20 && cells[e].height < 30 && !cells[e].river && cells[e].used != 1) {
cells[e].used = 1; cells[e].used = 1;
swamp += drawSwamp(cells[e].data[0],cells[e].data[1]); swamp += drawSwamp(cells[e].data[0], cells[e].data[1]);
} }
}); });
g.append("path").attr("d", round(swamp, 1)); g.append("path").attr("d", round(swamp, 1));
@ -5897,7 +5937,7 @@ function fantasyMap() {
for (let c = 0, a = area; Math.random() < a / 15; c++, a -= 15) { for (let c = 0, a = area; Math.random() < a / 15; c++, a -= 15) {
if (land[i].ctype === 1 && c > 0) break; if (land[i].ctype === 1 && c > 0) break;
if (polygons[cell][c] === undefined) break; if (polygons[cell][c] === undefined) break;
const g = forests.append("g"); const g = forests.append("g").attr("data-cell", cell);
if (c === 0) { if (c === 0) {
cx = rn(p[0] - 1 - Math.random(), 1); cx = rn(p[0] - 1 - Math.random(), 1);
cy = p[1] - 2; cy = p[1] - 2;
@ -5923,8 +5963,8 @@ function fantasyMap() {
console.timeEnd('drawRelief'); console.timeEnd('drawRelief');
} }
function addReliefIcon(height, type, cx, cy) { function addReliefIcon(height, type, cx, cy, cell) {
const g = terrain.select("#" + type).append("g"); const g = terrain.select("#" + type).append("g").attr("data-cell", cell);
if (type === "mounts") { if (type === "mounts") {
const h = height >= 0.7 ? (height - 0.55) * 12 : 1.8; const h = height >= 0.7 ? (height - 0.55) * 12 : 1.8;
const rnd = Math.random() * 0.8 + 0.2; const rnd = Math.random() * 0.8 + 0.2;
@ -6173,8 +6213,6 @@ function fantasyMap() {
if ($(this).hasClass('pressed')) { if ($(this).hasClass('pressed')) {
$(".pressed").removeClass('pressed'); $(".pressed").removeClass('pressed');
unselect(); unselect();
restoreDefaultEvents();
tip("", true);
} else { } else {
$(".pressed").removeClass('pressed'); $(".pressed").removeClass('pressed');
unselect(); unselect();
@ -6283,7 +6321,7 @@ function fantasyMap() {
const x = rn(point[0],2), y = rn(point[1],2); const x = rn(point[0],2), y = rn(point[1],2);
const type = reliefGroup.value; const type = reliefGroup.value;
addReliefIcon(height / 100, type, x, y); addReliefIcon(height / 100, type, x, y, index);
if (d3.event.shiftKey === false) { if (d3.event.shiftKey === false) {
$("#addRelief").removeClass("pressed"); $("#addRelief").removeClass("pressed");
@ -7289,7 +7327,6 @@ function fantasyMap() {
$("div[data-sortby='expansion'],.statePower, .icon-resize-full").addClass("hidden"); $("div[data-sortby='expansion'],.statePower, .icon-resize-full").addClass("hidden");
$("div[data-sortby='cells'],.stateCells, .icon-check-empty").removeClass("hidden"); $("div[data-sortby='cells'],.stateCells, .icon-check-empty").removeClass("hidden");
customization = 0; customization = 0;
tip("", true);
restoreDefaultEvents(); restoreDefaultEvents();
} }
if (id === "countriesApply") {$("#countriesManuallyCancel").click();} if (id === "countriesApply") {$("#countriesManuallyCancel").click();}
@ -8602,7 +8639,6 @@ function fantasyMap() {
recalculateStateData(state); // calc new state data recalculateStateData(state); // calc new state data
editCountries(); editCountries();
restoreDefaultEvents(); restoreDefaultEvents();
tip("", true);
} }
$(".statePower").on("input", function() { $(".statePower").on("input", function() {
@ -8836,13 +8872,15 @@ function fantasyMap() {
function focusOnState() { function focusOnState() {
const s = +(this.id).slice(5); const s = +(this.id).slice(5);
labels.select("#regionLabel" + s).classed("drag", true); labels.select("#regionLabel" + s).classed("drag", true);
document.getElementsByClassName("region" + s)[0].style.stroke = "#000000"; document.getElementsByClassName("region" + s)[0].style.stroke = "red";
document.getElementsByClassName("region" + s)[0].setAttribute("filter", "url(#blur1)");
} }
function unfocusState() { function unfocusState() {
const s = +(this.id).slice(5); const s = +(this.id).slice(5);
labels.select("#regionLabel" + s).classed("drag", false); labels.select("#regionLabel" + s).classed("drag", false);
document.getElementsByClassName("region" + s)[0].style.stroke = "none"; document.getElementsByClassName("region" + s)[0].style.stroke = "none";
document.getElementsByClassName("region" + s)[0].setAttribute("filter", null);
} }
function focusCapital() { function focusCapital() {
@ -9134,7 +9172,6 @@ function fantasyMap() {
$("#culturesManuallyButtons").hide(); $("#culturesManuallyButtons").hide();
$(".selected").removeClass("selected"); $(".selected").removeClass("selected");
customization = 0; customization = 0;
tip("", true);
restoreDefaultEvents(); restoreDefaultEvents();
} }