Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Development: Decompose PDF Preview components #9592

Merged
merged 155 commits into from
Nov 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
155 commits
Select commit Hold shift + click to select a range
76e86e1
Open a PDF Preview page for every attachment file
eceeeren Jul 7, 2024
d96f276
Add breadcrumb & show pdf file preview as images
eceeeren Jul 7, 2024
8077b0d
Render files with PDFJS
eceeeren Jul 13, 2024
5ef93eb
Enlarge PDF page content
eceeeren Jul 15, 2024
e36d0aa
Show page numbers when hovered
eceeeren Jul 15, 2024
d88a85b
Clean up the code & styling
eceeeren Jul 15, 2024
56a3abe
Add PDF Preview to correct routing
eceeeren Jul 15, 2024
f691d00
Close PDF preview when clicked outside
eceeeren Jul 21, 2024
5df2075
Add arrows to change pages
eceeeren Jul 21, 2024
6bb13fb
Add functionality to the arrows
eceeeren Jul 21, 2024
bbdd4c2
Add page indicator
eceeeren Jul 21, 2024
ebe6d04
Add JSDoc comments
eceeeren Jul 23, 2024
2bd8316
Translation & colors
eceeeren Jul 23, 2024
e415509
Git merge 'develop' into 'feature/course/attachment-pdf-preview'
eceeeren Jul 24, 2024
48018aa
Install pdf.js
eceeeren Jul 24, 2024
0de1150
Fix build error
eceeeren Jul 24, 2024
c9d9c29
Change file path
eceeeren Jul 24, 2024
9f612e7
Update getAttachmentFile method
eceeeren Jul 24, 2024
2def08c
Update PDF Preview button & add it to Lecture Units
eceeeren Jul 24, 2024
8ed16f6
Fix linting errors
eceeeren Jul 27, 2024
66e4bc4
Merge 'develop' into 'feature/course/attachment-pdf-preview'
eceeeren Jul 27, 2024
a0871fc
Take back unnecessary changes
eceeeren Jul 27, 2024
6f09ccb
Add mapping comment
eceeeren Jul 27, 2024
966fe50
Fix error handling
eceeeren Jul 29, 2024
7fdf2f4
Client tests are added
eceeeren Jul 29, 2024
bee424e
Fix failing server test
eceeeren Jul 29, 2024
60d8414
Merge branch 'develop' into feature/course/attachment-pdf-preview
eceeeren Jul 29, 2024
38ce818
Fix typos
eceeeren Jul 29, 2024
8bd6db7
Fix alertService problem
eceeeren Aug 3, 2024
be23c0d
Fix PDF.js worker initialization
eceeeren Aug 4, 2024
52bf703
Fix responsivity of enlarged view
eceeeren Aug 4, 2024
1b3d900
Git merge 'develop' into feature/course/attachment-pdf-preview
eceeeren Aug 5, 2024
9f7efab
Fix enlarged view position
eceeeren Aug 5, 2024
175af72
Small fixes
eceeeren Aug 7, 2024
8b0d54e
Fix failing client tests
eceeeren Aug 7, 2024
e5d4110
Merge branch 'develop' into feature/course/attachment-pdf-preview
eceeeren Aug 7, 2024
39e8076
viewButtonAvailable check is updated
eceeeren Aug 7, 2024
b4c36b3
Merge remote-tracking branch 'origin/feature/course/attachment-pdf-pr…
eceeeren Aug 7, 2024
16e0cee
Fix LectureAttachments client tests
eceeeren Aug 7, 2024
7b80bd0
Add client tests for View Button
eceeeren Aug 7, 2024
4d14647
Fix FileSource method names
eceeeren Aug 7, 2024
47990e1
Worker tryout
eceeeren Aug 7, 2024
b16581f
Fix Mime Type error
eceeeren Aug 7, 2024
5fcfbfe
Fix PDF Worker
eceeeren Aug 7, 2024
493dba8
Fix MIME Type Error 2
eceeeren Aug 8, 2024
4800301
Fix MIME Type Error 3
eceeeren Aug 8, 2024
a37c978
Merge remote-tracking branch 'origin/feature/course/attachment-pdf-pr…
eceeeren Aug 8, 2024
b451431
Set fake worker back
eceeeren Aug 8, 2024
4d2d1c9
Fix undefined lecture id after saving the attachment
eceeeren Aug 9, 2024
3c54b06
Change get method permissions
eceeeren Aug 9, 2024
ec127b7
Merge branch 'develop' into feature/course/attachment-pdf-preview
eceeeren Aug 9, 2024
9a9dfd5
Resolved changes
eceeeren Aug 11, 2024
f63ac22
Merge remote-tracking branch 'origin/feature/course/attachment-pdf-pr…
eceeeren Aug 11, 2024
a2f8f88
Fix client tests
eceeeren Aug 11, 2024
eb9122f
Merge 'develop' into feature/course/attachment-pdf-preview
eceeeren Aug 11, 2024
984bcdf
Resolved changes 2
eceeeren Aug 14, 2024
5f9e0c7
Fix error text
eceeeren Aug 14, 2024
5d3e469
Merge 'develop' into feature/course/attachment-pdf-preview
eceeeren Aug 14, 2024
240e768
CodeRabbitAI changes
eceeeren Aug 14, 2024
63764d2
Confirmed changes
eceeeren Aug 18, 2024
1affbf6
Fix compilation errors
eceeeren Aug 18, 2024
60ea19f
Fix error handling & add new test cases
eceeeren Aug 18, 2024
4e24d1c
Mak adjustCanvasSize public
eceeeren Aug 18, 2024
24536b3
Fix client tests
eceeeren Aug 18, 2024
d9b47f1
Fix client tests 2
eceeeren Aug 18, 2024
2d5fa81
Merge 'develop' into feature/course/attachment-pdf-preview
eceeeren Aug 18, 2024
547be9a
Increase client test coverage, fix typos
eceeeren Aug 18, 2024
6c608b5
Fix test case typo
eceeeren Aug 18, 2024
4c0b38b
Resolved changes
eceeeren Aug 18, 2024
861a179
Add tests for closeIfOutside
eceeeren Aug 20, 2024
f5b48c8
Remove redundant type
eceeeren Aug 20, 2024
387c19b
Merge branch 'develop' into feature/course/attachment-pdf-preview
eceeeren Aug 20, 2024
c6978ac
Divide updateEnlargedCanvas into sub functions & increase client test…
eceeeren Aug 20, 2024
5c70fb9
Merge remote-tracking branch 'origin/feature/course/attachment-pdf-pr…
eceeeren Aug 20, 2024
f3683ad
Fix client test
eceeeren Aug 21, 2024
8889a51
Add client tests to AttachmentService and AttachmentUnitService
eceeeren Aug 22, 2024
2fba2b3
Approved changes
eceeeren Aug 22, 2024
4014e51
Fix client tests
eceeeren Aug 22, 2024
a0babdb
Increase client test coverage
eceeeren Aug 24, 2024
5ed8d67
Add server tests for the endpoints
eceeeren Aug 26, 2024
6177c2f
Merge 'develop' into feature/course/attachment-pdf-preview
eceeeren Aug 26, 2024
4e0fba6
Fix client test
eceeeren Aug 26, 2024
f37e105
Add ArtemisSharedModule to PDFPreviewComponent for the translation fe…
eceeeren Aug 28, 2024
111b022
Add TranslationService to the client tests
eceeeren Aug 28, 2024
5191d7c
Add checkboxes and delete button
eceeeren Sep 1, 2024
445c209
Add merge file button
eceeeren Sep 1, 2024
00071db
Fix display enlarged canvas view
eceeeren Sep 1, 2024
ddac253
Update delete & append buttons
eceeeren Sep 7, 2024
cab10d5
Merge 'develop' into feature/course/attachment-pdf-editing
eceeeren Sep 7, 2024
eb163bd
Update page IDs upon delete & merge pdf
eceeeren Sep 8, 2024
34b716f
Clean up the code and update JSDoc
eceeeren Sep 8, 2024
7deeb4a
Save & cancel buttons are added and styling is fixed
eceeeren Sep 8, 2024
725ff4f
Generate PDF from the changed structure
eceeeren Sep 8, 2024
472b0e1
Updating capability on Save
eceeeren Sep 8, 2024
d13db53
Fix view button styling
eceeeren Sep 8, 2024
1748887
Update Cancel button
eceeeren Sep 8, 2024
f2861c3
Update translations
eceeeren Sep 12, 2024
324e812
Fix client tests based on changes
eceeeren Sep 12, 2024
926f75a
Add client tests
eceeeren Sep 12, 2024
09468ae
Merge 'develop' into feature/course/attachment-pdf-editing
eceeeren Sep 12, 2024
6099d70
Add fixes for edge cases
eceeeren Sep 15, 2024
ce822f4
Add Fabric to reduce PDF size
eceeeren Sep 15, 2024
f4d30fb
Change pdf editing method to pdf-lib
eceeeren Sep 29, 2024
e140552
RabbitAI changes
eceeeren Sep 29, 2024
356d45a
Add translations
eceeeren Sep 29, 2024
92fb4ea
Fix client tests
eceeeren Sep 30, 2024
2aac23f
Increase client test coverage
eceeeren Sep 30, 2024
82a7634
RabbitAI changes
eceeeren Sep 30, 2024
6f64794
Merge 'develop' into feature/course/attachment-pdf-editing
eceeeren Sep 30, 2024
5b10143
Update delete pages question
eceeeren Oct 3, 2024
dc3e974
Change Append File to Append PDF
eceeeren Oct 3, 2024
0ac2434
Return to previous page after saving
eceeeren Oct 4, 2024
8de6f31
Delete attachment when all pages are deleted
eceeeren Oct 4, 2024
94ee2af
Disable Save if file is not changed
eceeeren Oct 4, 2024
188d9ed
Lazy load PDF Preview Component
eceeeren Oct 15, 2024
a94855a
Merge 'develop' into feature/course/attachment-pdf-editing
eceeeren Oct 15, 2024
aeaabfd
Fix client tests & RabbitAI changes
eceeeren Oct 15, 2024
8f514b5
Adjust PDF container size for vertical PDFs
eceeeren Oct 15, 2024
0112516
Adjust PDF container size dynamically
eceeeren Oct 15, 2024
78877f6
Adjust PDF container size dynamically -bug fix
eceeeren Oct 17, 2024
525f51f
Fix client test
eceeeren Oct 17, 2024
6f7524e
Merge branch 'develop' into feature/course/attachment-pdf-editing
eceeeren Oct 17, 2024
156d966
Update src/main/webapp/i18n/de/lecture.json
eceeeren Oct 17, 2024
5c12f1b
Fix translation
eceeeren Oct 18, 2024
3f5c6d2
Merge remote-tracking branch 'origin/feature/course/attachment-pdf-ed…
eceeeren Oct 18, 2024
675dfb7
Merge branch 'develop' into feature/course/attachment-pdf-editing
eceeeren Oct 18, 2024
102fb06
Merge 'develop' into feature/course/attachment-pdf-editing
eceeeren Oct 20, 2024
ed1300e
Update the code based on new Angular notations
eceeeren Oct 20, 2024
9cb3a82
Fix client tests
eceeeren Oct 20, 2024
b63f49c
Bug fix
eceeeren Oct 20, 2024
40a1320
Add required viewChilds
eceeeren Oct 21, 2024
989e014
Fix ! notations
eceeeren Oct 21, 2024
024fc4f
Create PDFPreviewThumbnailGrid and PDFPreviewEnlargedCanvas component…
eceeeren Oct 25, 2024
b247d44
Fix delete, merge and enlargedCanvas
eceeeren Oct 27, 2024
1681230
Fix page navigation and close
eceeeren Oct 27, 2024
1238d4a
Fix append file & remove redundant parts
eceeeren Oct 27, 2024
7aba007
Create decomposition tests
eceeeren Oct 28, 2024
02d1407
Bug fix with deep copy
eceeeren Oct 29, 2024
96d1434
Merge 'develop' into feature/course/attachment-pdf-editing
eceeeren Nov 2, 2024
814079f
Add loading spinner for enlarged canvas
eceeeren Nov 2, 2024
ad9e849
Merge branch 'feature/course/attachment-pdf-editing' into feature/lec…
eceeeren Nov 2, 2024
f1bfb5f
Fix client test
eceeeren Nov 2, 2024
bcb2ab6
Remove redundant canvas positioning
eceeeren Nov 2, 2024
0b5d7ca
Client test clean up
eceeeren Nov 2, 2024
57ddcd3
Add button checks
eceeeren Nov 2, 2024
4f87cb3
Revert "Remove redundant canvas positioning"
eceeeren Nov 3, 2024
a7a8566
Lectures: Fix undefined course issue in lecture attachments (#9601)
eceeeren Nov 3, 2024
bcb89be
Remove redundant positioning & styling
eceeeren Nov 3, 2024
a024b2d
Merge 'feature/lectures/attachment-pdf-editing' into feature/lectures…
eceeeren Nov 3, 2024
4663776
Merge 'develop' into feature/lectures/attachment-pdf-editing
eceeeren Nov 3, 2024
96ecb0f
Merge branch 'feature/course/attachment-pdf-editing' into feature/lec…
eceeeren Nov 4, 2024
9ad8e54
Add empty pdf container & disable merge pdf in the beginning
eceeeren Nov 10, 2024
d0f39e9
Merge 'develop' into feature/lectures/pdf-preview-decomposition
eceeeren Nov 10, 2024
acba466
CodeRabbitAI changes
eceeeren Nov 10, 2024
9d14990
Merge branch 'develop' into feature/lectures/pdf-preview-decomposition
FelixTJDietrich Nov 29, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<div #enlargedContainer class="enlarged-container" (click)="closeIfOutside($event)">
@if (isEnlargedCanvasLoading()) {
<div class="d-flex justify-content-center position-absolute">
<div class="spinner-border" role="status">
<span class="sr-only" jhiTranslate="loading"></span>
</div>
</div>
}
<canvas #enlargedCanvas></canvas>
<button class="btn btn-close" (click)="closeEnlargedView($event)"></button>
eceeeren marked this conversation as resolved.
Show resolved Hide resolved
@if (currentPage() !== 1) {
<button class="btn btn-secondary nav-button left" (click)="handleNavigation('prev', $event)" aria-label="Previous page">←</button>
}
@if (currentPage() !== totalPages()) {
<button class="btn btn-secondary nav-button right" (click)="handleNavigation('next', $event)" aria-label="Next page">→</button>
}
<div class="page-number-display">{{ currentPage() }}</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
.enlarged-container {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--pdf-preview-enlarged-container-overlay);
z-index: 5;

.btn-close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
color: var(--bs-body-color);
}
}

