Fix symbol behavior not imposing its position when anchor is enabled

src/Components/Editor/Behaviors/Behaviors.ts

@@ -14,6 +14,11 @@ import { ApplySymbol } from './SymbolBehaviors';
  */
 export function ApplyBehaviors(container: IContainerModel, symbols: Map<string, ISymbolModel>): IContainerModel {
   try {
+    const symbol = symbols.get(container.properties.linkedSymbolId);
+    if (container.properties.linkedSymbolId !== '' && symbol !== undefined) {
+      ApplySymbol(container, symbol);
+    }
+
     if (container.properties.isAnchor) {
       ApplyAnchor(container);
     }
@@ -22,11 +27,6 @@ export function ApplyBehaviors(container: IContainerModel, symbols: Map<string,
 
     ApplyRigidBody(container);
 
-    const symbol = symbols.get(container.properties.linkedSymbolId);
-    if (container.properties.linkedSymbolId !== '' && symbol !== undefined) {
-      ApplySymbol(container, symbol);
-    }
-
     if (APPLY_BEHAVIORS_ON_CHILDREN) {
       // Apply DFS by recursion
       for (const child of container.children) {

src/Components/Editor/Behaviors/FlexBehaviors.ts

@@ -25,23 +25,30 @@ export function Flex(container: IContainerModel): void {
   }
 }
 
+/**
+ * Apply flex to the group
+ * @param flexibleGroup Group that contains a list of flexible containers
+ * @returns
+ */
 function FlexGroup(flexibleGroup: IFlexibleGroup): void {
   const children = flexibleGroup.group;
-  const flexibleContainers = children
+  const {
-    .filter(sibling => sibling.properties.isFlex);
+    flexibleContainers,
+    nonFlexibleContainers
+  } = SeparateFlexibleContainers(children);
 
   const minWidths = flexibleContainers
     .map(sibling => sibling.properties.minWidth);
 
-  const fixedWidth = children
+  const fixedWidth = nonFlexibleContainers
-    .filter(sibling => !sibling.properties.isFlex)
     .map(sibling => sibling.properties.width)
-    .reduce((partialSum, a) => partialSum + a, 0);
+    .reduce((widthSum, a) => widthSum + a, 0);
 
   const requiredMaxWidth = flexibleGroup.size - fixedWidth;
+  const minimumPossibleWidth = minWidths.reduce((widthSum, a) => widthSum + a, 0); // sum(minWidths)
 
-  const minimumPossibleWidth = minWidths.reduce((partialSum, a) => partialSum + a, 0);
+  const checkSumMinWidthsIsFitting = minimumPossibleWidth > requiredMaxWidth;
-  if (minimumPossibleWidth > requiredMaxWidth) {
+  if (checkSumMinWidthsIsFitting) {
     // Swal.fire({
     //   icon: 'error',
     //   title: 'Cannot fit!',
@@ -87,6 +94,30 @@ function FlexGroup(flexibleGroup: IFlexibleGroup): void {
   }
 }
 
+function SeparateFlexibleContainers(
+  containers: IContainerModel[]
+): { flexibleContainers: IContainerModel[], nonFlexibleContainers: IContainerModel[] } {
+  const flexibleContainers: IContainerModel[] = [];
+  const nonFlexibleContainers: IContainerModel[] = [];
+  containers.forEach((container) => {
+    if (container.properties.isFlex) {
+      flexibleContainers.push(container);
+      return;
+    }
+
+    nonFlexibleContainers.push(container);
+  });
+  return {
+    flexibleContainers,
+    nonFlexibleContainers
+  };
+}
+
+/**
+ * Returns a list of groups of flexible containers
+ * @param parent Parent in which the flexible children will be set in groups
+ * @returns a list of groups of flexible containers
+ */
 export function GetFlexibleGroups(parent: IContainerModel): IFlexibleGroup[] {
   const flexibleGroups: IFlexibleGroup[] = [];
   let group: IContainerModel[] = [];

vite.config.ts

@@ -3,5 +3,7 @@ import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
+  plugins: [
+    react()
+  ]
 });