fix: drawCoastline - remove redundant off-canvas points

This commit is contained in:
max 2022-07-23 16:39:07 +03:00
parent ffea4d15cb
commit cc3c06f595
3 changed files with 8 additions and 22 deletions

View file

@ -9,7 +9,7 @@ export function drawCoastline(vertices: IGraphVertices, features: TPackFeatures)
const waterMask = defs.select("#water"); const waterMask = defs.select("#water");
const lineGen = d3.line().curve(d3.curveBasisClosed); const lineGen = d3.line().curve(d3.curveBasisClosed);
const SIMPLIFICATION_TOLERANCE = 0.5; // px const SIMPLIFICATION_TOLERANCE = 0.3; // px
// map edge rectangle // map edge rectangle
debug debug
@ -31,18 +31,6 @@ export function drawCoastline(vertices: IGraphVertices, features: TPackFeatures)
const simplifiedPoints = simplify(filteredPoints, SIMPLIFICATION_TOLERANCE); const simplifiedPoints = simplify(filteredPoints, SIMPLIFICATION_TOLERANCE);
const path = round(lineGen(simplifiedPoints)!); const path = round(lineGen(simplifiedPoints)!);
points.forEach(([x, y]) => {
debug.append("circle").attr("cx", x).attr("cy", y).attr("r", 0.3).attr("fill", "red");
});
filteredPoints.forEach(([x, y]) => {
debug.append("circle").attr("cx", x).attr("cy", y).attr("r", 0.3).attr("fill", "blue");
});
simplifiedPoints.forEach(([x, y]) => {
debug.append("circle").attr("cx", x).attr("cy", y).attr("r", 0.3).attr("fill", "green");
});
if (feature.type === "lake") { if (feature.type === "lake") {
landMask landMask
.append("path") .append("path")

View file

@ -1,4 +1,5 @@
import {polygon} from "lineclip"; import {polygon} from "lineclip";
import {sliceFragment} from "./arrayUtils";
// clip polygon by graph bbox // clip polygon by graph bbox
export function clipPoly(points: TPoints) { export function clipPoly(points: TPoints) {
@ -53,7 +54,7 @@ export function getMiddlePoint(cell1: number, cell2: number) {
return [x, y]; return [x, y];
} }
function getOffCanvasSide([x, y]: TPoint) { function getPointOffCanvasSide([x, y]: TPoint) {
if (y <= 0) return "top"; if (y <= 0) return "top";
if (y >= graphHeight) return "bottom"; if (y >= graphHeight) return "bottom";
if (x <= 0) return "left"; if (x <= 0) return "left";
@ -64,17 +65,14 @@ function getOffCanvasSide([x, y]: TPoint) {
// remove intermediate out-of-canvas points from polyline // remove intermediate out-of-canvas points from polyline
export function filterOutOfCanvasPoints(points: TPoints) { export function filterOutOfCanvasPoints(points: TPoints) {
const pointsOutSide = points.map(getOffCanvasSide); const pointsOutSide = points.map(getPointOffCanvasSide);
const SAFE_ZONE = 3; const SAFE_ZONE = 3;
const fragment = (i: number) => sliceFragment(pointsOutSide, i, SAFE_ZONE);
const filterOutCanvasPoint = (i: number) => { const filterOutCanvasPoint = (i: number) => {
const pointSide = pointsOutSide[i]; const pointSide = pointsOutSide[i];
if (pointSide === false) return true; return !pointSide || fragment(i).some(side => !side || side !== pointSide);
if (pointsOutSide.slice(i - SAFE_ZONE, i + SAFE_ZONE).some(side => !side || side !== pointSide)) return true;
return false;
}; };
const result = points.filter((_, i) => filterOutCanvasPoint(i)); return points.filter((_, i) => filterOutCanvasPoint(i));
return result;
} }

View file

@ -45,7 +45,7 @@ export default defineConfig(({mode}) => {
createHtmlPlugin({ createHtmlPlugin({
inject: { inject: {
data: { data: {
APP_VERSION: APP_VERSION?.replace(/"/g, "") APP_VERSION: APP_VERSION.replace(/"/g, "")
} }
} }
}), }),