prevent isolated view canvas from redrawing when exit full screen (change display instead)

Author: softmarshmallow

editor/scaffolds/canvas/canvas.tsx

@@ -20,7 +20,13 @@ export function VisualContentArea() {
   const { highlightedLayer, highlightLayer } = useWorkspace();
   const dispatch = useDispatch();
 
-  const { selectedPage, design, selectedNodes, canvasMode } = state;
+  const {
+    selectedPage,
+    design,
+    selectedNodes,
+    canvasMode,
+    canvasMode_previous,
+  } = state;
 
   const thisPageNodes = selectedPage
     ? design.pages.find((p) => p.id == selectedPage).children.filter(Boolean)
@@ -76,8 +82,15 @@ export function VisualContentArea() {
             show={canvasMode == "fullscreen-preview"}
             onExit={exitFullscreenPreview}
           />
-          {canvasMode == "isolated-view" && (
+          {(canvasMode == "isolated-view" ||
+            (canvasMode == "fullscreen-preview" &&
+              canvasMode_previous === "isolated-view")) && (
             <IsolateModeCanvas
+              hidden={
+                // if prev mode is this, hide, not remove.
+                canvasMode == "fullscreen-preview" &&
+                canvasMode_previous === "isolated-view"
+              }
               onClose={endIsolatedViewMode}
               onEnterFullscreen={startFullscreenPreviewMode}
             />

editor/scaffolds/canvas/isolate-mode.tsx

@@ -5,9 +5,11 @@ import { useEditorState } from "core/states";
 import { VanillaDedicatedPreviewRenderer } from "components/app-runner";
 
 export function IsolateModeCanvas({
+  hidden = false,
   onClose,
   onEnterFullscreen,
 }: {
+  hidden?: boolean;
   onClose: () => void;
   onEnterFullscreen: () => void;
 }) {
@@ -26,24 +28,26 @@ export function IsolateModeCanvas({
   };
 
   return (
-    <IsolatedCanvas
-      key={widgetKey?.id}
-      building={isBuilding}
-      onExit={onClose}
-      onFullscreen={onEnterFullscreen}
-      defaultSize={{
-        width: initialSize?.width ?? 375,
-        height: initialSize?.height ?? 812,
-      }}
-    >
-      <>
-        {source ? (
-          <VanillaDedicatedPreviewRenderer {...state.currentPreview} />
-        ) : (
-          <EditorCanvasSkeleton />
-        )}
-      </>
-    </IsolatedCanvas>
+    <div style={{ display: hidden && "hidden" }}>
+      <IsolatedCanvas
+        key={widgetKey?.id}
+        building={isBuilding}
+        onExit={onClose}
+        onFullscreen={onEnterFullscreen}
+        defaultSize={{
+          width: initialSize?.width ?? 375,
+          height: initialSize?.height ?? 812,
+        }}
+      >
+        <>
+          {source ? (
+            <VanillaDedicatedPreviewRenderer {...state.currentPreview} />
+          ) : (
+            <EditorCanvasSkeleton />
+          )}
+        </>
+      </IsolatedCanvas>
+    </div>
   );
 }