From c5698c5a119b7a8b9173985b629a3c5c6b6e077c Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sun, 25 Jul 2021 13:52:10 +0300 Subject: [PATCH] rivers editor - optimize --- index.css | 6 -- index.html | 1 - modules/ui/rivers-editor.js | 114 +++++------------------------------- 3 files changed, 15 insertions(+), 106 deletions(-) diff --git a/index.css b/index.css index 2710593f..1e188511 100644 --- a/index.css +++ b/index.css @@ -991,12 +991,6 @@ body button.noicon { stroke-width: 0.4; } -#controlCells > .available { - fill: #82ff9b40; - stroke: #82ff9b; - stroke-width: 0.4; -} - #controlCells > .occupied { fill: #ff828240; stroke: #ff8282; diff --git a/index.html b/index.html index 7e059523..8efe46c5 100644 --- a/index.html +++ b/index.html @@ -1656,7 +1656,6 @@
- diff --git a/modules/ui/rivers-editor.js b/modules/ui/rivers-editor.js index cdfea1b9..4d73e79c 100644 --- a/modules/ui/rivers-editor.js +++ b/modules/ui/rivers-editor.js @@ -10,7 +10,7 @@ function editRiver(id) { elSelected = d3.select("#" + id); - viewbox.on("touchmove mousemove", showEditorTips); + tip("Drag control points to change the river course. For major changes please create a new river instead", true); debug.append("g").attr("id", "controlCells"); debug.append("g").attr("id", "controlPoints"); @@ -20,7 +20,7 @@ function editRiver(id) { const {cells, points} = river; const riverPoints = Rivers.getRiverPoints(cells, points); drawControlPoints(riverPoints, cells); - drawRiverCells(cells); + drawCells(cells, "current"); $("#riverEditor").dialog({ title: "Edit River", @@ -40,17 +40,11 @@ function editRiver(id) { document.getElementById("riverMainstem").addEventListener("change", changeParent); document.getElementById("riverSourceWidth").addEventListener("input", changeSourceWidth); document.getElementById("riverWidthFactor").addEventListener("input", changeWidthFactor); - document.getElementById("riverNew").addEventListener("click", toggleRiverCreationMode); document.getElementById("riverEditStyle").addEventListener("click", () => editStyle("rivers")); document.getElementById("riverElevationProfile").addEventListener("click", showElevationProfile); document.getElementById("riverLegend").addEventListener("click", editRiverLegend); document.getElementById("riverRemove").addEventListener("click", removeRiver); - function showEditorTips() { - tip("Drag control points for minor change, to change cells add a new river", true); - showMainTip(); - } - function getRiver() { const riverId = +elSelected.attr("id").slice(5); const river = pack.rivers.find(r => r.i === riverId); @@ -112,52 +106,34 @@ function editRiver(id) { .call(d3.drag().on("start", dragControlPoint)); } - function drawRiverCells(cells) { + function drawCells(cells, type) { debug .select("#controlCells") - .selectAll("polygon.current") + .selectAll(`polygon.${type}`) .data(cells) .join("polygon") .attr("points", d => getPackPolygon(d)) - .attr("class", "current"); - } - - function drawAvailableCells(cells) { - debug - .select("#controlCells") - .selectAll("polygon.available") - .data(cells) - .join("polygon") - .attr("points", d => getPackPolygon(d)) - .attr("class", "available"); + .attr("class", type); } function dragControlPoint() { - const {c, r, fl, conf} = pack.cells; + const {i, r, fl} = pack.cells; const river = getRiver(); - const {cells} = river; const initCell = +this.dataset.cell; const index = +this.dataset.i; - const prev = cells[index - 1]; - const next = cells[index + 1]; - const availableCells = conf[initCell] - ? [] - : c[initCell] - .filter(neib => !r[neib]) - .filter(neib => !prev || c[neib].includes(prev)) - .filter(neib => !next || c[neib].includes(next)); + const occupiedCells = i.filter(i => r[i] && !river.cells.includes(i)); + drawCells(occupiedCells, "occupied"); let movedToCell = null; - drawAvailableCells(availableCells); d3.event.on("drag", function () { const {x, y} = d3.event; const currentCell = findCell(x, y); if (initCell !== currentCell) { - if (availableCells.includes(currentCell)) movedToCell = currentCell; - else return; + if (occupiedCells.includes(currentCell)) return; + movedToCell = currentCell; } else movedToCell = null; this.setAttribute("cx", x); @@ -170,16 +146,17 @@ function editRiver(id) { if (movedToCell) { this.dataset.cell = movedToCell; river.cells[index] = movedToCell; + drawCells(river.cells, "current"); + // swap river data r[initCell] = 0; r[movedToCell] = river.i; const sourceFlux = fl[initCell]; fl[initCell] = fl[movedToCell]; fl[movedToCell] = sourceFlux; - drawRiverCells(river.cells); } - debug.select("#controlCells").selectAll("polygon.available").remove(); + debug.select("#controlCells").selectAll("polygon.available, polygon.occupied").remove(); }); } @@ -247,66 +224,6 @@ function editRiver(id) { editNotes(id, river.name + " " + river.type); } - function toggleRiverCreationMode() { - if (document.getElementById("riverNew").classList.contains("pressed")) exitRiverCreationMode(); - else { - document.getElementById("riverNew").classList.add("pressed"); - tip("Click on map to add control points", true, "warn"); - viewbox.on("click", addPointOnClick).style("cursor", "crosshair"); - elSelected.on("click", null); - } - } - - function addPointOnClick() { - if (!elSelected.attr("data-new")) { - debug.select("#controlPoints").selectAll("circle").remove(); - const id = getNextId("river"); - elSelected = d3.select(elSelected.node().parentNode).append("path").attr("id", id).attr("data-new", 1); - } - - // add control point - const point = d3.mouse(this); - // addControlPoint([point[0], point[1]]); - redrawRiver(); - } - - function exitRiverCreationMode() { - riverNew.classList.remove("pressed"); - clearMainTip(); - viewbox.on("click", clicked).style("cursor", "default"); - - if (!elSelected.attr("data-new")) return; // no need to create a new river - elSelected.attr("data-new", null); - - // add a river - const r = +elSelected.attr("id").slice(5); - const node = elSelected.node(); - const length = node.getTotalLength() / 2; - - const cells = []; - - const segments = Math.ceil(length / 4); - const increment = rn((length / segments) * 1e5); - for (let i = increment * segments, c = i; i >= 0; i -= increment, c += increment) { - const p = node.getPointAtLength(i / 1e5); - const cell = findCell(p.x, p.y); - if (!pack.cells.r[cell]) pack.cells.r[cell] = r; - cells.push(cell); - } - - const source = cells[0]; - const mouth = last(cells); - const name = Rivers.getName(mouth); - const smallLength = pack.rivers.map(r => r.length || 0).sort((a, b) => a - b)[Math.ceil(pack.rivers.length * 0.15)]; - const type = length < smallLength ? rw({Creek: 9, River: 3, Brook: 3, Stream: 1}) : "River"; - - const discharge = rn(cells.length * 20 * Math.random()); - const widthFactor = +document.getElementById("riverWidthFactor").value; - const sourceWidth = +document.getElementById("riverSourceWidth").value; - - pack.rivers.push({i: r, source, mouth, discharge, length, width: sourceWidth, widthFactor, sourceWidth, parent: 0, name, type, basin: r}); - } - function removeRiver() { alertMessage.innerHTML = "Are you sure you want to remove the river and all its tributaries"; $("#alert").dialog({ @@ -318,7 +235,7 @@ function editRiver(id) { $(this).dialog("close"); const river = +elSelected.attr("id").slice(5); Rivers.remove(river); - elSelected.remove(); // keep if river if missed in pack.rivers + elSelected.remove(); $("#riverEditor").dialog("close"); }, Cancel: function () { @@ -329,11 +246,10 @@ function editRiver(id) { } function closeRiverEditor() { - exitRiverCreationMode(); - elSelected.on("click", null); debug.select("#controlPoints").remove(); debug.select("#controlCells").remove(); unselect(); + clearMainTip(); const forced = +document.getElementById("toggleCells").dataset.forced; document.getElementById("toggleCells").dataset.forced = 0;