From 1a0ed4fd77e680617e0ed4c09a3a7e3f7eeef8ec Mon Sep 17 00:00:00 2001
From: Timon Schelling <me@timon.zip>
Date: Wed, 6 Aug 2025 14:11:58 +0000
Subject: [PATCH 1/2] Make viewport element transparent when hole punch is
 enabled

Instead of removing the viewport element completely we make it transparent
Allows the text tool to work
---
 .../src/components/panels/Document.svelte     | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte
index 89e29ae03f..424e297963 100644
--- a/frontend/src/components/panels/Document.svelte
+++ b/frontend/src/components/panels/Document.svelte
@@ -533,16 +533,18 @@
 							y={cursorTop}
 						/>
 					{/if}
-					{#if !$appWindow.viewportHolePunch}
-						<div class="viewport" on:pointerdown={(e) => canvasPointerDown(e)} bind:this={viewport} data-viewport>
+					<div class:viewport={!$appWindow.viewportHolePunch} class:viewport-transparent={$appWindow.viewportHolePunch} on:pointerdown={(e) => canvasPointerDown(e)} bind:this={viewport} data-viewport>
+						{#if !$appWindow.viewportHolePunch}
 							<svg class="artboards" style:width={canvasWidthCSS} style:height={canvasHeightCSS}>
 								{@html artworkSvg}
 							</svg>
-							<div class="text-input" style:width={canvasWidthCSS} style:height={canvasHeightCSS} style:pointer-events={showTextInput ? "auto" : ""}>
-								{#if showTextInput}
-									<div bind:this={textInput} style:transform="matrix({textInputMatrix})" on:scroll={preventTextEditingScroll} />
-								{/if}
-							</div>
+						{/if}
+						<div class="text-input" style:width={canvasWidthCSS} style:height={canvasHeightCSS} style:pointer-events={showTextInput ? "auto" : ""}>
+							{#if showTextInput}
+								<div bind:this={textInput} style:transform="matrix({textInputMatrix})" on:scroll={preventTextEditingScroll} />
+							{/if}
+						</div>
+						{#if !$appWindow.viewportHolePunch}
 							<canvas
 								class="overlays"
 								width={canvasWidthScaledRoundedToEven}
@@ -552,8 +554,9 @@
 								data-overlays-canvas
 							>
 							</canvas>
-						</div>
-					{/if}
+						{/if}
+					</div>
+
 					<div class="graph-view" class:open={$document.graphViewOverlayOpen} style:--fade-artwork={`${$document.fadeArtwork}%`} data-graph>
 						<Graph />
 					</div>
@@ -757,6 +760,9 @@
 
 					.viewport {
 						background: var(--color-2-mildblack);
+					}
+
+					.viewport, .viewport-transparent {
 						width: 100%;
 						height: 100%;
 						// Allows the SVG to be placed at explicit integer values of width and height to prevent non-pixel-perfect SVG scaling

From a6451cf6697e1bf0a4fd7cd5a9ff881699a95b2b Mon Sep 17 00:00:00 2001
From: Timon Schelling <me@timon.zip>
Date: Wed, 6 Aug 2025 16:30:36 +0000
Subject: [PATCH 2/2] Fix formatting

---
 frontend/src/components/panels/Document.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte
index 424e297963..4ab7afd6fc 100644
--- a/frontend/src/components/panels/Document.svelte
+++ b/frontend/src/components/panels/Document.svelte
@@ -533,7 +533,13 @@
 							y={cursorTop}
 						/>
 					{/if}
-					<div class:viewport={!$appWindow.viewportHolePunch} class:viewport-transparent={$appWindow.viewportHolePunch} on:pointerdown={(e) => canvasPointerDown(e)} bind:this={viewport} data-viewport>
+					<div
+						class:viewport={!$appWindow.viewportHolePunch}
+						class:viewport-transparent={$appWindow.viewportHolePunch}
+						on:pointerdown={(e) => canvasPointerDown(e)}
+						bind:this={viewport}
+						data-viewport
+					>
 						{#if !$appWindow.viewportHolePunch}
 							<svg class="artboards" style:width={canvasWidthCSS} style:height={canvasHeightCSS}>
 								{@html artworkSvg}
@@ -762,7 +768,8 @@
 						background: var(--color-2-mildblack);
 					}
 
-					.viewport, .viewport-transparent {
+					.viewport,
+					.viewport-transparent {
 						width: 100%;
 						height: 100%;
 						// Allows the SVG to be placed at explicit integer values of width and height to prevent non-pixel-perfect SVG scaling