Dec #3 Home layout & Files management support with in-editor caching & performance boost

editor/babel.config.js

@@ -13,6 +13,8 @@ module.exports = {
           scaffolds: "./scaffolds",
           utils: "./utils",
           core: "./core",
+          store: "./store",
+          repository: "./repository",
           public: "./public",
           hooks: "./hooks",
         },

editor/components/canvas/controller-zoom-control.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "@emotion/styled";
 import RefreshSharpIcon from "@material-ui/icons/RefreshSharp";
+import { colors } from "theme";
 
 export function ZoomControl({
   scale,
@@ -87,8 +88,8 @@ const Controls = styled.div`
   box-sizing: border-box;
   border-radius: 4px;
   padding: 4px;
-  background-color: #252526;
-  box-shadow: #25252650 0px 0px 0px 16px inset;
+  background-color: ${colors.color_editor_bg_on_dark};
+  box-shadow: ${colors.color_editor_bg_on_dark} 0px 0px 0px 16px inset;
 `;
 
 const ControlsContainer = styled.div`

editor/components/canvas/interactive-canvas.tsx

@@ -34,7 +34,7 @@ export function InteractiveCanvas({
 const InteractiveCanvasWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
+  /* overflow-y: auto; */
   overflow-x: hidden;
   flex: 1;
 `;

editor/components/code-editor/monaco-mock-empty.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+export function MonacoEmptyMock() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        textAlign: "right",
+        color: "#858585",
+        background: "#1e1e1e",
+      }}
+    >
+      {Array.from(Array(100).keys()).map((i) => (
+        <span
+          style={{
+            left: 0,
+            width: 36,
+            fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+            fontWeight: "normal",
+            fontSize: 12,
+            lineHeight: "18px",
+          }}
+          key={i.toString()}
+        >
+          {i + 1}
+        </span>
+      ))}
+    </div>
+  );
+}

