fix connection lines display when clearing schema (#602)

* fix * change render
graphql-editor · Apr 5, 2024 · 93b2179 · 93b2179
1 parent 7e80721
commit 93b2179
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 24 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,31 +60,39 @@ export const Relation: React.FC<{
       </>
     );
   }, [filteredRelationNodes, isFocus, ctrlToZoom]);
+
   return (
     <RelationContainer>
-      {viewport}
-      {isFocus && (
-        <FocusOverlay>
-          <TransformWrapper
-            initialScale={1}
-            maxScale={1.5}
-            wheel={{
-              activationKeys: ctrlToZoom ? ["Control", "OS", "Meta"] : [],
-              step: 0.03,
-            }}
-            panning={{ velocityDisabled: false }}
-            minScale={0.1}
-            limitToBounds={false}
-            zoomAnimation={{ disabled: true }}
-          >
-            <PanZoom title={title} parentClass="focus" nodes={nodesToShow} />
-          </TransformWrapper>
-        </FocusOverlay>
-      )}
-      <AnimatePresence>
-        {!!editMode && activeNode && <Graf node={activeNode} />}
-      </AnimatePresence>
-      {!allNodes.nodes.length && (
+      {allNodes.nodes.length ? (
+        <>
+          {viewport}
+          {isFocus && (
+            <FocusOverlay>
+              <TransformWrapper
+                initialScale={1}
+                maxScale={1.5}
+                wheel={{
+                  activationKeys: ctrlToZoom ? ["Control", "OS", "Meta"] : [],
+                  step: 0.03,
+                }}
+                panning={{ velocityDisabled: false }}
+                minScale={0.1}
+                limitToBounds={false}
+                zoomAnimation={{ disabled: true }}
+              >
+                <PanZoom
+                  title={title}
+                  parentClass="focus"
+                  nodes={nodesToShow}
+                />
+              </TransformWrapper>
+            </FocusOverlay>
+          )}
+          <AnimatePresence>
+            {!!editMode && activeNode && <Graf node={activeNode} />}
+          </AnimatePresence>
+        </>
+      ) : (
         <AnimatePresence>
           <BackgroundFTUX
             showCode={routes.code === "off"}
@@ -118,6 +126,7 @@ const RelationContainer = styled.div`
   width: 100%;
   height: 100%;
   position: relative;
+  background: ${({ theme }) => theme.neutrals.L6};
 `;
 
 const FocusOverlay = styled.div`