initial change

graphql-editor · Jan 31, 2024 · e8ae07b · e8ae07b
1 parent 8fb3fda
commit e8ae07b
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 8 deletions.
diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/Node/Field/index.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/Node/Field/index.tsx
@@ -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 { Link } from "@aexol-studio/styling-system";
 
 const Main = styled.div<{ printPreviewActive: boolean }>`
@@ -38,8 +38,11 @@ type FieldProps = Pick<GrafFieldProps, "node"> & {
 };
 
 export const Field: React.FC<FieldProps> = ({ node }) => {
-  const { parentTypes, setSelectedNodeId, getParentOfField } = useTreesState();
+  const { parentTypes, setSelectedNodeId, getParentOfField, focusMode } =
+    useTreesState();
   const { printPreviewActive } = useRelationsState();
+  const { setTypeRelatedNodesToFocusedNode, filteredFocusedNodes } =
+    useRelationNodesState();
   const nodeClick = (n: ParserField) => {
     const parent = getParentOfField(n);
     if (parent) {
@@ -50,6 +53,11 @@ export const Field: React.FC<FieldProps> = ({ node }) => {
           name: parent.name,
         },
       });
+
+      const isFocus = !!(focusMode && filteredFocusedNodes);
+      if (isFocus) {
+        setTypeRelatedNodesToFocusedNode(parent);
+      }
     }
   };
   return (

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
@@ -123,7 +123,7 @@ export const NodeNavigation = ({
   setIsCollapsed: (collapsed?: boolean) => void;
 }) => {
   const { allNodes, focusMode } = useTreesState();
-  const { focusedNodes } = useRelationNodesState();
+  const { focusedNodes, typeRelatedToFocusedNode } = useRelationNodesState();
   const {
     nodesVisibilityArr,
     hideRelationNodes,
@@ -171,7 +171,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()))
@@ -278,7 +281,14 @@ export const NodeNavigation = ({
       extTypeNodes,
       extUnionNodes,
     };
-  }, [allNodes, nodesVisibilityArr, q, focusedNodes, focusMode]);
+  }, [
+    allNodes,
+    nodesVisibilityArr,
+    q,
+    focusedNodes,
+    focusMode,
+    typeRelatedToFocusedNode,
+  ]);
 
   const allExtensionNodes = splittedNodes.extTypeNodes.concat(
     splittedNodes.extInterfaceNodes,

diff --git a/packages/editor/src/state/containers/relationNodes.tsx b/packages/editor/src/state/containers/relationNodes.tsx
@@ -39,6 +39,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) => {
@@ -72,6 +76,7 @@ const useRelationNodes = createContainer(() => {
   );
 
   const focusedNodes = useMemo(() => {
+    setTypeRelatedToFocusedNode([]);
     const nId = focusMode;
     if (nId) {
       const n = allNodes.nodes.find((an) => an.id === nId);
@@ -140,6 +145,32 @@ const useRelationNodes = createContainer(() => {
     [nodesVisibilityArr]
   );
 
+  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]
+  );
+
+  const filteredTypeRelatedToFocusedNode = useMemo(() => {
+    return typeRelatedToFocusedNode?.filter((el) => {
+      const foundNode = nodesVisibilityArr.find((el2) => el2.id === el.id);
+      return foundNode ? !foundNode.isHidden : true;
+    });
+  }, [nodesVisibilityArr, typeRelatedToFocusedNode]);
+
   return {
     filteredRelationNodes,
     nodesVisibilityArr,
@@ -149,6 +180,9 @@ const useRelationNodes = createContainer(() => {
     toggleNodeVisibility,
     allVisible,
     focusedNodes,
+    typeRelatedToFocusedNode,
+    filteredTypeRelatedToFocusedNode,
+    setTypeRelatedNodesToFocusedNode,
   };
 });