Use ragg in R bitmap fallback if available

Author: georgestagg

_extensions/live/resources/live-runtime.js

@@ -13,6 +13,7 @@ The following code cell options can be used in `webr` or `pyodide` blocks, or se
 |--------|---------|-------------|
 | `autorun` | `false` | Evaluate initial code block contents automatically? |
 | `caption` | None | Heading text for code editor block. |
+| `canvas` | `true` | Use HTML canvas graphics? |
 | `completion` | `true` | Show code completion and suggestions in editor? |
 | `echo` | `false` | Show source code in output display? |
 | `edit` | `true` | Show the code editor? If `false`, a read-only code block is shown. |

docs/reference/cell-options.qmd

@@ -20,6 +20,7 @@ export type OJSEditorElement = HTMLElement & { value?: EditorValue };
 
 type ExerciseOptions = EvaluateOptions & {
   autorun: boolean;
+  canvas: boolean;
   caption: string;
   completion: boolean;
   id: string,
@@ -108,6 +109,7 @@ abstract class ExerciseEditor {
     // Default editor options
     this.options = Object.assign({
       autorun: false,
+      canvas: true,
       completion: true,
       runbutton: true,
       startover: true,

live-runtime/src/editor.ts

@@ -383,6 +383,7 @@ export class WebREvaluator implements ExerciseEvaluator {
         const imageDiv = document.createElement("img");
         outputDiv.className = "cell-output-display cell-output-pyodide";
         imageDiv.src = `data:${mime};base64, ${data}`;
+        imageDiv.style.maxWidth = "100%";
         outputDiv.appendChild(imageDiv);
         container.appendChild(outputDiv);
       }
@@ -426,28 +427,31 @@ export class WebREvaluator implements ExerciseEvaluator {
 
           // Plot image
           if (classes.includes('recordedplot')) {
-            let width = await this.webR.evalRNumber('72 * getOption("webr.fig.width")');
+            let width = await this.webR.evalRNumber('getOption("webr.fig.width")');
             if ("fig-width" in this.options) {
-              width = 72 * Number(this.options["fig-width"]);
+              width = Number(this.options["fig-width"]);
             }
-            let height = await this.webR.evalRNumber('72 * getOption("webr.fig.height")');
+            let height = await this.webR.evalRNumber('getOption("webr.fig.height")');
             if ("fig-height" in this.options) {
-              height = 72 * Number(this.options["fig-height"]);
+              height = Number(this.options["fig-height"]);
             }
 
-            if (typeof OffscreenCanvas !== "undefined") {
+            if (typeof OffscreenCanvas !== "undefined" && this.options.canvas) {
               const capturePlot = await shelter.captureR("replayPlot(plot)", {
-                captureGraphics: { width, height },
+                captureGraphics: { width: 72 * width, height: 72 * height },
                 env: { plot: result[i] },
               });
               appendImage(capturePlot.images[0]);
             } else {
               // Fallback to cairo graphics
               const data = await shelter.evalR(`
                 tmp_dir <- tempdir()
-                on.exit(unlink(tmp_dir, recursive = TRUE))
                 filename <- paste0(tmp_dir, ".webr-plot.png")
-                png(file = filename, width = width, height = height)
+                if (requireNamespace("ragg", quietly = TRUE)) {
+                  ragg::agg_png(file = filename, width = width, height = height, units = "in", res = 300)
+                } else {
+                  png(file = filename, width = width, height = height, units = "in", res = 300)
+                }
                 replayPlot(plot)
                 dev.off()
                 filesize <- file.info(filename)[["size"]]
@@ -507,7 +511,7 @@ export class WebREvaluator implements ExerciseEvaluator {
           const height = await this.webR.evalRNumber('72 * getOption("webr.fig.height")');
           let images: (ImageBitmap | HTMLImageElement)[] = [];
 
-          const hasOffscreenCanvas = typeof OffscreenCanvas !== "undefined";
+          const hasOffscreenCanvas = this.options.canvas && typeof OffscreenCanvas !== "undefined";
           if (!hasOffscreenCanvas) {
             // Fallback to cairo graphics
             this.webR.evalRVoid(`

live-runtime/src/evaluate-webr.ts

@@ -9,6 +9,7 @@ export type EvaluateValue = {
 export type OJSEvaluateElement = HTMLElement & { value?: EvaluateValue };
 
 export type EvaluateOptions = {
+  canvas: boolean;
   define?: string[];
   echo: boolean;
   envir: string;