Fix node colors; fix spacebar not closing graph

frontend/src/components/Editor.svelte

@@ -16,7 +16,6 @@
 	import { createFullscreenState } from "@graphite/state-providers/fullscreen";
 	import { createNodeGraphState } from "@graphite/state-providers/node-graph";
 	import { createPortfolioState } from "@graphite/state-providers/portfolio";
-	import { createWorkspaceState } from "@graphite/state-providers/workspace";
 
 	import MainWindow from "@graphite/components/window/MainWindow.svelte";
 
@@ -37,8 +36,6 @@
 	setContext("nodeGraph", nodeGraph);
 	let portfolio = createPortfolioState(editor);
 	setContext("portfolio", portfolio);
-	let workspace = createWorkspaceState(editor);
-	setContext("workspace", workspace);
 
 	// Initialize managers, which are isolated systems that subscribe to backend messages to link them to browser API functionality (like JS events, IndexedDB, etc.)
 	createClipboardManager(editor);

frontend/src/components/panels/Document.svelte

@@ -35,7 +35,7 @@
 
 	let rulerHorizontal: CanvasRuler | undefined;
 	let rulerVertical: CanvasRuler | undefined;
-	let canvasContainer: HTMLDivElement | undefined;
+	let viewport: HTMLDivElement | undefined;
 
 	const editor = getContext<Editor>("editor");
 	const document = getContext<DocumentState>("document");
@@ -126,7 +126,7 @@
 	function canvasPointerDown(e: PointerEvent) {
 		const onEditbox = e.target instanceof HTMLDivElement && e.target.contentEditable;
 
-		if (!onEditbox) canvasContainer?.setPointerCapture(e.pointerId);
+		if (!onEditbox) viewport?.setPointerCapture(e.pointerId);
 	}
 
 	// Update rendered SVGs
@@ -136,7 +136,7 @@
 
 		await tick();
 
