Merge branch 'develop' into disable-import-export

graphql-editor · Feb 6, 2024 · 2d07bc7 · 2d07bc7
2 parents 527ba34 + 072e170
commit 2d07bc7
Show file tree

Hide file tree

Showing 18 changed files with 531 additions and 88 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/editor-worker/package.json b/packages/editor-worker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "graphql-editor-worker",
-  "version": "7.1.6",
+  "version": "7.1.7",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "graphql-editor",
-  "version": "7.1.6",
+  "version": "7.1.7",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",
@@ -45,7 +45,7 @@
     "file-saver": "^2.0.5",
     "framer-motion": "^10.12.16",
     "fuzzyjs": "^5.0.1",
-    "graphql-editor-worker": "^7.1.6",
+    "graphql-editor-worker": "^7.1.7",
     "graphql-js-tree": "^1.0.9",
     "graphql-language-service": "3.1.4",
     "html-to-image": "^1.10.8",

diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/LinesDiagram.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/LinesDiagram.tsx
@@ -239,8 +239,7 @@ export const LinesDiagram = React.forwardRef<
   ) => {
     if (simulatedNodes && !props.hide) {
       const size = wrapper.getBoundingClientRect();
-      changeZoomInTopBar;
-      // changeZoomInTopBar(state.scale);
+      changeZoomInTopBar(state.scale);
       if (!size) return;
       requestAnimationFrame((timeStamp) => {
         const delta = timeStamp - lastTimestamp;

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
@@ -18,14 +18,23 @@ export const Relation: React.FC<{
   title?: React.ReactNode;
 }> = ({ setInitialSchema, title }) => {
   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 (
       <>
@@ -39,6 +48,7 @@ export const Relation: React.FC<{
           }}
           minScale={0.1}
           limitToBounds={false}
+          zoomAnimation={{ disabled: true }}
         >
           <PanZoom
             hide={isFocus}
@@ -65,12 +75,9 @@ export const Relation: React.FC<{
             panning={{ velocityDisabled: false }}
             minScale={0.1}
             limitToBounds={false}
+            zoomAnimation={{ disabled: true }}
           >
-            <PanZoom
-              title={title}
-              parentClass="focus"
-              nodes={filteredFocusedNodes}
-            />
+            <PanZoom title={title} parentClass="focus" nodes={nodesToShow} />
           </TransformWrapper>
         </FocusOverlay>
       )}

diff --git a/packages/editor/src/editor/Editor.tsx b/packages/editor/src/editor/Editor.tsx
@@ -69,7 +69,8 @@ const ErrorOuterContainer = styled.div<{ isOverflow?: boolean }>`
   overflow-x: hidden;
 `;
 
-export interface EditorProps extends Pick<CodePaneProps, "onContentChange"> {
+export interface EditorProps
+  extends Pick<CodePaneProps, "onContentChange" | "onEditorMount"> {
   // Code in editor is readonly
   readonly?: boolean;
   // Code and libraries
@@ -123,6 +124,7 @@ export const Editor = React.forwardRef<ExternalEditorAPI, EditorProps>(
       title,
       disableExport,
       disableImport,
+      onEditorMount,
     },
     ref
   ) => {
@@ -327,6 +329,7 @@ export const Editor = React.forwardRef<ExternalEditorAPI, EditorProps>(
                     passGraphValidation,
                   });
                 }}
+                onEditorMount={onEditorMount}
                 ref={codePaneApi}
                 onContentChange={onContentChange}
                 schema={schema}

diff --git a/packages/editor/src/editor/code/CodePane.tsx b/packages/editor/src/editor/code/CodePane.tsx
@@ -24,6 +24,7 @@ import { CodeContainer } from "@/editor/code/style/Code";
 import { Maybe } from "graphql-language-service";
 import { useDebouncedValue } from "@/shared/hooks/useDebouncedValue";
 import { PassedSchema } from "@/Models";
+import type * as monaco from "monaco-editor";
 
 export interface CodePaneOuterProps {
   readonly?: boolean;
@@ -33,6 +34,7 @@ export type CodePaneProps = Pick<LiveSchemaEditorProps, "onContentChange"> & {
   size: number | string;
   schema: PassedSchema;
   onChange: (v: string, passGraphValidation?: boolean) => void;
+  onEditorMount?: (editor: monaco.editor.IStandaloneCodeEditor) => void;
   fullScreen?: boolean;
 } & CodePaneOuterProps;
 
@@ -137,6 +139,7 @@ export const CodePane = React.forwardRef<CodePaneApi, CodePaneProps>(
             onContentChange={props.onContentChange}
             height="100%"
             ref={liveEditorApi}
+            onEditorMount={props.onEditorMount}
             beforeMount={(monaco) =>
               monaco.editor.defineTheme("graphql-editor", MonacoTheme(theme))
             }

diff --git a/packages/editor/src/editor/code/guild/editor/LiveSchemaEditor.tsx b/packages/editor/src/editor/code/guild/editor/LiveSchemaEditor.tsx
@@ -13,6 +13,7 @@ import { theme as MonacoTheme } from "@/editor/code/monaco";
 
 export type LiveSchemaEditorProps = SchemaServicesOptions & {
   onBlur?: (value: string) => void;
+  onEditorMount?: (editor: monaco.editor.IStandaloneCodeEditor) => void;
   onLanguageServiceReady?: (languageService: EnrichedLanguageService) => void;
   onSchemaChange?: (schema: GraphQLSchema, sdl: string) => void;
   onSchemaError?: (
@@ -45,14 +46,15 @@ function BaseSchemaEditor(
   });
 
   useEffect(() => {
-    if (editorRef)
+    if (editorRef) {
+      props.onEditorMount?.(editorRef);
       editorRef?.revealPositionInCenter({ column: 0, lineNumber: 0 });
-  }, [editorRef]);
+    }
+  }, [editorRef, props.onEditorMount]);
 
   const { theme } = useTheme();
 
   useImperativeHandle(ref, () => ({ ...editorApi, receive }), [
-    editorRef,
     languageService,
     receive,
   ]);

diff --git a/packages/editor/src/editor/code/guild/editor/use-schema-services.tsx b/packages/editor/src/editor/code/guild/editor/use-schema-services.tsx
@@ -23,6 +23,7 @@ export type SchemaEditorApi = {
   jumpToType(typeName: string): void;
   deselect(): void;
   jumpToError(rowNumber: number): void;
+  editor?: monaco.editor.IStandaloneCodeEditor;
 };
 
 export type SchemaServicesOptions = {

diff --git a/packages/editor/src/editor/code/index.ts b/packages/editor/src/editor/code/index.ts
@@ -1,3 +1,3 @@
-export * from './CodePane';
-export * from './gql';
-export * from './DiffEditorPane';
+export * from "./CodePane";
+export * from "./gql";
+export * from "./DiffEditorPane";
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,
   };
 });
 

diff --git a/packages/editor/src/state/containers/trees/index.ts b/packages/editor/src/state/containers/trees/index.ts
@@ -237,14 +237,12 @@ const useTreesStateContainer = createContainer(() => {
   const setSelectedNodeId = useCallback(
     (_selectedNodeId?: SelectedNodeId) => {
       const nodeId = _selectedNodeId?.value?.id;
-      DOMEvents.selectNode.trigger(nodeId);
       if (
         nodeId !== selectedNodeId?.value?.id ||
         _selectedNodeId?.justCreated !== selectedNodeId?.justCreated
       ) {
-        setTimeout(() => {
-          return _setSelectedNodeId(_selectedNodeId);
-        }, 250);
+        DOMEvents.selectNode.trigger(nodeId);
+        return _setSelectedNodeId(_selectedNodeId);
       }
     },
     [_setSelectedNodeId, allNodes, selectedNodeId?.value?.id, focusMode]