fix: split renderScene so that locales aren't imported unnecessarily (e…

…xcalidraw#7718)

* fix: split renderScene so that locales aren't imported unnecessarily

* lint

* split export code

* rename renderScene to helpers.ts

* add helpers

* fix typo

* fixes

* move renderElementToSvg to export

* lint

* rename export to staticSvgScene

* fix

packages/excalidraw/components/canvases/InteractiveCanvas.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef } from "react";
-import { renderInteractiveScene } from "../../renderer/renderScene";
 import { isShallowEqual, sceneCoordsToViewportCoords } from "../../utils";
 import { CURSOR_TYPE } from "../../constants";
 import { t } from "../../i18n";
@@ -12,6 +11,7 @@ import type {
 } from "../../scene/types";
 import type { NonDeletedExcalidrawElement } from "../../element/types";
 import { isRenderThrottlingEnabled } from "../../reactUtils";
+import { renderInteractiveScene } from "../../renderer/interactiveScene";
 
 type InteractiveCanvasProps = {
   containerRef: React.RefObject<HTMLDivElement>;

packages/excalidraw/components/canvases/StaticCanvas.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from "react";
 import { RoughCanvas } from "roughjs/bin/canvas";
-import { renderStaticScene } from "../../renderer/renderScene";
+import { renderStaticScene } from "../../renderer/staticScene";
 import { isShallowEqual } from "../../utils";
 import type { AppState, StaticCanvasAppState } from "../../types";
 import type {

packages/excalidraw/renderer/helpers.ts

@@ -0,0 +1,75 @@
+import { StaticCanvasAppState, AppState } from "../types";
+
+import { StaticCanvasRenderConfig } from "../scene/types";
+
+import { THEME_FILTER } from "../constants";
+
+export const fillCircle = (
+  context: CanvasRenderingContext2D,
+  cx: number,
+  cy: number,
+  radius: number,
+  stroke = true,
+) => {
+  context.beginPath();
+  context.arc(cx, cy, radius, 0, Math.PI * 2);
+  context.fill();
+  if (stroke) {
+    context.stroke();
+  }
+};
+
+export const getNormalizedCanvasDimensions = (
+  canvas: HTMLCanvasElement,
+  scale: number,
+): [number, number] => {
+  // When doing calculations based on canvas width we should used normalized one
+  return [canvas.width / scale, canvas.height / scale];
+};
+
+export const bootstrapCanvas = ({
+  canvas,
+  scale,
+  normalizedWidth,
+  normalizedHeight,
+  theme,
+  isExporting,
+  viewBackgroundColor,
+}: {
+  canvas: HTMLCanvasElement;
+  scale: number;
+  normalizedWidth: number;
+  normalizedHeight: number;
+  theme?: AppState["theme"];
+  isExporting?: StaticCanvasRenderConfig["isExporting"];
+  viewBackgroundColor?: StaticCanvasAppState["viewBackgroundColor"];
+}): CanvasRenderingContext2D => {
+  const context = canvas.getContext("2d")!;
+
+  context.setTransform(1, 0, 0, 1, 0, 0);
+  context.scale(scale, scale);
+
+  if (isExporting && theme === "dark") {
+    context.filter = THEME_FILTER;
+  }
+
+  // Paint background
+  if (typeof viewBackgroundColor === "string") {
+    const hasTransparence =
+      viewBackgroundColor === "transparent" ||
+      viewBackgroundColor.length === 5 || // #RGBA
+      viewBackgroundColor.length === 9 || // #RRGGBBA
+      /(hsla|rgba)\(/.test(viewBackgroundColor);
+    if (hasTransparence) {
+      context.clearRect(0, 0, normalizedWidth, normalizedHeight);
+    }
+    context.save();
+    context.fillStyle = viewBackgroundColor;
+    context.fillRect(0, 0, normalizedWidth, normalizedHeight);
+    context.restore();
+  } else {
+    context.clearRect(0, 0, normalizedWidth, normalizedHeight);
+  }
+
+  return context;
+};