@m4l/components 0.1.75 → 0.1.77

package/components/areas/contexts/AreasContext/{index.d98b89fc.js → index.c8147e8e.js}

@@ -5,22 +5,23 @@ import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
 import { useHostTools, useModuleDictionary, useNetwork, useModuleSkeleton, EmitEvents } from "@m4l/core";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { u as useAreasViewerUtilityClasses, a as areasViewerClasses } from "../../components/AreasViewer/index.621c0de4.js";
-import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.158621e0.js";
+import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/index.9c2aaaeb.js";
+import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.cc4cbf56.js";
 import { c as createDynamicMFStore } from "../DynamicMFParmsContext/index.1607c78e.js";
-import { g as getAreasDictionary } from "../../dictionary.e72db809.js";
-import { debounce, cloneDeep } from "lodash";
+import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.afb7e3d9.js";
+import "clsx";
+import "../../../GridLayout/index.4ba3767a.js";
 import { jsx } from "react/jsx-runtime";
+import { a as addLayoutItemToBreakPointIfNoExists, b as addLayoutItemToBreakPoints } from "../../../GridLayout/Responsive/index.a12a8cec.js";
+import { debounce, cloneDeep } from "lodash";
 const ROW_HEIGTH_GRIDLAYOUT = 20;
-const CONTAINER_PADDING_GRIDLAYOUT = 3;
+const PADDING_GRIDLAYOUT = 3;
 const MARGIN_GRIDLAYOUT = 5;
 const DEBOUCED_SAVE_TIME = 500;
-const THROTTLE_RESIZE_TIME = 300;
 const COOKIE_BREAKPOINT_LAYOUTS = "layoutPros";
 const COOKIE_WINDOWS = "windows";
