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.07 - Opisometer class

Browse source
This commit is contained in:
Azgaar 2021-03-05 20:28:54 +03:00
parent 4a1dba33f8
commit ca1acce48c
2 changed files with 214 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

267
modules/ui/measurers.js
View file

@ -10,6 +10,18 @@ class Rulers {
return ruler; return ruler;
} }
curve(points) {
const curve = new Opisometer(points);
this.data.push(curve);
return curve;
}
area(points) {
const area = new Planimeter(points);
this.data.push(area);
return area;
}
toString() { toString() {
const string = this.data.map(ruler => ruler.toString()).join("; "); const string = this.data.map(ruler => ruler.toString()).join("; ");
return string; return string;
@ -21,7 +33,7 @@ class Rulers {
for (ruler of rulers) { for (ruler of rulers) {
const [type, pointsString] = ruler.split(": "); const [type, pointsString] = ruler.split(": ");
const points = pointsString.split(" ").map(el => el.split(",").map(n => +n)); const points = pointsString.split(" ").map(el => el.split(",").map(n => +n));
if (type === "linear") this.linear(points); this[type](points);
} }
} }
@ -41,12 +53,29 @@ class Rulers {
} }
} }
class LinearRuler { class Measurer {
constructor(points) { constructor(points) {
this.points = points; this.points = points;
this.id = rulers.data.length; this.id = rulers.data.length;
} }
drag() {
const tr = parseTransform(this.getAttribute("transform"));
const x = +tr[0] - d3.event.x, y = +tr[1] - d3.event.y;
d3.event.on("drag", function() {
const transform = `translate(${(x + d3.event.x)},${(y + d3.event.y)})`;
this.setAttribute("transform", transform);
});
}
}
class LinearRuler extends Measurer {
constructor(points) {
super(points);
}
toString() { toString() {
return "linear" + ": " + this.points.join(" "); return "linear" + ": " + this.points.join(" ");
} }
@ -74,7 +103,7 @@ class LinearRuler {
const size = rn(1 / scale ** .3 * 2, 2); const size = rn(1 / scale ** .3 * 2, 2);
const dash = rn(30 / distanceScaleInput.value, 2); const dash = rn(30 / distanceScaleInput.value, 2);
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.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) 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").attr("points", points).attr("class", "gray").attr("stroke-width", rn(size * 1.2, 2)).attr("stroke-dasharray", dash);
@ -82,6 +111,7 @@ class LinearRuler {
el.append("text").attr("dx", ".35em").attr("dy", "-.45em").on("click", () => rulers.remove(this.id)); 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;
} }
drawPoints(el) { drawPoints(el) {
@ -125,16 +155,6 @@ class LinearRuler {
return length; return length;
} }
drag() {
const tr = parseTransform(this.getAttribute("transform"));
const x = +tr[0] - d3.event.x, y = +tr[1] - d3.event.y;
d3.event.on("drag", function() {
const transform = `translate(${(x + d3.event.x)},${(y + d3.event.y)})`;
this.setAttribute("transform", transform);
});
}
dragControl(context, pointId) { dragControl(context, pointId) {
let edge = context.isEdge(pointId) let edge = context.isEdge(pointId)
let circle = context.el.select(`circle:nth-child(${pointId+1})`); let circle = context.el.select(`circle:nth-child(${pointId+1})`);
@ -194,89 +214,184 @@ class LinearRuler {
} }
} }
function drawOpisometer() { class Opisometer extends Measurer {
constructor(points) {
super(points);
}
toString() {
return "curve" + ": " + this.points.join(" ");
}
draw() {
if (this.el) this.el.selectAll("*").remove();
lineGen.curve(d3.curveBasis); lineGen.curve(d3.curveBasis);
const size = rn(1 / scale ** .3 * 2, 1); const size = rn(1 / scale ** .3 * 2, 1);
const dash = rn(30 / distanceScaleInput.value, 2); const dash = rn(30 / distanceScaleInput.value, 2);
const p0 = d3.mouse(this); const context = this;
const points = [[p0[0], p0[1]]];
let length = 0;
const rulerNew = ruler.append("g").attr("class", "opisometer").call(d3.drag().on("start", dragRuler)); const el = this.el = ruler.append("g").attr("class", "opisometer").call(d3.drag().on("start", this.drag)).attr("font-size", 10 * size);
const curve = rulerNew.append("path").attr("class", "white").attr("stroke-width", size); el.append("path").attr("class", "white").attr("stroke-width", size);
const curveGray = rulerNew.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 text = rulerNew.append("text").attr("dy", "-.3em").attr("font-size", 10 * size).on("click", removeParent); const rulerPoints = el.append("g").attr("class", "rulerPoints").attr("stroke-width", .5 * size).attr("font-size", 2 * size);
const start = rulerNew.append("circle").attr("r", 2 * size).attr("stroke-width", .5 * size).attr("data-edge", "start").call(d3.drag().on("start", dragOpisometerEnd)); rulerPoints.append("circle").attr("r", "1em").call(d3.drag().on("start", function() {context.dragControl(context, 0)}));
const end = rulerNew.append("circle").attr("r", 2 * size).attr("stroke-width", .5 * size).attr("data-edge", "end").call(d3.drag().on("start", dragOpisometerEnd)); 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.updateLabel();
return this;
}
addPoint(point) {
const MIN_DIST = d3.event.sourceEvent.shiftKey ? 9 : 100;
const prev = last(this.points);
point = [point[0] | 0, point[1] | 0];
const dist2 = (prev[0] - point[0]) ** 2 + (prev[1] - point[1]) ** 2;
if (dist2 < MIN_DIST) return;
this.points.push(point);
this.updateCurve();
this.updateLabel();
}
updateCurve() {
const path = round(lineGen(this.points));
this.el.selectAll("path").attr("d", path);
const left = this.points[0];
const right = last(this.points);
this.el.select(".rulerPoints > circle:first-child").attr("cx", left[0]).attr("cy", left[1]);
this.el.select(".rulerPoints > circle:last-child").attr("cx", right[0]).attr("cy", right[1]);
}
updateLabel() {
const length = this.el.select("path").node().getTotalLength();
const text = rn(length * distanceScaleInput.value) + " " + distanceUnitInput.value;
const [x, y] = last(this.points);
this.el.select("text").attr("x", x).attr("y", y).text(text);
}
dragControl(context, rigth) {
const MIN_DIST = d3.event.sourceEvent.shiftKey ? 9 : 100;
let prev = rigth ? last(context.points) : context.points[0];
d3.event.on("drag", function() { d3.event.on("drag", function() {
const p = d3.mouse(this); const point = [d3.event.x | 0, d3.event.y | 0];
const diff = Math.hypot(last(points)[0] - p[0], last(points)[1] - p[1]);
if (diff > 3) points.push([p[0], p[1]]); else return;
const path = round(lineGen(points)); const dist2 = (prev[0] - point[0]) ** 2 + (prev[1] - point[1]) ** 2;
curve.attr("d", path); if (dist2 < MIN_DIST) return;
curveGray.attr("d", path);
length = curve.node().getTotalLength(); rigth ? context.points.push(point) : context.points.unshift(point);
const label = rn(length * distanceScaleInput.value) + " " + distanceUnitInput.value; prev = point;
text.attr("x", p[0]).attr("y", p[1]).text(label);
context.updateCurve();
context.updateLabel();
}); });
d3.event.on("end", function() { d3.event.on("end", function() {
restoreDefaultEvents(); if (!d3.event.sourceEvent.shiftKey) context.optimize();
clearMainTip();
addOpisometer.classList.remove("pressed");
const c = curve.node().getPointAtLength(length / 2);
const p = curve.node().getPointAtLength(length / 2 - 1);
const atan = p.x > c.x ? Math.atan2(p.y - c.y, p.x - c.x) : Math.atan2(c.y - p.y, c.x - p.x);
const angle = rn(atan * 180 / Math.PI, 3);
const rotate = `rotate(${angle} ${c.x} ${c.y})`;
rulerNew.attr("data-points", JSON.stringify(points));
text.attr("x", c.x).attr("y", c.y).attr("transform", rotate);
start.attr("cx", points[0][0]).attr("cy", points[0][1]);
end.attr("cx", last(points)[0]).attr("cy", last(points)[1]);
}); });
}
optimize() {
const MIN_DIST2 = 900;
const optimized = [];
for (let i=0, p1 = this.points[0]; i < this.points.length; 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;
if (dist2 < MIN_DIST2) continue;
optimized.push(p2);
p1 = p2;
}
this.points = optimized;
this.updateCurve();
this.updateLabel();
}
undraw() {
this.el.remove();
}
} }
function dragOpisometerEnd() { class Planimeter extends Measurer {
const ruler = d3.select(this.parentNode); constructor(points) {
const curve = ruler.select(".white"); super(points);
const curveGray = ruler.select(".gray"); }
const text = ruler.select("text");
const points = JSON.parse(ruler.attr("data-points")); toString() {
const x0 = +this.getAttribute("cx"), y0 = +this.getAttribute("cy"); return "area" + ": " + this.points.join(" ");
if (x0 === points[0][0] && y0 === points[0][1]) points.reverse(); }
draw() {
if (this.el) this.el.selectAll("*").remove();
lineGen.curve(d3.curveBasis); lineGen.curve(d3.curveBasis);
let length = 0; const size = rn(1 / scale ** .3 * 2, 1);
const dash = rn(30 / distanceScaleInput.value, 2);
const context = this;
d3.event.on("drag", function() { const el = this.el = ruler.append("g").attr("class", "opisometer").call(d3.drag().on("start", this.drag)).attr("font-size", 10 * size);
const p = d3.mouse(this); el.append("path").attr("class", "white").attr("stroke-width", size);
d3.select(this).attr("cx", p[0]).attr("cy", p[1]); 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);
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));
const diff = Math.hypot(last(points)[0] - p[0], last(points)[1] - p[1]); this.updateCurve();
if (diff > 3) points.push([p[0], p[1]]); else return; this.updateLabel();
return this;
}
const path = round(lineGen(points)); addPoint(point) {
curve.attr("d", path); const MIN_DIST = d3.event.sourceEvent.shiftKey ? 9 : 100;
curveGray.attr("d", path); const prev = last(this.points);
length = curve.node().getTotalLength(); point = [point[0] | 0, point[1] | 0];
const label = rn(length * distanceScaleInput.value) + " " + distanceUnitInput.value; const dist2 = (prev[0] - point[0]) ** 2 + (prev[1] - point[1]) ** 2;
text.text(label); if (dist2 < MIN_DIST) return;
}); this.points.push(point);
this.updateCurve();
this.updateLabel();
}
d3.event.on("end", function() { updateCurve() {
const c = curve.node().getPointAtLength(length / 2); const path = round(lineGen(this.points));
const p = curve.node().getPointAtLength(length / 2 - 1); this.el.selectAll("path").attr("d", path);
const atan = p.x > c.x ? Math.atan2(p.y - c.y, p.x - c.x) : Math.atan2(c.y - p.y, c.x - p.x);
const angle = rn(atan * 180 / Math.PI, 3);
const rotate = `rotate(${angle} ${c.x} ${c.y})`;
ruler.attr("data-points", JSON.stringify(points)); const left = this.points[0];
text.attr("x", c.x).attr("y", c.y).attr("transform", rotate); const right = last(this.points);
}); this.el.select(".rulerPoints > circle:first-child").attr("cx", left[0]).attr("cy", left[1]);
this.el.select(".rulerPoints > circle:last-child").attr("cx", right[0]).attr("cy", right[1]);
}
updateLabel() {
const length = this.el.select("path").node().getTotalLength();
const text = rn(length * distanceScaleInput.value) + " " + distanceUnitInput.value;
const [x, y] = last(this.points);
this.el.select("text").attr("x", x).attr("y", y).text(text);
}
optimize() {
const MIN_DIST2 = 900;
const optimized = [];
for (let i=0, p1 = this.points[0]; i < this.points.length; 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;
if (dist2 < MIN_DIST2) continue;
optimized.push(p2);
p1 = p2;
}
this.points = optimized;
this.updateCurve();
this.updateLabel();
}
undraw() {
this.el.remove();
}
} }
function drawPlanimeter() { function drawPlanimeter() {

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

@ -219,10 +219,25 @@ function editUnits() {
this.classList.remove("pressed"); this.classList.remove("pressed");
} else { } else {
if (!layerIsOn("toggleRulers")) toggleRulers(); if (!layerIsOn("toggleRulers")) toggleRulers();
tip("Draw a curve to measure its length", 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", drawOpisometer)); viewbox.style("cursor", "crosshair").call(d3.drag().on("start", function() {
const point = d3.mouse(this);
const opisometer = rulers.curve([point]).draw();
d3.event.on("drag", function() {
const point = d3.mouse(this);
opisometer.addPoint(point);
});
d3.event.on("end", function() {
restoreDefaultEvents();
clearMainTip();
addOpisometer.classList.remove("pressed");
if (!d3.event.sourceEvent.shiftKey) opisometer.optimize();
});
}));
} }
} }