cleanup editor state tree

Author: softmarshmallow

editor/core/actions/index.ts

@@ -1,3 +1,6 @@
+import type { FrameworkConfig } from "@designto/config";
+import type { EditorState } from "core/states";
+
 export type WorkspaceAction =
   //
   | HistoryAction
@@ -12,13 +15,10 @@ export type HistoryAction =
   | Action;
 
 export type Action =
-  //
   | PageAction
-  //
   | SelectNodeAction
-  //
   | HighlightLayerAction
-  //
+  | CanvasModeAction
   | CodeEditorAction;
 
 export type ActionType = Action["type"];
@@ -41,12 +41,23 @@ export interface HighlightLayerAction {
   id: string;
 }
 
+type CanvasModeAction = CanvasModeSwitchAction | CanvasModeGobackAction;
+export interface CanvasModeSwitchAction {
+  type: "canvas-mode-switch";
+  mode: EditorState["canvasMode"];
+}
+
+export interface CanvasModeGobackAction {
+  type: "canvas-mode-goback";
+  fallback?: EditorState["canvasMode"];
+}
+
 export type CodeEditorAction = CodeEditorEditComponentCodeAction;
 
 export interface CodeEditorEditComponentCodeAction {
   type: "code-editor-edit-component-code";
   id: string;
-  framework: string;
+  framework: FrameworkConfig["framework"];
   componentName: string;
   raw: string;
 }

editor/core/reducers/editor-reducer.ts

@@ -4,18 +4,20 @@ import type {
   SelectNodeAction,
   SelectPageAction,
   CodeEditorEditComponentCodeAction,
+  CanvasModeSwitchAction,
+  CanvasModeGobackAction,
 } from "core/actions";
 import { EditorState } from "core/states";
 import { useRouter } from "next/router";
 import { CanvasStateStore } from "@code-editor/canvas/stores";
