foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cache the custom image element and improve jittering experience

Browse Source
This commit is contained in:
ad1992 2022-03-23 19:42:39 +05:30
parent 39d0084a5e
commit 61699ff3c2
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/renderer/renderElement.ts
View File

@ -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: {