Removed SceneState from renderElement (#301)

src/renderer/renderElement.ts

@@ -1,32 +1,20 @@
-import rough from "roughjs/bin/wrappers/rough";
-
 import { withCustomMathRandom } from "../random";
 
 import { ExcalidrawElement } from "../element/types";
 import { isTextElement } from "../element/typeChecks";
 import { getDiamondPoints, getArrowPoints } from "../element/bounds";
 import { RoughCanvas } from "roughjs/bin/canvas";
-import { SceneState } from "../scene/types";
-
-// Casting second argument (DrawingSurface) to any,
-// because it is requred by TS definitions and not required at runtime
-const generator = rough.generator(null, null as any);
 
 export function renderElement(
   element: ExcalidrawElement,
   rc: RoughCanvas,
-  context: CanvasRenderingContext2D,
+  context: CanvasRenderingContext2D
-  { scrollX, scrollY }: SceneState
 ) {
+  const generator = rc.generator;
   if (element.type === "selection") {
     const fillStyle = context.fillStyle;
     context.fillStyle = "rgba(0, 0, 255, 0.10)";
-    context.fillRect(
+    context.fillRect(0, 0, element.width, element.height);
-      element.x + scrollX,
-      element.y + scrollY,
-      element.width,
-      element.height
-    );
     context.fillStyle = fillStyle;
   } else if (element.type === "rectangle") {
     const shape = withCustomMathRandom(element.seed, () => {
@@ -40,9 +28,7 @@ export function renderElement(
     });
 
     context.globalAlpha = element.opacity / 100;
-    context.translate(element.x + scrollX, element.y + scrollY);
     rc.draw(shape);
-    context.translate(-element.x - scrollX, -element.y - scrollY);
     context.globalAlpha = 1;
   } else if (element.type === "diamond") {
     const shape = withCustomMathRandom(element.seed, () => {
@@ -73,9 +59,7 @@ export function renderElement(
       );
     });
     context.globalAlpha = element.opacity / 100;
-    context.translate(element.x + scrollX, element.y + scrollY);
     rc.draw(shape);
-    context.translate(-element.x - scrollX, -element.y - scrollY);
     context.globalAlpha = 1;
   } else if (element.type === "ellipse") {
     const shape = withCustomMathRandom(element.seed, () =>
@@ -95,9 +79,7 @@ export function renderElement(
     );
 
     context.globalAlpha = element.opacity / 100;
-    context.translate(element.x + scrollX, element.y + scrollY);
     rc.draw(shape);
-    context.translate(-element.x - scrollX, -element.y - scrollY);
     context.globalAlpha = 1;
   } else if (element.type === "arrow") {
     const [x1, y1, x2, y2, x3, y3, x4, y4] = getArrowPoints(element);
@@ -117,9 +99,7 @@ export function renderElement(
     ]);
 
     context.globalAlpha = element.opacity / 100;
-    context.translate(element.x + scrollX, element.y + scrollY);
     shapes.forEach(shape => rc.draw(shape));
-    context.translate(-element.x - scrollX, -element.y - scrollY);
     context.globalAlpha = 1;
     return;
   } else if (isTextElement(element)) {
@@ -130,10 +110,8 @@ export function renderElement(
     context.fillStyle = element.strokeColor;
     context.fillText(
       element.text,
-      element.x + scrollX,
+      0,
-      element.y +
+      element.baseline || element.actualBoundingBoxAscent || 0
-        scrollY +
-        (element.baseline || element.actualBoundingBoxAscent || 0)
     );
     context.fillStyle = fillStyle;
     context.font = font;

src/renderer/renderScene.ts

@@ -50,7 +50,15 @@ export function renderScene(
   };
 
   elements.forEach(element => {
-    renderElement(element, rc, context, sceneState);
+    context.translate(
+      element.x + sceneState.scrollX,
+      element.y + sceneState.scrollY
+    );
+    renderElement(element, rc, context);
+    context.translate(
+      -element.x - sceneState.scrollX,
+      -element.y - sceneState.scrollY
+    );
   });
 
   if (renderSelection) {