feat: find node in the document

tolgee · Apr 9, 2024 · e29630a · e29630a
1 parent dc9dde5
commit e29630a
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 23 deletions.
diff --git a/src/main/endpoints/highlightNode.ts b/src/main/endpoints/highlightNode.ts
@@ -0,0 +1,15 @@
+import { createEndpoint } from "../utils/createEndpoint";
+
+export type HighlightNodeProps = {
+  key: string;
+};
+
+export const highlightNodeEndpoint = createEndpoint(
+  "HIGHLIGHT_NODE",
+  async ({ key }: HighlightNodeProps) => {
+    const node = figma.getNodeById(key);
+    if (node) {
+      figma.viewport.scrollAndZoomIntoView([node]);
+    }
+  }
+);
diff --git a/src/main/main.ts b/src/main/main.ts
@@ -25,6 +25,7 @@ import {
   setPluginData,
 } from "./utils/settingsTools";
 import { DEFAULT_SIZE } from "@/ui/hooks/useWindowSize";
+import { highlightNodeEndpoint } from "./endpoints/highlightNode";
 
 const getAllPages = () => {
   const document = figma.root;
@@ -91,6 +92,7 @@ export default async function () {
   copyPageEndpoint.register();
   updateNodesEndpoint.register();
   setNodesDataEndpoint.register();
+  highlightNodeEndpoint.register();
 
   const config = await getPluginData();
 

diff --git a/src/main/utils/nodeTools.ts b/src/main/utils/nodeTools.ts
@@ -26,6 +26,9 @@ function shouldIncludeNode(
   if (settings.ignorePrefix && node.name.startsWith(settings.ignorePrefix)) {
     return false;
   }
+  if (node.characters.trim().length === 0) {
+    return false;
+  }
   return true;
 }
 

diff --git a/src/ui/hooks/useHighlightNodeMutation.ts b/src/ui/hooks/useHighlightNodeMutation.ts
@@ -0,0 +1,12 @@
+import {
+  HighlightNodeProps,
+  highlightNodeEndpoint,
+} from "@/main/endpoints/highlightNode";
+import { useMutation } from "react-query";
+
+export const useHighlightNodeMutation = () => {
+  return useMutation<void, void, HighlightNodeProps>(
+    [highlightNodeEndpoint.name],
+    (data: HighlightNodeProps) => highlightNodeEndpoint.call(data)
+  );
+};
diff --git a/src/ui/icons/SvgIcons.tsx b/src/ui/icons/SvgIcons.tsx
@@ -50,3 +50,14 @@ export const AddCircle = (props: h.JSX.SVGAttributes<SVGSVGElement>) => {
     </svg>
   );
 };
+
+export const MyLocation = (props: h.JSX.SVGAttributes<SVGSVGElement>) => {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+      <path
+        fill="currentColor"
+        d="M24 16c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm17.88 6C40.96 13.66 34.34 7.04 26 6.12V2h-4v4.12C13.66 7.04 7.04 13.66 6.12 22H2v4h4.12c.92 8.34 7.54 14.96 15.88 15.88V46h4v-4.12c8.34-.92 14.96-7.54 15.88-15.88H46v-4h-4.12zM24 38c-7.73 0-14-6.27-14-14s6.27-14 14-14 14 6.27 14 14-6.27 14-14 14z"
+      />
+    </svg>
+  );
+};
diff --git a/src/ui/views/Index/Index.css b/src/ui/views/Index/Index.css
@@ -24,6 +24,16 @@
   height: 20px;
 }
 
+.highlightButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  color: var(--figma-color-text-secondary);
+}
+
 .disabled {
   color: var(--figma-color-text-disabled);
 }
@@ -46,3 +56,8 @@
   display: grid;
   grid-template-rows: auto 1fr;
 }
+
+.actionsContainer {
+  display: flex;
+  gap: 4px;
+}
diff --git a/src/ui/views/Index/Index.css.d.ts b/src/ui/views/Index/Index.css.d.ts
@@ -1,7 +1,9 @@
 declare const styles: {
+  readonly "actionsContainer": string;
   readonly "connectButton": string;
   readonly "container": string;
   readonly "disabled": string;
+  readonly "highlightButton": string;
   readonly "keyInput": string;
   readonly "languageContainer": string;
   readonly "nsSelect": string;

diff --git a/src/ui/views/Index/Index.tsx b/src/ui/views/Index/Index.tsx
@@ -11,7 +11,7 @@ import {
 } from "@create-figma-plugin/ui";
 
 import { NodeInfo } from "@/types";
-import { Settings, InsertLink } from "@/ui/icons/SvgIcons";
+import { Settings, InsertLink, MyLocation } from "@/ui/icons/SvgIcons";
 import { useApiQuery } from "@/ui/client/useQueryApi";
 import { getConflictingNodes } from "@/tools/getConflictingNodes";
 import { FullPageLoading } from "@/ui/components/FullPageLoading/FullPageLoading";
@@ -29,6 +29,7 @@ import styles from "./Index.css";
 import { KeyInput } from "./KeyInput";
 import { useSelectedNodes } from "@/ui/hooks/useSelectedNodes";
 import { useSetNodesDataMutation } from "@/ui/hooks/useSetNodesDataMutation";
+import { useHighlightNodeMutation } from "@/ui/hooks/useHighlightNodeMutation";
 
 export const Index = () => {
   const selectionLoadable = useSelectedNodes();
@@ -50,6 +51,8 @@ export const Index = () => {
     method: "get",
   });
 
+  const highlightMutation = useHighlightNodeMutation();
+
   const setNodesDataMutation = useSetNodesDataMutation();
 
   const languages = languagesLoadable.data?._embedded?.languages;
@@ -99,6 +102,10 @@ export const Index = () => {
     }
   };
 
+  const handleHighlight = (node: NodeInfo) => {
+    highlightMutation.mutate({ key: node.id });
+  };
+
   const handlePull = () => {
     setRoute("pull", {
       lang: language,
@@ -244,28 +251,40 @@ export const Index = () => {
           }
           actionCallback={(node) => {
             return (
-              <div
-                data-cy="index_link_button"
-                role="button"
-                title={
-                  !node.connected
-                    ? "Connect to existing key"
-                    : "Edit key connection"
-                }
-                onClick={() => handleConnect(node)}
-                className={styles.connectButton}
-              >
-                {node.connected ? (
-                  <InsertLink width={16} height={16} />
-                ) : (
-                  <InsertLink
-                    width={16}
-                    height={16}
-                    style={{
-                      color: "var(--figma-color-text-secondary)",
-                    }}
-                  />
-                )}
+              <div className={styles.actionsContainer}>
+                <div
+                  data-cy="index_highlight_button"
+                  role="button"
+                  title="Locate on the page"
+                  onClick={() => handleHighlight(node)}
+                  className={styles.highlightButton}
+                >
+                  <MyLocation width={16} height={16} />
+                </div>
+
+                <div
+                  data-cy="index_link_button"
+                  role="button"
+                  title={
+                    !node.connected
+                      ? "Connect to existing key"
+                      : "Edit key connection"
+                  }
+                  onClick={() => handleConnect(node)}
+                  className={styles.connectButton}
+                >
+                  {node.connected ? (
+                    <InsertLink width={16} height={16} />
+                  ) : (
+                    <InsertLink
+                      width={16}
+                      height={16}
+                      style={{
+                        color: "var(--figma-color-text-secondary)",
+                      }}
+                    />
+                  )}
+                </div>
               </div>
             );
           }}