.nav-button {
position: absolute;
transform: translateY(-50%);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
z-index: 3;
}

.nav-button.left {
left: calc(5% + 10px);

@media (max-width: 1200px) {
left: 10px;
}
}

.nav-button.right {
right: calc(5% + 10px);

@media (max-width: 1200px) {
right: 10px;
}
}

.page-number-display {
position: absolute;
bottom: 10px;
right: calc(5% + 10px);
font-size: 18px;
color: var(--bs-body-color);
z-index: 2;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

@media (max-width: 1200px) {
right: 10px;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
import { Component, ElementRef, HostListener, effect, input, output, signal, viewChild } from '@angular/core';
import { ArtemisSharedModule } from 'app/shared/shared.module';

type NavigationDirection = 'next' | 'prev';

@Component({
selector: 'jhi-pdf-preview-enlarged-canvas-component',
templateUrl: './pdf-preview-enlarged-canvas.component.html',
styleUrls: ['./pdf-preview-enlarged-canvas.component.scss'],
standalone: true,
imports: [ArtemisSharedModule],
})
export class PdfPreviewEnlargedCanvasComponent {
enlargedContainer = viewChild.required<ElementRef<HTMLDivElement>>('enlargedContainer');
enlargedCanvas = viewChild.required<ElementRef<HTMLCanvasElement>>('enlargedCanvas');

readonly DEFAULT_ENLARGED_SLIDE_HEIGHT = 800;

// Inputs
pdfContainer = input.required<HTMLDivElement>();
originalCanvas = input<HTMLCanvasElement>();
totalPages = input<number>(0);

// Signals
currentPage = signal<number>(1);
isEnlargedCanvasLoading = signal<boolean>(false);

//Outputs
isEnlargedViewOutput = output<boolean>();

constructor() {
effect(
() => {
this.enlargedContainer().nativeElement.style.top = `${this.pdfContainer().scrollTop}px`;
this.displayEnlargedCanvas(this.originalCanvas()!);
},
{ allowSignalWrites: true },
);
}
eceeeren marked this conversation as resolved.
Show resolved Hide resolved

/**
* Handles navigation within the PDF viewer using keyboard arrow keys.
* @param event - The keyboard event captured for navigation.
*/
@HostListener('document:keydown', ['$event'])
handleKeyboardEvents(event: KeyboardEvent) {
if (event.key === 'ArrowRight' && this.currentPage() < this.totalPages()) {
this.navigatePages('next');
} else if (event.key === 'ArrowLeft' && this.currentPage() > 1) {
this.navigatePages('prev');
}
}

/**
* Adjusts the canvas size based on the window resize event to ensure proper display.
*/
@HostListener('window:resize')
resizeCanvasBasedOnContainer() {
this.adjustCanvasSize();
}

/**
* Dynamically updates the canvas size within an enlarged view based on the viewport.
*/
adjustCanvasSize = () => {
const canvasElements = this.pdfContainer().querySelectorAll('.pdf-canvas-container canvas');
if (this.currentPage() - 1 < canvasElements.length) {
const canvas = canvasElements[this.currentPage() - 1] as HTMLCanvasElement;
this.updateEnlargedCanvas(canvas);
}
};

displayEnlargedCanvas(originalCanvas: HTMLCanvasElement) {
this.isEnlargedCanvasLoading.set(true);
this.currentPage.set(Number(originalCanvas.id));
this.toggleBodyScroll(true);
setTimeout(() => {
this.updateEnlargedCanvas(originalCanvas);
}, 500);
}
eceeeren marked this conversation as resolved.
Show resolved Hide resolved

/**
* Updates the enlarged canvas dimensions to optimize PDF page display within the current viewport.
* This method dynamically adjusts the size, position, and scale of the canvas to maintain the aspect ratio,
* ensuring the content is centered and displayed appropriately within the available space.
* It is called within an animation frame to synchronize updates with the browser's render cycle for smooth visuals.
*
* @param originalCanvas - The source canvas element used to extract image data for resizing and redrawing.
*/
updateEnlargedCanvas(originalCanvas: HTMLCanvasElement) {
requestAnimationFrame(() => {
const isVertical = originalCanvas.height > originalCanvas.width;
this.adjustPdfContainerSize(isVertical);

const scaleFactor = this.calculateScaleFactor(originalCanvas);
this.resizeCanvas(originalCanvas, scaleFactor);
this.redrawCanvas(originalCanvas);
this.isEnlargedCanvasLoading.set(false);
});
}

/**
* Calculates the scaling factor to adjust the canvas size based on the dimensions of the container.
* This method ensures that the canvas is scaled to fit within the container without altering the aspect ratio.
*
* @param originalCanvas - The original canvas element representing the PDF page.
* @returns The scaling factor used to resize the original canvas to fit within the container dimensions.
*/
calculateScaleFactor(originalCanvas: HTMLCanvasElement): number {
const containerWidth = this.pdfContainer().clientWidth;
const containerHeight = this.pdfContainer().clientHeight;

let scaleX, scaleY;

if (originalCanvas.height > originalCanvas.width) {
// Vertical slide
const fixedHeight = this.DEFAULT_ENLARGED_SLIDE_HEIGHT;
scaleY = fixedHeight / originalCanvas.height;
scaleX = containerWidth / originalCanvas.width;
} else {
// Horizontal slide
scaleX = containerWidth / originalCanvas.width;
scaleY = containerHeight / originalCanvas.height;
}

return Math.min(scaleX, scaleY);
}

/**
* Resizes the canvas according to the computed scale factor.
* This method updates the dimensions of the enlarged canvas element to ensure that the entire PDF page
* is visible and properly scaled within the viewer.
*
* @param originalCanvas - The canvas element from which the image is scaled.
* @param scaleFactor - The factor by which the canvas is resized.
*/
resizeCanvas(originalCanvas: HTMLCanvasElement, scaleFactor: number): void {
const enlargedCanvas = this.enlargedCanvas().nativeElement;
enlargedCanvas.width = originalCanvas.width * scaleFactor;
enlargedCanvas.height = originalCanvas.height * scaleFactor;
}

/**
* Redraws the original canvas content onto the enlarged canvas at the updated scale.
* This method ensures that the image is rendered clearly and correctly positioned on the enlarged canvas.
*
* @param originalCanvas - The original canvas containing the image to be redrawn.
*/
redrawCanvas(originalCanvas: HTMLCanvasElement): void {
const enlargedCanvas = this.enlargedCanvas().nativeElement;
const context = enlargedCanvas.getContext('2d');
context!.clearRect(0, 0, enlargedCanvas.width, enlargedCanvas.height);
context!.drawImage(originalCanvas, 0, 0, enlargedCanvas.width, enlargedCanvas.height);
}
eceeeren marked this conversation as resolved.
Show resolved Hide resolved

/**
* Adjusts the size of the PDF container based on whether the enlarged view is active or not.
* If the enlarged view is active, the container's size is reduced to focus on the enlarged content.
* If the enlarged view is closed, the container returns to its original size.
*
* @param isVertical A boolean flag indicating whether to enlarge or reset the container size.
*/
adjustPdfContainerSize(isVertical: boolean): void {
const pdfContainer = this.pdfContainer();
if (isVertical) {
pdfContainer.style.height = `${this.DEFAULT_ENLARGED_SLIDE_HEIGHT}px`;
} else {
pdfContainer.style.height = '60vh';
}
}

/**
* Toggles the ability to scroll through the PDF container.
* @param disable A boolean flag indicating whether scrolling should be disabled (`true`) or enabled (`false`).
*/
toggleBodyScroll(disable: boolean): void {
this.pdfContainer().style.overflow = disable ? 'hidden' : 'auto';
}

/**
* Closes the enlarged view of the PDF and re-enables scrolling in the PDF container.
*/
closeEnlargedView(event: MouseEvent) {
this.isEnlargedViewOutput.emit(false);
this.adjustPdfContainerSize(false);
this.toggleBodyScroll(false);
event.stopPropagation();
}

/**
* Closes the enlarged view if a click event occurs outside the actual canvas area but within the enlarged container.
* @param event The mouse event captured, used to determine the location of the click.
*/
closeIfOutside(event: MouseEvent): void {
const target = event.target as HTMLElement;
const enlargedCanvas = this.enlargedCanvas().nativeElement;

if (target.classList.contains('enlarged-container') && target !== enlargedCanvas) {
this.closeEnlargedView(event);
}
eceeeren marked this conversation as resolved.
Show resolved Hide resolved
}

/**
* Handles navigation between PDF pages and stops event propagation to prevent unwanted side effects.
* @param direction The direction to navigate.
* @param event The MouseEvent to be stopped.
*/
handleNavigation(direction: NavigationDirection, event: MouseEvent): void {
event.stopPropagation();
this.navigatePages(direction);
}

/**
* Navigates to a specific page in the PDF based on the direction relative to the current page.
* @param direction The navigation direction (next or previous).
*/
navigatePages(direction: NavigationDirection) {
const nextPageIndex = direction === 'next' ? this.currentPage() + 1 : this.currentPage() - 1;
if (nextPageIndex > 0 && nextPageIndex <= this.totalPages()) {
this.currentPage.set(nextPageIndex);
const canvas = this.pdfContainer().querySelectorAll('.pdf-canvas-container canvas')[this.currentPage() - 1] as HTMLCanvasElement;
this.updateEnlargedCanvas(canvas);
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<div class="pdf-container" #pdfContainer>
@if (isEnlargedView()) {
<jhi-pdf-preview-enlarged-canvas-component
class="enlarged-canvas"
[pdfContainer]="pdfContainer"
[totalPages]="totalPages()"
[originalCanvas]="originalCanvas()"
(isEnlargedViewOutput)="isEnlargedView.set($event)"
/>
}
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.pdf-container {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 10px;
height: 60vh;
overflow-y: auto;
border: 1px solid var(--border-color);
padding: 10px;
margin: 10px 0;
width: 100%;
box-shadow: 0 2px 5px var(--pdf-preview-pdf-container-shadow);
z-index: 0;

@media (max-width: 800px) {
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

@media (max-width: 500px) {
grid-template-columns: 1fr;
}
}

.enlarged-canvas {
display: contents;
}
Loading
Loading