Euclidean functions

ArrowPoints.js

@@ -1,16 +1,16 @@
 const canvas = document.getElementById("canvas");
 // Compute arrow polygon
-import { getArrowPolygon } from "./Arrow.js";
+import { getArrowPolygonEuclidean } from "athena-utils/shape/Arrow.js";
-import { ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_EXPONENTIAL } from "./Arrow.js";
+import { ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_EXPONENTIAL } from "athena-utils/shape/Arrow.js";
-import { getCirclePolygon } from "./BasicShapes.js";
+import { getCirclePolygonEuclidean } from "athena-utils/shape/BasicShapes.js";
-import { getRectanglePolygon } from "./BasicShapes.js";
+import { getRectanglePolygonEuclidean } from "athena-utils/shape/BasicShapes.js";
-import { getFrontline } from "./Frontline.js";
+import { getFrontline } from "athena-utils/shape/Frontline.js";
-import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "./Frontline.js";
+import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
 // Polygon merge using Turf library
-import {mergeTurfPolygons} from "./Polygon.js";
+import {mergeTurfPolygons} from "athena-utils/shape/Polygon.js";
-import {addTurfPolygonToMerge} from "./Polygon.js";
+import {addTurfPolygonToMerge} from "athena-utils/shape/Polygon.js";
-import {toTurfPolygon} from "./Polygon.js";
+import {toTurfPolygon} from "athena-utils/shape/Polygon.js";
-import {drawPolygon} from "./PolygonVisuals.js";
+import {drawPolygon} from "athena-utils/shape/PolygonVisuals.js";
 
 const circleCenter = {x:320, y:180};
 const circleRadius = 70;
@@ -73,37 +73,46 @@ const frontlineDataA = {
     splineStep: 0.08,
     spacing: 10,
     offsetDistance: 10,
-    protrusionLength: 15,
-    protrusionStartSize: 5,
-    protrusionEndSize: 2,
-    protrusionGap: 20,
     style: LEFT_SIDE,
   };
 
+const protrusionDataA = {
+    length: 15,
+    startSize: 5,
+    endSize: 2,
+    gap: 20,
+  };
+
   const frontlineDataB = {
     points: frontlinePointsB,
     splineStep: 0.02,
     spacing: 10,
     offsetDistance: 10,
-    protrusionLength: 15,
-    protrusionStartSize: 5,
-    protrusionEndSize: 5,
-    protrusionGap: 20,
     style: RIGHT_SIDE,
   };
 
+  const protrusionDataB = {
+    length: 15,
+    startSize: 5,
+    endSize: 5,
+    gap: 20,
+  };
+
   const frontlineDataC = {
     points: frontlinePointsC,
     splineStep: 0.02,
     spacing: 10,
     offsetDistance: 10,
-    protrusionLength: 15,
-    protrusionStartSize: 5,
-    protrusionEndSize: 0,
-    protrusionGap: 20,
     style: BOTH_SIDES,
   };
 
