From 5f3b3e516e5c9fb2745d5ee4090df14842ad0e43 Mon Sep 17 00:00:00 2001
From: Ivan Goncharov <ivan.goncharov.ua@gmail.com>
Date: Fri, 19 May 2023 14:04:19 +0300
Subject: [PATCH] Make `SVGRender` a global instance

---
 src/components/GraphViewport.tsx | 7 ++++---
 src/components/Voyager.tsx       | 6 +-----
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/GraphViewport.tsx b/src/components/GraphViewport.tsx
index 9a7ee71e..6b650c7d 100644
--- a/src/components/GraphViewport.tsx
+++ b/src/components/GraphViewport.tsx
@@ -1,10 +1,11 @@
 import { Component } from 'react';
 
-import { Viewport } from './../graph/';
+import { SVGRender, Viewport } from './../graph/';
 import LoadingAnimation from './utils/LoadingAnimation';
 
+const svgRenderer = new SVGRender();
+
 interface GraphViewportProps {
-  svgRenderer: any;
   typeGraph: any;
   displayOptions: any;
 
@@ -83,7 +84,7 @@ export default class GraphViewport extends Component<GraphViewportProps> {
     this._currentTypeGraph = typeGraph;
     this._currentDisplayOptions = displayOptions;
 
-    const { svgRenderer, onSelectNode, onSelectEdge } = this.props;
+    const { onSelectNode, onSelectEdge } = this.props;
     svgRenderer
       .renderSvg(typeGraph, displayOptions)
       .then((svg) => {
diff --git a/src/components/Voyager.tsx b/src/components/Voyager.tsx
index 48da8930..cd3ca704 100644
--- a/src/components/Voyager.tsx
+++ b/src/components/Voyager.tsx
@@ -14,7 +14,7 @@ import {
   useState,
 } from 'react';
 
-import { getTypeGraph, SVGRender } from '../graph/';
+import { getTypeGraph } from '../graph/';
 import { extractTypeId, getSchema } from '../introspection';
 import DocExplorer from './doc-explorer/DocExplorer';
 import GraphViewport from './GraphViewport';
@@ -106,9 +106,6 @@ export default function Voyager(props: VoyagerProps) {
   const viewportRef = useRef(null);
   useEffect(() => viewportRef.current?.resize(), [hideDocs]);
 
-  // TODO: move into GraphViewport
-  const svgRenderer = useMemo(() => new SVGRender(), []);
-
   return (
     <ThemeProvider theme={theme}>
       <div className="graphql-voyager">
@@ -190,7 +187,6 @@ export default function Voyager(props: VoyagerProps) {
   function renderGraphViewport() {
     return (
       <GraphViewport
-        svgRenderer={svgRenderer}
         typeGraph={typeGraph}
         displayOptions={displayOptions}
         selectedTypeID={selected.typeID}