<div class="preview">
  <p>Initial polygon preview</p>
  <canvas id="initial2d"></canvas>
  <p>2D straight skeleton preview</p>
  <canvas id="canvas2d"></canvas>
</div>

import straightSkeleton from "https://esm.sh/straight-skeleton";

const initialPolygon = {
    "type": "Polygon",
    "coordinates": [
      [
        [
                    259521.14076069795,
                    6253167.799861707
                ],
                [
                    259606.34863939675,
                    6253192.28359733
                ],
                [
                    259590.5611086523,
                    6253248.230426137
                ],
                [
                    259505.31590718575,
                    6253223.7466905145
                ],
                [
                    259521.14076069795,
                    6253167.799861707
                ]
      ]
    ]
  }

const drawInitial2d = (skeletonBox) => {
  
  // 2D canvas
  const initial2d = document.getElementById('initial2d') ;
  const initialCtx = initial2d.getContext('2d');
   
  
  initial2d.width = initial2d.clientWidth * window.devicePixelRatio;
  initial2d.height = initial2d.clientHeight * window.devicePixelRatio;
  
    initialCtx.fillStyle = '#eee';
    initialCtx.fillRect(0, 0, initial2d.width, initial2d.height);


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


    initialCtx.strokeStyle = '#000';
    initialCtx.lineWidth = window.devicePixelRatio;
    initialCtx.fillStyle = '#ffb6e9';


    for (const polygon of initialPolygon.coordinates) {
      initialCtx.beginPath();

      for (let i = 0; i < polygon.length; i++) {

        const vertex = polygon[i]
        const x = (vertex[0] - skeletonBox.minX) * scale + offsetX;
        const y = (vertex[1] - skeletonBox.minY) * scale + offsetY;

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

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

const draw2d = (skeletonBox, skeleton) => {
    // 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';
    
    for (const polygon of skeleton.polygons) {
      ctx.beginPath();

      for (let i = 0; i < polygon.length; i++) {

        const vertex = skeleton.vertices[polygon[i]];
        const x = (vertex[0] - skeletonBox.minX) * scale + offsetX;
        const y = (vertex[1] - skeletonBox.minY) * scale + offsetY;

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

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

straightSkeleton.SkeletonBuilder.init().then(() => {
  
  // Construction du skeleton
  const skeleton  = straightSkeleton.SkeletonBuilder.buildFromGeoJSONPolygon(initialPolygon);
  
    // Construction de l'étendue de la géométrie afin de centrer la géométrie dans la vue
  let minX = Infinity ;
  let minY = Infinity;
  let maxX = -Infinity;
  let maxY = -Infinity;

  for (const vertex of skeleton.vertices) {
    minX = Math.min(minX, vertex[0]);
    minY = Math.min(minY, vertex[1]);
    maxX = Math.max(maxX, vertex[0]);
    maxY = Math.max(maxY, vertex[1]);
  }

  const skeletonBox = { minX, minY, maxX, maxY };

  drawInitial2d(skeletonBox);
  draw2d(skeletonBox, skeleton);
  
console.log(1)

})