noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

You can now zoom in/out with key combination (shift + arrow uo/down)

Browse Source 
my 5 EUR Action gaming mouse doesnt let me scroll on MacOS 💩
This commit is contained in:
Dennis Postma 2024-12-07 23:24:11 +01:00
parent 4095184b27
commit 1fa8b8f06e
2 changed files with 50 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/utilities/Controls.vue
View File

@ -8,14 +8,59 @@ import { onBeforeUnmount, ref } from 'vue'
import { usePointerHandlers } from '@/composables/usePointerHandlers'
import { useCameraControls } from '@/composables/useCameraControls'
// Types
type WayPoint = { visible: boolean; x: number; y: number }
// Props
const props = defineProps<{ layer: Phaser.Tilemaps.TilemapLayer }>()
// Constants
const ZOOM_SETTINGS = {
WHEEL_FACTOR: 0.005,
KEY_FACTOR: 0.3,
MIN: 1,
MAX: 3
} as const
// Setup
const scene = useScene()
const waypoint = ref({ visible: false, x: 0, y: 0 })
const waypoint = ref<WayPoint>({ visible: false, x: 0, y: 0 })
const { camera } = useCameraControls(scene)
const { setupPointerHandlers, cleanupPointerHandlers } = usePointerHandlers(scene, props.layer, waypoint, camera)
// Handlers
function handleScrollZoom(pointer: Phaser.Input.Pointer) {
if (!(pointer.event instanceof WheelEvent && pointer.event.shiftKey)) return
const zoomLevel = Phaser.Math.Clamp(
camera.zoom - pointer.event.deltaY * ZOOM_SETTINGS.WHEEL_FACTOR,
ZOOM_SETTINGS.MIN,
ZOOM_SETTINGS.MAX
)
camera.setZoom(zoomLevel)
}
function handleKeyComboZoom(event: { keyCodes: number[] }) {
const deltaY = event.keyCodes[1] === 38 ? 1 : -1 // 38 is Up, 40 is Down
const zoomLevel = Phaser.Math.Clamp(
camera.zoom + deltaY * ZOOM_SETTINGS.KEY_FACTOR,
ZOOM_SETTINGS.MIN,
ZOOM_SETTINGS.MAX
)
camera.setZoom(zoomLevel)
}
// Event setup
setupPointerHandlers()
onBeforeUnmount(cleanupPointerHandlers)
</script>
scene.input.keyboard?.createCombo([16, 38], { resetOnMatch: true }) // Shift + Up
scene.input.keyboard?.createCombo([16, 40], { resetOnMatch: true }) // Shift + Down
scene.input.keyboard?.on('keycombomatch', handleKeyComboZoom)
scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleScrollZoom)
// Cleanup
onBeforeUnmount(() => {
cleanupPointerHandlers()
scene.input.keyboard?.off('keycombomatch')
scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleScrollZoom)
})
</script>

11
src/composables/pointerHandlers/useGamePointerHandlers.ts
View File

@ -58,27 +58,16 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
gameStore.setPlayerDraggingCamera(false)
}
function handleZoom(pointer: Phaser.Input.Pointer) {
if (pointer.event instanceof WheelEvent && pointer.event.shiftKey) {
const deltaY = pointer.event.deltaY
let zoomLevel = camera.zoom - deltaY * 0.005
zoomLevel = Phaser.Math.Clamp(zoomLevel, 1, 3)
camera.setZoom(zoomLevel)
}
}
const setupPointerHandlers = () => {
scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
}
const cleanupPointerHandlers = () => {
scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
scene.input.off(Phaser.Input.Events.POINTER_UP, handlePointerUp)
scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
}
return { setupPointerHandlers, cleanupPointerHandlers }