Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added RouteOpisometer and related changes. #606

Merged
merged 4 commits into from
Mar 12, 2021
Merged

Added RouteOpisometer and related changes. #606

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c86b480
Added RouteOpisometer and related changes.
RichardRobertson Mar 11, 2021
426ee32
Changed RouteOpisometer.cellStops to act like a set and prevent repea…
RichardRobertson Mar 12, 2021
f0f7ebb
Fixes for review comments
RichardRobertson Mar 12, 2021
e6ee9f4
My editor ate the space at the end of the line from "like in " on the…
RichardRobertson Mar 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions icons.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 9 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3099,6 +3099,11 @@
<div id="unitsBottom">
<button id="addLinearRuler" data-tip="Click to place a linear measurer (ruler)" class="icon-ruler"></button>
<button id="addOpisometer" data-tip="Drag to measure a curve length (opisometer)" class="icon-drafting-compass"></button>
<button id="addRouteOpisometer" data-tip="Drag to measure a curve length that sticks to routes (route opisometer)" class="icon-route">
RichardRobertson marked this conversation as resolved.
Show resolved Hide resolved
<svg width="1em" height="1em">
RichardRobertson marked this conversation as resolved.
Show resolved Hide resolved
<use xlink:href="#icon-route" />
</svg>
</button>
<button id="addPlanimeter" data-tip="Drag to measure a polygon area (planimeter)" class="icon-draw-polygon"></button>
<button id="removeRulers" data-tip="Remove all rulers from the map. Click on ruler label to remove a ruler separately" class="icon-trash"></button>
<button id="unitsRestore" data-tip="Restore default units settings" class="icon-ccw"></button>
Expand Down Expand Up @@ -3438,6 +3443,10 @@
<path d="M15 4c0-0.547-0.453-1-1-1s-1 0.453-1 1 0.453 1 1 1 1-0.453 1-1zM28 18.5v5.5c0 0.203-0.125 0.391-0.313 0.469-0.063 0.016-0.125 0.031-0.187 0.031-0.125 0-0.25-0.047-0.359-0.141l-1.453-1.453c-2.453 2.953-6.859 4.844-11.688 4.844s-9.234-1.891-11.688-4.844l-1.453 1.453c-0.094 0.094-0.234 0.141-0.359 0.141-0.063 0-0.125-0.016-0.187-0.031-0.187-0.078-0.313-0.266-0.313-0.469v-5.5c0-0.281 0.219-0.5 0.5-0.5h5.5c0.203 0 0.391 0.125 0.469 0.313s0.031 0.391-0.109 0.547l-1.563 1.563c1.406 1.891 4.109 3.266 7.203 3.687v-10.109h-3c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h3v-2.547c-1.188-0.688-2-1.969-2-3.453 0-2.203 1.797-4 4-4s4 1.797 4 4c0 1.484-0.812 2.766-2 3.453v2.547h3c0.547 0 1 0.453 1 1v2c0 0.547-0.453 1-1 1h-3v10.109c3.094-0.422 5.797-1.797 7.203-3.687l-1.563-1.563c-0.141-0.156-0.187-0.359-0.109-0.547s0.266-0.313 0.469-0.313h5.5c0.281 0 0.5 0.219 0.5 0.5z"></path>
</symbol>

<symbol id="icon-route" viewBox="0 0 512 512">
<path d="M416 320h-96c-17.6 0-32-14.4-32-32s14.4-32 32-32h96s96-107 96-160-43-96-96-96-96 43-96 96c0 25.5 22.2 63.4 45.3 96H320c-52.9 0-96 43.1-96 96s43.1 96 96 96h96c17.6 0 32 14.4 32 32s-14.4 32-32 32H185.5c-16 24.8-33.8 47.7-47.3 64H416c52.9 0 96-43.1 96-96s-43.1-96-96-96zm0-256c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zM96 256c-53 0-96 43-96 96s96 160 96 160 96-107 96-160-43-96-96-96zm0 128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path>
</symbol>

<g id="defs-relief">
<symbol id="relief-mount-1" viewBox="0 0 100 100">
<path d="m3,69 16,-12 31,-32 15,20 30,24" fill="#fff" stroke="#5c5c70" stroke-width="1"></path>
Expand Down
117 changes: 117 additions & 0 deletions modules/ui/measurers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ class Rulers {
const points = pointsString.split(" ").map(el => el.split(",").map(n => +n));
const Type = type === "Ruler" ? Ruler :
type === "Opisometer" ? Opisometer :
type === "RouteOpisometer" ? RouteOpisometer :
type === "Planimeter" ? Planimeter : null;
this.create(Type, points);
}
Expand Down Expand Up @@ -306,6 +307,122 @@ class Opisometer extends Measurer {
}
}

