debug total render size

src/components/App.tsx

@@ -1362,7 +1362,9 @@ class App extends React.Component<AppProps, AppState> {
     ).getPropertyValue("--color-selection");
 
     const now = Date.now();
-    if(!this.state.shouldCacheIgnoreZoom) console.log(`renderScene`,now);
+    if (!this.state.shouldCacheIgnoreZoom) {
+      console.log(`renderScene`, now);
+    }
     renderScene(
       {
         elements: renderingElements,
@@ -1400,10 +1402,13 @@ class App extends React.Component<AppProps, AppState> {
             this.setState({ scrolledOutside });
           }
           this.scheduleImageRefresh();
-          if(!this.state.shouldCacheIgnoreZoom) setTimeout(()=>console.log(`after renderScene`,now));
+          if (!this.state.shouldCacheIgnoreZoom) {
+            setTimeout(() => console.log(`after renderScene`, now));
+          }
         },
       },
-      true || THROTTLE_NEXT_RENDER && window.EXCALIDRAW_THROTTLE_RENDER === true,
+      true ||
+        (THROTTLE_NEXT_RENDER && window.EXCALIDRAW_THROTTLE_RENDER === true),
     );
 
     if (!THROTTLE_NEXT_RENDER) {

src/renderer/renderElement.ts

@@ -96,7 +96,6 @@ export interface ExcalidrawElementWithCanvas {
 export const cappedElementCanvasSize = (
   element: NonDeletedExcalidrawElement,
   zoom: Zoom,
-  renderConfig: RenderConfig,
 ): {
   width: number;
   height: number;
@@ -115,7 +114,7 @@ export const cappedElementCanvasSize = (
     let height =
       distance(y1, y2) * window.devicePixelRatio * zoomValue +
       padding * zoomValue * 2;
-    
+
     const size = width * height;
     if (size > sizelimit) {
       zoomValue = Math.sqrt(sizelimit / size) as NormalizedZoomValue;
@@ -126,28 +125,27 @@ export const cappedElementCanvasSize = (
         distance(y1, y2) * window.devicePixelRatio * zoomValue +
         padding * zoomValue * 2;
     }
-    return {width, height, zoomValue};
+    return { width, height, zoomValue };
-  } else {
+  }
-    let width =
+  let width =
+    element.width * window.devicePixelRatio * zoomValue +
+    padding * zoomValue * 2;
+  let height =
+    element.height * window.devicePixelRatio * zoomValue +
+    padding * zoomValue * 2;
+
+  const size = width * height;
+  if (size > sizelimit) {
+    zoomValue = Math.sqrt(sizelimit / size) as NormalizedZoomValue;
+    width =
       element.width * window.devicePixelRatio * zoomValue +
       padding * zoomValue * 2;
-    let height =
+    height =
       element.height * window.devicePixelRatio * zoomValue +
       padding * zoomValue * 2;
-
-    const size = width * height;
-    if (size > sizelimit) {
-      zoomValue = Math.sqrt(sizelimit / size) as NormalizedZoomValue;
-      width =
-        element.width * window.devicePixelRatio * zoomValue +
-        padding * zoomValue * 2;
-      height =
-        element.height * window.devicePixelRatio * zoomValue +
-        padding * zoomValue * 2;
-    }
-    return {width, height, zoomValue};
   }
-}
+  return { width, height, zoomValue };
+};
 
 const generateElementCanvas = (
   element: NonDeletedExcalidrawElement,
@@ -158,12 +156,8 @@ const generateElementCanvas = (
   const context = canvas.getContext("2d")!;
   const padding = getCanvasPadding(element);
 
-  const {width, height, zoomValue} = cappedElementCanvasSize (
+  const { width, height, zoomValue } = cappedElementCanvasSize(element, zoom);
-    element,
+
-    zoom,
-    renderConfig,
-  );
-  
   canvas.width = width;
   canvas.height = height;
 
@@ -171,7 +165,7 @@ const generateElementCanvas = (
   let canvasOffsetY = 0;
 
   if (isLinearElement(element) || isFreeDrawElement(element)) {
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const [x1, y1] = getElementAbsoluteCoords(element);
 
     canvasOffsetX =
       element.x > x1

src/renderer/renderScene.ts

@@ -29,7 +29,11 @@ import {
 } from "../scene/scrollbars";
 import { getSelectedElements } from "../scene/selection";
 
-import { renderElement, renderElementToSvg } from "./renderElement";
+import {
+  cappedElementCanvasSize,
+  renderElement,
+  renderElementToSvg,
+} from "./renderElement";
 import { getClientColors } from "../clients";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import {
@@ -408,8 +412,16 @@ export const _renderScene = ({
     let editingLinearElement: NonDeleted<ExcalidrawLinearElement> | undefined =
       undefined;
     const start = Date.now();
-    const showDebug = !appState.shouldCacheIgnoreZoom && (appState.zoom.value < 0.5);
+    const showDebug = false; //!appState.shouldCacheIgnoreZoom && (appState.zoom.value < 0.5);
-    if(showDebug) console.log("start: renderElements");
+    if (showDebug) {
+      console.log("start: renderElements");
+    }
+    console.log(
+      visibleElements.reduce((acc, el) => {
+        const { width, height } = cappedElementCanvasSize(el, appState.zoom);
+        return acc + width * height;
+      }, 0),
+    );
     visibleElements.forEach((element) => {
       try {
         renderElement(element, rc, context, renderConfig, appState);
@@ -429,7 +441,9 @@ export const _renderScene = ({
         console.error(error);
       }
     });
-    if(showDebug) console.log(`finish: renderElements ${Date.now()-start}`);
+    if (showDebug) {
+      console.log(`finish: renderElements ${Date.now() - start}`);
+    }
     if (editingLinearElement) {
       renderLinearPointHandles(
         context,

src/utils.ts

@@ -136,7 +136,7 @@ export const throttleRAF = <T extends any[]>(
   let lastArgs: T | null = null;
   let lastArgsTrailing: T | null = null;
   let watchdog: number | null = null;
-  
+
   const scheduleFunc = (args: T) => {
     timerId = window.requestAnimationFrame(() => {
       timerId = null;