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

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

src/Components/SVG/Elements/Container.tsx

@@ -18,10 +18,17 @@ interface IContainerProps {
  */
 export const Container: React.FC<IContainerProps> = (props: IContainerProps) => {
   const containersElements = props.model.children.map(child => <Container key={`container-${child.properties.id}`} model={child} />);
-  const xText = props.model.properties.width / 2;
-  const yText = props.model.properties.height / 2;
 
-  const transform = `translate(${props.model.properties.x}, ${props.model.properties.y})`;
+  const width: number = props.model.properties.width;
+  const height: number = props.model.properties.height;
+
+  const x = props.model.properties.x;
+  const y = props.model.properties.y;
+
+  const xText = width / 2;
+  const yText = height / 2;
+
+  const transform = `translate(${x}, ${y})`;
 
   // g style
   const defaultStyle: React.CSSProperties = {
@@ -39,8 +46,8 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
   const svg = (props.model.properties.customSVG != null)
     ? CreateReactCustomSVG(props.model.properties.customSVG, props.model.properties)
     : (<rect
-      width={props.model.properties.width}
-      height={props.model.properties.height}
+      width={width}
+      height={height}
       style={style}
     >
     </rect>);
@@ -49,10 +56,10 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
   const dimensionMargin = DIMENSION_MARGIN * depth;
   const id = `dim-${props.model.properties.id}`;
   const xStart: number = 0;
-  const xEnd = props.model.properties.width;
-  const y = -dimensionMargin;
+  const xEnd = width;
+  const yDim = -dimensionMargin;
   const strokeWidth = 1;
-  const text = (props.model.properties.width ?? 0).toString();
+  const text = (width ?? 0).toString();
 
   let dimensionChildren: JSX.Element | null = null;
   if (props.model.children.length > 1 && SHOW_CHILDREN_DIMENSIONS) {
@@ -80,35 +87,34 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
       transform={transform}
       key={`container-${props.model.properties.id}`}
     >
-      { SHOW_PARENT_DIMENSION
+      {SHOW_PARENT_DIMENSION
         ? <Dimension
           id={id}
           xStart={xStart}
           xEnd={xEnd}
-          yStart={y}
-          yEnd={y}
+          yStart={yDim}
+          yEnd={yDim}
           strokeWidth={strokeWidth}
           text={text}
         />
         : null
       }
-      { dimensionChildren }
-      { svg }
-      { SHOW_TEXT
+      {dimensionChildren}
+      {svg}
+      {SHOW_TEXT
         ? <text
           x={xText}
           y={yText}
         >
           {props.model.properties.displayedText}
         </text>
-        : null }
-      { containersElements }
+        : null}
+      {containersElements}
     </g>
   );
 };
 
-function GetChildrenDimensionProps(props: IContainerProps, dimensionMargin: number):
-{ childrenId: string, xChildrenStart: number, xChildrenEnd: number, yChildren: number, textChildren: string } {
+function GetChildrenDimensionProps(props: IContainerProps, dimensionMargin: number): { childrenId: string, xChildrenStart: number, xChildrenEnd: number, yChildren: number, textChildren: string } {
   const childrenId = `dim-children-${props.model.properties.id}`;
 
   const lastChild = props.model.children[props.model.children.length - 1];
@@ -146,7 +152,7 @@ function CreateReactCustomSVG(customSVG: string, props: IContainerProperties): R
 function transform(node: HTMLElement, children: Node[], props: IContainerProperties): React.ReactNode {
   const supportedTags = ['line', 'path', 'rect'];
   if (supportedTags.includes(node.tagName.toLowerCase())) {
-    const attributes: {[att: string]: string | object | null} = {};
+    const attributes: { [att: string]: string | object | null } = {};
     node.getAttributeNames().forEach(attName => {
       const attributeValue = node.getAttribute(attName);
       if (attributeValue === null) {

src/Components/SVG/Elements/Selector.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
 import { getAbsolutePosition } from '../../../utils/itertools';
+import { RemoveMargin } from '../../../utils/svg';
 
 interface ISelectorProps {
   selected?: IContainerModel
@@ -14,11 +15,19 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
     );
   }
 
-  const [x, y] = getAbsolutePosition(props.selected);
-  const [width, height] = [
+  let [x, y] = getAbsolutePosition(props.selected);
+  let [width, height] = [
     props.selected.properties.width,
     props.selected.properties.height
   ];
+
+  ({ x, y, width, height } = RemoveMargin(x, y, width, height,
+    props.selected.properties.margin.left,
+    props.selected.properties.margin.bottom,
+    props.selected.properties.margin.top,
+    props.selected.properties.margin.right
+  ));
+
   const style: React.CSSProperties = {
     stroke: '#3B82F6', // tw blue-500
     strokeWidth: 4,