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

import http from 'http';
const host = 'localhost';
const port = 5000;

const requestListener = async(request, response) => {
  response.setHeader('Access-Control-Allow-Origin', '*');
  response.setHeader('Access-Control-Allow-Headers', '*');
  response.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
  if (request.method === 'POST') {
    response.setHeader('Content-Type', 'application/json');
    const url = request.url;
    let json;
    if (url === '/SetContainerList') {
      const buffers = [];
      for await (const chunk of request) {
        buffers.push(chunk);
      }
      const data = Buffer.concat(buffers).toString();
      const bodyParsed = JSON.parse(data);
      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();
    }
    response.writeHead(200);
    return response.end(JSON.stringify(json));
  } else if (request.method === 'OPTIONS') {
    response.writeHead(200);
    return response.end();
  }

  response.setHeader('Content-Type', 'text/plain');
  response.writeHead(200);
  return response.end('Hello world');
};

const server = http.createServer(requestListener);
server.listen(port, host, () => {
  console.log(`Server is running on http://${host}:${port}`);
});

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',
        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: {
      BodyColor: null,
      BorderColor: '#FFFFFF',
      BorderWidth: 0,
      ContainerActions: null,
      ContainerDimensionning: null,
      DefaultChildrenContainers: null,
      Height: 200,
      IsPositionFixed: false,
      IsWidthFixed: false,
      MaxHeight: 0,
      MaxWidth: 0,
      MinHeight: 0,
      MinWidth: 0,
      Type: 'Trou',
      TypeChildContainerDefault: null,
      Width: 1000,
      XPositionReference: 0
    }
  };
};

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 }
  };
};