From 61699ff3c2c20ee9c313fa378e6a21053eec66c8 Mon Sep 17 00:00:00 2001
From: ad1992 <aakansha1216@gmail.com>
Date: Wed, 23 Mar 2022 19:42:39 +0530
Subject: [PATCH] cache the custom image element and improve jittering
 experience

---
 src/renderer/renderElement.ts | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts
index 404998c90..3c3c6c376 100644
--- a/src/renderer/renderElement.ts
+++ b/src/renderer/renderElement.ts
@@ -6,6 +6,7 @@ import {
   NonDeletedExcalidrawElement,
   ExcalidrawFreeDrawElement,
   ExcalidrawImageElement,
+  ExcalidrawCustomElement,
 } from "../element/types";
 import {
   isTextElement,
@@ -189,6 +190,9 @@ const drawImagePlaceholder = (
   );
 };
 
+const customElementImgCache: {
+  [key: ExcalidrawCustomElement["name"]]: HTMLImageElement;
+} = {};
 const drawElementOnCanvas = (
   element: NonDeletedExcalidrawElement,
   rc: RoughCanvas,
@@ -254,10 +258,20 @@ const drawElementOnCanvas = (
     case "custom": {
       const config = renderConfig.customElementsConfig?.find(
         (config) => config.name === element.name,
+      )!;
+      if (!customElementImgCache[config.name]) {
+        const img = document.createElement("img");
+        img.id = config.name;
+        img.src = config.svg;
+        customElementImgCache[img.id] = img;
+      }
+      context.drawImage(
+        customElementImgCache[config.name],
+        0,
+        0,
+        element.width,
+        element.height,
       );
-      const img = document.createElement("img");
-      img.src = config!.svg;
-      context.drawImage(img, 0, 0, element.width, element.height);
       break;
     }
     default: {