diff --git a/icons.css b/icons.css index 008faebc..99791e76 100644 --- a/icons.css +++ b/icons.css @@ -204,6 +204,7 @@ .icon-chess-pawn:before {content:'\f443';} /* '' */ .icon-chess-queen:before {content:'\f445';} /* '' */ .icon-chess-rook:before {content:'\f447';} /* '' */ +/*.icon-route:before {content:'\f4d7';} /* '' */ .icon-sign:before {content:'\f4d9';} /* '' */ .icon-user-friends:before {content:'\f500';} /* '' */ .icon-user-shield:before {content:'\f505';} /* '' */ diff --git a/index.html b/index.html index e0e27613..f636d21f 100644 --- a/index.html +++ b/index.html @@ -3099,6 +3099,11 @@
+ @@ -3438,6 +3443,10 @@ + + + + diff --git a/modules/ui/measurers.js b/modules/ui/measurers.js index d248546d..cdac3f16 100644 --- a/modules/ui/measurers.js +++ b/modules/ui/measurers.js @@ -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); } @@ -306,6 +307,122 @@ class Opisometer extends Measurer { } } +class RouteOpisometer extends Measurer { + constructor(points) { + super(points); + if (pack.cells) { + 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(); + this.updateLabel(); + } + } + else { + if (cellStops[0] === cell) { + return; + } else if (cellStops.length > 1 && cellStops[1] === cell) { + cellStops.shift(); + this.points.shift(); + this.updateCurve(); + 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); diff --git a/modules/ui/units-editor.js b/modules/ui/units-editor.js index eaf53ad1..1fb1b6df 100644 --- a/modules/ui/units-editor.js +++ b/modules/ui/units-editor.js @@ -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); @@ -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();