diff --git a/src/Editor.scss b/src/Editor.scss index cc037c8..32b3726 100644 --- a/src/Editor.scss +++ b/src/Editor.scss @@ -14,8 +14,6 @@ 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 5e24be6..8b4edb6 100644 --- a/src/Editor.tsx +++ b/src/Editor.tsx @@ -212,19 +212,13 @@ 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, + x: 0, y: 0, width: properties?.Width, height: parent.properties.height, diff --git a/test-server/http.js b/test-server/http.js index 7042bee..043229c 100644 --- a/test-server/http.js +++ b/test-server/http.js @@ -43,8 +43,23 @@ 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, @@ -52,25 +67,158 @@ 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', - Width: 300, - Style: { - fillOpacity: 0, - borderWidth: 2, - stroke: 'green' - } + TypeChildContainerDefault: 'Remplissage', + Width: 0, + XPositionReference: 0 }, { + 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', - Width: 100, - Style: { - fillOpacity: 0, - borderWidth: 2, - stroke: 'blue', - transform: 'translateX(-50%)', - transformOrigin: 'center', - transformBox: 'fill-box' - } + 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 } ], AvailableSymbols: [ @@ -100,8 +248,23 @@ const GetSVGLayoutConfiguration = () => { } ], MainContainer: { + BodyColor: null, + BorderColor: '#FFFFFF', + BorderWidth: 0, + ContainerActions: null, + ContainerDimensionning: null, + DefaultChildrenContainers: null, Height: 200, - Width: 1000 + IsPositionFixed: false, + IsWidthFixed: false, + MaxHeight: 0, + MaxWidth: 0, + MinHeight: 0, + MinWidth: 0, + Type: 'Trou', + TypeChildContainerDefault: null, + Width: 1000, + XPositionReference: 0 } }; }; diff --git a/test-server/node-http.js b/test-server/node-http.js index e6c0d74..b78fe50 100644 --- a/test-server/node-http.js +++ b/test-server/node-http.js @@ -2,39 +2,27 @@ 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'); +const requestListener = function(request, response) { if (request.method === 'POST') { + response.setHeader('Access-Control-Allow-Origin', '*'); response.setHeader('Content-Type', 'application/json'); const url = request.url; let json; - 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; - } + if (url === '/GetSVGLayoutConfiguration') { + json = GetSVGLayoutConfiguration(); + } else if (url === '/FillHoleWithChassis') { + json = FillHoleWithChassis(request); + } else if (url === '/SplitRemplissage') { + json = SplitRemplissage(request); } 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(); } @@ -281,18 +269,18 @@ const GetSVGLayoutConfiguration = () => { const FillHoleWithChassis = (request) => { const maxWidthChassis = 3000; - const nbChassis = Math.ceil(request.ContainerAction.Width / maxWidthChassis); + const nbChassis = Math.ceil(request.ContainerActions.Width / maxWidthChassis); const lstModels = []; for (let i = 0; i <= nbChassis; i++) { if (i === 1 && request.ContainerAction.ExistOnBefore) { - lstModels.push({ Type: 'Dilatation' }); + lstModels.Add({ Type: 'Dilatation' }); } - lstModels.push({ Type: 'Chassis' }); + lstModels.Add({ Type: 'Chassis' }); if (i < nbChassis) { - lstModels.push({ Type: 'Dilatation' }); + lstModels.Add({ Type: 'Dilatation' }); } if (i === nbChassis && request.ContainerAction.ExistOnAfter) { - lstModels.push({ Type: 'Dilatation' }); + lstModels.Add({ Type: 'Dilatation' }); } } return {