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