+ const protrusionDataC = {
+    length: 15,
+    startSize: 5,
+    endSize: 5,
+    gap: 20,
+  };
+
 const arrowDataA = {
     points: pointsA,
     splineStep: 0.02,
@@ -145,13 +154,13 @@ const arrowDataA = {
   };
 
 
-const arrowPolygonA = getArrowPolygon(arrowDataA, styleA, arrowHeadDataA);
+const arrowPolygonA = getArrowPolygonEuclidean(arrowDataA, styleA, arrowHeadDataA);
-const arrowPolygonB = getArrowPolygon(arrowDataB, styleB, arrowHeadDataB);
+const arrowPolygonB = getArrowPolygonEuclidean(arrowDataB, styleB, arrowHeadDataB);
-const arrowPolygonC = getArrowPolygon(arrowDataC, styleC);
+const arrowPolygonC = getArrowPolygonEuclidean(arrowDataC, styleC);
 
-const circlePolygon = getCirclePolygon(circleCenter, circleRadius, circleDensity);
+const circlePolygon = getCirclePolygonEuclidean(circleCenter, circleRadius, circleDensity);
-const circlePolygonB = getCirclePolygon(circleCenterB, circleRadiusB, circleDensityB);
+const circlePolygonB = getCirclePolygonEuclidean(circleCenterB, circleRadiusB, circleDensityB);
-const rectanglePolygon = getRectanglePolygon(rectangleCenter, rectangleSideA, rectangleSideB, rectangleRotation);
+const rectanglePolygon = getRectanglePolygonEuclidean(rectangleCenter, rectangleSideA, rectangleSideB, rectangleRotation);
 
 const mergedTurfPoly = mergeTurfPolygons(arrowPolygonA, arrowPolygonC);
 const mergedTurfPolyAll = addTurfPolygonToMerge(mergedTurfPoly, arrowPolygonB);
@@ -159,24 +168,21 @@ const mergedTurfPolyAll = addTurfPolygonToMerge(mergedTurfPoly, arrowPolygonB);
 const mergedTurfPolyRectangle = addTurfPolygonToMerge(mergedTurfPolyAll, rectanglePolygon);
 const mergedRectangle = mergeTurfPolygons(circlePolygon, circlePolygonB);
 
-const rectanglePoly = getRectanglePolygon(circleCenter, rectangleSideA, rectangleSideB, rectangleRotation*-1);
+const rectanglePoly = getRectanglePolygonEuclidean(circleCenter, rectangleSideA, rectangleSideB, rectangleRotation*-1);
 const rectangleToTurfPoly = toTurfPolygon(rectanglePoly);
 
 const frontlinePolygonA = getFrontline(frontlineDataA);
-let frontlinePolygonMergedA = mergeTurfPolygons(frontlinePolygonA.body,frontlinePolygonA.protrusions[0]);
+let frontlinePolygonMergedA = toTurfPolygon(frontlinePolygonA.body);
-for (let i = 1; i < frontlinePolygonA.protrusions.length; i++) 
-{
-    frontlinePolygonMergedA = addTurfPolygonToMerge(frontlinePolygonMergedA, frontlinePolygonA.protrusions[i]);
-}
 
-const frontlinePolygonB = getFrontline(frontlineDataB);
+
+const frontlinePolygonB = getFrontline(frontlineDataB, protrusionDataB);
 let frontlinePolygonMergedB = mergeTurfPolygons(frontlinePolygonB.body,frontlinePolygonB.protrusions[0]);
 for (let i = 1; i < frontlinePolygonB.protrusions.length; i++) 
 {
     frontlinePolygonMergedB = addTurfPolygonToMerge(frontlinePolygonMergedB, frontlinePolygonB.protrusions[i]);
 }
 
-const frontlinePolygonC = getFrontline(frontlineDataC);
+const frontlinePolygonC = getFrontline(frontlineDataC, protrusionDataC);
 
 let frontlinePolygonMergedLeft = mergeTurfPolygons(frontlinePolygonC.bodyLeft, frontlinePolygonC.protrusionsLeft[0]);
 for (let i = 1; i < frontlinePolygonC.protrusionsLeft.length; i++) {

index.html

@@ -1,3 +1,6 @@
+<!--
+MAPBOX
+-->
 <!DOCTYPE html>
 <html>
 <head>
@@ -15,4 +18,24 @@ body { margin: 0; padding: 0; }
 <div id="map"></div>
     <script type="module" src="MapPolygons.js"></script>
 </body>
-</html>
+</html>
+
+
+<!--
+CANVAS
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <canvas id="canvas" width="800" height="600"></canvas>
+    <script type="module" src="ArrowPoints.js"></script>
+  </body>
+</html>
+-->

package-lock.json

@@ -2718,7 +2718,7 @@
       "dev": true
     },
     "node_modules/athena-utils": {
-      "resolved": "git+https://git.projectathena.ca/andyaxxe/athena-utils.git#10ab405d5e",
+      "resolved": "git+https://git.projectathena.ca/andyaxxe/athena-utils.git#284cea819e",
       "dev": true,
       "dependencies": {
         "@turf/turf": "7.2.0"