class RouteOpisometer extends Measurer {
constructor(points) {
super(points);
if (pack.cells) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure, in what cases pack.cells is false?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is to fix an error when loading a map. If you make a map, draw a RouteOpisometer, save to storage, set options to load last saved map, and reload the page, pack.cells is not defined at the time when rulers are recreated. I found that error while testing to make sure that it loaded properly again.

this.cellStops = points.map(p => findCell(p[0], p[1]));
} else {
this.cellStops = null;
}
}

checkCellStops() {
if (!this.cellStops) {
this.cellStops = this.points.map(p => findCell(p[0], p[1]));
}
}

trackCell(cell, rigth) {
this.checkCellStops();
const cellStops = this.cellStops;
if (rigth) {
if (last(cellStops) === cell) {
return;
} else if (cellStops.length > 1 && cellStops[cellStops.length - 2] === cell) {
cellStops.pop();
this.points.pop();
this.updateCurve();
this.updateLabel();
} else {
cellStops.push(cell);
this.points.push(this.getCellRouteCoord(cell));
this.updateCurve();
RichardRobertson marked this conversation as resolved.
Show resolved Hide resolved
this.updateLabel();
}
}
else {
if (cellStops[0] === cell) {
return;
} else if (cellStops.length > 1 && cellStops[1] === cell) {
cellStops.shift();
this.points.shift();
this.updateCurve();
RichardRobertson marked this conversation as resolved.
Show resolved Hide resolved
this.updateLabel();
} else {
cellStops.unshift(cell);
this.points.unshift(this.getCellRouteCoord(cell));
this.updateCurve();
this.updateLabel();
}
}
}

getCellRouteCoord(c) {
const cells = pack.cells;
const burgs = pack.burgs;
if (cells.road[c]) {
const b = cells.burg[c];
const x = b ? burgs[b].x : cells.p[c][0];
const y = b ? burgs[b].y : cells.p[c][1];
return [x, y];
} else {
return null;
}
}

draw() {
if (this.el) this.el.selectAll("*").remove();
const size = this.getSize();
const dash = this.getDash();
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);
el.append("path").attr("class", "white").attr("stroke-width", size);
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));

this.updateCurve();
this.updateLabel();
return this;
}

updateCurve() {
lineGen.curve(d3.curveCatmullRom.alpha(.5));
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) {
d3.event.on("drag", function() {
const mousePoint = [d3.event.x | 0, d3.event.y | 0];
const cells = pack.cells;

const c = findCell(mousePoint[0], mousePoint[1]);
if (!cells.road[c]) {
return;
}

context.trackCell(c, rigth);
});
}
}

class Planimeter extends Measurer {
constructor(points) {
super(points);
Expand Down
52 changes: 52 additions & 0 deletions modules/ui/units-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ function editUnits() {

document.getElementById("addLinearRuler").addEventListener("click", addRuler);
document.getElementById("addOpisometer").addEventListener("click", toggleOpisometerMode);
document.getElementById("addRouteOpisometer").addEventListener("click", toggleRouteOpisometerMode);
document.getElementById("addPlanimeter").addEventListener("click", togglePlanimeterMode);
document.getElementById("removeRulers").addEventListener("click", removeAllRulers);
document.getElementById("unitsRestore").addEventListener("click", restoreDefaultUnits);
Expand Down Expand Up @@ -242,6 +243,57 @@ function editUnits() {
}
}

function toggleRouteOpisometerMode() {
if (this.classList.contains("pressed")) {
restoreDefaultEvents();
clearMainTip();
this.classList.remove("pressed");
} else {
if (!layerIsOn("toggleRulers")) toggleRulers();
tip("Draw a curve along routes to measure length", true);
unitsBottom.querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed"));
this.classList.add("pressed");
viewbox.style("cursor", "crosshair").call(d3.drag().on("start", function() {
const cells = pack.cells;
const burgs = pack.burgs;
const point = d3.mouse(this);
const c = findCell(point[0], point[1]);
if (cells.road[c]) {
const b = cells.burg[c];
const x = b ? burgs[b].x : cells.p[c][0];
const y = b ? burgs[b].y : cells.p[c][1];
const routeOpisometer = rulers.create(RouteOpisometer, [[x, y]]).draw();

d3.event.on("drag", function () {
const point = d3.mouse(this);
const c = findCell(point[0], point[1]);
if (cells.road[c]) {
/*const b = cells.burg[c];
const x = b ? burgs[b].x : cells.p[c][0];
const y = b ? burgs[b].y : cells.p[c][1];
routeOpisometer.addPoint([x, y]);*/
routeOpisometer.trackCell(c, true);
}
});

d3.event.on("end", function () {
restoreDefaultEvents();
clearMainTip();
addRouteOpisometer.classList.remove("pressed");
if (routeOpisometer.points.length < 2) {
rulers.remove(routeOpisometer.id);
}
});
} else {
restoreDefaultEvents();
clearMainTip();
addRouteOpisometer.classList.remove("pressed");
tip("Must start in a cell with a route in it", false, "error");
}
}));
}
}

function togglePlanimeterMode() {
if (this.classList.contains("pressed")) {
restoreDefaultEvents();
Expand Down