Improve the node graph with revamped top bar and disabling tools when graph is open (#2093)

* Add "Fade Artwork" slider and disable tools when graph is open

* Add navigation and layer/node management buttons to graph top bar

* Reduce code duplication

frontend/src/components/panels/Document.svelte

@@ -504,7 +504,7 @@
 						<canvas class="overlays" width={canvasWidthRoundedToEven} height={canvasHeightRoundedToEven} style:width={canvasWidthCSS} style:height={canvasHeightCSS} data-overlays-canvas>
 						</canvas>
 					</div>
-					<div class="graph-view" class:open={$document.graphViewOverlayOpen} style:--fade-artwork="80%" data-graph>
+					<div class="graph-view" class:open={$document.graphViewOverlayOpen} style:--fade-artwork={`${$document.fadeArtwork}%`} data-graph>
 						<Graph />
 					</div>
 				</LayoutCol>

frontend/src/components/views/Graph.svelte

@@ -989,7 +989,7 @@
 			}
 
 			&.disabled {
-				background: var(--color-3-darkgray);
+				background: rgba(var(--color-4-dimgray-rgb), 0.33);
 				color: var(--color-a-softgray);
 
 				.icon-label {
@@ -1041,10 +1041,10 @@
 			}
 
 			&.selected {
-				background: rgba(var(--color-5-dullgray-rgb), 0.5);
+				background: rgba(var(--color-5-dullgray-rgb), 0.33);
 
 				&.in-selected-network {
-					background: rgba(var(--color-6-lowergray-rgb), 0.5);
+					background: rgba(var(--color-6-lowergray-rgb), 0.33);
 				}
 			}
 

frontend/src/components/widgets/WidgetSection.svelte

@@ -27,18 +27,16 @@
 	<button class="header" class:expanded on:click|stopPropagation={() => (expanded = !expanded)} tabindex="0">
 		<div class="expand-arrow" />
 		<TextLabel bold={true}>{widgetData.name}</TextLabel>
-		{#if widgetData.pinned}
-			<IconButton
-				icon={"CheckboxChecked"}
-				tooltip={"Unpin this node so it's no longer shown here without a selection"}
-				size={24}
-				action={(e) => {
-					editor.handle.unpinNode(widgetData.id);
-					e?.stopPropagation();
-				}}
-				class={"show-only-on-hover"}
-			/>
-		{/if}
+		<IconButton
+			icon={widgetData.pinned ? "CheckboxChecked" : "CheckboxUnchecked"}
+			tooltip={widgetData.pinned ? "Unpin this node so it's no longer shown here when nothing is selected" : "Pin this node so it's shown here when nothing is selected"}
+			size={24}
+			action={(e) => {
+				editor.handle.setNodePinned(widgetData.id, !widgetData.pinned);
+				e?.stopPropagation();
+			}}
+			class={"show-only-on-hover"}
+		/>
 		<IconButton
 			icon={"Trash"}
 			tooltip={"Delete this node from the layer chain"}

frontend/src/state-providers/document.ts

@@ -11,8 +11,9 @@ import {
 	UpdateToolShelfLayout,
 	UpdateWorkingColorsLayout,
 	UpdateNodeGraphBarLayout,
-	TriggerGraphViewOverlay,
+	UpdateGraphViewOverlay,
 	TriggerDelayedZoomCanvasToFitAll,
+	UpdateGraphFadeArtwork,
 } from "@graphite/wasm-communication/messages";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
@@ -27,10 +28,17 @@ export function createDocumentState(editor: Editor) {
 		nodeGraphBarLayout: defaultWidgetLayout(),
 		// Graph view overlay
 		graphViewOverlayOpen: false,
+		fadeArtwork: 100,
 	});
 	const { subscribe, update } = state;
 
 	// Update layouts
+	editor.subscriptions.subscribeJsMessage(UpdateGraphFadeArtwork, (updateGraphFadeArtwork) => {
+		update((state) => {
+			state.fadeArtwork = updateGraphFadeArtwork.percentage;
+			return state;
+		});
+	});
 	editor.subscriptions.subscribeJsMessage(UpdateDocumentModeLayout, async (updateDocumentModeLayout) => {
 		await tick();
 
@@ -84,9 +92,9 @@ export function createDocumentState(editor: Editor) {
 	});
 
 	// Show or hide the graph view overlay
-	editor.subscriptions.subscribeJsMessage(TriggerGraphViewOverlay, (triggerGraphViewOverlay) => {
+	editor.subscriptions.subscribeJsMessage(UpdateGraphViewOverlay, (updateGraphViewOverlay) => {
 		update((state) => {
-			state.graphViewOverlayOpen = triggerGraphViewOverlay.open;
+			state.graphViewOverlayOpen = updateGraphViewOverlay.open;
 			return state;
 		});
 	});

frontend/src/wasm-communication/messages.ts

@@ -742,6 +742,14 @@ const mouseCursorIconCSSNames = {
 export type MouseCursor = keyof typeof mouseCursorIconCSSNames;
 export type MouseCursorIcon = (typeof mouseCursorIconCSSNames)[MouseCursor];
 
+export class UpdateGraphViewOverlay extends JsMessage {
+	open!: boolean;
+}
+
+export class UpdateGraphFadeArtwork extends JsMessage {
+	readonly percentage!: number;
+}
+
 export class UpdateMouseCursor extends JsMessage {
 	@Transform(({ value }: { value: MouseCursor }) => mouseCursorIconCSSNames[value] || "alias")
 	readonly cursor!: MouseCursorIcon;
@@ -888,10 +896,6 @@ export class TriggerFontLoad extends JsMessage {
 	isDefault!: boolean;
 }
 
-export class TriggerGraphViewOverlay extends JsMessage {
-	open!: boolean;
-}
-
 export class TriggerVisitLink extends JsMessage {
 	url!: string;
 }
@@ -1561,12 +1565,11 @@ export const messageMakers: Record<string, MessageMaker> = {
 	TriggerAboutGraphiteLocalizedCommitDate,
 	TriggerCopyToClipboardBlobUrl,
 	TriggerDelayedZoomCanvasToFitAll,
-	TriggerFetchAndOpenDocument,
 	TriggerDownloadBlobUrl,
 	TriggerDownloadImage,
 	TriggerDownloadTextFile,
+	TriggerFetchAndOpenDocument,
 	TriggerFontLoad,
-	TriggerGraphViewOverlay,
 	TriggerImport,
 	TriggerIndexedDbRemoveDocument,
 	TriggerIndexedDbWriteDocument,
@@ -1584,9 +1587,6 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateBox,
 	UpdateClickTargets,
 	UpdateContextMenuInformation,
-	UpdateInSelectedNetwork,
-	UpdateImportsExports,
-	UpdateLayerWidths,
 	UpdateDialogButtons,
 	UpdateDialogColumn1,
 	UpdateDialogColumn2,
@@ -1598,8 +1598,13 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateDocumentRulers,
 	UpdateDocumentScrollbars,
 	UpdateEyedropperSamplingState,
+	UpdateGraphFadeArtwork,
+	UpdateGraphViewOverlay,
+	UpdateImportsExports,
 	UpdateInputHints,
+	UpdateInSelectedNetwork,
 	UpdateLayersPanelOptionsLayout,
+	UpdateLayerWidths,
 	UpdateMenuBarLayout,
 	UpdateMouseCursor,
 	UpdateNodeGraph,
@@ -1611,8 +1616,8 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdatePropertyPanelSectionsLayout,
 	UpdateToolOptionsLayout,
 	UpdateToolShelfLayout,
-	UpdateWorkingColorsLayout,
 	UpdateWirePathInProgress,
+	UpdateWorkingColorsLayout,
 	UpdateZoomWithScroll,
 } as const;
 export type JsMessageType = keyof typeof messageMakers;