Make SVGRender a global instance (#324)

Author: IvanGoncharov

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) => {

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}