svg-layout-designer-react/test-server/http.js

// http.js
import { serve } from 'bun';

serve({
  port: 5000,
  async fetch(request) {
    console.log(`${request.method}: ${request.url}`);
    if (request.method === 'POST') {
      const url = new URL(request.url);
      let json;
      if (url.pathname === '/GetSVGLayoutConfiguration') {
        json = GetSVGLayoutConfiguration();
      } else if (url.pathname === '/ApplicationState') {
        const bodyParsed = await request.json();
        console.log(bodyParsed);
        switch (bodyParsed.Action) {
          case 'FillHoleWithChassis':
            json = FillHoleWithChassis(bodyParsed);
            break;
          case 'SplitRemplissage':
            json = SplitRemplissage(bodyParsed);
            break;
          default:
            break;
        }
      } else {
        // TODO: Return 404 rather than this
        json = GetSVGLayoutConfiguration();
      }
      return new Response(JSON.stringify(json), {
        status: 200,
        headers: {
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Headers': '*'
        }
      });
    }

    return new Response('Welcome to Bun!', {
      status: 200,
      headers: {
        'Content-Type': 'text/plain',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': '*'
      }
    });
  }
});

const GetSVGLayoutConfiguration = () => {
  return {
    AvailableContainers: [
      {
        Type: 'Chassis',
        Width: 500,
        MinWidth: 200,
        DefaultChildType: 'Trou',
        Style: {
          fillOpacity: 1,
          strokeWidth: 2,
          stroke: 'red',
          fill: '#d3c9b7',
        }
      },
      {
        Type: 'Trou',
        DefaultX: 10,
        DefaultY: 10,
        Width: 480,
        Height: 180,
        DefaultChildType: 'Remplissage',
        Style: {
          fillOpacity: 1,
          strokeWidth: 2,
          stroke: 'green',
          fill: 'white'
        }
      },
      {
        Type: 'Remplissage',
        DefaultChildType: 'Trou',
        CustomSVG: `
          <rect width="{width}" height="{height}" style="{style}"></rect>
          <rect  width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>
          <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line>
          <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line>
        `
        ,
        Style: {
          fillOpacity: 1,
          strokeWidth: 1,
          fill: '#bfdbfe'
        },
        UserData: {
          styleLine: {
            transform: "scaleY(0.5) translateY(100%)",
            transformBox: "fill-box"
          }
        }
      },
      {
        Type: 'Montant',
        Width: 10,
        XPositionReference: 1,
        Style: {
          fillOpacity: 0,
          strokeWidth: 2,
          stroke: '#713f12',
          fill: '#713f12',
        }
      }
    ],
    AvailableSymbols: [
      {
        Height: 0,
        Image: {
          Base64Image: null,
          Name: null,
          Svg: null,
          Url: 'https://www.manutan.fr/img/S/GRP/ST/AIG3930272.jpg'
        },
        Name: 'Poteau structure',
        Width: 0,
        XPositionReference: 1
      },
      {
        Height: 0,
        Image: {
          Base64Image: null,
          Name: null,
          Svg: null,
          Url: 'https://e7.pngegg.com/pngimages/647/127/png-clipart-svg-working-group-information-world-wide-web-internet-structure.png'
        },
        Name: 'Joint de structure',
        Width: 0,
        XPositionReference: 0
      }
    ],
    MainContainer: {
      Height: 200,
      Width: 1000
    }
  };
};

const FillHoleWithChassis = (request) => {
  const maxWidthChassis = 3000;
  const nbChassis = Math.ceil(request.ContainerAction.Width / maxWidthChassis);
  const lstModels = [];
  for (let i = 0; i <= nbChassis; i++) {
    if (i === 1 && request.ContainerAction.ExistOnBefore) {
      lstModels.push({ Type: 'Dilatation' });
    }
    lstModels.push({ Type: 'Chassis' });
    if (i < nbChassis) {
      lstModels.push({ Type: 'Dilatation' });
    }
    if (i === nbChassis && request.ContainerAction.ExistOnAfter) {
      lstModels.push({ Type: 'Dilatation' });
    }
  }
  return {
    ApplicationState: {
      Containers: lstModels
    }
  };
};

const SplitRemplissage = (request) => {
  const lstModels = [
    { Type: 'Remplissage' },
    { Type: 'Montant' },
    { Type: 'Remplissage' }
  ];

  return {
    ApplicationState: { Containers: lstModels }
  };
};