fix

graphql-editor · Apr 5, 2024 · 162dd34 · 162dd34
1 parent 7e80721
commit 162dd34
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 28 deletions.
diff --git a/packages/editor/src/Relation/PanZoom/PanZoom.tsx b/packages/editor/src/Relation/PanZoom/PanZoom.tsx
@@ -345,7 +345,6 @@ const Wrapper = styled.div`
   height: 100%;
   overflow: hidden;
   transition: ${vars.transition};
-  background: ${({ theme }) => theme.neutrals.L6};
 `;
 
 const LoadingContainer = styled.div`

diff --git a/packages/editor/src/Relation/Relation.tsx b/packages/editor/src/Relation/Relation.tsx
@@ -60,6 +60,39 @@ export const Relation: React.FC<{
       </>
     );
   }, [filteredRelationNodes, isFocus, ctrlToZoom]);
+
+  if (!allNodes.nodes.length) {
+    return (
+      <RelationContainer>
+        <AnimatePresence>
+          <BackgroundFTUX
+            showCode={routes.code === "off"}
+            onStartCoding={() => {
+              set(
+                {
+                  ...routes,
+                  code: routes.code === "off" ? "on" : "off",
+                  source: "internal",
+                },
+                "internal"
+              );
+            }}
+            onImport={() => {
+              setPopupsState({ import: true });
+            }}
+          />
+        </AnimatePresence>
+        <ImportSchema
+          onClose={() => setPopupsState({ import: false })}
+          onImport={(s) => {
+            setInitialSchema(s);
+          }}
+          open={popupsState.import}
+        />
+        ;
+      </RelationContainer>
+    );
+  }
   return (
     <RelationContainer>
       {viewport}
@@ -84,40 +117,14 @@ export const Relation: React.FC<{
       <AnimatePresence>
         {!!editMode && activeNode && <Graf node={activeNode} />}
       </AnimatePresence>
-      {!allNodes.nodes.length && (
-        <AnimatePresence>
-          <BackgroundFTUX
-            showCode={routes.code === "off"}
-            onStartCoding={() => {
-              set(
-                {
-                  ...routes,
-                  code: routes.code === "off" ? "on" : "off",
-                  source: "internal",
-                },
-                "internal"
-              );
-            }}
-            onImport={() => {
-              setPopupsState({ import: true });
-            }}
-          />
-        </AnimatePresence>
-      )}
-      <ImportSchema
-        onClose={() => setPopupsState({ import: false })}
-        onImport={(s) => {
-          setInitialSchema(s);
-        }}
-        open={popupsState.import}
-      />
     </RelationContainer>
   );
 };
 const RelationContainer = styled.div`
   width: 100%;
   height: 100%;
   position: relative;
+  background: ${({ theme }) => theme.neutrals.L6};
 `;
 
 const FocusOverlay = styled.div`