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

Merged PR 167: Add Flex and fix bugs (read desc)

Browse source 
Note: The branch name does not fit the new features.

- Implement Flex with simplex
- Enable rigid body by default (removed IsRigidBody property) <=== possibly a bad idea
- Sort children in add and update properties
- Implement MaxWidth
- Add more docs

Fixes :
- .env.production url
- Symbols: not blocking the linked container when the parent is moving
This commit is contained in:
Eric Nguyen 2022-08-25 13:28:32 +00:00
parent ec3fddec9d
commit 7f3f6a489a
43 changed files with 1127 additions and 453 deletions
Download patch file Download diff file Expand all files Collapse all files

38
test-server/http.js
View file

@ -53,7 +53,7 @@ const GetSVGLayoutConfiguration = () => {
AvailableContainers: [
{
Type: 'Chassis',
Width: 500,
MaxWidth: 500,
MinWidth: 200,
DefaultChildType: 'Trou',
Style: {
@ -65,10 +65,14 @@ const GetSVGLayoutConfiguration = () => {
},
{
Type: 'Trou',
DefaultX: 10,
DefaultY: 10,
Width: 480,
Height: 180,
DefaultX: 0,
DefaultY: 0,
Margin: {
left: 10,
bottom: 10,
top: 10,
right: 10,
},
DefaultChildType: 'Remplissage',
Style: {
fillOpacity: 1,
@ -108,6 +112,28 @@ const GetSVGLayoutConfiguration = () => {
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: [
@ -138,7 +164,7 @@ const GetSVGLayoutConfiguration = () => {
],
MainContainer: {
Height: 200,
Width: 1000
Width: 800
}
};
};

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

@ -53,182 +53,62 @@ 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,
MinWidth: 200,
DefaultChildType: 'Trou',
Style: {
fillOpacity: 0,
borderWidth: 2,
stroke: 'red'
fillOpacity: 1,
strokeWidth: 2,
stroke: 'red',
fill: '#d3c9b7',
}
},
{
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
DefaultX: 10,
DefaultY: 10,
Width: 480,
Height: 180,
DefaultChildType: 'Remplissage',
Style: {
fillOpacity: 1,
strokeWidth: 2,
stroke: 'green',
fill: 'white'
}
},
{
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
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>
`
,
Style: {
fillOpacity: 1,
strokeWidth: 1,
fill: '#bfdbfe'
},
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'
UserData: {
styleLine: {
transform: "scaleY(0.5) translateY(100%)",
transformBox: "fill-box"
}
],
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
}
},
{
Type: 'Montant',
Width: 10,
XPositionReference: 1,
Style: {
fillOpacity: 0,
strokeWidth: 2,
stroke: '#713f12',
fill: '#713f12',
}
}
],
AvailableSymbols: [