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/Editor/Actions/ContainerOperations.ts

@@ -10,6 +10,9 @@ import { GetDefaultContainerProps, DEFAULTCHILDTYPE_ALLOW_CYCLIC, DEFAULTCHILDTY
 import { ApplyBehaviors } from '../Behaviors/Behaviors';
 import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
 import Swal from 'sweetalert2';
+import { ApplyMargin, transformX } from '../../../utils/svg';
+import { Flex } from '../Behaviors/FlexBehaviors';
+import { PropertyType } from '../../../Enums/PropertyType';
 
 /**
  * Select a container
@@ -87,6 +90,8 @@ export function DeleteContainer(
     throw new Error('[DeleteContainer] Could not find container among parent\'s children');
   }
 
+  Flex(container);
+
   // Select the previous container
   // or select the one above
   const SelectedContainerId = GetSelectedContainerOnDelete(
@@ -147,7 +152,7 @@ export function AddContainerToSelectedContainer(
   setHistoryCurrentStep: Dispatch<SetStateAction<number>>
 ): void {
   if (selected === null ||
-      selected === undefined) {
+    selected === undefined) {
     return;
   }
 
@@ -213,9 +218,17 @@ export function AddContainer(
   if (parentClone === null || parentClone === undefined) {
     throw new Error('[AddContainer] Container model was not found among children of the main container!');
   }
+  const left: number = containerConfig.Margin?.left ?? 0;
+  const bottom: number = containerConfig.Margin?.bottom ?? 0;
+  const top: number = containerConfig.Margin?.top ?? 0;
+  const right: number = containerConfig.Margin?.right ?? 0;
 
   let x = containerConfig.DefaultX ?? 0;
-  const y = containerConfig.DefaultY ?? 0;
+  let y = containerConfig.DefaultY ?? 0;
+  let width = containerConfig.Width ?? containerConfig.MaxWidth ?? containerConfig.MinWidth ?? parentClone.properties.width;
+  let height = containerConfig.Height ?? parentClone.properties.height;
+
+  ({ x, y, width, height } = ApplyMargin(x, y, width, height, left, bottom, top, right));
 
   x = ApplyAddMethod(index, containerConfig, parentClone, x);
 
@@ -225,6 +238,8 @@ export function AddContainer(
     parentClone,
     x,
     y,
+    width,
+    height,
     containerConfig
   );
 
@@ -238,17 +253,15 @@ export function AddContainer(
     }
   );
 
-  ApplyBehaviors(newContainer, current.Symbols);
-
-  // And push it the the parent children
-  if (index === parentClone.children.length) {
-    parentClone.children.push(newContainer);
-  } else {
-    parentClone.children.splice(index, 0, newContainer);
-  }
+  parentClone.children.push(newContainer);
+  UpdateParentChildrenList(parentClone);
 
   InitializeDefaultChild(configuration, containerConfig, newContainer, newCounters);
 
+  ApplyBehaviors(newContainer, current.Symbols);
+
+  ApplyBehaviorsOnSiblings(newContainer, current.Symbols);
+
   // Update the state
   history.push({
     LastAction: `Add ${newContainer.properties.id} in ${parentClone.properties.id}`,
@@ -262,6 +275,16 @@ export function AddContainer(
   setHistoryCurrentStep(history.length - 1);
 }
 
+function UpdateParentChildrenList(parentClone: IContainerModel | null): void {
+  if (parentClone === null) {
+    return;
+  }
+  parentClone.children.sort(
+    (a, b) => transformX(a.properties.x, a.properties.width, a.properties.XPositionReference) -
+      transformX(b.properties.x, b.properties.width, b.properties.XPositionReference)
+  );
+}
+
 function InitializeDefaultChild(
   configuration: IConfiguration,
   containerConfig: IAvailableContainer,
@@ -286,8 +309,17 @@ function InitializeDefaultChild(
     }
 
     seen.add(currentConfig.Type);
-    const x = currentConfig.DefaultX ?? 0;
-    const y = currentConfig.DefaultY ?? 0;
+
+    const left: number = currentConfig.Margin?.left ?? 0;
+    const bottom: number = currentConfig.Margin?.bottom ?? 0;
+    const top: number = currentConfig.Margin?.top ?? 0;
+    const right: number = currentConfig.Margin?.right ?? 0;
+    let x = currentConfig.DefaultX ?? 0;
+    let y = currentConfig.DefaultY ?? 0;
+    let width = currentConfig.Width ?? currentConfig.MaxWidth ?? currentConfig.MinWidth ?? parent.properties.width;
+    let height = currentConfig.Height ?? parent.properties.height;
+
+    ({ x, y, width, height } = ApplyMargin(x, y, width, height, left, bottom, top, right));
 
     UpdateCounters(newCounters, currentConfig.Type);
     const count = newCounters[currentConfig.Type];
@@ -297,6 +329,8 @@ function InitializeDefaultChild(
       parent,
       x,
       y,
+      width,
+      height,
       currentConfig
     );
 
@@ -353,7 +387,7 @@ function ApplyAddMethod(index: number, containerConfig: IAvailableContainer, par
 export function OnPropertyChange(
   key: string,
   value: string | number | boolean,
-  isStyle: boolean = false,
+  type: PropertyType = PropertyType.SIMPLE,
   selected: IContainerModel | undefined,
   fullHistory: IHistoryState[],
   historyCurrentStep: number,
@@ -364,7 +398,7 @@ export function OnPropertyChange(
   const current = history[history.length - 1];
 
   if (selected === null ||
-      selected === undefined) {
+    selected === undefined) {
     throw new Error('[OnPropertyChange] Property was changed before selecting a Container');
   }
 
@@ -375,22 +409,7 @@ export function OnPropertyChange(
     throw new Error('[OnPropertyChange] Container model was not found among children of the main container!');
   }
 
-  const oldSymbolId = container.properties.linkedSymbolId;
-
-  if (isStyle) {
-    (container.properties.style as any)[key] = value;
-  } else {
-    (container.properties as any)[key] = value;
-  }
-
-  LinkSymbol(
-    container.properties.id,
-    oldSymbolId,
-    container.properties.linkedSymbolId,
-    current.Symbols
-  );
-
-  ApplyBehaviors(container, current.Symbols);
+  SetContainer(container, key, value, type, current.Symbols);
 
   history.push({
     LastAction: `Change ${key} of ${container.properties.id}`,
@@ -404,6 +423,79 @@ export function OnPropertyChange(
   setHistoryCurrentStep(history.length - 1);
 }
 
+/**
+ * Set the container with properties and behaviors (mutate)
+ * @param container Container to update
+ * @param key Key of the property to update
+ * @param value Value of the property to update
+ * @param type Type of the property to update
+ * @param symbols Current list of symbols
+ */
+function SetContainer(
+  container: ContainerModel,
+  key: string, value: string | number | boolean,
+  type: PropertyType,
+  symbols: Map<string, ISymbolModel>
+): void {
+  // get the old symbol to detect unlink
+  const oldSymbolId = container.properties.linkedSymbolId;
+
+  // update the property
+  AssignProperty(container, key, value, type);
+
+  // link the symbol if it exists
+  LinkSymbol(
+    container.properties.id,
+    oldSymbolId,
+    container.properties.linkedSymbolId,
+    symbols
+  );
+
+  // Apply special behaviors: rigid, flex, symbol, anchor
+  ApplyBehaviors(container, symbols);
+
+  // Apply special behaviors on siblings
+  ApplyBehaviorsOnSiblings(container, symbols);
+
+  // sort the children list by their position
+  UpdateParentChildrenList(container.parent);
+}
+
+function AssignProperty(container: ContainerModel, key: string, value: string | number | boolean, type: PropertyType): void {
+  switch (type) {
+    case PropertyType.STYLE:
+      (container.properties.style as any)[key] = value;
+      break;
+    case PropertyType.MARGIN:
+      SetMargin();
+      break;
+    default:
+      (container.properties as any)[key] = value;
+  }
+
+  function SetMargin(): void {
+    const oldMarginValue: number = (container.properties.margin as any)[key];
+    const diff = Number(value) - oldMarginValue;
+    switch (key) {
+      case 'left':
+        container.properties.x += diff;
+        container.properties.width -= diff;
+        break;
+      case 'right':
+        container.properties.width -= diff;
+        break;
+      case 'bottom':
+        container.properties.height -= diff;
+        break;
+      case 'top':
+        container.properties.y += diff;
+        container.properties.height -= diff;
+        break;
+    }
+    (container.properties.margin as any)[key] = value;
+  }
+}
+
 function LinkSymbol(
   containerId: string,
   oldSymbolId: string,
@@ -422,3 +514,10 @@ function LinkSymbol(
 
   newSymbol.linkedContainers.add(containerId);
 }
+function ApplyBehaviorsOnSiblings(newContainer: ContainerModel, Symbols: Map<string, ISymbolModel>): void {
+  if (newContainer.parent === null || newContainer.parent === undefined) {
+    return;
+  }
+
+  newContainer.parent.children.filter(container => newContainer !== container).forEach(container => ApplyBehaviors(container, Symbols));
+}

src/Components/Editor/Behaviors/AnchorBehaviors.ts

@@ -28,7 +28,7 @@ export function ApplyAnchor(container: IContainerModel): IContainerModel {
   }
 
   const rigidBodies = container.parent.children.filter(
-    child => child.properties.isRigidBody && !child.properties.isAnchor
+    child => !child.properties.isAnchor
   );
 
   const overlappingContainers = getOverlappingContainers(container, rigidBodies);

src/Components/Editor/Behaviors/Behaviors.ts

@@ -2,6 +2,7 @@ import { IContainerModel } from '../../../Interfaces/IContainerModel';
 import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
 import { APPLY_BEHAVIORS_ON_CHILDREN } from '../../../utils/default';
 import { ApplyAnchor } from './AnchorBehaviors';
+import { Flex } from './FlexBehaviors';
 import { ApplyRigidBody } from './RigidBodyBehaviors';
 import { ApplySymbol } from './SymbolBehaviors';
 
@@ -16,10 +17,12 @@ export function ApplyBehaviors(container: IContainerModel, symbols: Map<string,
     ApplyAnchor(container);
   }
 
-  if (container.properties.isRigidBody) {
-    ApplyRigidBody(container);
+  if (container.properties.isFlex) {
+    Flex(container);
   }
 
+  ApplyRigidBody(container);
+
   const symbol = symbols.get(container.properties.linkedSymbolId);
   if (container.properties.linkedSymbolId !== '' && symbol !== undefined) {
     ApplySymbol(container, symbol);

src/Components/Editor/Behaviors/FlexBehaviors.ts

@@ -0,0 +1,144 @@
+import Swal from 'sweetalert2';
+import { IContainerModel } from '../../../Interfaces/IContainerModel';
+import { reversePairwise } from '../../../utils/itertools';
+import { Simplex } from '../../../utils/simplex';
+import { ApplyWidthMargin, ApplyXMargin } from '../../../utils/svg';
+
+/**
+ * Try to push the siblings
+ * @param container
+ * @returns
+ */
+export function PushContainers(container: IContainerModel): IContainerModel {
+  if (container.parent === null) {
+    return container;
+  }
+
+  if (container.parent.children.length <= 1) {
+    return container;
+  }
+
+  const prevIndex = container.parent.children.length - 2;
+  const prev: IContainerModel = container.parent.children[prevIndex];
+  const isOverlapping = prev.properties.x + prev.properties.width > container.properties.x;
+  if (!isOverlapping) {
+    return container;
+  }
+
+  // find hole
+  let lastContainer: IContainerModel | null = null;
+  let space: number = 0;
+
+  while (space.toFixed(2) < container.properties.width.toFixed(2)) {
+    // FIXME: possible infinite loop due to floating point
+    // FIXME: A fix was applied using toFixed(2).
+    // FIXME: A coverture check must be done to ensure that all scenarios are covered
+
+    const it = reversePairwise<IContainerModel>(container.parent.children.filter(child => child !== container));
+
+    for (const { cur, next } of it) {
+      const hasSpaceBetween = next.properties.x + next.properties.width < cur.properties.x;
+      if (hasSpaceBetween) {
+        lastContainer = cur;
+        space = cur.properties.x - (next.properties.x + next.properties.width);
+        break;
+      }
+    }
+
+    if (lastContainer === null) {
+      // no space between
+      break;
+    }
+
+    const indexLastContainer = container.parent.children.indexOf(lastContainer);
+    for (let i = indexLastContainer; i <= container.parent.children.length - 2; i++) {
+      const sibling = container.parent.children[i];
+      sibling.properties.x -= space;
+    }
+  }
+
+  const hasNoSpaceBetween = lastContainer === null;
+  if (hasNoSpaceBetween) {
+    // test gap between the left of the parent and the first container
+    space = container.parent.children[0].properties.x;
+    if (space > 0) {
+      for (let i = 0; i <= container.parent.children.length - 2; i++) {
+        const sibling = container.parent.children[i];
+        sibling.properties.x -= space;
+      }
+      return container;
+    }
+  }
+
+  Flex(container);
+  return container;
+}
+
+/**
+ * Flex the container and its siblings (mutate)
+ * @param container Container to flex
+ * @returns Flexed container
+ */
+export function Flex(container: IContainerModel): void {
+  if (container.parent === null || container.parent === undefined) {
+    return;
+  }
+  const flexibleContainers = container.parent.children
+    .filter(sibling => sibling.properties.isFlex);
+
+  const minWidths = flexibleContainers
+    .map(sibling => sibling.properties.minWidth);
+
+  const fixedWidth = container.parent.children
+    .filter(sibling => !sibling.properties.isFlex)
+    .map(sibling => sibling.properties.width)
+    .reduce((partialSum, a) => partialSum + a, 0);
+
+  const requiredMaxWidth = container.parent.properties.width - fixedWidth;
+
+  const minimumPossibleWidth = minWidths.reduce((partialSum, a) => partialSum + a, 0);
+  if (minimumPossibleWidth > requiredMaxWidth) {
+    Swal.fire({
+      icon: 'error',
+      title: 'Cannot fit!',
+      text: 'Cannot fit at all even when squeezing all flex containers to the minimum.'
+    });
+    return;
+  }
+
+  const maxMinWidths = Math.max(...minWidths);
+  if (maxMinWidths * minWidths.length < requiredMaxWidth) {
+    const wantedWidth = requiredMaxWidth / minWidths.length;
+    // it fits, flex with maxMinWidths and fixed width
+    let right = 0;
+    for (const sibling of container.parent.children) {
+      if (!sibling.properties.isFlex) {
+        sibling.properties.x = right;
+        right += sibling.properties.width;
+        continue;
+      }
+      sibling.properties.x = ApplyXMargin(right, sibling.properties.margin.left);
+      sibling.properties.width = ApplyWidthMargin(wantedWidth, sibling.properties.margin.left, sibling.properties.margin.right);
+      right += wantedWidth;
+    }
+
+    return;
+  }
+
+  // does not fit
+
+  /// SIMPLEX ///
+  const solutions: number[] = Simplex(minWidths, requiredMaxWidth);
+
+  // apply the solutions
+  for (let i = 0; i < flexibleContainers.length; i++) {
+    flexibleContainers[i].properties.width = ApplyWidthMargin(solutions[i], flexibleContainers[i].properties.margin.left, flexibleContainers[i].properties.margin.right)
+  }
+
+  // move the containers
+  let right = 0;
+  for (const sibling of container.parent.children) {
+    sibling.properties.x = ApplyXMargin(right, sibling.properties.margin.left);
+    right += sibling.properties.width;
+  }
+}

src/Components/Editor/Behaviors/RigidBodyBehaviors.ts

@@ -9,6 +9,7 @@
 import Swal from 'sweetalert2';
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
 import { ISizePointer } from '../../../Interfaces/ISizePointer';
+import { PushContainers } from './FlexBehaviors';
 
 /**
  * "Transform the container into a rigid body"
@@ -23,6 +24,7 @@ export function ApplyRigidBody(
   container: IContainerModel
 ): IContainerModel {
   container = constraintBodyInsideParent(container);
+  container = PushContainers(container);
   container = constraintBodyInsideUnallocatedWidth(container);
   return container;
 }
@@ -183,7 +185,6 @@ export function constraintBodyInsideUnallocatedWidth(
         showConfirmButton: false,
         timer: 5000
       });
-      container.properties.isRigidBody = false;
       return container;
     }
 
@@ -238,8 +239,7 @@ function getAvailableWidths(
 
     // Ignore the exception
     // And we will also only uses containers that also are rigid or are anchors
-    if (child === exception ||
-      (!child.properties.isRigidBody && !child.properties.isAnchor)) {
+    if (child === exception) {
       continue;
     }
     const childX = child.properties.x;

src/Components/Editor/Behaviors/SymbolBehaviors.ts

@@ -1,9 +1,12 @@
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
 import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
+import { applyParentTransform } from '../../../utils/itertools';
 import { restoreX, transformX } from '../../../utils/svg';
 
 export function ApplySymbol(container: IContainerModel, symbol: ISymbolModel): IContainerModel {
   container.properties.x = transformX(symbol.x, symbol.width, symbol.config.XPositionReference);
   container.properties.x = restoreX(container.properties.x, container.properties.width, container.properties.XPositionReference);
+  const [x] = applyParentTransform(container.parent, container.properties.x, 0);
+  container.properties.x = x;
   return container;
 }

src/Components/Editor/Editor.tsx

@@ -4,7 +4,7 @@ import { IConfiguration } from '../../Interfaces/IConfiguration';
 import { SVG } from '../SVG/SVG';
 import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { UI } from '../UI/UI';
-import { SelectContainer, DeleteContainer, AddContainerToSelectedContainer, AddContainer, OnPropertyChange } from './Actions/ContainerOperations';
+import { SelectContainer, DeleteContainer, AddContainerToSelectedContainer, OnPropertyChange } from './Actions/ContainerOperations';
 import { SaveEditorAsJSON, SaveEditorAsSVG } from './Actions/Save';
 import { onKeyDown } from './Actions/Shortcuts';
 import EditorEvents from '../../Events/EditorEvents';
@@ -60,7 +60,9 @@ function useWindowEvents(
   history: IHistoryState[],
   historyCurrentStep: number,
   configuration: IConfiguration,
-  editorRef: React.RefObject<HTMLDivElement>
+  editorRef: React.RefObject<HTMLDivElement>,
+  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
+  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
 ): void {
   useEffect(() => {
     const events = EditorEvents;
@@ -72,7 +74,12 @@ function useWindowEvents(
 
     const funcs = new Map<string, () => void>();
     for (const event of events) {
-      const func = (): void => event.func(editorState);
+      const func = (eventInitDict?: CustomEventInit): void => event.func(
+        editorState,
+        setHistory,
+        setHistoryCurrentStep,
+        eventInitDict
+      );
       editorRef.current?.addEventListener(event.name, func);
       funcs.set(event.name, func);
     }
@@ -94,7 +101,14 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
   const editorRef = useRef<HTMLDivElement>(null);
 
   useShortcuts(history, historyCurrentStep, setHistoryCurrentStep);
-  useWindowEvents(history, historyCurrentStep, props.configuration, editorRef);
+  useWindowEvents(
+    history,
+    historyCurrentStep,
+    props.configuration,
+    editorRef,
+    setHistory,
+    setHistoryCurrentStep
+  );
 
   const configuration = props.configuration;
   const current = getCurrentHistoryState(history, historyCurrentStep);
@@ -122,15 +136,15 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
           setHistory,
           setHistoryCurrentStep
         )}
-        OnPropertyChange={(key, value, isStyle) => OnPropertyChange(
-          key, value, isStyle,
+        OnPropertyChange={(key, value, type) => OnPropertyChange(
+          key, value, type,
           selected,
           history,
           historyCurrentStep,
           setHistory,
           setHistoryCurrentStep
         )}
-        AddContainerToSelectedContainer={(type) => AddContainerToSelectedContainer(
+        AddContainer={(type) => AddContainerToSelectedContainer(
           type,
           selected,
           configuration,
@@ -139,16 +153,6 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
           setHistory,
           setHistoryCurrentStep
         )}
-        AddContainer={(index, type, parentId) => AddContainer(
-          index,
-          type,
-          parentId,
-          configuration,
-          history,
-          historyCurrentStep,
-          setHistory,
-          setHistoryCurrentStep
-        )}
         AddSymbol={(type) => AddSymbol(
           type,
           configuration,