fix(visualization): migrate to html2canvas-pro and fix screenshot transparency

Replace html2canvas with html2canvas-pro and fix transparent background using backgroundColor: null. Add test to verify transparent backgrounds.

Author: christian-huehn-mw

visualization/angular.json

@@ -41,7 +41,7 @@
             ],
             "styles": ["app/tailwind.css", "app/app.scss", "material-icons/iconfont/material-icons.css"],
             "scripts": [],
-            "allowedCommonJsDependencies": ["ajv", "color-convert", "html2canvas", "ignore", "md5", "qrcode", "three-orbit-controls"]
+            "allowedCommonJsDependencies": ["ajv", "color-convert", "html2canvas-pro", "ignore", "md5", "qrcode", "three-orbit-controls"]
           },
           "configurations": {
             "production": {

visualization/app/codeCharta/ui/screenshotButton/screenshotButton.component.spec.ts

@@ -19,15 +19,19 @@ jest.mock("../../../../app/codeCharta/util/clipboard/clipboardWriter", () => {
     }
 })
 
-jest.mock("html2canvas", () => {
+const mockHtml2Canvas = jest.fn()
+
+jest.mock("html2canvas-pro", () => {
     return {
         __esModule: true,
-        default: jest.fn().mockImplementation(() => document.createElement("canvas"))
+        default: (...args: unknown[]) => mockHtml2Canvas(...args)
     }
 })
 
 describe("screenshotButtonComponent", () => {
     beforeEach(() => {
+        mockHtml2Canvas.mockImplementation(() => document.createElement("canvas"))
+
         TestBed.configureTestingModule({
             imports: [ScreenshotButtonComponent],
             providers: [
@@ -131,6 +135,23 @@ describe("screenshotButtonComponent", () => {
             expect(isScreenshotButtonDisabled(container)).toBe(true)
         })
     })
+
+    it("should use null backgroundColor to create transparent screenshots for better clarity", async () => {
+        // Arrange
+        const { fixture } = await render(ScreenshotButtonComponent)
+        jest.spyOn(CanvasRenderingContext2D.prototype, "getImageData").mockImplementation(() => createMockImageData().imageData)
+
+        // Act
+        await fixture.componentInstance.makeScreenshotToFile()
+
+        // Assert
+        expect(mockHtml2Canvas).toHaveBeenCalledWith(
+            expect.anything(),
+            expect.objectContaining({
+                backgroundColor: null
+            })
+        )
+    })
 })
 
 function isScreenshotButtonDisabled(container: Element) {

visualization/app/codeCharta/ui/screenshotButton/screenshotButton.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from "@angular/core"
 import { State, Store } from "@ngrx/store"
 import hotkeys from "hotkeys-js"
-import html2canvas from "html2canvas"
+import html2canvas from "html2canvas-pro"
 import { Color, WebGLRenderer } from "three"
 import { checkWriteToClipboardAllowed, setToClipboard } from "../../../../app/codeCharta/util/clipboard/clipboardWriter"
 import { CcState } from "../../codeCharta.model"
@@ -121,7 +121,7 @@ export class ScreenshotButtonComponent implements OnInit {
 
         const canvas = await html2canvas(document.querySelector("body"), {
             removeContainer: true,
-            backgroundColor: "#00",
+            backgroundColor: null,
             scrollY: -offsetMenuBar,
             height: bodyHeight - offsetMenuBar,
             ignoreElements(element) {

visualization/package-lock.json

@@ -85,7 +85,7 @@
     "fflate": "^0.8.2",
     "font-awesome": "^4.7.0",
     "hotkeys-js": "^3.8.2",
-    "html2canvas": "^1.4.1",
+    "html2canvas-pro": "^1.5.13",
     "idb": "^8.0.0",
     "ignore": "^7.0.5",
     "klona": "^2.0.4",