<div class="preview">
  <p>Polygone de la toiture triangulée</p>
  <canvas id="canvas2d"></canvas>
</div>

import { Vector2 } from "https://esm.sh/three";
import earcut from "https://esm.sh/earcut";

const skeletonPostProcessingResult = {
  polygons: [
    {
      vertices: [],
      edgeStart: {
        x: 259505.3125,
        y: 6253223.5
      },
      edgeEnd: {
        x: 259521.140625,
        y: 6253168
      }
    },
    {
      vertices: [
        {
          x: 259606.34375,
          y: 6253192.5
        },
        {
          x: 259598.453125,
          y: 6253220.25
        },
        {
          x: 259513.2265625,
          y: 6253195.75
        },
        {
          x: 259521.140625,
          y: 6253168
        }
      ],
      edgeStart: {
        x: 259521.140625,
        y: 6253168
      },
      edgeEnd: {
        x: 259606.34375,
        y: 6253192.5
      }
    },
    {
      vertices: [],
      edgeStart: {
        x: 259606.34375,
        y: 6253192.5
      },
      edgeEnd: {
        x: 259590.5625,
        y: 6253248
      }
    },
    {
      vertices: [
        {
          x: 259505.3125,
          y: 6253223.5
        },
        {
          x: 259513.2265625,
          y: 6253195.75
        },
        {
          x: 259598.453125,
          y: 6253220.25
        },
        {
          x: 259590.5625,
          y: 6253248
        }
      ],
      edgeStart: {
        x: 259590.5625,
        y: 6253248
      },
      edgeEnd: {
        x: 259505.3125,
        y: 6253223.5
      }
    }
  ]
};

const skeletonBox = {
  maxX: 259606.34375,
  maxY: 6253248,
  minX: 259505.3125,
  minY: 6253168 - 20
};

const draw2d = (skeletonBox, skeletonResult) => {
  // 2D canvas
  const canvas2d = document.getElementById("canvas2d");
  const ctx = canvas2d.getContext("2d");

  canvas2d.width = canvas2d.clientWidth * window.devicePixelRatio;
  canvas2d.height = canvas2d.clientHeight * window.devicePixelRatio;

  ctx.fillStyle = "#eee";
  ctx.fillRect(0, 0, canvas2d.width, canvas2d.height);

  const padding = 15 * window.devicePixelRatio;
  const scale = Math.min(
    (canvas2d.width - padding * 2) / (skeletonBox.maxX - skeletonBox.minX),
    (canvas2d.height - padding * 2) / (skeletonBox.maxY - skeletonBox.minY)
  );
  const offsetX =
    (canvas2d.width - (skeletonBox.maxX - skeletonBox.minX) * scale) / 2;
  const offsetY =
    (canvas2d.height - (skeletonBox.maxY - skeletonBox.minY) * scale) / 2;

  ctx.strokeStyle = "#000";
  ctx.lineWidth = window.devicePixelRatio;
  ctx.fillStyle = "#ffb6e9";
  const vertices = [];

  for (const polygon of skeletonResult.polygons) {
    ctx.beginPath();
    for (let i = 0; i < polygon.vertices.length; i++) {
      const vertex = polygon.vertices[i];
      let x = (vertex.x - skeletonBox.minX) * scale + offsetX;
      let y = (vertex.y - skeletonBox.minY) * scale + offsetY;

      if (i % 3 === 0) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }
    }

    ctx.closePath();
    ctx.fill();
    ctx.stroke();
  }
};

const triangulatedPolygon: {
  polygons: {
    vertices: Vector2[];
  }[];
} = {
  polygons: []
};

for (const polygon of skeletonPostProcessingResult.polygons) {
  const polygonVertices: number[] = [];
  const polygonTriangleVertices: Vector2[] = [];
  triangulatedPolygon.polygons.push({ vertices: polygonTriangleVertices });

  for (const vertex of polygon.vertices) {
    polygonVertices.push(vertex.x, vertex.y);
  }
  const triangles = earcut(polygonVertices).reverse();

  for (let i = 0; i < triangles.length; i++) {
    const index = triangles[i];

    const x = polygonVertices[index * 2];
    const y = polygonVertices[index * 2 + 1];
    const vertex = new Vector2(x, y);
    polygonTriangleVertices.push(vertex);
  }
}
console.log(triangulatedPolygon);
draw2d(skeletonBox, triangulatedPolygon);