add layer hierarchy display

Author: softmarshmallow

editor/components/clear-remote-design-session-cache/index.tsx

@@ -1,10 +1,17 @@
 import React from "react";
 import { RemoteDesignSessionCacheStore } from "../../store";
 
-export function ClearRemoteDesignSessionCache(props: { url: string }) {
+export function ClearRemoteDesignSessionCache(
+  props:
+    | { url: string }
+    | {
+        file: string;
+        node: string;
+      }
+) {
   const clearCache = () => {
-    new RemoteDesignSessionCacheStore({ url: props.url }).clear();
-    alert("cleared - " + props.url);
+    new RemoteDesignSessionCacheStore(props).clear();
+    alert("cleared - " + JSON.stringify(props));
   };
 
   return (

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

@@ -4,45 +4,83 @@ import styled from "@emotion/styled";
 import { TreeView } from "@editor-ui/editor";
 import { ListView } from "@editor-ui/listview";
 import { LayerRow } from "./editor-layer-hierarchy-item";
+import { useEditorState } from "core/states";
 
 export function EditorLayerHierarchy() {
+  const [state] = useEditorState();
+  const root = state.design?.current?.entry;
+  const layers = root ? flatten(root) : [];
+  const [selected, setSelected] = useState<string | null>(null);
+
   const renderItem = useCallback(
-    ({ id, name, depth }, index: number, { isDragging }: ListView.ItemInfo) => {
+    ({ id, name, depth }) => {
       return (
         <LayerRow
           name={name}
           depth={depth}
           id={id}
+          expanded={haschildren(id) == true ? true : undefined}
           key={id}
-          expanded={false}
-          selected={false}
+          selected={selected == id}
           onAddClick={() => {}}
           onMenuClick={() => {}}
           onDoubleClick={() => {}}
-          onPress={() => {}}
+          onPress={() => {
+            setSelected(id);
+          }}
           onSelectMenuItem={() => {}}
           onContextMenu={() => {}}
         />
       );
     },
-    []
+    [selected]
   );
 
-  const pageInfo = [
-    { id: "1", name: "Screen", depth: 0 },
-    { id: "2", name: "Layer 1", depth: 0 },
-    { id: "3", name: "Layer 2", depth: 0 },
-    { id: "4", name: "Layer 3", depth: 0 },
-    { id: "5", name: "Layer 4", depth: 0 },
-  ];
+  const haschildren = useCallback((id: string) => {
+    return layers.some((layer) => layer.parent === id);
+  }, []);
+
   return (
     <TreeView.Root
-      sortable={true}
-      data={pageInfo}
+      data={layers}
       keyExtractor={useCallback((item: any) => item.id, [])}
-      // onMoveItem={}
-      acceptsDrop={() => false}
       renderItem={renderItem}
     />
   );
 }
+
+interface ITreeNode {
+  id: string;
+  name: string;
+  children?: ITreeNode[];
+}
+
+interface FlattenedNode {
+  id: string;
+  name: string;
+  depth: number;
+  parent: string;
+}
+
+const flatten = (
+  tree: ITreeNode,
+  parent?: string,
+  depth: number = 0
+): FlattenedNode[] => {
+  const convert = (node: ITreeNode, depth: number, parent?: string) => {
+    const result: FlattenedNode = {
+      id: node.id,
+      name: node.name,
+      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;
+};

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

@@ -9,7 +9,8 @@ export function SideNavigation(props: {
 
 const Wrapper = styled.div`
   flex: 0;
-  min-width: 200px;
+  width: 200px;
+  /* max-width: 320px; */
   display: flex;
   align-items: stretch;
   flex-direction: column;

editor/core/reducers/workspace-reducer.ts

@@ -10,6 +10,7 @@ export function workspaceReducer(
   switch (action.type) {
     default: {
       return produce(state, (draft) => {
+        // @ts-ignore
         draft.history = historyReducer(state.history, action);
       });
     }

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

@@ -1,9 +1,17 @@
 import { EditorSnapshot, EditorState } from "./editor-state";
 
-export function createInitialEditorState(app: EditorSnapshot): EditorState {
+export function createInitialEditorState(editor: EditorSnapshot): EditorState {
   return {
-    selectedPage: app.selectedPage,
-    selectedNodes: app.selectedNodes,
-    design: app.design,
+    selectedPage: editor.selectedPage,
+    selectedNodes: editor.selectedNodes,
+    design: editor.design,
+  };
+}
+
+export function createPendingEditorState(): EditorState {
+  return {
+    selectedPage: null,
+    selectedNodes: [],
+    design: null,
   };
 }

editor/core/states/editor-state.ts

@@ -1,3 +1,6 @@
+import type { ReflectSceneNode } from "@design-sdk/figma-node";
+import { DesignInput } from "@designto/config/input";
+
 export interface EditorState {
   selectedPage: string;
   selectedNodes: string[];
@@ -10,7 +13,13 @@ export interface EditorSnapshot {
   design: ReflectRepository;
 }
 
-// TODO:
 interface ReflectRepository {
+  /**
+   * fileid; filekey
+   */
+  key: string;
+
+  // TODO:
   pages: [];
+  current: DesignInput;
 }

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

@@ -1,5 +1,8 @@
 import { EditorSnapshot, HistoryState } from "core/states";
-import { createInitialEditorState } from "./editor-initial-state";
+import {
+  createInitialEditorState,
+  createPendingEditorState,
+} from "./editor-initial-state";
 
 export function createInitialHistoryState(
   editor: EditorSnapshot
@@ -11,3 +14,12 @@ export function createInitialHistoryState(
     future: [],
   };
 }
+
+export function createPendingHistoryState(): HistoryState {
+  const applicationState = createPendingEditorState();
+  return {
+    past: [],
+    present: applicationState,
+    future: [],
+  };
+}

editor/core/states/index.tsx

@@ -7,3 +7,8 @@ export * from "./history-state";
 export * from "./workspace-initial-state";
 export * from "./editor-initial-state";
 export * from "./history-initial-state";
+
+//
+
+export * from "./use-editor-state";
+export * from "./use-workspace-state";

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

@@ -0,0 +1,13 @@
+import { useMemo } from "react";
+import { useWorkspaceState } from "./use-workspace-state";
+import { useDispatch, FlatDispatcher } from "../dispatch";
+import { EditorState } from "./editor-state";
+
+export const useEditorState = (): [EditorState, FlatDispatcher] => {
+  const state = useWorkspaceState();
+  const dispatch = useDispatch();
+  return useMemo(
+    () => [state.history.present, dispatch],
+    [state.history.present, dispatch]
+  );
+};

editor/core/states/use-workspace-state.ts

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+import { StateContext } from "./editor-context";
+import { WorkspaceState } from "./workspace-state";
+
+export const useWorkspaceState = (): WorkspaceState => {
+  const value = useContext(StateContext);
+
+  if (!value) {
+    throw new Error(`No StateProvider: this is a logical error.`);
+  }
+
+  return value;
+};