🐛 fixed fields hiding hopefully

graphql-editor · May 4, 2023 · 4986265 · 4986265
1 parent 394be81
commit 4986265
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 18 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": "6.4.0",
+  "version": "6.4.1",
   "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": "6.4.0",
+  "version": "6.4.1",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",

diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/LinesDiagram.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/LinesDiagram.tsx
@@ -4,7 +4,6 @@ import { Node } from './Node';
 import styled from '@emotion/styled';
 import * as vars from '@/vars';
 import { ParserField, getTypeName } from 'graphql-js-tree';
-import { useRouter } from '@/state/containers/router';
 import { GraphQLEditorWorker, NumberNode } from 'graphql-editor-worker';
 import { runAfterFramePaint } from '@/shared/hooks/useMarkFramePaint';
 import { useRelationsState } from '@/state/containers';
@@ -48,23 +47,24 @@ export type FilteredFieldsTypesProps = {
 type LinesDiagramProps = {
   mainRef: React.RefObject<HTMLDivElement>;
   nodes: ParserField[];
+  nodesWithoutFilter: ParserField[];
   hide?: boolean;
   setLoading: (b: boolean) => void;
   loading?: boolean;
   className: string;
 };
 
 export const LinesDiagram: React.FC<LinesDiagramProps> = (props) => {
-  const { nodes, setLoading, mainRef } = props;
+  const { nodes, setLoading, mainRef, nodesWithoutFilter } = props;
   const { isLibrary } = useTreesState();
-  const { routes } = useRouter();
   const { editMode } = useRelationsState();
   const [simulatedNodes, setSimulatedNodes] = useState<NumberNode[]>();
 
   const [relations, setRelations] =
     useState<
       { to: RelationPath; from: RelationPath[]; fromLength: number }[]
     >();
+
   useEffect(() => {
     // compose existing positions
     if (!nodes.length) {
@@ -115,8 +115,8 @@ export const LinesDiagram: React.FC<LinesDiagramProps> = (props) => {
         }))
         .map((n, i) => {
           const args =
-            nodes.find((ufn) => ufn.id === n.parserField.id)?.args ||
-            n.parserField.args;
+            nodesWithoutFilter.find((ufn) => ufn.id === n.parserField.id)
+              ?.args || n.parserField.args;
           return {
             to: { field: n, connectingField: n.parserField, index: i },
             fromLength: n.parserField.args?.length || 0,
@@ -147,10 +147,6 @@ export const LinesDiagram: React.FC<LinesDiagramProps> = (props) => {
     return <Lines relations={relations} />;
   }, [relations]);
 
-  useEffect(() => {
-    setRelations([]);
-  }, [routes.code]);
-
   const NodesContainer = useMemo(() => {
     return (
       <>
@@ -165,7 +161,7 @@ export const LinesDiagram: React.FC<LinesDiagramProps> = (props) => {
         ))}
       </>
     );
-  }, [isLibrary, simulatedNodes, routes.code]);
+  }, [isLibrary, simulatedNodes]);
 
   return (
     <Main ref={mainRef}>

diff --git a/packages/editor/src/Relation/PanZoom/PanZoom.tsx b/packages/editor/src/Relation/PanZoom/PanZoom.tsx
@@ -162,6 +162,7 @@ export const PanZoom: React.FC<{ nodes: ParserField[]; className: string }> = ({
       <LinesDiagram
         className={className}
         nodes={filteredNodes}
+        nodesWithoutFilter={nodes}
         mainRef={mainRef}
         loading={largeSimulationLoading}
         setLoading={(e) => setLargeSimulationLoading(e)}

diff --git a/packages/editor/src/shared/hooks/useAnimationFrame.ts b/packages/editor/src/shared/hooks/useAnimationFrame.ts
@@ -0,0 +1,33 @@
+import { useLayoutEffect, useRef } from 'react';
+
+// Reusable component that also takes dependencies
+export const useAnimationFrame = (
+  cb?: (p: { time: number; delta: number }) => void,
+) => {
+  if (typeof performance === 'undefined' || typeof window === 'undefined') {
+    return;
+  }
+
+  const cbRef = useRef<typeof cb>();
+  const frame = useRef<number>();
+  const init = useRef(performance.now());
+  const last = useRef(performance.now());
+
+  cbRef.current = cb;
+
+  const animate = (now: number) => {
+    cbRef.current?.({
+      time: now - init.current,
+      delta: now - last.current,
+    });
+    last.current = now;
+    frame.current = requestAnimationFrame(animate);
+  };
+
+  useLayoutEffect(() => {
+    frame.current = requestAnimationFrame(animate);
+    return () => {
+      if (frame.current) cancelAnimationFrame(frame.current);
+    };
+  }, []);
+};
diff --git a/packages/sandbox/package.json b/packages/sandbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sandbox",
-  "version": "6.4.0",
+  "version": "6.4.1",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",

diff --git a/packages/svg-ts-sync/package.json b/packages/svg-ts-sync/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svg-ts-sync",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": false,
   "license": "MIT",
   "description": "Sync folders with svg's to react typescript components",