diff --git a/src/Editor.scss b/src/Editor.scss index 32b3726..cc037c8 100644 --- a/src/Editor.scss +++ b/src/Editor.scss @@ -14,6 +14,8 @@ text { stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 1; + transform: translateX(-50%); + transform-box: fill-box; } @keyframes fadein { diff --git a/src/Editor.tsx b/src/Editor.tsx index 8b4edb6..5e24be6 100644 --- a/src/Editor.tsx +++ b/src/Editor.tsx @@ -212,13 +212,19 @@ class Editor extends React.Component { throw new Error('[OnPropertyChange] Container model was not found among children of the main container!'); } + let x = 0; + const lastChild: IContainerModel | undefined = parent.children.at(-1); + if (lastChild !== undefined) { + x = lastChild.properties.x + Number(lastChild.properties.width); + } + // Create the container const newContainer = new ContainerModel( parent, { id: `${type}-${count}`, parentId: parent.properties.id, - x: 0, + x, y: 0, width: properties?.Width, height: parent.properties.height, diff --git a/test-server/http.js b/test-server/http.js index 043229c..7042bee 100644 --- a/test-server/http.js +++ b/test-server/http.js @@ -43,23 +43,8 @@ const GetSVGLayoutConfiguration = () => { return { AvailableContainers: [ { - BodyColor: null, - BorderColor: '#ff0000', - BorderWidth: 48, - ContainerActions: null, - ContainerDimensionning: null, - DefaultChildrenContainers: null, - Height: 0, - IsPositionFixed: false, - IsWidthFixed: false, - MaxHeight: 0, - MaxWidth: 3000, - MinHeight: 0, - MinWidth: 500, Type: 'Chassis', - TypeChildContainerDefault: 'Trou', Width: 500, - XPositionReference: 0, Style: { fillOpacity: 0, borderWidth: 2, @@ -67,158 +52,25 @@ const GetSVGLayoutConfiguration = () => { } }, { - BodyColor: null, - BorderColor: '#FFFFFF', - BorderWidth: 0, - ContainerActions: null, - ContainerDimensionning: null, - DefaultChildrenContainers: null, - Height: 0, - IsPositionFixed: false, - IsWidthFixed: false, - MaxHeight: 0, - MaxWidth: 0, - MinHeight: 0, - MinWidth: 0, Type: 'Trou', - TypeChildContainerDefault: 'Remplissage', - Width: 0, - XPositionReference: 0 + Width: 300, + Style: { + fillOpacity: 0, + borderWidth: 2, + stroke: 'green' + } }, { - BodyColor: '#99C8FF', - BorderColor: '#00FF00', - BorderWidth: 0, - ContainerActions: [ - { - Action: 'SplitRemplissage', - AddingBehavior: 0, - CustomLogo: { - Base64Image: null, - Name: null, - Svg: null, - Url: '' - }, - Description: 'Diviser le remplissage en insérant un montant', - Id: null, - Label: 'Diviser le remplissage' - } - ], - ContainerDimensionning: { - DimensionningStyle: 1, - ShowDimensionning: false, - ShowLabel: false - }, - DefaultChildrenContainers: null, - Height: 0, - IsPositionFixed: false, - IsWidthFixed: false, - MaxHeight: 0, - MaxWidth: 0, - MinHeight: 0, - MinWidth: 0, - Type: 'Remplissage', - TypeChildContainerDefault: null, - Width: 0, - XPositionReference: 0 - }, - { - BodyColor: '#FFA947', - BorderColor: '#FFA947', - BorderWidth: 0, - ContainerActions: null, - ContainerDimensionning: null, - DefaultChildrenContainers: null, - Height: 0, - IsPositionFixed: false, - IsWidthFixed: false, - MaxHeight: 0, - MaxWidth: 0, - MinHeight: 0, - MinWidth: 0, Type: 'Montant', - TypeChildContainerDefault: null, - Width: 50, - XPositionReference: 1 - }, - { - BodyColor: '#FFA3D1', - BorderColor: '#FF6DE6', - BorderWidth: 0, - ContainerActions: null, - ContainerDimensionning: { - DimensionningStyle: 0, - ShowDimensionning: false, - ShowLabel: false - }, - DefaultChildrenContainers: null, - Height: 0, - IsPositionFixed: false, - IsWidthFixed: false, - MaxHeight: 0, - MaxWidth: 0, - MinHeight: 0, - MinWidth: 0, - Type: 'Ouverture', - TypeChildContainerDefault: null, - Width: 0, - XPositionReference: 0 - }, - { - BodyColor: '#000000', - BorderColor: null, - BorderWidth: 0, - ContainerActions: null, - ContainerDimensionning: { - DimensionningStyle: 0, - ShowDimensionning: false, - ShowLabel: false - }, - DefaultChildrenContainers: null, - Height: 0, - IsPositionFixed: false, - IsWidthFixed: false, - MaxHeight: 0, - MaxWidth: 0, - MinHeight: 0, - MinWidth: 0, - Type: 'Dilatation', - TypeChildContainerDefault: null, - Width: 8, - XPositionReference: 0 - }, - { - BodyColor: '#dee2e4', - BorderColor: '#54616c', - BorderWidth: 0, - ContainerActions: [ - { - Action: 'FillHoleWithChassis', - AddingBehavior: 1, - CustomLogo: { - Base64Image: null, - Name: null, - Svg: null, - Url: '' - }, - Description: 'Remplir le trou avec des châssis', - Id: null, - Label: 'Calepiner' - } - ], - ContainerDimensionning: null, - DefaultChildrenContainers: null, - Height: 0, - IsPositionFixed: false, - IsWidthFixed: false, - MaxHeight: 0, - MaxWidth: 0, - MinHeight: 0, - MinWidth: 0, - Type: '', - TypeChildContainerDefault: null, - Width: 0, - XPositionReference: 0 + Width: 100, + Style: { + fillOpacity: 0, + borderWidth: 2, + stroke: 'blue', + transform: 'translateX(-50%)', + transformOrigin: 'center', + transformBox: 'fill-box' + } } ], AvailableSymbols: [ @@ -248,23 +100,8 @@ const GetSVGLayoutConfiguration = () => { } ], 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 + Width: 1000 } }; }; diff --git a/test-server/node-http.js b/test-server/node-http.js index b78fe50..e6c0d74 100644 --- a/test-server/node-http.js +++ b/test-server/node-http.js @@ -2,27 +2,39 @@ import http from 'http'; const host = 'localhost'; const port = 5000; -const requestListener = function(request, response) { +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('Access-Control-Allow-Origin', '*'); response.setHeader('Content-Type', 'application/json'); const url = request.url; let json; - if (url === '/GetSVGLayoutConfiguration') { - json = GetSVGLayoutConfiguration(); - } else if (url === '/FillHoleWithChassis') { - json = FillHoleWithChassis(request); - } else if (url === '/SplitRemplissage') { - json = SplitRemplissage(request); + if (url === '/ApplicationState') { + 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 + // TODO: Return 404 rather than this json = GetSVGLayoutConfiguration(); } response.writeHead(200); return response.end(JSON.stringify(json)); } else if (request.method === 'OPTIONS') { - response.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS'); - response.setHeader('Access-Control-Allow-Headers', '*'); response.writeHead(200); return response.end(); } @@ -269,18 +281,18 @@ const GetSVGLayoutConfiguration = () => { const FillHoleWithChassis = (request) => { const maxWidthChassis = 3000; - const nbChassis = Math.ceil(request.ContainerActions.Width / maxWidthChassis); + const nbChassis = Math.ceil(request.ContainerAction.Width / maxWidthChassis); const lstModels = []; for (let i = 0; i <= nbChassis; i++) { if (i === 1 && request.ContainerAction.ExistOnBefore) { - lstModels.Add({ Type: 'Dilatation' }); + lstModels.push({ Type: 'Dilatation' }); } - lstModels.Add({ Type: 'Chassis' }); + lstModels.push({ Type: 'Chassis' }); if (i < nbChassis) { - lstModels.Add({ Type: 'Dilatation' }); + lstModels.push({ Type: 'Dilatation' }); } if (i === nbChassis && request.ContainerAction.ExistOnAfter) { - lstModels.Add({ Type: 'Dilatation' }); + lstModels.push({ Type: 'Dilatation' }); } } return {