backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-17 01:41:22 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

automatically pit output to input and store data

Browse source
This commit is contained in:
Azgaar 2021-06-26 00:41:43 +03:00
parent d6aac8d12c
commit 3892370816
7 changed files with 347 additions and 270 deletions
Download patch file Download diff file Expand all files Collapse all files

43
index.html
View file

@ -752,7 +752,7 @@
<tr data-tip="Select color scheme for the element"> <tr data-tip="Select color scheme for the element">
<td>Color scheme</td> <td>Color scheme</td>
<td> <td>
<select id="styleHeightmapScheme" onchange="drawHeightmap()"> <select id="styleHeightmapScheme">
<option value="bright" selected>Bright</option> <option value="bright" selected>Bright</option>
<option value="light">Light</option> <option value="light">Light</option>
<option value="green">Green</option> <option value="green">Green</option>
@ -764,14 +764,14 @@
<tr data-tip="Terracing rate. Set to 0 (toggle off) to improve performance"> <tr data-tip="Terracing rate. Set to 0 (toggle off) to improve performance">
<td>Terracing</td> <td>Terracing</td>
<td> <td>
<input id="styleHeightmapTerracing" type="range" min=0 max=20 step=1> <input id="styleHeightmapTerracingInput" type="range" min=0 max=20 step=1>
<output id="styleHeightmapTerracingOutput">0</output> <output id="styleHeightmapTerracingOutput">0</output>
</td> </td>
</tr> </tr>
<tr data-tip="Layers reduction rate. Increase to improve performance"> <tr data-tip="Layers reduction rate. Increase to improve performance">
<td>Reduce layers</td> <td>Reduce layers</td>
<td> <td>
<input id="styleHeightmapSkip" type="range" min=0 max=10 step=1 value=5 oninput="styleHeightmapSkipOutput.value = this.value; drawHeightmap()"> <input id="styleHeightmapSkipInput" type="range" min=0 max=10 step=1 value=5 >
<output id="styleHeightmapSkipOutput">5</output> <output id="styleHeightmapSkipOutput">5</output>
</td> </td>
</tr> </tr>
@ -779,7 +779,7 @@
<tr data-tip="Line simplification rate. Increase to slightly improve performance"> <tr data-tip="Line simplification rate. Increase to slightly improve performance">
<td>Simplify line</td> <td>Simplify line</td>
<td> <td>
<input id="styleHeightmapSimplification" type="range" min=0 max=10 step=1 value=0 oninput="styleHeightmapSimplificationOutput.value = this.value; drawHeightmap()"> <input id="styleHeightmapSimplificationInput" type="range" min=0 max=10 step=1 value=0 >
<output id="styleHeightmapSimplificationOutput">0</output> <output id="styleHeightmapSimplificationOutput">0</output>
</td> </td>
</tr> </tr>
@ -787,7 +787,7 @@
<tr data-tip="Select line interpolation type"> <tr data-tip="Select line interpolation type">
<td>Line style</td> <td>Line style</td>
<td> <td>
<select id="styleHeightmapCurve" onchange="drawHeightmap()"> <select id="styleHeightmapCurve">
<option value=0 selected>Curved</option> <option value=0 selected>Curved</option>
<option value=1>Linear</option> <option value=1>Linear</option>
<option value=2>Rectangular</option> <option value=2>Rectangular</option>
@ -953,7 +953,7 @@
<input id="pointsInput" type="range" min=1 max=13 value=4 data-cells=10000 > <input id="pointsInput" type="range" min=1 max=13 value=4 data-cells=10000 >
</td> </td>
<td> <td>
<output id="pointsOutput" style="color: #053305">10K</output> <output id="pointsOutput_formatted" style="color: #053305">10K</output>
</td> </td>
</tr> </tr>
@ -1151,7 +1151,7 @@
<input id="tooltipSizeInput" data-stored="tooltipSize" type="range" min=4 max=32 value=14> <input id="tooltipSizeInput" data-stored="tooltipSize" type="range" min=4 max=32 value=14>
</td> </td>
<td> <td>
<input id="tooltipSizeOutput" data-stored="tooltipSize" type="number" min=4 max=32 value=14> <input id="tooltipSizeOutput" data-stored="tooltipSize" type="number" min=0 max=256 value=14>
</td> </td>
</tr> </tr>
@ -1364,14 +1364,14 @@
</div> </div>
<div data-tip="Maximum number of iterations taken to resolve depressions. Increase if you have rivers ending nowhere"> <div data-tip="Maximum number of iterations taken to resolve depressions. Increase if you have rivers ending nowhere">
Depressions filling max iterations: Depressions filling max iterations:
<input id="resolveDepressionsStepsInput" data-stored="resolveDepressionsSteps" type="range" min=0 max=500 value=250 oninput="resolveDepressionsStepsOutput.value = this.value"> <input id="resolveDepressionsStepsInput" data-stored="resolveDepressionsSteps" type="range" min=0 max=500 value=250>
<input id="resolveDepressionsStepsOutput" data-stored="resolveDepressionsSteps" type="number" min=0 max=1000 value=250 oninput="resolveDepressionsStepsInput.value = this.value"> <input id="resolveDepressionsStepsOutput" data-stored="resolveDepressionsSteps" type="number" min=0 max=1000 value=250>
</div> </div>
<div data-tip="Depression depth to form a new lake. Increase to reduce number of lakes added by system"> <div data-tip="Depression depth to form a new lake. Increase to reduce number of lakes added by system">
Depression depth threshold: Depression depth threshold:
<input id="lakeElevationLimitInput" data-stored="lakeElevationLimit" type="range" min=0 max=80 value=20 oninput="lakeElevationLimitOutput.value = this.value"> <input id="lakeElevationLimitInput" data-stored="lakeElevationLimit" type="range" min=0 max=80 value=20>
<input id="lakeElevationLimitOutput" data-stored="lakeElevationLimit" type="number" min=0 max=80 value=20 oninput="lakeElevationLimitInput.value = this.value"> <input id="lakeElevationLimitOutput" data-stored="lakeElevationLimit" type="number" min=0 max=80 value=20>
</div> </div>
</div> </div>
@ -3086,8 +3086,8 @@
<div data-tip="Set scale bar size"> <div data-tip="Set scale bar size">
<div>Bar size:</div> <div>Bar size:</div>
<input id="barSizeOutput" type="range" min=.5 max=5 value=2 step=.1> <input id="barSizeOutput" data-stored="barSize" type="range" min=.5 max=5 value=2 step=.1>
<input id="barSize" data-stored="barSize" type="number" min=.5 max=5 value=2 step=.1> <input id="barSizeInput" data-stored="barSize" type="number" min=.5 max=5 value=2 step=.1>
</div> </div>
<div data-tip="Type scale bar label, leave blank to hide label"> <div data-tip="Type scale bar label, leave blank to hide label">
@ -3408,8 +3408,8 @@
<p style="font-style: italic">Generator uses pop-up window to download files. Please ensure your browser does not block popups.</p> <p style="font-style: italic">Generator uses pop-up window to download files. Please ensure your browser does not block popups.</p>
<div data-tip="Define scale of a saved png/jpeg image (e.g. 5x). Saving big images is slow and may cause a browser crash!" style="margin-bottom: .3em"> <div data-tip="Define scale of a saved png/jpeg image (e.g. 5x). Saving big images is slow and may cause a browser crash!" style="margin-bottom: .3em">
PNG / JPEG scale: PNG / JPEG scale:
<input id="pngResolutionInput" data-stored="pngResolution" type="range" min=1 max=8 value=1 style="width: 14em" oninput="pngResolutionOutput.value = this.value"> <input id="pngResolutionInput" data-stored="pngResolution" type="range" min=1 max=8 value=1 style="width: 14em">
<input id="pngResolutionOutput" data-stored="pngResolution" type="number" min=1 max=8 value=1 oninput="pngResolutionInput.value = this.value"> <input id="pngResolutionOutput" data-stored="pngResolution" type="number" min=1 max=8 value=1>
</div> </div>
<div data-tip="Check to not allow system to automatically hide labels"> <div data-tip="Check to not allow system to automatically hide labels">
<input id="showLabels" class="checkbox" type="checkbox" onchange="hideLabels.checked = !this.checked; invokeActiveZooming()" checked=""> <input id="showLabels" class="checkbox" type="checkbox" onchange="hideLabels.checked = !this.checked; invokeActiveZooming()" checked="">
@ -3430,18 +3430,19 @@
<p style="font-style: italic">Map will be split into tiles and downloaded as a single zip file. Avoid saving to big images</p> <p style="font-style: italic">Map will be split into tiles and downloaded as a single zip file. Avoid saving to big images</p>
<div data-tip="Number of columns" style="margin-bottom: .3em"> <div data-tip="Number of columns" style="margin-bottom: .3em">
<div class="label">Columns:</div> <div class="label">Columns:</div>
<input id="tileColsInput" data-stored="tileCols" type="range" min=2 max=20 value=8 style="width: 11em" oninput="tileColsOutput.value = this.value"> <input id="tileColsInput" data-stored="tileCols" type="range" min=2 max=20 value=8 style="width: 11em">
<input id="tileColsOutput" data-stored="tileCols" type="number" min=2 value=8 oninput="tileColsInput.value = this.value"> <input id="tileColsOutput" data-stored="tileCols" type="number" min=2 value=8 >
</div> </div>
<div data-tip="Number of rows" style="margin-bottom: .3em"> <div data-tip="Number of rows" style="margin-bottom: .3em">
<div class="label">Rows:</div> <div class="label">Rows:</div>
<input id="tileRowsInput" data-stored="tileRows" type="range" min=2 max=20 value=8 style="width: 11em" oninput="tileRowsOutput.value = this.value"> <input id="tileRowsInput" data-stored="tileRows" type="range" min=2 max=20 value=8 style="width: 11em">
<input id="tileRowsOutput" data-stored="tileRows" type="number" min=2 value=8 oninput="tileRowsInput.value = this.value"> <input id="tileRowsOutput" data-stored="tileRows" type="number" min=2 value=8 >
</div> </div>
<div data-tip="Image scale relative to image size (e.g. 5x)" style="margin-bottom: .3em"> <div data-tip="Image scale relative to image size (e.g. 5x)" style="margin-bottom: .3em">
<div class="label">Scale:</div> <div class="label">Scale:</div>
<input id="tileScaleInput" data-stored="tileScale" type="range" min=1 max=4 value=1 style="width: 11em" oninput="tileScaleOutput.value = this.value"> <input id="tileScaleInput" data-stored="tileScale" type="range" min=1 max=4 value=1 style="width: 11em">
<input id="tileScaleOutput" data-stored="tileScale" type="number" min=1 value=1 oninput="tileScaleInput.value = this.value;"> <input id="tileScaleOutput" data-stored="tileScale" type="number" min=1 value=1
>
</div> </div>
<div data-tip="Calculated size of image if combined" style="margin-bottom: .3em"> <div data-tip="Calculated size of image if combined" style="margin-bottom: .3em">
<div class="label">Total size:</div> <div class="label">Total size:</div>

