${this.renderSidebar()}
${this.letterData
? html`
`
: html``}
${this.renderZoomControls()}
${this.renderSpacingControls()}
Spacing
${SPACING_PRESETS.map(
(preset) => html`
`
)}
${this.pageGap}px
${this.currentPageDisplay}
`;
}
private getZoomDisplayText(): string {
if (this.zoomMode === "auto") return "Auto";
if (this.zoomMode === "fit-width") return "Fit Width";
if (this.zoomMode === "fit-page") return "Fit Page";
return `${this.displayZoom}%`;
}
private isActivePreset(value: TZoomPreset): boolean {
if (typeof value === "string") {
return this.zoomMode === value;
}
return this.zoomMode === value || (typeof this.zoomMode === "number" && this.zoomMode === value);
}
private toggleZoomDropdown(): void {
this.showZoomDropdown = !this.showZoomDropdown;
if (this.showZoomDropdown) {
// Close dropdown when clicking outside
const closeHandler = (e: MouseEvent) => {
const target = e.target as HTMLElement;
if (!target.closest(".zoom-control")) {
this.showZoomDropdown = false;
document.removeEventListener("click", closeHandler);
}
};
setTimeout(() => document.addEventListener("click", closeHandler), 0);
}
}
private handleZoomPreset(value: TZoomPreset): void {
this.showZoomDropdown = false;
this.zoomMode = value;
if (value === "auto") {
this.zoomLevel = null;
this.updateDisplayZoom();
} else if (value === "fit-width") {
// Calculate zoom to fit page width to viewport width
this.calculateFitWidth(true);
} else if (value === "fit-page") {
// Calculate zoom to fit entire page in viewport
this.calculateFitPage(true);
} else {
// Animate to numeric preset
this.animateZoomTo(value);
}
}
private handleZoomStep(delta: number): void {
const current = this.zoomLevel ?? this.displayZoom;
const newZoom = Math.min(400, Math.max(25, current + delta));
this.animateZoomTo(newZoom);
this.zoomMode = newZoom;
}
private handleZoomSlider(e: Event): void {
// Cancel any running animation when user takes manual control
if (this.zoomAnimationId !== null) {
cancelAnimationFrame(this.zoomAnimationId);
this.zoomAnimationId = null;
}
const value = parseInt((e.target as HTMLInputElement).value, 10);
this.zoomLevel = value;
this.displayZoom = value;
this.zoomMode = value;
}
/**
* Animate zoom level to target value
* @param targetZoom - Target zoom percentage
* @param duration - Animation duration in ms (default: 200)
*/
private animateZoomTo(targetZoom: number, duration: number = 200): void {
// Cancel any existing animation
if (this.zoomAnimationId !== null) {
cancelAnimationFrame(this.zoomAnimationId);
}
const startZoom = this.zoomLevel ?? this.displayZoom;
const startTime = performance.now();
const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
const animate = (currentTime: number) => {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const easedProgress = easeOutCubic(progress);
const currentZoom = startZoom + (targetZoom - startZoom) * easedProgress;
this.zoomLevel = Math.round(currentZoom);
this.displayZoom = this.zoomLevel;
if (progress < 1) {
this.zoomAnimationId = requestAnimationFrame(animate);
} else {
this.zoomAnimationId = null;
}
};
this.zoomAnimationId = requestAnimationFrame(animate);
}
private handleSpacingPreset(value: number): void {
this.pageGap = value;
}
private handleSpacingSlider(e: Event): void {
this.pageGap = parseInt((e.target as HTMLInputElement).value, 10);
}
// ============================================
// SIDEBAR METHODS
// ============================================
private startSidebarResize(e: MouseEvent): void {
e.preventDefault();
this.isResizingSidebar = true;
const startX = e.clientX;
const startWidth = this.sidebarWidth;
const onMouseMove = (moveEvent: MouseEvent) => {
const delta = moveEvent.clientX - startX;
const newWidth = Math.min(300, Math.max(100, startWidth + delta));
this.sidebarWidth = newWidth;
};
const onMouseUp = () => {
this.isResizingSidebar = false;
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("mouseup", onMouseUp);
document.body.style.cursor = "";
document.body.style.userSelect = "";
};
document.addEventListener("mousemove", onMouseMove, { passive: true });
document.addEventListener("mouseup", onMouseUp);
document.body.style.cursor = "ew-resize";
document.body.style.userSelect = "none";
}
private updateThumbnailPages(): void {
const pageCount = this.getPageCount();
if (pageCount !== this.thumbnailPages.length) {
this.thumbnailPages = Array.from({ length: pageCount }, (_, i) => i);
}
}
private handlePreviousPage(): void {
const current = this.getCurrentPage();
if (current > 1) {
this.scrollToPage(current - 1);
}
}
private handleNextPage(): void {
const current = this.getCurrentPage();
const total = this.getPageCount();
if (current < total) {
this.scrollToPage(current + 1);
}
}
private updatePageIndicator(): void {
const current = this.getCurrentPage();
const total = this.getPageCount();
this.currentPageDisplay = `${current} / ${total || 1}`;
}
private async handlePrint(): Promise