Adds panning with middle mouse button to puzzle-pipes
// ==UserScript==
// @name Puzzle-pipes mouse pan
// @namespace https://xandaros.dyndns.org/
// @version 0.2
// @description Adds panning with middle mouse button to puzzle-pipes
// @author Xandaros
// @match https://www.puzzle-pipes.com/*
// @icon https://www.google.com/s2/favicons?domain=puzzle-pipes.com
// @grant none
// ==/UserScript==
(function() {
'use strict';
$(function() {
let dragEnabled = false;
let dragPosition = {
left: 0,
top: 0,
mouseX: 0,
mouseY: 0,
};
function startDrag(e) {
const el = $("#puzzleContainerOverflowDiv");
dragEnabled = true;
dragPosition.left = el.scrollLeft();
dragPosition.top = $(window).scrollTop();
dragPosition.mouseX = e.clientX;
dragPosition.mouseY = e.clientY;
}
function stopDrag() {
dragEnabled = false;
}
function doDrag(e) {
const el = $("#puzzleContainerOverflowDiv");
const dx = e.clientX - dragPosition.mouseX;
const dy = e.clientY - dragPosition.mouseY;
el.scrollLeft(dragPosition.left - dx);
$(window).scrollTop(dragPosition.top - dy);
}
$("#game").on("mousedown", e => {
if (e.button == 1) {
startDrag(e);
return false;
}
});
$("#game").on("mouseup", e => {
if (e.button == 1) {
stopDrag();
}
});
$("#game").on("mouseleave", e => {
stopDrag();
});
$("#game").on("mousemove", e => {
if (dragEnabled) {
doDrag(e);
return true;
}
});
});
})();