@marimo-team/islands 0.19.7-dev35 → 0.19.7-dev37

package/src/utils/download.ts

@@ -46,50 +46,21 @@ function findElementForCell(cellId: CellId): HTMLElement | undefined {
   return element;
 }
 
-/**
- * Reference counter for body.printing class to handle concurrent screenshot captures.
- * Only adds the class when count goes 0→1, only removes when count goes 1→0.
- */
-let bodyPrintingRefCount = 0;
-
-function acquireBodyPrinting() {
-  bodyPrintingRefCount++;
-  if (bodyPrintingRefCount === 1) {
-    document.body.classList.add("printing");
-  }
-}
-
-function releaseBodyPrinting() {
-  bodyPrintingRefCount--;
-  if (bodyPrintingRefCount === 0) {
-    document.body.classList.remove("printing");
-  }
-}
-
 /**
  * Prepare a cell element for screenshot capture.
  *
  * @param element - The cell output element to prepare
- * @param snappy - When true, avoids layout shifts and speeds up the capture.
  * @returns A cleanup function to restore the element's original state
  */
-function prepareCellElementForScreenshot(
-  element: HTMLElement,
-  snappy: boolean,
-) {
-  element.classList.add("printing-output");
-  if (!snappy) {
-    acquireBodyPrinting();
-  }
+function prepareCellElementForScreenshot(element: HTMLElement) {
   const originalOverflow = element.style.overflow;
-  element.style.overflow = "auto";
+  const maxHeight = element.style.maxHeight;
+  element.style.overflow = "visible";
+  element.style.maxHeight = "none";
 
   return () => {
-    element.classList.remove("printing-output");
-    if (!snappy) {
-      releaseBodyPrinting();
-    }
     element.style.overflow = originalOverflow;
+    element.style.maxHeight = maxHeight;
   };
 }
 
@@ -99,12 +70,10 @@ const THRESHOLD_TIME_MS = 500;
  * Capture a cell output as a PNG data URL.
  *
  * @param cellId - The ID of the cell to capture
- * @param snappy - When true, uses a faster method to capture the image. Avoids layout shifts.
  * @returns The PNG as a data URL, or undefined if the cell element wasn't found
  */
 export async function getImageDataUrlForCell(
   cellId: CellId,
-  snappy = false,
 ): Promise<string | undefined> {
   const element = findElementForCell(cellId);
   if (!element) {
@@ -116,11 +85,11 @@ export async function getImageDataUrlForCell(
     return iframeDataUrl;
   }
 
-  const cleanup = prepareCellElementForScreenshot(element, snappy);
+  const cleanup = prepareCellElementForScreenshot(element);
 
   try {
     const startTime = Date.now();
-    const dataUrl = await toPng(element, undefined, snappy);
+    const dataUrl = await toPng(element);
     const timeTaken = Date.now() - startTime;
     if (timeTaken > THRESHOLD_TIME_MS) {
       Logger.debug(
@@ -142,25 +111,20 @@ export async function downloadCellOutputAsImage(
   cellId: CellId,
   filename: string,
 ) {
-  const element = findElementForCell(cellId);
-  if (!element) {
-    return;
-  }
-
-  // Cell outputs that are iframes
-  const iframeDataUrl = await captureIframeAsImage(element);
-  if (iframeDataUrl) {
-    downloadByURL(iframeDataUrl, Filenames.toPNG(filename));
+  const dataUrl = await getImageDataUrlForCell(cellId);
+  if (!dataUrl) {
     return;
   }
-
-  await downloadHTMLAsImage({
-    element,
-    filename,
-    prepare: () => prepareCellElementForScreenshot(element, false),
-  });
+  return downloadByURL(dataUrl, Filenames.toPNG(filename));
 }
 
+export const ADD_PRINTING_CLASS = (): (() => void) => {
+  document.body.classList.add("printing");
+  return () => {
+    document.body.classList.remove("printing");
+  };
+};
+
 export async function downloadHTMLAsImage(opts: {
   element: HTMLElement;
   filename: string;
@@ -175,10 +139,6 @@ export async function downloadHTMLAsImage(opts: {
   let cleanup: (() => void) | undefined;
   if (prepare) {
     cleanup = prepare(element);
-  } else {
-    // When no prepare function is provided (e.g., downloading full notebook),
-    // add body.printing ourselves
-    document.body.classList.add("printing");
   }
 
   try {

package/src/utils/html-to-image.ts

@@ -113,10 +113,9 @@ export const necessaryStyleProperties = [
   "clip-path",
 
   // Overflow & Visibility
-  // We don't include overflow properties because they can include scrollbars
-  // "overflow",
-  // "overflow-x",
-  // "overflow-y",
+  "overflow",
+  "overflow-x",
+  "overflow-y",
   "visibility",
 
   // SVG
@@ -149,12 +148,11 @@ export const defaultHtmlToImageOptions: HtmlToImageOptions = {
   filter: (node) => {
     try {
       if ("classList" in node) {
-        // Filter out matplotlib toolbars
-        if (node.classList.contains("mpl-toolbar")) {
-          return false;
-        }
-
-        if (node.classList.contains("no-print")) {
+        const classes = node.classList;
+        if (
+          classes.contains("mpl-toolbar") ||
+          classes.contains("print:hidden")
+        ) {
           return false;
         }
       }
@@ -167,6 +165,7 @@ export const defaultHtmlToImageOptions: HtmlToImageOptions = {
   onImageErrorHandler: (event) => {
     Logger.error("Error loading image:", event);
   },
+  includeStyleProperties: necessaryStyleProperties,
 };
 
 /**
@@ -176,11 +175,9 @@ export const defaultHtmlToImageOptions: HtmlToImageOptions = {
 export async function toPng(
   element: HTMLElement,
   options?: HtmlToImageOptions,
-  snappy?: boolean,
 ): Promise<string> {
   return htmlToImageToPng(element, {
     ...defaultHtmlToImageOptions,
-    includeStyleProperties: snappy ? necessaryStyleProperties : undefined,
     ...options,
   });
 }