-		const placeholders = window.document.querySelectorAll("[data-canvas] [data-canvas-placeholder]");
+		const placeholders = window.document.querySelectorAll("[data-viewport] [data-canvas-placeholder]");
 		// Replace the placeholders with the actual canvas elements
 		placeholders.forEach((placeholder) => {
 			const canvasName = placeholder.getAttribute("data-canvas-placeholder");
@@ -317,11 +317,11 @@
 
 	// Resize elements to render the new viewport size
 	export function viewportResize() {
-		if (!canvasContainer) return;
+		if (!viewport) return;
 
 		// Resize the canvas
-		canvasSvgWidth = Math.ceil(parseFloat(getComputedStyle(canvasContainer).width));
-		canvasSvgHeight = Math.ceil(parseFloat(getComputedStyle(canvasContainer).height));
+		canvasSvgWidth = Math.ceil(parseFloat(getComputedStyle(viewport).width));
+		canvasSvgHeight = Math.ceil(parseFloat(getComputedStyle(viewport).height));
 
 		// Resize the rulers
 		rulerHorizontal?.resize();
@@ -440,38 +440,34 @@
 		{#if !graphViewOverlayOpen}
 			<WidgetLayout layout={$document.documentModeLayout} />
 			<WidgetLayout layout={$document.toolOptionsLayout} />
-
 			<LayoutRow class="spacer" />
-
 			<WidgetLayout layout={$document.documentBarLayout} />
 		{:else}
 			<WidgetLayout layout={$document.nodeGraphBarLayout} />
 		{/if}
 	</LayoutRow>
-	<LayoutRow class="shelf-and-viewport">
+	<LayoutRow class="shelf-and-table">
 		<LayoutCol class="shelf">
 			{#if !graphViewOverlayOpen}
 				<LayoutCol class="tools" scrollableY={true}>
 					<WidgetLayout layout={$document.toolShelfLayout} />
 				</LayoutCol>
 			{/if}
-
 			<LayoutCol class="spacer" />
-
-			<LayoutCol class="widgets-below-shelf">
+			<LayoutCol class="shelf-bottom-widgets">
 				<WidgetLayout layout={$document.graphViewOverlayButtonLayout} />
 				<WidgetLayout layout={$document.workingColorsLayout} />
 			</LayoutCol>
 		</LayoutCol>
-		<LayoutCol class="viewport">
-			<LayoutRow class="bar-area top-ruler">
+		<LayoutCol class="table">
+			<LayoutRow class="ruler-or-scrollbar top-ruler">
 				<CanvasRuler origin={rulerOrigin.x} majorMarkSpacing={rulerSpacing} numberInterval={rulerInterval} direction="Horizontal" bind:this={rulerHorizontal} />
 			</LayoutRow>
-			<LayoutRow class="canvas-area">
-				<LayoutCol class="bar-area">
+			<LayoutRow class="viewport-container">
+				<LayoutCol class="ruler-or-scrollbar">
 					<CanvasRuler origin={rulerOrigin.y} majorMarkSpacing={rulerSpacing} numberInterval={rulerInterval} direction="Vertical" bind:this={rulerVertical} />
 				</LayoutCol>
-				<LayoutCol class="canvas-area" styles={{ cursor: canvasCursor }}>
+				<LayoutCol class="viewport-container" styles={{ cursor: canvasCursor }}>
 					{#if cursorEyedropper}
 						<EyedropperPreview
 							colorChoice={cursorEyedropperPreviewColorChoice}
@@ -482,7 +478,7 @@
 							y={cursorTop}
 						/>
 					{/if}
-					<div class="canvas" on:pointerdown={(e) => canvasPointerDown(e)} on:dragover={(e) => e.preventDefault()} on:drop={(e) => pasteFile(e)} bind:this={canvasContainer} data-canvas>
+					<div class="viewport" on:pointerdown={(e) => canvasPointerDown(e)} on:dragover={(e) => e.preventDefault()} on:drop={(e) => pasteFile(e)} bind:this={viewport} data-viewport>
 						<svg class="artboards" style:width={canvasWidthCSS} style:height={canvasHeightCSS}>
 							{@html artboardSvg}
 						</svg>
@@ -503,11 +499,11 @@
 							{/if}
 						</div>
 					</div>
-					<div class="graph-view" class:open={graphViewOverlayOpen} style:--fade-artwork="80%">
+					<div class="graph-view" class:open={graphViewOverlayOpen} style:--fade-artwork="80%" data-graph>
 						<Graph />
 					</div>
 				</LayoutCol>
-				<LayoutCol class="bar-area right-scrollbar">
+				<LayoutCol class="ruler-or-scrollbar right-scrollbar">
 					<PersistentScrollbar
 						direction="Vertical"
 						handleLength={scrollbarSize.y}
@@ -517,7 +513,7 @@
 					/>
 				</LayoutCol>
 			</LayoutRow>
-			<LayoutRow class="bar-area bottom-scrollbar">
+			<LayoutRow class="ruler-or-scrollbar bottom-scrollbar">
 				<PersistentScrollbar
 					direction="Horizontal"
 					handleLength={scrollbarSize.x}
@@ -550,7 +546,7 @@
 			}
 		}
 
-		.shelf-and-viewport {
+		.shelf-and-table {
 			.shelf {
 				width: 32px;
 				flex: 0 0 auto;
@@ -587,7 +583,7 @@
 					min-height: 20px;
 				}
 
-				.widgets-below-shelf {
+				.shelf-bottom-widgets {
 					flex: 0 0 auto;
 
 					.widget-layout:first-of-type {
@@ -613,10 +609,10 @@
 				}
 			}
 
-			.viewport {
+			.table {
 				flex: 1 1 100%;
 
-				.bar-area {
+				.ruler-or-scrollbar {
 					flex: 0 0 auto;
 				}
 
@@ -633,11 +629,11 @@
 					margin-right: 16px;
 				}
 
-				.canvas-area {
+				.viewport-container {
 					flex: 1 1 100%;
 					position: relative;
 
-					.canvas {
+					.viewport {
 						background: var(--color-2-mildblack);
 						width: 100%;
 						height: 100%;

frontend/src/components/views/Graph.svelte

@@ -635,6 +635,8 @@
 				style:--offset-left={(node.position?.x || 0) + (selected.includes(node.id) ? draggingNodes?.roundX || 0 : 0)}
 				style:--offset-top={(node.position?.y || 0) + (selected.includes(node.id) ? draggingNodes?.roundY || 0 : 0)}
 				style:--clip-path-id={`url(#${clipPathId})`}
+				style:--data-color={`var(--color-data-${node.primaryOutput?.dataType || "general"})`}
+				style:--data-color-dim={`var(--color-data-${node.primaryOutput?.dataType || "general"}-dim)`}
 				data-node={node.id}
 			>
 				<div class="node-chain" />
@@ -707,6 +709,8 @@
 				style:--offset-left={(node.position?.x || 0) + (selected.includes(node.id) ? draggingNodes?.roundX || 0 : 0)}
 				style:--offset-top={(node.position?.y || 0) + (selected.includes(node.id) ? draggingNodes?.roundY || 0 : 0)}
 				style:--clip-path-id={`url(#${clipPathId})`}
+				style:--data-color={`var(--color-data-${node.primaryOutput?.dataType || "general"})`}
+				style:--data-color-dim={`var(--color-data-${node.primaryOutput?.dataType || "general"}-dim)`}
 				data-node={node.id}
 			>
 				<!-- Primary row -->
@@ -901,11 +905,12 @@
 			left: calc(var(--offset-left) * 24px);
 			top: calc(var(--offset-top) * 24px);
 			// TODO: Reenable the `transition` property below after dealing with all edge cases where the wires need to be updated until the transition is complete
-			// transition: top 0.1s cubic-bezier(0, 0, 0.2, 1), left 0.1s cubic-bezier(0, 0, 0.2, 1); // Update `DRAG_SMOOTHING_TIME` in the JS above
-			// TODO: Find a solution for this having no effect in Firefox due to a browser bug caused when the two ancestor
-			// elements, `.graph` and `.panel`, have the simultaneous pairing of `overflow: hidden` and `border-radius`.
+			// transition: top 0.1s cubic-bezier(0, 0, 0.2, 1), left 0.1s cubic-bezier(0, 0, 0.2, 1); // Update `DRAG_SMOOTHING_TIME` in the JS above.
+			// TODO: Reenable the `backdrop-filter` property once a solution can be found for the black whole-page flickering problems it causes in Chrome.
+			// TODO: Additionally, find a solution for this having no effect in Firefox due to a browser bug caused when the two
+			// ancestor elements, `.graph` and `.panel`, each have the simultaneous pairing of `overflow: hidden` and `border-radius`.
 			// See: https://stackoverflow.com/questions/75137879/bug-with-backdrop-filter-in-firefox
-			backdrop-filter: blur(4px);
+			// backdrop-filter: blur(4px);
 			background: rgba(0, 0, 0, 0.33);
 
 			&::after {
@@ -939,7 +944,7 @@
 			}
 
 			&.previewed::after {
-				border: 1px dashed var(--color-data-vector);
+				border: 1px dashed var(--data-color);
 			}
 
 			.ports {
@@ -1016,7 +1021,7 @@
 
 			.thumbnail {
 				background: var(--color-2-mildblack);
-				border: 1px solid var(--color-data-vector-dim);
+				border: 1px solid var(--data-color-dim);
 				border-radius: 2px;
 				position: relative;
 				box-sizing: border-box;
@@ -1081,7 +1086,7 @@
 			top: calc((var(--offset-top) + 0.5) * 24px);
 
 			&::after {
-				border: 1px solid var(--color-data-vector-dim);
+				border: 1px solid var(--data-color-dim);
 				border-radius: 2px;
 			}
 

frontend/src/components/window/workspace/Workspace.svelte

@@ -5,7 +5,6 @@
 	import Panel from "@graphite/components/window/workspace/Panel.svelte";
 	import { getContext } from "svelte";
 	import type { Editor } from "@graphite/wasm-communication/editor";
-	import type { WorkspaceState } from "@graphite/state-providers/workspace";
 	import type { PortfolioState } from "@graphite/state-providers/portfolio";
 	import type { DialogState } from "@graphite/state-providers/dialog";
 	import type { FrontendDocumentDetails } from "@graphite/wasm-communication/messages";
@@ -35,7 +34,6 @@
 	});
 
 	const editor = getContext<Editor>("editor");
-	const workspace = getContext<WorkspaceState>("workspace");
 	const portfolio = getContext<PortfolioState>("portfolio");
 	const dialog = getContext<DialogState>("dialog");