2
modules/load.js
View file

@ -125,7 +125,7 @@ function parseLoadedData(data) {
if (settings[3]) applyOption(heightUnit, settings[3]); if (settings[3]) applyOption(heightUnit, settings[3]);
if (settings[4]) heightExponentInput.value = heightExponentOutput.value = settings[4]; if (settings[4]) heightExponentInput.value = heightExponentOutput.value = settings[4];
if (settings[5]) temperatureScale.value = settings[5]; if (settings[5]) temperatureScale.value = settings[5];
if (settings[6]) barSize.value = barSizeOutput.value = settings[6]; if (settings[6]) barSizeInput.value = barSizeOutput.value = settings[6];
if (settings[7] !== undefined) barLabel.value = settings[7]; if (settings[7] !== undefined) barLabel.value = settings[7];
if (settings[8] !== undefined) barBackOpacity.value = settings[8]; if (settings[8] !== undefined) barBackOpacity.value = settings[8];
if (settings[9]) barBackColor.value = settings[9]; if (settings[9]) barBackColor.value = settings[9];

2
modules/save.js
View file

@ -417,7 +417,7 @@ function getMapData() {
const dateString = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate(); const dateString = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
const license = "File can be loaded in azgaar.github.io/Fantasy-Map-Generator"; const license = "File can be loaded in azgaar.github.io/Fantasy-Map-Generator";
const params = [version, license, dateString, seed, graphWidth, graphHeight, mapId].join("|"); const params = [version, license, dateString, seed, graphWidth, graphHeight, mapId].join("|");
const settings = [distanceUnitInput.value, distanceScaleInput.value, areaUnit.value, heightUnit.value, heightExponentInput.value, temperatureScale.value, barSize.value, barLabel.value, barBackOpacity.value, barBackColor.value, barPosX.value, barPosY.value, populationRate.value, urbanization.value, mapSizeOutput.value, latitudeOutput.value, temperatureEquatorOutput.value, temperaturePoleOutput.value, precOutput.value, JSON.stringify(options), mapName.value, +hideLabels.checked].join("|"); const settings = [distanceUnitInput.value, distanceScaleInput.value, areaUnit.value, heightUnit.value, heightExponentInput.value, temperatureScale.value, barSizeInput.value, barLabel.value, barBackOpacity.value, barBackColor.value, barPosX.value, barPosY.value, populationRate.value, urbanization.value, mapSizeOutput.value, latitudeOutput.value, temperatureEquatorOutput.value, temperaturePoleOutput.value, precOutput.value, JSON.stringify(options), mapName.value, +hideLabels.checked].join("|");
const coords = JSON.stringify(mapCoordinates); const coords = JSON.stringify(mapCoordinates);
const biomes = [biomesData.color, biomesData.habitability, biomesData.name].join("|"); const biomes = [biomesData.color, biomesData.habitability, biomesData.name].join("|");
const notesData = JSON.stringify(notes); const notesData = JSON.stringify(notes);

254
modules/ui/measurers.js
View file

@ -20,10 +20,7 @@ class Rulers {
for (const rulerString of rulers) { for (const rulerString of rulers) {
const [type, pointsString] = rulerString.split(": "); const [type, pointsString] = rulerString.split(": ");
const points = pointsString.split(" ").map(el => el.split(",").map(n => +n)); const points = pointsString.split(" ").map(el => el.split(",").map(n => +n));
const Type = type === "Ruler" ? Ruler : const Type = type === "Ruler" ? Ruler : type === "Opisometer" ? Opisometer : type === "RouteOpisometer" ? RouteOpisometer : type === "Planimeter" ? Planimeter : null;
type === "Opisometer" ? Opisometer :
type === "RouteOpisometer" ? RouteOpisometer :
type === "Planimeter" ? Planimeter : null;
this.create(Type, points); this.create(Type, points);
} }
} }
@ -57,7 +54,7 @@ class Measurer {
} }
getSize() { getSize() {
return rn(1 / scale ** .3 * 2, 2); return rn((1 / scale ** 0.3) * 2, 2);
} }
getDash() { getDash() {
@ -66,10 +63,11 @@ class Measurer {
drag() { drag() {
const tr = parseTransform(this.getAttribute("transform")); 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;
d3.event.on("drag", function() { d3.event.on("drag", function () {
const transform = `translate(${(x + d3.event.x)},${(y + d3.event.y)})`; const transform = `translate(${x + d3.event.x},${y + d3.event.y})`;
this.setAttribute("transform", transform); this.setAttribute("transform", transform);
}); });
} }
@ -89,9 +87,9 @@ class Measurer {
const MIN_DIST2 = 900; const MIN_DIST2 = 900;
const optimized = []; const optimized = [];
for (let i=0, p1 = this.points[0]; i < this.points.length; i++) { for (let i = 0, p1 = this.points[0]; i < this.points.length; i++) {
const p2 = this.points[i]; const p2 = this.points[i];
const dist2 = !i || i === this.points.length-1 ? Infinity : (p2[0] - p1[0]) ** 2 + (p2[1] - p1[1]) ** 2; const dist2 = !i || i === this.points.length - 1 ? Infinity : (p2[0] - p1[0]) ** 2 + (p2[1] - p1[1]) ** 2;
if (dist2 < MIN_DIST2) continue; if (dist2 < MIN_DIST2) continue;
optimized.push(p2); optimized.push(p2);
p1 = p2; p1 = p2;
@ -105,7 +103,6 @@ class Measurer {
undraw() { undraw() {
this.el?.remove(); this.el?.remove();
} }
} }
class Ruler extends Measurer { class Ruler extends Measurer {
@ -136,12 +133,29 @@ class Ruler extends Measurer {
const size = this.getSize(); const size = this.getSize();
const dash = this.getDash(); const dash = this.getDash();
const el = this.el = ruler.append("g").attr("class", "ruler").call(d3.drag().on("start", this.drag)).attr("font-size", 10 * size); const el = (this.el = ruler
el.append("polyline").attr("points", points).attr("class", "white").attr("stroke-width", size) .append("g")
.attr("class", "ruler")
.call(d3.drag().on("start", this.drag))
.attr("font-size", 10 * size));
el.append("polyline")
.attr("points", points)
.attr("class", "white")
.attr("stroke-width", size)
.call(d3.drag().on("start", () => this.addControl(this))); .call(d3.drag().on("start", () => this.addControl(this)));
el.append("polyline").attr("points", points).attr("class", "gray").attr("stroke-width", rn(size * 1.2, 2)).attr("stroke-dasharray", dash); el.append("polyline")
el.append("g").attr("class", "rulerPoints").attr("stroke-width", .5 * size).attr("font-size", 2 * size); .attr("points", points)
el.append("text").attr("dx", ".35em").attr("dy", "-.45em").on("click", () => rulers.remove(this.id)); .attr("class", "gray")
.attr("stroke-width", rn(size * 1.2, 2))
.attr("stroke-dasharray", dash);
el.append("g")
.attr("class", "rulerPoints")
.attr("stroke-width", 0.5 * size)
.attr("font-size", 2 * size);
el.append("text")
.attr("dx", ".35em")
.attr("dy", "-.45em")
.on("click", () => rulers.remove(this.id));
this.drawPoints(el); this.drawPoints(el);
this.updateLabel(); this.updateLabel();
return this; return this;
@ -151,7 +165,7 @@ class Ruler extends Measurer {
const g = el.select(".rulerPoints"); const g = el.select(".rulerPoints");
g.selectAll("circle").remove(); g.selectAll("circle").remove();
for (let i=0; i < this.points.length; i++) { for (let i = 0; i < this.points.length; i++) {
const [x, y] = this.points[i]; const [x, y] = this.points[i];
this.drawPoint(g, x, y, i); this.drawPoint(g, x, y, i);
} }
@ -160,14 +174,25 @@ class Ruler extends Measurer {
drawPoint(el, x, y, i) { drawPoint(el, x, y, i) {
const context = this; const context = this;
el.append("circle") el.append("circle")
.attr("r", "1em").attr("cx", x).attr("cy", y) .attr("r", "1em")
.attr("cx", x)
.attr("cy", y)
.attr("class", this.isEdge(i) ? "edge" : "control") .attr("class", this.isEdge(i) ? "edge" : "control")
.on("click", function() {context.removePoint(context, i)}) .on("click", function () {
.call(d3.drag().clickDistance(3).on("start", function() {context.dragControl(context, i)})); context.removePoint(context, i);
})
.call(
d3
.drag()
.clickDistance(3)
.on("start", function () {
context.dragControl(context, i);
})
);
} }
isEdge(i) { isEdge(i) {
return i === 0 || i === this.points.length-1; return i === 0 || i === this.points.length - 1;
} }
updateLabel() { updateLabel() {
@ -179,9 +204,9 @@ class Ruler extends Measurer {
getLength() { getLength() {
let length = 0; let length = 0;
for (let i=0; i < this.points.length - 1; i++) { for (let i = 0; i < this.points.length - 1; i++) {
const [x1, y1] = this.points[i]; const [x1, y1] = this.points[i];
const [x2, y2] = this.points[i+1]; const [x2, y2] = this.points[i + 1];
length += Math.hypot(x1 - x2, y1 - y2); length += Math.hypot(x1 - x2, y1 - y2);
} }
return length; return length;
@ -189,20 +214,20 @@ class Ruler extends Measurer {
dragControl(context, pointId) { dragControl(context, pointId) {
let addPoint = context.isEdge(pointId) && d3.event.sourceEvent.ctrlKey; let addPoint = context.isEdge(pointId) && d3.event.sourceEvent.ctrlKey;
let circle = context.el.select(`circle:nth-child(${pointId+1})`); let circle = context.el.select(`circle:nth-child(${pointId + 1})`);
const line = context.el.selectAll("polyline"); const line = context.el.selectAll("polyline");
let x0 = rn(d3.event.x, 1); let x0 = rn(d3.event.x, 1);
let y0 = rn(d3.event.y, 1); let y0 = rn(d3.event.y, 1);
let axis; let axis;
d3.event.on("drag", function() { d3.event.on("drag", function () {
if (addPoint) { if (addPoint) {
if (d3.event.dx < .1 && d3.event.dy < .1) return; if (d3.event.dx < 0.1 && d3.event.dy < 0.1) return;
context.pushPoint(pointId); context.pushPoint(pointId);
context.drawPoints(context.el); context.drawPoints(context.el);
if (pointId) pointId++; if (pointId) pointId++;
circle = context.el.select(`circle:nth-child(${pointId+1})`); circle = context.el.select(`circle:nth-child(${pointId + 1})`);
addPoint = false; addPoint = false;
} }
@ -253,13 +278,38 @@ class Opisometer extends Measurer {
const dash = this.getDash(); const dash = this.getDash();
const context = this; const context = this;
const el = this.el = ruler.append("g").attr("class", "opisometer").call(d3.drag().on("start", this.drag)).attr("font-size", 10 * size); const el = (this.el = ruler
.append("g")
.attr("class", "opisometer")
.call(d3.drag().on("start", this.drag))
.attr("font-size", 10 * size));
el.append("path").attr("class", "white").attr("stroke-width", size); el.append("path").attr("class", "white").attr("stroke-width", size);
el.append("path").attr("class", "gray").attr("stroke-width", size).attr("stroke-dasharray", dash); el.append("path").attr("class", "gray").attr("stroke-width", size).attr("stroke-dasharray", dash);
const rulerPoints = el.append("g").attr("class", "rulerPoints").attr("stroke-width", .5 * size).attr("font-size", 2 * size); const rulerPoints = el
rulerPoints.append("circle").attr("r", "1em").call(d3.drag().on("start", function() {context.dragControl(context, 0)})); .append("g")
rulerPoints.append("circle").attr("r", "1em").call(d3.drag().on("start", function() {context.dragControl(context, 1)})); .attr("class", "rulerPoints")
el.append("text").attr("dx", ".35em").attr("dy", "-.45em").on("click", () => rulers.remove(this.id)); .attr("stroke-width", 0.5 * size)
.attr("font-size", 2 * size);
rulerPoints
.append("circle")
.attr("r", "1em")
.call(
d3.drag().on("start", function () {
context.dragControl(context, 0);
})
);
rulerPoints
.append("circle")
.attr("r", "1em")
.call(
d3.drag().on("start", function () {
context.dragControl(context, 1);
})
);
el.append("text")
.attr("dx", ".35em")
.attr("dy", "-.45em")
.on("click", () => rulers.remove(this.id));
this.updateCurve(); this.updateCurve();
this.updateLabel(); this.updateLabel();
@ -267,7 +317,7 @@ class Opisometer extends Measurer {
} }
updateCurve() { updateCurve() {
lineGen.curve(d3.curveCatmullRom.alpha(.5)); lineGen.curve(d3.curveCatmullRom.alpha(0.5));
const path = round(lineGen(this.points)); const path = round(lineGen(this.points));
this.el.selectAll("path").attr("d", path); this.el.selectAll("path").attr("d", path);
@ -288,7 +338,7 @@ class Opisometer extends Measurer {
const MIN_DIST = d3.event.sourceEvent.shiftKey ? 9 : 100; const MIN_DIST = d3.event.sourceEvent.shiftKey ? 9 : 100;
let prev = rigth ? last(context.points) : context.points[0]; let prev = rigth ? last(context.points) : context.points[0];
d3.event.on("drag", function() { d3.event.on("drag", function () {
const point = [d3.event.x | 0, d3.event.y | 0]; const point = [d3.event.x | 0, d3.event.y | 0];
const dist2 = (prev[0] - point[0]) ** 2 + (prev[1] - point[1]) ** 2; const dist2 = (prev[0] - point[0]) ** 2 + (prev[1] - point[1]) ** 2;
@ -301,7 +351,7 @@ class Opisometer extends Measurer {
context.updateLabel(); context.updateLabel();
}); });
d3.event.on("end", function() { d3.event.on("end", function () {
if (!d3.event.sourceEvent.shiftKey) context.optimize(); if (!d3.event.sourceEvent.shiftKey) context.optimize();
}); });
} }
@ -367,13 +417,37 @@ class RouteOpisometer extends Measurer {
const dash = this.getDash(); const dash = this.getDash();
const context = this; const context = this;
const el = this.el = ruler.append("g").attr("class", "opisometer").attr("font-size", 10 * size); const el = (this.el = ruler
.append("g")
.attr("class", "opisometer")
.attr("font-size", 10 * size));
el.append("path").attr("class", "white").attr("stroke-width", size); el.append("path").attr("class", "white").attr("stroke-width", size);
el.append("path").attr("class", "gray").attr("stroke-width", size).attr("stroke-dasharray", dash); el.append("path").attr("class", "gray").attr("stroke-width", size).attr("stroke-dasharray", dash);
const rulerPoints = el.append("g").attr("class", "rulerPoints").attr("stroke-width", .5 * size).attr("font-size", 2 * size); const rulerPoints = el
rulerPoints.append("circle").attr("r", "1em").call(d3.drag().on("start", function() {context.dragControl(context, 0)})); .append("g")
rulerPoints.append("circle").attr("r", "1em").call(d3.drag().on("start", function() {context.dragControl(context, 1)})); .attr("class", "rulerPoints")
el.append("text").attr("dx", ".35em").attr("dy", "-.45em").on("click", () => rulers.remove(this.id)); .attr("stroke-width", 0.5 * size)
.attr("font-size", 2 * size);
rulerPoints
.append("circle")
.attr("r", "1em")
.call(
d3.drag().on("start", function () {
context.dragControl(context, 0);
})
);
rulerPoints
.append("circle")
.attr("r", "1em")
.call(
d3.drag().on("start", function () {
context.dragControl(context, 1);
})
);
el.append("text")
.attr("dx", ".35em")
.attr("dy", "-.45em")
.on("click", () => rulers.remove(this.id));
this.updateCurve(); this.updateCurve();
this.updateLabel(); this.updateLabel();
@ -381,7 +455,7 @@ class RouteOpisometer extends Measurer {
} }
updateCurve() { updateCurve() {
lineGen.curve(d3.curveCatmullRom.alpha(.5)); lineGen.curve(d3.curveCatmullRom.alpha(0.5));
const path = round(lineGen(this.points)); const path = round(lineGen(this.points));
this.el.selectAll("path").attr("d", path); this.el.selectAll("path").attr("d", path);
@ -399,7 +473,7 @@ class RouteOpisometer extends Measurer {
} }
dragControl(context, rigth) { dragControl(context, rigth) {
d3.event.on("drag", function() { d3.event.on("drag", function () {
const mousePoint = [d3.event.x | 0, d3.event.y | 0]; const mousePoint = [d3.event.x | 0, d3.event.y | 0];
const cells = pack.cells; const cells = pack.cells;
@ -422,7 +496,11 @@ class Planimeter extends Measurer {
if (this.el) this.el.selectAll("*").remove(); if (this.el) this.el.selectAll("*").remove();
const size = this.getSize(); const size = this.getSize();
const el = this.el = ruler.append("g").attr("class", "planimeter").call(d3.drag().on("start", this.drag)).attr("font-size", 10 * size); const el = (this.el = ruler
.append("g")
.attr("class", "planimeter")
.call(d3.drag().on("start", this.drag))
.attr("font-size", 10 * size));
el.append("path").attr("class", "planimeter").attr("stroke-width", size); el.append("path").attr("class", "planimeter").attr("stroke-width", size);
el.append("text").on("click", () => rulers.remove(this.id)); el.append("text").on("click", () => rulers.remove(this.id));
@ -432,7 +510,7 @@ class Planimeter extends Measurer {
} }
updateCurve() { updateCurve() {
lineGen.curve(d3.curveCatmullRomClosed.alpha(.5)); lineGen.curve(d3.curveCatmullRomClosed.alpha(0.5));
const path = round(lineGen(this.points)); const path = round(lineGen(this.points));
this.el.selectAll("path").attr("d", path); this.el.selectAll("path").attr("d", path);
} }
@ -458,36 +536,79 @@ function drawScaleBar() {
// calculate size // calculate size
const init = 100; // actual length in pixels if scale, dScale and size = 1; const init = 100; // actual length in pixels if scale, dScale and size = 1;
const size = +barSize.value; const size = +barSizeInput.value;
let val = init * size * dScale / scale; // bar length in distance unit let val = (init * size * dScale) / scale; // bar length in distance unit
if (val > 900) val = rn(val, -3); // round to 1000 if (val > 900) val = rn(val, -3);
else if (val > 90) val = rn(val, -2); // round to 100 // round to 1000
else if (val > 9) val = rn(val, -1); // round to 10 else if (val > 90) val = rn(val, -2);
else val = rn(val) // round to 1 // round to 100
const l = val * scale / dScale; // actual length in pixels on this scale else if (val > 9) val = rn(val, -1);
// round to 10
else val = rn(val); // round to 1
const l = (val * scale) / dScale; // actual length in pixels on this scale
scaleBar.append("line").attr("x1", 0.5).attr("y1", 0).attr("x2", l+size-0.5).attr("y2", 0).attr("stroke-width", size).attr("stroke", "white"); scaleBar
scaleBar.append("line").attr("x1", 0).attr("y1", size).attr("x2", l+size).attr("y2", size).attr("stroke-width", size).attr("stroke", "#3d3d3d"); .append("line")
.attr("x1", 0.5)
.attr("y1", 0)
.attr("x2", l + size - 0.5)
.attr("y2", 0)
.attr("stroke-width", size)
.attr("stroke", "white");
scaleBar
.append("line")
.attr("x1", 0)
.attr("y1", size)
.attr("x2", l + size)
.attr("y2", size)
.attr("stroke-width", size)
.attr("stroke", "#3d3d3d");
const dash = size + " " + rn(l / 5 - size, 2); const dash = size + " " + rn(l / 5 - size, 2);
scaleBar.append("line").attr("x1", 0).attr("y1", 0).attr("x2", l+size).attr("y2", 0) scaleBar
.attr("stroke-width", rn(size * 3, 2)).attr("stroke-dasharray", dash).attr("stroke", "#3d3d3d"); .append("line")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", l + size)
.attr("y2", 0)
.attr("stroke-width", rn(size * 3, 2))
.attr("stroke-dasharray", dash)
.attr("stroke", "#3d3d3d");
const fontSize = rn(5 * size, 1); const fontSize = rn(5 * size, 1);
scaleBar.selectAll("text").data(d3.range(0,6)).enter().append("text") scaleBar
.attr("x", d => rn(d * l/5, 2)).attr("y", 0).attr("dy", "-.5em") .selectAll("text")
.attr("font-size", fontSize).text(d => rn(d * l/5 * dScale / scale) + (d<5 ? "" : " " + unit)); .data(d3.range(0, 6))
.enter()
.append("text")
.attr("x", d => rn((d * l) / 5, 2))
.attr("y", 0)
.attr("dy", "-.5em")
.attr("font-size", fontSize)
.text(d => rn((((d * l) / 5) * dScale) / scale) + (d < 5 ? "" : " " + unit));
if (barLabel.value !== "") { if (barLabel.value !== "") {
scaleBar.append("text").attr("x", (l+1) / 2).attr("y", 2 * size) scaleBar
.append("text")
.attr("x", (l + 1) / 2)
.attr("y", 2 * size)
.attr("dominant-baseline", "text-before-edge") .attr("dominant-baseline", "text-before-edge")
.attr("font-size", fontSize).text(barLabel.value); .attr("font-size", fontSize)
.text(barLabel.value);
} }
const bbox = scaleBar.node().getBBox(); const bbox = scaleBar.node().getBBox();
// append backbround rectangle // append backbround rectangle
scaleBar.insert("rect", ":first-child").attr("x", -10).attr("y", -20).attr("width", bbox.width + 10).attr("height", bbox.height + 15) scaleBar
.attr("stroke-width", size).attr("stroke", "none").attr("filter", "url(#blur5)") .insert("rect", ":first-child")
.attr("fill", barBackColor.value).attr("opacity", +barBackOpacity.value); .attr("x", -10)
.attr("y", -20)
.attr("width", bbox.width + 10)
.attr("height", bbox.height + 15)
.attr("stroke-width", size)
.attr("stroke", "none")
.attr("filter", "url(#blur5)")
.attr("fill", barBackColor.value)
.attr("opacity", +barBackOpacity.value);
fitScaleBar(); fitScaleBar();
} }
@ -495,9 +616,10 @@ function drawScaleBar() {
// fit ScaleBar to canvas size // fit ScaleBar to canvas size
function fitScaleBar() { function fitScaleBar() {
if (!scaleBar.select("rect").size() || scaleBar.style("display") === "none") return; if (!scaleBar.select("rect").size() || scaleBar.style("display") === "none") return;
const px = isNaN(+barPosX.value) ? .99 : barPosX.value / 100; const px = isNaN(+barPosX.value) ? 0.99 : barPosX.value / 100;
const py = isNaN(+barPosY.value) ? .99 : barPosY.value / 100; const py = isNaN(+barPosY.value) ? 0.99 : barPosY.value / 100;
const bbox = scaleBar.select("rect").node().getBBox(); const bbox = scaleBar.select("rect").node().getBBox();
const x = rn(svgWidth * px - bbox.width + 10), y = rn(svgHeight * py - bbox.height + 20); const x = rn(svgWidth * px - bbox.width + 10),
y = rn(svgHeight * py - bbox.height + 20);
scaleBar.attr("transform", `translate(${x},${y})`); scaleBar.attr("transform", `translate(${x},${y})`);
} }

63
modules/ui/options.js
View file

@ -108,35 +108,51 @@ function showSupporters() {
$("#alert").dialog({resizable: false, title: "Patreon Supporters", width: "54vw", position: {my: "center", at: "center", of: "svg"}}); $("#alert").dialog({resizable: false, title: "Patreon Supporters", width: "54vw", position: {my: "center", at: "center", of: "svg"}});
} }
// on any option or dialog change
document.getElementById("options").addEventListener("change", checkIfStored);
document.getElementById("dialogs").addEventListener("change", checkIfStored);
document.getElementById("options").addEventListener("input", updateOutputToFollowInput);
document.getElementById("dialogs").addEventListener("input", updateOutputToFollowInput);
function checkIfStored(ev) {
if (ev.target.dataset.stored) lock(ev.target.dataset.stored);
}
function updateOutputToFollowInput(ev) {
const id = ev.target.id;
const value = ev.target.value;
// specific cases
if (id === "manorsInput") return (manorsOutput.value = value == 1000 ? "auto" : value);
// generic case
if (id.slice(-5) === "Input") {
const output = document.getElementById(id.slice(0, -5) + "Output");
if (output) output.value = value;
} else if (id.slice(-6) === "Output") {
const input = document.getElementById(id.slice(0, -6) + "Input");
if (input) input.value = value;
}
}
// Option listeners // Option listeners
const optionsContent = document.getElementById("optionsContent"); const optionsContent = document.getElementById("optionsContent");
optionsContent.addEventListener("input", function (event) { optionsContent.addEventListener("input", function (event) {
const id = event.target.id, const id = event.target.id;
value = event.target.value; const value = event.target.value;
if (id === "mapWidthInput" || id === "mapHeightInput") mapSizeInputChange(); if (id === "mapWidthInput" || id === "mapHeightInput") mapSizeInputChange();
else if (id === "pointsInput") changeCellsDensity(+value); else if (id === "pointsInput") changeCellsDensity(+value);
else if (id === "culturesInput") culturesOutput.value = value;
else if (id === "culturesOutput") culturesInput.value = value;
else if (id === "culturesSet") changeCultureSet(); else if (id === "culturesSet") changeCultureSet();
else if (id === "regionsInput" || id === "regionsOutput") changeStatesNumber(value); else if (id === "regionsInput" || id === "regionsOutput") changeStatesNumber(value);
else if (id === "provincesInput") provincesOutput.value = value;
else if (id === "provincesOutput") provincesOutput.value = value;
else if (id === "provincesOutput") powerOutput.value = value;
else if (id === "powerInput") powerOutput.value = value;
else if (id === "powerOutput") powerInput.value = value;
else if (id === "neutralInput") neutralOutput.value = value;
else if (id === "neutralOutput") neutralInput.value = value;
else if (id === "manorsInput") changeBurgsNumberSlider(value);
else if (id === "religionsInput") religionsOutput.value = value;
else if (id === "emblemShape") changeEmblemShape(value); else if (id === "emblemShape") changeEmblemShape(value);
else if (id === "tooltipSizeInput" || id === "tooltipSizeOutput") changeTooltipSize(value); else if (id === "tooltipSizeInput" || id === "tooltipSizeOutput") changeTooltipSize(value);
else if (id === "transparencyInput") changeDialogsTransparency(value); else if (id === "transparencyInput") changeDialogsTransparency(value);
}); });
optionsContent.addEventListener("change", function (event) { optionsContent.addEventListener("change", function (event) {
if (event.target.dataset.stored) lock(event.target.dataset.stored); const id = event.target.id;
const id = event.target.id, const value = event.target.value;
value = event.target.value;
if (id === "zoomExtentMin" || id === "zoomExtentMax") changeZoomExtent(value); if (id === "zoomExtentMin" || id === "zoomExtentMax") changeZoomExtent(value);
else if (id === "optionsSeed") generateMapWithSeed(); else if (id === "optionsSeed") generateMapWithSeed();
else if (id === "uiSizeInput" || id === "uiSizeOutput") changeUIsize(value); else if (id === "uiSizeInput" || id === "uiSizeOutput") changeUIsize(value);
@ -332,8 +348,8 @@ function changeCellsDensity(value) {
const cells = convert(value); const cells = convert(value);
pointsInput.setAttribute("data-cells", cells); pointsInput.setAttribute("data-cells", cells);
pointsOutput.value = cells / 1000 + "K"; pointsOutput_formatted.value = cells / 1000 + "K";
pointsOutput.style.color = cells > 50000 ? "#b12117" : cells !== 10000 ? "#dfdf12" : "#053305"; pointsOutput_formatted.style.color = cells > 50000 ? "#b12117" : cells !== 10000 ? "#dfdf12" : "#053305";
} }
function changeCultureSet() { function changeCultureSet() {
@ -384,16 +400,11 @@ function changeEmblemShape(emblemShape) {
} }
function changeStatesNumber(value) { function changeStatesNumber(value) {
regionsInput.value = regionsOutput.value = value;
regionsOutput.style.color = +value ? null : "#b12117"; regionsOutput.style.color = +value ? null : "#b12117";
burgLabels.select("#capitals").attr("data-size", Math.max(rn(6 - value / 20), 3)); burgLabels.select("#capitals").attr("data-size", Math.max(rn(6 - value / 20), 3));
labels.select("#countries").attr("data-size", Math.max(rn(18 - value / 6), 4)); labels.select("#countries").attr("data-size", Math.max(rn(18 - value / 6), 4));
} }
function changeBurgsNumberSlider(value) {
manorsOutput.value = value == 1000 ? "auto" : value;
}
function changeUIsize(value) { function changeUIsize(value) {
if (isNaN(+value) || +value < 0.5) return; if (isNaN(+value) || +value < 0.5) return;
@ -410,7 +421,6 @@ function getUImaxSize() {
} }
function changeTooltipSize(value) { function changeTooltipSize(value) {
tooltipSizeInput.value = tooltipSizeOutput.value = value;
tooltip.style.fontSize = `calc(${value}px + 0.5vw)`; tooltip.style.fontSize = `calc(${value}px + 0.5vw)`;
} }
@ -448,8 +458,9 @@ function applyStoredOptions() {
if (localStorage.getItem("heightUnit")) applyOption(heightUnit, localStorage.getItem("heightUnit")); if (localStorage.getItem("heightUnit")) applyOption(heightUnit, localStorage.getItem("heightUnit"));
for (let i = 0; i < localStorage.length; i++) { for (let i = 0; i < localStorage.length; i++) {
const stored = localStorage.key(i), const stored = localStorage.key(i);
value = localStorage.getItem(stored); const value = localStorage.getItem(stored);
if (stored === "speakerVoice") continue; if (stored === "speakerVoice") continue;
const input = document.getElementById(stored + "Input") || document.getElementById(stored); const input = document.getElementById(stored + "Input") || document.getElementById(stored);
const output = document.getElementById(stored + "Output"); const output = document.getElementById(stored + "Output");

15
modules/ui/style.js
View file

@ -92,9 +92,9 @@ function selectStyleElement() {
if (sel === "terrs") { if (sel === "terrs") {
styleHeightmap.style.display = "block"; styleHeightmap.style.display = "block";
styleHeightmapScheme.value = terrs.attr("scheme"); styleHeightmapScheme.value = terrs.attr("scheme");
styleHeightmapTerracing.value = styleHeightmapTerracingOutput.value = terrs.attr("terracing"); styleHeightmapTerracingInput.value = styleHeightmapTerracingOutput.value = terrs.attr("terracing");
styleHeightmapSkip.value = styleHeightmapSkipOutput.value = terrs.attr("skip"); styleHeightmapSkipInput.value = styleHeightmapSkipOutput.value = terrs.attr("skip");
styleHeightmapSimplification.value = styleHeightmapSimplificationOutput.value = terrs.attr("relax"); styleHeightmapSimplificationInput.value = styleHeightmapSimplificationOutput.value = terrs.attr("relax");
styleHeightmapCurve.value = terrs.attr("curve"); styleHeightmapCurve.value = terrs.attr("curve");
} }
@ -419,20 +419,17 @@ styleHeightmapScheme.addEventListener("change", function () {
drawHeightmap(); drawHeightmap();
}); });
styleHeightmapTerracing.addEventListener("input", function () { styleHeightmapTerracingInput.addEventListener("input", function () {
styleHeightmapTerracingOutput.value = this.value;
terrs.attr("terracing", this.value); terrs.attr("terracing", this.value);
drawHeightmap(); drawHeightmap();
}); });
styleHeightmapSkip.addEventListener("input", function () { styleHeightmapSkipInput.addEventListener("input", function () {
styleHeightmapSkipOutput.value = this.value;
terrs.attr("skip", this.value); terrs.attr("skip", this.value);
drawHeightmap(); drawHeightmap();
}); });
styleHeightmapSimplification.addEventListener("input", function () { styleHeightmapSimplificationInput.addEventListener("input", function () {
styleHeightmapSimplificationOutput.value = this.value;
terrs.attr("relax", this.value); terrs.attr("relax", this.value);
drawHeightmap(); drawHeightmap();
}); });

238
modules/ui/units-editor.js
View file

@ -15,16 +15,15 @@ function editUnits() {
document.getElementById("distanceUnitInput").addEventListener("change", changeDistanceUnit); document.getElementById("distanceUnitInput").addEventListener("change", changeDistanceUnit);
document.getElementById("distanceScaleOutput").addEventListener("input", changeDistanceScale); document.getElementById("distanceScaleOutput").addEventListener("input", changeDistanceScale);
document.getElementById("distanceScaleInput").addEventListener("change", changeDistanceScale); document.getElementById("distanceScaleInput").addEventListener("change", changeDistanceScale);
document.getElementById("areaUnit").addEventListener("change", () => lock("areaUnit"));
document.getElementById("heightUnit").addEventListener("change", changeHeightUnit); document.getElementById("heightUnit").addEventListener("change", changeHeightUnit);
document.getElementById("heightExponentInput").addEventListener("input", changeHeightExponent); document.getElementById("heightExponentInput").addEventListener("input", changeHeightExponent);
document.getElementById("heightExponentOutput").addEventListener("input", changeHeightExponent); document.getElementById("heightExponentOutput").addEventListener("input", changeHeightExponent);
document.getElementById("temperatureScale").addEventListener("change", changeTemperatureScale); document.getElementById("temperatureScale").addEventListener("change", changeTemperatureScale);
document.getElementById("barSizeOutput").addEventListener("input", changeScaleBarSize); document.getElementById("barSizeOutput").addEventListener("input", drawScaleBar);
document.getElementById("barSize").addEventListener("input", changeScaleBarSize); document.getElementById("barSizeInput").addEventListener("input", drawScaleBar);
document.getElementById("barLabel").addEventListener("input", changeScaleBarLabel); document.getElementById("barLabel").addEventListener("input", drawScaleBar);
document.getElementById("barPosX").addEventListener("input", changeScaleBarPosition); document.getElementById("barPosX").addEventListener("input", fitScaleBar);
document.getElementById("barPosY").addEventListener("input", changeScaleBarPosition); document.getElementById("barPosY").addEventListener("input", fitScaleBar);
document.getElementById("barBackOpacity").addEventListener("input", changeScaleBarOpacity); document.getElementById("barBackOpacity").addEventListener("input", changeScaleBarOpacity);
document.getElementById("barBackColor").addEventListener("input", changeScaleBarColor); document.getElementById("barBackColor").addEventListener("input", changeScaleBarColor);
@ -42,7 +41,7 @@ function editUnits() {
function changeDistanceUnit() { function changeDistanceUnit() {
if (this.value === "custom_name") { if (this.value === "custom_name") {
prompt("Provide a custom name for a distance unit", {default:""}, custom => { prompt("Provide a custom name for a distance unit", {default: ""}, custom => {
this.options.add(new Option(custom, custom, false, true)); this.options.add(new Option(custom, custom, false, true));
lock("distanceUnit"); lock("distanceUnit");
drawScaleBar(); drawScaleBar();
@ -51,114 +50,55 @@ function editUnits() {
return; return;
} }
lock("distanceUnit");
drawScaleBar(); drawScaleBar();
calculateFriendlyGridSize(); calculateFriendlyGridSize();
} }
function changeDistanceScale() { function changeDistanceScale() {
const scale = +this.value;
if (!scale || isNaN(scale) || scale < 0) {
tip("Distance scale should be a positive number", false, "error");
this.value = document.getElementById("distanceScaleInput").dataset.value;
return;
}
document.getElementById("distanceScaleOutput").value = scale;
document.getElementById("distanceScaleInput").value = scale;
document.getElementById("distanceScaleInput").dataset.value = scale;
lock("distanceScale");
drawScaleBar(); drawScaleBar();
calculateFriendlyGridSize(); calculateFriendlyGridSize();
} }
function changeHeightUnit() { function changeHeightUnit() {
if (this.value === "custom_name") { if (this.value !== "custom_name") return;
prompt("Provide a custom name for a height unit", {default:""}, custom => {
this.options.add(new Option(custom, custom, false, true));
lock("heightUnit");
});
return;
}
lock("heightUnit"); prompt("Provide a custom name for a height unit", {default: ""}, custom => {
this.options.add(new Option(custom, custom, false, true));
lock("heightUnit");
});
} }
function changeHeightExponent() { function changeHeightExponent() {
document.getElementById("heightExponentInput").value = this.value;
document.getElementById("heightExponentOutput").value = this.value;
calculateTemperatures(); calculateTemperatures();
if (layerIsOn("toggleTemp")) drawTemp(); if (layerIsOn("toggleTemp")) drawTemp();
lock("heightExponent");
} }
function changeTemperatureScale() { function changeTemperatureScale() {
lock("temperatureScale");
if (layerIsOn("toggleTemp")) drawTemp(); if (layerIsOn("toggleTemp")) drawTemp();
} }
function changeScaleBarSize() {
document.getElementById("barSize").value = this.value;
document.getElementById("barSizeOutput").value = this.value;
drawScaleBar();
lock("barSize");
}
function changeScaleBarPosition() {
lock("barPosX");
lock("barPosY");
fitScaleBar();
}
function changeScaleBarLabel() {
lock("barLabel");
drawScaleBar();
}
function changeScaleBarOpacity() { function changeScaleBarOpacity() {
scaleBar.select("rect").attr("opacity", this.value); scaleBar.select("rect").attr("opacity", this.value);
lock("barBackOpacity");
} }
function changeScaleBarColor() { function changeScaleBarColor() {
scaleBar.select("rect").attr("fill", this.value); scaleBar.select("rect").attr("fill", this.value);
lock("barBackColor");
} }
function changePopulationRate() { function changePopulationRate() {
const rate = +this.value; document.getElementById("populationRateOutput").value = this.value;
if (!rate || isNaN(rate) || rate <= 0) { document.getElementById("populationRate").value = this.value;
tip("Population rate should be a positive number", false, "error");
this.value = document.getElementById("populationRate").dataset.value;
return;
}
document.getElementById("populationRateOutput").value = rate;
document.getElementById("populationRate").value = rate;
document.getElementById("populationRate").dataset.value = rate;
lock("populationRate");
} }
function changeUrbanizationRate() { function changeUrbanizationRate() {
const rate = +this.value; document.getElementById("urbanizationOutput").value = this.value;
if (!rate || isNaN(rate) || rate < 0) { document.getElementById("urbanization").value = this.value;
tip("Urbanization rate should be a number", false, "error");
this.value = document.getElementById("urbanization").dataset.value;
return;
}
document.getElementById("urbanizationOutput").value = rate;
document.getElementById("urbanization").value = rate;
document.getElementById("urbanization").dataset.value = rate;
lock("urbanization");
} }
function restoreDefaultUnits() { function restoreDefaultUnits() {
// distanceScale // distanceScale
document.getElementById("distanceScaleOutput").value = 3; document.getElementById("distanceScaleOutput").value = 3;
document.getElementById("distanceScaleInput").value = 3; document.getElementById("distanceScaleInput").value = 3;
document.getElementById("distanceScaleInput").dataset.value = 3;
unlock("distanceScale"); unlock("distanceScale");
// units // units
@ -180,9 +120,9 @@ function editUnits() {
calculateTemperatures(); calculateTemperatures();
// scale bar // scale bar
barSizeOutput.value = barSize.value = 2; barSizeOutput.value = barSizeInput.value = 2;
barLabel.value = ""; barLabel.value = "";
barBackOpacity.value = .2; barBackOpacity.value = 0.2;
barBackColor.value = "#ffffff"; barBackColor.value = "#ffffff";
barPosX.value = barPosY.value = 99; barPosX.value = barPosY.value = 99;
@ -203,13 +143,13 @@ function editUnits() {
function addRuler() { function addRuler() {
if (!layerIsOn("toggleRulers")) toggleRulers(); if (!layerIsOn("toggleRulers")) toggleRulers();
const pt = document.getElementById('map').createSVGPoint(); const pt = document.getElementById("map").createSVGPoint();
pt.x = graphWidth / 2, pt.y = graphHeight / 4; (pt.x = graphWidth / 2), (pt.y = graphHeight / 4);
const p = pt.matrixTransform(viewbox.node().getScreenCTM().inverse()); const p = pt.matrixTransform(viewbox.node().getScreenCTM().inverse());
const dx = graphWidth / 4 / scale; const dx = graphWidth / 4 / scale;
const dy = (rulers.data.length * 40) % (graphHeight / 2); const dy = (rulers.data.length * 40) % (graphHeight / 2);
const from = [p.x-dx | 0, p.y+dy | 0]; const from = [(p.x - dx) | 0, (p.y + dy) | 0];
const to = [p.x+dx | 0, p.y+dy | 0]; const to = [(p.x + dx) | 0, (p.y + dy) | 0];
rulers.create(Ruler, [from, to]).draw(); rulers.create(Ruler, [from, to]).draw();
} }
@ -223,23 +163,25 @@ function editUnits() {
tip("Draw a curve to measure length. Hold Shift to disallow path optimization", true); tip("Draw a curve to measure length. Hold Shift to disallow path optimization", true);
unitsBottom.querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed")); unitsBottom.querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed"));
this.classList.add("pressed"); this.classList.add("pressed");
viewbox.style("cursor", "crosshair").call(d3.drag().on("start", function() { viewbox.style("cursor", "crosshair").call(
const point = d3.mouse(this); d3.drag().on("start", function () {
const opisometer = rulers.create(Opisometer, [point]).draw();
d3.event.on("drag", function() {
const point = d3.mouse(this); const point = d3.mouse(this);
opisometer.addPoint(point); const opisometer = rulers.create(Opisometer, [point]).draw();
});
d3.event.on("end", function() { d3.event.on("drag", function () {
restoreDefaultEvents(); const point = d3.mouse(this);
clearMainTip(); opisometer.addPoint(point);
addOpisometer.classList.remove("pressed"); });
if (opisometer.points.length < 2) rulers.remove(opisometer.id);
if (!d3.event.sourceEvent.shiftKey) opisometer.optimize(); d3.event.on("end", function () {
}); restoreDefaultEvents();
})); clearMainTip();
addOpisometer.classList.remove("pressed");
if (opisometer.points.length < 2) rulers.remove(opisometer.id);
if (!d3.event.sourceEvent.shiftKey) opisometer.optimize();
});
})
);
} }
} }
@ -253,40 +195,42 @@ function editUnits() {
tip("Draw a curve along routes to measure length. Hold Shift to measure away from roads.", true); tip("Draw a curve along routes to measure length. Hold Shift to measure away from roads.", true);
unitsBottom.querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed")); unitsBottom.querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed"));
this.classList.add("pressed"); this.classList.add("pressed");
viewbox.style("cursor", "crosshair").call(d3.drag().on("start", function() { viewbox.style("cursor", "crosshair").call(
const cells = pack.cells; d3.drag().on("start", function () {
const burgs = pack.burgs; const cells = pack.cells;
const point = d3.mouse(this); const burgs = pack.burgs;
const c = findCell(point[0], point[1]); const point = d3.mouse(this);
if (cells.road[c] || d3.event.sourceEvent.shiftKey) { const c = findCell(point[0], point[1]);
const b = cells.burg[c]; if (cells.road[c] || d3.event.sourceEvent.shiftKey) {
const x = b ? burgs[b].x : cells.p[c][0]; const b = cells.burg[c];
const y = b ? burgs[b].y : cells.p[c][1]; const x = b ? burgs[b].x : cells.p[c][0];
const routeOpisometer = rulers.create(RouteOpisometer, [[x, y]]).draw(); const y = b ? burgs[b].y : cells.p[c][1];
const routeOpisometer = rulers.create(RouteOpisometer, [[x, y]]).draw();
d3.event.on("drag", function () { d3.event.on("drag", function () {
const point = d3.mouse(this); const point = d3.mouse(this);
const c = findCell(point[0], point[1]); const c = findCell(point[0], point[1]);
if (cells.road[c] || d3.event.sourceEvent.shiftKey) { if (cells.road[c] || d3.event.sourceEvent.shiftKey) {
routeOpisometer.trackCell(c, true); routeOpisometer.trackCell(c, true);
} }
}); });
d3.event.on("end", function () { d3.event.on("end", function () {
restoreDefaultEvents();
clearMainTip();
addRouteOpisometer.classList.remove("pressed");
if (routeOpisometer.points.length < 2) {
rulers.remove(routeOpisometer.id);
}
});
} else {
restoreDefaultEvents(); restoreDefaultEvents();
clearMainTip(); clearMainTip();
addRouteOpisometer.classList.remove("pressed"); addRouteOpisometer.classList.remove("pressed");
if (routeOpisometer.points.length < 2) { tip("Must start in a cell with a route in it", false, "error");
rulers.remove(routeOpisometer.id); }
} })
}); );
} else {
restoreDefaultEvents();
clearMainTip();
addRouteOpisometer.classList.remove("pressed");
tip("Must start in a cell with a route in it", false, "error");
}
}));
} }
} }
@ -300,24 +244,25 @@ function editUnits() {
tip("Draw a curve to measure its area. Hold Shift to disallow path optimization", true); tip("Draw a curve to measure its area. Hold Shift to disallow path optimization", true);
unitsBottom.querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed")); unitsBottom.querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed"));
this.classList.add("pressed"); this.classList.add("pressed");
viewbox.style("cursor", "crosshair").call(d3.drag().on("start", function() { viewbox.style("cursor", "crosshair").call(
const point = d3.mouse(this); d3.drag().on("start", function () {
const planimeter = rulers.create(Planimeter, [point]).draw();
d3.event.on("drag", function() {
const point = d3.mouse(this); const point = d3.mouse(this);
planimeter.addPoint(point); const planimeter = rulers.create(Planimeter, [point]).draw();
});
d3.event.on("end", function() { d3.event.on("drag", function () {
restoreDefaultEvents(); const point = d3.mouse(this);
clearMainTip(); planimeter.addPoint(point);
addPlanimeter.classList.remove("pressed"); });
if (planimeter.points.length < 3) rulers.remove(planimeter.id);
else if (!d3.event.sourceEvent.shiftKey) planimeter.optimize();
});
}));
d3.event.on("end", function () {
restoreDefaultEvents();
clearMainTip();
addPlanimeter.classList.remove("pressed");
if (planimeter.points.length < 3) rulers.remove(planimeter.id);
else if (!d3.event.sourceEvent.shiftKey) planimeter.optimize();
});
})
);
} }
} }
@ -326,18 +271,19 @@ function editUnits() {
alertMessage.innerHTML = ` alertMessage.innerHTML = `
Are you sure you want to remove all placed rulers? Are you sure you want to remove all placed rulers?
<br>If you just want to hide rulers, toggle the Rulers layer off in Menu`; <br>If you just want to hide rulers, toggle the Rulers layer off in Menu`;
$("#alert").dialog({resizable: false, title: "Remove all rulers", $("#alert").dialog({
resizable: false,
title: "Remove all rulers",
buttons: { buttons: {
Remove: function() { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
rulers.undraw(); rulers.undraw();
rulers = new Rulers(); rulers = new Rulers();
}, },
Cancel: function() {$(this).dialog("close");} Cancel: function () {
$(this).dialog("close");
}
} }
}); });
} }
} }