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 lineGen = d3.line().curve(d3.curveBasisClosed);
const SIMPLIFICATION_TOLERANCE = 0.5; // px
const SIMPLIFICATION_TOLERANCE = 0.3; // px
// map edge rectangle
debug
@ -31,18 +31,6 @@ export function drawCoastline(vertices: IGraphVertices, features: TPackFeatures)
const simplifiedPoints = simplify(filteredPoints, SIMPLIFICATION_TOLERANCE);
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") {
landMask
.append("path")

View file

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

View file

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