andyaxxe/StorymapperArrow
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

Frontline

Browse Source
This commit is contained in:
Tomas Richtar
2025-06-06 11:02:47 +02:00
parent 896754c48a
commit 355fdd0c09
7 changed files with 303 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
Frontline.js
View File

@@ -1,25 +1,32 @@
// Cubic interpolation source from https://www.paulinternet.nl/?page=bicubic
function cubicInterpolate(p, x) {
return p[1] + 0.5 * x * (p[2] - p[0] + x * (2.0 * p[0] - 5.0 * p[1] + 4.0 * p[2] - p[3] + x * (3.0 * (p[1] - p[2]) + p[3] - p[0])));
}
import { cubicInterpolate } from "athena-utils/shape/Arrow.js";
import * as turf from '@turf/turf';
export const LEFT_SIDE = 1;
export const RIGHT_SIDE = 2;
export const BOTH_SIDES = 3;
export const METERS = 'meters';
/**
* @param {Object} arrowData - Object with data for arrow
* @param {{x: number, y: number}[]} arrowData.points - List of points defining the arrow's path.
* @param {number} arrowData.splineStep - The density factor for the arrow's points.
* @param {number} arrowData.spacing - The spacing between the points along the arrow.
* @param {number} arrowData.offsetDistance - The offset distance for the arrow's path (width).
* @param {number} arrowData.protrusionSize - Length of the square protrusion from the offset side.
* @param {Object, Object} frontlineData, protrusionData - Object containing parameters for the frontline.
* @param {{x: number, y: number}[]} frontlineData.points - List of points defining the base path of the frontline.
* @param {number} frontlineData.splineStep - The resolution of the spline interpolation (smaller = smoother curve).
* @param {number} frontlineData.spacing - Distance between interpolated points along the path.
* @param {number} frontlineData.offsetDistance - Distance to offset the entire shape from the base path.
* @param {string} frontlineData.style - Which side to draw the protrusions on (e.g., "LEFT_SIDE" or "RIGHT_SIDE").
* @param {number} protrusionData.Length - Length of each individual protrusion element.
* @param {number} protrusionData.StartSize - Width of protrusion at the start (base).
* @param {number} protrusionData.EndSize - Width of protrusion at the end (tip).
* @param {number} protrusionData.Gap - Distance between the starts of each protrusion.
*
* @returns {{x: number, y: number}[]} - An array of points representing the arrow polygon.
*/
export function getFrontline(protrusionData) {
const style = protrusionData.style ?? LEFT_SIDE;
const splinePoints = computeSplinePoints(protrusionData.points, protrusionData.splineStep);
export function getFrontline(frontlineData, protrusionData = null) {
if (!frontlineData || !(frontlineData.points) || frontlineData.points.length === 0) {
console.warn("getFrontline: Invalid frontlineData or empty points array.");
return [];
}
const style = frontlineData.style ?? LEFT_SIDE;
const splinePoints = computeSplinePoints(frontlineData.points, frontlineData.splineStep);
let bodyPolygonLeft = [];
let bodyPolygonRight = [];
@@ -28,47 +35,73 @@ export function getFrontline(protrusionData) {
const {
leftSidePoints: leftSidePointsLeftSide,
rightSidePoints: rightSidePointsLeftSide
} = computeSides(splinePoints, protrusionData.spacing, protrusionData.offsetDistance, LEFT_SIDE);
bodyPolygonLeft = [...leftSidePointsLeftSide, ...rightSidePointsLeftSide.reverse()];
} = computeSides(splinePoints, frontlineData.offsetDistance, LEFT_SIDE);
bodyPolygonLeft = [...leftSidePointsLeftSide, ...rightSidePointsLeftSide.reverse()];
const {
leftSidePoints: leftSidePointsRightSide,
rightSidePoints: rightSidePointsRightSide
} = computeSides(splinePoints, protrusionData.spacing, protrusionData.offsetDistance, RIGHT_SIDE);
bodyPolygonRight = [...leftSidePointsRightSide, ...rightSidePointsRightSide.reverse()];
} = computeSides(splinePoints, frontlineData.offsetDistance, RIGHT_SIDE);
bodyPolygonRight = [...leftSidePointsRightSide, ...rightSidePointsRightSide.reverse()];
}
const { leftSidePoints, rightSidePoints } = computeSides(splinePoints, protrusionData.spacing, protrusionData.offsetDistance, protrusionData.style);
const { leftSidePoints, rightSidePoints } = computeSides(splinePoints, frontlineData.offsetDistance, frontlineData.style);
const bodyPolygon = [...leftSidePoints, ...rightSidePoints.reverse()];
let protrusionPolygons = [];
if (protrusionData == null) {
if (style === BOTH_SIDES) {
const polygonCoords = [
...bodyPolygonLeft,
...bodyPolygonRight,
bodyPolygonLeft[0]
];
return turf.polygon([[...polygonCoords]]);
} else {
const polygonCoords = [
...bodyPolygon,
bodyPolygon[0]
];
return turf.polygon([[...polygonCoords]]);
}
}
const polygonCoordsLeft= [
...bodyPolygonLeft,
bodyPolygonLeft[0]
];
const polygonCoordsRight= [
...bodyPolygonRight,
bodyPolygonRight[0]
];
const polygonCoords = [
...bodyPolygon,
bodyPolygon[0]
];
if (style === LEFT_SIDE) {
protrusionPolygons = computeProtrusion(leftSidePoints, protrusionData);
return {
body: turf.polygon([[...polygonCoords]]),
protrusions: computeProtrusion(leftSidePoints, protrusionData),
};
} else if (style === RIGHT_SIDE) {
protrusionPolygons = computeProtrusion(rightSidePoints, protrusionData);
} else if (style === BOTH_SIDES){
let protrusionPolygonsLeft = computeProtrusion(leftSidePoints, protrusionData);
let protrusionPolygonsRight = computeProtrusion(rightSidePoints, protrusionData);
//protrusionPolygonsA = [...computeProtrusion(leftSidePoints, protrusionData), ...computeProtrusion(rightSidePoints, protrusionData)];
return {
bodyLeft: bodyPolygonLeft,
bodyRight: bodyPolygonRight,
protrusionsLeft: protrusionPolygonsLeft,
protrusionsRight: protrusionPolygonsRight
};
return {
body: turf.polygon([[...polygonCoords]]),
protrusions: computeProtrusion(rightSidePoints, protrusionData)
};
} else if (style === BOTH_SIDES) {
return {
bodyLeft: turf.polygon([[...polygonCoordsLeft]]),
bodyRight: turf.polygon([[...polygonCoordsRight]]),
protrusionsLeft: computeProtrusion(leftSidePoints, protrusionData),
protrusionsRight: computeProtrusion(rightSidePoints, protrusionData)
};
}
return {
body: bodyPolygon,
protrusions: protrusionPolygons
};
}
function computeSplinePoints(points, density) {
let splinePoints = [];
if (points.length < 2) return points;
const splinePoints = [];
for (let i = 0; i < points.length - 1; i++) {
const p0 = points[i === 0 ? i : i - 1];
@@ -76,18 +109,17 @@ function computeSplinePoints(points, density) {
const p2 = points[i + 1];
const p3 = points[i + 2] || p2;
for (let t = 0; t <= 1; t += density) {
splinePoints.push({
x: cubicInterpolate([p0.x, p1.x, p2.x, p3.x], t),
y: cubicInterpolate([p0.y, p1.y, p2.y, p3.y], t)
});
const lon = cubicInterpolate([p0[0], p1[0], p2[0], p3[0]], t);
const lat = cubicInterpolate([p0[1], p1[1], p2[1], p3[1]], t);
splinePoints.push([lon, lat]);
}
}
splinePoints.push(points[points.length - 1]);
return splinePoints;
}
function computeSides(splinePoints, spacing, offsetDistance, style = LEFT_SIDE) {
let dots = [];
function computeSides(splinePoints, offsetDistance, style = LEFT_SIDE) {
let leftSidePoints = [];
let rightSidePoints = [];
let accumulatedDistance = 0;
@@ -95,98 +127,81 @@ function computeSides(splinePoints, spacing, offsetDistance, style = LEFT_SIDE)
for (let i = 1; i < splinePoints.length; i++) {
const previousPoint = splinePoints[i - 1];
const currentPoint = splinePoints[i];
const segmentLength = Math.hypot(currentPoint.x - previousPoint.x, currentPoint.y - previousPoint.y);
accumulatedDistance += segmentLength;
if (accumulatedDistance >= spacing || i === 1 || i === splinePoints.length - 1) {
const distanceX = currentPoint.y - previousPoint.y;
const distanceY = previousPoint.x - currentPoint.x;
const length = Math.hypot(distanceX, distanceY);
let localOffsetDistance = offsetDistance;
const offsetX = (distanceX / length) * localOffsetDistance;
const offsetY = (distanceY / length) * localOffsetDistance;
const segmentDistance = turf.distance(turf.point(previousPoint), turf.point(currentPoint), { units: METERS });
accumulatedDistance += segmentDistance;
const bearing = turf.bearing(turf.point(previousPoint), turf.point(currentPoint));
let leftPoint, rightPoint;
dots.push({ x: currentPoint.x + offsetX, y: currentPoint.y + offsetY });
dots.push({ x: currentPoint.x - offsetX, y: currentPoint.y - offsetY });
accumulatedDistance = 0;
if (style === LEFT_SIDE) {
leftSidePoints.push({ x: currentPoint.x + offsetX, y: currentPoint.y + offsetY});
rightSidePoints.push({ x: currentPoint.x, y: currentPoint.y});
} else if (style === RIGHT_SIDE) {
leftSidePoints.push({ x: currentPoint.x, y: currentPoint.y});
rightSidePoints.push({ x: currentPoint.x - offsetX, y: currentPoint.y - offsetY});
} else if (style === BOTH_SIDES) {
leftSidePoints.push({ x: currentPoint.x + offsetX, y: currentPoint.y + offsetY });
rightSidePoints.push({ x: currentPoint.x - offsetX, y: currentPoint.y - offsetY});
}
if (style === LEFT_SIDE) {
leftPoint = turf.destination(turf.point(currentPoint), offsetDistance, bearing - 90, { units: METERS }).geometry.coordinates;
rightPoint = currentPoint;
} else if (style === RIGHT_SIDE) {
leftPoint = currentPoint;
rightPoint = turf.destination(turf.point(currentPoint), offsetDistance, bearing + 90, { units: METERS }).geometry.coordinates;
} else if (style === BOTH_SIDES) {
leftPoint = turf.destination(turf.point(currentPoint), offsetDistance, bearing - 90, { units: METERS }).geometry.coordinates;
rightPoint = turf.destination(turf.point(currentPoint), offsetDistance, bearing + 90, { units: METERS }).geometry.coordinates;
}
leftSidePoints.push(leftPoint);
rightSidePoints.push(rightPoint);
accumulatedDistance = 0;
}
return { leftSidePoints, rightSidePoints };
}
function computeProtrusion(leftSidePoints, protrusionData) {
let protrusions = [];
const protrusions = [];
const segments = [];
let totalLength = 0;
for (let i = 0; i < leftSidePoints.length - 1; i++) {
const p0 = leftSidePoints[i];
const p1 = leftSidePoints[i + 1];
const dx = p1.x - p0.x;
const dy = p1.y - p0.y;
const length = Math.hypot(dx, dy);
segments.push({ p0, p1, dx, dy, length });
const length = turf.distance(turf.point(p0), turf.point(p1), { units: METERS });
const bearing = turf.bearing(turf.point(p0), turf.point(p1));
segments.push({ p0, p1, length, bearing });
totalLength += length;
}
const positions = [];
for (let d = 0; d <= totalLength - (protrusionData.protrusionGap + protrusionData.protrusionStartSize); d += protrusionData.protrusionGap) {
positions.push(d + protrusionData.protrusionStartSize);
for (let d = 0; d <= totalLength - (protrusionData.gap + protrusionData.startSize); d += protrusionData.gap) {
positions.push(d + protrusionData.startSize);
}
if (positions[positions.length - 1] < totalLength) {
positions.push(totalLength - protrusionData.protrusionStartSize);
positions.push(totalLength - protrusionData.startSize);
}
let currentSegmentIndex = 0;
let currentSegmentPos = 0;
for (const distance of positions) {
while (currentSegmentIndex < segments.length &&
currentSegmentPos + segments[currentSegmentIndex].length < distance) {
while (currentSegmentIndex < segments.length && currentSegmentPos + segments[currentSegmentIndex].length < distance) {
currentSegmentPos += segments[currentSegmentIndex].length;
currentSegmentIndex++;
}
if (currentSegmentIndex >= segments.length) break;
if (currentSegmentIndex >= segments.length) {
break;
}
const seg = segments[currentSegmentIndex];
const localDistance = distance - currentSegmentPos;
const t = localDistance / seg.length;
const pointOnSegment = turf.along(turf.lineString([seg.p0, seg.p1]), localDistance, { units: METERS }).geometry.coordinates;
const normalBearing = seg.bearing - 90;
const tangentBearing = seg.bearing;
const centerPoint = turf.destination(turf.point(pointOnSegment), protrusionData.length, normalBearing, { units: METERS }).geometry.coordinates;
const x = seg.p0.x + seg.dx * t;
const y = seg.p0.y + seg.dy * t;
const corner1 = turf.destination(turf.point(pointOnSegment), -protrusionData.startSize, tangentBearing, { units: METERS }).geometry.coordinates;
const corner2 = turf.destination(turf.point(pointOnSegment), protrusionData.startSize, tangentBearing, { units: METERS }).geometry.coordinates;
const corner3 = turf.destination(turf.point(centerPoint), protrusionData.endSize, tangentBearing, { units: METERS }).geometry.coordinates;
const corner4 = turf.destination(turf.point(centerPoint), -protrusionData.endSize, tangentBearing, { units: METERS }).geometry.coordinates;
const nx = -seg.dy / seg.length;
const ny = seg.dx / seg.length;
const centerX = x - nx * protrusionData.protrusionLength;
const centerY = y - ny * protrusionData.protrusionLength;
const ux = seg.dx / seg.length;
const uy = seg.dy / seg.length;
const corner1 = { x: x - ux * protrusionData.protrusionStartSize - nx * 0, y: y - uy * protrusionData.protrusionStartSize - ny * 0 };
const corner2 = { x: x + ux * protrusionData.protrusionStartSize - nx * 0, y: y + uy * protrusionData.protrusionStartSize - ny * 0 };
const corner3 = { x: centerX + ux * protrusionData.protrusionEndSize, y: centerY + uy * protrusionData.protrusionEndSize };
const corner4 = { x: centerX - ux * protrusionData.protrusionEndSize, y: centerY - uy * protrusionData.protrusionEndSize };
protrusions.push([corner1, corner2, corner3, corner4]);
const polygonCoords = [corner1, corner2, corner3, corner4, corner1];
const polygon = turf.polygon([polygonCoords]);
protrusions.push(polygon);
}
return protrusions;