Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix multiple bugs #10

Merged
Siklos merged 7 commits from dev.rigidbody into master 2022-08-05 07:30:34 -04:00
Conversation 0 Commits 7 Files changed 6 +78 -211
6 changed files with 78 additions and 211 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/Components/Properties/Properties.tsx
View file

@ -42,7 +42,7 @@ export class Properties extends React.Component<IPropertiesProps, IPropertiesSta
groupInput: React.ReactNode[]
) => {
const id = `property-${key}`;
const type = isNaN(Number(value)) ? 'text' : 'number';
const type = 'text';
const isDisabled = key === 'id' || key === 'parentId'; // hardcoded
groupInput.push(
<div key={id} className='mt-4'>

3
src/Components/SVG/Elements/Container.tsx
View file

@ -17,6 +17,7 @@ export class Container extends React.Component<IContainerProps> {
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<IContainerProps> {
return (
<g
style={defaultStyle}
transform={`translate(${this.props.model.properties.x}, ${this.props.model.properties.y})`}
transform={transform}
key={`container-${this.props.model.properties.id}`}
>
<Dimension

2
src/Editor.scss
View file

@ -14,6 +14,8 @@ text {
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
transform: translateX(-50%);
transform-box: fill-box;
}
@keyframes fadein {

8
src/Editor.tsx
View file

@ -212,13 +212,19 @@ class Editor extends React.Component<IEditorProps> {
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,

230
test-server/http.js
View file

@ -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',
@ -43,23 +52,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 +61,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,41 +109,26 @@ 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
}
};
};
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 {

44
test-server/node-http.js
View file

@ -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 {