+import assert from "assert";
 
 const _editor_path_name = "/files/[key]/";
 
 export function editorReducer(state: EditorState, action: Action): EditorState {
   const router = useRouter();
   const filekey = state.design.key;
 
-  // TODO: handle actions here.
   switch (action.type) {
     case "select-node": {
       const { node } = <SelectNodeAction>action;
@@ -80,14 +82,40 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
     case "code-editor-edit-component-code": {
       const { ...rest } = <CodeEditorEditComponentCodeAction>action;
       return produce(state, (draft) => {
-        draft.editingCode = {
+        draft.editingModule = {
           ...rest,
           type: "single-file-component",
           lang: "unknown",
         };
       });
       //
     }
+    case "canvas-mode-switch": {
+      const { mode } = <CanvasModeSwitchAction>action;
+
+      router.push({
+        pathname: _editor_path_name,
+        query: { ...router.query, mode: mode },
+        // no need to set shallow here.
+      });
+
+      return produce(state, (draft) => {
+        draft.canvasMode_previous = draft.canvasMode;
+        draft.canvasMode = mode;
+      });
+    }
+    case "canvas-mode-goback": {
+      const { fallback } = <CanvasModeGobackAction>action;
+      return produce(state, (draft) => {
+        const dest = draft.canvasMode_previous ?? fallback;
+        assert(
+          dest,
+          "canvas-mode-goback: cannot resolve destination. (no fallback provided)"
+        );
+        draft.canvasMode_previous = draft.canvasMode; // swap
+        draft.canvasMode = dest; // previous or fallback
+      });
+    }
     default:
       throw new Error(`Unhandled action type: ${action["type"]}`);
   }

editor/core/states/editor-initial-state.ts

@@ -7,6 +7,7 @@ export function createInitialEditorState(editor: EditorSnapshot): EditorState {
     selectedNodesInitial: editor.selectedNodes,
     selectedLayersOnPreview: editor.selectedLayersOnPreview,
     design: editor.design,
+    canvasMode: editor.canvasMode,
   };
 }
 
@@ -17,5 +18,6 @@ export function createPendingEditorState(): EditorState {
     selectedNodesInitial: null,
     selectedLayersOnPreview: [],
     design: null,
+    canvasMode: "free",
   };
 }

editor/core/states/editor-state.ts

@@ -1,7 +1,15 @@
 import type { ReflectSceneNode } from "@design-sdk/figma-node";
+import type { FrameworkConfig } from "@designto/config";
 import { ComponentNode } from "@design-sdk/figma-types";
 import { DesignInput } from "@designto/config/input";
 
+/**
+ * View mode of the canvas.
+ * - full - default
+ * - isolated - focus to one scene
+ */
+type TCanvasMode = "free" | "isolated-view" | "fullscreen-preview";
+
 export interface EditorState {
   selectedPage: string;
   selectedNodes: string[];
@@ -13,13 +21,10 @@ export interface EditorState {
    */
   selectedNodesInitial?: string[] | null;
   design: FigmaReflectRepository;
-  editingCode?: {
-    type: "single-file-component";
-    componentName: string;
-    framework: string;
-    lang: string;
-    raw: string;
-  };
+  canvasMode: TCanvasMode;
+  canvasMode_previous?: TCanvasMode;
+  code?: CodeRepository;
+  editingModule?: EditingModule;
 }
 
 export interface EditorSnapshot {
@@ -28,6 +33,7 @@ export interface EditorSnapshot {
   selectedLayersOnPreview: string[];
   selectedNodesInitial?: string[] | null;
   design: FigmaReflectRepository;
+  canvasMode: TCanvasMode;
 }
 
 export interface FigmaReflectRepository {
@@ -47,3 +53,18 @@ export interface FigmaReflectRepository {
   // styles: { [key: string]: {} };
   input: DesignInput;
 }
+
+export interface CodeRepository {
+  // TODO:
+  // files: { [key: string]: string };
+}
+
+type TEditingModuleType = "single-file-component";
+
+export interface EditingModule {
+  type: TEditingModuleType;
+  componentName: string;
+  framework: FrameworkConfig["framework"];
+  lang: string;
+  raw: string;
+}

editor/pages/files/[key]/index.tsx

@@ -64,6 +64,10 @@ function SetupEditor({
     initialDispatcher({ type: "update", value: action });
   }, []);
 
+  const initialCanvasMode = q_map_canvas_mode_from_query(
+    router.query.mode as string
+  ); // TODO: change this to reflect the nodeid input
+
   const initWith = (file: FileResponse) => {
     const prevstate =
       initialState.type == "success" && initialState.value.history.present;
@@ -107,6 +111,7 @@ function SetupEditor({
           key: filekey,
           pages: pages,
         },
+        canvasMode: initialCanvasMode,
       };
     }
 
@@ -219,3 +224,25 @@ function SetupEditor({
     
   }
  */
+
+const q_map_canvas_mode_from_query = (
+  mode: string
+): EditorSnapshot["canvasMode"] => {
+  switch (mode) {
+    case "free":
+    case "isolated-view":
+    case "fullscreen-preview":
+      return mode;
+
+    // -------------------------
+    // legacy query param key
+    case "full":
+      return "free";
+    case "isolate":
+      return "isolated-view";
+    // -------------------------
+
+    default:
+      return "free";
+  }
+};

editor/scaffolds/canvas/canvas.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback } from "react";
 import styled from "@emotion/styled";
 import { Canvas } from "@code-editor/canvas";
 import { useEditorState, useWorkspace } from "core/states";
@@ -7,57 +7,62 @@ import useMeasure from "react-use-measure";
 import { useDispatch } from "core/dispatch";
 import { FrameTitleRenderer } from "./render/frame-title";
 import { IsolateModeCanvas } from "./isolate-mode";
-import { useRouter } from "next/router";
-
-type ViewMode = "full" | "isolate";
-const _editor_path_name = "/files/[key]/";
+import { Dialog } from "@material-ui/core";
+import { FullScreenPreview } from "scaffolds/preview-full-screen";
 
 /**
  * Statefull canvas segment that contains canvas as a child, with state-data connected.
  */
 export function VisualContentArea() {
   const [state] = useEditorState();
-  const router = useRouter();
-  const { mode: q_mode } = router.query;
-
-  // this hook is used for focusing the node on the first load with the initial selection is provided externally.
-  useEffect(() => {
-    // if the initial selection is available, and not empty &&
-    if (state.selectedNodesInitial?.length && q_mode == "isolate") {
-      // trigger isolation mode once.
-      setMode("isolate");
-
-      // TODO: set explicit canvas initial transform.
-      // make the canvas fit to the initial target even when the isolation mode is complete by the user.
-    }
-  }, [state.selectedNodesInitial]);
-
   const [canvasSizingRef, canvasBounds] = useMeasure();
 
   const { highlightedLayer, highlightLayer } = useWorkspace();
   const dispatch = useDispatch();
 
-  const { selectedPage, design, selectedNodes } = state;
+  const { selectedPage, design, selectedNodes, canvasMode } = state;
 
   const thisPageNodes = selectedPage
-    ? state.design.pages
-        .find((p) => p.id == selectedPage)
-        .children.filter(Boolean)
+    ? design.pages.find((p) => p.id == selectedPage).children.filter(Boolean)
     : [];
 
   const isEmptyPage = thisPageNodes?.length === 0;
 
-  const [mode, _setMode] = useState<ViewMode>("full");
+  const startIsolatedViewMode = useCallback(
+    () =>
+      dispatch({
+        type: "canvas-mode-switch",
+        mode: "isolated-view",
+      }),
+    [dispatch]
+  );
+
+  const startFullscreenPreviewMode = useCallback(
+    () =>
+      dispatch({
+        type: "canvas-mode-switch",
+        mode: "fullscreen-preview",
+      }),
+    [dispatch]
+  );
 
-  const setMode = (m: ViewMode) => {
-    _setMode(m);
+  const endIsolatedViewMode = useCallback(
+    () =>
+      dispatch({
+        type: "canvas-mode-switch",
+        mode: "free",
+      }),
+    [dispatch]
+  );
 
-    // update the router
-    router.push({
-      pathname: _editor_path_name,
-      query: { ...router.query, mode: m },
-    });
-  };
+  const exitFullscreenPreview = useCallback(
+    () =>
+      dispatch({
+        type: "canvas-mode-goback",
+        fallback: "isolated-view",
+      }),
+    [dispatch]
+  );
 
   return (
     <CanvasContainer ref={canvasSizingRef} id="canvas">
@@ -67,16 +72,19 @@ export function VisualContentArea() {
         <></>
       ) : (
         <>
-          {mode == "isolate" && (
+          <FullScreenPreviewContainer
+            show={canvasMode == "fullscreen-preview"}
+            onExit={exitFullscreenPreview}
+          />
+          {canvasMode == "isolated-view" && (
             <IsolateModeCanvas
-              onClose={() => {
-                setMode("full");
-              }}
+              onClose={endIsolatedViewMode}
+              onEnterFullscreen={startFullscreenPreviewMode}
             />
           )}
           <div
             style={{
-              display: mode == "full" ? undefined : "none",
+              display: canvasMode !== "free" && "none",
             }}
           >
             <Canvas
@@ -112,9 +120,7 @@ export function VisualContentArea() {
                 <FrameTitleRenderer
                   key={p.id}
                   {...p}
-                  onRunClick={() => {
-                    setMode("isolate");
-                  }}
+                  onRunClick={startIsolatedViewMode}
                 />
               )}
             />
@@ -125,6 +131,20 @@ export function VisualContentArea() {
   );
 }
 
+function FullScreenPreviewContainer({
+  onExit,
+  show,
+}: {
+  onExit: () => void;
+  show: boolean;
+}) {
+  return (
+    <Dialog fullScreen onClose={onExit} open={show}>
+      <FullScreenPreview onClose={onExit} />
+    </Dialog>
+  );
+}
+
 const CanvasContainer = styled.div`
   display: flex;
   flex-direction: column;