-const BREAKPOINT_SIZES = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 };
-const NORMALIZED_COLS = { lg: 24, md: 20, sm: 12, xs: 8, xxs: 1 };
-const MAXIMIZED_COLS = { lg: 24, md: 20, sm: 12, xs: 8, xxs: 1 };
+const BREAKPOINT_SIZES = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 1 };
+const NORMALIZED_COLS = { lg: 64, md: 48, sm: 32, xs: 24, xxs: 1 };
 const DEFAULT_WINDOW = {
   status: "init",
   moduleActions: [],
@@ -33,12 +34,9 @@ const DEFAULT_WINDOW = {
 const DEFAULT_AREA = {
   status: "init",
   zPopUpIndex: 0,
-  breakPointsLayouts: {},
-  beforeMaximizebreakpointsLayouts: {},
-  windowsLayouts: [],
-  windowsPopUps: [],
-  hashWindowsPopups: {},
-  hashWindowsLayouts: {},
+  layouts: {},
+  colapsedItems: {},
+  hashLayoutItems: [],
   currentLayoutId: "",
   currentPopUpId: "",
   breakpoints: BREAKPOINT_SIZES,
@@ -46,15 +44,14 @@ const DEFAULT_AREA = {
 };
 const addArea = (state) => {
   const areaId = `area_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
-  const labelNewArea = state.getLabel(getAreasDictionary("label_new_area"));
+  const labelNewArea = state.getLabel(getAreasDictionary(DICCTIONARY.label_new_area));
   let isFree;
   let name = `${labelNewArea} 1`;
   for (let indexNames = 1; indexNames <= state.areas.length + 1; indexNames++) {
     name = `${labelNewArea} ${indexNames + state.areas.length}`;
     isFree = true;
     for (let index = 0; index < state.areas.length; index++) {
-      const area = state.areas[index];
-      if (area.name === name) {
+      if (state.hashAreas[state.areas[index]].name === name) {
         isFree = false;
         break;
       }
@@ -67,10 +64,9 @@ const addArea = (state) => {
     id: areaId,
     name,
     loadWindows: false,
-    viewMode: state.ownerState.isMobile ? "single" : "multiple",
     ...DEFAULT_AREA
   };
-  state.areas.push(newArea);
+  state.areas.push(areaId);
   state.hashAreas[areaId] = newArea;
   if (state.loadAreasFromNetwork) {
     state.networkOperation({
@@ -100,23 +96,8 @@ const getParmsFromValue = (key, data) => {
   }
   return void 0;
 };
-function setAddBreakPoints(state, newLayout) {
-  const layoutsBreakPoints = state.breakPointsLayouts;
-  const beforeMaximizebreakpointsLayouts = state.beforeMaximizebreakpointsLayouts;
-  for (const key in layoutsBreakPoints) {
-    const layoutBreakpoint = layoutsBreakPoints[key];
-    layoutBreakpoint.unshift(newLayout);
-  }
-  if (state.viewMode === "single") {
-    for (const key in beforeMaximizebreakpointsLayouts) {
-      const beforeLayoutBreakpoint = beforeMaximizebreakpointsLayouts[key];
-      beforeLayoutBreakpoint.push(newLayout);
-    }
-  }
-  return layoutsBreakPoints;
-}
 function deleteLayoutFromBreakPoints(state, layoutId) {
-  const layoutsBreakPoints = state.breakPointsLayouts;
+  const layoutsBreakPoints = state.layouts;
   for (const key in layoutsBreakPoints) {
     const layoutBreakpoint = layoutsBreakPoints[key];
     for (let index = 0; index < layoutBreakpoint.length; index++) {
@@ -128,61 +109,32 @@ function deleteLayoutFromBreakPoints(state, layoutId) {
     }
   }
 }
-function setBreakPointsMaximized(state, layoutId) {
-  const layoutsBreakPoints = state.breakPointsLayouts;
-  const container = document.getElementsByClassName(
-    `${areasViewerClasses.areaGridLayout}-${state.id}`
-  )[0];
-  console.log("setBreakPointsMaximized", container);
-  if (container) {
-    const clientHeight = container.clientHeight;
-    for (const key in layoutsBreakPoints) {
-      const layoutBreakpoint = layoutsBreakPoints[key];
-      const cols = key in MAXIMIZED_COLS ? MAXIMIZED_COLS[key] : 1;
-      const heigthUnits = (clientHeight + MARGIN_GRIDLAYOUT - 2 * CONTAINER_PADDING_GRIDLAYOUT) / (ROW_HEIGTH_GRIDLAYOUT + MARGIN_GRIDLAYOUT);
-      for (let index = 0; index < layoutBreakpoint.length; index++) {
-        const l = layoutBreakpoint[index];
-        if (l.i === layoutId) {
-          l.x = 0;
-          l.y = 0;
-          l.h = heigthUnits;
-          l.w = cols;
-          l.minW = 0;
-          l.maxW = cols;
-          l.minH = 0;
-          l.maxH = heigthUnits;
-          l.isResizable = false;
-          l.isDraggable = false;
-        } else {
-          l.x = 0;
-          l.y = 1;
-          l.h = 0;
-          l.w = 0;
-          l.minW = 0;
-          l.maxW = 0;
-          l.minH = 0;
-          l.maxH = 0;
-        }
-        l.isResizable = false;
-        l.isDraggable = false;
-      }
-    }
-  }
-  return layoutsBreakPoints;
-}
 function getDataFromResponse(data, state, areaId) {
-  const newBreakPointsLayouts = getParmsFromValue(COOKIE_BREAKPOINT_LAYOUTS, data);
+  let newBreakPointsLayouts = getParmsFromValue(COOKIE_BREAKPOINT_LAYOUTS, data);
   const windows = getParmsFromValue(COOKIE_WINDOWS, data);
-  const newWindowsLayouts = [];
-  const newHashWindowLayouts = {};
+  const newWindowsLayoutsIds = [];
+  const newHashLayoutItems = [];
+  if (!newBreakPointsLayouts) {
+    newBreakPointsLayouts = {};
+  }
+  console.log(
+    "getDataFromResponse before start",
+    windows,
+    newBreakPointsLayouts,
+    BREAKPOINT_SIZES
+  );
+  for (const breakPoint in BREAKPOINT_SIZES) {
+    if (!newBreakPointsLayouts[breakPoint]) {
+      newBreakPointsLayouts[breakPoint] = [];
+    }
+  }
   if (windows) {
     for (const key in windows) {
       const element = windows[key];
-      if (element && element["layoutProps"] && element["mfProps"] && element["emergeType"] === "layout" && element["winType"] === "microfrontend") {
-        element["layoutProps"].i = key;
-        newWindowsLayouts.push(element["layoutProps"]);
-        const onClose = state.areaActions.closeWindowLayout;
-        newHashWindowLayouts[key] = {
+      if (element && element["mfProps"] && element["emergeType"] === "layout" && element["winType"] === "microfrontend") {
+        newWindowsLayoutsIds.push(key);
+        const onClose = state.areaActions.closeLayout;
+        state.hashWindows[key] = {
           ...DEFAULT_WINDOW,
           ...element,
           windowId: key,
@@ -194,14 +146,42 @@ function getDataFromResponse(data, state, areaId) {
           }),
           onClose: () => onClose(areaId, key)
         };
-        state.hashWindows[key] = newHashWindowLayouts[key];
+        newHashLayoutItems.push(key);
+        for (const breakPoint in BREAKPOINT_SIZES) {
+          addLayoutItemToBreakPointIfNoExists(
+            newBreakPointsLayouts,
+            breakPoint,
+            { i: element.windowId, x: 0, y: 0, w: 5, h: 5 },
+            NORMALIZED_COLS,
+            [MARGIN_GRIDLAYOUT, MARGIN_GRIDLAYOUT],
+            [PADDING_GRIDLAYOUT, PADDING_GRIDLAYOUT],
+            ROW_HEIGTH_GRIDLAYOUT
+          );
+          console.log(
+            "addLayoutItemToBreakPointIfNoExists",
+            element,
+            breakPoint,
+            key,
+            newBreakPointsLayouts[breakPoint]
+          );
+        }
       }
     }
+    for (const breakPoint in BREAKPOINT_SIZES) {
+      newBreakPointsLayouts[breakPoint] = newBreakPointsLayouts[breakPoint].filter((li) => {
+        return newWindowsLayoutsIds.indexOf(li.i) > -1;
+      });
+    }
+  } else {
+    for (const breakPoint in BREAKPOINT_SIZES) {
+      newBreakPointsLayouts[breakPoint] = [];
+    }
   }
+  console.log("newBreakPointsLayouts", newBreakPointsLayouts, windows);
   return {
     newBreakPointsLayouts,
-    newWindowsLayouts,
-    newHashWindowLayouts
+    newWindowsLayoutsIds,
+    newHashLayoutItems
   };
 }
 function getCookiesContainer(data, containerId) {
@@ -278,11 +258,10 @@ const createAreasStore = (initProps) => {
                           const newArea = {
                             ...DEFAULT_AREA,
                             ...response.data[i],
-                            loadWindows: true,
-                            viewMode: otherState.ownerState.isMobile ? "single" : "multiple"
+                            loadWindows: true
                           };
-                          otherState.areas.push(newArea);
                           otherState.hashAreas[newArea.id] = newArea;
+                          otherState.areas.push(newArea.id);
                         }
                       } else {
                         addArea(otherState);
@@ -294,7 +273,7 @@ const createAreasStore = (initProps) => {
                       updateOwnerStateClasses(state2);
                     });
                     if (get().areas.length > 0) {
-                      get().areasActions.selectArea(get().areas[0].id);
+                      get().areasActions.selectArea(get().areas[0]);
                     }
                   });
                 });
@@ -303,9 +282,8 @@ const createAreasStore = (initProps) => {
           },
           editArea: (idArea, newName) => {
             set((state) => {
-              const index = state.areas.findIndex((element) => element.id === idArea);
-              if (index > -1 && state.areas[index].name !== newName) {
-                state.areas[index].name = newName;
+              if (state.hashAreas[idArea]) {
+                state.hashAreas[idArea].name = newName;
                 state.networkOperation({
                   method: "PATCH",
                   endPoint: `areas/${idArea}`,
@@ -327,7 +305,7 @@ const createAreasStore = (initProps) => {
           deleteArea: (areaId) => {
             let selectNewAreaId = "";
             set((state) => {
-              const removeIndex = state.areas.findIndex((area) => area.id === areaId);
+              const removeIndex = state.areas.indexOf(areaId);
               if (removeIndex > -1) {
                 for (const key in state.hashWindows) {
                   if (state.hashWindows[key].areaId === areaId) {
@@ -339,7 +317,7 @@ const createAreasStore = (initProps) => {
               }
               if (state.currentAreaId === areaId) {
                 if (state.areas.length > 0) {
-                  selectNewAreaId = state.areas[0].id;
+                  selectNewAreaId = state.areas[0];
                 } else {
                   state.currentAreaId = "";
                 }
@@ -376,9 +354,8 @@ const createAreasStore = (initProps) => {
                 });
               }
             }
-            if (get().hashAreas[areaId].singleId !== void 0) {
-              get().areaActions.resizeMaximixedLayout(areaId);
-            }
+            if (get().hashAreas[areaId].maximizedId !== void 0)
+              ;
           },
           setHandlerGetLabel: (newHandler) => {
             set((state) => {
@@ -395,14 +372,8 @@ const createAreasStore = (initProps) => {
         areaActions: {
           addWindow: (newWindowProps) => {
             const windowId = `${get().currentAreaId}_window_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
-            if (newWindowProps.emergeType === "layout") {
-              get().areaActions.addWindowLayout(
-                get().currentAreaId,
-                windowId,
-                newWindowProps
-              );
-            } else if (newWindowProps.emergeType === "popup") {
-              get().areaActions.addWindowPopUp(
+            if (newWindowProps.emergeType === "layout" || newWindowProps.emergeType === "popup") {
+              get().areaActions.addLayout(
                 get().currentAreaId,
                 windowId,
                 newWindowProps
@@ -415,178 +386,93 @@ const createAreasStore = (initProps) => {
               );
             }
           },
-          closeWindowModal: (removeModalId) => {
-            set((state) => {
-              const removeIndex = state.windowsModals.findIndex(
-                (w) => w === removeModalId
-              );
-              if (removeIndex > -1) {
-                state.windowsModals.splice(removeIndex, 1);
-              }
-              delete state.hashWindows[removeModalId];
-              delete state.hashWindowsModals[removeModalId];
-            });
-          },
-          addWindowModal: (areaId, windowId, newWindowModalProps) => {
-            set((state) => {
-              const dynamicMFStore = createDynamicMFStore({
-                dynamicMFParameters: newWindowModalProps.dynamicParams,
-                windowId
-              });
-              state.windowsModals.push(windowId);
-              state.hashWindowsModals[windowId] = {
-                ...newWindowModalProps,
-                areaId,
-                windowId,
-                ...DEFAULT_WINDOW,
-                onClose: get().areaActions.closeWindowModal,
-                dynamicMFStore
-              };
-              state.hashWindows[windowId] = state.hashWindowsModals[windowId];
-            });
-          },
-          closeWindowPopUp: (areaId, removePopUpId) => {
-            set((state) => {
-              const area = state.hashAreas[areaId];
-              if (!area) {
-                return;
-              }
-              const removeIndex = area.windowsPopUps.findIndex(
-                (wpId) => wpId === removePopUpId
-              );
-              if (removeIndex > -1) {
-                area.windowsPopUps.splice(removeIndex, 1);
-              }
-              delete area.hashWindowsPopups[removePopUpId];
-              delete state.hashWindows[removePopUpId];
-            });
-          },
-          selectWindowPopUp: (areaId, popUpId) => {
-            set((state) => {
-              state.hashAreas[areaId].zPopUpIndex++;
-              state.hashAreas[areaId].currentPopUpId = popUpId;
-              state.hashAreas[areaId].zPopUpIndex++;
-              state.hashAreas[areaId].currentPopUpId = popUpId;
-              state.hashAreas[areaId].hashWindowsPopups[popUpId].zIndex = state.hashAreas[areaId].zPopUpIndex;
-              if (state.hashAreas[areaId].hashWindowsPopups[popUpId].parentLayoutId && state.hashAreas[areaId].hashWindowsPopups[popUpId].parentLayoutId !== "") {
-                state.hashAreas[areaId].currentLayoutId = state.hashAreas[areaId].hashWindowsPopups[popUpId].parentLayoutId;
-              } else {
-                state.hashAreas[areaId].currentLayoutId = "";
-              }
-            });
-            setTimeout(() => {
-              const container = document.getElementsByClassName(
-                `${areasViewerClasses.areaGridLayoutPanelContainer}-${areaId}`
-              )[0];
-              const element = document.getElementsByClassName(
-                `${areasViewerClasses.windowPopupRoot}-${popUpId}`
-              )[0];
-              if (element && container) {
-                const { top, left } = element.getBoundingClientRect();
-                const { top: containerTop, left: containerLeft } = container.getBoundingClientRect();
-                container.scrollTop = container.scrollTop + top - containerTop;
-                container.scrollLeft = container.scrollLeft + left - containerLeft;
-              }
-            }, 100);
-          },
-          addWindowPopUp: (areaId, windowId, newWindowPopupProps) => {
-            let popUpId = windowId;
+          addLayout: (areaId, windowId, newWindowProps) => {
+            let previousId = windowId;
+            const freeMove = newWindowProps.emergeType === "popup" ? true : false;
+            const newLayoutItem = {
+              ...newWindowProps.layoutProps,
+              i: windowId,
+              isDraggable: true,
+              isResizable: true,
+              freeMove
+            };
             set((state) => {
               const area = state.hashAreas[areaId];
               if (!area) {
                 return;
               }
-              if (newWindowPopupProps.replaceMeId) {
-                for (const key in area.hashWindowsPopups) {
-                  const WindoPopUp = area.hashWindowsPopups[key];
-                  if (WindoPopUp.replaceMeId === newWindowPopupProps.replaceMeId) {
-                    popUpId = key;
-                    area.hashWindowsPopups[key].dynamicMFStore.getState().actions.changeData(newWindowPopupProps.dynamicParams);
+              if (newWindowProps.replaceMeId) {
+                for (let index = 0; index < area.hashLayoutItems.length; index++) {
+                  const key = area.hashLayoutItems[index];
+                  const WindoPopUp = state.hashWindows[key];
+                  if (WindoPopUp.replaceMeId === newWindowProps.replaceMeId) {
+                    previousId = key;
+                    WindoPopUp.dynamicMFStore.getState().actions.changeData(newWindowProps.dynamicParams);
                     break;
                   }
                 }
               }
-              if (popUpId === windowId) {
+              if (previousId === windowId) {
                 const dynamicMFStore = createDynamicMFStore({
-                  dynamicMFParameters: newWindowPopupProps.dynamicParams,
+                  dynamicMFParameters: newWindowProps.dynamicParams,
                   windowId
                 });
-                area.windowsPopUps.push(windowId);
-                area.hashWindowsPopups[windowId] = {
-                  ...newWindowPopupProps,
-                  emergeType: "popup",
-                  windowId,
+                state.hashWindows[windowId] = {
+                  ...newWindowProps,
                   areaId,
-                  onClose: (removePopUpId) => get().areaActions.closeWindowPopUp(areaId, removePopUpId),
-                  zIndex: area.zPopUpIndex,
+                  windowId,
+                  onClose: (removeLayoutId) => {
+                    get().areaActions.closeLayout(areaId, removeLayoutId);
+                  },
                   ...DEFAULT_WINDOW,
                   dynamicMFStore
                 };
-                state.hashWindows[windowId] = area.hashWindowsPopups[windowId];
-                area.currentPopUpId = windowId;
+                area.hashLayoutItems.push(windowId);
+                if (newWindowProps.emergeType === "layout") {
+                  area.currentLayoutId = windowId;
+                  if (area.maximizedId) {
+                    area.maximizedId = windowId;
+                  }
+                } else {
+                  area.currentPopUpId = windowId;
+                }
+                area.layouts = addLayoutItemToBreakPoints(
+                  area.layouts,
+                  newLayoutItem,
+                  NORMALIZED_COLS,
+                  [MARGIN_GRIDLAYOUT, MARGIN_GRIDLAYOUT],
+                  [PADDING_GRIDLAYOUT, PADDING_GRIDLAYOUT],
+                  ROW_HEIGTH_GRIDLAYOUT,
+                  area.containerHeight
+                );
               }
             });
-            get().areaActions.selectWindowPopUp(areaId, popUpId);
+            get().areaActions.saveLayouts(areaId);
           },
-          closeWindowLayout: (areaId, removeLayoutId) => {
+          closeLayout: (areaId, removeLayoutId) => {
             set((state) => {
               const area = state.hashAreas[areaId];
               if (!area) {
                 return;
               }
-              const removeIndex = area.windowsLayouts.findIndex(
-                (gl) => gl.i === removeLayoutId
-              );
+              const removeIndex = area.hashLayoutItems.indexOf(removeLayoutId);
               if (removeIndex > -1) {
-                area.windowsLayouts.splice(removeIndex, 1);
+                area.hashLayoutItems.splice(removeIndex, 1);
               }
               deleteLayoutFromBreakPoints(area, removeLayoutId);
               delete state.hashWindows[removeLayoutId];
-              delete area.hashWindowsLayouts[removeLayoutId];
             });
             get().areaActions.saveLayouts(areaId);
-            if (get().hashAreas[areaId].singleId === removeLayoutId) {
+            if (get().hashAreas[areaId].maximizedId === removeLayoutId) {
               get().areaActions.maximizeLayout(areaId);
             }
-          },
-          addWindowLayout: (areaId, windowId, newWindow) => {
-            const newLayout = {
-              ...newWindow.layoutProps,
-              i: windowId,
-              isDraggable: true,
-              isResizable: true,
-              winType: newWindow.winType
-            };
-            set((state) => {
-              const area = state.hashAreas[areaId];
-              if (!area) {
-                return;
+            for (let index = 0; index < get().hashAreas[areaId].hashLayoutItems.length; index++) {
+              const layoutItemId = get().hashAreas[areaId].hashLayoutItems[index];
+              const layoutItem = get().hashWindows[layoutItemId];
+              if (layoutItem.parentLayoutId === removeLayoutId) {
+                get().areaActions.closeLayout(areaId, layoutItem.windowId);
               }
-              const dynamicMFStore = createDynamicMFStore({
-                dynamicMFParameters: newWindow.dynamicParams,
-                windowId
-              });
-              area.windowsLayouts.push(newLayout);
-              area.hashWindowsLayouts[windowId] = {
-                ...newWindow,
-                areaId,
-                windowId,
-                emergeType: "layout",
-                onClose: (removeLayoutId) => {
-                  get().areaActions.closeWindowLayout(areaId, removeLayoutId);
-                },
-                ...DEFAULT_WINDOW,
-                dynamicMFStore
-              };
-              state.hashWindows[windowId] = area.hashWindowsLayouts[windowId];
-              setAddBreakPoints(area, newLayout);
-            });
-            get().areaActions.selectWindowLayout(areaId, windowId);
-            if (get().hashAreas[areaId].viewMode === "single" || newWindow?.openType === "maximized") {
-              get().areaActions.maximizeLayout(areaId, windowId);
             }
-            get().areaActions.saveLayouts(areaId);
-            get().areaActions.bouncedSaveBreakpointsLayouts(areaId);
           },
           saveLayouts: (areaId) => {
             let nrKeys = 0;
@@ -594,18 +480,33 @@ const createAreasStore = (initProps) => {
             if (!area) {
               return;
             }
+            console.log("saveLayouts before", areaId, area.hashLayoutItems);
             const saveObjetc = {};
-            for (const key in area.hashWindowsLayouts) {
-              const element = area.hashWindowsLayouts[key];
-              if (element.winType === "microfrontend") {
-                const newElement = { ...element };
-                delete newElement.onClose;
-                delete newElement.devCookies;
+            for (let index = 0; index < area.hashLayoutItems.length; index++) {
+              const key = area.hashLayoutItems[index];
+              console.log("saveLayouts", areaId, key, get().hashWindows[key]);
+              if (get().hashWindows[key] && get().hashWindows[key].winType === "microfrontend") {
+                const element = get().hashWindows[key];
+                const hasPropsToSave = {
+                  winType: true,
+                  emergeType: true,
+                  title: true,
+                  url_icon: true,
+                  windowOptions: true,
+                  moduleId: true,
+                  windowId: true,
+                  mfProps: true
+                };
+                const newElement = {};
+                for (const keyToSave in hasPropsToSave) {
+                  newElement[keyToSave] = element[keyToSave];
+                }
                 saveObjetc[key] = newElement;
                 nrKeys++;
               }
             }
             if (nrKeys > 0) {
+              console.log("SaveLayouyts", saveObjetc);
               get().networkOperation({
                 method: "PUT",
                 endPoint: `cookies/${area.id}/${COOKIE_WINDOWS}`,
@@ -625,10 +526,40 @@ const createAreasStore = (initProps) => {
               });
             }
           },
+          closeWindowModal: (removeModalId) => {
+            set((state) => {
+              const removeIndex = state.windowsModals.findIndex(
+                (w) => w === removeModalId
+              );
+              if (removeIndex > -1) {
+                state.windowsModals.splice(removeIndex, 1);
+              }
+              delete state.hashWindows[removeModalId];
+              delete state.hashWindowsModals[removeModalId];
+            });
+          },
+          addWindowModal: (areaId, windowId, newWindowModalProps) => {
+            set((state) => {
+              const dynamicMFStore = createDynamicMFStore({
+                dynamicMFParameters: newWindowModalProps.dynamicParams,
+                windowId
+              });
+              state.windowsModals.push(windowId);
+              state.hashWindowsModals[windowId] = {
+                ...newWindowModalProps,
+                areaId,
+                windowId,
+                ...DEFAULT_WINDOW,
+                onClose: get().areaActions.closeWindowModal,
+                dynamicMFStore
+              };
+              state.hashWindows[windowId] = state.hashWindowsModals[windowId];
+            });
+          },
           bouncedSaveBreakpointsLayouts: debounce(
             (areaId) => {
               const purgedLayouts = {
-                ...get().hashAreas[areaId].viewMode === "multiple" ? get().hashAreas[areaId].breakPointsLayouts : get().hashAreas[areaId].beforeMaximizebreakpointsLayouts
+                ...get().hashAreas[areaId].layouts
               };
               const finalLayouts = {};
               for (const key in purgedLayouts) {
@@ -637,7 +568,7 @@ const createAreasStore = (initProps) => {
                   if (l.i === "none") {
                     return false;
                   }
-                  if (get().hashAreas[areaId].hashWindowsLayouts[l.i]) {
+                  if (get().hashAreas[areaId].hashLayoutItems.indexOf(l.i) > -1) {
                     return true;
                   }
                   return false;
@@ -658,101 +589,91 @@ const createAreasStore = (initProps) => {
                 });
               }
             },
-            DEBOUCED_SAVE_TIME
+            DEBOUCED_SAVE_TIME,
+            {
+              leading: true,
+              trailing: true
+            }
           ),
-          onBreakpointsLayoutsChange: (areaId, _currentLayouts, newAllLayouts) => {
+          onBreakpointsLayoutsChange: (areaId, _currentLayout, newAllLayouts) => {
+            console.log("onBreakpointsLayoutsChange", areaId, newAllLayouts);
             set((state) => {
-              state.hashAreas[areaId].breakPointsLayouts = newAllLayouts;
+              state.hashAreas[areaId].layouts = cloneDeep(newAllLayouts);
             });
-            if (!get().hashAreas[areaId].singleId) {
+            if (!get().hashAreas[areaId].maximizedId) {
               get().areaActions.bouncedSaveBreakpointsLayouts(areaId);
             }
           },
-          selectWindowLayout: (areaId, layoutId) => {
+          onContainerChange: (areaId, e) => {
+            console.log("onContainerChange Store", areaId, e.containerHeight);
             set((state) => {
-              const area = state.hashAreas[areaId];
-              area.currentLayoutId = layoutId;
-              state.currentModuleId = state.hashWindows[layoutId].moduleId;
-              if (area.currentPopUpId !== "" && area.hashWindowsPopups[area.currentPopUpId]) {
-                const windowPopup = area.hashWindowsPopups[area.currentPopUpId];
-                if (windowPopup.parentLayoutId !== layoutId) {
-                  area.currentPopUpId = "";
-                }
-              }
+              state.hashAreas[areaId].containerHeight = e.containerHeight;
+              state.hashAreas[areaId].currentBreakpoint = e.breakpoint;
             });
           },
-          maximizeLayout: (areaId, layoutId) => {
-            let finalLayoutId = layoutId;
+          selectLayout: (areaId, layoutId) => {
             set((state) => {
               const area = state.hashAreas[areaId];
-              if (!area)
-                return;
-              if (area.viewMode === "multiple") {
-                area.beforeMaximizebreakpointsLayouts = cloneDeep(
-                  area.breakPointsLayouts
-                );
-              }
-              if (!finalLayoutId) {
-                if (area.windowsLayouts.length > 0) {
-                  finalLayoutId = area.windowsLayouts[0].i;
+              if (state.hashWindows[layoutId].emergeType === "layout") {
+                area.currentLayoutId = layoutId;
+                state.currentModuleId = state.hashWindows[layoutId].moduleId;
+                if (area.currentPopUpId !== "" && state.hashWindows[area.currentPopUpId]) {
+                  if (state.hashWindows[area.currentPopUpId].parentLayoutId !== layoutId) {
+                    area.currentPopUpId = "";
+                  }
+                }
+              } else {
+                state.hashAreas[areaId].currentPopUpId = layoutId;
+                const parentLayoutId = state.hashWindows[layoutId]?.parentLayoutId;
+                if (parentLayoutId && state.hashWindows[parentLayoutId]) {
+                  area.currentLayoutId = parentLayoutId;
+                  state.currentModuleId = state.hashWindows[parentLayoutId].moduleId;
+                } else {
+                  area.currentLayoutId = "";
+                  state.currentModuleId = "";
                 }
               }
-              area.viewMode = "single";
-              area.singleId = finalLayoutId;
-              setTimeout(() => {
-                set((state2) => {
-                  setBreakPointsMaximized(
-                    state2.hashAreas[areaId],
-                    finalLayoutId
-                  );
-                });
-              }, 100);
             });
-            if (finalLayoutId) {
-              get().areaActions.selectWindowLayout(areaId, finalLayoutId);
+          },
+          unColapseLayoutItem: (areaId, layoutId) => {
+            if (get().hashWindows[layoutId] && get().hashAreas[areaId].colapsedItems[layoutId]) {
+              set((state) => {
+                state.hashAreas[areaId].colapsedItems = {
+                  ...state.hashAreas[areaId].colapsedItems
+                };
+                delete state.hashAreas[areaId].colapsedItems[layoutId];
+                state.hashWindows[layoutId].colapsed = false;
+              });
             }
           },
-          resizeMaximixedLayout: (areaId) => {
+          colapseLayoutItem: (areaId, layoutId) => {
+            if (!get().hashAreas[areaId].maximizedId && get().hashWindows[layoutId]) {
+              set((state) => {
+                state.hashAreas[areaId].colapsedItems = {
+                  ...state.hashAreas[areaId].colapsedItems
+                };
+                state.hashAreas[areaId].colapsedItems[layoutId] = true;
+                state.hashWindows[layoutId].colapsed = true;
+              });
+            }
+          },
+          maximizeLayout: (areaId, layoutId) => {
             set((state) => {
               const area = state.hashAreas[areaId];
               if (!area)
                 return;
-              if (areaId !== state.currentAreaId) {
-                return;
-              }
-              if (area.viewMode === "single" && area.currentLayoutId !== "") {
-                console.log("Rezigning", areaId);
-                const layoutsBreakPoints = area.breakPointsLayouts;
-                const container = document.getElementsByClassName(
-                  `${areasViewerClasses.areaGridLayout}-${area.id}`
-                )[0];
-                window.dispatchEvent(new Event("resize"));
-                for (const key in layoutsBreakPoints) {
-                  const layoutBreakpoint = layoutsBreakPoints[key];
-                  if (layoutBreakpoint) {
-                    const clientHeight = container.clientHeight;
-                    const heigthUnits = (clientHeight + MARGIN_GRIDLAYOUT - 2 * CONTAINER_PADDING_GRIDLAYOUT) / (ROW_HEIGTH_GRIDLAYOUT + MARGIN_GRIDLAYOUT);
-                    for (let index = 0; index < layoutBreakpoint.length; index++) {
-                      const l = layoutBreakpoint[index];
-                      if (l.i === area.currentLayoutId) {
-                        l.h = heigthUnits;
-                        l.maxH = heigthUnits;
-                      }
-                    }
-                  }
-                }
-              }
+              area.maximizedId = layoutId;
             });
+            if (layoutId) {
+              get().areaActions.selectLayout(areaId, layoutId);
+            }
           },
           normalizeLayouts: (areaId) => {
             set((state) => {
-              if (state.ownerState.isMobile)
+              const area = state.hashAreas[areaId];
+              if (!area)
                 return;
-              if (!state.ownerState.isMobile && state.hashAreas[areaId].viewMode === "single") {
-                state.hashAreas[areaId].viewMode = "multiple";
-                state.hashAreas[areaId].singleId = void 0;
-                state.hashAreas[areaId].breakPointsLayouts = state.hashAreas[areaId].beforeMaximizebreakpointsLayouts;
-              }
+              area.maximizedId = void 0;
             });
           },
           loadWindowsFromApi: (areaId) => {
@@ -787,27 +708,19 @@ const createAreasStore = (initProps) => {
                 const area3 = state.hashAreas[areaId];
                 const {
                   newBreakPointsLayouts,
-                  newWindowsLayouts,
-                  newHashWindowLayouts
+                  newWindowsLayoutsIds,
+                  newHashLayoutItems
                 } = getDataFromResponse(response.data, state, areaId);
-                area3.breakPointsLayouts = newBreakPointsLayouts;
-                if (area.viewMode === "single") {
-                  area3.beforeMaximizebreakpointsLayouts = newBreakPointsLayouts;
-                }
-                area3.windowsLayouts = newWindowsLayouts;
-                area3.hashWindowsLayouts = newHashWindowLayouts;
+                area3.layouts = newBreakPointsLayouts;
+                area3.hashLayoutItems = newHashLayoutItems;
                 area3.status = "loaded";
-              });
-              if (get().hashAreas[areaId].windowsLayouts.length > 0) {
-                get().areaActions.selectWindowLayout(
-                  areaId,
-                  get().hashAreas[areaId].windowsLayouts[0].i
+                console.log(
+                  "loadWindowsFromApi",
+                  newBreakPointsLayouts,
+                  newHashLayoutItems,
+                  newWindowsLayoutsIds
                 );
-              }
-              console.log("loadWindowsFromApi", area2.viewMode);
-              if (area2.viewMode === "single") {
-                get().areaActions.maximizeLayout(area2.id);
-              }
+              });
             }).catch((_response) => {
               set((state) => {
                 state.hashAreas[areaId].status = "loaded";
@@ -825,6 +738,11 @@ const createAreasStore = (initProps) => {
             });
           },
           getCookie: (windowId, id) => {
+            console.log(
+              "getCookie",
+              get().hashWindows[windowId].cookies.windowCookies[id],
+              get().hashWindows[windowId].cookies.moduleCookies[id]
+            );
             if (get().hashWindows[windowId]) {
               return get().hashWindows[windowId].cookies.windowCookies[id] || get().hashWindows[windowId].cookies.moduleCookies[id];
             }
@@ -870,10 +788,17 @@ const createAreasStore = (initProps) => {
               }
             }
           },
-          setLoading: (windowId, isLoading) => {
+          startProgress: (windowId) => {
             set((state) => {
               if (state.hashWindows[windowId]) {
-                state.hashWindows[windowId].loading = isLoading;
+                state.hashWindows[windowId].loading = true;
+              }
+            });
+          },
+          stopProgress: (windowId) => {
+            set((state) => {
+              if (state.hashWindows[windowId]) {
+                state.hashWindows[windowId].loading = false;
               }
             });
           },
@@ -907,6 +832,11 @@ const createAreasStore = (initProps) => {
                         response.data,
                         windowId
                       );
+                      console.log(
+                        "cookies",
+                        hWs.cookies.windowCookies,
+                        hWs.cookies.moduleCookies
+                      );
                       hWs.status = "loaded";
                     }
                   });
@@ -957,9 +887,10 @@ const createAreasStore = (initProps) => {
               });
             }
           },
-          toasty: (windowId, options) => {
+          toast: (windowId, options) => {
             const hW = get().hashWindows[windowId];
             if (hW) {
+              console.log("replaceMeId", options.replaceMeId);
               if (options.replaceMeId) {
                 for (const key in hW.hashToasties) {
                   const t = hW.hashToasties[key];
@@ -1009,12 +940,12 @@ const createAreasStore = (initProps) => {
               });
             }
           },
-          closeToasty: (windowId, toastyId) => {
+          closeToast: (windowId, toastyId) => {
             set((state) => {
               verifyRemoveToasty(state.hashWindows[windowId], toastyId, true);
             });
           },
-          pinToasty: (windowId, toastyId) => {
+          pinToast: (windowId, toastyId) => {
             set((state) => {
               const t = state.hashWindows[windowId].hashToasties[toastyId];
               if (t) {
@@ -1087,9 +1018,9 @@ function AreasProvider(props) {
     setExternalState
   } = useStore(areasStoreRef.current, (state) => state.areasActions, shallow);
   const addWindow = useCallback((newWindow) => {
-    const currentArea = areasStoreRef.current?.getState().currentAreaId;
+    const currentAreaId = areasStoreRef.current?.getState().currentAreaId;
     const areas = areasStoreRef.current?.getState().areas;
-    if (currentArea && areas) {
+    if (currentAreaId && areas) {
       areasStoreRef.current?.getState().areaActions.addWindow(newWindow);
     }
   }, []);
@@ -1133,9 +1064,8 @@ function AreasProvider(props) {
 }
 export {
   AreasContext as A,
-  CONTAINER_PADDING_GRIDLAYOUT as C,
   MARGIN_GRIDLAYOUT as M,
+  PADDING_GRIDLAYOUT as P,
   ROW_HEIGTH_GRIDLAYOUT as R,
-  THROTTLE_RESIZE_TIME as T,
   AreasProvider as a
 };