Merge pull request #96 from gridaco/staging

Dec #2 - Whole file loading

Author: softmarshmallow

editor/components/app-runner/vanilla-app-runner.tsx

@@ -1,24 +1,65 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 
 export function VanillaRunner({
   width,
   height,
   source,
+  enableInspector = true,
 }: {
   width: string;
   height: string;
   source: string;
   componentName: string;
+  enableInspector?: boolean;
 }) {
+  const ref = useRef<HTMLIFrameElement>();
+
+  useEffect(() => {
+    if (ref.current && enableInspector) {
+      ref.current.onload = () => {
+        const matches = ref.current.contentDocument.querySelectorAll(
+          "div, span, button, img, image, svg"
+        );
+        matches.forEach((el) => {
+          const tint = "rgba(20, 0, 255, 0.2)";
+          const tintl = "rgba(20, 0, 255, 0.5)";
+          const originstyle = {
+            //@ts-ignore
+            ...el.style,
+          };
+
+          if (el.id.includes("RootWrapper")) {
+          } else {
+            el.addEventListener("mouseenter", (e) => {
+              //@ts-ignore
+              e.target.style.background = tint;
+              //@ts-ignore
+              e.target.style.outline = `${tintl} solid 1px`;
+            });
+            el.addEventListener("mouseleave", (e) => {
+              //@ts-ignore
+              e.target.style.background = originstyle.background;
+              //@ts-ignore
+              e.target.style.outline = originstyle.outline;
+            });
+          }
+        });
+
+        ref.current.contentWindow.addEventListener("click", (e) => {
+          console.log("click", e);
+        });
+      };
+    }
+  }, [ref.current, enableInspector]);
+
   const inlinesource = source || `<div></div>`;
   return (
-    <>
-      <iframe
-        sandbox="allow-same-origin"
-        srcDoc={inlinesource}
-        width={width}
-        height={height}
-      />
-    </>
+    <iframe
+      ref={ref}
+      sandbox="allow-same-origin"
+      srcDoc={inlinesource}
+      width={width}
+      height={height}
+    />
   );
 }

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

@@ -6,7 +6,7 @@ export function AppbarFragmentForCanvas() {
   const [state] = useEditorState();
   return (
     <RootWrapperAppbarFragmentForCanvas>
-      <Breadcrumbs>{state.design?.current?.name}</Breadcrumbs>
+      <Breadcrumbs>{state.design?.input?.name}</Breadcrumbs>
     </RootWrapperAppbarFragmentForCanvas>
   );
 }

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

