Prefer arrow functions and callbacks (#1210)

src/renderer/renderElement.ts

@@ -31,10 +31,10 @@ export interface ExcalidrawElementWithCanvas {
   canvasOffsetY: number;
 }
 
-function generateElementCanvas(
+const generateElementCanvas = (
   element: NonDeletedExcalidrawElement,
   zoom: number,
-): ExcalidrawElementWithCanvas {
+): ExcalidrawElementWithCanvas => {
   const canvas = document.createElement("canvas");
   const context = canvas.getContext("2d")!;
 
@@ -75,13 +75,13 @@ function generateElementCanvas(
     1 / (window.devicePixelRatio * zoom),
   );
   return { element, canvas, canvasZoom: zoom, canvasOffsetX, canvasOffsetY };
-}
+};
 
-function drawElementOnCanvas(
+const drawElementOnCanvas = (
   element: NonDeletedExcalidrawElement,
   rc: RoughCanvas,
   context: CanvasRenderingContext2D,
-) {
+) => {
   context.globalAlpha = element.opacity / 100;
   switch (element.type) {
     case "rectangle":
@@ -132,7 +132,7 @@ function drawElementOnCanvas(
     }
   }
   context.globalAlpha = 1;
-}
+};
 
 const elementWithCanvasCache = new WeakMap<
   ExcalidrawElement,
@@ -144,15 +144,13 @@ const shapeCache = new WeakMap<
   Drawable | Drawable[] | null
 >();
 
-export function getShapeForElement(element: ExcalidrawElement) {
-  return shapeCache.get(element);
-}
+export const getShapeForElement = (element: ExcalidrawElement) =>
+  shapeCache.get(element);
 
-export function invalidateShapeForElement(element: ExcalidrawElement) {
+export const invalidateShapeForElement = (element: ExcalidrawElement) =>
   shapeCache.delete(element);
-}
 
-export function generateRoughOptions(element: ExcalidrawElement): Options {
+export const generateRoughOptions = (element: ExcalidrawElement): Options => {
   const options: Options = {
     seed: element.seed,
     strokeLineDash:
@@ -214,13 +212,13 @@ export function generateRoughOptions(element: ExcalidrawElement): Options {
       throw new Error(`Unimplemented type ${element.type}`);
     }
   }
-}
+};
 
-function generateElement(
+const generateElement = (
   element: NonDeletedExcalidrawElement,
   generator: RoughGenerator,
   sceneState?: SceneState,
-) {
+) => {
   let shape = shapeCache.get(element) || null;
   if (!shape) {
     elementWithCanvasCache.delete(element);
@@ -319,14 +317,14 @@ function generateElement(
     return elementWithCanvas;
   }
   return prevElementWithCanvas;
-}
+};
 
-function drawElementFromCanvas(
+const drawElementFromCanvas = (
   elementWithCanvas: ExcalidrawElementWithCanvas,
   rc: RoughCanvas,
   context: CanvasRenderingContext2D,
   sceneState: SceneState,
-) {
+) => {
   const element = elementWithCanvas.element;
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
   const cx = ((x1 + x2) / 2 + sceneState.scrollX) * window.devicePixelRatio;
@@ -346,15 +344,15 @@ function drawElementFromCanvas(
   context.rotate(-element.angle);
   context.translate(-cx, -cy);
   context.scale(window.devicePixelRatio, window.devicePixelRatio);
-}
+};
 
-export function renderElement(
+export const renderElement = (
   element: NonDeletedExcalidrawElement,
   rc: RoughCanvas,
   context: CanvasRenderingContext2D,
   renderOptimizations: boolean,
   sceneState: SceneState,
-) {
+) => {
   const generator = rc.generator;
   switch (element.type) {
     case "selection": {
@@ -404,15 +402,15 @@ export function renderElement(
       throw new Error(`Unimplemented type ${element.type}`);
     }
   }
-}
+};
 
-export function renderElementToSvg(
+export const renderElementToSvg = (
   element: NonDeletedExcalidrawElement,
   rsvg: RoughSVG,
   svgRoot: SVGElement,
   offsetX?: number,
   offsetY?: number,
-) {
+) => {
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
   const cx = (x2 - x1) / 2 - (element.x - x1);
   const cy = (y2 - y1) / 2 - (element.y - y1);
@@ -528,4 +526,4 @@ export function renderElementToSvg(
       }
     }
   }
-}
+};

src/renderer/renderScene.ts

@@ -30,7 +30,7 @@ import colors from "../colors";
 
 type HandlerRectanglesRet = keyof ReturnType<typeof handlerRectangles>;
 
-function colorsForClientId(clientId: string) {
+const colorsForClientId = (clientId: string) => {
   // Naive way of getting an integer out of the clientId
   const sum = clientId.split("").reduce((a, str) => a + str.charCodeAt(0), 0);
 
@@ -41,9 +41,9 @@ function colorsForClientId(clientId: string) {
     background: backgrounds[sum % backgrounds.length],
     stroke: strokes[sum % strokes.length],
   };
-}
+};
 
-function strokeRectWithRotation(
+const strokeRectWithRotation = (
   context: CanvasRenderingContext2D,
   x: number,
   y: number,
@@ -53,7 +53,7 @@ function strokeRectWithRotation(
   cy: number,
   angle: number,
   fill?: boolean,
-) {
+) => {
   context.translate(cx, cy);
   context.rotate(angle);
   if (fill) {
@@ -62,22 +62,22 @@ function strokeRectWithRotation(
   context.strokeRect(x - cx, y - cy, width, height);
   context.rotate(-angle);
   context.translate(-cx, -cy);
-}
+};
 
-function strokeCircle(
+const strokeCircle = (
   context: CanvasRenderingContext2D,
   x: number,
   y: number,
   width: number,
   height: number,
-) {
+) => {
   context.beginPath();
   context.arc(x + width / 2, y + height / 2, width / 2, 0, Math.PI * 2);
   context.fill();
   context.stroke();
-}
+};
 
-export function renderScene(
+export const renderScene = (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: AppState,
   selectionElement: NonDeletedExcalidrawElement | null,
@@ -98,7 +98,7 @@ export function renderScene(
     renderSelection?: boolean;
     renderOptimizations?: boolean;
   } = {},
-) {
+) => {
   if (!canvas) {
     return { atLeastOneVisibleElement: false };
   }
@@ -461,9 +461,9 @@ export function renderScene(
   context.scale(1 / scale, 1 / scale);
 
   return { atLeastOneVisibleElement: visibleElements.length > 0, scrollBars };
-}
+};
 
-function isVisibleElement(
+const isVisibleElement = (
   element: ExcalidrawElement,
   viewportWidth: number,
   viewportHeight: number,
@@ -476,7 +476,7 @@ function isVisibleElement(
     scrollY: FlooredNumber;
     zoom: number;
   },
-) {
+) => {
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
 
   // Apply zoom
@@ -492,10 +492,10 @@ function isVisibleElement(
     y2 + scrollY - viewportHeightDiff / 2 >= 0 &&
     y1 + scrollY - viewportHeightDiff / 2 <= viewportHeightWithZoom
   );
-}
+};
 
 // This should be only called for exporting purposes
-export function renderSceneToSvg(
+export const renderSceneToSvg = (
   elements: readonly NonDeletedExcalidrawElement[],
   rsvg: RoughSVG,
   svgRoot: SVGElement,
@@ -506,7 +506,7 @@ export function renderSceneToSvg(
     offsetX?: number;
     offsetY?: number;
   } = {},
-) {
+) => {
   if (!svgRoot) {
     return;
   }
@@ -522,4 +522,4 @@ export function renderSceneToSvg(
       );
     }
   });
-}
+};

src/renderer/roundRect.ts

@@ -8,14 +8,14 @@
  * @param {Number} height The height of the rectangle
  * @param {Number} radius The corner radius
  */
-export function roundRect(
+export const roundRect = (
   context: CanvasRenderingContext2D,
   x: number,
   y: number,
   width: number,
   height: number,
   radius: number,
-) {
+) => {
   context.beginPath();
   context.moveTo(x + radius, y);
   context.lineTo(x + width - radius, y);
@@ -34,4 +34,4 @@ export function roundRect(
   context.closePath();
   context.fill();
   context.stroke();
-}
+};