From 0fd354fc1f0f92206ff9a5718a6da10f63f933e0 Mon Sep 17 00:00:00 2001 From: Siklos Date: Fri, 5 Aug 2022 10:37:39 +0200 Subject: [PATCH 1/7] Fix text not centered --- src/Editor.scss | 2 ++ 1 file changed, 2 insertions(+) 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 { From d1e04769bb6b2bc5785212ee12f254193ce874c5 Mon Sep 17 00:00:00 2001 From: Siklos Date: Fri, 5 Aug 2022 10:45:16 +0200 Subject: [PATCH 2/7] http.js reduce API size --- test-server/http.js | 195 ++++---------------------------------------- 1 file changed, 16 insertions(+), 179 deletions(-) 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 } }; }; From 35bb95f206c51ff017d0173ccfb7499793c418d8 Mon Sep 17 00:00:00 2001 From: Siklos Date: Fri, 5 Aug 2022 11:56:45 +0200 Subject: [PATCH 3/7] Fix node-http.js --- test-server/node-http.js | 44 +++++++++++++++++++++++++--------------- 1 file changed, 28 insertions(+), 16 deletions(-) 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 { From cf1a3a7eec95ab297edbb37501e1ab4f2e5cb7ac Mon Sep 17 00:00:00 2001 From: Siklos Date: Fri, 5 Aug 2022 11:57:03 +0200 Subject: [PATCH 4/7] Default action of AddContainer will now be append --- src/Editor.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) 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, From 8fdf75019fc34ee9451511e0c660789b66fa85fe Mon Sep 17 00:00:00 2001 From: Siklos Date: Fri, 5 Aug 2022 12:06:15 +0200 Subject: [PATCH 5/7] Fix bun test-server --- test-server/http.js | 35 ++++++++++++++++++++++------------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/test-server/http.js b/test-server/http.js index 7042bee..c4f3238 100644 --- a/test-server/http.js +++ b/test-server/http.js @@ -3,22 +3,31 @@ import { serve } from 'bun'; serve({ port: 5000, - fetch(request) { + 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 = JSON.stringify(GetSVGLayoutConfiguration()); - } else if (url.pathname === '/FillHoleWithChassis') { - json = JSON.stringify(FillHoleWithChassis(request)); - } else if (url.pathname === '/SplitRemplissage') { - json = JSON.stringify(SplitRemplissage(request)); + 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 = JSON.stringify(GetSVGLayoutConfiguration()); + json = GetSVGLayoutConfiguration(); } - return new Response(json, { + return new Response(JSON.stringify(json), { status: 200, headers: { 'Content-Type': 'application/json', @@ -108,18 +117,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 { From 563840080c7f9905ef8400f8f76978078c3a0665 Mon Sep 17 00:00:00 2001 From: Siklos Date: Fri, 5 Aug 2022 12:28:23 +0200 Subject: [PATCH 6/7] Fix bug where when an input is emptied, its type change to 'number' --- src/Components/Properties/Properties.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Properties/Properties.tsx b/src/Components/Properties/Properties.tsx index e75e86b..61d0bff 100644 --- a/src/Components/Properties/Properties.tsx +++ b/src/Components/Properties/Properties.tsx @@ -42,7 +42,7 @@ export class Properties extends React.Component { const id = `property-${key}`; - const type = isNaN(Number(value)) ? 'text' : 'number'; + const type = 'text'; const isDisabled = key === 'id' || key === 'parentId'; // hardcoded groupInput.push(
From 415318a81cd6febd1e5b565ac05e65efe14e9f48 Mon Sep 17 00:00:00 2001 From: Siklos Date: Fri, 5 Aug 2022 13:03:00 +0200 Subject: [PATCH 7/7] Fix Error message when string empty in input --- src/Components/SVG/Elements/Container.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx index ab8d92c..bf56127 100644 --- a/src/Components/SVG/Elements/Container.tsx +++ b/src/Components/SVG/Elements/Container.tsx @@ -17,6 +17,7 @@ export class Container extends React.Component { const containersElements = this.props.model.children.map(child => new Container({ model: child } as IContainerProps).render()); const xText = Number(this.props.model.properties.width) / 2; const yText = Number(this.props.model.properties.height) / 2; + const transform = `translate(${Number(this.props.model.properties.x)}, ${Number(this.props.model.properties.y)})`; // g style const defaultStyle = { @@ -46,7 +47,7 @@ export class Container extends React.Component { return (