allow pan via LMB drag

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

js/initalize/layers.populate.js

@@ -245,12 +245,30 @@ mouse.registerContext(
 	{
 		target: imageCollection.inputElement,
 		validate: (evn) => {
-			if (!global.hasActiveInput || evn.type === "mousemove") return true;
+			if ((!global.hasActiveInput && !evn.ctrlKey) || evn.type === "mousemove")
+				return true;
 			return false;
 		},
 	}
 );
 
+mouse.registerContext(
+	"camera",
+	(evn, ctx) => {
+		ctx.coords.prev.x = ctx.coords.pos.x;
+		ctx.coords.prev.y = ctx.coords.pos.y;
+
+		// Set coords
+		ctx.coords.pos.x = evn.x;
+		ctx.coords.pos.y = evn.y;
+	},
+	{
+		validate: (evn) => {
+			return !!evn.ctrlKey;
+		},
+	}
+);
+
 // Redraw on active input state change
 (() => {
 	mouse.listen.window.onany.on((evn) => {
@@ -264,8 +282,7 @@ mouse.registerContext(
 	});
 })();
 
-mouse.listen.window.onwheel.on((evn) => {
-	if (evn.evn.ctrlKey) {
+mouse.listen.camera.onwheel.on((evn) => {
 	evn.evn.preventDefault();
 
 	const pcx = viewport.cx;
@@ -282,14 +299,13 @@ mouse.listen.window.onwheel.on((evn) => {
 	viewport.transform(imageCollection.element);
 
 	toolbar.currentTool.redraw();
-	}
 });
 
-mouse.listen.window.btn.middle.onpaintstart.on((evn) => {
-	if (evn.evn.ctrlKey) worldInit = {x: viewport.cx, y: viewport.cy};
-});
+const cameraPaintStart = (evn) => {
+	worldInit = {x: viewport.cx, y: viewport.cy};
+};
 
-mouse.listen.window.btn.middle.onpaint.on((evn) => {
+const cameraPaint = (evn) => {
 	if (worldInit) {
 		viewport.cx = worldInit.x + (evn.ix - evn.x) / viewport.zoom;
 		viewport.cy = worldInit.y + (evn.iy - evn.y) / viewport.zoom;
@@ -315,11 +331,20 @@ mouse.listen.window.btn.middle.onpaint.on((evn) => {
 		debugCtx.arc(viewport.cx, viewport.cy, 5, 0, Math.PI * 2);
 		debugCtx.fill();
 	}
-});
+};
 
-mouse.listen.window.btn.middle.onpaintend.on((evn) => {
+const cameraPaintEnd = (evn) => {
 	worldInit = null;
-});
+};
+
+mouse.listen.camera.btn.middle.onpaintstart.on(cameraPaintStart);
+mouse.listen.camera.btn.left.onpaintstart.on(cameraPaintStart);
+
+mouse.listen.camera.btn.middle.onpaint.on(cameraPaint);
+mouse.listen.camera.btn.left.onpaint.on(cameraPaint);
+
+mouse.listen.window.btn.middle.onpaintend.on(cameraPaintEnd);
+mouse.listen.window.btn.left.onpaintend.on(cameraPaintEnd);
 
 window.addEventListener("resize", () => {
 	viewport.transform(imageCollection.element);

js/ui/tool/colorbrush.js

@@ -208,14 +208,12 @@ const colorBrushTool = () =>
 				};
 
 				state.wheelcb = (evn) => {
-					if (!evn.evn.ctrlKey) {
 					state.brushSize = state.setBrushSize(
 						state.brushSize -
 							Math.floor(state.config.brushScrollSpeed * evn.delta)
 					);
 					uiCtx.clearRect(0, 0, uiCanvas.width, uiCanvas.height);
 					state.movecb(evn);
-					}
 				};
 
 				/**

js/ui/tool/dream.js

@@ -619,11 +619,7 @@ const _generate = async (endpoint, request, bb, options = {}) => {
 	);
 	const onmorehandler = mouse.listen.world.btn.middle.onclick.on(
 		(evn, state) => {
-			if (
-				!state.dream_processed &&
-				bb.contains(evn.x, evn.y) &&
-				!evn.evn.ctrlKey
-			) {
+			if (!state.dream_processed && bb.contains(evn.x, evn.y)) {
 				makeMore();
 				state.dream_processed = true;
 			}
@@ -633,7 +629,6 @@ const _generate = async (endpoint, request, bb, options = {}) => {
 	);
 	const onwheelhandler = mouse.listen.world.onwheel.on(
 		(evn, state) => {
-			if (evn.evn.ctrlKey) return;
 			if (!state.dream_processed && bb.contains(evn.x, evn.y)) {
 				if (evn.delta < 0) nextImg();
 				else prevImg();
@@ -1086,7 +1081,6 @@ const dream_img2img_callback = (bb, resolution, state) => {
 let _dream_wheel_accum = 0;
 
 const _dream_onwheel = (evn, state) => {
-	if (!evn.evn.ctrlKey) {
 	if (evn.mode !== WheelEvent.DOM_DELTA_PIXEL) {
 		// We don't really handle non-pixel scrolling
 		return;
@@ -1106,7 +1100,6 @@ const _dream_onwheel = (evn, state) => {
 
 		_dream_wheel_accum = 0; // Zero accumulation
 	}
-	}
 };
 
 /**

js/ui/tool/maskbrush.js

@@ -167,13 +167,11 @@ const maskBrushTool = () =>
 				};
 
 				state.wheelcb = (evn) => {
-					if (!evn.evn.ctrlKey) {
 					state.brushSize = state.setBrushSize(
 						state.brushSize -
 							Math.floor(state.config.brushScrollSpeed * evn.delta)
 					);
 					state.redraw();
-					}
 				};
 
 				state.drawcb = (evn) =>