-
Notifications
You must be signed in to change notification settings - Fork 292
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Using space key to pan around #302
Comments
You need to check if space is pressed first. This is how I solved it: let spacebarPressed = false;
const handleSpaceBarKeydown = (e: KeyboardEvent) => {
if (e.key === ' ' || e.code === 'Space') {
if (
document.body === e.target ||
document.getElementById('scene') === e.target
) {
e.stopPropagation();
e.preventDefault();
}
spacebarPressed = true;
}
};
const handleSpaceBarKeyup = (e: KeyboardEvent) => {
if (e.key === ' ' || e.code === 'Space') {
if (
document.body === e.target ||
document.getElementById('scene') === e.target
) {
e.stopPropagation();
e.preventDefault();
}
spacebarPressed = false;
}
};
document.removeEventListener('keydown', handleSpaceBarKeydown);
document.addEventListener('keydown', handleSpaceBarKeydown);
document.removeEventListener('keyup', handleSpaceBarKeyup);
document.addEventListener('keyup', handleSpaceBarKeyup);
const sceneElement = document.querySelector('.panzoom') as HTMLElement | null;
if (sceneElement) {
const { default: panzoom } = await import('panzoom');
// And pass it to panzoom
const instance = panzoom(sceneElement as HTMLElement, {
beforeMouseDown: () => {
const shouldIgnore = !spacebarPressed;
return shouldIgnore;
},
});
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi! I'm trying to set the space key as the one that triggers the panning functionality. It's a bigger key and i want my visitors to be able to select the text in the content that I'm writing.
I tried a lot of combinations, the one I thought would be the best would be this one:
panzoom(element, { beforeMouseDown: function(e) { const shouldIgnore = !(e.altKey || (e.code === 'Space')); return shouldIgnore; }, });
But it doesn't work either. What's the most appropriate way to do that with this library? Thanks
The text was updated successfully, but these errors were encountered: