diff --git a/src/components/App.tsx b/src/components/App.tsx index bbaac3bdf..765049f30 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1362,7 +1362,9 @@ class App extends React.Component { ).getPropertyValue("--color-selection"); const now = Date.now(); - if(!this.state.shouldCacheIgnoreZoom) console.log(`renderScene`,now); + if (!this.state.shouldCacheIgnoreZoom) { + console.log(`renderScene`, now); + } renderScene( { elements: renderingElements, @@ -1400,10 +1402,13 @@ class App extends React.Component { this.setState({ scrolledOutside }); } this.scheduleImageRefresh(); - if(!this.state.shouldCacheIgnoreZoom) setTimeout(()=>console.log(`after renderScene`,now)); + if (!this.state.shouldCacheIgnoreZoom) { + setTimeout(() => console.log(`after renderScene`, now)); + } }, }, - true || THROTTLE_NEXT_RENDER && window.EXCALIDRAW_THROTTLE_RENDER === true, + true || + (THROTTLE_NEXT_RENDER && window.EXCALIDRAW_THROTTLE_RENDER === true), ); if (!THROTTLE_NEXT_RENDER) { diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts index 56735cffe..db1c9e37f 100644 --- a/src/renderer/renderElement.ts +++ b/src/renderer/renderElement.ts @@ -96,7 +96,6 @@ export interface ExcalidrawElementWithCanvas { export const cappedElementCanvasSize = ( element: NonDeletedExcalidrawElement, zoom: Zoom, - renderConfig: RenderConfig, ): { width: number; height: number; @@ -115,7 +114,7 @@ export const cappedElementCanvasSize = ( let height = distance(y1, y2) * window.devicePixelRatio * zoomValue + padding * zoomValue * 2; - + const size = width * height; if (size > sizelimit) { zoomValue = Math.sqrt(sizelimit / size) as NormalizedZoomValue; @@ -126,28 +125,27 @@ export const cappedElementCanvasSize = ( distance(y1, y2) * window.devicePixelRatio * zoomValue + padding * zoomValue * 2; } - return {width, height, zoomValue}; - } else { - let width = + return { width, height, zoomValue }; + } + let width = + element.width * window.devicePixelRatio * zoomValue + + padding * zoomValue * 2; + let height = + element.height * window.devicePixelRatio * zoomValue + + padding * zoomValue * 2; + + const size = width * height; + if (size > sizelimit) { + zoomValue = Math.sqrt(sizelimit / size) as NormalizedZoomValue; + width = element.width * window.devicePixelRatio * zoomValue + padding * zoomValue * 2; - let height = + height = element.height * window.devicePixelRatio * zoomValue + padding * zoomValue * 2; - - const size = width * height; - if (size > sizelimit) { - zoomValue = Math.sqrt(sizelimit / size) as NormalizedZoomValue; - width = - element.width * window.devicePixelRatio * zoomValue + - padding * zoomValue * 2; - height = - element.height * window.devicePixelRatio * zoomValue + - padding * zoomValue * 2; - } - return {width, height, zoomValue}; } -} + return { width, height, zoomValue }; +}; const generateElementCanvas = ( element: NonDeletedExcalidrawElement, @@ -158,12 +156,8 @@ const generateElementCanvas = ( const context = canvas.getContext("2d")!; const padding = getCanvasPadding(element); - const {width, height, zoomValue} = cappedElementCanvasSize ( - element, - zoom, - renderConfig, - ); - + const { width, height, zoomValue } = cappedElementCanvasSize(element, zoom); + canvas.width = width; canvas.height = height; @@ -171,7 +165,7 @@ const generateElementCanvas = ( let canvasOffsetY = 0; if (isLinearElement(element) || isFreeDrawElement(element)) { - const [x1, y1, x2, y2] = getElementAbsoluteCoords(element); + const [x1, y1] = getElementAbsoluteCoords(element); canvasOffsetX = element.x > x1 diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts index 3468085f3..b83910038 100644 --- a/src/renderer/renderScene.ts +++ b/src/renderer/renderScene.ts @@ -29,7 +29,11 @@ import { } from "../scene/scrollbars"; import { getSelectedElements } from "../scene/selection"; -import { renderElement, renderElementToSvg } from "./renderElement"; +import { + cappedElementCanvasSize, + renderElement, + renderElementToSvg, +} from "./renderElement"; import { getClientColors } from "../clients"; import { LinearElementEditor } from "../element/linearElementEditor"; import { @@ -408,8 +412,16 @@ export const _renderScene = ({ let editingLinearElement: NonDeleted | undefined = undefined; const start = Date.now(); - const showDebug = !appState.shouldCacheIgnoreZoom && (appState.zoom.value < 0.5); - if(showDebug) console.log("start: renderElements"); + const showDebug = false; //!appState.shouldCacheIgnoreZoom && (appState.zoom.value < 0.5); + if (showDebug) { + console.log("start: renderElements"); + } + console.log( + visibleElements.reduce((acc, el) => { + const { width, height } = cappedElementCanvasSize(el, appState.zoom); + return acc + width * height; + }, 0), + ); visibleElements.forEach((element) => { try { renderElement(element, rc, context, renderConfig, appState); @@ -429,7 +441,9 @@ export const _renderScene = ({ console.error(error); } }); - if(showDebug) console.log(`finish: renderElements ${Date.now()-start}`); + if (showDebug) { + console.log(`finish: renderElements ${Date.now() - start}`); + } if (editingLinearElement) { renderLinearPointHandles( context, diff --git a/src/utils.ts b/src/utils.ts index 9216ca3da..f616b15ac 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -136,7 +136,7 @@ export const throttleRAF = ( let lastArgs: T | null = null; let lastArgsTrailing: T | null = null; let watchdog: number | null = null; - + const scheduleFunc = (args: T) => { timerId = window.requestAnimationFrame(() => { timerId = null;