Switch layouts using custom divider toggle (#7995)

GitOrigin-RevId: 15e517f448165a25df616fd956967202491b15cc

services/web/app/views/project/editor/editor.pug

@@ -1,7 +1,7 @@
 div.full-size(
 	ng-show="ui.view == 'editor' || ui.view === 'file'"
 	layout="pdf"
-	layout-disabled="ui.pdfLayout != 'sideBySide'"
+	open-east="ui.pdfOpen"
 	mask-iframes-on-resize="true"
 	resize-on="layout:main:resize"
 	resize-proportionally="true"

services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js

@@ -10,6 +10,7 @@ import IconEditorOnly from './icon-editor-only'
 import IconPdfOnly from './icon-pdf-only'
 import { useLayoutContext } from '../../../shared/context/layout-context'
 import * as eventTracking from '../../../infrastructure/event-tracking'
+import useEventListener from '../../../shared/hooks/use-event-listener'
 
 function IconPlaceholder() {
   return <Icon type="" fw />
@@ -95,6 +96,9 @@ function LayoutDropdownButton() {
     eventTracking.sendMB('project-layout-reattach')
   }, [detachRole, reattach])
 
+  // reattach when the PDF pane opens
+  useEventListener('ui:pdf-open', handleReattach)
+
   const handleChangeLayout = useCallback(
     (newLayout, newView) => {
       handleReattach()

services/web/frontend/js/ide.js

@@ -332,6 +332,21 @@ If the project has been renamed please look in your project list for a new proje
       $scope.switchToSideBySideLayout()
     }
 
+    // Update ui.pdfOpen when the layout changes.
+    // The east pane should open when the layout changes from "Editor only" or "PDF only" to "Editor & PDF".
+    $scope.$watch('ui.pdfLayout', value => {
+      $scope.ui.pdfOpen = value === 'sideBySide'
+    })
+
+    // Update ui.pdfLayout when the east pane is toggled.
+    // The layout should be set to "Editor & PDF" (sideBySide) when the east pane is opened, and "Editor only" (flat) when the east pane is closed.
+    $scope.$watch('ui.pdfOpen', value => {
+      $scope.ui.pdfLayout = value ? 'sideBySide' : 'flat'
+      if (value) {
+        window.dispatchEvent(new CustomEvent('ui:pdf-open'))
+      }
+    })
+
     // note: { keyShortcut: true } exists only for tracking purposes.
     $scope.recompileViaKey = () => {
       if ($scope.recompile) {

services/web/frontend/js/ide/directives/layout.js

@@ -66,7 +66,7 @@ export default App.directive('layout', ($parse, $compile, ide) => ({
             initClosed: scope.$eval(attrs.initClosedEast),
           },
           west: {
-            size: scope.$eval(attrs.initialSizeEast),
+            size: scope.$eval(attrs.initialSizeWest),
             initClosed: scope.$eval(attrs.initClosedWest),
           },
         }
@@ -81,6 +81,7 @@ export default App.directive('layout', ($parse, $compile, ide) => ({
             ) {
               options.east = state.east
             }
+            options.east.initClosed = state.east.initClosed
           }
           if (state.west != null) {
             if (
@@ -90,6 +91,7 @@ export default App.directive('layout', ($parse, $compile, ide) => ({
             ) {
               options.west = state.west
             }
+            options.west.initClosed = state.west.initClosed
           }
         }
 
@@ -154,10 +156,13 @@ export default App.directive('layout', ($parse, $compile, ide) => ({
           ) {
             const eastState = layout.readState().east
             if (eastState != null) {
-              const newInternalWidth =
-                (eastState.size / oldWidth) * element.width()
-              oldWidth = element.width()
-              layout.sizePane('east', newInternalWidth)
+              const currentWidth = element.width()
+              if (currentWidth > 0) {
+                const newInternalWidth =
+                  (eastState.size / oldWidth) * currentWidth
+                oldWidth = currentWidth
+                layout.sizePane('east', newInternalWidth)
+              }
               return
             }
           }
@@ -250,6 +255,12 @@ ng-click=\"handleClick()\">\
               } else {
                 layout.close('east')
               }
+              if (hasCustomToggler) {
+                repositionCustomToggler()
+                customTogglerEl.scope().$applyAsync(function () {
+                  customTogglerEl.scope().isOpen = value
+                })
+              }
             }
             return setTimeout(() => scope.$digest(), 0)
           })