Add 'Zoom with Scroll' input navigation scheme to preferences (#1021)

* Add use_scroll_as_zoom field to preference handler

* Add {Create,Delete}Mapping variants to message

* Revert "Add {Create,Delete}Mapping variants to message"

This reverts commit 0ba74754c9fb0c78d0b590c96e1d4fe2cfdd13e7.

* Revert "Add use_scroll_as_zoom field to preference handler"

This reverts commit d30f7c9edfa6d6e156939ca07f4db81f288975fd.

* Add basic scroll_as_zoom mapping

* Create overengineered mapping patch abstraction

* Add (for now passthrough) input layout manager

* Actually handle ModifyLayout messages (untested)

* Add backend preferences <-> layout manager comms

* Add scroll-as-zoom to actual preferences UI

* Rename LayoutManager -> KeyMapping

* Add Input section to preferences and title case

* Add scrollAsZoom frontend handling code (untested)

* Handle frontend <-> preferences comms

* (broken) Move scrollAsZoom persistence into state

* Fix scrollAsZoom having no effect on node graph

* Remove debugging helpers

* Fix confusion between horizontal and vertical

* Rename feature

* Move new message handler into folder

---------

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

frontend/src/components/panels/NodeGraph.vue

@@ -513,9 +513,20 @@ export default defineComponent({
 		scroll(e: WheelEvent) {
 			const scrollX = e.deltaX;
 			const scrollY = e.deltaY;
+			const zoomWithScroll = this.nodeGraph.state.zoomWithScroll;
+
+			let zoom;
+			let horizontalPan;
+			if (zoomWithScroll) {
+				zoom = !(e.ctrlKey || e.shiftKey);
+				horizontalPan = e.ctrlKey;
+			} else {
+				zoom = e.ctrlKey;
+				horizontalPan = !(e.ctrlKey || e.shiftKey);
+			}
 
 			// Zoom
-			if (e.ctrlKey) {
+			if (zoom) {
 				let zoomFactor = 1 + Math.abs(scrollY) * WHEEL_RATE;
 				if (scrollY > 0) zoomFactor = 1 / zoomFactor;
 
@@ -541,11 +552,11 @@ export default defineComponent({
 				e.preventDefault();
 			}
 			// Pan
-			else if (!e.shiftKey) {
+			else if (horizontalPan) {
+				this.transform.x -= scrollY / this.transform.scale;
+			} else {
 				this.transform.x -= scrollX / this.transform.scale;
 				this.transform.y -= scrollY / this.transform.scale;
-			} else {
-				this.transform.x -= scrollY / this.transform.scale;
 			}
 		},
 		keydown(e: KeyboardEvent): void {

frontend/src/state-providers/node-graph.ts

@@ -8,6 +8,7 @@ import {
 	UpdateNodeGraph,
 	UpdateNodeTypes,
 	UpdateNodeGraphBarLayout,
+	UpdateZoomWithScroll,
 	defaultWidgetLayout,
 	patchWidgetLayout,
 } from "@/wasm-communication/messages";
@@ -19,6 +20,7 @@ export function createNodeGraphState(editor: Editor) {
 		links: [] as FrontendNodeLink[],
 		nodeTypes: [] as FrontendNodeType[],
 		nodeGraphBarLayout: defaultWidgetLayout(),
+		zoomWithScroll: false as boolean,
 	});
 
 	// Set up message subscriptions on creation
@@ -32,6 +34,9 @@ export function createNodeGraphState(editor: Editor) {
 	editor.subscriptions.subscribeJsMessage(UpdateNodeGraphBarLayout, (updateNodeGraphBarLayout) => {
 		patchWidgetLayout(state.nodeGraphBarLayout, updateNodeGraphBarLayout);
 	});
+	editor.subscriptions.subscribeJsMessage(UpdateZoomWithScroll, (updateZoomWithScroll) => {
+		state.zoomWithScroll = updateZoomWithScroll.zoomWithScroll;
+	});
 
 	return {
 		state: readonly(state) as typeof state,

frontend/src/wasm-communication/messages.ts

@@ -53,6 +53,10 @@ export class UpdateOpenDocumentsList extends JsMessage {
 	readonly openDocuments!: FrontendDocumentDetails[];
 }
 
+export class UpdateZoomWithScroll extends JsMessage {
+	readonly zoomWithScroll!: boolean;
+}
+
 // Allows the auto save system to use a string for the id rather than a BigInt.
 // IndexedDb does not allow for BigInts as primary keys.
 // TypeScript does not allow subclasses to change the type of class variables in subclasses.
@@ -1422,6 +1426,7 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateOpenDocumentsList,
 	UpdatePropertyPanelOptionsLayout,
 	UpdatePropertyPanelSectionsLayout,
+	UpdateZoomWithScroll,
 	UpdateToolOptionsLayout,
 	UpdateToolShelfLayout,
 	UpdateWorkingColorsLayout,