Merge pull request #124 from gridaco/editor/preview-full-screen

Full-screen instant preview

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/layouts/default-editor-workspace-layout.tsx

@@ -7,10 +7,14 @@ export function DefaultEditorWorkspaceLayout(props: {
   rightbar?: JSX.Element;
   appbar?: JSX.Element;
   children: JSX.Element | Array<JSX.Element>;
+  display?: "none" | "initial"; // set to none when to hide.
   backgroundColor?: string;
 }) {
   return (
-    <WorkspaceRoot backgroundColor={props.backgroundColor}>
+    <WorkspaceRoot
+      display={props.display}
+      backgroundColor={props.backgroundColor}
+    >
       <AppBarMenuAndBelowContentWrap>
         {props.appbar && <AppBarWrap>{props.appbar}</AppBarWrap>}
         <NonMenuContentZoneWrap>
@@ -27,7 +31,11 @@ export function DefaultEditorWorkspaceLayout(props: {
   );
 }
 
-const WorkspaceRoot = styled.div<{ backgroundColor: string }>`
+const WorkspaceRoot = styled.div<{
+  display?: "none" | "initial";
+  backgroundColor: string;
+}>`
+  ${(props) => props.display && `display: ${props.display};`}
   width: 100vw;
   height: 100vh;
   background-color: ${(p) => p.backgroundColor ?? "transparent"};

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,21 +1,15 @@
-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 { WorkspaceBottomPanelDockLayout } from "layouts/panel/workspace-bottom-panel-dock-layout";
 import { EditorSidebar } from "components/editor";
 import { useEditorState, useWorkspaceState } from "core/states";
-
 import { Canvas } from "scaffolds/canvas";
 import { CodeSegment } from "scaffolds/code";
-import { Inspector } from "scaffolds/inspector";
-
 import { EditorSkeleton } from "./skeleton";
 import { colors } from "theme";
-import { Debugger } from "@code-editor/debugger";
-
 import { RemoteImageRepositories } from "@design-sdk/figma-remote/lib/asset-repository/image-repository";
 import {
   ImageRepository,
@@ -76,6 +70,7 @@ export function Editor({
       {(loading || !_initially_loaded) && (
         <EditorSkeleton percent={_initial_load_progress * 100} />
       )}
+
       <DefaultEditorWorkspaceLayout
         backgroundColor={colors.color_editor_bg_on_dark}
         leftbar={<EditorSidebar />}

editor/scaffolds/preview-full-screen/README.md

@@ -0,0 +1 @@
+# Full screen previewer