Implement framerate limiter

src/Components/SVG/SVG.tsx

@@ -1,12 +1,12 @@
 import './SVG.scss';
 import * as React from 'react';
-import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom';
+import { ReactSVGPanZoom, Tool, TOOL_PAN, Value } from 'react-svg-pan-zoom';
 import { Container } from './Elements/Container';
 import { ContainerModel } from '../../Interfaces/IContainerModel';
 import { Selector } from './Elements/Selector/Selector';
 import { BAR_WIDTH } from '../Bar/Bar';
 import { DepthDimensionLayer } from './Elements/DepthDimensionLayer';
-import { SHOW_DIMENSIONS_PER_DEPTH } from '../../utils/default';
+import { MAX_FRAMERATE, SHOW_DIMENSIONS_PER_DEPTH } from '../../utils/default';
 import { SymbolLayer } from './Elements/SymbolLayer';
 import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 
@@ -54,8 +54,20 @@ export function SVG(props: ISVGProps): JSX.Element {
     viewerWidth: window.innerWidth - BAR_WIDTH,
     viewerHeight: window.innerHeight
   });
+  const [tool, setTool] = React.useState<Tool>(TOOL_PAN);
+  const [value, setValue] = React.useState<Value>({} as Value);
+  const svgViewer = React.useRef<ReactSVGPanZoom>(null);
+
+  // Framerate limiter
+  const delta = React.useRef(0);
+  const timer = React.useRef(performance.now());
+  const renderCounter = React.useRef(0);
+  // Debug: FPS counter
+  // const startTimer = React.useRef(Date.now());
+  // console.log(renderCounter.current / ((Date.now() - startTimer.current) / 1000));
 
   UseSVGAutoResizer(setViewer);
+  UseFitOnce(svgViewer);
 
   const xmlns = '<http://www.w3.org/2000/svg>';
   const properties = {
@@ -73,9 +85,24 @@ export function SVG(props: ISVGProps): JSX.Element {
 
   return (
     <div id={ID} className='ml-16'>
-      <UncontrolledReactSVGPanZoom
+      <ReactSVGPanZoom
+        ref={svgViewer}
         width={viewer.viewerWidth}
         height={viewer.viewerHeight}
+        tool={tool} onChangeTool={setTool}
+        value={value} onChangeValue={(value: Value) => {
+          // Framerate limiter
+          const newTimer = performance.now();
+          delta.current += (newTimer - timer.current) / 1000;
+          timer.current = newTimer;
+          if (delta.current <= (1 / MAX_FRAMERATE)) {
+            return;
+          }
+
+          renderCounter.current = renderCounter.current + 1;
+          delta.current = delta.current % (1 / MAX_FRAMERATE);
+          setValue(value);
+        }}
         background={'#ffffff'}
         defaultTool='pan'
         miniatureProps={{
@@ -93,7 +120,12 @@ export function SVG(props: ISVGProps): JSX.Element {
           <SymbolLayer symbols={props.symbols} />
           <Selector selected={props.selected} /> {/* leave this at the end so it can be removed during the svg export */}
         </svg>
-      </UncontrolledReactSVGPanZoom>
+      </ReactSVGPanZoom>
     </div>
   );
 }
+function UseFitOnce(svgViewer: React.RefObject<ReactSVGPanZoom>) {
+  React.useEffect(() => {
+    svgViewer?.current?.fitToViewer();
+  }, []);
+}

src/utils/default.ts

@@ -33,6 +33,7 @@ export const DEFAULT_SYMBOL_HEIGHT = 32;
 export const ENABLE_SHORTCUTS = true;
 export const MAX_HISTORY = 200;
 export const APPLY_BEHAVIORS_ON_CHILDREN = true;
+export const MAX_FRAMERATE = 120;
 
 /**
  * Returns the default editor state given the configuration