update layer icons

Author: softmarshmallow

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

@@ -10,8 +10,20 @@ import { Spacer } from "@editor-ui/spacer";
 import { withSeparatorElements } from "@editor-ui/utils";
 import styled from "@emotion/styled";
 import { useTheme } from "@emotion/react";
-import { DotsHorizontalIcon, FileIcon } from "@radix-ui/react-icons";
 import "@editor-ui/theme";
+import { ReflectSceneNodeType } from "@design-sdk/figma-node";
+import {
+  FrameIcon,
+  DotsHorizontalIcon,
+  FileIcon,
+  TextIcon,
+  GroupIcon,
+  ComponentInstanceIcon,
+  Component1Icon,
+  BoxIcon,
+  CircleIcon,
+  ImageIcon,
+} from "@radix-ui/react-icons";
 
 export const IconContainer = styled.span(({ theme }) => ({
   color: theme.colors.mask,
@@ -38,11 +50,41 @@ export const LayerIcon = memo(function LayerIcon({
       ? colors.iconSelected
       : colors.icon;
 
-  switch (type) {
-    case "page":
-      return <FileIcon color={color} />;
+  switch (type as ReflectSceneNodeType) {
+    case ReflectSceneNodeType.group:
+      return <GroupIcon color={color} />;
+    case ReflectSceneNodeType.component:
+      return <Component1Icon color={color} />;
+    case ReflectSceneNodeType.instance:
+      return <ComponentInstanceIcon />;
+    case ReflectSceneNodeType.text:
+      return <TextIcon color={color} />;
+    case ReflectSceneNodeType.frame:
+      return <FrameIcon color={color} />;
+    case ReflectSceneNodeType.ellipse:
+      return <CircleIcon color={color} />;
+    case ReflectSceneNodeType.rectangle:
+      return <BoxIcon color={color} />;
+    case ReflectSceneNodeType.variant_set:
+      return <></>;
+    case ReflectSceneNodeType.constraint:
+      return <></>;
+    case ReflectSceneNodeType.line:
+      return <></>;
+    case ReflectSceneNodeType.vector:
+      return <></>;
+    case ReflectSceneNodeType.star:
+      return <></>;
+    case ReflectSceneNodeType.poligon:
+      return <></>;
+    case ReflectSceneNodeType.boolean_operation:
+      return <></>;
+    case ReflectSceneNodeType.image:
+      return <ImageIcon color={color} />;
+    case ReflectSceneNodeType.unknown:
+      return <></>;
     default:
-      return null;
+      return <></>;
   }
 });
 

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

@@ -1,27 +1,37 @@
 import React, { memo, useCallback, useMemo, useReducer, useState } from "react";
-
 import styled from "@emotion/styled";
 import { TreeView } from "@editor-ui/editor";
-import { LayerRow } from "./editor-layer-hierarchy-item";
+import {
+  LayerRow,
+  IconContainer,
+  LayerIcon,
+} from "./editor-layer-hierarchy-item";
 import { useEditorState } from "core/states";
 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) : [];
+  const layers = root ? flatten(root, ["origin"]) : [];
 
   const renderItem = useCallback(
-    ({ id, name, depth }) => {
+    ({ id, name, depth, type }) => {
+      const selected = state?.selectedNodes?.includes(id);
+
       return (
         <LayerRow
+          icon={
+            <IconContainer>
+              <LayerIcon type={type} selected={selected} />
+            </IconContainer>
+          }
           name={name}
           depth={depth}
           id={id}
           expanded={haschildren(id) == true ? true : undefined}
           key={id}
-          selected={state?.selectedNodes?.includes(id)}
+          selected={selected}
           onAddClick={() => {}}
           onMenuClick={() => {}}
           onDoubleClick={() => {}}
@@ -55,35 +65,44 @@ 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 = (
-  tree: ITreeNode,
+const flatten = <T extends ITreeNode>(
+  tree: T,
+  properties?: string[],
   parent?: string,
   depth: number = 0
 ): FlattenedNode[] => {
-  const convert = (node: ITreeNode, depth: number, parent?: string) => {
+  const convert = (node: T, properties, depth: number, parent?: string) => {
     const result: FlattenedNode = {
       id: node.id,
       name: node.name,
+      type: node.type,
       depth: depth,
       parent,
     };
+
+    properties?.forEach((property) => {
+      (result as object)[property] = node[property];
+    });
+
     return result;
   };
 
   const final = [];
-  final.push(convert(tree, depth, parent));
+  final.push(convert(tree, properties, depth, parent));
   for (const child of tree.children || []) {
-    final.push(...flatten(child, tree.id, depth + 1));
+    final.push(...flatten(child, null, tree.id, depth + 1));
   }
   return final;
 };