feat: add print functionality to capture and download viewport image (#148)

Co-authored-by: Tomás Grüner <47506558+MegaRedHand@users.noreply.github.com>

Author: pgallino

src/index.ts

@@ -23,6 +23,7 @@ import PauseSvg from "./assets/pause-icon.svg";
 import UndoSvg from "./assets/left-curve-arrow.svg";
 import RedoSvg from "./assets/right-curve-arrow.svg";
 import { layerToName } from "./types/devices/layer";
+import { captureAndDownloadViewport } from "./utils";
 
 const assets = [
   RouterSvg,
@@ -127,9 +128,12 @@ async function loadAssets(otherPromises: Promise<void>[]) {
     deselectElement();
     loadFromFile(ctx);
   };
-  printButton.onclick = () => {
+  printButton.onclick = async () => {
+    const viewport = ctx.getViewport();
+    captureAndDownloadViewport(app, viewport);
     ctx.print();
   };
+
   // Undo button’s logic
   const undoButton = document.getElementById(
     "undo-button",

src/utils.ts

@@ -1,4 +1,5 @@
-import { GraphicsContext } from "pixi.js";
+import { Viewport } from "pixi-viewport";
+import { Application, GraphicsContext, RenderTexture } from "pixi.js";
 
 export enum Colors {
   Violet = 0x4b0082,
@@ -29,3 +30,46 @@ export enum ZIndexLevels {
   Packet = 16,
   Label = 19,
 }
+
+/**
+ * Captures the current viewport and downloads it as an image.
+ * @param app - The PixiJS application instance.
+ * @param viewport - The viewport instance to capture.
+ */
+export function captureAndDownloadViewport(
+  app: Application,
+  viewport: Viewport,
+) {
+  if (!viewport) {
+    alert("Viewport not found.");
+    return;
+  }
+
+  // Step 1: Create a texture and render the viewport into it
+  const renderTexture = RenderTexture.create({
+    width: app.renderer.width,
+    height: app.renderer.height,
+  });
+
+  // Step 2: Render the viewport into the texture
+  app.renderer.render({
+    container: viewport,
+    target: renderTexture,
+  });
+
+  // Step 3: Extract the RenderTexture as a canvas
+  const extractedCanvas = app.renderer.extract.canvas(renderTexture);
+
+  // Step 4: Convert the extracted canvas to a Blob and download it
+  extractedCanvas.toBlob((blob) => {
+    if (!blob) {
+      alert("Failed to generate image.");
+      return;
+    }
+
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = "viewport-snapshot.png";
+    link.click();
+  }, "image/png");
+}