Desktop: Add the transparent viewport hole punch and hook up window button plumbing (#2949)

frontend/src/components/panels/Document.svelte

@@ -16,6 +16,7 @@
 		UpdateMouseCursor,
 		isWidgetSpanRow,
 	} from "@graphite/messages";
+	import type { AppWindowState } from "@graphite/state-providers/app-window";
 	import type { DocumentState } from "@graphite/state-providers/document";
 	import { textInputCleanup } from "@graphite/utility-functions/keyboard-entry";
 	import { extractPixelData, rasterizeSVGCanvas } from "@graphite/utility-functions/rasterization";
@@ -34,6 +35,7 @@
 	let viewport: HTMLDivElement | undefined;
 
 	const editor = getContext<Editor>("editor");
+	const appWindow = getContext<AppWindowState>("appWindow");
 	const document = getContext<DocumentState>("document");
 
 	// Interactive text editing
@@ -514,13 +516,13 @@
 					<RulerInput origin={rulerOrigin.x} majorMarkSpacing={rulerSpacing} numberInterval={rulerInterval} direction="Horizontal" bind:this={rulerHorizontal} />
 				</LayoutRow>
 			{/if}
-			<LayoutRow class="viewport-container-inner">
+			<LayoutRow class="viewport-container-inner-1">
 				{#if rulersVisible}
 					<LayoutCol class="ruler-or-scrollbar">
 						<RulerInput origin={rulerOrigin.y} majorMarkSpacing={rulerSpacing} numberInterval={rulerInterval} direction="Vertical" bind:this={rulerVertical} />
 					</LayoutCol>
 				{/if}
-				<LayoutCol class="viewport-container-inner" styles={{ cursor: canvasCursor }}>
+				<LayoutCol class="viewport-container-inner-2" styles={{ cursor: canvasCursor }} data-viewport-container>
 					{#if cursorEyedropper}
 						<EyedropperPreview
 							colorChoice={cursorEyedropperPreviewColorChoice}
@@ -531,25 +533,27 @@
 							y={cursorTop}
 						/>
 					{/if}
-					<div class="viewport" on:pointerdown={(e) => canvasPointerDown(e)} bind:this={viewport} data-viewport>
-						<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}
+					{#if !$appWindow.viewportHolePunch}
+						<div class="viewport" on:pointerdown={(e) => canvasPointerDown(e)} bind:this={viewport} data-viewport>
+							<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>
+							<canvas
+								class="overlays"
+								width={canvasWidthScaledRoundedToEven}
+								height={canvasHeightScaledRoundedToEven}
+								style:width={canvasWidthCSS}
+								style:height={canvasHeightCSS}
+								data-overlays-canvas
+							>
+							</canvas>
 						</div>
-						<canvas
-							class="overlays"
-							width={canvasWidthScaledRoundedToEven}
-							height={canvasHeightScaledRoundedToEven}
-							style:width={canvasWidthCSS}
-							style:height={canvasHeightCSS}
-							data-overlays-canvas
-						>
-						</canvas>
-					</div>
+					{/if}
 					<div class="graph-view" class:open={$document.graphViewOverlayOpen} style:--fade-artwork={`${$document.fadeArtwork}%`} data-graph>
 						<Graph />
 					</div>
@@ -593,7 +597,8 @@
 		.control-bar {
 			height: 32px;
 			flex: 0 0 auto;
-			margin: 0 4px;
+			padding: 0 4px; // Padding (instead of margin) is needed for the viewport hole punch on desktop
+			background: var(--color-3-darkgray); // Needed for the viewport hole punch on desktop
 
 			.spacer {
 				min-width: 40px;
@@ -632,6 +637,7 @@
 			.tool-shelf {
 				flex: 0 0 auto;
 				justify-content: space-between;
+				background: var(--color-3-darkgray); // Needed for the viewport hole punch on desktop
 
 				.tools {
 					flex: 0 1 auto;
@@ -713,6 +719,7 @@
 
 				.ruler-or-scrollbar {
 					flex: 0 0 auto;
+					background: var(--color-3-darkgray); // Needed for the viewport hole punch on desktop
 				}
 
 				.ruler-corner {
@@ -743,7 +750,8 @@
 					margin-right: 16px;
 				}
 
-				.viewport-container-inner {
+				.viewport-container-inner-1,
+				.viewport-container-inner-2 {
 					flex: 1 1 100%;
 					position: relative;