From 362cd74a9ba57b305dc42e08870de43c9213e83d Mon Sep 17 00:00:00 2001
From: Timur Khazamov <bboytx@gmail.com>
Date: Wed, 22 Jan 2020 15:14:19 +0100
Subject: [PATCH] Render only visible elements (#415)

* Render only visible elements

* Fixed exporting as PNG

* Moved isVisibleElement to module scope

* rerun-ci

Co-authored-by: David Luzar <luzar.david@gmail.com>
---
 src/renderer/renderScene.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts
index 742196b8..ca4c4bf4 100644
--- a/src/renderer/renderScene.ts
+++ b/src/renderer/renderScene.ts
@@ -57,6 +57,19 @@ export function renderScene(
   };
 
   elements.forEach(element => {
+    if (
+      !isVisibleElement(
+        element,
+        sceneState.scrollX,
+        sceneState.scrollY,
+        // If canvas is scaled for high pixelDeviceRatio width and height
+        // setted in the `style` attribute
+        parseInt(canvas.style.width) || canvas.width,
+        parseInt(canvas.style.height) || canvas.height
+      )
+    ) {
+      return;
+    }
     context.translate(
       element.x + sceneState.scrollX,
       element.y + sceneState.scrollY
@@ -126,3 +139,18 @@ export function renderScene(
     context.fillStyle = fillStyle;
   }
 }
+
+function isVisibleElement(
+  element: ExcalidrawElement,
+  scrollX: number,
+  scrollY: number,
+  canvasWidth: number,
+  canvasHeight: number
+) {
+  let [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+  x1 += scrollX;
+  y1 += scrollY;
+  x2 += scrollX;
+  y2 += scrollY;
+  return x2 >= 0 && x1 <= canvasWidth && y2 >= 0 && y1 <= canvasHeight;
+}