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 if (url === '/GetFeedback') {
      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);
      json = {
        messages: [
          {
            text: `${new Date()}`,
            type: 3
          }
        ]
      }
    } else {
      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',
        DisplayedText: 'Chassis horizontal',
        MaxHeight: 200,
        DefaultChildType: 'Trou',
        Style: {
          fillOpacity: 1,
          strokeWidth: 2,
          stroke: 'red',
          fill: '#d3c9b7',
        },
        ShowSelfDimensions: true,
        IsDimensionBorrower: true,
        Category: "Stuff"
      },
      {
        Type: 'ChassisVertical',
        Orientation: 1,
        DisplayedText: 'Chassis vertical',
        MaxWidth: 200,
        DefaultChildType: 'Trou',
        Style: {
          fillOpacity: 1,
          strokeWidth: 2,
          stroke: 'red',
          fill: '#d3c9b7',
        },
        ShowSelfDimensions: true,
        IsDimensionBorrower: true,
        Category: "Stuff"
      },
      {
        Type: 'Trou',
        Blacklist: ["Chassis"],
        Margin: {
          left: 10,
          bottom: 10,
          top: 10,
          right: 10,
        },
        DefaultChildType: 'Remplissage',
        Style: {
          fillOpacity: 1,
          strokeWidth: 2,
          stroke: 'green',
          fill: 'white'
        },
        Category: "Stuff"
      },
      {
        Type: 'Remplissage',
        Category: "Other stuff",
        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>
        `
        ,
        Actions: [
          {
            Id: "SplitRemplissage",
            Action: "SplitRemplissage",
            Label: "Diviser le remplissage",
            Description: "Diviser le remplissage en insérant un montant",
            CustomLogo: {
              Base64Image: null,
              Name: 'Image1',
              Svg: null,
              Url: ""
            },
            AddingBehavior: 2
          }
        ],
        Style: {
          fillOpacity: 1,
          strokeWidth: 1,
          fill: '#bfdbfe'
        },
        UserData: {
          styleLine: {
            transform: "scaleY(0.5) translateY(100%)",
            transformBox: "fill-box"
          }
        }
      },
      {
        Type: 'Montant',
        Width: 10,
        PositionReference: 4,
        MarkPositionToDimensionBorrower: true,
        Style: {
          fillOpacity: 0,
          strokeWidth: 2,
          stroke: '#713f12',
          fill: '#713f12',
        }
      },
      {
        Type: 'Traverse',
        Height: 10,
        PositionReference: 4,
        Orientation: 1,
        MarkPositionToDimensionBorrower: true,
        Style: {
          fillOpacity: 0,
          strokeWidth: 2,
          stroke: '#6517fa',
          fill: '#6517fa',
        }
      },
      {
        Type: 'Dilatation',
        Width: 4,
        PositionReference: 1,
        MarkPositionToDimensionBorrower: true,
        Style: {
          fillOpacity: 0,
          strokeWidth: 2,
          stroke: '#713f12',
          fill: '#713f12',
        }
      },
      {
        Type: '200',
        MaxWidth: 500,
        MinWidth: 200,
        Style: {
          fillOpacity: 1,
          strokeWidth: 2,
          stroke: 'blue',
          fill: 'blue',
        }
      },
      {
        Type: '400',
        MaxWidth: 500,
        MinWidth: 400,
        Style: {
          fillOpacity: 1,
          strokeWidth: 2,
          stroke: 'red',
          fill: 'red',
        }
      }
    ],
    AvailableSymbols: [
      {
        Width: 32,
        Height: 32,
        Image: {
          Base64Image: null,
          Name: 'Image1',
          Svg: null,
          Url: 'https://www.manutan.fr/img/S/GRP/ST/AIG3930272.jpg'
        },
        Name: 'Poteau structure',
        PositionReference: 1
      },
      {
        Width: 32,
        Height: 32,
        Image: {
          Base64Image: null,
          Name: 'Image2',
          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',
        PositionReference: 0
      }
    ],
    Categories: [
      {
        Type: "Stuff",
        DisplayedText: "Stuff made here"
      },
      {
        Type: "Other stuff",
        DisplayedText: "Stuff not made here"
      }
    ],
    Patterns: [],
    MainContainer: {
      Type: 'main',
      Width: 800,
      Height: 800,
      Orientation: 1,
      Style: {
        stroke: 'black',
        strokeWidth: 2,
        fillOpacity: 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 {
    Containers: lstModels
  };
};

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

  return {
    Containers: lstModels
  };
};