Refactor naming to deprecate "node graph frame" terminology (#1187)

frontend/src/components/panels/LayerTree.svelte

@@ -353,16 +353,15 @@
 						on:dragstart={(e) => draggable && dragStart(e, listing)}
 						on:click={(e) => selectLayerWithModifiers(e, listing)}
 					>
-						{@const layerType = layerTypeData(listing.entry.layerType)}
 						<LayoutRow class="layer-type-icon">
-							<IconLabel icon={layerType.icon} />
+							<IconLabel icon={listing.entry.layerType || "Info"} />
 						</LayoutRow>
 						<LayoutRow class="layer-name" on:dblclick={() => onEditLayerName(listing)}>
 							<input
 								data-text-input
 								type="text"
 								value={listing.entry.name}
-								placeholder={`Untitled ${layerType.name}`}
+								placeholder={`Untitled ${listing.entry.layerType || "[Unknown Layer Type]"}`}
 								disabled={!listing.editingName}
 								on:blur={() => onEditLayerNameDeselect(listing)}
 								on:keydown={(e) => e.key === "Escape" && onEditLayerNameDeselect(listing)}

frontend/src/components/widgets/inputs/DropdownInput.svelte

@@ -129,15 +129,7 @@
 
 			&:hover,
 			&.open {
-				background: var(--color-6-lowergray);
-
-				span {
-					color: var(--color-f-white);
-				}
-
-				svg {
-					fill: var(--color-f-white);
-				}
+				background: var(--color-5-dullgray);
 			}
 
 			&.disabled {

frontend/src/components/widgets/inputs/LayerReferenceInput.svelte

@@ -58,8 +58,8 @@
 		<TextLabel italic={true}>{droppable ? "Drop" : "Drag"} Layer Here</TextLabel>
 	{:else}
 		{#if layerName !== undefined && layerType}
-			<IconLabel icon={layerTypeData(layerType).icon} class="layer-icon" />
-			<TextLabel italic={layerName === ""} class="layer-name">{layerName || `Untitled ${layerTypeData(layerType).name}`}</TextLabel>
+			<IconLabel icon={layerType} class="layer-icon" />
+			<TextLabel italic={layerName === ""} class="layer-name">{layerName || `Untitled ${layerType || "[Unknown Layer Type]"}`}</TextLabel>
 		{:else}
 			<TextLabel bold={true} italic={true} class="missing">Layer Missing</TextLabel>
 		{/if}

frontend/src/state-providers/portfolio.ts

@@ -15,7 +15,7 @@ import {
 	TriggerImaginateGenerate,
 	TriggerImaginateTerminate,
 	TriggerImaginateCheckServerStatus,
-	TriggerNodeGraphFrameGenerate,
+	TriggerRasterizeRegionBelowLayer,
 	UpdateActiveDocument,
 	UpdateOpenDocumentsList,
 	UpdateImageData,
@@ -116,21 +116,23 @@ export function createPortfolioState(editor: Editor) {
 			editor.instance.setImageBlobURL(updateImageData.documentId, element.path, blobURL, image.naturalWidth, image.naturalHeight, element.transform);
 		});
 	});
-	editor.subscriptions.subscribeJsMessage(TriggerNodeGraphFrameGenerate, async (triggerNodeGraphFrameGenerate) => {
-		const { documentId, layerPath, svg, size, imaginateNode } = triggerNodeGraphFrameGenerate;
+	editor.subscriptions.subscribeJsMessage(TriggerRasterizeRegionBelowLayer, async (triggerRasterizeRegionBelowLayer) => {
+		const { documentId, layerPath, svg, size, imaginateNodePath } = triggerRasterizeRegionBelowLayer;
 
 		// Rasterize the SVG to an image file
-		let imageData;
 		try {
-			// getImageData may throw an exception if the resolution is too high
 			if (size[0] >= 1 && size[1] >= 1) {
-				imageData = (await rasterizeSVGCanvas(svg, size[0], size[1])).getContext("2d")?.getImageData(0, 0, size[0], size[1]);
+				const imageData = (await rasterizeSVGCanvas(svg, size[0], size[1])).getContext("2d")?.getImageData(0, 0, size[0], size[1]);
+				if (!imageData) return;
+
+				editor.instance.renderGraphUsingRasterizedRegionBelowLayer(documentId, layerPath, new Uint8Array(imageData.data), imageData.width, imageData.height, imaginateNodePath);
 			}
-		} catch (e) {
+		}
+		// getImageData may throw an exception if the resolution is too high
+		catch (e) {
 			console.error("Failed to rasterize the SVG canvas in JS to be sent back to Rust:", e);
 		}
 
-		if (imageData) editor.instance.processNodeGraphFrame(documentId, layerPath, new Uint8Array(imageData.data), imageData.width, imageData.height, imaginateNode);
 	});
 	editor.subscriptions.subscribeJsMessage(TriggerRevokeBlobUrl, async (triggerRevokeBlobUrl) => {
 		URL.revokeObjectURL(triggerRevokeBlobUrl.url);

frontend/src/wasm-communication/messages.ts

@@ -604,7 +604,7 @@ export class TriggerImaginateTerminate extends JsMessage {
 	readonly hostname!: string;
 }
 
-export class TriggerNodeGraphFrameGenerate extends JsMessage {
+export class TriggerRasterizeRegionBelowLayer extends JsMessage {
 	readonly documentId!: bigint;
 
 	readonly layerPath!: BigUint64Array;
@@ -613,7 +613,7 @@ export class TriggerNodeGraphFrameGenerate extends JsMessage {
 
 	readonly size!: [number, number];
 
-	readonly imaginateNode!: BigUint64Array | undefined;
+	readonly imaginateNodePath!: BigUint64Array | undefined;
 }
 
 export class TriggerRefreshBoundsOfViewports extends JsMessage { }
@@ -751,23 +751,13 @@ export class LayerMetadata {
 	selected!: boolean;
 }
 
-export type LayerType = "Folder" | "NodeGraphFrame";
+export type LayerType = "Folder" | "Layer";
 
 export type LayerTypeData = {
 	name: string;
 	icon: IconName;
 };
 
-// TODO: Delete this function after renaming NodeGraphFrame to Layer, since it will basically just return its input parameter
-export function layerTypeData(layerType: LayerType): LayerTypeData {
-	const entries: Record<string, LayerTypeData> = {
-		NodeGraphFrame: { name: "Layer", icon: "Layer" },
-		Folder: { name: "Folder", icon: "Folder" },
-	};
-
-	return entries[layerType] || { name: "Error", icon: "Info" };
-}
-
 export class ImaginateImageData {
 	readonly path!: BigUint64Array;
 
@@ -1397,7 +1387,7 @@ export const messageMakers: Record<string, MessageMaker> = {
 	TriggerImaginateCheckServerStatus,
 	TriggerImaginateGenerate,
 	TriggerImaginateTerminate,
-	TriggerNodeGraphFrameGenerate,
+	TriggerRasterizeRegionBelowLayer,
 	TriggerFileDownload,
 	TriggerFontLoad,
 	TriggerImport,