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

Author: timon-schelling

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