editor/components/code-editor/monaco.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import Editor, { useMonaco, Monaco } from "@monaco-editor/react";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+import { MonacoEmptyMock } from "./monaco-mock-empty";
 
 export interface MonacoEditorProps {
   defaultValue?: string;
@@ -26,7 +27,7 @@ export function MonacoEditor(props: MonacoEditorProps) {
       defaultLanguage={
         pollyfill_language(props.defaultLanguage) ?? "typescript"
       }
-      loading={<></>}
+      loading={<MonacoEmptyMock />}
       defaultValue={props.defaultValue ?? "// no content"}
       theme="vs-dark"
       options={{ ...props.options }}

editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "@emotion/styled";
 import { useEditorState } from "core/states";
+import { colors } from "theme";
 
 export function AppbarFragmentForCanvas() {
   const [state] = useEditorState();
@@ -19,7 +20,7 @@ const RootWrapperAppbarFragmentForCanvas = styled.div`
   align-items: center;
   gap: 10px;
   align-self: stretch;
-  background-color: rgba(37, 37, 38, 1);
+  background-color: ${colors.color_editor_bg_on_dark};
   box-sizing: border-box;
   padding: 10px 24px;
 `;

editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx

@@ -34,7 +34,6 @@ const RootWrapperAppbarFragmentForCodeEditor = styled.div`
   flex: 1;
   gap: 10px;
   align-self: stretch;
-  background-color: rgba(30, 30, 30, 1);
   box-sizing: border-box;
   padding-bottom: 14px;
   padding-top: 14px;

editor/components/editor/editor-appbar/editor-appbar-fragment-for-sidebar.tsx

@@ -1,15 +1,23 @@
 import React from "react";
 import styled from "@emotion/styled";
+import { ArrowBack } from "@material-ui/icons";
+import { useRouter } from "next/router";
+import { colors } from "theme";
 
 export function AppbarFragmentForSidebar() {
+  const router = useRouter();
+
   return (
     <RootWrapperAppbarFragmentForSidebar>
-      <div
+      <ArrowBack
         style={{
-          width: 24,
-          height: 24,
+          fontSize: "20px",
+          fill: "white",
+        }}
+        onClick={() => {
+          router.push("/");
         }}
-      ></div>
+      />
       {/* <IconsMdiMenu
         // TODO: replace resource
         src="https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/333b/8550/4bdd6a7ceffe5b23b37bc68c1fb7a4ab"
@@ -28,7 +36,7 @@ const RootWrapperAppbarFragmentForSidebar = styled.div`
   gap: 10px;
   width: 200px;
   align-self: stretch;
-  background-color: rgba(37, 37, 38, 1);
+  background-color: ${colors.color_editor_bg_on_dark};
   box-sizing: border-box;
   padding: 14px 16px;
 `;

editor/components/editor/editor-layer-hierarchy/editor-layer-heriarchy-controller.ts

@@ -0,0 +1,82 @@
+import { ReflectSceneNode } from "@design-sdk/figma";
+import { visit } from "tree-visit";
+
+export interface ITreeNode<T = any> {
+  id: string;
+  name: string;
+  children?: ITreeNode[];
+  data?: T;
+}
+
+export interface FlattenedDisplayItemNode<T = any> {
+  id: string;
+  name: string;
+  depth: number;
+  parent: string;
+  expanded?: boolean | undefined;
+  selected?: boolean;
+  data?: T;
+}
+
+export const flatten = <T extends ITreeNode>(
+  tree: T,
+  parent?: string,
+  depth: number = 0
+): FlattenedDisplayItemNode[] => {
+  const convert = (node: T, depth: number, parent?: string) => {
+    if (!node) {
+      return;
+    }
+
+    const result: FlattenedDisplayItemNode = {
+      ...node,
+      depth: depth,
+      parent,
+    };
+
+    return result;
+  };
+
+  const final = [];
+  final.push(convert(tree, depth, parent));
+  for (const child of tree?.children || []) {
+    final.push(...flatten(child, tree.id, depth + 1));
+  }
+  return final;
+};
+
+export function flattenNodeTree(
+  root: ReflectSceneNode,
+  selections: string[],
+  expands: string[]
+): FlattenedDisplayItemNode<ReflectSceneNode>[] {
+  const flattened: FlattenedDisplayItemNode<ReflectSceneNode>[] = [];
+
+  visit<ReflectSceneNode>(root, {
+    getChildren: (layer) => {
+      if (expands.includes(layer.id)) {
+        return layer.children;
+      }
+      return [];
+    },
+
+    onEnter(layer, indexPath) {
+      flattened.push({
+        id: layer.id,
+        name: layer.name,
+        parent: layer.parent?.id,
+        depth: indexPath.length - 1,
+        expanded:
+          layer.children.length <= 0
+            ? undefined
+            : expands.includes(layer.id)
+            ? true
+            : false,
+        selected: selections.includes(layer.id),
+        data: layer,
+      });
+    },
+  });
+
+  return flattened;
+}

editor/components/editor/editor-layer-hierarchy/editor-layer-hierarchy-item.tsx

@@ -94,7 +94,6 @@ export const LayerRow = memo(
       name,
       selected,
       onHoverChange,
-      onAddClick,
       onMenuClick,
       onClickChevron,
       onPress,
@@ -105,7 +104,6 @@ export const LayerRow = memo(
     }: TreeView.TreeRowProps<""> & {
       name: string;
       selected: boolean;
-      onAddClick: () => void;
       onMenuClick: () => void;
       children?: ReactNode;
     },
@@ -130,6 +128,7 @@ export const LayerRow = memo(
         disabled={false}
         onPress={onPress}
         onClick={onClick}
+        onClickChevron={onClickChevron}
         onDoubleClick={onDoubleClick}
         {...props}
       >

editor/components/editor/editor-layer-hierarchy/editor-layer-hierarchy-tree.tsx

@@ -8,36 +8,61 @@ import {
 } from "./editor-layer-hierarchy-item";
 import { useEditorState } from "core/states";
 import { useDispatch } from "core/dispatch";
+import {
+  flattenNodeTree,
+  FlattenedDisplayItemNode,
+} from "./editor-layer-heriarchy-controller";
 
 export function EditorLayerHierarchy() {
   const [state] = useEditorState();
   const dispatch = useDispatch();
+
+  const [expands, setExpands] = useState<string[]>(state?.selectedNodes ?? []);
+
   const root = state.selectedPage
     ? state.design.pages.find((p) => p.id == state.selectedPage).children
     : [state.design?.input?.entry];
 
-  const layers: FlattenedNode[][] = root
-    ? root.filter((l) => !!l).map((layer) => flatten(layer))
-    : [];
+  const layers: FlattenedDisplayItemNode[][] = useMemo(() => {
+    return root
+      ? root
+          .filter((l) => !!l)
+          .map((layer) => flattenNodeTree(layer, state.selectedNodes, expands))
+      : [];
+  }, [root, state?.selectedNodes, expands]);
 
   const renderItem = useCallback(
-    ({ id, name, depth, type }) => {
-      const selected = state?.selectedNodes?.includes(id);
+    ({
+      id,
+      name,
+      expanded,
+      selected,
+      depth,
+      data,
+    }: FlattenedDisplayItemNode) => {
+      // const _haschildren = useMemo(() => haschildren(id), [id, depth]);
+      // const _haschildren = haschildren(id);
 
       return (
         <LayerRow
           icon={
             <IconContainer>
-              <LayerIcon type={type} selected={selected} />
+              <LayerIcon type={data.origin} selected={selected} />
             </IconContainer>
           }
           name={name}
-          depth={depth}
+          depth={depth + 1} // because the root is not a layer. it's the page, the array of roots.
           id={id}
-          expanded={haschildren(id) == true ? true : undefined}
+          expanded={expanded}
           key={id}
           selected={selected}
-          onAddClick={() => {}}
+          onClickChevron={() => {
+            if (expands.includes(id)) {
+              setExpands(expands.filter((e) => e !== id));
+            } else {
+              setExpands([...expands, id]);
+            }
+          }}
           onMenuClick={() => {}}
           onDoubleClick={() => {}}
           onPress={() => {
@@ -48,15 +73,15 @@ export function EditorLayerHierarchy() {
         />
       );
     },
-    [state?.selectedNodes]
+    [dispatch, state?.selectedNodes, layers, expands]
   );
 
-  const haschildren = useCallback(
-    (id: string) => {
-      return layers.some((l) => l.some((layer) => layer.parent === id));
-    },
-    [layers]
-  );
+  // const haschildren = useCallback(
+  //   (id: string) => {
+  //     return layers.some((l) => l.some((layer) => layer.parent === id));
+  //   },
+  //   [layers]
+  // );
 
   return (
     <TreeView.Root
@@ -66,47 +91,3 @@ export function EditorLayerHierarchy() {
     />
   );
 }
-
-interface ITreeNode {
-  id: string;
-  name: string;
-  type: string;
-  children?: ITreeNode[];
-}
-
-interface FlattenedNode {
-  id: string;
-  name: string;
-  depth: number;
-  type: string;
-  parent: string;
-}
-
-const flatten = <T extends ITreeNode>(
-  tree: T,
-  parent?: string,
-  depth: number = 0
-): FlattenedNode[] => {
-  const convert = (node: T, depth: number, parent?: string) => {
-    if (!node) {
-      return;
-    }
-
-    const result: FlattenedNode = {
-      id: node.id,
-      name: node.name,
-      type: node.type,
-      depth: depth,
-      parent,
-    };
-
-    return result;
-  };
-
-  const final = [];
-  final.push(convert(tree, depth, parent));
-  for (const child of tree?.children || []) {
-    final.push(...flatten(child, tree.id, depth + 1));
-  }
-  return final;
-};