Improve layer panel positioning for upstream nodes (#1928)

* Improve layer panel positioning for upstream nodes

* highlight parents

* Final improvements

* Fill for selection box, bug fixes

* Code review

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>

frontend/src/components/Editor.svelte

@@ -105,6 +105,16 @@
 		--color-error-red: #d6536e;
 		--color-error-red-rgb: 214, 83, 110;
 
+		// Keep changes to these colors updated with `editor/src/consts.rs`
+		--color-overlay-blue: #00a8ff;
+		--color-overlay-blue-rgb: 0, 168, 255;
+		--color-overlay-yellow: #ffc848;
+		--color-overlay-yellow-rgb: 255, 200, 72;
+		--color-overlay-white: #ffffff;
+		--color-overlay-white-rgb: 255, 255, 255;
+		--color-overlay-gray: #cccccc;
+		--color-overlay-gray-rgb: 204, 204, 204;
+
 		--color-data-general: #c5c5c5;
 		--color-data-general-dim: #767676;
 		--color-data-raster: #e4bb72;

frontend/src/components/panels/Layers.svelte

@@ -375,7 +375,7 @@
 					class="layer"
 					classes={{
 						selected: fakeHighlight !== undefined ? fakeHighlight === listing.entry.id : listing.entry.selected,
-						"in-selected-network": listing.entry.inSelectedNetwork,
+						"full-highlight": listing.entry.inSelectedNetwork && !listing.entry.selectedParent,
 						"insert-folder": (draggingData?.highlightFolder || false) && draggingData?.insertParentId === listing.entry.id,
 					}}
 					styles={{ "--layer-indent-levels": `${listing.entry.depth - 1}` }}
@@ -499,9 +499,11 @@
 
 				// Dimming
 				&.selected {
-					background: #404040;
+					// Halfway between 3-darkgray and 4-dimgray (this interpolation approach only works on grayscale values)
+					--component: calc((Max(var(--color-3-darkgray-rgb)) + Max(var(--color-4-dimgray-rgb))) / 2);
+					background: rgb(var(--component), var(--component), var(--component));
 
-					&.in-selected-network {
+					&.full-highlight {
 						background: var(--color-4-dimgray);
 					}
 				}

frontend/src/components/views/Graph.svelte

@@ -1027,7 +1027,7 @@
 			// 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);
-			background: rgba(0, 0, 0, 0.33);
+			background: rgba(var(--color-0-black-rgb), 0.33);
 
 			.node-error {
 				position: absolute;
@@ -1161,11 +1161,10 @@
 			}
 
 			&.selected {
-				// This is the result of blending `rgba(255, 255, 255, 0.1)` over `rgba(0, 0, 0, 0.33)`
-				background: rgba(66, 66, 66, 0.4);
+				background: rgba(var(--color-5-dullgray-rgb), 0.5);
 
 				&.in-selected-network {
-					background: rgba(80, 80, 80, 0.5);
+					background: rgba(var(--color-6-lowergray-rgb), 0.5);
 				}
 			}
 
@@ -1259,18 +1258,18 @@
 
 			&.selected {
 				.primary {
-					background: rgba(255, 255, 255, 0.15);
+					background: rgba(var(--color-f-white-rgb), 0.15);
 
 					&.in-selected-network {
-						background: rgba(255, 255, 255, 0.2);
+						background: rgba(var(--color-f-white-rgb), 0.2);
 					}
 				}
 
 				.parameters {
-					background: rgba(255, 255, 255, 0.1);
+					background: rgba(var(--color-f-white-rgb), 0.1);
 
 					&.in-selected-network {
-						background: rgba(255, 255, 255, 0.15);
+						background: rgba(var(--color-f-white-rgb), 0.15);
 					}
 				}
 			}
@@ -1296,7 +1295,7 @@
 				width: 100%;
 				height: 24px;
 				border-radius: 2px 2px 0 0;
-				background: rgba(255, 255, 255, 0.05);
+				background: rgba(var(--color-f-white-rgb), 0.05);
 
 				&.no-parameter-section {
 					border-radius: 2px;
@@ -1359,9 +1358,9 @@
 
 	.box-selection {
 		position: absolute;
-		z-index: 2;
-		background-color: rgba(77, 168, 221, 0.2);
-		border: 1px solid rgba(77, 168, 221);
 		pointer-events: none;
+		background: rgba(var(--color-overlay-blue-rgb), 0.05);
+		border: 1px solid var(--color-overlay-blue);
+		z-index: 2;
 	}
 </style>

frontend/src/wasm-communication/messages.ts

@@ -888,6 +888,8 @@ export class LayerPanelEntry {
 	selected!: boolean;
 
 	inSelectedNetwork!: boolean;
+
+	selectedParent!: boolean;
 }
 
 export class DisplayDialogDismiss extends JsMessage {}