Merge branch 'master' into zsviczian-fix-exportToSvg

# Conflicts:
#	src/scene/export.ts

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14-alpine AS build
+FROM node:18 AS build
 
 WORKDIR /opt/node_app
 

src/renderer/renderScene.ts

@@ -162,23 +162,52 @@ const fillCircle = (
 const strokeGrid = (
   context: CanvasRenderingContext2D,
   gridSize: number,
-  offsetX: number,
-  offsetY: number,
+  scrollX: number,
+  scrollY: number,
+  zoom: Zoom,
   width: number,
   height: number,
 ) => {
+  const BOLD_LINE_FREQUENCY = 5;
+
+  enum GridLineColor {
+    Bold = "#cccccc",
+    Regular = "#e5e5e5",
+  }
+
+  const offsetX =
+    -Math.round(zoom.value / gridSize) * gridSize + (scrollX % gridSize);
+  const offsetY =
+    -Math.round(zoom.value / gridSize) * gridSize + (scrollY % gridSize);
+
+  const lineWidth = Math.min(1 / zoom.value, 1);
+
+  const spaceWidth = 1 / zoom.value;
+  const lineDash = [lineWidth * 3, spaceWidth + (lineWidth + spaceWidth)];
+
   context.save();
-  context.strokeStyle = "rgba(0,0,0,0.1)";
-  context.beginPath();
+  context.lineWidth = lineWidth;
+
   for (let x = offsetX; x < offsetX + width + gridSize * 2; x += gridSize) {
+    const isBold =
+      Math.round(x - scrollX) % (BOLD_LINE_FREQUENCY * gridSize) === 0;
+    context.beginPath();
+    context.setLineDash(isBold ? [] : lineDash);
+    context.strokeStyle = isBold ? GridLineColor.Bold : GridLineColor.Regular;
     context.moveTo(x, offsetY - gridSize);
     context.lineTo(x, offsetY + height + gridSize * 2);
+    context.stroke();
   }
   for (let y = offsetY; y < offsetY + height + gridSize * 2; y += gridSize) {
+    const isBold =
+      Math.round(y - scrollY) % (BOLD_LINE_FREQUENCY * gridSize) === 0;
+    context.beginPath();
+    context.setLineDash(isBold ? [] : lineDash);
+    context.strokeStyle = isBold ? GridLineColor.Bold : GridLineColor.Regular;
     context.moveTo(offsetX - gridSize, y);
     context.lineTo(offsetX + width + gridSize * 2, y);
+    context.stroke();
   }
-  context.stroke();
   context.restore();
 };
 
@@ -425,12 +454,9 @@ export const _renderScene = ({
       strokeGrid(
         context,
         appState.gridSize,
-        -Math.ceil(renderConfig.zoom.value / appState.gridSize) *
-          appState.gridSize +
-          (renderConfig.scrollX % appState.gridSize),
-        -Math.ceil(renderConfig.zoom.value / appState.gridSize) *
-          appState.gridSize +
-          (renderConfig.scrollY % appState.gridSize),
+        renderConfig.scrollX,
+        renderConfig.scrollY,
+        renderConfig.zoom,
         normalizedCanvasWidth / renderConfig.zoom.value,
         normalizedCanvasHeight / renderConfig.zoom.value,
       );

src/scene/export.ts

@@ -15,6 +15,18 @@ import Scene from "./Scene";
 
 export const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
 
+const createScene = (
+  elements: readonly NonDeletedExcalidrawElement[],
+): Scene | null => {
+  if (!elements || Scene.getScene(elements[0])) {
+    return null;
+  }
+  const scene = new Scene();
+  scene.replaceAllElements(elements);
+  elements?.forEach((el) => Scene.mapElementToScene(el, scene));
+  return scene;
+};
+
 export const exportToCanvas = async (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: AppState,
@@ -38,6 +50,7 @@ export const exportToCanvas = async (
     return { canvas, scale: appState.exportScale };
   },
 ) => {
+  const scene = createScene(elements);
   const [minX, minY, width, height] = getCanvasSize(elements, exportPadding);
 
   const { canvas, scale = 1 } = createCanvas(width, height);
@@ -79,6 +92,7 @@ export const exportToCanvas = async (
     },
   });
 
+  scene?.destroy();
   return canvas;
 };
 
@@ -105,6 +119,7 @@ export const exportToSvg = async (
     exportScale = 1,
     exportEmbedScene,
   } = appState;
+  const scene = createScene(elements);
   let metadata = "";
   if (exportEmbedScene) {
     try {
@@ -217,6 +232,7 @@ export const exportToSvg = async (
     renderEmbeddables: opts?.renderEmbeddables,
   });
 
+  scene?.destroy();
   return svgRoot;
 };