mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 01:41:22 +01:00
river editor rework - data checking
This commit is contained in:
Azgaar
parent
424980f5be
commit
a1425bcb54
8 changed files with 586 additions and 218 deletions
19
index.css
19
index.css
|
|
@ -202,6 +202,7 @@ a {
|
|||
stroke: none;
|
||||
mask: url(#land);
|
||||
cursor: pointer;
|
||||
fill-rule: nonzero;
|
||||
}
|
||||
|
||||
#anchors {
|
||||
|
|
@ -984,6 +985,24 @@ body button.noicon {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
#controlCells > .current {
|
||||
fill: #82c8ff40;
|
||||
stroke: #82c8ff;
|
||||
stroke-width: 0.4;
|
||||
}
|
||||
|
||||
#controlCells > .available {
|
||||
fill: #82ff9b40;
|
||||
stroke: #82ff9b;
|
||||
stroke-width: 0.4;
|
||||
}
|
||||
|
||||
#controlCells > .occupied {
|
||||
fill: #ff828240;
|
||||
stroke: #ff8282;
|
||||
stroke-width: 0.4;
|
||||
}
|
||||
|
||||
#vertices > circle {
|
||||
fill: #ff0000;
|
||||
stroke: #841f1f;
|
||||
|
|
|
|||
|
|
@ -1644,12 +1644,12 @@
|
|||
<input id="riverWidth" disabled/>
|
||||
</div>
|
||||
|
||||
<div data-tip="River source width in pixels">
|
||||
<div data-tip="River additional width. Default value is 0">
|
||||
<div class="label">Source width:</div>
|
||||
<input id="riverSourceWidth" type="number" min=0 max=3 step=.1 />
|
||||
</div>
|
||||
|
||||
<div data-tip="River width multiplier">
|
||||
<div data-tip="River width multiplier. Default value is 1">
|
||||
<div class="label">Width modifier:</div>
|
||||
<input id="riverWidthFactor" type="number" min=.1 max=4 step=.1 />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -706,6 +706,14 @@ function parseLoadedData(data) {
|
|||
statesHalo.attr("opacity", opacity).attr("filter", "blur(5px)");
|
||||
regions.attr("opacity", null).attr("filter", null);
|
||||
}
|
||||
|
||||
if (version < 1.65) {
|
||||
// v 1.65 changed rivers data
|
||||
for (const river of pack.rivers) {
|
||||
river.sourceWidth = 0;
|
||||
// get points and cells
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
void (function checkDataIntegrity() {
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@
|
|||
const meanderedPoints = addMeandering(riverCells);
|
||||
const discharge = cells.fl[mouth]; // m3 in second
|
||||
const length = getApproximateLength(meanderedPoints);
|
||||
const width = getWidth(getOffset(discharge, meanderedPoints.length, widthFactor));
|
||||
const width = getWidth(getOffset(discharge, meanderedPoints.length, widthFactor, 0));
|
||||
|
||||
pack.rivers.push({i: riverId, source, mouth, discharge, length, width, widthFactor, sourceWidth: 0, parent, cells: riverCells});
|
||||
}
|
||||
|
|
@ -441,5 +441,5 @@
|
|||
return getBasin(parent);
|
||||
};
|
||||
|
||||
return {generate, alterHeights, resolveDepressions, addMeandering, getRiverPath, specify, getName, getType, getBasin, getWidth, getOffset, getApproximateLength, remove};
|
||||
return {generate, alterHeights, resolveDepressions, addMeandering, getRiverPath, specify, getName, getType, getBasin, getWidth, getOffset, getApproximateLength, getRiverPoints, remove};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,10 +6,7 @@ restoreDefaultEvents(); // apply default viewbox events on load
|
|||
// restore default viewbox events
|
||||
function restoreDefaultEvents() {
|
||||
svg.call(zoom);
|
||||
viewbox.style("cursor", "default")
|
||||
.on(".drag", null)
|
||||
.on("click", clicked)
|
||||
.on("touchmove mousemove", moved);
|
||||
viewbox.style("cursor", "default").on(".drag", null).on("click", clicked).on("touchmove mousemove", moved);
|
||||
legend.call(d3.drag().on("start", dragLegendBox));
|
||||
}
|
||||
|
||||
|
|
@ -17,12 +14,14 @@ function restoreDefaultEvents() {
|
|||
function clicked() {
|
||||
const el = d3.event.target;
|
||||
if (!el || !el.parentElement || !el.parentElement.parentElement) return;
|
||||
const parent = el.parentElement, grand = parent.parentElement, great = grand.parentElement;
|
||||
const parent = el.parentElement;
|
||||
const grand = parent.parentElement;
|
||||
const great = grand.parentElement;
|
||||
const p = d3.mouse(this);
|
||||
const i = findCell(p[0], p[1]);
|
||||
|
||||
if (grand.id === "emblems") editEmblem();
|
||||
else if (parent.id === "rivers") editRiver();
|
||||
else if (parent.id === "rivers") editRiver(el.id);
|
||||
else if (grand.id === "routes") editRoute();
|
||||
else if (el.tagName === "tspan" && grand.parentNode.parentNode.id === "labels") editLabel();
|
||||
else if (grand.id === "burgLabels") editBurg();
|
||||
|
|
@ -33,10 +32,9 @@ function clicked() {
|
|||
else if (grand.id === "coastline") editCoastline();
|
||||
else if (great.id === "armies") editRegiment();
|
||||
else if (pack.cells.t[i] === 1) {
|
||||
const node = document.getElementById("island_"+pack.cells.f[i]);
|
||||
const node = document.getElementById("island_" + pack.cells.f[i]);
|
||||
editCoastline(node);
|
||||
}
|
||||
else if (grand.id === "lakes") editLake();
|
||||
} else if (grand.id === "lakes") editLake();
|
||||
}
|
||||
|
||||
// clear elSelected variable
|
||||
|
|
@ -51,9 +49,11 @@ function unselect() {
|
|||
|
||||
// close all dialogs except stated
|
||||
function closeDialogs(except = "#except") {
|
||||
$(".dialog:visible").not(except).each(function() {
|
||||
$(this).dialog("close");
|
||||
});
|
||||
$(".dialog:visible")
|
||||
.not(except)
|
||||
.each(function () {
|
||||
$(this).dialog("close");
|
||||
});
|
||||
}
|
||||
|
||||
// move brush radius circle
|
||||
|
|
@ -79,8 +79,10 @@ function fitContent() {
|
|||
}
|
||||
|
||||
// apply sorting behaviour for lines on Editor header click
|
||||
document.querySelectorAll(".sortable").forEach(function(e) {
|
||||
e.addEventListener("click", function(e) {sortLines(this);});
|
||||
document.querySelectorAll(".sortable").forEach(function (e) {
|
||||
e.addEventListener("click", function (e) {
|
||||
sortLines(this);
|
||||
});
|
||||
});
|
||||
|
||||
function sortLines(header) {
|
||||
|
|
@ -90,7 +92,9 @@ function sortLines(header) {
|
|||
|
||||
const headers = header.parentNode;
|
||||
headers.querySelectorAll("div.sortable").forEach(e => {
|
||||
e.classList.forEach(c => {if(c.includes("icon-sort")) e.classList.remove(c);});
|
||||
e.classList.forEach(c => {
|
||||
if (c.includes("icon-sort")) e.classList.remove(c);
|
||||
});
|
||||
});
|
||||
header.classList.add("icon-sort-" + type + order);
|
||||
applySorting(headers);
|
||||
|
|
@ -105,16 +109,19 @@ function applySorting(headers) {
|
|||
const list = headers.nextElementSibling;
|
||||
const lines = Array.from(list.children);
|
||||
|
||||
lines.sort((a, b) => {
|
||||
const an = name ? a.dataset[sortby] : +a.dataset[sortby];
|
||||
const bn = name ? b.dataset[sortby] : +b.dataset[sortby];
|
||||
return (an > bn ? 1 : an < bn ? -1 : 0) * desc;
|
||||
}).forEach(line => list.appendChild(line));
|
||||
lines
|
||||
.sort((a, b) => {
|
||||
const an = name ? a.dataset[sortby] : +a.dataset[sortby];
|
||||
const bn = name ? b.dataset[sortby] : +b.dataset[sortby];
|
||||
return (an > bn ? 1 : an < bn ? -1 : 0) * desc;
|
||||
})
|
||||
.forEach(line => list.appendChild(line));
|
||||
}
|
||||
|
||||
function addBurg(point) {
|
||||
const cells = pack.cells;
|
||||
const x = rn(point[0], 2), y = rn(point[1], 2);
|
||||
const x = rn(point[0], 2),
|
||||
y = rn(point[1], 2);
|
||||
const cell = findCell(x, point[1]);
|
||||
const i = pack.burgs.length;
|
||||
const culture = cells.culture[cell];
|
||||
|
|
@ -123,11 +130,11 @@ function addBurg(point) {
|
|||
const feature = cells.f[cell];
|
||||
|
||||
const temple = pack.states[state].form === "Theocracy";
|
||||
const population = Math.max((cells.s[cell] + cells.road[cell]) / 3 + i / 1000 + cell % 100 / 1000, .1);
|
||||
const population = Math.max((cells.s[cell] + cells.road[cell]) / 3 + i / 1000 + (cell % 100) / 1000, 0.1);
|
||||
const type = BurgsAndStates.getType(cell, false);
|
||||
|
||||
// generate emblem
|
||||
const coa = COA.generate(pack.states[state].coa, .25, null, type);
|
||||
const coa = COA.generate(pack.states[state].coa, 0.25, null, type);
|
||||
coa.shield = COA.getShield(culture, state);
|
||||
COArenderer.add("burg", i, coa, x, y);
|
||||
|
||||
|
|
@ -135,10 +142,23 @@ function addBurg(point) {
|
|||
cells.burg[cell] = i;
|
||||
|
||||
const townSize = burgIcons.select("#towns").attr("size") || 0.5;
|
||||
burgIcons.select("#towns").append("circle").attr("id", "burg"+i).attr("data-id", i)
|
||||
.attr("cx", x).attr("cy", y).attr("r", townSize);
|
||||
burgLabels.select("#towns").append("text").attr("id", "burgLabel"+i).attr("data-id", i)
|
||||
.attr("x", x).attr("y", y).attr("dy", `${townSize * -1.5}px`).text(name);
|
||||
burgIcons
|
||||
.select("#towns")
|
||||
.append("circle")
|
||||
.attr("id", "burg" + i)
|
||||
.attr("data-id", i)
|
||||
.attr("cx", x)
|
||||
.attr("cy", y)
|
||||
.attr("r", townSize);
|
||||
burgLabels
|
||||
.select("#towns")
|
||||
.append("text")
|
||||
.attr("id", "burgLabel" + i)
|
||||
.attr("data-id", i)
|
||||
.attr("x", x)
|
||||
.attr("y", y)
|
||||
.attr("dy", `${townSize * -1.5}px`)
|
||||
.text(name);
|
||||
|
||||
BurgsAndStates.defineBurgFeatures(pack.burgs[i]);
|
||||
return i;
|
||||
|
|
@ -148,17 +168,20 @@ function moveBurgToGroup(id, g) {
|
|||
const label = document.querySelector("#burgLabels [data-id='" + id + "']");
|
||||
const icon = document.querySelector("#burgIcons [data-id='" + id + "']");
|
||||
const anchor = document.querySelector("#anchors [data-id='" + id + "']");
|
||||
if (!label || !icon) {ERROR && console.error("Cannot find label or icon elements"); return;}
|
||||
if (!label || !icon) {
|
||||
ERROR && console.error("Cannot find label or icon elements");
|
||||
return;
|
||||
}
|
||||
|
||||
document.querySelector("#burgLabels > #"+g).appendChild(label);
|
||||
document.querySelector("#burgIcons > #"+g).appendChild(icon);
|
||||
document.querySelector("#burgLabels > #" + g).appendChild(label);
|
||||
document.querySelector("#burgIcons > #" + g).appendChild(icon);
|
||||
|
||||
const iconSize = icon.parentNode.getAttribute("size");
|
||||
icon.setAttribute("r", iconSize);
|
||||
label.setAttribute("dy", `${iconSize * -1.5}px`);
|
||||
|
||||
if (anchor) {
|
||||
document.querySelector("#anchors > #"+g).appendChild(anchor);
|
||||
document.querySelector("#anchors > #" + g).appendChild(anchor);
|
||||
const anchorSize = +anchor.parentNode.getAttribute("size");
|
||||
anchor.setAttribute("width", anchorSize);
|
||||
anchor.setAttribute("height", anchorSize);
|
||||
|
|
@ -175,7 +198,8 @@ function removeBurg(id) {
|
|||
if (icon) icon.remove();
|
||||
if (anchor) anchor.remove();
|
||||
|
||||
const cells = pack.cells, burg = pack.burgs[id];
|
||||
const cells = pack.cells,
|
||||
burg = pack.burgs[id];
|
||||
burg.removed = true;
|
||||
cells.burg[burg.cell] = 0;
|
||||
|
||||
|
|
@ -189,8 +213,14 @@ function removeBurg(id) {
|
|||
|
||||
function toggleCapital(burg) {
|
||||
const state = pack.burgs[burg].state;
|
||||
if (!state) {tip("Neutral lands cannot have a capital", false, "error"); return;}
|
||||
if (pack.burgs[burg].capital) {tip("To change capital please assign a capital status to another burg of this state", false, "error"); return;}
|
||||
if (!state) {
|
||||
tip("Neutral lands cannot have a capital", false, "error");
|
||||
return;
|
||||
}
|
||||
if (pack.burgs[burg].capital) {
|
||||
tip("To change capital please assign a capital status to another burg of this state", false, "error");
|
||||
return;
|
||||
}
|
||||
const old = pack.states[state].capital;
|
||||
|
||||
// change statuses
|
||||
|
|
@ -206,7 +236,10 @@ function togglePort(burg) {
|
|||
const anchor = document.querySelector("#anchors [data-id='" + burg + "']");
|
||||
if (anchor) anchor.remove();
|
||||
const b = pack.burgs[burg];
|
||||
if (b.port) {b.port = 0; return;} // not a port anymore
|
||||
if (b.port) {
|
||||
b.port = 0;
|
||||
return;
|
||||
} // not a port anymore
|
||||
|
||||
const haven = pack.cells.haven[b.cell];
|
||||
const port = haven ? pack.cells.f[haven] : -1;
|
||||
|
|
@ -214,11 +247,16 @@ function togglePort(burg) {
|
|||
b.port = port;
|
||||
|
||||
const g = b.capital ? "cities" : "towns";
|
||||
const group = anchors.select("g#"+g);
|
||||
const group = anchors.select("g#" + g);
|
||||
const size = +group.attr("size");
|
||||
group.append("use").attr("xlink:href", "#icon-anchor").attr("data-id", burg)
|
||||
.attr("x", rn(b.x - size * .47, 2)).attr("y", rn(b.y - size * .47, 2))
|
||||
.attr("width", size).attr("height", size);
|
||||
group
|
||||
.append("use")
|
||||
.attr("xlink:href", "#icon-anchor")
|
||||
.attr("data-id", burg)
|
||||
.attr("x", rn(b.x - size * 0.47, 2))
|
||||
.attr("y", rn(b.y - size * 0.47, 2))
|
||||
.attr("width", size)
|
||||
.attr("height", size);
|
||||
}
|
||||
|
||||
function toggleBurgLock(burg) {
|
||||
|
|
@ -251,38 +289,49 @@ function drawLegend(name, data) {
|
|||
const vOffset = fontSize / 2;
|
||||
|
||||
// append items
|
||||
const boxes = legend.append("g").attr("stroke-width", .5).attr("stroke", "#111111").attr("stroke-dasharray", "none");
|
||||
const boxes = legend.append("g").attr("stroke-width", 0.5).attr("stroke", "#111111").attr("stroke-dasharray", "none");
|
||||
const labels = legend.append("g").attr("fill", "#000000").attr("stroke", "none");
|
||||
|
||||
const columns = Math.ceil(data.length / itemsInCol);
|
||||
for (let column=0, i=0; column < columns; column++) {
|
||||
for (let column = 0, i = 0; column < columns; column++) {
|
||||
const linesInColumn = Math.ceil(data.length / columns);
|
||||
const offset = column ? colOffset * 2 + legend.node().getBBox().width : colOffset;
|
||||
|
||||
for (let l=0; l < linesInColumn && data[i]; l++, i++) {
|
||||
boxes.append("rect").attr("fill", data[i][1])
|
||||
.attr("x", offset).attr("y", lineHeight + l*lineHeight + vOffset)
|
||||
.attr("width", colorBoxSize).attr("height", colorBoxSize);
|
||||
for (let l = 0; l < linesInColumn && data[i]; l++, i++) {
|
||||
boxes
|
||||
.append("rect")
|
||||
.attr("fill", data[i][1])
|
||||
.attr("x", offset)
|
||||
.attr("y", lineHeight + l * lineHeight + vOffset)
|
||||
.attr("width", colorBoxSize)
|
||||
.attr("height", colorBoxSize);
|
||||
|
||||
labels.append("text").text(data[i][2])
|
||||
.attr("x", offset + colorBoxSize * 1.6).attr("y", fontSize/1.6 + lineHeight + l*lineHeight + vOffset);
|
||||
labels
|
||||
.append("text")
|
||||
.text(data[i][2])
|
||||
.attr("x", offset + colorBoxSize * 1.6)
|
||||
.attr("y", fontSize / 1.6 + lineHeight + l * lineHeight + vOffset);
|
||||
}
|
||||
}
|
||||
|
||||
// append label
|
||||
const offset = colOffset + legend.node().getBBox().width / 2;
|
||||
labels.append("text")
|
||||
.attr("text-anchor", "middle").attr("font-weight", "bold").attr("font-size", "1.2em")
|
||||
.attr("id", "legendLabel").text(name).attr("x", offset).attr("y", fontSize * 1.1 + vOffset / 2);
|
||||
labels
|
||||
.append("text")
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("font-weight", "bold")
|
||||
.attr("font-size", "1.2em")
|
||||
.attr("id", "legendLabel")
|
||||
.text(name)
|
||||
.attr("x", offset)
|
||||
.attr("y", fontSize * 1.1 + vOffset / 2);
|
||||
|
||||
// append box
|
||||
const bbox = legend.node().getBBox();
|
||||
const width = bbox.width + colOffset * 2;
|
||||
const height = bbox.height + colOffset / 2 + vOffset;
|
||||
|
||||
legend.insert("rect", ":first-child").attr("id", "legendBox")
|
||||
.attr("x", 0).attr("y", 0).attr("width", width).attr("height", height)
|
||||
.attr("fill", backClr).attr("fill-opacity", opacity);
|
||||
legend.insert("rect", ":first-child").attr("id", "legendBox").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height).attr("fill", backClr).attr("fill-opacity", opacity);
|
||||
|
||||
fitLegendBox();
|
||||
}
|
||||
|
|
@ -293,7 +342,8 @@ function fitLegendBox() {
|
|||
const px = isNaN(+legend.attr("data-x")) ? 99 : legend.attr("data-x") / 100;
|
||||
const py = isNaN(+legend.attr("data-y")) ? 93 : legend.attr("data-y") / 100;
|
||||
const bbox = legend.node().getBBox();
|
||||
const x = rn(svgWidth * px - bbox.width), y = rn(svgHeight * py - bbox.height);
|
||||
const x = rn(svgWidth * px - bbox.width),
|
||||
y = rn(svgHeight * py - bbox.height);
|
||||
legend.attr("transform", `translate(${x},${y})`);
|
||||
}
|
||||
|
||||
|
|
@ -301,19 +351,23 @@ function fitLegendBox() {
|
|||
function redrawLegend() {
|
||||
if (!legend.select("rect").size()) return;
|
||||
const name = legend.select("#legendLabel").text();
|
||||
const data = legend.attr("data").split("|").map(l => l.split(","));
|
||||
const data = legend
|
||||
.attr("data")
|
||||
.split("|")
|
||||
.map(l => l.split(","));
|
||||
drawLegend(name, data);
|
||||
}
|
||||
|
||||
function dragLegendBox() {
|
||||
const tr = parseTransform(this.getAttribute("transform"));
|
||||
const x = +tr[0] - d3.event.x, y = +tr[1] - d3.event.y;
|
||||
const x = +tr[0] - d3.event.x,
|
||||
y = +tr[1] - d3.event.y;
|
||||
const bbox = legend.node().getBBox();
|
||||
|
||||
d3.event.on("drag", function() {
|
||||
const px = rn((x + d3.event.x + bbox.width) / svgWidth * 100, 2);
|
||||
const py = rn((y + d3.event.y + bbox.height) / svgHeight * 100, 2);
|
||||
const transform = `translate(${(x + d3.event.x)},${(y + d3.event.y)})`;
|
||||
d3.event.on("drag", function () {
|
||||
const px = rn(((x + d3.event.x + bbox.width) / svgWidth) * 100, 2);
|
||||
const py = rn(((y + d3.event.y + bbox.height) / svgHeight) * 100, 2);
|
||||
const transform = `translate(${x + d3.event.x},${y + d3.event.y})`;
|
||||
legend.attr("transform", transform).attr("data-x", px).attr("data-y", py);
|
||||
});
|
||||
}
|
||||
|
|
@ -330,9 +384,16 @@ function createPicker() {
|
|||
const closePicker = () => contaiter.style("display", "none");
|
||||
|
||||
const contaiter = d3.select("body").append("svg").attr("id", "pickerContainer").attr("width", "100%").attr("height", "100%");
|
||||
contaiter.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("opacity", .2)
|
||||
.on("mousemove", cl).on("click", closePicker);
|
||||
const picker = contaiter.append("g").attr("id", "picker").call(d3.drag().filter(() => event.target.tagName !== "INPUT").on("start", dragPicker));
|
||||
contaiter.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("opacity", 0.2).on("mousemove", cl).on("click", closePicker);
|
||||
const picker = contaiter
|
||||
.append("g")
|
||||
.attr("id", "picker")
|
||||
.call(
|
||||
d3
|
||||
.drag()
|
||||
.filter(() => event.target.tagName !== "INPUT")
|
||||
.on("start", dragPicker)
|
||||
);
|
||||
|
||||
const controls = picker.append("g").attr("id", "pickerControls");
|
||||
const h = controls.append("g");
|
||||
|
|
@ -343,7 +404,7 @@ function createPicker() {
|
|||
|
||||
const s = controls.append("g");
|
||||
s.append("text").attr("x", 113).attr("y", 14).text("S:");
|
||||
s.append("line").attr("x1", 124).attr("y1", 10).attr("x2", 206).attr("y2", 10)
|
||||
s.append("line").attr("x1", 124).attr("y1", 10).attr("x2", 206).attr("y2", 10);
|
||||
s.append("circle").attr("cx", 181.4).attr("cy", 10).attr("r", 5).attr("id", "pickerS");
|
||||
s.on("mousemove", () => tip("Set palette saturation"));
|
||||
|
||||
|
|
@ -356,8 +417,13 @@ function createPicker() {
|
|||
controls.selectAll("line").on("click", clickPickerControl);
|
||||
controls.selectAll("circle").call(d3.drag().on("start", dragPickerControl));
|
||||
|
||||
const spaces = picker.append("foreignObject").attr("id", "pickerSpaces")
|
||||
.attr("x", 4).attr("y", 20).attr("width", 303).attr("height", 20)
|
||||
const spaces = picker
|
||||
.append("foreignObject")
|
||||
.attr("id", "pickerSpaces")
|
||||
.attr("x", 4)
|
||||
.attr("y", 20)
|
||||
.attr("width", 303)
|
||||
.attr("height", 20)
|
||||
.on("mousemove", () => tip("Color value in different color spaces. Edit to change"));
|
||||
const html = `
|
||||
<label style="margin-right: 6px">HSL:
|
||||
|
|
@ -371,7 +437,7 @@ function createPicker() {
|
|||
<input type="number" id="pickerRGB_B" data-space="rgb" min=0 max=255 value="232">
|
||||
</label>
|
||||
<label>HEX: <input type="text" id="pickerHEX" data-space="hex" style="width:42px" autocorrect="off" spellcheck="false" value="#7d8ee8"></label>`;
|
||||
spaces.node().insertAdjacentHTML('beforeend', html);
|
||||
spaces.node().insertAdjacentHTML("beforeend", html);
|
||||
spaces.selectAll("input").on("change", changePickerSpace);
|
||||
|
||||
const colors = picker.append("g").attr("id", "pickerColors").attr("stroke", "#333333");
|
||||
|
|
@ -379,19 +445,38 @@ function createPicker() {
|
|||
const hatching = d3.selectAll("g#hatching > pattern");
|
||||
const number = hatching.size();
|
||||
|
||||
const clr = d3.range(number).map(i => d3.hsl(i/number*360, .7, .7).hex());
|
||||
clr.forEach(function(d, i) {
|
||||
colors.append("rect").attr("id", "picker_" + d).attr("fill", d).attr("class", i?"":"selected")
|
||||
.attr("x", i*22+4).attr("y", 40).attr("width", 16).attr("height", 16);
|
||||
const clr = d3.range(number).map(i => d3.hsl((i / number) * 360, 0.7, 0.7).hex());
|
||||
clr.forEach(function (d, i) {
|
||||
colors
|
||||
.append("rect")
|
||||
.attr("id", "picker_" + d)
|
||||
.attr("fill", d)
|
||||
.attr("class", i ? "" : "selected")
|
||||
.attr("x", i * 22 + 4)
|
||||
.attr("y", 40)
|
||||
.attr("width", 16)
|
||||
.attr("height", 16);
|
||||
});
|
||||
|
||||
hatching.each(function(d, i) {
|
||||
hatches.append("rect").attr("id", "picker_" + this.id).attr("fill", "url(#" + this.id + ")")
|
||||
.attr("x", i*22+4).attr("y", 61).attr("width", 16).attr("height", 16);
|
||||
hatching.each(function (d, i) {
|
||||
hatches
|
||||
.append("rect")
|
||||
.attr("id", "picker_" + this.id)
|
||||
.attr("fill", "url(#" + this.id + ")")
|
||||
.attr("x", i * 22 + 4)
|
||||
.attr("y", 61)
|
||||
.attr("width", 16)
|
||||
.attr("height", 16);
|
||||
});
|
||||
|
||||
colors.selectAll("rect").on("click", pickerFillClicked).on("mousemove", () => tip("Click to fill with the color"));
|
||||
hatches.selectAll("rect").on("click", pickerFillClicked).on("mousemove", () => tip("Click to fill with the hatching"));
|
||||
colors
|
||||
.selectAll("rect")
|
||||
.on("click", pickerFillClicked)
|
||||
.on("mousemove", () => tip("Click to fill with the color"));
|
||||
hatches
|
||||
.selectAll("rect")
|
||||
.on("click", pickerFillClicked)
|
||||
.on("mousemove", () => tip("Click to fill with the hatching"));
|
||||
|
||||
// append box
|
||||
const bbox = picker.node().getBBox();
|
||||
|
|
@ -403,12 +488,15 @@ function createPicker() {
|
|||
picker.insert("rect", ":first-child").attr("x", 288).attr("y", -21).attr("id", "pickerCloseRect").attr("width", 14).attr("height", 14).on("mousemove", cl).on("click", closePicker);
|
||||
picker.insert("text", ":first-child").attr("x", 12).attr("y", -10).attr("id", "pickerLabel").text("Color Picker").on("mousemove", pos);
|
||||
picker.insert("rect", ":first-child").attr("x", 0).attr("y", -30).attr("width", width).attr("height", 30).attr("id", "pickerHeader").on("mousemove", pos);
|
||||
picker.attr("transform", `translate(${(svgWidth-width)/2},${(svgHeight-height)/2})`);
|
||||
picker.attr("transform", `translate(${(svgWidth - width) / 2},${(svgHeight - height) / 2})`);
|
||||
}
|
||||
|
||||
function updateSelectedRect(fill) {
|
||||
document.getElementById("picker").querySelector("rect.selected").classList.remove("selected");
|
||||
document.getElementById("picker").querySelector("rect[fill='"+fill.toLowerCase()+"']").classList.add("selected");
|
||||
document
|
||||
.getElementById("picker")
|
||||
.querySelector("rect[fill='" + fill.toLowerCase() + "']")
|
||||
.classList.add("selected");
|
||||
}
|
||||
|
||||
function updateSpaces() {
|
||||
|
|
@ -438,8 +526,8 @@ function updatePickerColors() {
|
|||
const s = getPickerControl(pickerS, 1);
|
||||
const l = getPickerControl(pickerL, 1);
|
||||
|
||||
colors.each(function(d, i) {
|
||||
const clr = d3.hsl(i/number*180+h, s, l).hex();
|
||||
colors.each(function (d, i) {
|
||||
const clr = d3.hsl((i / number) * 180 + h, s, l).hex();
|
||||
this.setAttribute("id", "picker_" + clr);
|
||||
this.setAttribute("fill", clr);
|
||||
});
|
||||
|
|
@ -461,11 +549,11 @@ function openPicker(fill, callback) {
|
|||
|
||||
updateSelectedRect(fill);
|
||||
|
||||
openPicker.updateFill = function() {
|
||||
openPicker.updateFill = function () {
|
||||
const selected = document.getElementById("picker").querySelector("rect.selected");
|
||||
if (!selected) return;
|
||||
callback(selected.getAttribute("fill"));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function setPickerControl(control, value, max) {
|
||||
|
|
@ -479,19 +567,20 @@ function getPickerControl(control, max) {
|
|||
const min = +control.previousSibling.getAttribute("x1");
|
||||
const delta = +control.previousSibling.getAttribute("x2") - min;
|
||||
const current = +control.getAttribute("cx") - min;
|
||||
return current / delta * max;
|
||||
return (current / delta) * max;
|
||||
}
|
||||
|
||||
function dragPicker() {
|
||||
const tr = parseTransform(this.getAttribute("transform"));
|
||||
const x = +tr[0] - d3.event.x, y = +tr[1] - d3.event.y;
|
||||
const x = +tr[0] - d3.event.x,
|
||||
y = +tr[1] - d3.event.y;
|
||||
const picker = d3.select("#picker");
|
||||
const bbox = picker.node().getBBox();
|
||||
|
||||
d3.event.on("drag", function() {
|
||||
const px = rn((x + d3.event.x + bbox.width) / svgWidth * 100, 2);
|
||||
const py = rn((y + d3.event.y + bbox.height) / svgHeight * 100, 2);
|
||||
const transform = `translate(${(x + d3.event.x)},${(y + d3.event.y)})`;
|
||||
d3.event.on("drag", function () {
|
||||
const px = rn(((x + d3.event.x + bbox.width) / svgWidth) * 100, 2);
|
||||
const py = rn(((y + d3.event.y + bbox.height) / svgHeight) * 100, 2);
|
||||
const transform = `translate(${x + d3.event.x},${y + d3.event.y})`;
|
||||
picker.attr("transform", transform).attr("data-x", px).attr("data-y", py);
|
||||
});
|
||||
}
|
||||
|
|
@ -519,7 +608,7 @@ function dragPickerControl() {
|
|||
const min = +this.previousSibling.getAttribute("x1");
|
||||
const max = +this.previousSibling.getAttribute("x2");
|
||||
|
||||
d3.event.on("drag", function() {
|
||||
d3.event.on("drag", function () {
|
||||
const x = Math.max(Math.min(d3.event.x, max), min);
|
||||
this.setAttribute("cx", x);
|
||||
updateSpaces();
|
||||
|
|
@ -530,16 +619,20 @@ function dragPickerControl() {
|
|||
|
||||
function changePickerSpace() {
|
||||
const valid = this.checkValidity();
|
||||
if (!valid) {tip("You must provide a correct value", false, "error"); return;}
|
||||
if (!valid) {
|
||||
tip("You must provide a correct value", false, "error");
|
||||
return;
|
||||
}
|
||||
|
||||
const space = this.dataset.space;
|
||||
const i = Array.from(this.parentNode.querySelectorAll("input")).map(input => input.value); // inputs
|
||||
const fill = space === "hex" ? d3.rgb(this.value)
|
||||
: space === "rgb" ? d3.rgb(i[0], i[1], i[2])
|
||||
: d3.hsl(i[0], i[1]/100, i[2]/100);
|
||||
const fill = space === "hex" ? d3.rgb(this.value) : space === "rgb" ? d3.rgb(i[0], i[1], i[2]) : d3.hsl(i[0], i[1] / 100, i[2] / 100);
|
||||
|
||||
const hsl = d3.hsl(fill);
|
||||
if (isNaN(hsl.l)) {tip("You must provide a correct value", false, "error"); return;}
|
||||
if (isNaN(hsl.l)) {
|
||||
tip("You must provide a correct value", false, "error");
|
||||
return;
|
||||
}
|
||||
if (!isNaN(hsl.h)) setPickerControl(pickerH, hsl.h, 360);
|
||||
if (!isNaN(hsl.s)) setPickerControl(pickerS, hsl.s, 1);
|
||||
if (!isNaN(hsl.l)) setPickerControl(pickerL, hsl.l, 1);
|
||||
|
|
@ -551,7 +644,7 @@ function changePickerSpace() {
|
|||
|
||||
// add fogging
|
||||
function fog(id, path) {
|
||||
if (defs.select("#fog #"+id).size()) return;
|
||||
if (defs.select("#fog #" + id).size()) return;
|
||||
const fadeIn = d3.transition().duration(2000).ease(d3.easeSinInOut);
|
||||
if (defs.select("#fog path").size()) {
|
||||
defs.select("#fog").append("path").attr("d", path).attr("id", id).attr("opacity", 0).transition(fadeIn).attr("opacity", 1);
|
||||
|
|
@ -564,7 +657,7 @@ function fog(id, path) {
|
|||
|
||||
// remove fogging
|
||||
function unfog(id) {
|
||||
let el = defs.select("#fog #"+id);
|
||||
let el = defs.select("#fog #" + id);
|
||||
if (!id || !el.size()) el = defs.select("#fog").selectAll("path");
|
||||
|
||||
el.remove();
|
||||
|
|
@ -572,7 +665,7 @@ function unfog(id) {
|
|||
}
|
||||
|
||||
function getFileName(dataType) {
|
||||
const formatTime = time => time < 10 ? "0" + time : time;
|
||||
const formatTime = time => (time < 10 ? "0" + time : time);
|
||||
const name = mapName.value;
|
||||
const type = dataType ? dataType + " " : "";
|
||||
const date = new Date();
|
||||
|
|
@ -581,7 +674,7 @@ function getFileName(dataType) {
|
|||
const day = formatTime(date.getDate());
|
||||
const hour = formatTime(date.getHours());
|
||||
const minutes = formatTime(date.getMinutes());
|
||||
const dateString = [year, month, day, hour, minutes].join('-');
|
||||
const dateString = [year, month, day, hour, minutes].join("-");
|
||||
return name + " " + type + dateString;
|
||||
}
|
||||
|
||||
|
|
@ -609,12 +702,9 @@ function highlightElement(element) {
|
|||
const enter = d3.transition().duration(1000).ease(d3.easeBounceOut);
|
||||
const exit = d3.transition().duration(500).ease(d3.easeLinear);
|
||||
|
||||
const highlight = debug.append("rect").attr("x", box.x).attr("y", box.y)
|
||||
.attr("width", box.width).attr("height", box.height).attr("transform", transform);
|
||||
const highlight = debug.append("rect").attr("x", box.x).attr("y", box.y).attr("width", box.width).attr("height", box.height).attr("transform", transform);
|
||||
|
||||
highlight.classed("highlighted", 1)
|
||||
.transition(enter).style("outline-offset", "0px")
|
||||
.transition(exit).style("outline-color", "transparent").delay(1000).remove();
|
||||
highlight.classed("highlighted", 1).transition(enter).style("outline-offset", "0px").transition(exit).style("outline-color", "transparent").delay(1000).remove();
|
||||
|
||||
const tr = parseTransform(transform);
|
||||
let x = box.x + box.width / 2;
|
||||
|
|
@ -633,45 +723,239 @@ function selectIcon(initial, callback) {
|
|||
input.value = initial;
|
||||
|
||||
if (!table.innerHTML) {
|
||||
const icons = ["⚔️","🏹","🐴","💣","🌊","🎯","⚓","🔮","📯","⚒️","🛡️","👑","⚜️",
|
||||
"☠️","🎆","🗡️","🔪","⛏️","🔥","🩸","💧","🐾","🎪","🏰","🏯","⛓️","❤️","💘","💜","📜","🔔",
|
||||
"🔱","💎","🌈","🌠","✨","💥","☀️","🌙","⚡","❄️","♨️","🎲","🚨","🌉","🗻","🌋","🧱",
|
||||
"⚖️","✂️","🎵","👗","🎻","🎨","🎭","⛲","💉","📖","📕","🎁","💍","⏳","🕸️","⚗️","☣️","☢️",
|
||||
"🔰","🎖️","🚩","🏳️","🏴","💪","✊","👊","🤜","🤝","🙏","🧙","🧙♀️","💂","🤴","🧛","🧟","🧞","🧝","👼",
|
||||
"👻","👺","👹","🦄","🐲","🐉","🐎","🦓","🐺","🦊","🐱","🐈","🦁","🐯","🐅","🐆","🐕","🦌","🐵","🐒","🦍",
|
||||
"🦅","🕊️","🐓","🦇","🦜","🐦","🦉","🐮","🐄","🐂","🐃","🐷","🐖","🐗","🐏","🐑","🐐","🐫","🦒","🐘","🦏","🐭","🐁","🐀",
|
||||
"🐹","🐰","🐇","🦔","🐸","🐊","🐢","🦎","🐍","🐳","🐬","🦈","🐠","🐙","🦑","🐌","🦋","🐜","🐝","🐞","🦗","🕷️","🦂","🦀",
|
||||
"🌳","🌲","🎄","🌴","🍂","🍁","🌵","☘️","🍀","🌿","🌱","🌾","🍄","🌽","🌸","🌹","🌻",
|
||||
"🍒","🍏","🍇","🍉","🍅","🍓","🥔","🥕","🥩","🍗","🍞","🍻","🍺","🍲","🍷"
|
||||
const icons = [
|
||||
"⚔️",
|
||||
"🏹",
|
||||
"🐴",
|
||||
"💣",
|
||||
"🌊",
|
||||
"🎯",
|
||||
"⚓",
|
||||
"🔮",
|
||||
"📯",
|
||||
"⚒️",
|
||||
"🛡️",
|
||||
"👑",
|
||||
"⚜️",
|
||||
"☠️",
|
||||
"🎆",
|
||||
"🗡️",
|
||||
"🔪",
|
||||
"⛏️",
|
||||
"🔥",
|
||||
"🩸",
|
||||
"💧",
|
||||
"🐾",
|
||||
"🎪",
|
||||
"🏰",
|
||||
"🏯",
|
||||
"⛓️",
|
||||
"❤️",
|
||||
"💘",
|
||||
"💜",
|
||||
"📜",
|
||||
"🔔",
|
||||
"🔱",
|
||||
"💎",
|
||||
"🌈",
|
||||
"🌠",
|
||||
"✨",
|
||||
"💥",
|
||||
"☀️",
|
||||
"🌙",
|
||||
"⚡",
|
||||
"❄️",
|
||||
"♨️",
|
||||
"🎲",
|
||||
"🚨",
|
||||
"🌉",
|
||||
"🗻",
|
||||
"🌋",
|
||||
"🧱",
|
||||
"⚖️",
|
||||
"✂️",
|
||||
"🎵",
|
||||
"👗",
|
||||
"🎻",
|
||||
"🎨",
|
||||
"🎭",
|
||||
"⛲",
|
||||
"💉",
|
||||
"📖",
|
||||
"📕",
|
||||
"🎁",
|
||||
"💍",
|
||||
"⏳",
|
||||
"🕸️",
|
||||
"⚗️",
|
||||
"☣️",
|
||||
"☢️",
|
||||
"🔰",
|
||||
"🎖️",
|
||||
"🚩",
|
||||
"🏳️",
|
||||
"🏴",
|
||||
"💪",
|
||||
"✊",
|
||||
"👊",
|
||||
"🤜",
|
||||
"🤝",
|
||||
"🙏",
|
||||
"🧙",
|
||||
"🧙♀️",
|
||||
"💂",
|
||||
"🤴",
|
||||
"🧛",
|
||||
"🧟",
|
||||
"🧞",
|
||||
"🧝",
|
||||
"👼",
|
||||
"👻",
|
||||
"👺",
|
||||
"👹",
|
||||
"🦄",
|
||||
"🐲",
|
||||
"🐉",
|
||||
"🐎",
|
||||
"🦓",
|
||||
"🐺",
|
||||
"🦊",
|
||||
"🐱",
|
||||
"🐈",
|
||||
"🦁",
|
||||
"🐯",
|
||||
"🐅",
|
||||
"🐆",
|
||||
"🐕",
|
||||
"🦌",
|
||||
"🐵",
|
||||
"🐒",
|
||||
"🦍",
|
||||
"🦅",
|
||||
"🕊️",
|
||||
"🐓",
|
||||
"🦇",
|
||||
"🦜",
|
||||
"🐦",
|
||||
"🦉",
|
||||
"🐮",
|
||||
"🐄",
|
||||
"🐂",
|
||||
"🐃",
|
||||
"🐷",
|
||||
"🐖",
|
||||
"🐗",
|
||||
"🐏",
|
||||
"🐑",
|
||||
"🐐",
|
||||
"🐫",
|
||||
"🦒",
|
||||
"🐘",
|
||||
"🦏",
|
||||
"🐭",
|
||||
"🐁",
|
||||
"🐀",
|
||||
"🐹",
|
||||
"🐰",
|
||||
"🐇",
|
||||
"🦔",
|
||||
"🐸",
|
||||
"🐊",
|
||||
"🐢",
|
||||
"🦎",
|
||||
"🐍",
|
||||
"🐳",
|
||||
"🐬",
|
||||
"🦈",
|
||||
"🐠",
|
||||
"🐙",
|
||||
"🦑",
|
||||
"🐌",
|
||||
"🦋",
|
||||
"🐜",
|
||||
"🐝",
|
||||
"🐞",
|
||||
"🦗",
|
||||
"🕷️",
|
||||
"🦂",
|
||||
"🦀",
|
||||
"🌳",
|
||||
"🌲",
|
||||
"🎄",
|
||||
"🌴",
|
||||
"🍂",
|
||||
"🍁",
|
||||
"🌵",
|
||||
"☘️",
|
||||
"🍀",
|
||||
"🌿",
|
||||
"🌱",
|
||||
"🌾",
|
||||
"🍄",
|
||||
"🌽",
|
||||
"🌸",
|
||||
"🌹",
|
||||
"🌻",
|
||||
"🍒",
|
||||
"🍏",
|
||||
"🍇",
|
||||
"🍉",
|
||||
"🍅",
|
||||
"🍓",
|
||||
"🥔",
|
||||
"🥕",
|
||||
"🥩",
|
||||
"🍗",
|
||||
"🍞",
|
||||
"🍻",
|
||||
"🍺",
|
||||
"🍲",
|
||||
"🍷"
|
||||
];
|
||||
|
||||
let row = "";
|
||||
for (let i=0; i < icons.length; i++) {
|
||||
if (i%17 === 0) row = table.insertRow(i/17|0);
|
||||
const cell = row.insertCell(i%17);
|
||||
for (let i = 0; i < icons.length; i++) {
|
||||
if (i % 17 === 0) row = table.insertRow((i / 17) | 0);
|
||||
const cell = row.insertCell(i % 17);
|
||||
cell.innerHTML = icons[i];
|
||||
}
|
||||
}
|
||||
|
||||
table.onclick = e => {if (e.target.tagName === "TD") {input.value = e.target.innerHTML; callback(input.value)}};
|
||||
table.onmouseover = e => {if (e.target.tagName === "TD") tip(`Click to select ${e.target.innerHTML} icon`)};
|
||||
table.onclick = e => {
|
||||
if (e.target.tagName === "TD") {
|
||||
input.value = e.target.innerHTML;
|
||||
callback(input.value);
|
||||
}
|
||||
};
|
||||
table.onmouseover = e => {
|
||||
if (e.target.tagName === "TD") tip(`Click to select ${e.target.innerHTML} icon`);
|
||||
};
|
||||
|
||||
$("#iconSelector").dialog({width: fitContent(), title: "Select Icon",
|
||||
buttons: {
|
||||
Apply: function() {callback(input.value||"⠀"); $(this).dialog("close")},
|
||||
Close: function() {callback(initial); $(this).dialog("close")}}
|
||||
$("#iconSelector").dialog({
|
||||
width: fitContent(),
|
||||
title: "Select Icon",
|
||||
buttons: {
|
||||
Apply: function () {
|
||||
callback(input.value || "⠀");
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Close: function () {
|
||||
callback(initial);
|
||||
$(this).dialog("close");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Calls the refresh functionality on all editors currently open.
|
||||
function refreshAllEditors() {
|
||||
TIME && console.time('refreshAllEditors');
|
||||
if (document.getElementById('culturesEditorRefresh').offsetParent) culturesEditorRefresh.click();
|
||||
if (document.getElementById('biomesEditorRefresh').offsetParent) biomesEditorRefresh.click();
|
||||
if (document.getElementById('diplomacyEditorRefresh').offsetParent) diplomacyEditorRefresh.click();
|
||||
if (document.getElementById('provincesEditorRefresh').offsetParent) provincesEditorRefresh.click();
|
||||
if (document.getElementById('religionsEditorRefresh').offsetParent) religionsEditorRefresh.click();
|
||||
if (document.getElementById('statesEditorRefresh').offsetParent) statesEditorRefresh.click();
|
||||
if (document.getElementById('zonesEditorRefresh').offsetParent) zonesEditorRefresh.click();
|
||||
TIME && console.timeEnd('refreshAllEditors');
|
||||
TIME && console.time("refreshAllEditors");
|
||||
if (document.getElementById("culturesEditorRefresh").offsetParent) culturesEditorRefresh.click();
|
||||
if (document.getElementById("biomesEditorRefresh").offsetParent) biomesEditorRefresh.click();
|
||||
if (document.getElementById("diplomacyEditorRefresh").offsetParent) diplomacyEditorRefresh.click();
|
||||
if (document.getElementById("provincesEditorRefresh").offsetParent) provincesEditorRefresh.click();
|
||||
if (document.getElementById("religionsEditorRefresh").offsetParent) religionsEditorRefresh.click();
|
||||
if (document.getElementById("statesEditorRefresh").offsetParent) statesEditorRefresh.click();
|
||||
if (document.getElementById("zonesEditorRefresh").offsetParent) zonesEditorRefresh.click();
|
||||
TIME && console.timeEnd("refreshAllEditors");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1457,10 +1457,10 @@ function drawRivers() {
|
|||
const {addMeandering, getRiverPath} = Rivers;
|
||||
lineGen.curve(d3.curveCatmullRom.alpha(0.1));
|
||||
const riverPaths = pack.rivers.map(river => {
|
||||
const riverMeandered = addMeandering(river.cells, river.points);
|
||||
const meanderedPoints = addMeandering(river.cells, river.points);
|
||||
const widthFactor = river.widthFactor || 1;
|
||||
const startingWidth = river.startingWidth || 0;
|
||||
const path = getRiverPath(riverMeandered, widthFactor, startingWidth);
|
||||
const startingWidth = river.sourceWidth || 0;
|
||||
const path = getRiverPath(meanderedPoints, widthFactor, startingWidth);
|
||||
return `<path id="river${river.i}" d="${path}"/>`;
|
||||
});
|
||||
rivers.html(riverPaths.join(""));
|
||||
|
|
|
|||
|
|
@ -1,21 +1,31 @@
|
|||
"use strict";
|
||||
function editRiver(id) {
|
||||
if (customization) return;
|
||||
if (elSelected && d3.event && d3.event.target.id === elSelected.attr("id")) return;
|
||||
if (elSelected && id === elSelected.attr("id")) return;
|
||||
closeDialogs(".stable");
|
||||
if (!layerIsOn("toggleRivers")) toggleRivers();
|
||||
|
||||
const node = id ? document.getElementById(id) : d3.event.target;
|
||||
elSelected = d3.select(node).on("click", addInterimControlPoint);
|
||||
document.getElementById("toggleCells").dataset.forced = +!layerIsOn("toggleCells");
|
||||
if (!layerIsOn("toggleCells")) toggleCells();
|
||||
|
||||
elSelected = d3.select("#" + id);
|
||||
|
||||
viewbox.on("touchmove mousemove", showEditorTips);
|
||||
debug.append("g").attr("id", "controlPoints").attr("transform", elSelected.attr("transform"));
|
||||
debug.append("g").attr("id", "controlCells");
|
||||
debug.append("g").attr("id", "controlPoints");
|
||||
|
||||
updateRiverData();
|
||||
drawControlPoints(node);
|
||||
|
||||
const river = getRiver();
|
||||
const {cells, points} = river;
|
||||
const riverPoints = Rivers.getRiverPoints(cells, points);
|
||||
drawControlPoints(riverPoints, cells);
|
||||
drawRiverCells(cells);
|
||||
|
||||
$("#riverEditor").dialog({
|
||||
title: "Edit River",
|
||||
resizable: false,
|
||||
position: {my: "center top+80", at: "top", of: node, collision: "fit"},
|
||||
position: {my: "left+40 center", at: "center", of: "svg", collision: "fit"},
|
||||
close: closeRiverEditor
|
||||
});
|
||||
|
||||
|
|
@ -28,10 +38,8 @@ function editRiver(id) {
|
|||
document.getElementById("riverNameCulture").addEventListener("click", generateNameCulture);
|
||||
document.getElementById("riverNameRandom").addEventListener("click", generateNameRandom);
|
||||
document.getElementById("riverMainstem").addEventListener("change", changeParent);
|
||||
|
||||
document.getElementById("riverSourceWidth").addEventListener("input", changeSourceWidth);
|
||||
document.getElementById("riverWidthFactor").addEventListener("input", changeWidthFactor);
|
||||
|
||||
document.getElementById("riverNew").addEventListener("click", toggleRiverCreationMode);
|
||||
document.getElementById("riverEditStyle").addEventListener("click", () => editStyle("rivers"));
|
||||
document.getElementById("riverElevationProfile").addEventListener("click", showElevationProfile);
|
||||
|
|
@ -39,9 +47,8 @@ function editRiver(id) {
|
|||
document.getElementById("riverRemove").addEventListener("click", removeRiver);
|
||||
|
||||
function showEditorTips() {
|
||||
tip("Drag control points for minor change, to change cells add a new river", true);
|
||||
showMainTip();
|
||||
if (d3.event.target.parentNode.id === elSelected.attr("id")) tip("Drag to move, click to add a control point");
|
||||
else if (d3.event.target.parentNode.id === "controlPoints") tip("Drag to move, click to delete the control point");
|
||||
}
|
||||
|
||||
function getRiver() {
|
||||
|
|
@ -67,88 +74,129 @@ function editRiver(id) {
|
|||
document.getElementById("riverBasin").value = pack.rivers.find(river => river.i === r.basin).name;
|
||||
|
||||
document.getElementById("riverDischarge").value = r.discharge + " m³/s";
|
||||
r.length = elSelected.node().getTotalLength() / 2;
|
||||
const length = rn(r.length * distanceScaleInput.value) + " " + distanceUnitInput.value;
|
||||
document.getElementById("riverLength").value = length;
|
||||
const width = rn(r.width * distanceScaleInput.value, 3) + " " + distanceUnitInput.value;
|
||||
document.getElementById("riverWidth").value = width;
|
||||
|
||||
document.getElementById("riverSourceWidth").value = r.sourceWidth;
|
||||
document.getElementById("riverWidthFactor").value = r.widthFactor;
|
||||
|
||||
updateRiverLength(r);
|
||||
updateRiverWidth(r);
|
||||
}
|
||||
|
||||
function drawControlPoints(node) {
|
||||
const length = getRiver().length;
|
||||
const segments = Math.ceil(length / 4);
|
||||
const increment = rn((length / segments) * 1e5);
|
||||
for (let i = increment * segments, c = i; i >= 0; i -= increment, c += increment) {
|
||||
const p1 = node.getPointAtLength(i / 1e5);
|
||||
const p2 = node.getPointAtLength(c / 1e5);
|
||||
addControlPoint([(p1.x + p2.x) / 2, (p1.y + p2.y) / 2]);
|
||||
}
|
||||
function updateRiverLength(river) {
|
||||
river.length = rn(elSelected.node().getTotalLength() / 2, 2);
|
||||
const length = `${river.length * distanceScaleInput.value} ${distanceUnitInput.value}`;
|
||||
document.getElementById("riverLength").value = length;
|
||||
}
|
||||
|
||||
function addControlPoint(point, before = null) {
|
||||
debug.select("#controlPoints").insert("circle", before).attr("cx", point[0]).attr("cy", point[1]).attr("r", 0.6).call(d3.drag().on("drag", dragControlPoint)).on("click", clickControlPoint);
|
||||
function updateRiverWidth(river) {
|
||||
const {addMeandering, getWidth, getOffset} = Rivers;
|
||||
const {cells, discharge, widthFactor, sourceWidth} = river;
|
||||
const meanderedPoints = addMeandering(cells);
|
||||
river.width = getWidth(getOffset(discharge, meanderedPoints.length, widthFactor, sourceWidth));
|
||||
|
||||
const width = `${rn(river.width * distanceScaleInput.value, 3)} ${distanceUnitInput.value}`;
|
||||
document.getElementById("riverWidth").value = width;
|
||||
}
|
||||
|
||||
function dragControlPoint() {
|
||||
this.setAttribute("cx", d3.event.x);
|
||||
this.setAttribute("cy", d3.event.y);
|
||||
redrawRiver();
|
||||
}
|
||||
|
||||
function redrawRiver() {
|
||||
const points = [];
|
||||
function drawControlPoints(points, cells) {
|
||||
debug
|
||||
.select("#controlPoints")
|
||||
.selectAll("circle")
|
||||
.each(function () {
|
||||
points.push([+this.getAttribute("cx"), +this.getAttribute("cy")]);
|
||||
});
|
||||
.data(points)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", d => d[0])
|
||||
.attr("cy", d => d[1])
|
||||
.attr("r", 0.6)
|
||||
.attr("data-cell", (d, i) => cells[i])
|
||||
.attr("data-i", (d, i) => i)
|
||||
.call(d3.drag().on("start", dragControlPoint));
|
||||
}
|
||||
|
||||
if (points.length < 2) return;
|
||||
if (points.length === 2) {
|
||||
const p0 = points[0],
|
||||
p1 = points[1];
|
||||
const angle = Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
|
||||
const sin = Math.sin(angle),
|
||||
cos = Math.cos(angle);
|
||||
elSelected.attr("d", `M${p0[0]},${p0[1]} L${p1[0]},${p1[1]} l${-sin / 2},${cos / 2} Z`);
|
||||
return;
|
||||
}
|
||||
function drawRiverCells(cells) {
|
||||
debug
|
||||
.select("#controlCells")
|
||||
.selectAll("polygon.current")
|
||||
.data(cells)
|
||||
.join("polygon")
|
||||
.attr("points", d => getPackPolygon(d))
|
||||
.attr("class", "current");
|
||||
}
|
||||
|
||||
function drawAvailableCells(cells) {
|
||||
debug
|
||||
.select("#controlCells")
|
||||
.selectAll("polygon.available")
|
||||
.data(cells)
|
||||
.join("polygon")
|
||||
.attr("points", d => getPackPolygon(d))
|
||||
.attr("class", "available");
|
||||
}
|
||||
|
||||
function dragControlPoint() {
|
||||
const {c, r, fl, conf} = pack.cells;
|
||||
const river = getRiver();
|
||||
const {cells} = river;
|
||||
|
||||
const initCell = +this.dataset.cell;
|
||||
const index = +this.dataset.i;
|
||||
const prev = cells[index - 1];
|
||||
const next = cells[index + 1];
|
||||
const availableCells = conf[initCell]
|
||||
? []
|
||||
: c[initCell]
|
||||
.filter(neib => !r[neib])
|
||||
.filter(neib => !prev || c[neib].includes(prev))
|
||||
.filter(neib => !next || c[neib].includes(next));
|
||||
|
||||
let movedToCell = null;
|
||||
drawAvailableCells(availableCells);
|
||||
|
||||
d3.event.on("drag", function () {
|
||||
const {x, y} = d3.event;
|
||||
const currentCell = findCell(x, y);
|
||||
|
||||
if (initCell !== currentCell) {
|
||||
if (availableCells.includes(currentCell)) movedToCell = currentCell;
|
||||
else return;
|
||||
} else movedToCell = null;
|
||||
|
||||
this.setAttribute("cx", x);
|
||||
this.setAttribute("cy", y);
|
||||
this.__data__ = [rn(x, 1), rn(y, 1)];
|
||||
redrawRiver();
|
||||
});
|
||||
|
||||
d3.event.on("end", () => {
|
||||
if (movedToCell) {
|
||||
this.dataset.cell = movedToCell;
|
||||
river.cells[index] = movedToCell;
|
||||
|
||||
r[initCell] = 0;
|
||||
r[movedToCell] = river.i;
|
||||
const sourceFlux = fl[initCell];
|
||||
fl[initCell] = fl[movedToCell];
|
||||
fl[movedToCell] = sourceFlux;
|
||||
drawRiverCells(river.cells);
|
||||
}
|
||||
|
||||
debug.select("#controlCells").selectAll("polygon.available").remove();
|
||||
});
|
||||
}
|
||||
|
||||
function redrawRiver() {
|
||||
const river = getRiver();
|
||||
river.points = debug.selectAll("#controlPoints > *").data();
|
||||
const {cells, widthFactor, sourceWidth} = river;
|
||||
const meanderedPoints = Rivers.addMeandering(cells, river.points);
|
||||
|
||||
const widthFactor = +document.getElementById("riverWidthFactor").value;
|
||||
const sourceWidth = +document.getElementById("riverSourceWidth").value;
|
||||
lineGen.curve(d3.curveCatmullRom.alpha(0.1));
|
||||
const [path, length, offset] = Rivers.getRiverPath(points, widthFactor, sourceWidth);
|
||||
const path = Rivers.getRiverPath(meanderedPoints, widthFactor, sourceWidth);
|
||||
elSelected.attr("d", path);
|
||||
|
||||
const r = getRiver();
|
||||
if (r) {
|
||||
r.width = rn(offset ** 2, 2);
|
||||
r.length = length;
|
||||
updateRiverData();
|
||||
}
|
||||
|
||||
updateRiverLength(river);
|
||||
if (modules.elevation) showEPForRiver(elSelected.node());
|
||||
}
|
||||
|
||||
function clickControlPoint() {
|
||||
this.remove();
|
||||
redrawRiver();
|
||||
}
|
||||
|
||||
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 index = getSegmentId(points, point, 2);
|
||||
addControlPoint(point, ":nth-child(" + (index + 1) + ")");
|
||||
|
||||
redrawRiver();
|
||||
}
|
||||
|
||||
function changeName() {
|
||||
getRiver().name = this.value;
|
||||
}
|
||||
|
|
@ -175,12 +223,16 @@ function editRiver(id) {
|
|||
}
|
||||
|
||||
function changeSourceWidth() {
|
||||
getRiver().sourceWidth = +this.value;
|
||||
const river = getRiver();
|
||||
river.sourceWidth = +this.value;
|
||||
updateRiverWidth(river);
|
||||
redrawRiver();
|
||||
}
|
||||
|
||||
function changeWidthFactor() {
|
||||
getRiver().widthFactor = +this.value;
|
||||
const river = getRiver();
|
||||
river.widthFactor = +this.value;
|
||||
updateRiverWidth(river);
|
||||
redrawRiver();
|
||||
}
|
||||
|
||||
|
|
@ -214,7 +266,7 @@ function editRiver(id) {
|
|||
|
||||
// add control point
|
||||
const point = d3.mouse(this);
|
||||
addControlPoint([point[0], point[1]]);
|
||||
// addControlPoint([point[0], point[1]]);
|
||||
redrawRiver();
|
||||
}
|
||||
|
||||
|
|
@ -222,7 +274,6 @@ function editRiver(id) {
|
|||
riverNew.classList.remove("pressed");
|
||||
clearMainTip();
|
||||
viewbox.on("click", clicked).style("cursor", "default");
|
||||
elSelected.on("click", addInterimControlPoint);
|
||||
|
||||
if (!elSelected.attr("data-new")) return; // no need to create a new river
|
||||
elSelected.attr("data-new", null);
|
||||
|
|
@ -257,11 +308,11 @@ function editRiver(id) {
|
|||
}
|
||||
|
||||
function removeRiver() {
|
||||
alertMessage.innerHTML = "Are you sure you want to remove the river? All tributaries will be auto-removed";
|
||||
alertMessage.innerHTML = "Are you sure you want to remove the river and all its tributaries";
|
||||
$("#alert").dialog({
|
||||
resizable: false,
|
||||
width: "22em",
|
||||
title: "Remove river",
|
||||
title: "Remove river and tributaries",
|
||||
buttons: {
|
||||
Remove: function () {
|
||||
$(this).dialog("close");
|
||||
|
|
@ -281,6 +332,11 @@ function editRiver(id) {
|
|||
exitRiverCreationMode();
|
||||
elSelected.on("click", null);
|
||||
debug.select("#controlPoints").remove();
|
||||
debug.select("#controlCells").remove();
|
||||
unselect();
|
||||
|
||||
const forced = +document.getElementById("toggleCells").dataset.forced;
|
||||
document.getElementById("toggleCells").dataset.forced = 0;
|
||||
if (forced && layerIsOn("toggleCells")) toggleCells();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -129,7 +129,8 @@ function overviewRivers() {
|
|||
}
|
||||
|
||||
function openRiverEditor() {
|
||||
editRiver("river" + this.parentNode.dataset.id);
|
||||
const id = "river" + this.parentNode.dataset.id;
|
||||
editRiver(id);
|
||||
}
|
||||
|
||||
function triggerRiverRemove() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue