Polish node graph frames and rename them for clarity (#1104)

* Polish layer panel UI and layer type icons/text

* Assorted UI text and comment cleanup

* Insert Transform node before Imaginate node via tool

* Rename "Node Graph Frame" to Layer type and Frame tool

* Rename "Node Graph Frame" to "Frame" tool

* Update Node Graph Frame -> Frame tool icon

* Fix lint warnings

frontend/src/components/panels/LayerTree.svelte

@@ -359,15 +359,16 @@
 						on:dragstart={(e) => draggable && dragStart(e, listing)}
 						on:click={(e) => selectLayerWithModifiers(e, listing)}
 					>
+						{@const layerType = getLayerTypeData(listing.entry.layerType)}
 						<LayoutRow class="layer-type-icon">
-							<IconLabel icon={getLayerTypeData(listing.entry.layerType).icon} tooltip={getLayerTypeData(listing.entry.layerType).name} />
+							<IconLabel icon={layerType.icon} />
 						</LayoutRow>
 						<LayoutRow class="layer-name" on:dblclick={() => onEditLayerName(listing)}>
 							<input
 								data-text-input
 								type="text"
 								value={listing.entry.name}
-								placeholder={getLayerTypeData(listing.entry.layerType).name}
+								placeholder={"Untitled " + layerType.name}
 								disabled={!listing.editingName}
 								on:blur={() => onEditLayerNameDeselect(listing)}
 								on:keydown={(e) => e.key === "Escape" && onEditLayerNameDeselect(listing)}

frontend/src/utility-functions/icons.ts

@@ -95,19 +95,19 @@ import BooleanUnion from "@graphite/../assets/icon-16px-solid/boolean-union.svg"
 import CheckboxChecked from "@graphite/../assets/icon-16px-solid/checkbox-checked.svg";
 import CheckboxUnchecked from "@graphite/../assets/icon-16px-solid/checkbox-unchecked.svg";
 import Copy from "@graphite/../assets/icon-16px-solid/copy.svg";
+import Eyedropper from "@graphite/../assets/icon-16px-solid/eyedropper.svg";
 import EyeHidden from "@graphite/../assets/icon-16px-solid/eye-hidden.svg";
 import EyeVisible from "@graphite/../assets/icon-16px-solid/eye-visible.svg";
-import Eyedropper from "@graphite/../assets/icon-16px-solid/eyedropper.svg";
 import File from "@graphite/../assets/icon-16px-solid/file.svg";
 import FlipHorizontal from "@graphite/../assets/icon-16px-solid/flip-horizontal.svg";
 import FlipVertical from "@graphite/../assets/icon-16px-solid/flip-vertical.svg";
 import Folder from "@graphite/../assets/icon-16px-solid/folder.svg";
 import GraphiteLogo from "@graphite/../assets/icon-16px-solid/graphite-logo.svg";
+import Layer from "@graphite/../assets/icon-16px-solid/layer.svg";
 import NodeArtboard from "@graphite/../assets/icon-16px-solid/node-artboard.svg";
 import NodeBlur from "@graphite/../assets/icon-16px-solid/node-blur.svg";
 import NodeBrushwork from "@graphite/../assets/icon-16px-solid/node-brushwork.svg";
 import NodeColorCorrection from "@graphite/../assets/icon-16px-solid/node-color-correction.svg";
-import NodeFolder from "@graphite/../assets/icon-16px-solid/node-folder.svg";
 import NodeGradient from "@graphite/../assets/icon-16px-solid/node-gradient.svg";
 import NodeImage from "@graphite/../assets/icon-16px-solid/node-image.svg";
 import NodeImaginate from "@graphite/../assets/icon-16px-solid/node-imaginate.svg";
@@ -160,11 +160,11 @@ const SOLID_16PX = {
 	FlipVertical: { svg: FlipVertical, size: 16 },
 	Folder: { svg: Folder, size: 16 },
 	GraphiteLogo: { svg: GraphiteLogo, size: 16 },
+	Layer: { svg: Layer, size: 16 },
 	NodeArtboard: { svg: NodeArtboard, size: 16 },
 	NodeBlur: { svg: NodeBlur, size: 16 },
 	NodeBrushwork: { svg: NodeBrushwork, size: 16 },
 	NodeColorCorrection: { svg: NodeColorCorrection, size: 16 },
-	NodeFolder: { svg: NodeFolder, size: 16 },
 	NodeGradient: { svg: NodeGradient, size: 16 },
 	NodeImage: { svg: NodeImage, size: 16 },
 	NodeImaginate: { svg: NodeImaginate, size: 16 },
@@ -232,9 +232,9 @@ import GeneralSelectTool from "@graphite/../assets/icon-24px-two-tone/general-se
 import RasterBrushTool from "@graphite/../assets/icon-24px-two-tone/raster-brush-tool.svg";
 import RasterCloneTool from "@graphite/../assets/icon-24px-two-tone/raster-clone-tool.svg";
 import RasterDetailTool from "@graphite/../assets/icon-24px-two-tone/raster-detail-tool.svg";
+import RasterFrameTool from "@graphite/../assets/icon-24px-two-tone/raster-frame-tool.svg";
 import RasterHealTool from "@graphite/../assets/icon-24px-two-tone/raster-heal-tool.svg";
 import RasterImaginateTool from "@graphite/../assets/icon-24px-two-tone/raster-imaginate-tool.svg";
-import RasterNodesTool from "@graphite/../assets/icon-24px-two-tone/raster-nodes-tool.svg";
 import RasterPatchTool from "@graphite/../assets/icon-24px-two-tone/raster-patch-tool.svg";
 import RasterRelightTool from "@graphite/../assets/icon-24px-two-tone/raster-relight-tool.svg";
 import VectorEllipseTool from "@graphite/../assets/icon-24px-two-tone/vector-ellipse-tool.svg";
@@ -254,12 +254,12 @@ const TWO_TONE_24PX = {
 	GeneralGradientTool: { svg: GeneralGradientTool, size: 24 },
 	GeneralNavigateTool: { svg: GeneralNavigateTool, size: 24 },
 	GeneralSelectTool: { svg: GeneralSelectTool, size: 24 },
-	RasterImaginateTool: { svg: RasterImaginateTool, size: 24 },
-	RasterNodesTool: { svg: RasterNodesTool, size: 24 },
 	RasterBrushTool: { svg: RasterBrushTool, size: 24 },
 	RasterCloneTool: { svg: RasterCloneTool, size: 24 },
 	RasterDetailTool: { svg: RasterDetailTool, size: 24 },
+	RasterFrameTool: { svg: RasterFrameTool, size: 24 },
 	RasterHealTool: { svg: RasterHealTool, size: 24 },
+	RasterImaginateTool: { svg: RasterImaginateTool, size: 24 },
 	RasterPatchTool: { svg: RasterPatchTool, size: 24 },
 	RasterRelightTool: { svg: RasterRelightTool, size: 24 },
 	VectorEllipseTool: { svg: VectorEllipseTool, size: 24 },

frontend/src/wasm-communication/editor.ts

@@ -58,7 +58,7 @@ export async function initWasm(): Promise<void> {
 
 	// Import the WASM module JS bindings and wrap them in the panic proxy
 	// eslint-disable-next-line import/no-cycle
-	wasmImport = await import("@graphite/../wasm/pkg").then(panicProxy);
+	wasmImport = await import("@graphite/../wasm/pkg");
 
 	// Provide a random starter seed which must occur after initializing the WASM module, since WASM can't generate its own random numbers
 	const randomSeedFloat = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);

frontend/src/wasm-communication/messages.ts

@@ -745,7 +745,7 @@ export class LayerMetadata {
 	selected!: boolean;
 }
 
-export type LayerType = "Imaginate" | "NodeGraphFrame" | "Folder" | "Image" | "Shape" | "Text";
+export type LayerType = "Folder" | "NodeGraphFrame" | "Text";
 
 export type LayerTypeData = {
 	name: string;
@@ -754,11 +754,8 @@ export type LayerTypeData = {
 
 export function layerTypeData(layerType: LayerType): LayerTypeData | undefined {
 	const entries: Record<string, LayerTypeData> = {
-		Imaginate: { name: "Imaginate", icon: "NodeImaginate" },
-		NodeGraphFrame: { name: "Node Graph Frame", icon: "NodeNodes" },
-		Folder: { name: "Folder", icon: "NodeFolder" },
-		Image: { name: "Image", icon: "NodeImage" },
-		Shape: { name: "Shape", icon: "NodeShape" },
+		NodeGraphFrame: { name: "Layer", icon: "Layer" },
+		Folder: { name: "Folder", icon: "Folder" },
 		Text: { name: "Text", icon: "NodeText" },
 	};