add nodes to focued

graphql-editor · Jan 12, 2024 · 8e83720 · 8e83720
1 parent a93f36c
commit 8e83720
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 28 deletions.
diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/Node/Field/ActiveFieldName.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/Node/Field/ActiveFieldName.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { ParserField } from "graphql-js-tree";
 import styled from "@emotion/styled";
 import { FIELD_NAME_SIZE } from "@/Graf/constants";
@@ -33,6 +33,16 @@ export const ActiveFieldName: React.FC<
     onClick?: (n: ParserField) => void;
   }
 > = ({ args, name, parentTypes, onClick, printPreviewActive }) => {
+  const handleClickOnParamType = useCallback(
+    (field: ParserField) => {
+      if (!onClick) {
+        return undefined;
+      }
+      onClick(field);
+    },
+    [onClick]
+  );
+
   if (args && args.length > 0) {
     return (
       <Main printPreviewActive={printPreviewActive}>
@@ -45,7 +55,7 @@ export const ActiveFieldName: React.FC<
                 <span>{a.name}</span>
                 :
                 <ActiveType
-                  onClick={onClick ? () => onClick(a) : undefined}
+                  onClick={() => handleClickOnParamType(a)}
                   type={a.type}
                   parentTypes={parentTypes}
                 />

diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/Node/Field/index.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/Node/Field/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { useTreesState } from "@/state/containers/trees";
 import { FieldProps as GrafFieldProps } from "@/Graf/Node/models";
 import styled from "@emotion/styled";
@@ -10,7 +10,7 @@ import {
 import { ActiveFieldName } from "@/Relation/PanZoom/LinesDiagram/Node/Field/ActiveFieldName";
 import { ActiveType } from "@/Relation/PanZoom/LinesDiagram/Node/Field/ActiveType";
 import { DOMClassNames } from "@/shared/hooks/DOMClassNames";
-import { useRelationsState } from "@/state/containers";
+import { useRelationNodesState, useRelationsState } from "@/state/containers";
 import { isEditableParentField } from "@/utils";
 import { Link } from "@aexol-studio/styling-system";
 
@@ -41,21 +41,41 @@ type FieldProps = Pick<GrafFieldProps, "node"> & {
 export const Field: React.FC<FieldProps> = ({ node }) => {
   const { parentTypes, setSelectedNodeId, getParentOfField } = useTreesState();
   const { setEditMode, printPreviewActive } = useRelationsState();
-  const nodeClick = (n: ParserField) => {
-    const parent = getParentOfField(n);
-    if (parent) {
-      if (isEditableParentField(parent)) {
-        setEditMode(parent.id);
+  const {
+    setTypeRelatedNodesToFocusedNode,
+    typeRelatedToFocusedNode,
+    focusedNodes,
+  } = useRelationNodesState();
+  const nodeClick = useCallback(
+    (n: ParserField) => {
+      const parent = getParentOfField(n);
+      if (parent) {
+        if (isEditableParentField(parent)) {
+          setEditMode(parent.id);
+          return;
+        }
+        setTypeRelatedNodesToFocusedNode(parent);
+        const alreadyExistsInTypeRelatedToFocusedNode =
+          typeRelatedToFocusedNode.find((el) => el.id === parent.id);
+        const alreadyExistsInFocusedNodes = focusedNodes?.find(
+          (el) => el.id === parent.id
+        );
+        if (
+          alreadyExistsInFocusedNodes ||
+          alreadyExistsInTypeRelatedToFocusedNode
+        ) {
+          setSelectedNodeId({
+            source: "relation",
+            value: {
+              id: parent.id,
+              name: parent.name,
+            },
+          });
+        }
       }
-      setSelectedNodeId({
-        source: "relation",
-        value: {
-          id: parent.id,
-          name: parent.name,
-        },
-      });
-    }
-  };
+    },
+    [typeRelatedToFocusedNode, focusedNodes]
+  );
   return (
     <Main
       className={DOMClassNames.nodeField}
@@ -81,7 +101,9 @@ export const Field: React.FC<FieldProps> = ({ node }) => {
       <ActiveType
         type={node.type}
         parentTypes={parentTypes}
-        onClick={() => nodeClick(node)}
+        onClick={() => {
+          nodeClick(node);
+        }}
       />
       {node.fromLibrary && <Link />}
     </Main>

diff --git a/packages/editor/src/Relation/Relation.tsx b/packages/editor/src/Relation/Relation.tsx
@@ -17,14 +17,23 @@ export const Relation: React.FC<{ setInitialSchema: (s: string) => void }> = ({
   setInitialSchema,
 }) => {
   const { activeNode, focusMode, allNodes } = useTreesState();
-  const { filteredFocusedNodes, filteredRelationNodes } =
-    useRelationNodesState();
+  const {
+    filteredFocusedNodes,
+    filteredRelationNodes,
+    filteredTypeRelatedToFocusedNode,
+  } = useRelationNodesState();
   const { editMode, ctrlToZoom } = useRelationsState();
   const { set, routes } = useRouter();
   const [popupsState, setPopupsState] = useState({
     import: false,
   });
   const isFocus = !!(focusMode && filteredFocusedNodes);
+  const nodesToShow = useMemo(() => {
+    return [
+      ...(filteredFocusedNodes || []),
+      ...filteredTypeRelatedToFocusedNode,
+    ];
+  }, [filteredFocusedNodes, filteredTypeRelatedToFocusedNode]);
   const viewport = useMemo(() => {
     return (
       <>
@@ -64,7 +73,7 @@ export const Relation: React.FC<{ setInitialSchema: (s: string) => void }> = ({
             minScale={0.1}
             limitToBounds={false}
           >
-            <PanZoom parentClass="focus" nodes={filteredFocusedNodes} />
+            <PanZoom parentClass="focus" nodes={nodesToShow} />
           </TransformWrapper>
         </FocusOverlay>
       )}

diff --git a/packages/editor/src/shared/NodeNavigation/index.tsx b/packages/editor/src/shared/NodeNavigation/index.tsx
@@ -122,7 +122,7 @@ export const NodeNavigation = ({
   setIsCollapsed: (collapsed?: boolean) => void;
 }) => {
   const { allNodes, focusMode } = useTreesState();
-  const { focusedNodes } = useRelationNodesState();
+  const { focusedNodes, typeRelatedToFocusedNode } = useRelationNodesState();
   const {
     nodesVisibilityArr,
     hideRelationNodes,
@@ -170,7 +170,10 @@ export const NodeNavigation = ({
     const extScalarNodes: ParserField[] = [];
     const extTypeNodes: ParserField[] = [];
     const extInterfaceNodes: ParserField[] = [];
-    const mainNodes = focusMode && focusedNodes ? focusedNodes : allNodes.nodes;
+    const mainNodes =
+      focusMode && focusedNodes
+        ? [...focusedNodes, ...typeRelatedToFocusedNode]
+        : allNodes.nodes;
 
     const filteredNodes = mainNodes
       .filter((n) => n.name.toLowerCase().includes(q.toLowerCase()))
@@ -277,7 +280,14 @@ export const NodeNavigation = ({
       extTypeNodes,
       extUnionNodes,
     };
-  }, [allNodes, nodesVisibilityArr, q, focusedNodes, focusMode]);
+  }, [
+    allNodes,
+    nodesVisibilityArr,
+    q,
+    focusedNodes,
+    focusMode,
+    typeRelatedToFocusedNode,
+  ]);
 
   return (
     <Container>

diff --git a/packages/editor/src/state/containers/relationNodes.tsx b/packages/editor/src/state/containers/relationNodes.tsx
@@ -28,6 +28,10 @@ const useRelationNodes = createContainer(() => {
     relationNodes.map((el) => ({ id: el.id, isHidden: false }))
   );
 
+  const [typeRelatedToFocusedNode, setTypeRelatedToFocusedNode] = useState<
+    ParserField[]
+  >([]);
+
   useEffect(() => {
     setNodesVisibilityArr((prev) => {
       const newArray = relationNodes.map((el) => {
@@ -105,13 +109,57 @@ const useRelationNodes = createContainer(() => {
     }
     return;
   }, [focusMode]);
+
   const filteredFocusedNodes = useMemo(() => {
     return focusedNodes?.filter((el) => {
       const foundNode = nodesVisibilityArr.find((el2) => el2.id === el.id);
       return foundNode ? !foundNode.isHidden : true;
     });
   }, [nodesVisibilityArr, focusedNodes]);
 
+  useEffect(() => {
+    setTypeRelatedToFocusedNode([]);
+  }, [focusMode]);
+
+  const setTypeRelatedNodesToFocusedNode = useCallback(
+    (node: ParserField) => {
+      const alreadyExistsInTypeRelatedToFocusedNode =
+        typeRelatedToFocusedNode.find((el) => el.id === node.id);
+      const alreadyExistsInFocusedNodes = focusedNodes?.find(
+        (el) => el.id === node.id
+      );
+      const isToggleableTypeNode = toggleableTypes.includes(node.data.type);
+      if (
+        !alreadyExistsInTypeRelatedToFocusedNode &&
+        !alreadyExistsInFocusedNodes &&
+        isToggleableTypeNode
+      ) {
+        setTypeRelatedToFocusedNode([...typeRelatedToFocusedNode, node]);
+      }
+    },
+    [focusedNodes, typeRelatedToFocusedNode]
+  );
+
+  useEffect(() => {
+    if (typeRelatedToFocusedNode.length) {
+      setSelectedNodeId({
+        source: "relation",
+        value: {
+          id: typeRelatedToFocusedNode[typeRelatedToFocusedNode.length - 1].id,
+          name: typeRelatedToFocusedNode[typeRelatedToFocusedNode.length - 1]
+            .name,
+        },
+      });
+    }
+  }, [typeRelatedToFocusedNode]);
+
+  const filteredTypeRelatedToFocusedNode = useMemo(() => {
+    return typeRelatedToFocusedNode?.filter((el) => {
+      const foundNode = nodesVisibilityArr.find((el2) => el2.id === el.id);
+      return foundNode ? !foundNode.isHidden : true;
+    });
+  }, [nodesVisibilityArr, typeRelatedToFocusedNode]);
+
   const toggleNodeVisibility = useCallback(
     (node: ParserField) => {
       const newArr = [...nodesVisibilityArr];
@@ -138,6 +186,9 @@ const useRelationNodes = createContainer(() => {
     toggleNodeVisibility,
     allVisible,
     focusedNodes,
+    typeRelatedToFocusedNode,
+    filteredTypeRelatedToFocusedNode,
+    setTypeRelatedNodesToFocusedNode,
   };
 });
 

diff --git a/packages/editor/src/state/containers/trees/index.ts b/packages/editor/src/state/containers/trees/index.ts
@@ -206,10 +206,10 @@ const useTreesStateContainer = createContainer(() => {
       .map((a) => a.name);
     const nodesRelatedToActiveInterface =
       activeNode &&
-      activeNode.data.type === TypeDefinition.InterfaceTypeDefinition
+        activeNode.data.type === TypeDefinition.InterfaceTypeDefinition
         ? allNodes.nodes
-            .filter((node) => node.interfaces.includes(activeNode.name))
-            .map((a) => a.name)
+          .filter((node) => node.interfaces.includes(activeNode.name))
+          .map((a) => a.name)
         : [];
     const notBaseTypes = activeNode?.args
       .map((a) => getTypeName(a.type.fieldType))