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

v1.6.04 - apply getSegmentId for routes and rivers

Browse source
This commit is contained in:
Azgaar 2021-03-05 14:16:03 +03:00
parent ee324a3fef
commit 08a49c1d72
3 changed files with 20 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

29
modules/ui/rivers-editor.js
View file

@ -87,8 +87,8 @@ function editRiver(id) {
} }
} }
function addControlPoint(point) { function addControlPoint(point, before = null) {
debug.select("#controlPoints").append("circle") debug.select("#controlPoints").insert("circle", before)
.attr("cx", point[0]).attr("cy", point[1]).attr("r", .6) .attr("cx", point[0]).attr("cy", point[1]).attr("r", .6)
.call(d3.drag().on("drag", dragControlPoint)) .call(d3.drag().on("drag", dragControlPoint))
.on("click", clickControlPoint); .on("click", clickControlPoint);
@ -137,27 +137,10 @@ function editRiver(id) {
function addInterimControlPoint() { function addInterimControlPoint() {
const point = d3.mouse(this); const point = d3.mouse(this);
const controls = document.getElementById("controlPoints").querySelectorAll("circle");
const dists = []; const points = Array.from(controls).map(circle => [+circle.getAttribute("cx"), +circle.getAttribute("cy")]);
debug.select("#controlPoints").selectAll("circle").each(function() { const index = getSegmentId(points, point, 2);
const x = +this.getAttribute("cx"); addControlPoint(point, ":nth-child(" + (index+1) + ")");
const y = +this.getAttribute("cy");
dists.push((point[0] - x) ** 2 + (point[1] - y) ** 2);
});
let index = dists.length;
if (dists.length > 1) {
const sorted = dists.slice(0).sort((a, b) => a-b);
const closest = dists.indexOf(sorted[0]);
const next = dists.indexOf(sorted[1]);
if (closest <= next) index = closest+1; else index = next+1;
}
const before = ":nth-child(" + (index + 1) + ")";
debug.select("#controlPoints").insert("circle", before)
.attr("cx", point[0]).attr("cy", point[1]).attr("r", .8)
.call(d3.drag().on("drag", dragControlPoint))
.on("click", clickControlPoint);
redrawRiver(); redrawRiver();
} }

40
modules/ui/routes-editor.js
View file

@ -48,40 +48,26 @@ function editRoute(onClick) {
function drawControlPoints(node) { function drawControlPoints(node) {
const l = node.getTotalLength(); const l = node.getTotalLength();
const increment = l / Math.ceil(l / 4); const increment = l / Math.ceil(l / 4);
for (let i=0; i <= l; i += increment) {addControlPoint(node.getPointAtLength(i));} for (let i=0; i <= l; i += increment) {
const point = node.getPointAtLength(i);
addControlPoint([point.x, point.y]);
}
routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value; routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value;
} }
function addControlPoint(point) { function addControlPoint(point, before = null) {
debug.select("#controlPoints").append("circle") debug.select("#controlPoints").insert("circle", before)
.attr("cx", point.x).attr("cy", point.y).attr("r", .8) .attr("cx", point[0]).attr("cy", point[1]).attr("r", .6)
.call(d3.drag().on("drag", dragControlPoint)) .call(d3.drag().on("drag", dragControlPoint))
.on("click", clickControlPoint); .on("click", clickControlPoint);
} }
function addInterimControlPoint() { function addInterimControlPoint() {
const point = d3.mouse(this); const point = d3.mouse(this);
const controls = document.getElementById("controlPoints").querySelectorAll("circle");
const dists = []; const points = Array.from(controls).map(circle => [+circle.getAttribute("cx"), +circle.getAttribute("cy")]);
debug.select("#controlPoints").selectAll("circle").each(function() { const index = getSegmentId(points, point, 2);
const x = +this.getAttribute("cx"); addControlPoint(point, ":nth-child(" + (index+1) + ")");
const y = +this.getAttribute("cy");
dists.push((point[0] - x) ** 2 + (point[1] - y) ** 2);
});
let index = dists.length;
if (dists.length > 1) {
const sorted = dists.slice(0).sort((a, b) => a-b);
const closest = dists.indexOf(sorted[0]);
const next = dists.indexOf(sorted[1]);
if (closest <= next) index = closest+1; else index = next+1;
}
const before = ":nth-child(" + (index + 1) + ")";
debug.select("#controlPoints").insert("circle", before)
.attr("cx", point[0]).attr("cy", point[1]).attr("r", .8)
.call(d3.drag().on("drag", dragControlPoint))
.on("click", clickControlPoint);
redrawRoute(); redrawRoute();
} }
@ -266,9 +252,7 @@ function editRoute(onClick) {
elSelected = d3.select(parent).append("path").attr("id", id).attr("data-new", 1); elSelected = d3.select(parent).append("path").attr("id", id).attr("data-new", 1);
} }
// add control point addControlPoint(d3.mouse(this));
const point = d3.mouse(this);
addControlPoint({x: point[0], y: point[1]});
redrawRoute(); redrawRoute();
} }

4
modules/utils.js
View file

@ -359,7 +359,7 @@ void function addFindAll() {
}() }()
// get segment of any point on polyline // get segment of any point on polyline
function getSegmentId(points, point) { function getSegmentId(points, point, step = 10) {
if (points.length === 2) return 1; if (points.length === 2) return 1;
const d2 = (p1, p2) => (p1[0] - p2[0]) ** 2 + (p1[1] - p2[1]) ** 2; const d2 = (p1, p2) => (p1[0] - p2[0]) ** 2 + (p1[1] - p2[1]) ** 2;
@ -371,7 +371,7 @@ function getSegmentId(points, point) {
const p2 = points[i+1]; const p2 = points[i+1];
const length = Math.sqrt(d2(p1, p2)); const length = Math.sqrt(d2(p1, p2));
const segments = Math.ceil(length / 10); const segments = Math.ceil(length / step);
const dx = (p2[0] - p1[0]) / segments; const dx = (p2[0] - p1[0]) / segments;
const dy = (p2[1] - p1[1]) / segments; const dy = (p2[1] - p1[1]) / segments;