fixes: container components' children vanishes on layout change

tabs, listview children vanishes from editor (UI) on switching to mobile layout and back to desktop layout

frontend/src/Editor/Container.jsx

@@ -373,7 +373,7 @@ export const Container = ({
           monitor,
           boxes,
           canvasBoundingRect,
-          item.currentLayout,
+          currentLayout,
           snapToGrid,
           zoomLevel
         );

frontend/src/Editor/Editor.jsx

@@ -113,6 +113,7 @@ const EditorComponent = (props) => {
     setSelectedComponents,
     setCurrentPageId,
     updateComponentsNeedsUpdateOnNextRender,
+    setCanvasWidth,
   } = useEditorActions();
 
   const { setAppVersions } = useAppVersionActions();
@@ -138,6 +139,7 @@ const EditorComponent = (props) => {
     queryConfirmationList,
     currentPageId,
     currentSessionId,
+    editorCanvasWidth,
   } = useEditorStore(
     (state) => ({
       appDefinition: state.appDefinition,
@@ -151,6 +153,7 @@ const EditorComponent = (props) => {
       queryConfirmationList: state.queryConfirmationList,
       currentPageId: state.currentPageId,
       currentSessionId: state.currentSessionId,
+      editorCanvasWidth: state.editorCanvasWidth,
     }),
     shallow
   );
@@ -370,7 +373,14 @@ const EditorComponent = (props) => {
       useCurrentStateStore.getState().actions.setCurrentState({
         layout: currentLayout,
       });
+
+      const canvasWidth = getCanvasWidth();
+
+      if (typeof canvasWidth === 'number') {
+        setCanvasWidth(canvasWidth);
+      }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentLayout, mounted]);
 
   const handleYmapEventUpdates = () => {
@@ -2113,7 +2123,7 @@ const EditorComponent = (props) => {
                       {defaultComponentStateComputed && (
                         <div>
                           <Container
-                            widthOfCanvas={getCanvasWidth()}
+                            widthOfCanvas={editorCanvasWidth}
                             socket={socket}
                             appDefinitionChanged={appDefinitionChanged}
                             snapToGrid={true}
@@ -2135,7 +2145,7 @@ const EditorComponent = (props) => {
                           />
                           <CustomDragLayer
                             snapToGrid={true}
-                            canvasWidth={getCanvasWidth()}
+                            canvasWidth={editorCanvasWidth}
                             onDragging={(isDragging) => setIsDragging(isDragging)}
                           />
                         </div>

frontend/src/Editor/SubContainer.jsx

@@ -323,15 +323,7 @@ export const SubContainer = ({
       else return containerCanvasWidth - 2;
     }
 
-    let width = 0;
-    if (parentRef.current) {
-      const realCanvas = parentRef.current.getElementsByClassName('real-canvas')[0];
-      if (realCanvas) {
-        const canvasBoundingRect = realCanvas.getBoundingClientRect();
-        width = canvasBoundingRect.width;
-      }
-    }
-    return width;
+    return useEditorStore.getState().editorCanvasWidth;
   }
 
   function paramUpdated(id, param, value) {
@@ -452,8 +444,9 @@ export const SubContainer = ({
             Object.entries({
               ...childWidgets,
             }).map(([key, box]) => {
+              const activeLayout = useEditorStore.getState().currentLayout;
               const canShowInCurrentLayout =
-                box.component.definition.others[currentLayout === 'mobile' ? 'showOnMobile' : 'showOnDesktop'].value;
+                box.component.definition.others[activeLayout === 'mobile' ? 'showOnMobile' : 'showOnDesktop'].value;
 
               if (box.component.parent && resolveWidgetFieldValue(canShowInCurrentLayout)) {
                 return (
@@ -464,7 +457,7 @@ export const SubContainer = ({
                     parent={parent}
                     widget={box}
                     readOnly={readOnly}
-                    currentLayout={currentLayout}
+                    currentLayout={activeLayout}
                     canvasWidth={_containerCanvasWidth}
                     gridWidth={gridWidth}
                     isGhostComponent={key === 'resizingComponentId'}
@@ -580,7 +573,7 @@ const SubWidgetWrapper = ({
   const widgetRef = useRef();
   const isOnScreen = useOnScreen(widgetRef);
 
-  const layoutData = layouts?.[currentLayout] || layouts?.['desktop'];
+  const layoutData = layouts[currentLayout] || layouts['desktop'] || {};
   const isSelected = useEditorStore((state) => {
     const isSelected = (state.selectedComponents || []).length === 1 && state?.selectedComponents?.[0]?.id === id;
     return state?.hoveredComponent == id || isSelected;

frontend/src/_stores/editorStore.js

@@ -39,6 +39,7 @@ const initialState = {
   currentSessionId: uuid(),
   componentsNeedsUpdateOnNextRender: [],
   appMode: 'auto',
+  editorCanvasWidth: 1092,
 };
 
 export const useEditorStore = create(
@@ -51,6 +52,7 @@ export const useEditorStore = create(
           type: ACTIONS.SET_HOVERED_COMPONENT,
           showComments,
         }),
+      setCanvasWidth: (editorCanvasWidth) => set({ editorCanvasWidth }),
       toggleComments: () =>
         set({ showComments: !get().showComments }, false, {
           type: ACTIONS.TOGGLE_COMMENTS,