Merge pull request #198 from gridaco/staging

Auto expand & Auto focus of selection on Layer Hierarchy

Author: softmarshmallow

editor/components/code-editor/monaco.tsx

@@ -101,7 +101,7 @@ export function MonacoEditor({ path, ...props }: MonacoEditorProps) {
           // if change is caused by formatter, ignore.
           return;
         }
-        props.onChange(...v);
+        props.onChange?.(...v);
       }}
       options={{
         ...props.options,

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

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from "react";
 import { TreeView } from "@editor-ui/editor";
 import {
   LayerRow,
@@ -16,11 +22,36 @@ import {
   FlattenedDisplayItemNode,
 } from "./editor-layer-heriarchy-controller";
 import type { ReflectSceneNode } from "@design-sdk/figma-node";
+import type { IVirtualizedList } from "@editor-ui/listview";
+import useMeasure from "react-use-measure";
+import { p } from "@tree-/q";
 
 // TODO:
 // - add navigate context menu
 // - add go to main component
-// - add reveal and focus to selected layers
+
+function useAutoFocus({
+  ref,
+  layers,
+  targets,
+}: {
+  ref: React.RefObject<IVirtualizedList>;
+  targets: string[];
+  layers: FlattenedDisplayItemNode[][];
+}) {
+  // TODO: we use useLayoutEffect to focus to the selection, because it relates to auto expand & layer calculation.
+  // this can be simplified. and we can use plain old useEffect.
+  useLayoutEffect(() => {
+    // auto focus to selection
+    const focusnode = targets[0];
+    if (focusnode) {
+      const index = layers.flat().findIndex((i) => i.id == focusnode);
+      if (index) {
+        ref.current?.scrollToIndex(index);
+      }
+    }
+  }, [ref, targets, layers]);
+}
 
 /**
  *
@@ -35,13 +66,18 @@ export function DesignLayerHierarchy({
   rootNodeIDs?: string[];
   expandAll?: boolean;
 }) {
+  const [sizeRef, { height, width }] = useMeasure({
+    debounce: { scroll: 100, resize: 100 },
+  });
   const [state] = useEditorState();
   const { selectedNodes, selectedPage, design } = state;
   const { highlightLayer, highlightedLayer } = useWorkspace();
   const dispatch = useDispatch();
 
   const [expands, setExpands] = useState<string[]>(state?.selectedNodes ?? []);
 
+  const ref = React.useRef<IVirtualizedList>(null);
+
   // get the root nodes (if the rootNodeIDs is not specified, use the selected page's children)
   let roots: ReflectSceneNode[] = [];
   if (rootNodeIDs?.length > 0) {
@@ -63,6 +99,13 @@ export function DesignLayerHierarchy({
       : [];
   }, [roots, state?.selectedNodes, expands]);
 
+  useAutoFocus({
+    ref,
+    layers,
+    targets: selectedNodes,
+  });
+
+  // exapnd all nodes
   useEffect(() => {
     if (expandAll) {
       const ids = layers.reduce((acc, item) => {
@@ -73,6 +116,26 @@ export function DesignLayerHierarchy({
     }
   }, [layers, expandAll]);
 
+  // automatically expand the selected nodes' parents
+  useEffect(() => {
+    const newexpands = [];
+
+    // loop through all roots
+    for (const child of roots) {
+      // if the node contains the selected node, add to expands.
+      selectedNodes.forEach((id) => {
+        const path = p(id, { data: child });
+        if (path.length > 0) {
+          newexpands.push(...path);
+        }
+      });
+    }
+
+    setExpands(
+      Array.from(new Set([...expands, ...newexpands])).filter(Boolean)
+    );
+  }, [selectedNodes]);
+
   const renderItem = useCallback(
     ({
       id,
@@ -123,13 +186,27 @@ export function DesignLayerHierarchy({
   );
 
   return (
-    <TreeView.Root
-      data={layers.flat()}
-      keyExtractor={useCallback((item: any) => item.id, [])}
-      renderItem={renderItem}
-    />
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+      }}
+      ref={sizeRef}
+    >
+      <TreeView.Root
+        ref={ref}
+        data={layers.flat()}
+        keyExtractor={useCallback((item: any) => item.id, [])}
+        renderItem={renderItem}
+        scrollable
+        expandable
+        virtualized={{
+          width: width,
+          height: height,
+        }}
+      />
+    </div>
   );
-  //
 }
 
 /**

editor/package.json

@@ -29,6 +29,7 @@
     "@mui/material": "^5.6.1",
     "@radix-ui/react-toast": "^1.1.1",
     "@reflect-blocks/figma-embed": "^0.0.5",
+    "@tree-/q": "^0.0.0",
     "@use-gesture/react": "^10.2.11",
     "@visx/gradient": "^1.7.0",
     "@visx/group": "^1.7.0",

editor/scaffolds/inspector/section-code.tsx

@@ -16,11 +16,43 @@ import { copy } from "utils/clipboard";
 import styled from "@emotion/styled";
 import { GearIcon, CodeIcon } from "@radix-ui/react-icons";
 import { useOpenPreferences, usePreferences } from "@code-editor/preferences";
+import { colors } from "theme";
+
+/**
+ * a debounced state for hiding the monaco view, since it blinks after loading
+ */
+function useExtraLoading(result: Result | null, delay = 800) {
+  const [loading, setLoading] = useState(true);
+
+  // set loading to false after delay, if result is givven.
+  useEffect(() => {
+    if (!result?.code) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [result?.code]);
+
+  // reset loading to true on result change.
+  useEffect(() => {
+    setLoading(true);
+  }, [result?.code]);
+
+  return loading;
+}
 
 export function CodeSection() {
   const { config: preferences } = usePreferences();
   const { target, root } = useTargetContainer();
   const [result, setResult] = useState<Result>(null);
+  const loading = useExtraLoading(result);
+
   const dispatch = useDispatch();
 
   const on_result = (result: Result) => {
@@ -82,43 +114,64 @@ export function CodeSection() {
         </div>
       </PropertyGroupHeader>
       <CliIntegrationSnippet node={target} />
-      {code ? (
-        <>
-          <MonacoEditor
-            readonly
-            width={"100%"}
-            value={code.raw}
-            height={viewheight}
-            fold_comments_on_load
-            path={dummy_file_name_map[preferences.framework.framework]}
-            options={{
-              lineNumbers: "off",
-              glyphMargin: false,
-              minimap: { enabled: false },
-              showFoldingControls: "mouseover",
-              guides: {
-                indentation: false,
-                highlightActiveIndentation: false,
-              },
-            }}
-          />
-        </>
-      ) : (
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            height: viewheight,
-          }}
-        >
+      <CodeView
+        style={{
+          height: viewheight,
+        }}
+      >
+        <div className="loading-overlay" data-loading={loading}>
           <CircularProgress size={24} />
         </div>
-      )}
+        <MonacoEditor
+          readonly
+          width={"100%"}
+          value={code?.raw ?? ""}
+          height={"100%"}
+          fold_comments_on_load
+          path={dummy_file_name_map[preferences.framework.framework]}
+          options={{
+            lineNumbers: "off",
+            glyphMargin: false,
+            minimap: { enabled: false },
+            showFoldingControls: "mouseover",
+            guides: {
+              indentation: false,
+              highlightActiveIndentation: false,
+            },
+          }}
+        />
+      </CodeView>
     </PropertyGroup>
   );
 }
 
+const CodeView = styled.div`
+  position: relative;
+
+  .loading-overlay {
+    user-select: none;
+    pointer-events: none;
+    background-color: ${colors.color_editor_bg_on_dark};
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    z-index: 9;
+    opacity: 1;
+
+    &[data-loading="false"] {
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out;
+    }
+
+    &[data-loading="true"] {
+      opacity: 1;
+    }
+  }
+`;
+
 const dummy_file_name_map = {
   flutter: "main.dart",
   react: "app.tsx",

lib/readme.md

@@ -0,0 +1 @@
+# libs (not part of workspace)

lib/tree-q/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Grida Inc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

lib/tree-q/index.ts

@@ -0,0 +1 @@
+export * from "./path/p";

lib/tree-q/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: "ts-jest",
+};

lib/tree-q/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@tree-/q",
+  "version": "0.0.0",
+  "description": "Tree query utility",
+  "homepage": "https://github.com/gridaco/code/tree/main/lib/tree-q",
+  "repository": "https://github.com/gridaco/code",
+  "author": "Grida Inc",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "test": "jest",
+    "build": "tsc",
+    "prepack": "yarn run clean && yarn run build"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/node": "^18.11.18",
+    "jest": "^29.3.1",
+    "typescript": "^4.9.4",
+    "ts-jest": "^29.0.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "readme.md",
+    "LICENSE",
+    "dist"
+  ]
+}

lib/tree-q/path/p.test.ts

@@ -0,0 +1,30 @@
+import { p } from "./p";
+
+describe("p", () => {
+  const data = {
+    id: "1",
+    children: [
+      {
+        id: "2",
+        children: [
+          {
+            id: "3",
+            children: [],
+          },
+        ],
+      },
+    ],
+  };
+
+  test("returns the correct path", () => {
+    expect(p("3", { data })).toEqual(["1", "2", "3"]);
+  });
+
+  test("returns the correct path", () => {
+    expect(p("2", { data })).toEqual(["1", "2"]);
+  });
+
+  test("returns an empty array if id is not found", () => {
+    expect(p("4", { data })).toEqual([]);
+  });
+});