923 lines
25 KiB
TypeScript
923 lines
25 KiB
TypeScript
import * as plugins from "../plugins.js";
|
|
|
|
import {
|
|
DeesElement,
|
|
css,
|
|
cssManager,
|
|
customElement,
|
|
html,
|
|
property,
|
|
state,
|
|
type TemplateResult,
|
|
} from "@design.estate/dees-element";
|
|
import { demoFunc } from "./viewer.demo.js";
|
|
import { DeDocument } from "./document.js";
|
|
|
|
import "@design.estate/dees-catalog";
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"dedocument-viewer": DeDocumentViewer;
|
|
}
|
|
}
|
|
|
|
type TZoomPreset = "auto" | "fit-width" | "fit-page" | number;
|
|
|
|
interface ISpacingPreset {
|
|
label: string;
|
|
value: number;
|
|
icon: string;
|
|
}
|
|
|
|
const ZOOM_PRESETS: { label: string; value: TZoomPreset }[] = [
|
|
{ label: "Auto Fit", value: "auto" },
|
|
{ label: "Fit Width", value: "fit-width" },
|
|
{ label: "Fit Page", value: "fit-page" },
|
|
{ label: "50%", value: 50 },
|
|
{ label: "75%", value: 75 },
|
|
{ label: "100%", value: 100 },
|
|
{ label: "125%", value: 125 },
|
|
{ label: "150%", value: 150 },
|
|
{ label: "200%", value: 200 },
|
|
];
|
|
|
|
const SPACING_PRESETS: ISpacingPreset[] = [
|
|
{ label: "Compact", value: 8, icon: "lucide:minimize2" },
|
|
{ label: "Normal", value: 16, icon: "lucide:minus" },
|
|
{ label: "Comfortable", value: 32, icon: "lucide:maximize2" },
|
|
];
|
|
|
|
@customElement("dedocument-viewer")
|
|
export class DeDocumentViewer extends DeesElement {
|
|
// DEMO
|
|
public static demo = demoFunc;
|
|
|
|
// INSTANCE
|
|
@property({
|
|
type: Object,
|
|
reflect: true,
|
|
})
|
|
accessor letterData: plugins.tsclass.business.TLetter = null;
|
|
|
|
@property({
|
|
type: Object,
|
|
reflect: true,
|
|
})
|
|
accessor documentSettings: plugins.shared.interfaces.IDocumentSettings;
|
|
|
|
// External configuration properties
|
|
@property({ type: Number })
|
|
accessor initialZoom: number = null; // Initial zoom % (null = auto)
|
|
|
|
@property({ type: Number })
|
|
accessor initialPageGap: number = 16; // Initial page gap in pixels
|
|
|
|
// Internal state
|
|
@state()
|
|
accessor zoomMode: TZoomPreset = "auto";
|
|
|
|
@state()
|
|
accessor zoomLevel: number = null; // null = auto, otherwise percentage
|
|
|
|
@state()
|
|
accessor pageGap: number = 16;
|
|
|
|
@state()
|
|
accessor showZoomDropdown: boolean = false;
|
|
|
|
@state()
|
|
accessor displayZoom: number = 100;
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
--toolbar-height: 40px;
|
|
--toolbar-bg: ${cssManager.bdTheme("rgba(250, 250, 250, 0.95)", "rgba(24, 24, 24, 0.95)")};
|
|
--toolbar-border: ${cssManager.bdTheme("rgba(0, 0, 0, 0.1)", "rgba(255, 255, 255, 0.1)")};
|
|
--button-hover: ${cssManager.bdTheme("rgba(0, 0, 0, 0.08)", "rgba(255, 255, 255, 0.08)")};
|
|
--button-active: ${cssManager.bdTheme("rgba(0, 0, 0, 0.12)", "rgba(255, 255, 255, 0.15)")};
|
|
--text-primary: ${cssManager.bdTheme("#1a1a1a", "#e5e5e5")};
|
|
--text-secondary: ${cssManager.bdTheme("#666", "#999")};
|
|
--accent-color: ${cssManager.bdTheme("#0066cc", "#4d9fff")};
|
|
--dropdown-bg: ${cssManager.bdTheme("#fff", "#1e1e1e")};
|
|
--dropdown-shadow: ${cssManager.bdTheme("0 4px 16px rgba(0,0,0,0.15)", "0 4px 16px rgba(0,0,0,0.4)")};
|
|
--slider-track: ${cssManager.bdTheme("#ddd", "#444")};
|
|
--slider-fill: ${cssManager.bdTheme("#0066cc", "#4d9fff")};
|
|
}
|
|
|
|
.maincontainer {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: ${cssManager.bdTheme("#eeeeeb", "#111")};
|
|
}
|
|
|
|
.controls {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
left: 0px;
|
|
height: var(--toolbar-height);
|
|
background: var(--toolbar-bg);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid var(--toolbar-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 12px;
|
|
z-index: 100;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.controls__section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.controls__divider {
|
|
width: 1px;
|
|
height: 20px;
|
|
background: var(--toolbar-border);
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.controls__button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
color: var(--text-primary);
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.controls__button:hover {
|
|
background: var(--button-hover);
|
|
}
|
|
|
|
.controls__button:active {
|
|
background: var(--button-active);
|
|
}
|
|
|
|
.controls__button--active {
|
|
background: var(--button-active);
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
.controls__button dees-icon {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.zoom-control {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.zoom-dropdown-trigger {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--toolbar-border);
|
|
background: transparent;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
min-width: 80px;
|
|
justify-content: space-between;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.zoom-dropdown-trigger:hover {
|
|
background: var(--button-hover);
|
|
border-color: var(--text-secondary);
|
|
}
|
|
|
|
.zoom-dropdown-trigger dees-icon {
|
|
font-size: 12px;
|
|
opacity: 0.6;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.zoom-dropdown-trigger--open dees-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.zoom-dropdown {
|
|
position: absolute;
|
|
top: calc(100% + 4px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--dropdown-bg);
|
|
border: 1px solid var(--toolbar-border);
|
|
border-radius: 8px;
|
|
box-shadow: var(--dropdown-shadow);
|
|
min-width: 140px;
|
|
padding: 4px;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateX(-50%) translateY(-8px);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.zoom-dropdown--visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
|
|
.zoom-dropdown__item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 12px;
|
|
border: none;
|
|
background: transparent;
|
|
width: 100%;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
transition: background 0.1s ease;
|
|
}
|
|
|
|
.zoom-dropdown__item:hover {
|
|
background: var(--button-hover);
|
|
}
|
|
|
|
.zoom-dropdown__item--active {
|
|
color: var(--accent-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.zoom-slider-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.zoom-slider {
|
|
width: 80px;
|
|
height: 4px;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
background: var(--slider-track);
|
|
border-radius: 2px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.zoom-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 14px;
|
|
height: 14px;
|
|
background: var(--slider-fill);
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: transform 0.15s ease;
|
|
}
|
|
|
|
.zoom-slider::-webkit-slider-thumb:hover {
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
.zoom-slider::-moz-range-thumb {
|
|
width: 14px;
|
|
height: 14px;
|
|
background: var(--slider-fill);
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.spacing-control {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.spacing-label {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.spacing-presets {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.spacing-slider-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.spacing-slider {
|
|
width: 60px;
|
|
height: 4px;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
background: var(--slider-track);
|
|
border-radius: 2px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.spacing-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 12px;
|
|
height: 12px;
|
|
background: var(--slider-fill);
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.spacing-slider::-moz-range-thumb {
|
|
width: 12px;
|
|
height: 12px;
|
|
background: var(--slider-fill);
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.spacing-value {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
min-width: 28px;
|
|
text-align: right;
|
|
}
|
|
|
|
.controlsShadow {
|
|
position: absolute;
|
|
top: var(--toolbar-height);
|
|
right: 0px;
|
|
left: 0px;
|
|
height: 16px;
|
|
background: ${cssManager.bdTheme(
|
|
"linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, transparent 100%)",
|
|
"linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 100%)"
|
|
)};
|
|
pointer-events: none;
|
|
z-index: 99;
|
|
}
|
|
|
|
.viewport {
|
|
position: absolute;
|
|
padding: 16px;
|
|
padding-top: calc(var(--toolbar-height) + 16px);
|
|
padding-bottom: 0px;
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
overflow-y: scroll;
|
|
overflow-x: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.viewport--centered {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
`,
|
|
// Tablet styles
|
|
cssManager.cssForTablet(css`
|
|
.zoom-slider-container {
|
|
display: none;
|
|
}
|
|
.spacing-slider-container {
|
|
display: none;
|
|
}
|
|
`),
|
|
// Phone styles
|
|
cssManager.cssForPhone(css`
|
|
.zoom-slider-container {
|
|
display: none;
|
|
}
|
|
.spacing-label {
|
|
display: none;
|
|
}
|
|
.spacing-presets {
|
|
display: none;
|
|
}
|
|
.controls__divider {
|
|
display: none;
|
|
}
|
|
.controls {
|
|
padding: 0 8px;
|
|
}
|
|
.controls__section {
|
|
gap: 2px;
|
|
}
|
|
`),
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<div class="maincontainer">
|
|
<div class="viewport ${this.zoomMode !== "auto" ? "viewport--centered" : ""}">
|
|
${this.letterData
|
|
? html`
|
|
<dedocument-dedocument
|
|
.letterData=${this.letterData}
|
|
.documentSettings=${this.documentSettings}
|
|
.zoomLevel=${this.zoomLevel}
|
|
.pageGap=${this.pageGap}
|
|
></dedocument-dedocument>
|
|
`
|
|
: html``}
|
|
</div>
|
|
<div class="controls">
|
|
${this.renderZoomControls()}
|
|
${this.renderSpacingControls()}
|
|
</div>
|
|
<div class="controlsShadow"></div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderZoomControls(): TemplateResult {
|
|
return html`
|
|
<div class="controls__section">
|
|
<!-- Zoom Out Button -->
|
|
<button
|
|
class="controls__button"
|
|
@click=${() => this.handleZoomStep(-10)}
|
|
title="Zoom Out"
|
|
>
|
|
<dees-icon icon="lucide:minus"></dees-icon>
|
|
</button>
|
|
|
|
<!-- Zoom Dropdown -->
|
|
<div class="zoom-control">
|
|
<button
|
|
class="zoom-dropdown-trigger ${this.showZoomDropdown ? "zoom-dropdown-trigger--open" : ""}"
|
|
@click=${() => this.toggleZoomDropdown()}
|
|
>
|
|
<span>${this.getZoomDisplayText()}</span>
|
|
<dees-icon icon="lucide:chevronDown"></dees-icon>
|
|
</button>
|
|
<div class="zoom-dropdown ${this.showZoomDropdown ? "zoom-dropdown--visible" : ""}">
|
|
${ZOOM_PRESETS.map(
|
|
(preset) => html`
|
|
<button
|
|
class="zoom-dropdown__item ${this.isActivePreset(preset.value) ? "zoom-dropdown__item--active" : ""}"
|
|
@click=${() => this.handleZoomPreset(preset.value)}
|
|
>
|
|
${preset.label}
|
|
</button>
|
|
`
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Zoom In Button -->
|
|
<button
|
|
class="controls__button"
|
|
@click=${() => this.handleZoomStep(10)}
|
|
title="Zoom In"
|
|
>
|
|
<dees-icon icon="lucide:plus"></dees-icon>
|
|
</button>
|
|
|
|
<div class="controls__divider"></div>
|
|
|
|
<!-- Zoom Slider -->
|
|
<div class="zoom-slider-container">
|
|
<input
|
|
type="range"
|
|
class="zoom-slider"
|
|
min="25"
|
|
max="400"
|
|
.value=${String(this.displayZoom)}
|
|
@input=${this.handleZoomSlider}
|
|
/>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderSpacingControls(): TemplateResult {
|
|
return html`
|
|
<div class="controls__section">
|
|
<span class="spacing-label">Spacing</span>
|
|
|
|
<!-- Spacing Presets -->
|
|
<div class="spacing-presets">
|
|
${SPACING_PRESETS.map(
|
|
(preset) => html`
|
|
<button
|
|
class="controls__button ${this.pageGap === preset.value ? "controls__button--active" : ""}"
|
|
@click=${() => this.handleSpacingPreset(preset.value)}
|
|
title="${preset.label} (${preset.value}px)"
|
|
>
|
|
<dees-icon icon="${preset.icon}"></dees-icon>
|
|
</button>
|
|
`
|
|
)}
|
|
</div>
|
|
|
|
<div class="controls__divider"></div>
|
|
|
|
<!-- Spacing Slider -->
|
|
<div class="spacing-slider-container">
|
|
<input
|
|
type="range"
|
|
class="spacing-slider"
|
|
min="0"
|
|
max="64"
|
|
.value=${String(this.pageGap)}
|
|
@input=${this.handleSpacingSlider}
|
|
/>
|
|
<span class="spacing-value">${this.pageGap}px</span>
|
|
</div>
|
|
|
|
<div class="controls__divider"></div>
|
|
|
|
<!-- Print Button -->
|
|
<button
|
|
class="controls__button"
|
|
@click=${() => this.handlePrint()}
|
|
title="Print Document"
|
|
>
|
|
<dees-icon icon="lucide:printer"></dees-icon>
|
|
</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
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();
|
|
} else if (value === "fit-page") {
|
|
// Calculate zoom to fit entire page in viewport
|
|
this.calculateFitPage();
|
|
} else {
|
|
this.zoomLevel = value;
|
|
this.displayZoom = value;
|
|
}
|
|
}
|
|
|
|
private handleZoomStep(delta: number): void {
|
|
const current = this.zoomLevel ?? this.displayZoom;
|
|
const newZoom = Math.min(400, Math.max(25, current + delta));
|
|
this.zoomLevel = newZoom;
|
|
this.displayZoom = newZoom;
|
|
this.zoomMode = newZoom;
|
|
}
|
|
|
|
private handleZoomSlider(e: Event): void {
|
|
const value = parseInt((e.target as HTMLInputElement).value, 10);
|
|
this.zoomLevel = value;
|
|
this.displayZoom = value;
|
|
this.zoomMode = value;
|
|
}
|
|
|
|
private handleSpacingPreset(value: number): void {
|
|
this.pageGap = value;
|
|
}
|
|
|
|
private handleSpacingSlider(e: Event): void {
|
|
this.pageGap = parseInt((e.target as HTMLInputElement).value, 10);
|
|
}
|
|
|
|
private async handlePrint(): Promise<void> {
|
|
// Create a print-specific container - hidden on screen, visible only in print
|
|
const printContainer = document.createElement("div");
|
|
printContainer.className = "dedocument-print-container";
|
|
printContainer.style.cssText = `
|
|
position: absolute;
|
|
left: -9999px;
|
|
top: 0;
|
|
width: 210mm;
|
|
height: auto;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
`;
|
|
|
|
// Create a document element in print mode
|
|
const printDoc = document.createElement("dedocument-dedocument") as DeDocument;
|
|
printDoc.letterData = this.letterData;
|
|
printDoc.documentSettings = this.documentSettings;
|
|
printDoc.printMode = true;
|
|
printDoc.pageGap = 0;
|
|
|
|
printContainer.appendChild(printDoc);
|
|
document.body.appendChild(printContainer);
|
|
|
|
// Add print styles - hide everything except print container during print
|
|
const printStyles = document.createElement("style");
|
|
printStyles.id = "dedocument-print-styles";
|
|
printStyles.textContent = `
|
|
@media print {
|
|
body > *:not(.dedocument-print-container) {
|
|
display: none !important;
|
|
}
|
|
.dedocument-print-container {
|
|
position: static !important;
|
|
left: auto !important;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
visibility: visible !important;
|
|
pointer-events: auto !important;
|
|
}
|
|
dedocument-dedocument {
|
|
display: block !important;
|
|
}
|
|
dedocument-page {
|
|
page-break-after: always;
|
|
page-break-inside: avoid;
|
|
break-after: page;
|
|
break-inside: avoid;
|
|
}
|
|
dedocument-page:last-child {
|
|
page-break-after: auto;
|
|
break-after: auto;
|
|
}
|
|
@page {
|
|
size: A4;
|
|
margin: 0;
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(printStyles);
|
|
|
|
// Wait for the document to render
|
|
await new Promise((resolve) => setTimeout(resolve, 500));
|
|
|
|
// Cleanup function
|
|
const cleanup = () => {
|
|
if (document.body.contains(printContainer)) {
|
|
printContainer.remove();
|
|
}
|
|
if (document.head.contains(printStyles)) {
|
|
printStyles.remove();
|
|
}
|
|
window.removeEventListener("afterprint", cleanup);
|
|
};
|
|
|
|
// Listen for print dialog close
|
|
window.addEventListener("afterprint", cleanup);
|
|
|
|
// Trigger print
|
|
window.print();
|
|
|
|
// Fallback: also clean up immediately after print() returns
|
|
// (some browsers return from print() after dialog closes)
|
|
setTimeout(cleanup, 100);
|
|
}
|
|
|
|
private calculateFitWidth(): void {
|
|
const viewport = this.shadowRoot?.querySelector(".viewport");
|
|
if (!viewport) return;
|
|
|
|
// Account for padding and scrollbar width
|
|
const viewportWidth = viewport.clientWidth - 32 - 16;
|
|
const scale = viewportWidth / plugins.shared.A4_WIDTH;
|
|
|
|
this.zoomLevel = Math.round(scale * 100);
|
|
this.displayZoom = this.zoomLevel;
|
|
}
|
|
|
|
private calculateFitPage(): void {
|
|
const viewport = this.shadowRoot?.querySelector(".viewport");
|
|
if (!viewport) return;
|
|
|
|
// Account for padding: top = toolbar (40px) + 16px, bottom = 16px margin for visibility
|
|
const topPadding = 40 + 16; // toolbar height + padding
|
|
const bottomPadding = 16; // some margin at bottom
|
|
const sidePadding = 32; // 16px each side
|
|
|
|
const viewportHeight = viewport.clientHeight - topPadding - bottomPadding;
|
|
const viewportWidth = viewport.clientWidth - sidePadding;
|
|
|
|
const scaleByHeight = viewportHeight / plugins.shared.A4_HEIGHT;
|
|
const scaleByWidth = viewportWidth / plugins.shared.A4_WIDTH;
|
|
const scale = Math.min(scaleByHeight, scaleByWidth);
|
|
|
|
this.zoomLevel = Math.round(scale * 100);
|
|
this.displayZoom = this.zoomLevel;
|
|
}
|
|
|
|
private updateDisplayZoom(): void {
|
|
// Update display zoom based on current auto scale
|
|
requestAnimationFrame(() => {
|
|
const doc = this.shadowRoot?.querySelector("dedocument-dedocument") as DeDocument;
|
|
if (doc) {
|
|
this.displayZoom = doc.getEffectiveZoom();
|
|
}
|
|
});
|
|
}
|
|
|
|
public updated(
|
|
changedProperties: Map<string | number | symbol, unknown>
|
|
): void {
|
|
super.updated(changedProperties);
|
|
|
|
if (changedProperties.has("letterData")) {
|
|
// Update display zoom after document renders
|
|
setTimeout(() => this.updateDisplayZoom(), 100);
|
|
}
|
|
}
|
|
|
|
public firstUpdated(): void {
|
|
// Apply initial settings if provided
|
|
if (this.initialPageGap !== 16) {
|
|
this.pageGap = this.initialPageGap;
|
|
}
|
|
|
|
if (this.initialZoom !== null) {
|
|
this.zoomLevel = this.initialZoom;
|
|
this.displayZoom = this.initialZoom;
|
|
this.zoomMode = this.initialZoom;
|
|
} else {
|
|
// Update display zoom initially for auto mode
|
|
setTimeout(() => this.updateDisplayZoom(), 200);
|
|
}
|
|
|
|
// Handle viewport resize to update display zoom in auto mode
|
|
const viewport = this.shadowRoot?.querySelector(".viewport");
|
|
if (viewport) {
|
|
const resizeObserver = new ResizeObserver(() => {
|
|
if (this.zoomMode === "auto" || this.zoomMode === "fit-width") {
|
|
this.updateDisplayZoom();
|
|
}
|
|
});
|
|
resizeObserver.observe(viewport);
|
|
this.registerGarbageFunction(() => resizeObserver.disconnect());
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// PUBLIC API METHODS
|
|
// ============================================
|
|
|
|
/**
|
|
* Set the zoom level programmatically
|
|
* @param level - Zoom percentage (25-400), or 'auto', 'fit-width', 'fit-page'
|
|
*/
|
|
public setZoom(level: number | "auto" | "fit-width" | "fit-page"): void {
|
|
if (level === "auto") {
|
|
this.handleZoomPreset("auto");
|
|
} else if (level === "fit-width") {
|
|
this.handleZoomPreset("fit-width");
|
|
} else if (level === "fit-page") {
|
|
this.handleZoomPreset("fit-page");
|
|
} else {
|
|
const clampedZoom = Math.min(400, Math.max(25, level));
|
|
this.zoomLevel = clampedZoom;
|
|
this.displayZoom = clampedZoom;
|
|
this.zoomMode = clampedZoom;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get the current zoom percentage
|
|
*/
|
|
public getZoom(): number {
|
|
return this.displayZoom;
|
|
}
|
|
|
|
/**
|
|
* Set the page gap (spacing between pages)
|
|
* @param gap - Gap in pixels (0-64)
|
|
*/
|
|
public setPageGap(gap: number): void {
|
|
this.pageGap = Math.min(64, Math.max(0, gap));
|
|
}
|
|
|
|
/**
|
|
* Get the current page gap in pixels
|
|
*/
|
|
public getPageGap(): number {
|
|
return this.pageGap;
|
|
}
|
|
|
|
/**
|
|
* Get the total number of pages in the document
|
|
*/
|
|
public getPageCount(): number {
|
|
const doc = this.shadowRoot?.querySelector("dedocument-dedocument");
|
|
if (!doc) return 0;
|
|
const pages = doc.shadowRoot?.querySelectorAll("dedocument-page");
|
|
return pages?.length ?? 0;
|
|
}
|
|
|
|
/**
|
|
* Get the currently visible page number (1-indexed)
|
|
*/
|
|
public getCurrentPage(): number {
|
|
const viewport = this.shadowRoot?.querySelector(".viewport");
|
|
const doc = this.shadowRoot?.querySelector("dedocument-dedocument");
|
|
if (!viewport || !doc) return 1;
|
|
|
|
const pages = doc.shadowRoot?.querySelectorAll("dedocument-page");
|
|
if (!pages || pages.length === 0) return 1;
|
|
|
|
const viewportRect = viewport.getBoundingClientRect();
|
|
const viewportCenter = viewportRect.top + viewportRect.height / 2;
|
|
|
|
let currentPage = 1;
|
|
for (let i = 0; i < pages.length; i++) {
|
|
const pageRect = pages[i].getBoundingClientRect();
|
|
if (pageRect.top <= viewportCenter && pageRect.bottom >= viewportCenter) {
|
|
currentPage = i + 1;
|
|
break;
|
|
}
|
|
if (pageRect.top > viewportCenter) {
|
|
currentPage = Math.max(1, i);
|
|
break;
|
|
}
|
|
currentPage = i + 1;
|
|
}
|
|
|
|
return currentPage;
|
|
}
|
|
|
|
/**
|
|
* Scroll to a specific page
|
|
* @param pageNumber - Page number (1-indexed)
|
|
* @param smooth - Whether to use smooth scrolling (default: true)
|
|
*/
|
|
public scrollToPage(pageNumber: number, smooth: boolean = true): void {
|
|
const doc = this.shadowRoot?.querySelector("dedocument-dedocument");
|
|
if (!doc) return;
|
|
|
|
const pages = doc.shadowRoot?.querySelectorAll("dedocument-page");
|
|
if (!pages || pages.length === 0) return;
|
|
|
|
const targetIndex = Math.min(Math.max(0, pageNumber - 1), pages.length - 1);
|
|
const targetPage = pages[targetIndex];
|
|
|
|
if (targetPage) {
|
|
targetPage.scrollIntoView({
|
|
behavior: smooth ? "smooth" : "instant",
|
|
block: "start",
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Trigger the print dialog
|
|
*/
|
|
public async print(): Promise<void> {
|
|
await this.handlePrint();
|
|
}
|
|
}
|