Recategorize the node catalog

frontend/src/components/views/Graph.svelte

@@ -19,8 +19,6 @@
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	const GRID_COLLAPSE_SPACING = 10;
 	const GRID_SIZE = 24;
-	const ADD_NODE_MENU_WIDTH = 180;
-	const ADD_NODE_MENU_HEIGHT = 200;
 
 	const editor = getContext<Editor>("editor");
 	const nodeGraph = getContext<NodeGraphState>("nodeGraph");
@@ -101,7 +99,26 @@
 				});
 		});
 
-		return Array.from(categories);
+		const START_CATEGORIES_ORDER = ["General", "Value", "Math", "Style"];
+		const END_CATEGORIES_ORDER = ["Debug"];
+		return Array.from(categories)
+			.sort((a, b) => a[0].localeCompare(b[0]))
+			.sort((a, b) => {
+				const aIndex = START_CATEGORIES_ORDER.findIndex((x) => a[0].startsWith(x));
+				const bIndex = START_CATEGORIES_ORDER.findIndex((x) => b[0].startsWith(x));
+				if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
+				if (aIndex !== -1) return -1;
+				if (bIndex !== -1) return 1;
+				return 0;
+			})
+			.sort((a, b) => {
+				const aIndex = END_CATEGORIES_ORDER.findIndex((x) => a[0].startsWith(x));
+				const bIndex = END_CATEGORIES_ORDER.findIndex((x) => b[0].startsWith(x));
+				if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
+				if (aIndex !== -1) return 1;
+				if (bIndex !== -1) return -1;
+				return 0;
+			});
 	}
 
 	function createWirePaths(wirePathInProgress: WirePath | undefined, nodeWirePaths: WirePath[]): WirePath[] {
@@ -374,17 +391,11 @@
 	{#if $nodeGraph.contextMenuInformation}
 		<LayoutCol
 			class="context-menu"
+			classes={{ "create-node-menu": $nodeGraph.contextMenuInformation.contextMenuData === "CreateNode" }}
 			data-context-menu
 			styles={{
 				left: `${$nodeGraph.contextMenuInformation.contextMenuCoordinates.x * $nodeGraph.transform.scale + $nodeGraph.transform.x}px`,
 				top: `${$nodeGraph.contextMenuInformation.contextMenuCoordinates.y * $nodeGraph.transform.scale + $nodeGraph.transform.y}px`,
-				...($nodeGraph.contextMenuInformation.contextMenuData === "CreateNode"
-					? {
-							transform: `translate(0%, 0%)`,
-							width: `${ADD_NODE_MENU_WIDTH}px`,
-							height: `${ADD_NODE_MENU_HEIGHT}px`,
-						}
-					: {}),
 			}}
 		>
 			{#if $nodeGraph.contextMenuInformation.contextMenuData === "CreateNode"}
@@ -859,6 +870,11 @@
 			background-color: var(--color-3-darkgray);
 			border-radius: 4px;
 
+			&.create-node-menu {
+				height: 200px; // For some reason, when attemping to make this taller, the bottom few categories don't open when clicked, but instead immediately close the menu
+				width: 180px; // Also when making this wider, clicking the scrollbar on the right edge of the menu causes the menu to close immediately
+			}
+
 			.text-input {
 				flex: 0 0 auto;
 				margin-bottom: 4px;

node-graph/gcore/src/raster/adjustments.rs

@@ -441,10 +441,10 @@ fn hue_shift_color_node(color: Color, hue_shift: f64, saturation_shift: f64, lig
 }
 
 #[derive(Debug, Clone, Copy)]
-pub struct InvertRGBNode;
+pub struct InvertNode;
 
-#[node_macro::node_fn(InvertRGBNode)]
-fn invert_image(color: Color) -> Color {
+#[node_macro::node_fn(InvertNode)]
+fn invert_node(color: Color) -> Color {
 	let color = color.to_gamma_srgb();
 
 	let color = color.map_rgb(|c| color.a() - c);
@@ -453,7 +453,7 @@ fn invert_image(color: Color) -> Color {
 }
 
 // TODO replace with trait based implementation
-impl<'i> Node<'i, &'i Color> for InvertRGBNode {
+impl<'i> Node<'i, &'i Color> for InvertNode {
 	type Output = Color;
 
 	fn eval(&'i self, color: &'i Color) -> Self::Output {

node-graph/interpreted-executor/src/node_registry.rs

@@ -483,7 +483,7 @@ fn node_registry() -> HashMap<ProtoNodeIdentifier, HashMap<NodeIOTypes, NodeCons
 		)],*/
 		raster_node!(graphene_core::raster::BlackAndWhiteNode<_, _, _, _, _, _, _>, params: [Color, f64, f64, f64, f64, f64, f64]),
 		raster_node!(graphene_core::raster::HueSaturationNode<_, _, _>, params: [f64, f64, f64]),
-		raster_node!(graphene_core::raster::InvertRGBNode, params: []),
+		raster_node!(graphene_core::raster::InvertNode, params: []),
 		raster_node!(graphene_core::raster::ThresholdNode<_, _, _>, params: [f64, f64, LuminanceCalculation]),
 		raster_node!(graphene_core::raster::GradientMapNode<_, _>, params: [GradientStops, bool]),
 		raster_node!(graphene_core::raster::VibranceNode<_>, params: [f64]),

website/content/blog/2024-07-31-graphite-progress-report-q2-2024.md

@@ -110,7 +110,7 @@ EDITOR'S NOTE: The grammatical structure of each bullet point should follow the
   	</video>
   </div>
 
-- *Binary Boolean Operation* node for combining two shape paths with a *Union*, *Subtract Front*, *Subtract Back*, *Intersect*, or *Difference* mode of cutting and combining <small>([#1759](https://github.com/GraphiteEditor/Graphite/pull/1759))</small>
+- *Boolean Operation* node for combining two shape paths with a *Union*, *Subtract Front*, *Subtract Back*, *Intersect*, or *Difference* mode of cutting and combining <small>([#1759](https://github.com/GraphiteEditor/Graphite/pull/1759))</small>
   <div class="video-background">
   	<video autoplay loop muted playsinline disablepictureinpicture disableremoteplayback>
   		<source src="https://static.graphite.rs/content/blog/2024-07-31-graphite-progress-report-q2-2024/boolean-ops-1.webm" type="video/webm" />