wip2

Author: dwelle

excalidraw-app/App.tsx

@@ -391,6 +391,10 @@ const ExcalidrawWrapper = () => {
 
   const editorInterface = useEditorInterface();
 
+  useEffect(() => {
+    document.documentElement.classList.remove("dark");
+  }, []);
+
   // initial state
   // ---------------------------------------------------------------------------
 

packages/common/src/colors.test.ts

@@ -1,5 +1,6 @@
 import {
   applyDarkModeFilter,
+  COLOR_CHARCOAL_BLACK,
   COLOR_PALETTE,
   rgbToHex,
 } from "@excalidraw/common";
@@ -101,7 +102,7 @@ describe("applyDarkModeFilter", () => {
   describe("COLOR_PALETTE regression tests", () => {
     it("transforms black from palette", () => {
       // COLOR_PALETTE.black is #1e1e1e (not pure black)
-      const result = applyDarkModeFilter(COLOR_PALETTE.black);
+      const result = applyDarkModeFilter(COLOR_CHARCOAL_BLACK);
       expect(result).toBe("#d3d3d3");
     });
 
@@ -175,7 +176,7 @@ describe("applyDarkModeFilter", () => {
     it("matches snapshot for all palette colors", () => {
       const transformedPalette: Record<string, string | string[]> = {};
 
-      transformedPalette.black = applyDarkModeFilter(COLOR_PALETTE.black);
+      transformedPalette.black = applyDarkModeFilter(COLOR_CHARCOAL_BLACK);
       transformedPalette.white = applyDarkModeFilter(COLOR_PALETTE.white);
       transformedPalette.transparent = applyDarkModeFilter(
         COLOR_PALETTE.transparent,

packages/element/src/renderElement.ts

@@ -321,7 +321,7 @@ const generateElementCanvas = (
   return {
     element,
     canvas,
-    theme: appState.theme,
+    theme: renderConfig.theme,
     scale,
     zoomValue: zoom.value,
     canvasOffsetX,
@@ -538,7 +538,6 @@ export let elementWithCanvasCache = new WeakMap<
 
 export const clearRenderCache = () => {
   elementWithCanvasCache = new WeakMap();
-  pathsCache = new WeakMap();
 };
 
 const generateElementWithCanvas = (
@@ -567,7 +566,7 @@ const generateElementWithCanvas = (
   if (
     !prevElementWithCanvas ||
     shouldRegenerateBecauseZoom ||
-    prevElementWithCanvas.theme !== appState.theme ||
+    prevElementWithCanvas.theme !== renderConfig.theme ||
     prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion ||
     prevElementWithCanvas.imageCrop !== imageCrop ||
     prevElementWithCanvas.containingFrameOpacity !== containingFrameOpacity ||
@@ -748,14 +747,14 @@ export const renderElement = (
 
         context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
         context.strokeStyle =
-          appState.theme === THEME.DARK
+          renderConfig.theme === THEME.DARK
             ? applyDarkModeFilter(FRAME_STYLE.strokeColor)
             : FRAME_STYLE.strokeColor;
 
         // TODO change later to only affect AI frames
         if (isMagicFrameElement(element)) {
           context.strokeStyle =
-            appState.theme === THEME.LIGHT
+            renderConfig.theme === THEME.LIGHT
               ? "#7affd7"
               : applyDarkModeFilter("#1d8264");
         }

packages/element/src/shape.ts

@@ -32,12 +32,14 @@ import type { GlobalPoint } from "@excalidraw/math";
 
 import type { Mutable } from "@excalidraw/common/utility-types";
 
-import type { EmbedsValidationStatus } from "@excalidraw/excalidraw/types";
+import type {
+  AppState,
+  EmbedsValidationStatus,
+} from "@excalidraw/excalidraw/types";
 import type {
   ElementShape,
   ElementShapes,
   SVGPathString,
-  StaticCanvasRenderConfig,
 } from "@excalidraw/excalidraw/scene/types";
 
 import { elementWithCanvasCache } from "./renderElement";
@@ -119,7 +121,7 @@ export class ShapeCache {
     element: T,
     renderConfig: {
       isExporting: boolean;
-      canvasBackgroundColor: StaticCanvasRenderConfig["canvasBackgroundColor"];
+      canvasBackgroundColor: AppState["viewBackgroundColor"];
       embedsValidationStatus: EmbedsValidationStatus;
       theme: AppState["theme"];
     } | null,
@@ -637,7 +639,7 @@ const _generateElementShape = (
     theme,
   }: {
     isExporting: boolean;
-    canvasBackgroundColor: string | null;
+    canvasBackgroundColor: string;
     embedsValidationStatus: EmbedsValidationStatus | null;
     theme?: AppState["theme"];
   },

packages/excalidraw/components/App.tsx

@@ -2792,10 +2792,10 @@ class App extends React.Component<AppProps, AppState> {
     this.resetStore();
 
     if (initialData?.scrollX != null) {
-      scene.appState.scrollX = initialData.scrollX;
+      restoredAppState.scrollX = initialData.scrollX;
     }
     if (initialData?.scrollY != null) {
-      scene.appState.scrollY = initialData.scrollY;
+      restoredAppState.scrollY = initialData.scrollY;
     }
 
     this.resetHistory();

packages/excalidraw/components/ExportDialog.scss

@@ -21,7 +21,7 @@
   }
 
   &.theme--dark .ExportDialog__preview canvas {
-    filter: none;
+    // filter: none;
   }
 
   .ExportDialog__actions {

packages/excalidraw/components/TTDDialog/common.ts

@@ -8,7 +8,11 @@ import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
 import { EditorLocalStorage } from "../../data/EditorLocalStorage";
 import { canvasToBlob } from "../../data/blob";
 import { t } from "../../i18n";
-import { convertToExcalidrawElements, exportToCanvas } from "../../index";
+import {
+  convertToExcalidrawElements,
+  exportToCanvas,
+  THEME,
+} from "../../index";
 
 import type { AppClassProperties, BinaryFiles } from "../../types";
 
@@ -95,17 +99,21 @@ export const convertMermaidToExcalidraw = async ({
     };
 
     const canvas = await exportToCanvas({
-      elements: data.current.elements,
-      files: data.current.files,
-      exportPadding: DEFAULT_EXPORT_PADDING,
-      maxWidthOrHeight:
-        Math.max(parent.offsetWidth, parent.offsetHeight) *
-        window.devicePixelRatio,
-      appState: {
+      data: {
+        elements: data.current.elements,
+        files: data.current.files,
+      },
+      config: {
         // TODO hack (will be refactored in TTD v2)
-        exportWithDarkMode: document
+        theme: document
           .querySelector(".excalidraw-container")
-          ?.classList.contains("theme--dark"),
+          ?.classList.contains("theme--dark")
+          ? THEME.DARK
+          : THEME.LIGHT,
+        padding: DEFAULT_EXPORT_PADDING,
+        maxWidthOrHeight:
+          Math.max(parent.offsetWidth, parent.offsetHeight) *
+          window.devicePixelRatio,
       },
     });
     // if converting to blob fails, there's some problem that will

packages/excalidraw/renderer/staticScene.ts

@@ -253,7 +253,7 @@ const _renderStaticScene = ({
     scale,
     normalizedWidth,
     normalizedHeight,
-    theme: appState.theme,
+    theme: renderConfig.theme,
     isExporting,
     canvasBackgroundColor: renderConfig.canvasBackgroundColor,
   });

packages/excalidraw/scene/export.ts

@@ -627,16 +627,13 @@ export const exportToCanvas = async ({
       scrollX: -x + normalizedPadding,
       scrollY: -y + normalizedPadding,
       zoom: { value: DEFAULT_ZOOM_VALUE },
-
       shouldCacheIgnoreZoom: false,
-      theme: cfg.theme || THEME.LIGHT,
     },
     scale: canvasScale,
     renderConfig: {
       canvasBackgroundColor:
         cfg.canvasBackgroundColor === false
-          ? // null indicates transparent background
-            null
+          ? "transparent"
           : cfg.canvasBackgroundColor ||
             appState.viewBackgroundColor ||
             COLOR_WHITE,
@@ -647,7 +644,7 @@ export const exportToCanvas = async ({
       embedsValidationStatus: new Map(),
       elementsPendingErasure: new Set(),
       pendingFlowchartNodes: null,
-      theme: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT,
+      theme: cfg.theme || THEME.LIGHT,
     },
   });
 

packages/excalidraw/scene/types.ts

@@ -32,8 +32,7 @@ export type StaticCanvasRenderConfig = {
   /** when exporting the behavior is slightly different (e.g. we can't use
    CSS filters), and we disable render optimizations for best output */
   isExporting: boolean;
-  /** null indicates transparent bg */
-  canvasBackgroundColor: string | null;
+  canvasBackgroundColor: string;
   embedsValidationStatus: EmbedsValidationStatus;
   elementsPendingErasure: ElementsPendingErasure;
   pendingFlowchartNodes: PendingExcalidrawElements | null;