@syncfusion/ej2-pdfviewer
Version:
Essential JS 2 PDF viewer Component
673 lines (672 loc) • 25.9 kB
JavaScript
import { Browser, isNullOrUndefined } from '@syncfusion/ej2-base';
import { addSelectionRingStyle, applyElementStyles, clear, createOrganizeWindow, createOrganizeWindowForMobile, handleImageResizerVisibility, removeSelectionRingStyle, setPageOrganizerSettings, showOrganizeLoadingIndicator, switchPageOrganizer } from './organize-core/organize-initialization';
import { deletePageElement, isHoveredOnSelectedPages } from './organize-core/tile-interaction';
import { updateToolbarItemState } from './organize-core/organize-toolbar';
import { getImageZoomMax, getImageZoomMin, handleImageSizeBoundsChange, handlePageZoomChange, updateOrganizePageImageSize } from './organize-core/slider-zoomaction';
import { pageDragDrop } from './organize-core/organizepages-editor';
import { addOrganizeAction, redo, undo } from './organize-core/organize-undoredo';
import { getImageZoomValue, processRotation, rotateClockwise, rotateCounterclockwise, sorting } from './organize-core/organize-math-utils';
import { rotateAllPages } from './organize-core/organize-utils';
import { createRequestForPreview, getData, previewOnMessage, requestPreviewCreation, updatePreviewCollection } from './organize-core/organize-preview';
import { thumbnailMouseOver, tileImageRender } from './organize-core/organize-thumbnail';
import { autoScroll, handlePageMove } from './organize-core/organize-event-handler';
import { clonedCollection } from './organize-core/organize-undoredoutils';
import { importDocuments, loadImportDoc } from './organize-core/organize-importaction';
import { onSaveasClicked, onSaveClicked, updateOrganizePageActions } from './organize-core/organize-saveaction';
import { showHideExtractIcon, showRemoveExtractIcon } from './organize-core/organize-extract';
/**
* The `PageOrganizer` module is used to handle page organize operations of PDF viewer.
*
* @param {Event} event - The event triggering the page organization.
* @param {Object} args - Additional arguments for the page organization.
* @returns {void}
*/
var PageOrganizer = /** @class */ (function () {
/**
* @param {PdfViewer} pdfViewer - It describes about the pdfviewer
* @param {PdfViewerBase} pdfViewerBase - It describes about the pdfviewer base
* @private
*/
function PageOrganizer(pdfViewer, pdfViewerBase) {
var _this = this;
this.previewLimit = 5;
this.lastRequestedPageIndex = 0;
this.pageZoomSliderStep = 0.25;
/**
* @private
*/
this.dataDetails = [];
this.mobileContextMenu = [];
/**
* @private
*/
this.organizePagesCollection = [];
/**
* @private
*/
this.tempOrganizePagesCollection = [];
this.isSkipRevert = false;
this.isAllImagesReceived = false;
/**
* @private
*/
this.selectedPageIndexes = [];
/**
* @private
*/
this.autoScrollInterval = null;
/**
* @private
*/
this.gapBetweenDivs = 48;
this.previousImageZoom = 1;
/**
* @private
*/
this.isDocumentModified = false;
/**
* @private
*/
this.undoOrganizeCollection = [];
/**
* @private
*/
this.redoOrganizeCollection = [];
/**
* @private
*/
this.toolbarUndoRedoCollection = [];
this.isTouchEvent = false;
this.isPageZoomChanged = false;
this.isInitialLoading = true;
/**
* @private
*/
this.isOrganizeWindowOpen = false;
/**
* @private
*/
this.isPageZoomPopupOpen = false;
/**
* @private
*/
this.isExtractToolbarVisible = false;
/**
* @private
*/
this.deleteExtractValue = '';
/**
* @param {MouseEvent} event - It describes about the event
* @private
* @returns {void}
*/
this.thumbnailMouseOver = function (event) {
thumbnailMouseOver.call(_this, event);
};
/**
* @param {MouseEvent} event - It describes about the event
* @private
* @returns {void}
*/
this.thumbnailMouseLeave = function (event) {
if (event.currentTarget instanceof HTMLElement) {
// Convert HTMLCollection to an array
var childrenArray = Array.from(event.currentTarget.children);
// Iterate over the array
for (var _i = 0, childrenArray_1 = childrenArray; _i < childrenArray_1.length; _i++) {
var subchild = childrenArray_1[_i];
var childArray = Array.from(subchild.children);
for (var _a = 0, childArray_1 = childArray; _a < childArray_1.length; _a++) {
var child = childArray_1[_a];
// Exclude the image by checking its type
if (!(child.classList.contains('e-pv-image-container'))) {
if (event.currentTarget.classList.contains('e-pv-organize-node-selection-ring')) {
if (child.classList.contains('e-checkbox-wrapper')) {
child.style.display = 'block';
}
else {
child.style.display = 'none';
}
}
else {
// Set the display style property to "none" for other children
child.style.display = 'none';
}
}
}
}
}
};
/**
* @private
* @returns {void}
*/
this.undo = function () {
undo.call(_this);
};
/**
* @private
* @returns {void}
*/
this.redo = function () {
redo.call(_this);
};
this.pdfViewer = pdfViewer;
this.pdfViewerBase = pdfViewerBase;
this.setPageOrganizerSettings(this.pdfViewer.pageOrganizerSettings);
this.currentImageZoom = this.pdfViewer.pageOrganizerSettings.imageZoom;
this.currentPageZoomSliderValue = this.pdfViewer.pageOrganizerSettings.imageZoom;
this.previouslyRequestedImageZoom = Math.round(this.pdfViewer.pageOrganizerSettings.imageZoom);
}
/**
* @param {boolean} isReConstruct - It describes about the isReConstruct
* @private
* @returns {void}
*/
PageOrganizer.prototype.createOrganizeWindow = function (isReConstruct) {
createOrganizeWindow.call(this, isReConstruct);
};
/**
* @param {boolean} isReConstruct - Defines whether organizer window is reconstructed when closing
* @private
* @returns {void}
*/
PageOrganizer.prototype.createOrganizeWindowForMobile = function (isReConstruct) {
createOrganizeWindowForMobile.call(this, isReConstruct);
};
/**
* @private
* @param {PageOrganizerSettingsModel} pageOrganizerSettings - new page organizer settings object
* @param {oldpageOrganizerSettings} oldPageOrganizerSettings - old page organizer settings object
* @returns {void}
*/
PageOrganizer.prototype.setPageOrganizerSettings = function (pageOrganizerSettings, oldPageOrganizerSettings) {
setPageOrganizerSettings.call(this, pageOrganizerSettings, oldPageOrganizerSettings);
};
/**
* @private
* @param {string} property - new toolbar item in organize toolbar.
* @returns {void}
*/
PageOrganizer.prototype.updateToolbarItemState = function (property) {
updateToolbarItemState.call(this, property);
};
/**
* @private
* @returns {number} - number
*/
PageOrganizer.prototype.getImageZoomMin = function () {
return getImageZoomMin.call(this);
};
/**
* @private
* @returns {number} - number
*/
PageOrganizer.prototype.getImageZoomMax = function () {
return getImageZoomMax.call(this);
};
/**
* @private
* @returns {void}
*/
PageOrganizer.prototype.createRequestForPreview = function () {
return createRequestForPreview.call(this);
};
/**
* @private
* @param {PageOrganizer} proxy It describes about the page organizer
* @returns {void}
*/
PageOrganizer.prototype.requestPreviewCreation = function (proxy) {
requestPreviewCreation.call(this, proxy);
};
/**
* @param {any} data - It describes about the data
* @private
* @returns {void}
*/
PageOrganizer.prototype.updatePreviewCollection = function (data) {
updatePreviewCollection.call(this, data);
};
/**
* @param {any} event - It describes about the event
* @private
* @returns {void}
*/
PageOrganizer.prototype.previewOnMessage = function (event) {
previewOnMessage.call(this, event);
};
/**
* @param {any} data - It describes about the data
* @param {boolean} isClientRender - It describes about the isClientRender
* @private
* @returns {void}
*/
PageOrganizer.prototype.getData = function (data, isClientRender) {
return getData.call(this, data, isClientRender);
};
/**
* @param {any} event - It describes about the event
* @private
* @returns {void}
*/
PageOrganizer.prototype.pageDragDrop = function (event) {
pageDragDrop.call(this, event);
};
/**
* @private
* @param {any} a - a value
* @param {any} b - b value
* @returns {number} - number
*/
PageOrganizer.prototype.sorting = function (a, b) {
return sorting.call(this, a, b);
};
/**
* @param {number} pageIndex - It describes about the page index
* @param {number} subIndex - It describes about the sub index
* @param {number} pageOrder - It describes about the page order
* @param {HTMLElement} targetElement - It describes about the target element
* @param {boolean} isNewPage - It describes about the isNewPage
* @param {boolean} isBefore - It describes about the isBefore
* @param {boolean} isEmptyPage - It describes about the isEmptyPage
* @param {boolean} isImportedPage - It describes about the isImportedPage
* @param {string} documentName - It describes about the documentName
* @private
* @returns {void}
*/
PageOrganizer.prototype.tileImageRender = function (pageIndex, subIndex, pageOrder, targetElement, isNewPage, isBefore, isEmptyPage, isImportedPage, documentName) {
tileImageRender.call(this, pageIndex, subIndex, pageOrder, targetElement, isNewPage, isBefore, isEmptyPage, isImportedPage, documentName);
};
/**
* @param {DragEventArgs} e - It describes about the event
* @private
* @returns {void}
*/
PageOrganizer.prototype.autoScroll = function (e) {
autoScroll.call(this, e);
};
/**
* @param {DragEventArgs} e - It describes about the event
* @param {DOMRect} tileRect - It describes about rect
* @param {number} gapBetweenDivs - It describes about div gap
* @param {HTMLElement} outerBorder - It describes about border
* @private
* @returns {void}
*/
PageOrganizer.prototype.handlePageMove = function (e, tileRect, gapBetweenDivs, outerBorder) {
handlePageMove.call(this, e, tileRect, gapBetweenDivs, outerBorder);
};
/**
* @private
* @returns {void}
*/
PageOrganizer.prototype.addSelectionRingStyle = function () {
addSelectionRingStyle.call(this);
};
/**
* @private
* @returns {void}
*/
PageOrganizer.prototype.removeSelectionRingStyle = function () {
removeSelectionRingStyle.call(this);
};
/**
* @param {number[]} selectedPageIndexes - It describes about the selected page index
* @param {number} hoveredIndex - It describes about hovered index
* @private
* @returns {boolean} - Returns boolean value
*/
PageOrganizer.prototype.isHoveredOnSelectedPages = function (selectedPageIndexes, hoveredIndex) {
return isHoveredOnSelectedPages.call(this, selectedPageIndexes, hoveredIndex);
};
/**
* @param {OrganizeDetails[]} UndoRedoTileActions - Specifies the details of the action occured page
* @param {string} actionString - Specifies the Name of the action
* @param {OrganizeDetails[]} toolbarActions - Collection to store multiple action as single action
* @param {number[]} selectedPageIndexes - Collection to store selected page index
* @param {number} dropIndex - Specifies where the page should be dropped
* @param {boolean} isRightInsertion - Used to check whether the page should be dropped at right
* @returns {void}
* @private
*/
PageOrganizer.prototype.addOrganizeAction = function (UndoRedoTileActions, actionString, toolbarActions, selectedPageIndexes, dropIndex, isRightInsertion) {
addOrganizeAction.call(this, UndoRedoTileActions, actionString, toolbarActions, selectedPageIndexes, dropIndex, isRightInsertion);
};
/**
* @private
* @returns {void}
*/
PageOrganizer.prototype.onSaveClicked = function () {
onSaveClicked.call(this);
};
/**
* @param {boolean} isShow - specifies the isShow boolean.
* @returns {void}
* @private
*/
PageOrganizer.prototype.showOrganizeLoadingIndicator = function (isShow) {
showOrganizeLoadingIndicator.call(this, isShow);
};
/**
* @param {HTMLElement} mainTileElement - It describes about tile element
* @private
* @returns {void}
*/
PageOrganizer.prototype.deletePageElement = function (mainTileElement) {
deletePageElement.call(this, mainTileElement);
};
PageOrganizer.prototype.clonedCollection = function (tempCollecion) {
return clonedCollection.call(this, tempCollecion);
};
/**
* @param {string} documentData - specifies the documentData.
* @param {string} password - specifies the password.
* @param {boolean} isPasswordCorrect - specifies the isPasswordCorrect.
* @returns {void}
* @private
*/
PageOrganizer.prototype.loadImportDoc = function (documentData, password, isPasswordCorrect) {
loadImportDoc.call(this, documentData, password, isPasswordCorrect);
};
/**
* @param {string} password - specifies the password.
* @param {string} documentName - specifies the documentName.
* @param {string} documentData - specifies the documentData.
* @returns {void}
* @private
*/
PageOrganizer.prototype.importDocuments = function (password, documentName, documentData) {
importDocuments.call(this, password, documentName, documentData);
};
/**
* @private
* @returns {void}
*/
PageOrganizer.prototype.updateOrganizePageCollection = function () {
this.organizePagesCollection = JSON.parse(JSON.stringify(this.tempOrganizePagesCollection));
};
/**
*
* @param {any} pageCanvas - It describes about the page canvas
* @param {number} pageNumber - It describes about the page number
* @private
* @returns {void}
*/
PageOrganizer.prototype.applyElementStyles = function (pageCanvas, pageNumber) {
applyElementStyles.call(this, pageCanvas, pageNumber);
};
/**
* @private
* @returns {void}
*/
PageOrganizer.prototype.onSaveasClicked = function () {
onSaveasClicked.call(this);
};
/**
* @private
* @returns {void}
*/
PageOrganizer.prototype.updateOrganizePageActions = function () {
updateOrganizePageActions.call(this);
};
/**
*
* Rotates all pages in the PDF Viewer by the specified angle.
*
* @param {PdfPageRotateAngle} pageRotateAngle - The angle by which to rotate the pages (PdfPageRotateAngle).
* The rotation can be 0, 90, 180, or 270 degrees.
* @returns {void}
* @private
*/
PageOrganizer.prototype.rotateAllPages = function (pageRotateAngle) {
rotateAllPages.call(this, pageRotateAngle);
};
/**
* @param {number} arg1 - It describes about the arg1
* @param {number} arg2 - It describes about the arg2
* @private
* @returns {void}
*/
PageOrganizer.prototype.rotatePages = function (arg1, arg2) {
if (this.pdfViewer.pageOrganizerSettings.canRotate) {
if (Array.isArray(arg1)) {
// Check if the second argument is provided and is of type PdfPageRotateAngle
if (arg2 !== undefined && typeof arg2 === 'number') {
var pageIndexes = arg1;
var rotateAngle = arg2;
processRotation(pageIndexes, rotateAngle);
}
else {
// Handle case: RotatePages(pageRotations: PageRotation[])
var pageRotations = arg1;
for (var _i = 0, pageRotations_1 = pageRotations; _i < pageRotations_1.length; _i++) {
var pageRotation = pageRotations_1[_i];
processRotation([pageRotation.pageIndex], pageRotation.rotationAngle);
}
}
}
else if (typeof arg1 === 'number' && typeof arg2 === 'number') {
// Handle case: RotatePages(pageStartIndex, pageEndIndex, PdfPageRotateAngle.RotateAngle90)
var pageStartIndex = arg1;
var pageEndIndex = arg2;
// eslint-disable-next-line
var rotateAngle = arguments[2];
processRotation(this.generateRange(pageStartIndex, pageEndIndex), rotateAngle);
}
}
};
PageOrganizer.prototype.generateRange = function (start, end) {
return Array.from({ length: end - start + 1 }, function (_, index) { return start + index; });
};
/**
* @private
* @param {number} newSize The size to which image zoom is to be updated
* @param {number} oldSize The present value of image zoom
* @returns {void}
*/
PageOrganizer.prototype.updateOrganizePageImageSize = function (newSize, oldSize) {
updateOrganizePageImageSize.call(this, newSize, oldSize);
};
/**
* Rotates the specified pages clockwise by 90 degrees.
*
* @param {number} pageNumbers - Array of page numbers to rotate.
* @private
* @returns {void}
*/
PageOrganizer.prototype.rotateClockwise = function (pageNumbers) {
rotateClockwise.call(this, pageNumbers);
};
/**
* Rotates the specified pages counterclockwise by 90 degrees.
*
* @param {number} pageNumbers - Array of page numbers to rotate.
* @private
* @returns {void}
*/
PageOrganizer.prototype.rotateCounterclockwise = function (pageNumbers) {
rotateCounterclockwise.call(this, pageNumbers);
};
/**
* Opens the page organizer dialog within the Pdf Viewer, allowing for management of PDF pages.
*
* ```html
* <div id="pdfViewer" style="height: 100%;width: 100%;"></div>
* ```
* ```ts
* let viewer: PdfViewer = new PdfViewer();
* viewer.appendTo("#pdfViewer");
* viewer.documentLoad = () => {
* viewer.pageOrganizer.openPageOrganizer();
* }
* ```
*
* @returns {void}
*/
PageOrganizer.prototype.openPageOrganizer = function () {
if (!isNullOrUndefined(this.pdfViewer.pageOrganizer)) {
if (this.isAllImagesReceived) {
if (!Browser.isDevice || this.pdfViewer.enableDesktopMode) {
this.createOrganizeWindow();
}
else {
this.createOrganizeWindowForMobile();
}
}
}
else {
this.pdfViewerBase.getModuleWarningMessage('PageOrganizer');
}
};
/**
* Closes the currently open page organizer dialog within the PDF Viewer, if present.
*
* ```html
* <div id="pdfViewer" style="height: 100%;width: 100%;"></div>
* ```
* ```ts
* let viewer: PdfViewer = new PdfViewer();
* viewer.appendTo("#pdfViewer");
* viewer.documentLoad = () => {
* viewer.pageOrganizer.closePageOrganizer();
* }
* ```
*
* @returns {void}
*/
PageOrganizer.prototype.closePageOrganizer = function () {
if (!isNullOrUndefined(this.pdfViewer.pageOrganizer)) {
if (!isNullOrUndefined(this.organizeDialog) && this.isOrganizeWindowOpen) {
this.organizeDialog.hide();
}
}
else {
this.pdfViewerBase.getModuleWarningMessage('PageOrganizer');
}
};
/**
* @private
* @param {PageOrganizerSettingsModel} newProp The new pageOrganizerSettings Property of PdfViewer from onPropertyChanged
* @returns {void}
*/
PageOrganizer.prototype.handleImageSizeBoundsChange = function (newProp) {
handleImageSizeBoundsChange.call(this, newProp);
};
/**
* @private
* @param {boolean} showImageZoomingSlider The new showImageZoomingSlider property of PdfViewer.PageOrganizerSettings from onPropertyChanged
* @returns {void}
*/
PageOrganizer.prototype.handleImageResizerVisibility = function (showImageZoomingSlider) {
handleImageResizerVisibility.call(this, showImageZoomingSlider);
};
/**
* @private
* @returns {void}
*/
PageOrganizer.prototype.switchPageOrganizer = function () {
switchPageOrganizer.call(this);
};
/**
* @private
* @returns {void}
*/
PageOrganizer.prototype.getModuleName = function () {
return 'PageOrganizer';
};
/**
* @private
* @param {boolean} isImageRequest defines if the function is called for image request
* @param {number} size optional size can be sent to check valid page zoom value
* @returns {number} imageZoom value
*/
PageOrganizer.prototype.getImageZoomValue = function (isImageRequest, size) {
return getImageZoomValue.call(this, isImageRequest, size);
};
/**
* @private
* @param {number} currentValue - It describes about current value.
* @param {number} previousValue - It describes about previous value.
* @returns {void}
*/
PageOrganizer.prototype.handlePageZoomChange = function (currentValue, previousValue) {
handlePageZoomChange.call(this, currentValue, previousValue);
};
/**
* @private
* @param {boolean} isShowRemove - It describes about show or remove the extract icon in organize window toolbar.
* @returns {void}
*/
PageOrganizer.prototype.showRemoveExtractIcon = function (isShowRemove) {
showRemoveExtractIcon.call(this, isShowRemove);
};
/**
* @private
* @param {boolean} canExtractPages - It describes about show or hide the extract icon in organize window toolbar.
* @returns {void}
*/
PageOrganizer.prototype.showHideExtractIcon = function (canExtractPages) {
showHideExtractIcon.call(this, canExtractPages);
};
/**
* @private
* @returns {void}
*/
PageOrganizer.prototype.clear = function () {
clear.call(this);
};
/**
* @private
* @returns {void}
*/
PageOrganizer.prototype.destroy = function () {
this.clear();
};
return PageOrganizer;
}());
export { PageOrganizer };
/**
* Enum for PdfPageRotateAngle
*/
export var PdfPageRotateAngle;
(function (PdfPageRotateAngle) {
PdfPageRotateAngle[PdfPageRotateAngle["RotateAngle0"] = 1] = "RotateAngle0";
PdfPageRotateAngle[PdfPageRotateAngle["RotateAngle90"] = 2] = "RotateAngle90";
PdfPageRotateAngle[PdfPageRotateAngle["RotateAngle180"] = 3] = "RotateAngle180";
PdfPageRotateAngle[PdfPageRotateAngle["RotateAngle270"] = 4] = "RotateAngle270";
PdfPageRotateAngle[PdfPageRotateAngle["RotateAngle360"] = 1] = "RotateAngle360";
})(PdfPageRotateAngle || (PdfPageRotateAngle = {}));
var PageRotation = /** @class */ (function () {
// eslint-disable-next-line
function PageRotation(pageIndex, rotationAngle) {
this.pageIndex = pageIndex;
this.rotationAngle = rotationAngle;
}
return PageRotation;
}());
export { PageRotation };
/**
* Interface representing details about organizing pages, including page ID, current page index, rotate angle, and status of insertion and deletion.
*/
var OrganizeDetails = /** @class */ (function () {
function OrganizeDetails(currentPageIndex, pageIndex, copiedPageIndex, isInserted, isDeleted, isCopied, istargetCopied, hasEmptyPageAfter, hasEmptyPageBefore, rotateAngle, pageSize, isImportedDoc, documentName, password, documentData) {
this.currentPageIndex = currentPageIndex;
this.pageIndex = pageIndex;
this.copiedPageIndex = copiedPageIndex;
this.isInserted = isInserted;
this.isDeleted = isDeleted;
this.isCopied = isCopied;
this.istargetCopied = istargetCopied;
this.hasEmptyPageAfter = hasEmptyPageAfter;
this.hasEmptyPageBefore = hasEmptyPageBefore;
this.rotateAngle = rotateAngle;
this.pageSize = pageSize;
this.isImportedDoc = isImportedDoc;
this.documentName = documentName;
this.password = password;
this.documentData = documentData;
}
return OrganizeDetails;
}());
export { OrganizeDetails };