1459 lines
41 KiB
TypeScript
1459 lines
41 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, type IPagePaginationInfo } from "./document.js";
|
|
import "./page.js"; // Import DePage for thumbnail rendering
|
|
import "./contentinvoice.js"; // Import DeContentInvoice for thumbnail content
|
|
|
|
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;
|
|
|
|
@state()
|
|
accessor currentPageDisplay: string = "1 / 1";
|
|
|
|
// Sidebar state
|
|
@state()
|
|
accessor showThumbnails: boolean = true;
|
|
|
|
@state()
|
|
accessor sidebarWidth: number = 140;
|
|
|
|
@state()
|
|
accessor isResizingSidebar: boolean = false;
|
|
|
|
@state()
|
|
accessor thumbnailPages: number[] = [];
|
|
|
|
@state()
|
|
accessor paginationInfo: IPagePaginationInfo[] = [];
|
|
|
|
// Zoom animation
|
|
private zoomAnimationId: number | null = null;
|
|
|
|
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")};
|
|
--sidebar-min-width: 100px;
|
|
--sidebar-max-width: 300px;
|
|
}
|
|
|
|
/* Sidebar Styles */
|
|
.sidebar {
|
|
position: absolute;
|
|
left: 0;
|
|
top: var(--toolbar-height);
|
|
bottom: 0;
|
|
background: var(--toolbar-bg);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-right: 1px solid var(--toolbar-border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 50;
|
|
box-sizing: border-box;
|
|
transition: width 0.2s ease;
|
|
}
|
|
|
|
.sidebar--collapsed {
|
|
width: 0 !important;
|
|
overflow: hidden;
|
|
border-right: none;
|
|
}
|
|
|
|
.sidebar--resizing {
|
|
transition: none !important;
|
|
user-select: none;
|
|
}
|
|
|
|
.sidebar__header {
|
|
padding: 10px 12px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
border-bottom: 1px solid var(--toolbar-border);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sidebar__thumbnails {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.thumbnail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
border-radius: 6px;
|
|
transition: background 0.15s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.thumbnail:hover {
|
|
background: var(--button-hover);
|
|
}
|
|
|
|
.thumbnail--active {
|
|
background: var(--button-active);
|
|
}
|
|
|
|
.thumbnail--active .thumbnail__preview {
|
|
outline: 2px solid var(--accent-color);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.thumbnail__preview {
|
|
width: 100%;
|
|
aspect-ratio: 210 / 297;
|
|
background: ${cssManager.bdTheme("#fff", "#2a2a2a")};
|
|
box-shadow: ${cssManager.bdTheme("0 1px 4px rgba(0,0,0,0.15)", "0 1px 4px rgba(0,0,0,0.4)")};
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.thumbnail__label {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sidebar__resize-handle {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -4px;
|
|
bottom: 0;
|
|
width: 8px;
|
|
cursor: ew-resize;
|
|
background: transparent;
|
|
z-index: 60;
|
|
}
|
|
|
|
.sidebar__resize-handle::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 3px;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: transparent;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.sidebar__resize-handle:hover::after,
|
|
.sidebar--resizing .sidebar__resize-handle::after {
|
|
background: var(--accent-color);
|
|
}
|
|
|
|
.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;
|
|
width: 90px; /* Fixed width to prevent reflow - fits "Fit Width" */
|
|
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;
|
|
}
|
|
|
|
.fit-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.page-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.page-indicator {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
min-width: 45px;
|
|
text-align: center;
|
|
}
|
|
|
|
.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;
|
|
transition: left 0.2s ease;
|
|
}
|
|
|
|
.viewport--resizing {
|
|
transition: none !important;
|
|
}
|
|
|
|
.viewport--with-sidebar {
|
|
left: var(--current-sidebar-width, 140px);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
/* Collapse sidebar by default on tablet */
|
|
.sidebar {
|
|
width: 0 !important;
|
|
}
|
|
.sidebar--collapsed {
|
|
width: 0 !important;
|
|
}
|
|
.viewport--with-sidebar {
|
|
left: 0 !important;
|
|
}
|
|
`),
|
|
// Phone styles
|
|
cssManager.cssForPhone(css`
|
|
.zoom-slider-container {
|
|
display: none;
|
|
}
|
|
.fit-buttons {
|
|
display: none;
|
|
}
|
|
.spacing-label {
|
|
display: none;
|
|
}
|
|
.spacing-presets {
|
|
display: none;
|
|
}
|
|
.controls__divider {
|
|
display: none;
|
|
}
|
|
.controls {
|
|
padding: 0 8px;
|
|
}
|
|
.controls__section {
|
|
gap: 2px;
|
|
}
|
|
/* Hide sidebar and toggle on phone */
|
|
.sidebar {
|
|
display: none !important;
|
|
}
|
|
.sidebar-toggle {
|
|
display: none !important;
|
|
}
|
|
.viewport--with-sidebar {
|
|
left: 0 !important;
|
|
}
|
|
`),
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
const viewportClasses = [
|
|
"viewport",
|
|
this.zoomMode !== "auto" ? "viewport--centered" : "",
|
|
this.showThumbnails ? "viewport--with-sidebar" : "",
|
|
this.isResizingSidebar ? "viewport--resizing" : "",
|
|
].filter(Boolean).join(" ");
|
|
|
|
return html`
|
|
<div class="maincontainer" style="--current-sidebar-width: ${this.sidebarWidth}px;">
|
|
${this.renderSidebar()}
|
|
<div class="${viewportClasses}">
|
|
${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 renderSidebar(): TemplateResult {
|
|
const sidebarClasses = [
|
|
"sidebar",
|
|
!this.showThumbnails ? "sidebar--collapsed" : "",
|
|
this.isResizingSidebar ? "sidebar--resizing" : "",
|
|
].filter(Boolean).join(" ");
|
|
|
|
const thumbnailScale = this.getThumbnailScale();
|
|
const currentPage = this.getCurrentPage();
|
|
|
|
return html`
|
|
<div class="${sidebarClasses}" style="width: ${this.sidebarWidth}px;">
|
|
<div class="sidebar__header">Pages</div>
|
|
<div class="sidebar__thumbnails">
|
|
${this.thumbnailPages.map((_, i) => {
|
|
const pageInfo = this.paginationInfo[i];
|
|
|
|
return html`
|
|
<div
|
|
class="thumbnail ${currentPage === i + 1 ? "thumbnail--active" : ""}"
|
|
@click=${() => this.scrollToPage(i + 1)}
|
|
>
|
|
<div
|
|
class="thumbnail__preview"
|
|
style="--thumbnail-scale: ${thumbnailScale};"
|
|
>
|
|
<div style="
|
|
width: ${plugins.shared.A4_WIDTH}px;
|
|
height: ${plugins.shared.A4_HEIGHT}px;
|
|
transform: scale(${thumbnailScale});
|
|
transform-origin: top left;
|
|
pointer-events: none;
|
|
">
|
|
<dedocument-page
|
|
.letterData=${this.letterData}
|
|
.documentSettings=${this.documentSettings}
|
|
.pageNumber=${i + 1}
|
|
.pageTotalNumber=${this.thumbnailPages.length}
|
|
>${pageInfo ? html`
|
|
<dedocument-contentinvoice
|
|
.letterData=${this.letterData as unknown as plugins.tsclass.finance.TInvoice}
|
|
.documentSettings=${this.documentSettings}
|
|
.renderStartOffset=${pageInfo.startOffset}
|
|
.renderContentLength=${pageInfo.contentLength}
|
|
></dedocument-contentinvoice>
|
|
` : null}</dedocument-page>
|
|
</div>
|
|
</div>
|
|
<span class="thumbnail__label">${i + 1}</span>
|
|
</div>
|
|
`;
|
|
})}
|
|
</div>
|
|
<div
|
|
class="sidebar__resize-handle"
|
|
@mousedown=${this.startSidebarResize}
|
|
></div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private getThumbnailScale(): number {
|
|
const previewWidth = this.sidebarWidth - 24; // Account for padding
|
|
return previewWidth / plugins.shared.A4_WIDTH;
|
|
}
|
|
|
|
private renderZoomControls(): TemplateResult {
|
|
return html`
|
|
<div class="controls__section">
|
|
<!-- Sidebar Toggle Button -->
|
|
<button
|
|
class="controls__button sidebar-toggle ${this.showThumbnails ? "controls__button--active" : ""}"
|
|
@click=${() => this.toggleThumbnails()}
|
|
title="Toggle Thumbnails"
|
|
>
|
|
<dees-icon icon="lucide:panelLeft"></dees-icon>
|
|
</button>
|
|
|
|
<div class="controls__divider sidebar-toggle"></div>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- Fit Buttons -->
|
|
<div class="fit-buttons">
|
|
<!-- Fit Width Button -->
|
|
<button
|
|
class="controls__button ${this.zoomMode === "fit-width" ? "controls__button--active" : ""}"
|
|
@click=${() => this.handleZoomPreset("fit-width")}
|
|
title="Fit Width"
|
|
>
|
|
<dees-icon icon="lucide:arrowLeftRight"></dees-icon>
|
|
</button>
|
|
|
|
<!-- Fit Page Button -->
|
|
<button
|
|
class="controls__button ${this.zoomMode === "fit-page" ? "controls__button--active" : ""}"
|
|
@click=${() => this.handleZoomPreset("fit-page")}
|
|
title="Fit Page"
|
|
>
|
|
<dees-icon icon="lucide:expand"></dees-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<!-- Page Navigation -->
|
|
<div class="page-nav">
|
|
<button
|
|
class="controls__button"
|
|
@click=${() => this.handlePreviousPage()}
|
|
title="Previous Page"
|
|
>
|
|
<dees-icon icon="lucide:chevronUp"></dees-icon>
|
|
</button>
|
|
<span class="page-indicator">${this.currentPageDisplay}</span>
|
|
<button
|
|
class="controls__button"
|
|
@click=${() => this.handleNextPage()}
|
|
title="Next Page"
|
|
>
|
|
<dees-icon icon="lucide:chevronDown"></dees-icon>
|
|
</button>
|
|
</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(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<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(animate: boolean = false): 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;
|
|
const targetZoom = Math.round(scale * 100);
|
|
|
|
if (animate) {
|
|
this.animateZoomTo(targetZoom);
|
|
} else {
|
|
this.zoomLevel = targetZoom;
|
|
this.displayZoom = targetZoom;
|
|
}
|
|
}
|
|
|
|
private calculateFitPage(animate: boolean = false): 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);
|
|
const targetZoom = Math.round(scale * 100);
|
|
|
|
if (animate) {
|
|
this.animateZoomTo(targetZoom);
|
|
} else {
|
|
this.zoomLevel = targetZoom;
|
|
this.displayZoom = targetZoom;
|
|
}
|
|
}
|
|
|
|
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, page indicator, and thumbnails after document renders
|
|
setTimeout(() => {
|
|
this.updateDisplayZoom();
|
|
this.updatePageIndicator();
|
|
this.updateThumbnailPages();
|
|
}, 100);
|
|
// Additional delay to ensure all pages are rendered
|
|
setTimeout(() => {
|
|
this.updateThumbnailPages();
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
// Listen for pagination-complete event from DeDocument
|
|
this.addEventListener('pagination-complete', (e: CustomEvent) => {
|
|
this.paginationInfo = e.detail.paginationInfo;
|
|
const pageCount = e.detail.pageCount;
|
|
if (pageCount !== this.thumbnailPages.length) {
|
|
this.thumbnailPages = Array.from({ length: pageCount }, (_, i) => i);
|
|
}
|
|
});
|
|
|
|
// Handle viewport resize and scroll
|
|
const viewport = this.shadowRoot?.querySelector(".viewport");
|
|
if (viewport) {
|
|
// Resize observer for zoom updates
|
|
const resizeObserver = new ResizeObserver(() => {
|
|
if (this.zoomMode === "auto" || this.zoomMode === "fit-width") {
|
|
this.updateDisplayZoom();
|
|
}
|
|
});
|
|
resizeObserver.observe(viewport);
|
|
this.registerGarbageFunction(() => resizeObserver.disconnect());
|
|
|
|
// Scroll listener for page indicator and thumbnail highlighting
|
|
const scrollHandler = () => {
|
|
this.updatePageIndicator();
|
|
// Trigger re-render to update active thumbnail
|
|
this.requestUpdate();
|
|
};
|
|
viewport.addEventListener("scroll", scrollHandler, { passive: true });
|
|
this.registerGarbageFunction(() => viewport.removeEventListener("scroll", scrollHandler));
|
|
}
|
|
|
|
// Initial page indicator and thumbnail update
|
|
setTimeout(() => {
|
|
this.updatePageIndicator();
|
|
this.updateThumbnailPages();
|
|
}, 300);
|
|
}
|
|
|
|
// ============================================
|
|
// 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 viewport = this.shadowRoot?.querySelector(".viewport");
|
|
const doc = this.shadowRoot?.querySelector("dedocument-dedocument");
|
|
if (!viewport || !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] as HTMLElement;
|
|
|
|
if (targetPage) {
|
|
// Calculate scroll position relative to viewport
|
|
// Account for the document's position within the viewport
|
|
const docRect = doc.getBoundingClientRect();
|
|
const pageRect = targetPage.getBoundingClientRect();
|
|
const pageOffsetFromDoc = pageRect.top - docRect.top;
|
|
|
|
// Scroll to the page position with fast custom animation
|
|
if (smooth) {
|
|
this.animateScrollTo(viewport, pageOffsetFromDoc, 250);
|
|
} else {
|
|
viewport.scrollTop = pageOffsetFromDoc;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Animate scroll to target position
|
|
* @param element - The scrollable element
|
|
* @param targetTop - Target scroll position
|
|
* @param duration - Animation duration in ms (default: 150)
|
|
*/
|
|
private animateScrollTo(element: Element, targetTop: number, duration: number = 150): void {
|
|
const startTop = element.scrollTop;
|
|
const distance = targetTop - startTop;
|
|
const startTime = performance.now();
|
|
const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
|
|
|
|
const step = (currentTime: number) => {
|
|
const elapsed = currentTime - startTime;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
const easedProgress = easeOutCubic(progress);
|
|
|
|
element.scrollTop = startTop + distance * easedProgress;
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(step);
|
|
}
|
|
};
|
|
|
|
requestAnimationFrame(step);
|
|
}
|
|
|
|
/**
|
|
* Trigger the print dialog
|
|
*/
|
|
public async print(): Promise<void> {
|
|
await this.handlePrint();
|
|
}
|
|
|
|
/**
|
|
* Toggle the thumbnails sidebar visibility
|
|
*/
|
|
public toggleThumbnails(): void {
|
|
this.showThumbnails = !this.showThumbnails;
|
|
}
|
|
|
|
/**
|
|
* Set whether the thumbnails sidebar is visible
|
|
* @param visible - Whether the sidebar should be visible
|
|
*/
|
|
public setThumbnailsVisible(visible: boolean): void {
|
|
this.showThumbnails = visible;
|
|
}
|
|
|
|
/**
|
|
* Get whether the thumbnails sidebar is visible
|
|
*/
|
|
public getThumbnailsVisible(): boolean {
|
|
return this.showThumbnails;
|
|
}
|
|
|
|
/**
|
|
* Set the sidebar width
|
|
* @param width - Width in pixels (100-300)
|
|
*/
|
|
public setSidebarWidth(width: number): void {
|
|
this.sidebarWidth = Math.min(300, Math.max(100, width));
|
|
}
|
|
|
|
/**
|
|
* Get the current sidebar width
|
|
*/
|
|
public getSidebarWidth(): number {
|
|
return this.sidebarWidth;
|
|
}
|
|
}
|