Merge pull request #98 from gridaco/staging

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

Author: softmarshmallow

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}
       >