perf: improve new element drawing (#8340)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>

packages/excalidraw/renderer/interactiveScene.ts

@@ -680,8 +680,11 @@ const _renderInteractiveScene = ({
     }
   }
 
-  if (appState.editingElement && isTextElement(appState.editingElement)) {
-    const textElement = allElementsMap.get(appState.editingElement.id) as
+  if (
+    appState.editingTextElement &&
+    isTextElement(appState.editingTextElement)
+  ) {
+    const textElement = allElementsMap.get(appState.editingTextElement.id) as
       | ExcalidrawTextElement
       | undefined;
     if (textElement && !textElement.autoResize) {
@@ -894,7 +897,7 @@ const _renderInteractiveScene = ({
         !appState.viewModeEnabled &&
         showBoundingBox &&
         // do not show transform handles when text is being edited
-        !isTextElement(appState.editingElement)
+        !isTextElement(appState.editingTextElement)
       ) {
         renderTransformHandles(
           context,

packages/excalidraw/renderer/renderNewElementScene.ts

@@ -0,0 +1,66 @@
+import type { NewElementSceneRenderConfig } from "../scene/types";
+import { throttleRAF } from "../utils";
+import { bootstrapCanvas, getNormalizedCanvasDimensions } from "./helpers";
+import { renderElement } from "./renderElement";
+
+const _renderNewElementScene = ({
+  canvas,
+  rc,
+  newElement,
+  elementsMap,
+  allElementsMap,
+  scale,
+  appState,
+  renderConfig,
+}: NewElementSceneRenderConfig) => {
+  if (canvas) {
+    const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(
+      canvas,
+      scale,
+    );
+
+    const context = bootstrapCanvas({
+      canvas,
+      scale,
+      normalizedWidth,
+      normalizedHeight,
+    });
+
+    // Apply zoom
+    context.save();
+    context.scale(appState.zoom.value, appState.zoom.value);
+
+    if (newElement && newElement.type !== "selection") {
+      renderElement(
+        newElement,
+        elementsMap,
+        allElementsMap,
+        rc,
+        context,
+        renderConfig,
+        appState,
+      );
+    } else {
+      context.clearRect(0, 0, normalizedWidth, normalizedHeight);
+    }
+  }
+};
+
+export const renderNewElementSceneThrottled = throttleRAF(
+  (config: NewElementSceneRenderConfig) => {
+    _renderNewElementScene(config);
+  },
+  { trailing: true },
+);
+
+export const renderNewElementScene = (
+  renderConfig: NewElementSceneRenderConfig,
+  throttle?: boolean,
+) => {
+  if (throttle) {
+    renderNewElementSceneThrottled(renderConfig);
+    return;
+  }
+
+  _renderNewElementScene(renderConfig);
+};