fix(structure): group components into groups inside the repo
This commit is contained in:
537
ts_web/elements/00group-pdf/dees-pdf-preview/component.ts
Normal file
537
ts_web/elements/00group-pdf/dees-pdf-preview/component.ts
Normal file
@@ -0,0 +1,537 @@
|
||||
import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
|
||||
import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
|
||||
import { CanvasPool, type PooledCanvas } from '../dees-pdf-shared/CanvasPool.js';
|
||||
import { PerformanceMonitor, throttle } from '../dees-pdf-shared/utils.js';
|
||||
import { previewStyles } from './styles.js';
|
||||
import { demo as demoFunc } from './demo.js';
|
||||
import '../../dees-icon/dees-icon.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-pdf-preview': DeesPdfPreview;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-pdf-preview')
|
||||
export class DeesPdfPreview extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static styles = previewStyles;
|
||||
|
||||
@property({ type: String })
|
||||
accessor pdfUrl: string = '';
|
||||
|
||||
@property({ type: Number })
|
||||
accessor currentPreviewPage: number = 1;
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor clickable: boolean = true;
|
||||
|
||||
@property({ type: Number })
|
||||
accessor pageCount: number = 0;
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor loading: boolean = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor rendered: boolean = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor error: boolean = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor isHovering: boolean = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor isA4Format: boolean = true;
|
||||
|
||||
private renderPagesTask: Promise<void> | null = null;
|
||||
private renderPagesQueued: boolean = false;
|
||||
|
||||
private observer: IntersectionObserver;
|
||||
private pdfDocument: any;
|
||||
private canvases: PooledCanvas[] = [];
|
||||
private resizeObserver?: ResizeObserver;
|
||||
private previewContainer: HTMLElement | null = null;
|
||||
private stackElement: HTMLElement | null = null;
|
||||
private loadedPdfUrl: string | null = null;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div
|
||||
class="preview-container ${this.loading ? 'loading' : ''} ${this.error ? 'error' : ''} ${this.clickable ? 'clickable' : ''}"
|
||||
@click=${this.handleClick}
|
||||
@mouseenter=${this.handleMouseEnter}
|
||||
@mouseleave=${this.handleMouseLeave}
|
||||
@mousemove=${this.handleMouseMove}
|
||||
>
|
||||
${this.loading ? html`
|
||||
<div class="preview-loading">
|
||||
<div class="preview-spinner"></div>
|
||||
<div class="preview-text">Loading preview...</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${this.error ? html`
|
||||
<div class="preview-error">
|
||||
<dees-icon icon="lucide:FileX"></dees-icon>
|
||||
<div class="preview-text">Failed to load PDF</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${!this.loading && !this.error ? html`
|
||||
<div class="preview-stack ${!this.isA4Format ? 'non-a4' : ''}">
|
||||
<canvas
|
||||
class="preview-canvas"
|
||||
data-page="${this.currentPreviewPage}"
|
||||
></canvas>
|
||||
</div>
|
||||
|
||||
${this.pageCount > 1 && this.isHovering ? html`
|
||||
<div class="preview-page-indicator">
|
||||
Page ${this.currentPreviewPage} of ${this.pageCount}
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${this.pageCount > 0 && !this.isHovering ? html`
|
||||
<div class="preview-info">
|
||||
<dees-icon icon="lucide:FileText"></dees-icon>
|
||||
<span class="preview-pages">${this.pageCount} page${this.pageCount > 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${this.clickable ? html`
|
||||
<div class="preview-overlay">
|
||||
<dees-icon icon="lucide:Eye"></dees-icon>
|
||||
<span>View PDF</span>
|
||||
</div>
|
||||
` : ''}
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private handleMouseEnter() {
|
||||
this.isHovering = true;
|
||||
}
|
||||
|
||||
private handleMouseLeave() {
|
||||
this.isHovering = false;
|
||||
// Reset to first page when not hovering
|
||||
if (this.currentPreviewPage !== 1) {
|
||||
this.currentPreviewPage = 1;
|
||||
void this.scheduleRenderPages();
|
||||
}
|
||||
}
|
||||
|
||||
private handleMouseMove(e: MouseEvent) {
|
||||
if (!this.isHovering || this.pageCount <= 1) return;
|
||||
|
||||
const rect = this.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const width = rect.width;
|
||||
|
||||
// Calculate which page to show based on horizontal position
|
||||
const percentage = Math.max(0, Math.min(1, x / width));
|
||||
const newPage = Math.ceil(percentage * this.pageCount) || 1;
|
||||
|
||||
if (newPage !== this.currentPreviewPage) {
|
||||
this.currentPreviewPage = newPage;
|
||||
void this.scheduleRenderPages();
|
||||
}
|
||||
}
|
||||
|
||||
public async connectedCallback() {
|
||||
await super.connectedCallback();
|
||||
this.setupIntersectionObserver();
|
||||
await this.updateComplete;
|
||||
this.cacheElements();
|
||||
this.setupResizeObserver();
|
||||
}
|
||||
|
||||
public async disconnectedCallback() {
|
||||
await super.disconnectedCallback();
|
||||
this.cleanup();
|
||||
if (this.observer) {
|
||||
this.observer.disconnect();
|
||||
}
|
||||
this.resizeObserver?.disconnect();
|
||||
this.resizeObserver = undefined;
|
||||
}
|
||||
|
||||
private setupIntersectionObserver() {
|
||||
const options = {
|
||||
root: null,
|
||||
rootMargin: '200px',
|
||||
threshold: 0.01,
|
||||
};
|
||||
|
||||
this.observer = new IntersectionObserver(
|
||||
throttle((entries) => {
|
||||
for (const entry of entries) {
|
||||
if (entry.isIntersecting && !this.rendered && this.pdfUrl) {
|
||||
this.loadAndRenderPreview();
|
||||
} else if (!entry.isIntersecting && this.rendered) {
|
||||
// Optional: Clear canvases when out of view for memory optimization
|
||||
// this.clearCanvases();
|
||||
}
|
||||
}
|
||||
}, 100),
|
||||
options
|
||||
);
|
||||
|
||||
this.observer.observe(this);
|
||||
}
|
||||
|
||||
private async loadAndRenderPreview() {
|
||||
if (this.rendered || this.loading) return;
|
||||
|
||||
this.loading = true;
|
||||
this.error = false;
|
||||
PerformanceMonitor.mark(`preview-load-${this.pdfUrl}`);
|
||||
|
||||
try {
|
||||
this.pdfDocument = await PdfManager.loadDocument(this.pdfUrl);
|
||||
this.pageCount = this.pdfDocument.numPages;
|
||||
this.currentPreviewPage = 1;
|
||||
this.loadedPdfUrl = this.pdfUrl;
|
||||
|
||||
// Force an update to ensure the canvas element is in the DOM
|
||||
this.loading = false;
|
||||
await this.updateComplete;
|
||||
this.cacheElements();
|
||||
|
||||
// Now render the first page
|
||||
await this.scheduleRenderPages();
|
||||
|
||||
this.rendered = true;
|
||||
|
||||
const duration = PerformanceMonitor.measure(`preview-render-${this.pdfUrl}`, `preview-load-${this.pdfUrl}`);
|
||||
console.log(`PDF preview rendered in ${duration}ms`);
|
||||
} catch (error) {
|
||||
console.error('Failed to load PDF preview:', error);
|
||||
this.error = true;
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
private scheduleRenderPages(): Promise<void> {
|
||||
if (!this.pdfDocument) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
if (this.renderPagesTask) {
|
||||
this.renderPagesQueued = true;
|
||||
return this.renderPagesTask;
|
||||
}
|
||||
|
||||
this.renderPagesTask = (async () => {
|
||||
try {
|
||||
await this.performRenderPages();
|
||||
} catch (error) {
|
||||
console.error('Failed to render PDF preview pages:', error);
|
||||
}
|
||||
})().finally(() => {
|
||||
this.renderPagesTask = null;
|
||||
if (this.renderPagesQueued) {
|
||||
this.renderPagesQueued = false;
|
||||
void this.scheduleRenderPages();
|
||||
}
|
||||
});
|
||||
|
||||
return this.renderPagesTask;
|
||||
}
|
||||
|
||||
private async performRenderPages() {
|
||||
if (!this.pdfDocument) return;
|
||||
|
||||
// Wait a frame to ensure DOM is ready
|
||||
await new Promise(resolve => requestAnimationFrame(resolve));
|
||||
|
||||
const canvas = this.shadowRoot?.querySelector('.preview-canvas') as HTMLCanvasElement;
|
||||
if (!canvas) {
|
||||
console.warn('Preview canvas not found in DOM');
|
||||
return;
|
||||
}
|
||||
|
||||
// Release old canvases
|
||||
this.clearCanvases();
|
||||
|
||||
this.cacheElements();
|
||||
|
||||
// Get available size for the preview
|
||||
const { availableWidth, availableHeight } = this.getAvailableSize();
|
||||
|
||||
try {
|
||||
// Get the page to render
|
||||
const pageNum = this.currentPreviewPage;
|
||||
const page = await this.pdfDocument.getPage(pageNum);
|
||||
|
||||
// Calculate scale to fit within available area while keeping aspect ratio
|
||||
// Use higher scale for sharper rendering
|
||||
const initialViewport = page.getViewport({ scale: 1 });
|
||||
|
||||
// Check if this is standard paper format (A4 or US Letter)
|
||||
const aspectRatio = initialViewport.height / initialViewport.width;
|
||||
|
||||
// Common paper format ratios
|
||||
const a4PortraitRatio = 1.414; // 297mm / 210mm
|
||||
const a4LandscapeRatio = 0.707; // 210mm / 297mm
|
||||
const letterPortraitRatio = 1.294; // 11" / 8.5"
|
||||
const letterLandscapeRatio = 0.773; // 8.5" / 11"
|
||||
|
||||
// Check for standard formats with 5% tolerance
|
||||
const tolerance = 0.05;
|
||||
const isA4Portrait = Math.abs(aspectRatio - a4PortraitRatio) < (a4PortraitRatio * tolerance);
|
||||
const isA4Landscape = Math.abs(aspectRatio - a4LandscapeRatio) < (a4LandscapeRatio * tolerance);
|
||||
const isLetterPortrait = Math.abs(aspectRatio - letterPortraitRatio) < (letterPortraitRatio * tolerance);
|
||||
const isLetterLandscape = Math.abs(aspectRatio - letterLandscapeRatio) < (letterLandscapeRatio * tolerance);
|
||||
|
||||
// Consider it standard format if it matches A4 or US Letter
|
||||
this.isA4Format = isA4Portrait || isA4Landscape || isLetterPortrait || isLetterLandscape;
|
||||
|
||||
// Debug logging
|
||||
console.log(`PDF aspect ratio: ${aspectRatio.toFixed(3)}, standard format: ${this.isA4Format}`)
|
||||
|
||||
// Adjust available size for non-A4 documents (account for padding)
|
||||
const adjustedWidth = this.isA4Format ? availableWidth : availableWidth - 24;
|
||||
const adjustedHeight = this.isA4Format ? availableHeight : availableHeight - 24;
|
||||
|
||||
const scaleX = adjustedWidth > 0 ? adjustedWidth / initialViewport.width : 0;
|
||||
const scaleY = adjustedHeight > 0 ? adjustedHeight / initialViewport.height : 0;
|
||||
// Increase scale by 2x for sharper rendering, but limit to 3.0 max
|
||||
const baseScale = Math.min(scaleX || 0.5, scaleY || scaleX || 0.5);
|
||||
const renderScale = Math.min(baseScale * 2, 3.0);
|
||||
|
||||
if (!Number.isFinite(renderScale) || renderScale <= 0) {
|
||||
page.cleanup?.();
|
||||
return;
|
||||
}
|
||||
|
||||
const viewport = page.getViewport({ scale: renderScale });
|
||||
|
||||
// Acquire canvas from pool
|
||||
const pooledCanvas = CanvasPool.acquire(viewport.width, viewport.height);
|
||||
this.canvases.push(pooledCanvas);
|
||||
|
||||
// Render to pooled canvas first
|
||||
const renderContext = {
|
||||
canvasContext: pooledCanvas.ctx,
|
||||
viewport: viewport,
|
||||
};
|
||||
|
||||
await page.render(renderContext).promise;
|
||||
|
||||
// Transfer to display canvas
|
||||
// Set actual canvas resolution for sharpness
|
||||
canvas.width = viewport.width;
|
||||
canvas.height = viewport.height;
|
||||
|
||||
// Scale down display size to fit the container while keeping high resolution
|
||||
// For A4, fill the container; for non-A4, respect padding
|
||||
const displayWidth = adjustedWidth;
|
||||
const displayHeight = (viewport.height / viewport.width) * adjustedWidth;
|
||||
|
||||
// If it fits height-wise better, scale by height instead
|
||||
if (displayHeight > adjustedHeight) {
|
||||
const altDisplayHeight = adjustedHeight;
|
||||
const altDisplayWidth = (viewport.width / viewport.height) * adjustedHeight;
|
||||
canvas.style.width = `${altDisplayWidth}px`;
|
||||
canvas.style.height = `${altDisplayHeight}px`;
|
||||
} else {
|
||||
canvas.style.width = `${displayWidth}px`;
|
||||
canvas.style.height = `${displayHeight}px`;
|
||||
}
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (ctx) {
|
||||
// Enable image smoothing for better quality
|
||||
ctx.imageSmoothingEnabled = true;
|
||||
ctx.imageSmoothingQuality = 'high';
|
||||
ctx.drawImage(pooledCanvas.canvas, 0, 0);
|
||||
}
|
||||
|
||||
// Release page to free memory
|
||||
page.cleanup();
|
||||
} catch (error) {
|
||||
console.error(`Failed to render page ${this.currentPreviewPage}:`, error);
|
||||
}
|
||||
}
|
||||
|
||||
private clearCanvases() {
|
||||
// Release pooled canvases
|
||||
for (const pooledCanvas of this.canvases) {
|
||||
CanvasPool.release(pooledCanvas);
|
||||
}
|
||||
this.canvases = [];
|
||||
}
|
||||
|
||||
private cleanup() {
|
||||
this.clearCanvases();
|
||||
|
||||
if (this.pdfDocument) {
|
||||
PdfManager.releaseDocument(this.loadedPdfUrl ?? this.pdfUrl);
|
||||
this.pdfDocument = null;
|
||||
}
|
||||
|
||||
this.renderPagesQueued = false;
|
||||
|
||||
this.pageCount = 0;
|
||||
this.currentPreviewPage = 1;
|
||||
this.isHovering = false;
|
||||
this.isA4Format = true;
|
||||
this.previewContainer = null;
|
||||
this.stackElement = null;
|
||||
this.loadedPdfUrl = null;
|
||||
this.rendered = false;
|
||||
this.loading = false;
|
||||
this.error = false;
|
||||
}
|
||||
|
||||
private handleClick() {
|
||||
if (!this.clickable) return;
|
||||
|
||||
// Dispatch custom event for parent to handle
|
||||
this.dispatchEvent(new CustomEvent('pdf-preview-click', {
|
||||
detail: {
|
||||
pdfUrl: this.pdfUrl,
|
||||
pageCount: this.pageCount,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
|
||||
public async updated(changedProperties: Map<PropertyKey, unknown>) {
|
||||
super.updated(changedProperties);
|
||||
|
||||
if (changedProperties.has('pdfUrl') && this.pdfUrl) {
|
||||
const previousUrl = changedProperties.get('pdfUrl') as string | undefined;
|
||||
if (previousUrl) {
|
||||
PdfManager.releaseDocument(previousUrl);
|
||||
}
|
||||
this.cleanup();
|
||||
this.rendered = false;
|
||||
this.currentPreviewPage = 1;
|
||||
|
||||
// Check if in viewport and render if so
|
||||
if (this.observer) {
|
||||
const rect = this.getBoundingClientRect();
|
||||
if (rect.top < window.innerHeight && rect.bottom > 0) {
|
||||
this.loadAndRenderPreview();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (changedProperties.has('currentPreviewPage') && this.rendered) {
|
||||
await this.scheduleRenderPages();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Provide context menu items for right-click functionality
|
||||
*/
|
||||
public getContextMenuItems() {
|
||||
const items: any[] = [];
|
||||
|
||||
// If clickable, add option to view the PDF
|
||||
if (this.clickable) {
|
||||
items.push({
|
||||
name: 'View PDF',
|
||||
iconName: 'lucide:Eye',
|
||||
action: async () => {
|
||||
this.handleClick();
|
||||
}
|
||||
});
|
||||
items.push({ divider: true });
|
||||
}
|
||||
|
||||
items.push(
|
||||
{
|
||||
name: 'Open PDF in New Tab',
|
||||
iconName: 'lucide:ExternalLink',
|
||||
action: async () => {
|
||||
window.open(this.pdfUrl, '_blank');
|
||||
}
|
||||
},
|
||||
{ divider: true },
|
||||
{
|
||||
name: 'Copy PDF URL',
|
||||
iconName: 'lucide:Copy',
|
||||
action: async () => {
|
||||
await navigator.clipboard.writeText(this.pdfUrl);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Download PDF',
|
||||
iconName: 'lucide:Download',
|
||||
action: async () => {
|
||||
const link = document.createElement('a');
|
||||
link.href = this.pdfUrl;
|
||||
link.download = this.pdfUrl.split('/').pop() || 'document.pdf';
|
||||
link.click();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Add page count info as a disabled item
|
||||
if (this.pageCount > 0) {
|
||||
items.push(
|
||||
{ divider: true },
|
||||
{
|
||||
name: `${this.pageCount} page${this.pageCount > 1 ? 's' : ''}`,
|
||||
iconName: 'lucide:FileText',
|
||||
disabled: true,
|
||||
action: async () => {}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
return items;
|
||||
}
|
||||
|
||||
private cacheElements() {
|
||||
if (!this.previewContainer) {
|
||||
this.previewContainer = this.shadowRoot?.querySelector('.preview-container') as HTMLElement;
|
||||
}
|
||||
if (!this.stackElement) {
|
||||
this.stackElement = this.shadowRoot?.querySelector('.preview-stack') as HTMLElement;
|
||||
}
|
||||
}
|
||||
|
||||
private setupResizeObserver() {
|
||||
if (!this.previewContainer || this.resizeObserver) return;
|
||||
|
||||
this.resizeObserver = new ResizeObserver(() => {
|
||||
if (this.rendered && this.pdfDocument && !this.loading) {
|
||||
void this.scheduleRenderPages();
|
||||
}
|
||||
});
|
||||
|
||||
this.resizeObserver.observe(this);
|
||||
}
|
||||
|
||||
private getAvailableSize() {
|
||||
if (!this.stackElement) {
|
||||
// Try to get the stack element if it's not cached
|
||||
this.stackElement = this.shadowRoot?.querySelector('.preview-stack') as HTMLElement;
|
||||
}
|
||||
|
||||
if (!this.stackElement) {
|
||||
// Fallback to default size if element not found
|
||||
return {
|
||||
availableWidth: 200, // Full container width
|
||||
availableHeight: 260, // Full container height
|
||||
};
|
||||
}
|
||||
|
||||
const rect = this.stackElement.getBoundingClientRect();
|
||||
const availableWidth = Math.max(rect.width, 0) || 200;
|
||||
const availableHeight = Math.max(rect.height, 0) || 260;
|
||||
|
||||
return { availableWidth, availableHeight };
|
||||
}
|
||||
}
|
||||
189
ts_web/elements/00group-pdf/dees-pdf-preview/demo.ts
Normal file
189
ts_web/elements/00group-pdf/dees-pdf-preview/demo.ts
Normal file
@@ -0,0 +1,189 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
|
||||
export const demo = () => {
|
||||
const samplePdfs = [
|
||||
'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf',
|
||||
'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
|
||||
];
|
||||
|
||||
const generateGridItems = (count: number) => {
|
||||
const items = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
const pdfUrl = samplePdfs[i % samplePdfs.length];
|
||||
items.push(html`
|
||||
<dees-pdf-preview
|
||||
pdfUrl="${pdfUrl}"
|
||||
maxPages="3"
|
||||
stackOffset="6"
|
||||
clickable="true"
|
||||
grid-mode
|
||||
@pdf-preview-click=${(e: CustomEvent) => {
|
||||
console.log('PDF Preview clicked:', e.detail);
|
||||
alert(`PDF clicked: ${e.detail.pageCount} pages`);
|
||||
}}
|
||||
></dees-pdf-preview>
|
||||
`);
|
||||
}
|
||||
return items;
|
||||
};
|
||||
|
||||
return html`
|
||||
<style>
|
||||
.demo-container {
|
||||
padding: 40px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.preview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.preview-row {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.preview-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.performance-stats {
|
||||
margin-top: 20px;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-section">
|
||||
<h3>Single PDF Preview with Stacked Pages</h3>
|
||||
<dees-pdf-preview
|
||||
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
||||
maxPages="3"
|
||||
stackOffset="8"
|
||||
clickable="true"
|
||||
></dees-pdf-preview>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>Different Sizes</h3>
|
||||
<div class="preview-row">
|
||||
<div class="preview-label">Small:</div>
|
||||
<dees-pdf-preview
|
||||
size="small"
|
||||
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
|
||||
maxPages="2"
|
||||
stackOffset="6"
|
||||
clickable="true"
|
||||
></dees-pdf-preview>
|
||||
</div>
|
||||
|
||||
<div class="preview-row">
|
||||
<div class="preview-label">Default:</div>
|
||||
<dees-pdf-preview
|
||||
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
|
||||
maxPages="3"
|
||||
stackOffset="8"
|
||||
clickable="true"
|
||||
></dees-pdf-preview>
|
||||
</div>
|
||||
|
||||
<div class="preview-row">
|
||||
<div class="preview-label">Large:</div>
|
||||
<dees-pdf-preview
|
||||
size="large"
|
||||
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
|
||||
maxPages="4"
|
||||
stackOffset="10"
|
||||
clickable="true"
|
||||
></dees-pdf-preview>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>Non-Clickable Preview</h3>
|
||||
<dees-pdf-preview
|
||||
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
|
||||
maxPages="3"
|
||||
stackOffset="8"
|
||||
clickable="false"
|
||||
></dees-pdf-preview>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>Performance Grid - 50 PDFs with Lazy Loading</h3>
|
||||
<p style="margin-bottom: 20px; font-size: 14px; color: #666;">
|
||||
This grid demonstrates the performance optimizations with 50 PDF previews.
|
||||
Scroll to see lazy loading in action - previews render only when visible.
|
||||
</p>
|
||||
|
||||
<div class="preview-grid">
|
||||
${generateGridItems(50)}
|
||||
</div>
|
||||
|
||||
<div class="performance-stats">
|
||||
<h4>Performance Features</h4>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Lazy Loading</span>
|
||||
<span class="stat-value">✓ Enabled</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Canvas Pooling</span>
|
||||
<span class="stat-value">✓ Active</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Memory Management</span>
|
||||
<span class="stat-value">✓ Optimized</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Intersection Observer</span>
|
||||
<span class="stat-value">200px margin</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
1
ts_web/elements/00group-pdf/dees-pdf-preview/index.ts
Normal file
1
ts_web/elements/00group-pdf/dees-pdf-preview/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './component.js';
|
||||
223
ts_web/elements/00group-pdf/dees-pdf-preview/styles.ts
Normal file
223
ts_web/elements/00group-pdf/dees-pdf-preview/styles.ts
Normal file
@@ -0,0 +1,223 @@
|
||||
import { css, cssManager } from '@design.estate/dees-element';
|
||||
|
||||
export const previewStyles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 260px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(215 20% 14%)')};
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
box-shadow: 0 1px 3px ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(0, 0, 0, 0.24)')};
|
||||
}
|
||||
|
||||
.preview-container.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.preview-container.clickable:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(0, 0, 0, 0.3)')};
|
||||
}
|
||||
|
||||
.preview-container.clickable:hover .preview-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.preview-stack {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-stack.non-a4 {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.preview-canvas {
|
||||
position: relative;
|
||||
background: white;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
image-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
box-shadow: 0 1px 3px ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.3)')};
|
||||
}
|
||||
|
||||
.non-a4 .preview-canvas {
|
||||
border: 1px solid ${cssManager.bdTheme('hsl(214 31% 92%)', 'hsl(217 25% 24%)')};
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.preview-info {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
padding: 6px 10px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.92)', 'hsl(215 20% 12% / 0.92)')};
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.preview-info dees-icon {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
|
||||
}
|
||||
|
||||
.preview-pages {
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.preview-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(0, 0, 0, 0.8)')};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.preview-overlay dees-icon {
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.preview-overlay span {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.preview-loading,
|
||||
.preview-error {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
|
||||
}
|
||||
|
||||
.preview-loading {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(215 20% 14%)')};
|
||||
}
|
||||
|
||||
.preview-error {
|
||||
background: ${cssManager.bdTheme('hsl(0 72% 98%)', 'hsl(0 62% 20%)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 72% 40%)', 'hsl(0 70% 68%)')};
|
||||
}
|
||||
|
||||
.preview-spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 25% 28%)')};
|
||||
border-top-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.preview-text {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.preview-error dees-icon {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.preview-page-indicator {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
padding: 5px 8px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.7)', 'hsl(0 0% 100% / 0.9)')};
|
||||
color: ${cssManager.bdTheme('white', 'hsl(215 20% 12%)')};
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(12px);
|
||||
z-index: 15;
|
||||
pointer-events: none;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive sizes */
|
||||
:host([size="small"]) .preview-container {
|
||||
width: 150px;
|
||||
height: 195px;
|
||||
}
|
||||
|
||||
:host([size="large"]) .preview-container {
|
||||
width: 250px;
|
||||
height: 325px;
|
||||
}
|
||||
|
||||
/* Grid optimizations */
|
||||
:host([grid-mode]) .preview-container {
|
||||
will-change: auto;
|
||||
}
|
||||
|
||||
:host([grid-mode]) .preview-canvas {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
`,
|
||||
];
|
||||
Reference in New Issue
Block a user