add hierarcy collapse & expand support

Author: softmarshmallow

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

@@ -1,145 +1,34 @@
-export interface ITreeNode {
+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 FlattenedNode {
+export interface FlattenedDisplayItemNode<T = any> {
   id: string;
   name: string;
   depth: number;
   parent: string;
-}
-
-export class StatefulHierarchyController {
-  readonly page: ITreeNode[];
-  public roots: FlattenedNode[][];
-
-  private _displaymodes: {
-    [key: string]: "expanded" | "hidden" | "collapsed" | "normal";
-  } = {};
-
-  public get displaymodes() {
-    return this._displaymodes;
-  }
-
-  constructor({ page }: { page: ITreeNode[] }) {
-    this.page = page;
-    this.flatten();
-    this.roots.forEach((root) => {
-      root.forEach((l) => {
-        this._displaymodes[l.id] = "normal";
-      });
-    });
-  }
-
-  collapse(target: string, command: "collapse" | "expand") {
-    console.log("collapse", target, command);
-    switch (command) {
-      case "collapse":
-        this._displaymodes[target] = "collapsed";
-        break;
-      case "expand":
-        this._displaymodes[target] = "expanded";
-    }
-  }
-
-  get displayLayers() {
-    const displayLayers: FlattenedNode[] = [];
-    this.roots?.forEach((l) => {
-      l.forEach((layer) => {
-        if (this._displaymodes[layer.id] !== "hidden") {
-          displayLayers.push(layer);
-        }
-      });
-    });
-    return displayLayers;
-  }
-
-  /**
-   * returns the display mode.
-   *
-   * first, find the target node with find().
-   *
-   * find the list of parents that has the target node as a direct child or as a nested child.
-   * iterate through the target's parents, if any of them is collapsed, return hidden.
-   * if the target itself is collapsed, return collapsed.
-   * if the target contains children, and not collapsed, return expanded. to check if the target contains a children, use haschildren()
-   * if none of the above, return normal.
-   * @param target
-   */
-  displayMode(target: string): "expanded" | "hidden" | "collapsed" | "normal" {
-    const node = this.find(target);
-    if (!node) {
-      // this can't happen
-      return "normal";
-    }
-    const parents = this.findParents(target);
-    for (const parent of parents) {
-      if (this._displaymodes[parent.id] === "collapsed") {
-        return "hidden";
-      }
-    }
-    if (this._displaymodes[target] === "collapsed") {
-      return "collapsed";
-    }
-    if (this.hasChildren(target)) {
-      return "expanded";
-    }
-    return "normal";
-  }
-
-  find(target: string): FlattenedNode | undefined {
-    const flattened = this.flatten();
-    for (const layer of flattened) {
-      for (const node of layer) {
-        if (node.id === target) {
-          return node;
-        }
-      }
-    }
-  }
-
-  findParents(target: string): FlattenedNode[] {
-    const flattened = this.flatten();
-    const _this = this.find(target);
-    const parents: FlattenedNode[] = [];
-    for (const layer of flattened) {
-      for (const node of layer) {
-        if (node.id === _this.parent) {
-          parents.push(node);
-        }
-      }
-    }
-    return parents;
-  }
-
-  hasChildren(target: string): boolean {
-    const layers = this.flatten();
-    return layers.some((l) => l.some((layer) => layer.parent === target));
-  }
-
-  flatten(): FlattenedNode[][] {
-    if (!this.roots) {
-      this.roots = this.page.filter((l) => !!l).map((layer) => flatten(layer));
-      return this.roots;
-    } else {
-      return this.roots;
-    }
-  }
+  expanded?: boolean | undefined;
+  selected?: boolean;
+  data?: T;
 }
 
 export const flatten = <T extends ITreeNode>(
   tree: T,
   parent?: string,
   depth: number = 0
-): FlattenedNode[] => {
+): FlattenedDisplayItemNode[] => {
   const convert = (node: T, depth: number, parent?: string) => {
     if (!node) {
       return;
     }
 
-    const result: FlattenedNode = {
+    const result: FlattenedDisplayItemNode = {
       ...node,
       depth: depth,
       parent,
@@ -155,3 +44,39 @@ export const flatten = <T extends ITreeNode>(
   }
   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,
@@ -130,6 +129,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,39 +8,61 @@ import {
 } from "./editor-layer-hierarchy-item";
 import { useEditorState } from "core/states";
 import { useDispatch } from "core/dispatch";
-import { flatten, FlattenedNode } from "./editor-layer-heriarchy-controller";
+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[][] = useMemo(() => {
-    return root ? root.filter((l) => !!l).map((layer) => flatten(layer)) : [];
-  }, [root]);
+  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, origin }) => {
-      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={origin} 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 == 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={() => {
@@ -51,15 +73,15 @@ export function EditorLayerHierarchy() {
         />
       );
     },
-    [dispatch, state?.selectedNodes, layers]
+    [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

editor/package.json

@@ -52,7 +52,8 @@
     "recoil": "^0.2.0",
     "rxdb": "^10.5.4",
     "rxjs": "^7.4.0",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.3",
+    "tree-visit": "^0.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.0",

yarn.lock

@@ -13418,6 +13418,11 @@ traverse@0.6.6:
   resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
   integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=
 
+tree-visit@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/tree-visit/-/tree-visit-0.1.0.tgz#ec35cfc13548b41ca5eabd5cbd7f83b574a8ed83"
+  integrity sha512-5lARH0BoZY70TwE+MV7v0KRtApSP4LSxC2JLRCUyK6KUCb8f/Qv9dS+PaWx9h3yKyNYjX2/JHwDx8DyQHHFzlw==
+
 ts-jest@^27.0.2, ts-jest@^27.0.3, ts-jest@^27.0.5:
   version "27.1.1"
   resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-27.1.1.tgz#5a54aca96db1dac37c681f3029dd10f3a8c36192"