StorymapperArrow/ArrowPoints.js

const canvas = document.getElementById("canvas");
// Compute arrow polygon
import { getArrowPolygon } from "athena-utils/shape/Arrow.js";
import { ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_EXPONENTIAL } from "athena-utils/shape/Arrow.js";
import { getCirclePolygon } from "athena-utils/shape/BasicShapes.js";
import { getRectanglePolygon } from "athena-utils/shape/BasicShapes.js";
import { getFrontline } from "athena-utils/shape/Frontline.js";
import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
// Polygon merge using Turf library
import {mergeTurfPolygons} from "athena-utils/shape/Polygon.js";
import {addTurfPolygonToMerge} from "athena-utils/shape/Polygon.js";
import {toTurfPolygon} from "athena-utils/shape/Polygon.js";
import {drawPolygon} from "athena-utils/shape/PolygonVisuals.js";

const circleCenter = {x:320, y:180};
const circleRadius = 70;
const circleDensity = 15;

const circleCenterB = {x:400, y:280};
const circleRadiusB = 70;
const circleDensityB = 15;

const rectangleCenter= {x:100, y:300};
const rectangleSideA = 70;
const rectangleSideB = 200;
const rectangleRotation = 40;

const frontlinePointsA = [
    { x: 120, y: 400 },
    { x: 200, y: 100 },
    { x: 350, y: 200 },
    { x: 350, y: 400 },
    { x: 450, y: 480 },
    { x: 550, y: 440 },
    { x: 600, y: 300 },
];

const frontlinePointsB = [
    { x: 420, y: 280 },
    { x: 430, y: 380 },
    { x: 500, y: 400 },
    { x: 520, y: 300 },
];

const frontlinePointsC = [
    { x: 450, y: 200 },
    { x: 500, y: 250 },
    { x: 550, y: 250 },
    { x: 550, y: 200 }
];

const pointsA = [
    { x: 50, y: 400 },
    { x: 150, y: 100 },
    { x: 300, y: 200 },
    { x: 300, y: 500 },
];

const pointsB = [
    { x: 310, y: 300 },
    { x: 380, y: 350 },
    { x: 450, y: 450 },
    { x: 380, y: 530 }
];

const pointsC = [
    { x: 50, y: 100 },
    { x: 100, y: 100 },
    { x: 180, y: 95 }
];
const frontlineDataA = {
    points: frontlinePointsA,
    splineStep: 0.08,
    spacing: 10,
    offsetDistance: 10,
    style: LEFT_SIDE,
  };

const protrusionDataA = {
    length: 15,
    startSize: 5,
    endSize: 2,
    gap: 20,
  };

  const frontlineDataB = {
    points: frontlinePointsB,
    splineStep: 0.02,
    spacing: 10,
    offsetDistance: 10,
    style: RIGHT_SIDE,
  };

  const protrusionDataB = {
    length: 15,
    startSize: 5,
    endSize: 5,
    gap: 20,
  };

  const frontlineDataC = {
    points: frontlinePointsC,
    splineStep: 0.02,
    spacing: 10,
    offsetDistance: 10,
    style: BOTH_SIDES,
  };

 const protrusionDataC = {
    length: 15,
    startSize: 5,
    endSize: 5,
    gap: 20,
  };

const arrowDataA = {
    points: pointsA,
    splineStep: 0.02,
    spacing: 20,
    offsetDistance: 50
  };
  const styleA = {
    calculation: ARROW_BODY_STYLE_LINEAR,
    range: 1,
    minValue: 0.1
  };
  const arrowHeadDataA = {
    widthArrow: 40,
    lengthArrow: 35
  };
  const arrowDataB = {
    points: pointsB,
    splineStep: 0.02,
    spacing: 1,
    offsetDistance: 80,
  };
  const styleB = {
    calculation: ARROW_BODY_STYLE_EXPONENTIAL,
    range: 5,
    minValue: 0.1
  };
  const arrowHeadDataB = {
    widthArrow: 40,
    lengthArrow: 35
  };
  const arrowDataC = {
    points: pointsC,
    splineStep: 0.02,
    spacing: 5,
    offsetDistance: 10,
  };
  const styleC = {
    calculation: ARROW_BODY_STYLE_CONSTANT,
  };


const arrowPolygonA = getArrowPolygon(arrowDataA, styleA, arrowHeadDataA);
const arrowPolygonB = getArrowPolygon(arrowDataB, styleB, arrowHeadDataB);
const arrowPolygonC = getArrowPolygon(arrowDataC, styleC);

const circlePolygon = getCirclePolygon(circleCenter, circleRadius, circleDensity);
const circlePolygonB = getCirclePolygon(circleCenterB, circleRadiusB, circleDensityB);
const rectanglePolygon = getRectanglePolygon(rectangleCenter, rectangleSideA, rectangleSideB, rectangleRotation);

const mergedTurfPoly = mergeTurfPolygons(arrowPolygonA, arrowPolygonC);
const mergedTurfPolyAll = addTurfPolygonToMerge(mergedTurfPoly, arrowPolygonB);

const mergedTurfPolyRectangle = addTurfPolygonToMerge(mergedTurfPolyAll, rectanglePolygon);
const mergedRectangle = mergeTurfPolygons(circlePolygon, circlePolygonB);

const rectanglePoly = getRectanglePolygon(circleCenter, rectangleSideA, rectangleSideB, rectangleRotation*-1);
const rectangleToTurfPoly = toTurfPolygon(rectanglePoly);

const frontlinePolygonA = getFrontline(frontlineDataA);
let frontlinePolygonMergedA = toTurfPolygon(frontlinePolygonA.body);


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, protrusionDataC);

let frontlinePolygonMergedLeft = mergeTurfPolygons(frontlinePolygonC.bodyLeft, frontlinePolygonC.protrusionsLeft[0]);
for (let i = 1; i < frontlinePolygonC.protrusionsLeft.length; i++) {
    frontlinePolygonMergedLeft = addTurfPolygonToMerge(frontlinePolygonMergedLeft, frontlinePolygonC.protrusionsLeft[i]);
}

let frontlinePolygonMergedRight = mergeTurfPolygons(frontlinePolygonC.bodyRight, frontlinePolygonC.protrusionsRight[0]);
for (let i = 1; i < frontlinePolygonC.protrusionsRight.length; i++) {
    frontlinePolygonMergedRight = addTurfPolygonToMerge(frontlinePolygonMergedRight, frontlinePolygonC.protrusionsRight[i]);
}

drawPolygon(mergedTurfPolyRectangle, "rgba(255, 0, 0, 0.5)", canvas);
drawPolygon(mergedRectangle, "rgba(0, 255, 0, 0.5)", canvas);
drawPolygon(rectangleToTurfPoly, "rgba(234, 0, 255, 0.5)", canvas);
drawPolygon(frontlinePolygonMergedA, "rgba(0, 13, 255, 0.5)", canvas);
drawPolygon(frontlinePolygonMergedB, "rgba(82, 0, 94, 0.5)", canvas);
drawPolygon(frontlinePolygonMergedLeft, "rgba(255, 166, 0, 0.5)", canvas);
drawPolygon(frontlinePolygonMergedRight, "rgba(251, 0, 255, 0.5)", canvas);