Skip to content

Instantly share code, notes, and snippets.

@creativecreatorormaybenot
Created April 10, 2021 20:42
Show Gist options
  • Save creativecreatorormaybenot/8c9b0c993768800ad27085c926acf6d3 to your computer and use it in GitHub Desktop.
Save creativecreatorormaybenot/8c9b0c993768800ad27085c926acf6d3 to your computer and use it in GitHub Desktop.
Flutter web keyboard & mouse utilities
// https://editor.rive.app
<body>
<script>
document.body.addEventListener("contextmenu", function (event) {
event.preventDefault();
});
</script>
<!-- Handle keyboard input events -->
<script>
window.addEventListener("keydown", function (event) {
if (event.metaKey || event.ctrlKey) {
// When ctrl or meta is pressed we want to suppress some default bound
// browser actions (like CMD+Plus/Minus to zoom).
switch (event.keyCode) {
case 68: // 'd' for duplication
case 71: // 'g' for grouping
case 187: // '=' for zoom in
case 189: // '-' for zoom out
case 90: // 'z' for preventing opening a previous tab in Safari
case 221: // ']' for changing draw order
case 219: // '[' for changing draw order
case 37: // left arrow for moving keys: #1786
case 39: // right arrow for moving keys: #1786
case 188: // , #1835
// Needs to be removed as it kills text copy
// case 67: // 'c' for preventing negative beep on Safari
event.preventDefault();
break;
// default:
// console.log('Keycode pressed: ' + event.keyCode);
}
}
// Suppress backspace triggering a navigate back action.
if (event.keyCode == 8 && event.target == document.body) {
event.preventDefault();
}
});
</script>
<!-- Disable mousewheel zoom scrolling on Windows -->
<script>
document.addEventListener("wheel", (e) => (e.ctrlKey)
&& e.preventDefault(), { passive: false });
</script>
</body>
// https://editor.rive.app/assets/assets/web/mouse-wheel.js
var PIXEL_STEP = 10;
var LINE_HEIGHT = 4;
var PAGE_HEIGHT = 800;
function platform() {
var name="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) name="Windows";
else if (navigator.appVersion.indexOf("Mac")!=-1) name="MacOS";
else if (navigator.appVersion.indexOf("X11")!=-1) name="UNIX";
else if (navigator.appVersion.indexOf("Linux")!=-1) name="Linux";
return name;
}
window.addEventListener('wheel', function (event) {
// var propValue;
// for(var propName in event) {
// propValue = event[propName];
// console.log(propName,propValue);
// }
var sX = 0,
sY = 0, // spinX, spinY
pX = 0,
pY = 0; // pixelX, pixelY
// Legacy
if ('detail' in event) {
sY = event.detail;
}
if ('wheelDelta' in event) {
sY = -event.wheelDelta / 120;
}
if ('wheelDeltaY' in event) {
sY = -event.wheelDeltaY / 120;
}
if ('wheelDeltaX' in event) {
sX = -event.wheelDeltaX / 120;
}
// side scrolling on FF with DOMMouseScroll
// also force side scrolling when shift is held down
if (('axis' in event && event.axis === event.HORIZONTAL_AXIS) || event.shiftKey) {
sX = sY;
sY = 0;
}
pX = sX * PIXEL_STEP;
pY = sY * PIXEL_STEP;
// On Windows browsers, the default appears to have deltas in 100 increments,
// and there's no acceleration (i.e. always 100 increments).
// So for Windows, we will reduce the increments to 10 as a hackity hack hack
if ('deltaY' in event) {
const delta = (platform() === "Windows" && event.deltaY !== 0)
? 10 * (event.deltaY >= 0 ? 1 : -1)
: event.deltaY;
if (!event.shiftKey) {
pY = delta;
} else {
pX = delta;
}
}
if ('deltaX' in event) {
const delta = (platform() === "Windows" && event.deltaX !== 0)
? 10 * (event.deltaX >= 0 ? 1 : -1)
: event.deltaX;
if (!event.shiftKey || event.deltaX !== 0) {
pX = delta;
}
}
if ((pX || pY) && event.deltaMode) {
if (event.deltaMode == 1) { // delta in LINE units
pX *= LINE_HEIGHT;
pY *= LINE_HEIGHT;
} else { // delta in PAGE units
pX *= PAGE_HEIGHT;
pY *= PAGE_HEIGHT;
}
}
// Fall-back if spin cannot be determined
if (pX && !sX) {
sX = (pX < 1) ? -1 : 1;
}
if (pY && !sY) {
sY = (pY < 1) ? -1 : 1;
}
var normalized = {
spinX: sX,
spinY: sY,
pixelX: pX,
pixelY: pY
};
if (typeof scrolledMouseWheel != 'undefined') {
scrolledMouseWheel(pX, pY, event.ctrlKey);
}
}, false);
var lastScale = 1;
window.addEventListener("gesturestart", function (e) {
e.preventDefault();
lastScale = e.scale;
});
window.addEventListener("gesturechange", function (e) {
e.preventDefault();
var scaleDelta = e.scale - lastScale;
lastScale = e.scale;
if (typeof scrolledMouseWheel != 'undefined') {
scrolledMouseWheel(0, -scaleDelta * 100, true);
}
});
window.addEventListener("gestureend", function (e) {
e.preventDefault();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment