fix: exportToSvg to honor frameRendering also for name not only for f…

…rame itself (excalidraw#7270)

Co-authored-by: dwelle <[email protected]>

src/scene/export.ts

@@ -141,6 +141,36 @@ const getFrameRenderingConfig = (
  };
 };
 
+const prepareElementsForRender = ({
+ elements,
+ exportingFrame,
+ frameRendering,
+ exportWithDarkMode,
+}: {
+ elements: readonly ExcalidrawElement[];
+ exportingFrame: ExcalidrawFrameElement | null | undefined;
+ frameRendering: AppState["frameRendering"];
+ exportWithDarkMode: AppState["exportWithDarkMode"];
+}) => {
+ let nextElements: readonly ExcalidrawElement[];
+
+ if (exportingFrame) {
+ nextElements = elementsOverlappingBBox({
+ elements,
+ bounds: exportingFrame,
+ type: "overlap",
+ });
+ } else if (frameRendering.enabled && frameRendering.name) {
+ nextElements = addFrameLabelsAsTextElements(elements, {
+ exportWithDarkMode,
+ });
+ } else {
+ nextElements = elements;
+ }
+
+ return nextElements;
+};
+
 export const exportToCanvas = async (
  elements: readonly NonDeletedExcalidrawElement[],
  appState: AppState,
@@ -169,21 +199,24 @@ export const exportToCanvas = async (
  const tempScene = __createSceneForElementsHack__(elements);
  elements = tempScene.getNonDeletedElements();
 
- let nextElements: ExcalidrawElement[];
+ const frameRendering = getFrameRenderingConfig(
+ exportingFrame ?? null,
+ appState.frameRendering ?? null,
+ );
+
+ const elementsForRender = prepareElementsForRender({
+ elements,
+ exportingFrame,
+ exportWithDarkMode: appState.exportWithDarkMode,
+ frameRendering,
+ });
 
  if (exportingFrame) {
  exportPadding = 0;
- nextElements = elementsOverlappingBBox({
- elements,
- bounds: exportingFrame,
- type: "overlap",
- });
- } else {
- nextElements = addFrameLabelsAsTextElements(elements, appState);
  }
 
  const [minX, minY, width, height] = getCanvasSize(
- exportingFrame ? [exportingFrame] : getRootElements(nextElements),
+ exportingFrame ? [exportingFrame] : getRootElements(elementsForRender),
  exportPadding,
  );
 
@@ -193,7 +226,7 @@ export const exportToCanvas = async (
 
  const { imageCache } = await updateImageCache({
  imageCache: new Map(),
- fileIds: getInitializedImageElements(nextElements).map(
+ fileIds: getInitializedImageElements(elementsForRender).map(
  (element) => element.fileId,
  ),
  files,
@@ -202,15 +235,12 @@ export const exportToCanvas = async (
  renderStaticScene({
  canvas,
  rc: rough.canvas(canvas),
- elements: nextElements,
- visibleElements: nextElements,
+ elements: elementsForRender,
+ visibleElements: elementsForRender,
  scale,
  appState: {
  ...appState,
- frameRendering: getFrameRenderingConfig(
- exportingFrame ?? null,
- appState.frameRendering ?? null,
- ),
+ frameRendering,
  viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
  scrollX: -minX + exportPadding,
  scrollY: -minY + exportPadding,
@@ -250,28 +280,30 @@ export const exportToSvg = async (
  const tempScene = __createSceneForElementsHack__(elements);
  elements = tempScene.getNonDeletedElements();
 
+ const frameRendering = getFrameRenderingConfig(
+ opts?.exportingFrame ?? null,
+ appState.frameRendering ?? null,
+ );
+
  let {
  exportPadding = DEFAULT_EXPORT_PADDING,
+ exportWithDarkMode = false,
  viewBackgroundColor,
  exportScale = 1,
  exportEmbedScene,
  } = appState;
 
  const { exportingFrame = null } = opts || {};
 
- let nextElements: ExcalidrawElement[] = [];
+ const elementsForRender = prepareElementsForRender({
+ elements,
+ exportingFrame,
+ exportWithDarkMode,
+ frameRendering,
+ });
 
  if (exportingFrame) {
  exportPadding = 0;
- nextElements = elementsOverlappingBBox({
- elements,
- bounds: exportingFrame,
- type: "overlap",
- });
- } else {
- nextElements = addFrameLabelsAsTextElements(elements, {
- exportWithDarkMode: appState.exportWithDarkMode ?? false,
- });
  }
 
  let metadata = "";
@@ -295,7 +327,7 @@ export const exportToSvg = async (
  }
 
  const [minX, minY, width, height] = getCanvasSize(
- exportingFrame ? [exportingFrame] : getRootElements(nextElements),
+ exportingFrame ? [exportingFrame] : getRootElements(elementsForRender),
  exportPadding,
  );
 
@@ -306,7 +338,7 @@ export const exportToSvg = async (
  svgRoot.setAttribute("viewBox", `0 0 ${width} ${height}`);
  svgRoot.setAttribute("width", `${width * exportScale}`);
  svgRoot.setAttribute("height", `${height * exportScale}`);
- if (appState.exportWithDarkMode) {
+ if (exportWithDarkMode) {
  svgRoot.setAttribute("filter", THEME_FILTER);
  }
 
@@ -381,15 +413,12 @@ export const exportToSvg = async (
  }
 
  const rsvg = rough.svg(svgRoot);
- renderSceneToSvg(nextElements, rsvg, svgRoot, files || {}, {
+ renderSceneToSvg(elementsForRender, rsvg, svgRoot, files || {}, {
  offsetX,
  offsetY,
- exportWithDarkMode: appState.exportWithDarkMode ?? false,
+ exportWithDarkMode,
  renderEmbeddables: opts?.renderEmbeddables ?? false,
- frameRendering: getFrameRenderingConfig(
- exportingFrame ?? null,
- appState.frameRendering ?? null,
- ),
+ frameRendering,
  });
 
  tempScene.destroy();