add fullscreen preview mode on isolated canvas

Author: softmarshmallow

editor/components/canvas/isolated-canvas.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import styled from "@emotion/styled";
 import { useGesture } from "@use-gesture/react";
 import useMeasure from "react-use-measure";
@@ -61,10 +61,12 @@ export function IsolatedCanvas({
   children,
   defaultSize,
   onExit,
+  onFullscreen,
 }: {
   defaultSize: { width: number; height: number };
   children?: React.ReactNode;
   onExit?: () => void;
+  onFullscreen?: () => void;
 }) {
   const _margin = 20;
   const [canvasSizingRef, canvasBounds] = useMeasure();
@@ -136,7 +138,12 @@ export function IsolatedCanvas({
             scale={scale}
             onChange={setScale}
           />
-          {onExit && <ExitButton onClick={onExit}>End Isolation</ExitButton>}
+          {onFullscreen && (
+            <ActionButton onClick={onFullscreen}>Full Screen</ActionButton>
+          )}
+          {onExit && (
+            <ActionButton onClick={onExit}>End Isolation</ActionButton>
+          )}
         </Controls>
         {/* <ScalingAreaStaticRoot> */}
         <TransformContainer
@@ -155,7 +162,7 @@ export function IsolatedCanvas({
   );
 }
 
-const ExitButton = styled.button`
+const ActionButton = styled.button`
   align-self: center;
   background-color: ${colors.color_editor_bg_on_dark};
   box-shadow: ${colors.color_editor_bg_on_dark} 0px 0px 0px 16px inset;

editor/scaffolds/canvas/isolate-mode.tsx

@@ -8,10 +8,13 @@ import { IsolatedCanvas } from "components/canvas";
 import { PreviewAndRunPanel } from "components/preview-and-run";
 import { useEditorState } from "core/states";
 import { useTargetContainer } from "hooks";
+import { Dialog } from "@material-ui/core";
+import { FullScreenPreview } from "scaffolds/preview-full-screen";
 
 export function IsolateModeCanvas({ onClose }: { onClose: () => void }) {
   const [state] = useEditorState();
   const [preview, setPreview] = useState<Result>();
+  const [fullscreen, setFullscreen] = useState(false);
 
   const { target, root } = useTargetContainer();
 
@@ -69,30 +72,49 @@ export function IsolateModeCanvas({ onClose }: { onClose: () => void }) {
   }, [target?.id]);
 
   return (
-    <IsolatedCanvas
-      key={target?.id}
-      onExit={onClose}
-      defaultSize={{
-        width: target?.width ?? 375,
-        height: target?.height ?? 812,
-      }}
-    >
-      {preview ? (
-        <VanillaRunner
-          key={preview.scaffold.raw}
-          style={{
-            borderRadius: 4,
-            boxShadow: "0px 0px 48px #00000020",
+    <>
+      <Dialog
+        fullScreen
+        onClose={() => {
+          setFullscreen(false);
+        }}
+        open={fullscreen}
+      >
+        <FullScreenPreview
+          onClose={() => {
+            setFullscreen(false);
           }}
-          source={preview.scaffold.raw}
-          width="100%"
-          height="100%"
-          componentName={preview.name}
         />
-      ) : (
-        <EditorCanvasSkeleton />
-      )}
-    </IsolatedCanvas>
+        ;
+      </Dialog>
+      <IsolatedCanvas
+        key={target?.id}
+        onExit={onClose}
+        onFullscreen={() => {
+          setFullscreen(true);
+        }}
+        defaultSize={{
+          width: target?.width ?? 375,
+          height: target?.height ?? 812,
+        }}
+      >
+        {preview ? (
+          <VanillaRunner
+            key={preview.scaffold.raw}
+            style={{
+              borderRadius: 4,
+              boxShadow: "0px 0px 48px #00000020",
+            }}
+            source={preview.scaffold.raw}
+            width="100%"
+            height="100%"
+            componentName={preview.name}
+          />
+        ) : (
+          <EditorCanvasSkeleton />
+        )}
+      </IsolatedCanvas>
+    </>
   );
 }
 

editor/scaffolds/editor/editor.tsx

@@ -1,10 +1,9 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect } from "react";
 import { DefaultEditorWorkspaceLayout } from "layouts/default-editor-workspace-layout";
 import {
   WorkspaceContentPanel,
   WorkspaceContentPanelGridLayout,
 } from "layouts/panel";
-import { FullScreenPreview } from "scaffolds/preview-full-screen";
 import { EditorSidebar } from "components/editor";
 import { useEditorState, useWorkspaceState } from "core/states";
 import { Canvas } from "scaffolds/canvas";
@@ -66,23 +65,15 @@ export function Editor({
   // this key is used for force re-rendering canvas after the whole file is fetched.
   const _refreshkey = loading || !_initially_loaded ? "1" : "0";
 
-  // TODO: migrate this to wsstate or editor state, - only for development.
-  const [mode, setMode] = useState<"edit" | "fullscreen-preview">("edit");
-
-  const FullscreenPreviewMode = () => {
-    return <FullScreenPreview />;
-  };
-
   return (
     <>
       {(loading || !_initially_loaded) && (
         <EditorSkeleton percent={_initial_load_progress * 100} />
       )}
-      {mode == "fullscreen-preview" && <FullscreenPreviewMode />}
+
       <DefaultEditorWorkspaceLayout
         backgroundColor={colors.color_editor_bg_on_dark}
         leftbar={<EditorSidebar />}
-        display={mode == "fullscreen-preview" ? "none" : undefined}
         // rightbar={<Inspector />}
       >
         <WorkspaceContentPanelGridLayout>

editor/scaffolds/preview-full-screen/index.tsx

@@ -14,7 +14,7 @@ import { useTargetContainer, useWindowSize } from "hooks";
 import Close from "@material-ui/icons/Close";
 import ClientOnly from "components/client-only";
 
-export function FullScreenPreview() {
+export function FullScreenPreview({ onClose }: { onClose: () => void }) {
   const [state] = useEditorState();
   const [preview, setPreview] = useState<Result>();
   const windowsize = useWindowSize();
@@ -97,11 +97,7 @@ export function FullScreenPreview() {
           <StaticSizeInput value={windowsize.height ?? 0} suffix={"H"} />
         </AppbarControlSizeInputs>
         <AppbarActionsSegment>
-          <CloseButton
-            onClick={() => {
-              // TODO: end preview mode
-            }}
-          />
+          <CloseButton onClick={onClose} />
         </AppbarActionsSegment>
       </FullscreenPreviewAppbar>
       <Body>