@marimo-team/islands 0.19.7-dev30 → 0.19.7-dev33

package/src/utils/download.ts

@@ -70,16 +70,15 @@ function releaseBodyPrinting() {
  * Prepare a cell element for screenshot capture.
  *
  * @param element - The cell output element to prepare
- * @param enablePrintMode - When true, adds a 'printing' class to the body.
- *   This can cause layout shifts that cause the page to scroll.
+ * @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,
-  enablePrintMode: boolean,
+  snappy: boolean,
 ) {
   element.classList.add("printing-output");
-  if (enablePrintMode) {
+  if (!snappy) {
     acquireBodyPrinting();
   }
   const originalOverflow = element.style.overflow;
@@ -87,7 +86,7 @@ function prepareCellElementForScreenshot(
 
   return () => {
     element.classList.remove("printing-output");
-    if (enablePrintMode) {
+    if (!snappy) {
       releaseBodyPrinting();
     }
     element.style.overflow = originalOverflow;
@@ -100,13 +99,12 @@ const THRESHOLD_TIME_MS = 500;
  * Capture a cell output as a PNG data URL.
  *
  * @param cellId - The ID of the cell to capture
- * @param enablePrintMode - When true, enables print mode which adds a 'printing' class to the body.
- *   This can cause layout shifts that cause the page to scroll.
+ * @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,
-  enablePrintMode = true,
+  snappy = false,
 ): Promise<string | undefined> {
   const element = findElementForCell(cellId);
   if (!element) {
@@ -118,11 +116,11 @@ export async function getImageDataUrlForCell(
     return iframeDataUrl;
   }
 
-  const cleanup = prepareCellElementForScreenshot(element, enablePrintMode);
+  const cleanup = prepareCellElementForScreenshot(element, snappy);
 
   try {
     const startTime = Date.now();
-    const dataUrl = await toPng(element);
+    const dataUrl = await toPng(element, undefined, snappy);
     const timeTaken = Date.now() - startTime;
     if (timeTaken > THRESHOLD_TIME_MS) {
       Logger.debug(
@@ -159,7 +157,7 @@ export async function downloadCellOutputAsImage(
   await downloadHTMLAsImage({
     element,
     filename,
-    prepare: () => prepareCellElementForScreenshot(element, true),
+    prepare: () => prepareCellElementForScreenshot(element, false),
   });
 }
 

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

@@ -4,6 +4,143 @@ import { Logger } from "./Logger";
 
 export type HtmlToImageOptions = Parameters<typeof htmlToImageToPng>[1];
 
+// For improved performance, we include these styles that are likely to be present on the element.
+export const necessaryStyleProperties = [
+  // Sizing
+  "width",
+  "height",
+  "min-width",
+  "min-height",
+  "max-width",
+  "max-height",
+  "box-sizing",
+  "aspect-ratio",
+
+  // Display & Layout
+  "display",
+  "position",
+  "top",
+  "left",
+  "bottom",
+  "right",
+  "z-index",
+  "float",
+  "clear",
+
+  // Flexbox
+  "flex",
+  "flex-direction",
+  "flex-wrap",
+  "flex-grow",
+  "flex-shrink",
+  "flex-basis",
+  "align-items",
+  "align-self",
+  "justify-content",
+  "gap",
+  "order",
+
+  // Grid
+  "grid-template-columns",
+  "grid-template-rows",
+  "grid-column",
+  "grid-row",
+  "row-gap",
+  "column-gap",
+
+  // Spacing
+  "margin",
+  "margin-top",
+  "margin-right",
+  "margin-bottom",
+  "margin-left",
+  "padding",
+  "padding-top",
+  "padding-right",
+  "padding-bottom",
+  "padding-left",
+
+  // Typography
+  "font",
+  "font-family",
+  "font-size",
+  "font-weight",
+  "font-style",
+  "line-height",
+  "letter-spacing",
+  "word-spacing",
+  "text-align",
+  "text-decoration",
+  "text-transform",
+  "text-indent",
+  "text-shadow",
+  "white-space",
+  "text-wrap",
+  "word-break",
+  "text-overflow",
+  "vertical-align",
+  "color",
+
+  // Background
+  "background",
+  "background-color",
+  "background-image",
+  "background-size",
+  "background-position",
+  "background-repeat",
+  "background-clip",
+
+  // Borders
+  "border",
+  "border-width",
+  "border-style",
+  "border-color",
+  "border-top",
+  "border-right",
+  "border-bottom",
+  "border-left",
+  "border-radius",
+  "outline",
+
+  // Effects
+  "box-shadow",
+  "text-shadow",
+  "opacity",
+  "filter",
+  "backdrop-filter",
+  "mix-blend-mode",
+  "transform",
+  "clip-path",
+
+  // Overflow & Visibility
+  // We don't include overflow properties because they can include scrollbars
+  // "overflow",
+  // "overflow-x",
+  // "overflow-y",
+  "visibility",
+
+  // SVG
+  "fill",
+  "stroke",
+  "stroke-width",
+
+  // Images & Objects
+  "object-fit",
+  "object-position",
+
+  // Lists
+  "list-style",
+  "list-style-type",
+
+  // Tables
+  "border-collapse",
+  "border-spacing",
+
+  // Misc
+  "content",
+  "cursor",
+];
+
 /**
  * Default options for html-to-image conversions.
  * These handle common edge cases like filtering out toolbars and logging errors.
@@ -39,9 +176,11 @@ 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,
   });
 }