@@ -12,8 +12,13 @@ import { useDispatch } from "core/dispatch";
 export function EditorLayerHierarchy() {
   const [state] = useEditorState();
   const dispatch = useDispatch();
-  const root = state.design?.current?.entry;
-  const layers = root ? flatten(root, ["origin"]) : [];
+  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 renderItem = useCallback(
     ({ id, name, depth, type }) => {
@@ -48,14 +53,14 @@ export function EditorLayerHierarchy() {
 
   const haschildren = useCallback(
     (id: string) => {
-      return layers.some((layer) => layer.parent === id);
+      return layers.some((l) => l.some((layer) => layer.parent === id));
     },
-    [layers.length]
+    [layers]
   );
 
   return (
     <TreeView.Root
-      data={layers}
+      data={layers.flat()}
       keyExtractor={useCallback((item: any) => item.id, [])}
       renderItem={renderItem}
     />
@@ -79,11 +84,14 @@ interface FlattenedNode {
 
 const flatten = <T extends ITreeNode>(
   tree: T,
-  properties?: string[],
   parent?: string,
   depth: number = 0
 ): FlattenedNode[] => {
-  const convert = (node: T, properties, depth: number, parent?: string) => {
+  const convert = (node: T, depth: number, parent?: string) => {
+    if (!node) {
+      return;
+    }
+
     const result: FlattenedNode = {
       id: node.id,
       name: node.name,
@@ -92,17 +100,13 @@ const flatten = <T extends ITreeNode>(
       parent,
     };
 
-    properties?.forEach((property) => {
-      (result as object)[property] = node[property];
-    });
-
     return result;
   };
 
   const final = [];
-  final.push(convert(tree, properties, depth, parent));
-  for (const child of tree.children || []) {
-    final.push(...flatten(child, null, tree.id, depth + 1));
+  final.push(convert(tree, depth, parent));
+  for (const child of tree?.children || []) {
+    final.push(...flatten(child, tree.id, depth + 1));
   }
   return final;
 };

editor/components/editor/editor-pages-list/editor-page-item.tsx

@@ -1 +1,35 @@
-export const dummy = "";
+import React from "react";
+import { FileIcon } from "@radix-ui/react-icons";
+import styled from "@emotion/styled";
+import { useTheme } from "@emotion/react";
+import { TreeView } from "@editor-ui/hierarchy";
+
+export function EditorPageItem({
+  id,
+  name,
+  selected,
+  onPress,
+}: {
+  id: string;
+  name: string;
+  selected: boolean;
+  onPress: () => void;
+}) {
+  const { icon: iconColor, iconSelected: iconSelectedColor } =
+    useTheme().colors;
+
+  return (
+    <TreeView.Row
+      depth={0}
+      id={id}
+      key={id}
+      sortable={false}
+      selected={selected}
+      onPress={onPress}
+      onDoubleClick={() => {}}
+      icon={<FileIcon color={selected ? iconSelectedColor : iconColor} />}
+    >
+      {name}
+    </TreeView.Row>
+  );
+}

editor/components/editor/editor-pages-list/editor-pages-list.tsx

@@ -1 +1,55 @@
-export const dummy = "";
+import React, { useCallback } from "react";
+import styled from "@emotion/styled";
+import { TreeView } from "@editor-ui/hierarchy";
+import { EditorPageItem } from "./editor-page-item";
+import { useEditorState } from "core/states";
+import { useDispatch } from "core/dispatch";
+
+const Container = styled.div<{ expanded: boolean }>(({ theme, expanded }) => ({
+  ...(expanded ? { height: "200px" } : { flex: "0 0 auto" }),
+  display: "flex",
+  flexDirection: "column",
+}));
+
+type PageInfo = {
+  id: string;
+  name: string;
+  type: "design" | "components" | "styles" | "assets";
+};
+
+export function EditorPagesList() {
+  const [state] = useEditorState();
+  const dispatch = useDispatch();
+  const pages = state.design?.pages ?? [];
+
+  return (
+    <Container expanded={true}>
+      <TreeView.Root
+        sortable={false}
+        scrollable={false}
+        data={pages}
+        keyExtractor={useCallback((item: PageInfo) => item.id, [])}
+        renderItem={useCallback(
+          (page: PageInfo, index) => {
+            const selected = page.id === state.selectedPage;
+            return (
+              <EditorPageItem
+                key={page.id}
+                selected={selected}
+                id={page.id}
+                name={page.name}
+                onPress={() => {
+                  dispatch({
+                    type: "select-page",
+                    page: page.id,
+                  });
+                }}
+              />
+            );
+          },
+          [state.selectedPage]
+        )}
+      />
+    </Container>
+  );
+}

editor/components/editor/editor-pages-list/index.ts

@@ -1 +1 @@
-export const dummy = "";
+export { EditorPagesList } from "./editor-pages-list";

editor/components/editor/editor-sidebar/editor-sidebar.tsx

@@ -1,13 +1,25 @@
-import { SideNavigation } from "components/side-navigation";
 import React from "react";
+import styled from "@emotion/styled";
+import { SideNavigation } from "components/side-navigation";
 import { EditorAppbarFragments } from "../editor-appbar";
 import { EditorLayerHierarchy } from "../editor-layer-hierarchy";
+import { EditorPagesList } from "../editor-pages-list";
 
 export function EditorSidebar() {
   return (
     <SideNavigation>
-      {/* <EditorAppbarFragments.Sidebar /> */}
-      <EditorLayerHierarchy />
+      <EditorAppbarFragments.Sidebar />
+      <SidebarSegment flex={"none"}>
+        <EditorPagesList />
+      </SidebarSegment>
+      <SidebarSegment flex={1}>
+        <EditorLayerHierarchy />
+      </SidebarSegment>
     </SideNavigation>
   );
 }
+
+const SidebarSegment = styled.div<{ flex: number | "none" }>`
+  flex: ${(p) => p.flex};
+  overflow-y: scroll;
+`;

editor/components/side-navigation/side-navigation.tsx

@@ -15,4 +15,6 @@ const Wrapper = styled.div`
   align-items: stretch;
   flex-direction: column;
   min-height: 100%;
+  height: 100vh;
+  overflow-y: hidden;
 `;

editor/core/reducers/editor-reducer.ts

@@ -1,5 +1,5 @@
 import produce from "immer";
-import { Action, SelectNodeAction } from "core/actions";
+import { Action, SelectNodeAction, SelectPageAction } from "core/actions";
 import { EditorState } from "core/states";
 
 export function editorReducer(state: EditorState, action: Action): EditorState {
@@ -12,8 +12,13 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
       });
     }
     case "select-page": {
-      // return pageReducer(state, action);
+      const { page } = <SelectPageAction>action;
+      return produce(state, (draft) => {
+        draft.selectedPage = page;
+      });
     }
+    default:
+      throw new Error(`Unhandled action type: ${action["type"]}`);
   }
 
   return state;

editor/core/states/editor-state.ts

@@ -5,23 +5,23 @@ export interface EditorState {
   selectedPage: string;
   selectedNodes: string[];
   selectedLayersOnPreview: string[];
-  design: ReflectRepository;
+  design: FigmaReflectRepository;
 }
 
 export interface EditorSnapshot {
   selectedPage: string;
   selectedNodes: string[];
   selectedLayersOnPreview: string[];
-  design: ReflectRepository;
+  design: FigmaReflectRepository;
 }
 
-interface ReflectRepository {
+interface FigmaReflectRepository {
   /**
    * fileid; filekey
    */
   key: string;
 
   // TODO:
-  pages: [];
-  current: DesignInput;
+  pages: { id: string; name: string; children: ReflectSceneNode[] }[];
+  input: DesignInput;
 }