Prefer arrow functions and callbacks (#1210)

src/scene/comparisons.ts

@@ -23,13 +23,13 @@ export const hasStroke = (type: string) =>
 
 export const hasText = (type: string) => type === "text";
 
-export function getElementAtPosition(
+export const getElementAtPosition = (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: AppState,
   x: number,
   y: number,
   zoom: number,
-) {
+) => {
   let hitElement = null;
   // We need to to hit testing from front (end of the array) to back (beginning of the array)
   for (let i = elements.length - 1; i >= 0; --i) {
@@ -43,13 +43,13 @@ export function getElementAtPosition(
   }
 
   return hitElement;
-}
+};
 
-export function getElementContainingPosition(
+export const getElementContainingPosition = (
   elements: readonly ExcalidrawElement[],
   x: number,
   y: number,
-) {
+) => {
   let hitElement = null;
   // We need to to hit testing from front (end of the array) to back (beginning of the array)
   for (let i = elements.length - 1; i >= 0; --i) {
@@ -63,4 +63,4 @@ export function getElementContainingPosition(
     }
   }
   return hitElement;
-}
+};

src/scene/export.ts

@@ -11,7 +11,7 @@ import { t } from "../i18n";
 
 export const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
 
-export function exportToCanvas(
+export const exportToCanvas = (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: AppState,
   {
@@ -27,16 +27,13 @@ export function exportToCanvas(
     viewBackgroundColor: string;
     shouldAddWatermark: boolean;
   },
-  createCanvas: (width: number, height: number) => any = function (
-    width,
-    height,
-  ) {
+  createCanvas: (width: number, height: number) => any = (width, height) => {
     const tempCanvas = document.createElement("canvas");
     tempCanvas.width = width * scale;
     tempCanvas.height = height * scale;
     return tempCanvas;
   },
-) {
+) => {
   let sceneElements = elements;
   if (shouldAddWatermark) {
     const [, , maxX, maxY] = getCommonBounds(elements);
@@ -78,9 +75,9 @@ export function exportToCanvas(
   );
 
   return tempCanvas;
-}
+};
 
-export function exportToSvg(
+export const exportToSvg = (
   elements: readonly NonDeletedExcalidrawElement[],
   {
     exportBackground,
@@ -93,7 +90,7 @@ export function exportToSvg(
     viewBackgroundColor: string;
     shouldAddWatermark: boolean;
   },
-): SVGSVGElement {
+): SVGSVGElement => {
   let sceneElements = elements;
   if (shouldAddWatermark) {
     const [, , maxX, maxY] = getCommonBounds(elements);
@@ -148,9 +145,9 @@ export function exportToSvg(
   });
 
   return svgRoot;
-}
+};
 
-function getWatermarkElement(maxX: number, maxY: number) {
+const getWatermarkElement = (maxX: number, maxY: number) => {
   const text = t("labels.madeWithExcalidraw");
   const font = "16px Virgil";
   const { width: textWidth } = measureText(text, font);
@@ -169,4 +166,4 @@ function getWatermarkElement(maxX: number, maxY: number) {
     roughness: 1,
     opacity: 100,
   });
-}
+};

src/scene/scroll.ts

@@ -2,13 +2,12 @@ import { FlooredNumber } from "../types";
 import { ExcalidrawElement } from "../element/types";
 import { getCommonBounds } from "../element";
 
-export function normalizeScroll(pos: number) {
-  return Math.floor(pos) as FlooredNumber;
-}
+export const normalizeScroll = (pos: number) =>
+  Math.floor(pos) as FlooredNumber;
 
-export function calculateScrollCenter(
+export const calculateScrollCenter = (
   elements: readonly ExcalidrawElement[],
-): { scrollX: FlooredNumber; scrollY: FlooredNumber } {
+): { scrollX: FlooredNumber; scrollY: FlooredNumber } => {
   if (!elements.length) {
     return {
       scrollX: normalizeScroll(0),
@@ -25,4 +24,4 @@ export function calculateScrollCenter(
     scrollX: normalizeScroll(window.innerWidth / 2 - centerX),
     scrollY: normalizeScroll(window.innerHeight / 2 - centerY),
   };
-}
+};

src/scene/scrollbars.ts

@@ -9,7 +9,7 @@ export const SCROLLBAR_MARGIN = 4;
 export const SCROLLBAR_WIDTH = 6;
 export const SCROLLBAR_COLOR = "rgba(0,0,0,0.3)";
 
-export function getScrollBars(
+export const getScrollBars = (
   elements: readonly ExcalidrawElement[],
   viewportWidth: number,
   viewportHeight: number,
@@ -22,7 +22,7 @@ export function getScrollBars(
     scrollY: FlooredNumber;
     zoom: number;
   },
-): ScrollBars {
+): ScrollBars => {
   // This is the bounding box of all the elements
   const [
     elementsMinX,
@@ -100,9 +100,13 @@ export function getScrollBars(
               Math.max(SCROLLBAR_MARGIN * 2, safeArea.top + safeArea.bottom),
           },
   };
-}
+};
 
-export function isOverScrollBars(scrollBars: ScrollBars, x: number, y: number) {
+export const isOverScrollBars = (
+  scrollBars: ScrollBars,
+  x: number,
+  y: number,
+) => {
   const [isOverHorizontalScrollBar, isOverVerticalScrollBar] = [
     scrollBars.horizontal,
     scrollBars.vertical,
@@ -120,4 +124,4 @@ export function isOverScrollBars(scrollBars: ScrollBars, x: number, y: number) {
     isOverHorizontalScrollBar,
     isOverVerticalScrollBar,
   };
-}
+};

src/scene/selection.ts

@@ -6,10 +6,10 @@ import { getElementAbsoluteCoords, getElementBounds } from "../element";
 import { AppState } from "../types";
 import { newElementWith } from "../element/mutateElement";
 
-export function getElementsWithinSelection(
+export const getElementsWithinSelection = (
   elements: readonly NonDeletedExcalidrawElement[],
   selection: NonDeletedExcalidrawElement,
-) {
+) => {
   const [
     selectionX1,
     selectionY1,
@@ -29,12 +29,12 @@ export function getElementsWithinSelection(
       selectionY2 >= elementY2
     );
   });
-}
+};
 
-export function deleteSelectedElements(
+export const deleteSelectedElements = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
-) {
+) => {
   return {
     elements: elements.map((el) => {
       if (appState.selectedElementIds[el.id]) {
@@ -47,24 +47,24 @@ export function deleteSelectedElements(
       selectedElementIds: {},
     },
   };
-}
+};
 
-export function isSomeElementSelected(
+export const isSomeElementSelected = (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: AppState,
-): boolean {
+): boolean => {
   return elements.some((element) => appState.selectedElementIds[element.id]);
-}
+};
 
 /**
  * Returns common attribute (picked by `getAttribute` callback) of selected
  *  elements. If elements don't share the same value, returns `null`.
  */
-export function getCommonAttributeOfSelectedElements<T>(
+export const getCommonAttributeOfSelectedElements = <T>(
   elements: readonly NonDeletedExcalidrawElement[],
   appState: AppState,
   getAttribute: (element: ExcalidrawElement) => T,
-): T | null {
+): T | null => {
   const attributes = Array.from(
     new Set(
       getSelectedElements(elements, appState).map((element) =>
@@ -73,20 +73,20 @@ export function getCommonAttributeOfSelectedElements<T>(
     ),
   );
   return attributes.length === 1 ? attributes[0] : null;
-}
+};
 
-export function getSelectedElements(
+export const getSelectedElements = (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: AppState,
-) {
+) => {
   return elements.filter((element) => appState.selectedElementIds[element.id]);
-}
+};
 
-export function getTargetElement(
+export const getTargetElement = (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: AppState,
-) {
+) => {
   return appState.editingElement
     ? [appState.editingElement]
     : getSelectedElements(elements, appState);
-}
+};

src/scene/zoom.ts

@@ -1,4 +1,7 @@
-export function getZoomOrigin(canvas: HTMLCanvasElement | null, scale: number) {
+export const getZoomOrigin = (
+  canvas: HTMLCanvasElement | null,
+  scale: number,
+) => {
   if (canvas === null) {
     return { x: 0, y: 0 };
   }
@@ -14,10 +17,10 @@ export function getZoomOrigin(canvas: HTMLCanvasElement | null, scale: number) {
     x: normalizedCanvasWidth / 2,
     y: normalizedCanvasHeight / 2,
   };
-}
+};
 
-export function getNormalizedZoom(zoom: number): number {
+export const getNormalizedZoom = (zoom: number): number => {
   const normalizedZoom = parseFloat(zoom.toFixed(2));
   const clampedZoom = Math.max(0.1, Math.min(normalizedZoom, 2));
   return clampedZoom;
-}
+};