Merge pull request #125 from gridaco/staging

Fullscreen preview & router control with param

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/core/reducers/editor-reducer.ts

@@ -27,7 +27,12 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
 
         const new_selections = [node].filter(Boolean);
         _canvas_state_store.saveLastSelection(...new_selections);
+
+        // assign new nodes set to the state.
         draft.selectedNodes = new_selections;
+
+        // remove the initial selection after the first interaction.
+        draft.selectedNodesInitial = null;
       });
     }
     case "select-page": {

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

@@ -4,6 +4,7 @@ export function createInitialEditorState(editor: EditorSnapshot): EditorState {
   return {
     selectedPage: editor.selectedPage,
     selectedNodes: editor.selectedNodes,
+    selectedNodesInitial: editor.selectedNodes,
     selectedLayersOnPreview: editor.selectedLayersOnPreview,
     design: editor.design,
   };
@@ -13,6 +14,7 @@ export function createPendingEditorState(): EditorState {
   return {
     selectedPage: null,
     selectedNodes: [],
+    selectedNodesInitial: null,
     selectedLayersOnPreview: [],
     design: null,
   };

editor/core/states/editor-state.ts

@@ -6,13 +6,20 @@ export interface EditorState {
   selectedPage: string;
   selectedNodes: string[];
   selectedLayersOnPreview: string[];
+  /**
+   * this is the initial node selection triggered by the url param, not caused by the user interaction.
+   * after once user interacts and selects other node, this selection will be cleared, set to null.
+   * > only set by the url pararm or other programatic cause, not caused by after-load user interaction.
+   */
+  selectedNodesInitial?: string[] | null;
   design: FigmaReflectRepository;
 }
 
 export interface EditorSnapshot {
   selectedPage: string;
   selectedNodes: string[];
   selectedLayersOnPreview: string[];
+  selectedNodesInitial?: string[] | null;
   design: FigmaReflectRepository;
 }
 

editor/hooks/index.ts

@@ -2,3 +2,5 @@ export * from "./use-design";
 export * from "./use-async-effect";
 export * from "./use-auth-state";
 export * from "./use-figma-access-token";
+export * from "./use-target-node";
+export * from "./use-window-size";

editor/hooks/use-target-node.ts

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from "react";
+import type { ReflectSceneNode } from "@design-sdk/core";
+import { useEditorState } from "core/states";
+import { DesignInput } from "@designto/config/input";
+
+import { utils as _design_utils } from "@design-sdk/core";
+const designq = _design_utils.query;
+
+export function useTargetContainer() {
+  const [t, setT] = useState<{ target: ReflectSceneNode; root: DesignInput }>({
+    target: undefined,
+    root: undefined,
+  });
+  const [state] = useEditorState();
+
+  //
+  useEffect(() => {
+    const thisPageNodes = state.selectedPage
+      ? state.design.pages.find((p) => p.id == state.selectedPage).children
+      : null;
+
+    const targetId =
+      state?.selectedNodes?.length === 1 ? state.selectedNodes[0] : null;
+
+    const container_of_target =
+      designq.find_node_by_id_under_inpage_nodes(targetId, thisPageNodes) ||
+      null;
+
+    const root = thisPageNodes
+      ? container_of_target &&
+        (container_of_target.origin === "COMPONENT"
+          ? DesignInput.forMasterComponent({
+              master: container_of_target,
+              all: state.design.pages,
+              components: state.design.components,
+            })
+          : DesignInput.fromDesignWithComponents({
+              design: container_of_target,
+              components: state.design.components,
+            }))
+      : state.design?.input;
+
+    const target =
+      designq.find_node_by_id_under_entry(targetId, root?.entry) ?? root?.entry;
+
+    setT({ target, root });
+  }, [state?.selectedNodes, state?.selectedPage, state?.design?.pages]);
+
+  return t;
+}

editor/hooks/use-window-size.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+
+/**
+ * from https://usehooks.com/useWindowSize/
+ * @returns
+ */
+export function useWindowSize(): {
+  width?: number;
+  height?: number;
+} {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  const [windowSize, setWindowSize] = useState({
+    width: undefined,
+    height: undefined,
+  });
+  useEffect(() => {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+    // Add event listener
+    window.addEventListener("resize", handleResize);
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+    // Remove event listener on cleanup
+    return () => window.removeEventListener("resize", handleResize);
+  }, []); // Empty array ensures that effect is only run on mount
+  return windowSize;
+}

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/pages/files/[key]/index.tsx

@@ -54,8 +54,14 @@ export default function FileEntryEditor() {
         ),
       };
     } else {
+      const initialSelections =
+        // set selected nodes initially only if the nodeid is the id of non-page node
+        pages.some((p) => p.id === nodeid) ? [] : nodeid ? [nodeid] : [];
+
       val = {
-        selectedNodes: [],
+        selectedNodes: initialSelections,
+        selectedNodesInitial: initialSelections,
+        selectedPage: warmup.selectedPage(prevstate, pages, nodeid && [nodeid]),
         selectedLayersOnPreview: [],
         design: {
           input: null,
@@ -64,7 +70,6 @@ export default function FileEntryEditor() {
           key: filekey,
           pages: pages,
         },
-        selectedPage: warmup.selectedPage(prevstate, pages, null),
       };
     }
 

editor/scaffolds/canvas/canvas.tsx

@@ -1,19 +1,36 @@
 import React, { useEffect, useState } from "react";
 import styled from "@emotion/styled";
-import { EditorAppbarFragments } from "components/editor";
 import { Canvas } from "@code-editor/canvas";
 import { useEditorState, useWorkspace } from "core/states";
 import { Preview } from "scaffolds/preview";
 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";
 
 /**
  * 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();
@@ -29,7 +46,14 @@ export function VisualContentArea() {
 
   const isEmptyPage = thisPageNodes?.length === 0;
 
-  const [mode, setMode] = useState<"full" | "isolate">("full");
+  const [mode, _setMode] = useState<ViewMode>("full");
+
+  const setMode = (m: ViewMode) => {
+    _setMode(m);
+
+    // update the router
+    (router.query.mode = m) && router.push(router);
+  };
 
   return (
     <CanvasContainer
@@ -74,6 +98,7 @@ export function VisualContentArea() {
                 dispatch({ type: "select-node", node: null });
               }}
               nodes={thisPageNodes}
+              // initialTransform={ } // TODO: if the initial selection is provided from first load, from the query param, we have to focus to fit that node.
               renderItem={(p) => {
                 return <Preview key={p.node.id} target={p.node} {...p} />;
               }}