syntaxbullet/personal-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Attach and detach zoom event listeners to both the workspace and the ASCII canvas

Browse Source
This commit is contained in:
syntaxbullet
2026-02-11 18:20:40 +01:00
parent d5bac98b76
commit 55ec01e3cd
2 changed files with 827 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1062
src/components/ControlPanel.astro
View File

File diff suppressed because it is too large Load Diff

36
src/scripts/ui-bindings.ts
View File

@@ -130,11 +130,17 @@ export class UIBindings {
} }
// Cleanup Zoom // Cleanup Zoom
const heroWrapper = document.querySelector('.hero-wrapper'); const workspace = document.querySelector('.ascii-workspace') || document.querySelector('.hero-wrapper');
if (heroWrapper) { const canvas = document.getElementById('ascii-canvas');
if (this.zoomHandlers.wheel) heroWrapper.removeEventListener('wheel', this.zoomHandlers.wheel); if (workspace) {
if (this.zoomHandlers.move) heroWrapper.removeEventListener('mousemove', this.zoomHandlers.move); if (this.zoomHandlers.wheel) workspace.removeEventListener('wheel', this.zoomHandlers.wheel);
if (this.zoomHandlers.leave) heroWrapper.removeEventListener('mouseleave', this.zoomHandlers.leave); if (this.zoomHandlers.move) workspace.removeEventListener('mousemove', this.zoomHandlers.move);
if (this.zoomHandlers.leave) workspace.removeEventListener('mouseleave', this.zoomHandlers.leave);
}
if (canvas) {
if (this.zoomHandlers.wheel) canvas.removeEventListener('wheel', this.zoomHandlers.wheel);
if (this.zoomHandlers.move) canvas.removeEventListener('mousemove', this.zoomHandlers.move);
if (this.zoomHandlers.leave) canvas.removeEventListener('mouseleave', this.zoomHandlers.leave);
} }
this.zoomHandlers = {}; this.zoomHandlers = {};
@@ -426,8 +432,11 @@ export class UIBindings {
// ============= Zoom ============= // ============= Zoom =============
private setupZoom(): void { private setupZoom(): void {
const heroWrapper = document.querySelector('.hero-wrapper'); const workspace = document.querySelector('.ascii-workspace') || document.querySelector('.hero-wrapper');
if (!heroWrapper) return; if (!workspace) return;
// Also attach to canvas for direct interaction
const canvas = document.getElementById('ascii-canvas');
this.zoomHandlers.wheel = (e: Event) => { this.zoomHandlers.wheel = (e: Event) => {
const we = e as WheelEvent; const we = e as WheelEvent;
@@ -437,17 +446,24 @@ export class UIBindings {
this.controller.handleWheel(we); this.controller.handleWheel(we);
}; };
// Use passive: false to allow preventDefault // Use passive: false to allow preventDefault
heroWrapper.addEventListener('wheel', this.zoomHandlers.wheel, { passive: false }); workspace.addEventListener('wheel', this.zoomHandlers.wheel, { passive: false });
this.zoomHandlers.move = (e: Event) => { this.zoomHandlers.move = (e: Event) => {
this.controller.handleMouseMove(e as MouseEvent); this.controller.handleMouseMove(e as MouseEvent);
}; };
heroWrapper.addEventListener('mousemove', this.zoomHandlers.move); workspace.addEventListener('mousemove', this.zoomHandlers.move);
this.zoomHandlers.leave = () => { this.zoomHandlers.leave = () => {
this.controller.handleMouseLeave(); this.controller.handleMouseLeave();
}; };
heroWrapper.addEventListener('mouseleave', this.zoomHandlers.leave); workspace.addEventListener('mouseleave', this.zoomHandlers.leave);
// Also attach directly to canvas for better responsiveness
if (canvas) {
canvas.addEventListener('wheel', this.zoomHandlers.wheel, { passive: false });
canvas.addEventListener('mousemove', this.zoomHandlers.move);
canvas.addEventListener('mouseleave', this.zoomHandlers.leave);
}
} }
// ============= Resize ============= // ============= Resize =============