fix: No more debounced refresh() for subtypes.

src/components/App.tsx

@@ -361,7 +361,6 @@ export const useExcalidrawSetAppState = () =>
 export const useExcalidrawActionManager = () =>
   useContext(ExcalidrawActionManagerContext);
 
-let refreshTimer = 0;
 let didTapTwice: boolean = false;
 let tappedTwiceTimer = 0;
 let cursorX = 0;
@@ -1388,20 +1387,6 @@ class App extends React.Component<AppProps, AppState> {
       cursorButton[socketId] = user.button;
     });
 
-    const refresh = () => {
-      // If a scene refresh is cued, restart the countdown.
-      // This way we are not calling this.setState({}) once per
-      // ExcalidrawElement. The countdown improves performance
-      // when there are large numbers of ExcalidrawElements
-      // executing this refresh() callback.
-      if (refreshTimer !== 0) {
-        window.clearTimeout(refreshTimer);
-      }
-      refreshTimer = window.setTimeout(() => {
-        this.refresh();
-        window.clearTimeout(refreshTimer);
-      }, 50);
-    };
     const renderingElements = this.scene
       .getNonDeletedElements()
       .filter((element) => {
@@ -1449,7 +1434,6 @@ class App extends React.Component<AppProps, AppState> {
           imageCache: this.imageCache,
           isExporting: false,
           renderScrollbars: !this.device.isMobile,
-          renderCb: refresh,
         },
         callback: ({ atLeastOneVisibleElement, scrollBars }) => {
           if (scrollBars) {

src/packages/extensions/ts/mathjax/implementation.tsx

@@ -22,6 +22,7 @@ import {
 } from "../../../../element/types";
 import { newElementWith } from "../../../../element/mutateElement";
 import { getElementAbsoluteCoords } from "../../../../element/bounds";
+import Scene from "../../../../scene/Scene";
 
 // Imports for actions
 import { t, registerAuxLangData } from "../../../../i18n";
@@ -908,7 +909,7 @@ const measureMathElement = function (element, next) {
   return metrics;
 } as SubtypeMethods["measureText"];
 
-const renderMathElement = function (element, context, renderCb) {
+const renderMathElement = function (element, context) {
   ensureMathElement(element);
   const isMathJaxLoaded = mathJaxLoaded;
   const _element = element as NonDeleted<ExcalidrawMathElement>;
@@ -996,9 +997,7 @@ const renderMathElement = function (element, context, renderCb) {
               if (isMathJaxLoaded) {
                 imageCache[imgKey] = img;
               }
-              if (renderCb) {
+              Scene.getScene(element)?.informMutation();
-                renderCb();
-              }
             };
             img.src = reader.result as string;
           },

src/renderer/renderElement.ts

@@ -257,7 +257,7 @@ const drawElementOnCanvas = (
   context.globalAlpha = element.opacity / 100;
   const map = getSubtypeMethods(element.subtype);
   if (map?.render) {
-    map.render(element, context, renderConfig.renderCb);
+    map.render(element, context);
     context.globalAlpha = 1;
     return;
   }

src/scene/export.ts

@@ -11,7 +11,6 @@ import {
   getInitializedImageElements,
   updateImageCache,
 } from "../element/image";
-import { ensureSubtypesLoadedForElements } from "../subtypes";
 
 export const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
 
@@ -52,9 +51,13 @@ export const exportToCanvas = async (
     files,
   });
 
-  let refreshTimer = 0;
+  renderScene({
-
+    elements,
-  const renderConfig = {
+    appState,
+    scale,
+    rc: rough.canvas(canvas),
+    canvas,
+    renderConfig: {
       viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
       scrollX: -minX + exportPadding,
       scrollY: -minY + exportPadding,
@@ -70,30 +73,8 @@ export const exportToCanvas = async (
       renderSelection: false,
       renderGrid: false,
       isExporting: true,
-    renderCb: () => {
-      if (refreshTimer !== 0) {
-        window.clearTimeout(refreshTimer);
-      }
-      refreshTimer = window.setTimeout(() => {
-        renderConfig.renderCb = () => {};
-        window.clearTimeout(refreshTimer);
-        // Here instead of setState({}), call renderScene() again
-        render();
-      }, 50);
     },
-  };
-
-  const render = () => {
-    renderScene({
-      elements,
-      appState,
-      scale,
-      rc: rough.canvas(canvas),
-      canvas,
-      renderConfig,
   });
-  };
-  render();
 
   return canvas;
 };
@@ -187,13 +168,11 @@ export const exportToSvg = async (
   }
 
   const rsvg = rough.svg(svgRoot);
-  await ensureSubtypesLoadedForElements(elements, () => {
   renderSceneToSvg(elements, rsvg, svgRoot, files || {}, {
     offsetX: -minX + exportPadding,
     offsetY: -minY + exportPadding,
     exportWithDarkMode: appState.exportWithDarkMode,
   });
-  });
 
   return svgRoot;
 };

src/scene/types.ts

@@ -24,7 +24,6 @@ export type RenderConfig = {
   renderScrollbars?: boolean;
   renderSelection?: boolean;
   renderGrid?: boolean;
-  renderCb?: () => void;
   /** when exporting the behavior is slightly different (e.g. we can't use
     CSS filters), and we disable render optimizations for best output */
   isExporting: boolean;

src/subtypes.ts

@@ -241,7 +241,6 @@ export type SubtypeMethods = {
   render: (
     element: NonDeleted<ExcalidrawElement>,
     context: CanvasRenderingContext2D,
-    renderCb?: () => void,
   ) => void;
   renderSvg: (
     svgRoot: SVGElement,