smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: image render perf (#8697)

Browse source
This commit is contained in:
David Luzar 2024-10-23 11:58:43 +02:00 • committed by GitHub
parent 4cedf3d966
commit 958e03fcc6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 8 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

16
packages/excalidraw/renderer/renderElement.ts
View file

@ -137,6 +137,7 @@ export interface ExcalidrawElementWithCanvas {
canvasOffsetX: number; canvasOffsetX: number;
canvasOffsetY: number; canvasOffsetY: number;
boundTextElementVersion: number | null; boundTextElementVersion: number | null;
imageCrop: ExcalidrawImageElement["crop"] | null;
containingFrameOpacity: number; containingFrameOpacity: number;
boundTextCanvas: HTMLCanvasElement; boundTextCanvas: HTMLCanvasElement;
} }
@ -334,6 +335,7 @@ const generateElementCanvas = (
getContainingFrame(element, elementsMap)?.opacity || 100, getContainingFrame(element, elementsMap)?.opacity || 100,
boundTextCanvas, boundTextCanvas,
angle: element.angle, angle: element.angle,
imageCrop: isImageElement(element) ? element.crop : null,
}; };
}; };
@ -535,6 +537,7 @@ const generateElementWithCanvas = (
!appState?.shouldCacheIgnoreZoom; !appState?.shouldCacheIgnoreZoom;
const boundTextElement = getBoundTextElement(element, elementsMap); const boundTextElement = getBoundTextElement(element, elementsMap);
const boundTextElementVersion = boundTextElement?.version || null; const boundTextElementVersion = boundTextElement?.version || null;
const imageCrop = isImageElement(element) ? element.crop : null;
const containingFrameOpacity = const containingFrameOpacity =
getContainingFrame(element, elementsMap)?.opacity || 100; getContainingFrame(element, elementsMap)?.opacity || 100;
@ -544,6 +547,7 @@ const generateElementWithCanvas = (
shouldRegenerateBecauseZoom || shouldRegenerateBecauseZoom ||
prevElementWithCanvas.theme !== appState.theme || prevElementWithCanvas.theme !== appState.theme ||
prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion || prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion ||
prevElementWithCanvas.imageCrop !== imageCrop ||
prevElementWithCanvas.containingFrameOpacity !== containingFrameOpacity || prevElementWithCanvas.containingFrameOpacity !== containingFrameOpacity ||
// since we rotate the canvas when copying from cached canvas, we don't // since we rotate the canvas when copying from cached canvas, we don't
// regenerate the cached canvas. But we need to in case of labels which are // regenerate the cached canvas. But we need to in case of labels which are
@ -966,23 +970,13 @@ export const renderElement = (
context.restore(); context.restore();
} }
const _elementWithCanvas = generateElementCanvas(
elementWithCanvas.element,
allElementsMap,
appState.zoom,
renderConfig,
appState,
);
if (_elementWithCanvas) {
drawElementFromCanvas( drawElementFromCanvas(
_elementWithCanvas, elementWithCanvas,
context, context,
renderConfig, renderConfig,
appState, appState,
allElementsMap, allElementsMap,
); );
}
// reset // reset
context.imageSmoothingEnabled = currentImageSmoothingStatus; context.imageSmoothingEnabled = currentImageSmoothingStatus;