react-fast-scroll-pdf
Advanced tools
Comparing version 1.0.3 to 1.1.1
@@ -60,2 +60,6 @@ module.exports = { | ||
"@typescript-eslint/explicit-module-boundary-types": "off", | ||
"react/function-component-definition": [2, { | ||
namedComponents: "arrow-function", | ||
unnamedComponents: "arrow-function" | ||
}] | ||
}, | ||
@@ -62,0 +66,0 @@ parserOptions: { |
(function (global, factory) { | ||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('pdfjs-dist/legacy/web/pdf_viewer'), require('react'), require('lodash'), require('immer'), require('react-html-parser')) : | ||
typeof define === 'function' && define.amd ? define(['exports', 'pdfjs-dist/legacy/web/pdf_viewer', 'react', 'lodash', 'immer', 'react-html-parser'], factory) : | ||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FastScrollPDF = {}, global.pdf_viewer, global.React, global._, global.immer, global.ReactHTMLParser)); | ||
})(this, (function (exports, pdf_viewer, React, _, immer, ReactHTMLParser) { 'use strict'; | ||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('pdfjs-dist/web/pdf_viewer'), require('react'), require('lodash'), require('immer'), require('html-react-parser')) : | ||
typeof define === 'function' && define.amd ? define(['exports', 'pdfjs-dist/web/pdf_viewer', 'react', 'lodash', 'immer', 'html-react-parser'], factory) : | ||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FastScrollPDF = {}, global.pdf_viewer, global.React, global._, global.immer, global.parse)); | ||
})(this, (function (exports, pdf_viewer, React, _, immer, parse) { 'use strict'; | ||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React); | ||
var ___default = /*#__PURE__*/_interopDefaultLegacy(_); | ||
var ReactHTMLParser__default = /*#__PURE__*/_interopDefaultLegacy(ReactHTMLParser); | ||
/*! ***************************************************************************** | ||
/****************************************************************************** | ||
Copyright (c) Microsoft Corporation. | ||
@@ -39,18 +33,56 @@ | ||
function __awaiter(thisArg, _arguments, P, generator) { | ||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
return new (P || (P = Promise))(function (resolve, reject) { | ||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } | ||
step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
}); | ||
} | ||
function __generator(thisArg, body) { | ||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; | ||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; | ||
function verb(n) { return function (v) { return step([n, v]); }; } | ||
function step(op) { | ||
if (f) throw new TypeError("Generator is already executing."); | ||
while (_) try { | ||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; | ||
if (y = 0, t) op = [op[0] & 2, t.value]; | ||
switch (op[0]) { | ||
case 0: case 1: t = op; break; | ||
case 4: _.label++; return { value: op[1], done: false }; | ||
case 5: _.label++; y = op[1]; op = [0]; continue; | ||
case 7: op = _.ops.pop(); _.trys.pop(); continue; | ||
default: | ||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } | ||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } | ||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } | ||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } | ||
if (t[2]) _.ops.pop(); | ||
_.trys.pop(); continue; | ||
} | ||
op = body.call(thisArg, _); | ||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } | ||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; | ||
} | ||
} | ||
var PDFPage = function PDFPage(_a) { | ||
var width = _a.width, | ||
height = _a.height, | ||
pageNum = _a.pageNum, | ||
imageSrc = _a.imageSrc, | ||
children = _a.children, | ||
_b = _a.type, | ||
type = _b === void 0 ? "canvas" : _b; | ||
return /*#__PURE__*/React__default["default"].createElement("div", { | ||
height = _a.height, | ||
pageNum = _a.pageNum, | ||
imageSrc = _a.imageSrc, | ||
children = _a.children, | ||
_b = _a.type, | ||
type = _b === void 0 ? "canvas" : _b; | ||
return /*#__PURE__*/React.createElement("div", { | ||
"data-type": type, | ||
id: "page" + pageNum, | ||
id: "page".concat(pageNum), | ||
style: { | ||
width: width + "px", | ||
height: height + "px" | ||
width: "".concat(width, "px"), | ||
height: "".concat(height, "px") | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("img", { | ||
}, /*#__PURE__*/React.createElement("img", { | ||
src: imageSrc, | ||
@@ -61,3 +93,3 @@ style: { | ||
}, | ||
alt: "Page " + pageNum | ||
alt: "Page ".concat(pageNum) | ||
}), children); | ||
@@ -95,4 +127,4 @@ }; | ||
var css_248z$3 = ".PlaceholderPage-module_centered__ZF9i- {\n\tposition: absolute;\n\tleft: 50%;\n\ttop: 50%;\n\twidth: 32px;\n\theight: 32px;\n\ttransform: translate(-50%, -50%);\n}\n\n.PlaceholderPage-module_spinner__1h4QT {\n\tanimation: PlaceholderPage-module_rotation__3_THg 0.6s infinite linear;\n}\n\n@keyframes PlaceholderPage-module_rotation__3_THg {\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\n\tto {\n\t\ttransform: rotate(359deg);\n\t}\n}\n"; | ||
var styles$3 = {"centered":"PlaceholderPage-module_centered__ZF9i-","spinner":"PlaceholderPage-module_spinner__1h4QT","rotation":"PlaceholderPage-module_rotation__3_THg"}; | ||
var css_248z$3 = ".PlaceholderPage-module_centered__TqDpk {\n\tposition: absolute;\n\tleft: 50%;\n\ttop: 50%;\n\twidth: 32px;\n\theight: 32px;\n\ttransform: translate(-50%, -50%);\n}\n\n.PlaceholderPage-module_spinner__WQDRT {\n\tanimation: PlaceholderPage-module_rotation__I5jQi 0.6s infinite linear;\n}\n\n@keyframes PlaceholderPage-module_rotation__I5jQi {\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\n\tto {\n\t\ttransform: rotate(359deg);\n\t}\n}\n"; | ||
var styles$3 = {"centered":"PlaceholderPage-module_centered__TqDpk","spinner":"PlaceholderPage-module_spinner__WQDRT","rotation":"PlaceholderPage-module_rotation__I5jQi"}; | ||
styleInject(css_248z$3); | ||
@@ -102,16 +134,16 @@ | ||
var width = _a.width, | ||
height = _a.height, | ||
_b = _a.type, | ||
type = _b === void 0 ? "place" : _b, | ||
_c = _a.loadingImage, | ||
loadingImage = _c === void 0 ? img : _c, | ||
spin = _a.spin; | ||
height = _a.height, | ||
_b = _a.type, | ||
type = _b === void 0 ? "place" : _b, | ||
_c = _a.loadingImage, | ||
loadingImage = _c === void 0 ? img : _c, | ||
spin = _a.spin; | ||
var classes = [spin ? styles$3.spinner : "", styles$3.centered]; | ||
return /*#__PURE__*/React__default["default"].createElement("div", { | ||
return /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
width: width + "px", | ||
height: height + "px" | ||
width: "".concat(width, "px"), | ||
height: "".concat(height, "px") | ||
}, | ||
"data-type": type | ||
}, /*#__PURE__*/React__default["default"].createElement("img", { | ||
}, /*#__PURE__*/React.createElement("img", { | ||
src: loadingImage, | ||
@@ -124,21 +156,37 @@ className: classes.join(" "), | ||
var CMAP_URL = "pdfjs-dist/cmaps/"; | ||
var cleanupPage = function cleanupPage(page, attempts, maxAttempts) { | ||
if (attempts === void 0) { | ||
attempts = 0; | ||
} | ||
if (maxAttempts === void 0) { | ||
maxAttempts = 3; | ||
} | ||
return new Promise(function (resolve, reject) { | ||
var success = page.cleanup(true); | ||
if (success) { | ||
resolve(success); | ||
} else if (attempts <= maxAttempts) { | ||
setTimeout(function () { | ||
resolve(cleanupPage(page, attempts + 1)); | ||
}, 100 * attempts); | ||
} else { | ||
reject(new Error("Couldn't clean up the page")); | ||
} | ||
}); | ||
}; | ||
var usePDF = function usePDF(_a) { | ||
var source = _a.source, | ||
loadingImage = _a.loadingImage, | ||
_b = _a.enableAnnotations, | ||
enableAnnotations = _b === void 0 ? true : _b, | ||
_c = _a.spinLoadingImage, | ||
spinLoadingImage = _c === void 0 ? false : _c, | ||
scrollContainer = _a.scrollContainer, | ||
viewer = _a.viewer; | ||
loadingImage = _a.loadingImage, | ||
_b = _a.enableAnnotations, | ||
enableAnnotations = _b === void 0 ? true : _b, | ||
_c = _a.spinLoadingImage, | ||
spinLoadingImage = _c === void 0 ? false : _c, | ||
scrollContainer = _a.scrollContainer, | ||
viewer = _a.viewer; | ||
var _d = React.useState(), | ||
pdfDoc = _d[0], | ||
setPdfDoc = _d[1]; | ||
pdfDoc = _d[0], | ||
setPdfDoc = _d[1]; | ||
var _e = React.useState([]), | ||
pages = _e[0], | ||
setPages = _e[1]; | ||
pages = _e[0], | ||
setPages = _e[1]; | ||
var scaleRef = React.useRef(1); | ||
@@ -156,110 +204,141 @@ var prevSource = React.useRef(); | ||
var oldHeightRef = React.useRef(); | ||
var renderPage = React.useCallback(function (num) { | ||
if (!docLoaded.current) { | ||
return; | ||
} | ||
var processQueue = React.useMemo(function () { | ||
return _.debounce(function () { | ||
return __awaiter(void 0, void 0, void 0, function () { | ||
var renderPage, page; | ||
return __generator(this, function (_a) { | ||
switch (_a.label) { | ||
case 0: | ||
renderPage = function renderPage(num) { | ||
return __awaiter(void 0, void 0, void 0, function () { | ||
var page_1, viewport, ctx, renderContext, renderTask, annotationData, annotationDiv_1, e_1, e_2; | ||
return __generator(this, function (_a) { | ||
switch (_a.label) { | ||
case 0: | ||
if (!docLoaded.current) { | ||
return [2 /*return*/]; | ||
} | ||
if (pdfDoc) { | ||
pageRendering.current = true; | ||
pdfDoc.getPage(num).then(function (page) { | ||
// kill the render early if Q cleared | ||
if (renderQueue.current.length === 0) { | ||
pageRendering.current = false; | ||
return; | ||
} | ||
if (!pdfDoc) return [3 /*break*/, 11]; | ||
_a.label = 1; | ||
case 1: | ||
_a.trys.push([1, 10,, 11]); | ||
pageRendering.current = true; | ||
return [4 /*yield*/, pdfDoc.getPage(num)]; | ||
case 2: | ||
page_1 = _a.sent(); | ||
page_1.cleanupAfterRender = true; | ||
// kill the render early if Q cleared | ||
if (renderQueue.current.length === 0) { | ||
pageRendering.current = false; | ||
return [2 /*return*/]; | ||
} | ||
var viewport = page.getViewport({ | ||
scale: scaleRef.current | ||
}); | ||
pageCanvasRef.current.height = viewport.height; | ||
pageCanvasRef.current.width = viewport.width; | ||
var ctx = pageCanvasRef.current.getContext("2d"); // Render PDF page into canvas context | ||
viewport = page_1.getViewport({ | ||
scale: scaleRef.current | ||
}); | ||
pageCanvasRef.current.height = viewport.height; | ||
pageCanvasRef.current.width = viewport.width; | ||
ctx = pageCanvasRef.current.getContext("2d"); | ||
renderContext = { | ||
canvasContext: ctx, | ||
viewport: viewport, | ||
enableWebGL: true | ||
}; | ||
_a.label = 3; | ||
case 3: | ||
_a.trys.push([3, 6, 7, 9]); | ||
renderTask = page_1.render(renderContext); | ||
return [4 /*yield*/, renderTask.promise]; | ||
case 4: | ||
_a.sent(); | ||
if (renderQueue.current.length === 0) { | ||
return [2 /*return*/]; | ||
} | ||
var renderContext = { | ||
canvasContext: ctx, | ||
viewport: viewport, | ||
enableWebGL: true | ||
}; | ||
var loadingTask = page.render(renderContext); | ||
loadingTask.promise.then(function () { | ||
if (renderQueue.current.length === 0) { | ||
return null; | ||
} | ||
return [4 /*yield*/, page_1.getAnnotations()]; | ||
case 5: | ||
annotationData = _a.sent(); | ||
// kill the render early | ||
if (renderQueue.current.length === 0) { | ||
return [2 /*return*/]; | ||
} | ||
return page.getAnnotations(); | ||
}).then(function (annotationData) { | ||
// kill the render early | ||
if (renderQueue.current.length === 0) { | ||
return; | ||
} | ||
if (enableAnnotations) { | ||
annotationDiv_1 = document.createElement("div"); | ||
annotationDiv_1.id = "annot".concat(num); | ||
annotationDiv_1.className = "annotationLayer"; | ||
pdfjsLib.current.AnnotationLayer.render({ | ||
viewport: viewport.clone({ | ||
dontFlip: true | ||
}), | ||
div: annotationDiv_1, | ||
annotations: annotationData, | ||
page: page_1, | ||
linkService: linkService | ||
}); | ||
} | ||
setPages(function (oldPages) { | ||
return immer.produce(oldPages, function (draft) { | ||
var _a; | ||
var _b = (_a = viewportRef.current) !== null && _a !== void 0 ? _a : { | ||
width: 100, | ||
height: 100 | ||
}, | ||
width = _b.width, | ||
height = _b.height; | ||
draft[num] = /*#__PURE__*/React.createElement(PDFPage, { | ||
pageNum: num, | ||
width: width, | ||
height: height, | ||
imageSrc: pageCanvasRef.current.toDataURL("image/png"), | ||
key: "page".concat(num) | ||
}, enableAnnotations ? parse(annotationDiv_1.outerHTML) : null); | ||
}); | ||
}); | ||
return [3 /*break*/, 9]; | ||
case 6: | ||
e_1 = _a.sent(); | ||
console.error(e_1); | ||
if (e_1.name !== "RenderingCancelledException") { | ||
console.error("Render Page: ".concat(e_1)); | ||
} | ||
return [3 /*break*/, 9]; | ||
case 7: | ||
return [4 /*yield*/, cleanupPage(page_1)]; | ||
case 8: | ||
_a.sent(); | ||
renderQueue.current = renderQueue.current.filter(function (p) { | ||
return p !== num; | ||
}); | ||
pageRendering.current = false; | ||
processQueue(); | ||
return [7 /*endfinally*/]; | ||
case 9: | ||
return [3 /*break*/, 11]; | ||
case 10: | ||
e_2 = _a.sent(); | ||
console.error(e_2); | ||
pageRendering.current = false; | ||
return [3 /*break*/, 11]; | ||
case 11: | ||
return [2 /*return*/]; | ||
} | ||
}); | ||
}); | ||
}; | ||
var annotationDiv; | ||
if (enableAnnotations) { | ||
annotationDiv = document.createElement("div"); | ||
annotationDiv.id = "annot" + num; | ||
annotationDiv.className = "annotationLayer"; | ||
pdfjsLib.current.AnnotationLayer.render({ | ||
viewport: viewport.clone({ | ||
dontFlip: true | ||
}), | ||
div: annotationDiv, | ||
annotations: annotationData, | ||
page: page, | ||
linkService: linkService | ||
}); | ||
page = renderQueue.current[0]; | ||
if (!(page && !pageRendering.current)) return [3 /*break*/, 2]; | ||
return [4 /*yield*/, renderPage(page)]; | ||
case 1: | ||
_a.sent(); | ||
_a.label = 2; | ||
case 2: | ||
return [2 /*return*/]; | ||
} | ||
setPages(function (oldPages) { | ||
return immer.produce(oldPages, function (draft) { | ||
var _a; | ||
var _b = (_a = viewportRef.current) !== null && _a !== void 0 ? _a : { | ||
width: 100, | ||
height: 100 | ||
}, | ||
width = _b.width, | ||
height = _b.height; | ||
draft[num] = /*#__PURE__*/React__default["default"].createElement(PDFPage, { | ||
pageNum: num, | ||
width: width, | ||
height: height, | ||
imageSrc: pageCanvasRef.current.toDataURL("image/png"), | ||
key: "page" + num | ||
}, enableAnnotations ? ReactHTMLParser__default["default"](annotationDiv.outerHTML) : null); | ||
}); | ||
}); | ||
})["catch"](function (e) { | ||
if (e.name !== "RenderingCancelledException") { | ||
console.error("Render Page: " + e); | ||
} | ||
})["finally"](function () { | ||
pageRendering.current = false; | ||
page.cleanup(); | ||
renderQueue.current = renderQueue.current.filter(function (p) { | ||
return p !== num; | ||
}); | ||
if (renderQueue.current.length > 0) { | ||
// New page rendering is pending | ||
var no = renderQueue.current[0]; | ||
renderPage(no); | ||
} | ||
}); | ||
})["catch"](function (err) { | ||
console.error(err); | ||
pageRendering.current = false; | ||
}); | ||
} | ||
}, [pdfDoc, linkService, enableAnnotations]); | ||
var processQueue = React.useMemo(function () { | ||
return ___default["default"].debounce(function () { | ||
var page = renderQueue.current[0]; | ||
if (page && !pageRendering.current) { | ||
renderPage(page); | ||
} | ||
}, 100); | ||
}, [renderPage, renderQueue, pageRendering]); | ||
}, [pdfDoc, enableAnnotations, linkService]); | ||
var queueRenderPage = React.useCallback(function (num, jumpQueue) { | ||
@@ -269,10 +348,7 @@ if (jumpQueue === void 0) { | ||
} | ||
if (jumpQueue) { | ||
var ind = renderQueue.current.indexOf(num); | ||
if (ind >= 0) { | ||
renderQueue.current.splice(ind, 1); | ||
} | ||
renderQueue.current.unshift(num); | ||
@@ -282,3 +358,2 @@ } else if (!renderQueue.current.includes(num)) { | ||
} | ||
processQueue(); | ||
@@ -288,6 +363,4 @@ }, [processQueue]); | ||
var currPage = 1; | ||
if (viewer && scrollContainer) { | ||
var children = (viewer !== null && viewer !== void 0 ? viewer : {}).children; | ||
for (var i = 0; i < children.length; i += 1) { | ||
@@ -299,3 +372,2 @@ if (children[i].offsetTop <= scrollContainer.scrollTop + 33) { | ||
} | ||
return currPage; | ||
@@ -305,12 +377,9 @@ }, [scrollContainer, viewer]); | ||
var _a, _b; | ||
processQueue.cancel(); | ||
scaleRef.current = scale; | ||
renderQueue.current.length = 0; | ||
var oldTopPos = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTop) / (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollHeight); | ||
var oldTopPos = scrollContainer ? scrollContainer.scrollTop / scrollContainer.scrollHeight : 0; | ||
if (!oldHeightRef.current) { | ||
oldHeightRef.current = (_b = (_a = viewportRef.current) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 300; | ||
} | ||
pdfDoc === null || pdfDoc === void 0 ? void 0 : pdfDoc.getPage(1).then(function (page) { | ||
@@ -321,4 +390,4 @@ viewportRef.current = page.getViewport({ | ||
var _a = viewportRef.current, | ||
width = _a.width, | ||
height = _a.height; | ||
width = _a.width, | ||
height = _a.height; | ||
page.cleanup(); | ||
@@ -330,10 +399,8 @@ setPages(function (oldPages) { | ||
} | ||
var _a = pg.props, | ||
imageSrc = _a.imageSrc, | ||
children = _a.children; | ||
var key = "page" + index; | ||
imageSrc = _a.imageSrc, | ||
children = _a.children; | ||
var key = "page".concat(index); | ||
if (imageSrc) { | ||
return /*#__PURE__*/React__default["default"].createElement(PDFPage, { | ||
return /*#__PURE__*/React.createElement(PDFPage, { | ||
key: key, | ||
@@ -346,4 +413,3 @@ pageNum: index, | ||
} | ||
return /*#__PURE__*/React__default["default"].createElement(PlaceholderPage, { | ||
return /*#__PURE__*/React.createElement(PlaceholderPage, { | ||
key: key, | ||
@@ -357,3 +423,2 @@ width: width, | ||
}); | ||
if (scrollContainer) { | ||
@@ -364,3 +429,3 @@ var scroller = scrollContainer; | ||
})["catch"](function (e) { | ||
return console.error("Change Zoom " + e); | ||
return console.error("Change Zoom ".concat(e)); | ||
}); | ||
@@ -370,3 +435,2 @@ }, [processQueue, scrollContainer, pdfDoc, loadingImage, spinLoadingImage]); | ||
var _a; | ||
if (pdfDoc) { | ||
@@ -376,7 +440,5 @@ oldHeightRef.current = undefined; | ||
queueRenderPage(currPage, true); | ||
if (currPage + 1 < pdfDoc.numPages) { | ||
queueRenderPage(currPage + 1, true); | ||
} | ||
for (var i = 1; (_a = i <= pdfDoc.numPages) !== null && _a !== void 0 ? _a : 0; i += 1) { | ||
@@ -397,16 +459,11 @@ if (i !== currPage && i !== currPage + 1) { | ||
} | ||
var currPage = getCurrentPage(); | ||
var nextPage = Math.min(currPage + 1, (pdfDoc === null || pdfDoc === void 0 ? void 0 : pdfDoc.numPages) || 1); | ||
var isPageRendered = function isPageRendered(pageNo) { | ||
var _a; | ||
return !!((_a = pages[pageNo]) === null || _a === void 0 ? void 0 : _a.props.imageSrc); | ||
}; | ||
if (force || !isPageRendered(nextPage)) { | ||
queueRenderPage(nextPage, true); | ||
} | ||
if (force || !isPageRendered(currPage) || force) { | ||
@@ -417,3 +474,3 @@ queueRenderPage(currPage, true); | ||
React.useEffect(function () { | ||
if ((source.url || source.data || source.range) && !___default["default"].isEqual(source, prevSource.current)) { | ||
if ((source.url || source.data || source.range) && !_.isEqual(source, prevSource.current)) { | ||
pdfDoc === null || pdfDoc === void 0 ? void 0 : pdfDoc.cleanup(); | ||
@@ -424,10 +481,9 @@ pdfDoc === null || pdfDoc === void 0 ? void 0 : pdfDoc.destroy(); | ||
prevSource.current = source; | ||
setPages([]); // @ts-ignore | ||
import('pdfjs-dist/legacy/build/pdf').then(function (lib) { | ||
pdfjsLib.current = lib; // @ts-ignore | ||
import('pdfjs-dist/legacy/build/pdf.worker.entry').then(function (pdfjsWorker) { | ||
setPages([]); | ||
// @ts-ignore | ||
import('pdfjs-dist/build/pdf').then(function (lib) { | ||
pdfjsLib.current = lib; | ||
// @ts-ignore | ||
import('pdfjs-dist/build/pdf.worker.entry').then(function (pdfjsWorker) { | ||
var _a, _b; | ||
pdfjsLib.current.GlobalWorkerOptions.workerSrc = pdfjsWorker; | ||
@@ -443,3 +499,3 @@ var loadingTask = (_b = (_a = pdfjsLib.current) === null || _a === void 0 ? void 0 : _a.getDocument) === null || _b === void 0 ? void 0 : _b.call(_a, __assign({ | ||
console.error("Error loading PDF", err); | ||
setPages([/*#__PURE__*/React__default["default"].createElement("div", { | ||
setPages([/*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -450,3 +506,3 @@ width: "300px", | ||
"data-type": "error" | ||
}, "Error loading PDF: " + err)]); | ||
}, "Error loading PDF: ".concat(err))]); | ||
}); | ||
@@ -467,15 +523,12 @@ }); | ||
var _a; | ||
var _b = (_a = viewportRef.current) !== null && _a !== void 0 ? _a : { | ||
width: 100, | ||
height: 100 | ||
}, | ||
width = _b.width, | ||
height = _b.height; | ||
width: 100, | ||
height: 100 | ||
}, | ||
width = _b.width, | ||
height = _b.height; | ||
var numPages = pdfDoc.numPages; | ||
for (var i = 1; i <= numPages; i += 1) { | ||
draft[i] = /*#__PURE__*/React__default["default"].createElement(PlaceholderPage, { | ||
key: "page" + i, | ||
draft[i] = /*#__PURE__*/React.createElement(PlaceholderPage, { | ||
key: "page".concat(i), | ||
width: width, | ||
@@ -489,3 +542,2 @@ height: height, | ||
}); | ||
for (var i = 1; i <= pdfDoc.numPages; i += 1) { | ||
@@ -495,3 +547,3 @@ queueRenderPage(i); | ||
})["catch"](function (e) { | ||
return console.error("UseEffect (pdfDoc, queueRenderPage, loadingImage) " + e); | ||
return console.error("UseEffect (pdfDoc, queueRenderPage, loadingImage) ".concat(e)); | ||
}); | ||
@@ -507,3 +559,2 @@ } | ||
var _a, _b; | ||
renderQueue.current.length = 0; | ||
@@ -526,8 +577,7 @@ docLoaded.current = false; | ||
var css_248z$2 = ".ZoomButtons-module_zoomButton__YnxdA {\n\twidth: 50px;\n\tborder-left: 0;\n\tborder-right: 0;\n\tborder-radius: 0;\n\tmargin-right: 3px;\n\tmargin-top: 0;\n\tmargin-bottom: 0;\n\tbackground: none;\n\tpadding: 10px;\n\tbackground-color: rgb(240, 240, 240);\n\tcolor: rgb(0, 0, 0);\n\tfont-weight: 600;\n\ttext-align: center;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n\ttransition: 0.2s all ease-out;\n\tflex: 1;\n}\n\n.ZoomButtons-module_buttonGroup__BB1on {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: flex-end;\n\twidth: 110px;\n\tmargin-top: 3px;\n\tmargin-bottom: 3px;\n\tmargin-left: auto;\n\tmargin-right: 3px;\n\t\n\t-webkit-user-select: none;\n\tuser-select: none;\n\t-webkit-touch-callout: none;\n}\n\n.ZoomButtons-module_buttonGroup__BB1on .ZoomButtons-module_zoomButton__YnxdA:first-of-type {\n\tborder-top-left-radius: 3px;\n\tborder-bottom-left-radius: 3px;\n}\n\n.ZoomButtons-module_buttonGroup__BB1on .ZoomButtons-module_zoomButton__YnxdA:last-of-type {\n\tborder-top-right-radius: 3px;\n\tborder-bottom-right-radius: 3px;\n\tmargin-right: 0;\n}\n"; | ||
var styles$2 = {"zoomButton":"ZoomButtons-module_zoomButton__YnxdA","buttonGroup":"ZoomButtons-module_buttonGroup__BB1on"}; | ||
var css_248z$2 = ".ZoomButtons-module_zoomButton__vkmtA {\n\twidth: 50px;\n\tborder-left: 0;\n\tborder-right: 0;\n\tborder-radius: 0;\n\tmargin-right: 3px;\n\tmargin-top: 0;\n\tmargin-bottom: 0;\n\tbackground: none;\n\tpadding: 10px;\n\tbackground-color: rgb(240, 240, 240);\n\tcolor: rgb(0, 0, 0);\n\tfont-weight: 600;\n\ttext-align: center;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n\ttransition: 0.2s all ease-out;\n\tflex: 1;\n}\n\n.ZoomButtons-module_buttonGroup__ol-bo {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: flex-end;\n\twidth: 110px;\n\tmargin-top: 3px;\n\tmargin-bottom: 3px;\n\tmargin-left: auto;\n\tmargin-right: 3px;\n\t\n\t-webkit-user-select: none;\n\tuser-select: none;\n\t-webkit-touch-callout: none;\n}\n\n.ZoomButtons-module_buttonGroup__ol-bo .ZoomButtons-module_zoomButton__vkmtA:first-of-type {\n\tborder-top-left-radius: 3px;\n\tborder-bottom-left-radius: 3px;\n}\n\n.ZoomButtons-module_buttonGroup__ol-bo .ZoomButtons-module_zoomButton__vkmtA:last-of-type {\n\tborder-top-right-radius: 3px;\n\tborder-bottom-right-radius: 3px;\n\tmargin-right: 0;\n}\n"; | ||
var styles$2 = {"zoomButton":"ZoomButtons-module_zoomButton__vkmtA","buttonGroup":"ZoomButtons-module_buttonGroup__ol-bo"}; | ||
styleInject(css_248z$2); | ||
var ZoomDirection; | ||
(function (ZoomDirection) { | ||
@@ -538,10 +588,9 @@ ZoomDirection[ZoomDirection["In"] = 1] = "In"; | ||
})(ZoomDirection || (ZoomDirection = {})); | ||
var ZoomButton = function ZoomButton(_a) { | ||
var style = _a.style, | ||
disabled = _a.disabled, | ||
start = _a.start, | ||
end = _a.end, | ||
children = _a.children; | ||
return /*#__PURE__*/React__default["default"].createElement("button", { | ||
disabled = _a.disabled, | ||
start = _a.start, | ||
end = _a.end, | ||
children = _a.children; | ||
return /*#__PURE__*/React.createElement("button", { | ||
type: "button", | ||
@@ -558,19 +607,17 @@ className: style, | ||
}; | ||
var ZoomButtons = function ZoomButtons(_a) { | ||
var _b; | ||
var zoomChangeStart = _a.zoomChangeStart, | ||
zoomChangeEnd = _a.zoomChangeEnd, | ||
_c = _a.zoomStep, | ||
zoomStep = _c === void 0 ? 1 : _c, | ||
// change per second | ||
_d = _a.zoomStart, | ||
// change per second | ||
zoomStart = _d === void 0 ? 1 : _d, | ||
_e = _a.minZoom, | ||
minZoom = _e === void 0 ? 0.1 : _e, | ||
_f = _a.maxZoom, | ||
maxZoom = _f === void 0 ? 5 : _f, | ||
className = _a.className; | ||
zoomChangeEnd = _a.zoomChangeEnd, | ||
_c = _a.zoomStep, | ||
zoomStep = _c === void 0 ? 1 : _c, | ||
// change per second | ||
_d = _a.zoomStart, | ||
// change per second | ||
zoomStart = _d === void 0 ? 1 : _d, | ||
_e = _a.minZoom, | ||
minZoom = _e === void 0 ? 0.1 : _e, | ||
_f = _a.maxZoom, | ||
maxZoom = _f === void 0 ? 5 : _f, | ||
className = _a.className; | ||
var zoomStateRef = React.useRef((_b = { | ||
@@ -581,18 +628,14 @@ pos: zoomStart || 1, | ||
}) !== null && _b !== void 0 ? _b : 1); | ||
var doZoom = function doZoom(timestamp) { | ||
var _a = zoomStateRef.current, | ||
pos = _a.pos, | ||
direction = _a.direction, | ||
lastTimestamp = _a.lastTimestamp; | ||
pos = _a.pos, | ||
direction = _a.direction, | ||
lastTimestamp = _a.lastTimestamp; | ||
if (direction === ZoomDirection.None) { | ||
return; | ||
} | ||
var diff = Math.max(0, timestamp - lastTimestamp) || 20; // 1st move 20 ms step | ||
// make maxium 'jump' 50ms worth of zoom. | ||
var secsPassed = Math.min(50, diff) / 1000; // zoom in/out step every second | ||
var secsPassed = Math.min(50, diff) / 1000; | ||
// zoom in/out step every second | ||
var step = 1 + direction * secsPassed * zoomStep; | ||
@@ -605,3 +648,2 @@ var zoom = Math.max(minZoom, Math.min(maxZoom, pos * step)); | ||
}; | ||
if (zoom !== pos) { | ||
@@ -611,3 +653,2 @@ if (timestamp === 0) { | ||
var dir = zoomStateRef.current.direction; | ||
if (dir !== ZoomDirection.None) { | ||
@@ -620,3 +661,2 @@ zoomStateRef.current.animReq = window.requestAnimationFrame(doZoom); | ||
} | ||
zoomChangeStart(zoom); | ||
@@ -628,18 +668,13 @@ } else { | ||
}; | ||
var setZoomDirection = function setZoomDirection(newDirection) { | ||
var _a = zoomStateRef.current, | ||
direction = _a.direction, | ||
animReq = _a.animReq, | ||
lastTimestamp = _a.lastTimestamp; | ||
direction = _a.direction, | ||
animReq = _a.animReq, | ||
lastTimestamp = _a.lastTimestamp; | ||
if (newDirection === direction) { | ||
return; | ||
} | ||
var currentlyAnimating = direction !== ZoomDirection.None; | ||
if (newDirection === ZoomDirection.None) { | ||
var timeout = 20; // 20 ms - magic number! | ||
if (animReq && lastTimestamp !== 0) { | ||
@@ -651,3 +686,2 @@ // Stop immediately, we have already animated a couple of frames + | ||
} | ||
setTimeout(function () { | ||
@@ -659,10 +693,7 @@ zoomStateRef.current = __assign(__assign({}, zoomStateRef.current), { | ||
}, timeout); // otherwise let it carry on a bit for short taps | ||
return; | ||
} | ||
zoomStateRef.current = __assign(__assign({}, zoomStateRef.current), { | ||
direction: newDirection | ||
}); | ||
if (!currentlyAnimating) { | ||
@@ -673,15 +704,11 @@ zoomStateRef.current.lastTimestamp = 0; | ||
}; | ||
var zoomInStart = function zoomInStart() { | ||
return setZoomDirection(ZoomDirection.In); | ||
}; | ||
var zoomOutStart = function zoomOutStart() { | ||
return setZoomDirection(ZoomDirection.Out); | ||
}; | ||
var zoomEnd = function zoomEnd() { | ||
return setZoomDirection(ZoomDirection.None); | ||
}; | ||
React.useEffect(function () { | ||
@@ -693,6 +720,6 @@ zoomStateRef.current = __assign(__assign({}, zoomStateRef.current), { | ||
var zoomPos = zoomStateRef.current.pos; | ||
var style = className + " " + styles$2.zoomButton; | ||
return /*#__PURE__*/React__default["default"].createElement("div", { | ||
var style = "".concat(className, " ").concat(styles$2.zoomButton); | ||
return /*#__PURE__*/React.createElement("div", { | ||
className: styles$2.buttonGroup | ||
}, /*#__PURE__*/React__default["default"].createElement(ZoomButton, { | ||
}, /*#__PURE__*/React.createElement(ZoomButton, { | ||
style: style, | ||
@@ -702,3 +729,3 @@ disabled: zoomPos >= maxZoom, | ||
end: zoomEnd | ||
}, /*#__PURE__*/React__default["default"].createElement("b", null, "+")), /*#__PURE__*/React__default["default"].createElement(ZoomButton, { | ||
}, /*#__PURE__*/React.createElement("b", null, "+")), /*#__PURE__*/React.createElement(ZoomButton, { | ||
style: style, | ||
@@ -708,7 +735,7 @@ disabled: zoomPos <= minZoom, | ||
end: zoomEnd | ||
}, /*#__PURE__*/React__default["default"].createElement("b", null, "-"))); | ||
}, /*#__PURE__*/React.createElement("b", null, "-"))); | ||
}; | ||
var css_248z$1 = ".PDFDocument-module_pdfDocument__3MrjJ {\n\toverflow-y: scroll;\n\toverflow-x: hidden;\n\twidth: 100%;\n\tflex: 1\n}\n\n.PDFDocument-module_viewer__2JOdZ {\n\tdisplay: grid;\n\tgrid-gap: 0;\n\tjustify-items: center;\n\ttext-align: center;\n\trow-gap: 16px;\n\ttransition: opacity 0.3s ease-in-out;\n}\n\n.PDFDocument-module_viewer__2JOdZ > div {\n\tposition: relative;\n\tbackground-color: white;\n\tbox-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);\n}\n\n.PDFDocument-module_viewer__2JOdZ .canvasWrapper {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n}\n\n.PDFDocument-module_viewer__2JOdZ .annotationLayer {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n}\n\n.PDFDocument-module_viewer__2JOdZ .linkAnnotation {\n\tposition: absolute;\n}\n\n.PDFDocument-module_viewer__2JOdZ .linkAnnotation a {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: block;\n\tcursor: pointer;\n}\n"; | ||
var styles$1 = {"pdfDocument":"PDFDocument-module_pdfDocument__3MrjJ","viewer":"PDFDocument-module_viewer__2JOdZ"}; | ||
var css_248z$1 = ".PDFDocument-module_pdfDocument__xIoMD {\n\toverflow-y: scroll;\n\toverflow-x: hidden;\n\twidth: 100%;\n\tflex: 1\n}\n\n.PDFDocument-module_viewer__kXSEN {\n\tdisplay: grid;\n\tgrid-gap: 0;\n\tjustify-items: center;\n\ttext-align: center;\n\trow-gap: 16px;\n\ttransition: opacity 0.3s ease-in-out;\n}\n\n.PDFDocument-module_viewer__kXSEN > div {\n\tposition: relative;\n\tbackground-color: white;\n\tbox-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);\n}\n\n.PDFDocument-module_viewer__kXSEN .canvasWrapper {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n}\n\n.PDFDocument-module_viewer__kXSEN .annotationLayer {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n}\n\n.PDFDocument-module_viewer__kXSEN .linkAnnotation {\n\tposition: absolute;\n}\n\n.PDFDocument-module_viewer__kXSEN .linkAnnotation a {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: block;\n\tcursor: pointer;\n}\n"; | ||
var styles$1 = {"pdfDocument":"PDFDocument-module_pdfDocument__xIoMD","viewer":"PDFDocument-module_viewer__kXSEN"}; | ||
styleInject(css_248z$1); | ||
@@ -718,11 +745,11 @@ | ||
var scrollContainerRef = _a.scrollContainerRef, | ||
viewerRef = _a.viewerRef, | ||
pages = _a.pages, | ||
className = _a.className, | ||
rowGap = _a.rowGap; | ||
return /*#__PURE__*/React__default["default"].createElement("div", { | ||
viewerRef = _a.viewerRef, | ||
pages = _a.pages, | ||
className = _a.className, | ||
rowGap = _a.rowGap; | ||
return /*#__PURE__*/React.createElement("div", { | ||
id: "scrollContainer", | ||
ref: scrollContainerRef, | ||
className: [className, styles$1.pdfDocument].join(" ") | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, /*#__PURE__*/React.createElement("div", { | ||
id: "viewer", | ||
@@ -737,4 +764,4 @@ ref: viewerRef, | ||
var css_248z = ".FastScrollPDF-module_fastScrollPDF__1kUDm {\n\twidth: 100%;\n}\n"; | ||
var styles = {"fastScrollPDF":"FastScrollPDF-module_fastScrollPDF__1kUDm"}; | ||
var css_248z = ".FastScrollPDF-module_fastScrollPDF__Zb4BI {\n\twidth: 100%;\n}\n"; | ||
var styles = {"fastScrollPDF":"FastScrollPDF-module_fastScrollPDF__Zb4BI"}; | ||
styleInject(css_248z); | ||
@@ -744,33 +771,28 @@ | ||
var source = _a.source, | ||
loadingImage = _a.loadingImage, | ||
enableAnnotations = _a.enableAnnotations, | ||
className = _a.className, | ||
spinLoadingImage = _a.spinLoadingImage, | ||
_b = _a.hideZoom, | ||
hideZoom = _b === void 0 ? false : _b; | ||
loadingImage = _a.loadingImage, | ||
enableAnnotations = _a.enableAnnotations, | ||
className = _a.className, | ||
spinLoadingImage = _a.spinLoadingImage, | ||
_b = _a.hideZoom, | ||
hideZoom = _b === void 0 ? false : _b; | ||
var _c = React.useState(1), | ||
zoom = _c[0], | ||
setZoom = _c[1]; | ||
zoom = _c[0], | ||
setZoom = _c[1]; | ||
var scrollContainerRef = React.useRef(); | ||
var viewerRef = React.useRef(); | ||
var _d = usePDF({ | ||
source: source, | ||
loadingImage: loadingImage, | ||
enableAnnotations: enableAnnotations, | ||
spinLoadingImage: spinLoadingImage, | ||
scrollContainer: scrollContainerRef.current, | ||
viewer: viewerRef.current | ||
}), | ||
pages = _d.pages, | ||
changeZoomStart = _d.changeZoomStart, | ||
changeZoomEnd = _d.changeZoomEnd, | ||
renderCurrentPage = _d.renderCurrentPage; | ||
var scrollDocument = ___default["default"].debounce(function () { | ||
source: source, | ||
loadingImage: loadingImage, | ||
enableAnnotations: enableAnnotations, | ||
spinLoadingImage: spinLoadingImage, | ||
scrollContainer: scrollContainerRef.current, | ||
viewer: viewerRef.current | ||
}), | ||
pages = _d.pages, | ||
changeZoomStart = _d.changeZoomStart, | ||
changeZoomEnd = _d.changeZoomEnd, | ||
renderCurrentPage = _d.renderCurrentPage; | ||
var scrollDocument = _.debounce(function () { | ||
return renderCurrentPage(); | ||
}, 100); | ||
var doZoom = function doZoom(newZoom) { | ||
@@ -780,6 +802,4 @@ setZoom(newZoom); | ||
}; | ||
React.useEffect(function () { | ||
var _a; | ||
var oldRef = scrollContainerRef.current; | ||
@@ -791,12 +811,12 @@ (_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", scrollDocument); | ||
}, [scrollDocument]); | ||
return /*#__PURE__*/React__default["default"].createElement("div", { | ||
return /*#__PURE__*/React.createElement("div", { | ||
className: [className, styles.fastScrollPDF].join(" ") | ||
}, hideZoom ? null : /*#__PURE__*/React__default["default"].createElement(ZoomButtons, { | ||
}, hideZoom ? null : /*#__PURE__*/React.createElement(ZoomButtons, { | ||
zoomChangeStart: doZoom, | ||
zoomChangeEnd: changeZoomEnd | ||
}), /*#__PURE__*/React__default["default"].createElement(PDFDocument, { | ||
}), /*#__PURE__*/React.createElement(PDFDocument, { | ||
scrollContainerRef: scrollContainerRef, | ||
viewerRef: viewerRef, | ||
pages: pages, | ||
rowGap: 32 * zoom + "px" | ||
rowGap: "".concat(32 * zoom, "px") | ||
})); | ||
@@ -810,3 +830,3 @@ }; | ||
exports.ZoomButtons = ZoomButtons; | ||
exports["default"] = FastScrollPDF; | ||
exports.default = FastScrollPDF; | ||
exports.usePDF = usePDF; | ||
@@ -813,0 +833,0 @@ |
@@ -1,8 +0,8 @@ | ||
import { PDFLinkService } from 'pdfjs-dist/legacy/web/pdf_viewer'; | ||
import { PDFLinkService } from 'pdfjs-dist/web/pdf_viewer'; | ||
import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react'; | ||
import _ from 'lodash'; | ||
import { produce } from 'immer'; | ||
import ReactHTMLParser from 'react-html-parser'; | ||
import parse from 'html-react-parser'; | ||
/*! ***************************************************************************** | ||
/****************************************************************************** | ||
Copyright (c) Microsoft Corporation. | ||
@@ -33,16 +33,54 @@ | ||
function __awaiter(thisArg, _arguments, P, generator) { | ||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
return new (P || (P = Promise))(function (resolve, reject) { | ||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } | ||
step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
}); | ||
} | ||
function __generator(thisArg, body) { | ||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; | ||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; | ||
function verb(n) { return function (v) { return step([n, v]); }; } | ||
function step(op) { | ||
if (f) throw new TypeError("Generator is already executing."); | ||
while (_) try { | ||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; | ||
if (y = 0, t) op = [op[0] & 2, t.value]; | ||
switch (op[0]) { | ||
case 0: case 1: t = op; break; | ||
case 4: _.label++; return { value: op[1], done: false }; | ||
case 5: _.label++; y = op[1]; op = [0]; continue; | ||
case 7: op = _.ops.pop(); _.trys.pop(); continue; | ||
default: | ||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } | ||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } | ||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } | ||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } | ||
if (t[2]) _.ops.pop(); | ||
_.trys.pop(); continue; | ||
} | ||
op = body.call(thisArg, _); | ||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } | ||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; | ||
} | ||
} | ||
var PDFPage = function PDFPage(_a) { | ||
var width = _a.width, | ||
height = _a.height, | ||
pageNum = _a.pageNum, | ||
imageSrc = _a.imageSrc, | ||
children = _a.children, | ||
_b = _a.type, | ||
type = _b === void 0 ? "canvas" : _b; | ||
height = _a.height, | ||
pageNum = _a.pageNum, | ||
imageSrc = _a.imageSrc, | ||
children = _a.children, | ||
_b = _a.type, | ||
type = _b === void 0 ? "canvas" : _b; | ||
return /*#__PURE__*/React.createElement("div", { | ||
"data-type": type, | ||
id: "page" + pageNum, | ||
id: "page".concat(pageNum), | ||
style: { | ||
width: width + "px", | ||
height: height + "px" | ||
width: "".concat(width, "px"), | ||
height: "".concat(height, "px") | ||
} | ||
@@ -55,3 +93,3 @@ }, /*#__PURE__*/React.createElement("img", { | ||
}, | ||
alt: "Page " + pageNum | ||
alt: "Page ".concat(pageNum) | ||
}), children); | ||
@@ -89,4 +127,4 @@ }; | ||
var css_248z$3 = ".PlaceholderPage-module_centered__ZF9i- {\n\tposition: absolute;\n\tleft: 50%;\n\ttop: 50%;\n\twidth: 32px;\n\theight: 32px;\n\ttransform: translate(-50%, -50%);\n}\n\n.PlaceholderPage-module_spinner__1h4QT {\n\tanimation: PlaceholderPage-module_rotation__3_THg 0.6s infinite linear;\n}\n\n@keyframes PlaceholderPage-module_rotation__3_THg {\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\n\tto {\n\t\ttransform: rotate(359deg);\n\t}\n}\n"; | ||
var styles$3 = {"centered":"PlaceholderPage-module_centered__ZF9i-","spinner":"PlaceholderPage-module_spinner__1h4QT","rotation":"PlaceholderPage-module_rotation__3_THg"}; | ||
var css_248z$3 = ".PlaceholderPage-module_centered__TqDpk {\n\tposition: absolute;\n\tleft: 50%;\n\ttop: 50%;\n\twidth: 32px;\n\theight: 32px;\n\ttransform: translate(-50%, -50%);\n}\n\n.PlaceholderPage-module_spinner__WQDRT {\n\tanimation: PlaceholderPage-module_rotation__I5jQi 0.6s infinite linear;\n}\n\n@keyframes PlaceholderPage-module_rotation__I5jQi {\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\n\tto {\n\t\ttransform: rotate(359deg);\n\t}\n}\n"; | ||
var styles$3 = {"centered":"PlaceholderPage-module_centered__TqDpk","spinner":"PlaceholderPage-module_spinner__WQDRT","rotation":"PlaceholderPage-module_rotation__I5jQi"}; | ||
styleInject(css_248z$3); | ||
@@ -96,13 +134,13 @@ | ||
var width = _a.width, | ||
height = _a.height, | ||
_b = _a.type, | ||
type = _b === void 0 ? "place" : _b, | ||
_c = _a.loadingImage, | ||
loadingImage = _c === void 0 ? img : _c, | ||
spin = _a.spin; | ||
height = _a.height, | ||
_b = _a.type, | ||
type = _b === void 0 ? "place" : _b, | ||
_c = _a.loadingImage, | ||
loadingImage = _c === void 0 ? img : _c, | ||
spin = _a.spin; | ||
var classes = [spin ? styles$3.spinner : "", styles$3.centered]; | ||
return /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
width: width + "px", | ||
height: height + "px" | ||
width: "".concat(width, "px"), | ||
height: "".concat(height, "px") | ||
}, | ||
@@ -118,21 +156,37 @@ "data-type": type | ||
var CMAP_URL = "pdfjs-dist/cmaps/"; | ||
var cleanupPage = function cleanupPage(page, attempts, maxAttempts) { | ||
if (attempts === void 0) { | ||
attempts = 0; | ||
} | ||
if (maxAttempts === void 0) { | ||
maxAttempts = 3; | ||
} | ||
return new Promise(function (resolve, reject) { | ||
var success = page.cleanup(true); | ||
if (success) { | ||
resolve(success); | ||
} else if (attempts <= maxAttempts) { | ||
setTimeout(function () { | ||
resolve(cleanupPage(page, attempts + 1)); | ||
}, 100 * attempts); | ||
} else { | ||
reject(new Error("Couldn't clean up the page")); | ||
} | ||
}); | ||
}; | ||
var usePDF = function usePDF(_a) { | ||
var source = _a.source, | ||
loadingImage = _a.loadingImage, | ||
_b = _a.enableAnnotations, | ||
enableAnnotations = _b === void 0 ? true : _b, | ||
_c = _a.spinLoadingImage, | ||
spinLoadingImage = _c === void 0 ? false : _c, | ||
scrollContainer = _a.scrollContainer, | ||
viewer = _a.viewer; | ||
loadingImage = _a.loadingImage, | ||
_b = _a.enableAnnotations, | ||
enableAnnotations = _b === void 0 ? true : _b, | ||
_c = _a.spinLoadingImage, | ||
spinLoadingImage = _c === void 0 ? false : _c, | ||
scrollContainer = _a.scrollContainer, | ||
viewer = _a.viewer; | ||
var _d = useState(), | ||
pdfDoc = _d[0], | ||
setPdfDoc = _d[1]; | ||
pdfDoc = _d[0], | ||
setPdfDoc = _d[1]; | ||
var _e = useState([]), | ||
pages = _e[0], | ||
setPages = _e[1]; | ||
pages = _e[0], | ||
setPages = _e[1]; | ||
var scaleRef = useRef(1); | ||
@@ -150,110 +204,141 @@ var prevSource = useRef(); | ||
var oldHeightRef = useRef(); | ||
var renderPage = useCallback(function (num) { | ||
if (!docLoaded.current) { | ||
return; | ||
} | ||
var processQueue = useMemo(function () { | ||
return _.debounce(function () { | ||
return __awaiter(void 0, void 0, void 0, function () { | ||
var renderPage, page; | ||
return __generator(this, function (_a) { | ||
switch (_a.label) { | ||
case 0: | ||
renderPage = function renderPage(num) { | ||
return __awaiter(void 0, void 0, void 0, function () { | ||
var page_1, viewport, ctx, renderContext, renderTask, annotationData, annotationDiv_1, e_1, e_2; | ||
return __generator(this, function (_a) { | ||
switch (_a.label) { | ||
case 0: | ||
if (!docLoaded.current) { | ||
return [2 /*return*/]; | ||
} | ||
if (pdfDoc) { | ||
pageRendering.current = true; | ||
pdfDoc.getPage(num).then(function (page) { | ||
// kill the render early if Q cleared | ||
if (renderQueue.current.length === 0) { | ||
pageRendering.current = false; | ||
return; | ||
} | ||
if (!pdfDoc) return [3 /*break*/, 11]; | ||
_a.label = 1; | ||
case 1: | ||
_a.trys.push([1, 10,, 11]); | ||
pageRendering.current = true; | ||
return [4 /*yield*/, pdfDoc.getPage(num)]; | ||
case 2: | ||
page_1 = _a.sent(); | ||
page_1.cleanupAfterRender = true; | ||
// kill the render early if Q cleared | ||
if (renderQueue.current.length === 0) { | ||
pageRendering.current = false; | ||
return [2 /*return*/]; | ||
} | ||
var viewport = page.getViewport({ | ||
scale: scaleRef.current | ||
}); | ||
pageCanvasRef.current.height = viewport.height; | ||
pageCanvasRef.current.width = viewport.width; | ||
var ctx = pageCanvasRef.current.getContext("2d"); // Render PDF page into canvas context | ||
viewport = page_1.getViewport({ | ||
scale: scaleRef.current | ||
}); | ||
pageCanvasRef.current.height = viewport.height; | ||
pageCanvasRef.current.width = viewport.width; | ||
ctx = pageCanvasRef.current.getContext("2d"); | ||
renderContext = { | ||
canvasContext: ctx, | ||
viewport: viewport, | ||
enableWebGL: true | ||
}; | ||
_a.label = 3; | ||
case 3: | ||
_a.trys.push([3, 6, 7, 9]); | ||
renderTask = page_1.render(renderContext); | ||
return [4 /*yield*/, renderTask.promise]; | ||
case 4: | ||
_a.sent(); | ||
if (renderQueue.current.length === 0) { | ||
return [2 /*return*/]; | ||
} | ||
var renderContext = { | ||
canvasContext: ctx, | ||
viewport: viewport, | ||
enableWebGL: true | ||
}; | ||
var loadingTask = page.render(renderContext); | ||
loadingTask.promise.then(function () { | ||
if (renderQueue.current.length === 0) { | ||
return null; | ||
} | ||
return [4 /*yield*/, page_1.getAnnotations()]; | ||
case 5: | ||
annotationData = _a.sent(); | ||
// kill the render early | ||
if (renderQueue.current.length === 0) { | ||
return [2 /*return*/]; | ||
} | ||
return page.getAnnotations(); | ||
}).then(function (annotationData) { | ||
// kill the render early | ||
if (renderQueue.current.length === 0) { | ||
return; | ||
} | ||
if (enableAnnotations) { | ||
annotationDiv_1 = document.createElement("div"); | ||
annotationDiv_1.id = "annot".concat(num); | ||
annotationDiv_1.className = "annotationLayer"; | ||
pdfjsLib.current.AnnotationLayer.render({ | ||
viewport: viewport.clone({ | ||
dontFlip: true | ||
}), | ||
div: annotationDiv_1, | ||
annotations: annotationData, | ||
page: page_1, | ||
linkService: linkService | ||
}); | ||
} | ||
setPages(function (oldPages) { | ||
return produce(oldPages, function (draft) { | ||
var _a; | ||
var _b = (_a = viewportRef.current) !== null && _a !== void 0 ? _a : { | ||
width: 100, | ||
height: 100 | ||
}, | ||
width = _b.width, | ||
height = _b.height; | ||
draft[num] = /*#__PURE__*/React.createElement(PDFPage, { | ||
pageNum: num, | ||
width: width, | ||
height: height, | ||
imageSrc: pageCanvasRef.current.toDataURL("image/png"), | ||
key: "page".concat(num) | ||
}, enableAnnotations ? parse(annotationDiv_1.outerHTML) : null); | ||
}); | ||
}); | ||
return [3 /*break*/, 9]; | ||
case 6: | ||
e_1 = _a.sent(); | ||
console.error(e_1); | ||
if (e_1.name !== "RenderingCancelledException") { | ||
console.error("Render Page: ".concat(e_1)); | ||
} | ||
return [3 /*break*/, 9]; | ||
case 7: | ||
return [4 /*yield*/, cleanupPage(page_1)]; | ||
case 8: | ||
_a.sent(); | ||
renderQueue.current = renderQueue.current.filter(function (p) { | ||
return p !== num; | ||
}); | ||
pageRendering.current = false; | ||
processQueue(); | ||
return [7 /*endfinally*/]; | ||
case 9: | ||
return [3 /*break*/, 11]; | ||
case 10: | ||
e_2 = _a.sent(); | ||
console.error(e_2); | ||
pageRendering.current = false; | ||
return [3 /*break*/, 11]; | ||
case 11: | ||
return [2 /*return*/]; | ||
} | ||
}); | ||
}); | ||
}; | ||
var annotationDiv; | ||
if (enableAnnotations) { | ||
annotationDiv = document.createElement("div"); | ||
annotationDiv.id = "annot" + num; | ||
annotationDiv.className = "annotationLayer"; | ||
pdfjsLib.current.AnnotationLayer.render({ | ||
viewport: viewport.clone({ | ||
dontFlip: true | ||
}), | ||
div: annotationDiv, | ||
annotations: annotationData, | ||
page: page, | ||
linkService: linkService | ||
}); | ||
page = renderQueue.current[0]; | ||
if (!(page && !pageRendering.current)) return [3 /*break*/, 2]; | ||
return [4 /*yield*/, renderPage(page)]; | ||
case 1: | ||
_a.sent(); | ||
_a.label = 2; | ||
case 2: | ||
return [2 /*return*/]; | ||
} | ||
setPages(function (oldPages) { | ||
return produce(oldPages, function (draft) { | ||
var _a; | ||
var _b = (_a = viewportRef.current) !== null && _a !== void 0 ? _a : { | ||
width: 100, | ||
height: 100 | ||
}, | ||
width = _b.width, | ||
height = _b.height; | ||
draft[num] = /*#__PURE__*/React.createElement(PDFPage, { | ||
pageNum: num, | ||
width: width, | ||
height: height, | ||
imageSrc: pageCanvasRef.current.toDataURL("image/png"), | ||
key: "page" + num | ||
}, enableAnnotations ? ReactHTMLParser(annotationDiv.outerHTML) : null); | ||
}); | ||
}); | ||
})["catch"](function (e) { | ||
if (e.name !== "RenderingCancelledException") { | ||
console.error("Render Page: " + e); | ||
} | ||
})["finally"](function () { | ||
pageRendering.current = false; | ||
page.cleanup(); | ||
renderQueue.current = renderQueue.current.filter(function (p) { | ||
return p !== num; | ||
}); | ||
if (renderQueue.current.length > 0) { | ||
// New page rendering is pending | ||
var no = renderQueue.current[0]; | ||
renderPage(no); | ||
} | ||
}); | ||
})["catch"](function (err) { | ||
console.error(err); | ||
pageRendering.current = false; | ||
}); | ||
} | ||
}, [pdfDoc, linkService, enableAnnotations]); | ||
var processQueue = useMemo(function () { | ||
return _.debounce(function () { | ||
var page = renderQueue.current[0]; | ||
if (page && !pageRendering.current) { | ||
renderPage(page); | ||
} | ||
}, 100); | ||
}, [renderPage, renderQueue, pageRendering]); | ||
}, [pdfDoc, enableAnnotations, linkService]); | ||
var queueRenderPage = useCallback(function (num, jumpQueue) { | ||
@@ -263,10 +348,7 @@ if (jumpQueue === void 0) { | ||
} | ||
if (jumpQueue) { | ||
var ind = renderQueue.current.indexOf(num); | ||
if (ind >= 0) { | ||
renderQueue.current.splice(ind, 1); | ||
} | ||
renderQueue.current.unshift(num); | ||
@@ -276,3 +358,2 @@ } else if (!renderQueue.current.includes(num)) { | ||
} | ||
processQueue(); | ||
@@ -282,6 +363,4 @@ }, [processQueue]); | ||
var currPage = 1; | ||
if (viewer && scrollContainer) { | ||
var children = (viewer !== null && viewer !== void 0 ? viewer : {}).children; | ||
for (var i = 0; i < children.length; i += 1) { | ||
@@ -293,3 +372,2 @@ if (children[i].offsetTop <= scrollContainer.scrollTop + 33) { | ||
} | ||
return currPage; | ||
@@ -299,12 +377,9 @@ }, [scrollContainer, viewer]); | ||
var _a, _b; | ||
processQueue.cancel(); | ||
scaleRef.current = scale; | ||
renderQueue.current.length = 0; | ||
var oldTopPos = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTop) / (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollHeight); | ||
var oldTopPos = scrollContainer ? scrollContainer.scrollTop / scrollContainer.scrollHeight : 0; | ||
if (!oldHeightRef.current) { | ||
oldHeightRef.current = (_b = (_a = viewportRef.current) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 300; | ||
} | ||
pdfDoc === null || pdfDoc === void 0 ? void 0 : pdfDoc.getPage(1).then(function (page) { | ||
@@ -315,4 +390,4 @@ viewportRef.current = page.getViewport({ | ||
var _a = viewportRef.current, | ||
width = _a.width, | ||
height = _a.height; | ||
width = _a.width, | ||
height = _a.height; | ||
page.cleanup(); | ||
@@ -324,8 +399,6 @@ setPages(function (oldPages) { | ||
} | ||
var _a = pg.props, | ||
imageSrc = _a.imageSrc, | ||
children = _a.children; | ||
var key = "page" + index; | ||
imageSrc = _a.imageSrc, | ||
children = _a.children; | ||
var key = "page".concat(index); | ||
if (imageSrc) { | ||
@@ -340,3 +413,2 @@ return /*#__PURE__*/React.createElement(PDFPage, { | ||
} | ||
return /*#__PURE__*/React.createElement(PlaceholderPage, { | ||
@@ -351,3 +423,2 @@ key: key, | ||
}); | ||
if (scrollContainer) { | ||
@@ -358,3 +429,3 @@ var scroller = scrollContainer; | ||
})["catch"](function (e) { | ||
return console.error("Change Zoom " + e); | ||
return console.error("Change Zoom ".concat(e)); | ||
}); | ||
@@ -364,3 +435,2 @@ }, [processQueue, scrollContainer, pdfDoc, loadingImage, spinLoadingImage]); | ||
var _a; | ||
if (pdfDoc) { | ||
@@ -370,7 +440,5 @@ oldHeightRef.current = undefined; | ||
queueRenderPage(currPage, true); | ||
if (currPage + 1 < pdfDoc.numPages) { | ||
queueRenderPage(currPage + 1, true); | ||
} | ||
for (var i = 1; (_a = i <= pdfDoc.numPages) !== null && _a !== void 0 ? _a : 0; i += 1) { | ||
@@ -391,16 +459,11 @@ if (i !== currPage && i !== currPage + 1) { | ||
} | ||
var currPage = getCurrentPage(); | ||
var nextPage = Math.min(currPage + 1, (pdfDoc === null || pdfDoc === void 0 ? void 0 : pdfDoc.numPages) || 1); | ||
var isPageRendered = function isPageRendered(pageNo) { | ||
var _a; | ||
return !!((_a = pages[pageNo]) === null || _a === void 0 ? void 0 : _a.props.imageSrc); | ||
}; | ||
if (force || !isPageRendered(nextPage)) { | ||
queueRenderPage(nextPage, true); | ||
} | ||
if (force || !isPageRendered(currPage) || force) { | ||
@@ -417,10 +480,9 @@ queueRenderPage(currPage, true); | ||
prevSource.current = source; | ||
setPages([]); // @ts-ignore | ||
import('pdfjs-dist/legacy/build/pdf').then(function (lib) { | ||
pdfjsLib.current = lib; // @ts-ignore | ||
import('pdfjs-dist/legacy/build/pdf.worker.entry').then(function (pdfjsWorker) { | ||
setPages([]); | ||
// @ts-ignore | ||
import('pdfjs-dist/build/pdf').then(function (lib) { | ||
pdfjsLib.current = lib; | ||
// @ts-ignore | ||
import('pdfjs-dist/build/pdf.worker.entry').then(function (pdfjsWorker) { | ||
var _a, _b; | ||
pdfjsLib.current.GlobalWorkerOptions.workerSrc = pdfjsWorker; | ||
@@ -442,3 +504,3 @@ var loadingTask = (_b = (_a = pdfjsLib.current) === null || _a === void 0 ? void 0 : _a.getDocument) === null || _b === void 0 ? void 0 : _b.call(_a, __assign({ | ||
"data-type": "error" | ||
}, "Error loading PDF: " + err)]); | ||
}, "Error loading PDF: ".concat(err))]); | ||
}); | ||
@@ -459,15 +521,12 @@ }); | ||
var _a; | ||
var _b = (_a = viewportRef.current) !== null && _a !== void 0 ? _a : { | ||
width: 100, | ||
height: 100 | ||
}, | ||
width = _b.width, | ||
height = _b.height; | ||
width: 100, | ||
height: 100 | ||
}, | ||
width = _b.width, | ||
height = _b.height; | ||
var numPages = pdfDoc.numPages; | ||
for (var i = 1; i <= numPages; i += 1) { | ||
draft[i] = /*#__PURE__*/React.createElement(PlaceholderPage, { | ||
key: "page" + i, | ||
key: "page".concat(i), | ||
width: width, | ||
@@ -481,3 +540,2 @@ height: height, | ||
}); | ||
for (var i = 1; i <= pdfDoc.numPages; i += 1) { | ||
@@ -487,3 +545,3 @@ queueRenderPage(i); | ||
})["catch"](function (e) { | ||
return console.error("UseEffect (pdfDoc, queueRenderPage, loadingImage) " + e); | ||
return console.error("UseEffect (pdfDoc, queueRenderPage, loadingImage) ".concat(e)); | ||
}); | ||
@@ -499,3 +557,2 @@ } | ||
var _a, _b; | ||
renderQueue.current.length = 0; | ||
@@ -518,8 +575,7 @@ docLoaded.current = false; | ||
var css_248z$2 = ".ZoomButtons-module_zoomButton__YnxdA {\n\twidth: 50px;\n\tborder-left: 0;\n\tborder-right: 0;\n\tborder-radius: 0;\n\tmargin-right: 3px;\n\tmargin-top: 0;\n\tmargin-bottom: 0;\n\tbackground: none;\n\tpadding: 10px;\n\tbackground-color: rgb(240, 240, 240);\n\tcolor: rgb(0, 0, 0);\n\tfont-weight: 600;\n\ttext-align: center;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n\ttransition: 0.2s all ease-out;\n\tflex: 1;\n}\n\n.ZoomButtons-module_buttonGroup__BB1on {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: flex-end;\n\twidth: 110px;\n\tmargin-top: 3px;\n\tmargin-bottom: 3px;\n\tmargin-left: auto;\n\tmargin-right: 3px;\n\t\n\t-webkit-user-select: none;\n\tuser-select: none;\n\t-webkit-touch-callout: none;\n}\n\n.ZoomButtons-module_buttonGroup__BB1on .ZoomButtons-module_zoomButton__YnxdA:first-of-type {\n\tborder-top-left-radius: 3px;\n\tborder-bottom-left-radius: 3px;\n}\n\n.ZoomButtons-module_buttonGroup__BB1on .ZoomButtons-module_zoomButton__YnxdA:last-of-type {\n\tborder-top-right-radius: 3px;\n\tborder-bottom-right-radius: 3px;\n\tmargin-right: 0;\n}\n"; | ||
var styles$2 = {"zoomButton":"ZoomButtons-module_zoomButton__YnxdA","buttonGroup":"ZoomButtons-module_buttonGroup__BB1on"}; | ||
var css_248z$2 = ".ZoomButtons-module_zoomButton__vkmtA {\n\twidth: 50px;\n\tborder-left: 0;\n\tborder-right: 0;\n\tborder-radius: 0;\n\tmargin-right: 3px;\n\tmargin-top: 0;\n\tmargin-bottom: 0;\n\tbackground: none;\n\tpadding: 10px;\n\tbackground-color: rgb(240, 240, 240);\n\tcolor: rgb(0, 0, 0);\n\tfont-weight: 600;\n\ttext-align: center;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n\ttransition: 0.2s all ease-out;\n\tflex: 1;\n}\n\n.ZoomButtons-module_buttonGroup__ol-bo {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: flex-end;\n\twidth: 110px;\n\tmargin-top: 3px;\n\tmargin-bottom: 3px;\n\tmargin-left: auto;\n\tmargin-right: 3px;\n\t\n\t-webkit-user-select: none;\n\tuser-select: none;\n\t-webkit-touch-callout: none;\n}\n\n.ZoomButtons-module_buttonGroup__ol-bo .ZoomButtons-module_zoomButton__vkmtA:first-of-type {\n\tborder-top-left-radius: 3px;\n\tborder-bottom-left-radius: 3px;\n}\n\n.ZoomButtons-module_buttonGroup__ol-bo .ZoomButtons-module_zoomButton__vkmtA:last-of-type {\n\tborder-top-right-radius: 3px;\n\tborder-bottom-right-radius: 3px;\n\tmargin-right: 0;\n}\n"; | ||
var styles$2 = {"zoomButton":"ZoomButtons-module_zoomButton__vkmtA","buttonGroup":"ZoomButtons-module_buttonGroup__ol-bo"}; | ||
styleInject(css_248z$2); | ||
var ZoomDirection; | ||
(function (ZoomDirection) { | ||
@@ -530,9 +586,8 @@ ZoomDirection[ZoomDirection["In"] = 1] = "In"; | ||
})(ZoomDirection || (ZoomDirection = {})); | ||
var ZoomButton = function ZoomButton(_a) { | ||
var style = _a.style, | ||
disabled = _a.disabled, | ||
start = _a.start, | ||
end = _a.end, | ||
children = _a.children; | ||
disabled = _a.disabled, | ||
start = _a.start, | ||
end = _a.end, | ||
children = _a.children; | ||
return /*#__PURE__*/React.createElement("button", { | ||
@@ -550,19 +605,17 @@ type: "button", | ||
}; | ||
var ZoomButtons = function ZoomButtons(_a) { | ||
var _b; | ||
var zoomChangeStart = _a.zoomChangeStart, | ||
zoomChangeEnd = _a.zoomChangeEnd, | ||
_c = _a.zoomStep, | ||
zoomStep = _c === void 0 ? 1 : _c, | ||
// change per second | ||
_d = _a.zoomStart, | ||
// change per second | ||
zoomStart = _d === void 0 ? 1 : _d, | ||
_e = _a.minZoom, | ||
minZoom = _e === void 0 ? 0.1 : _e, | ||
_f = _a.maxZoom, | ||
maxZoom = _f === void 0 ? 5 : _f, | ||
className = _a.className; | ||
zoomChangeEnd = _a.zoomChangeEnd, | ||
_c = _a.zoomStep, | ||
zoomStep = _c === void 0 ? 1 : _c, | ||
// change per second | ||
_d = _a.zoomStart, | ||
// change per second | ||
zoomStart = _d === void 0 ? 1 : _d, | ||
_e = _a.minZoom, | ||
minZoom = _e === void 0 ? 0.1 : _e, | ||
_f = _a.maxZoom, | ||
maxZoom = _f === void 0 ? 5 : _f, | ||
className = _a.className; | ||
var zoomStateRef = useRef((_b = { | ||
@@ -573,18 +626,14 @@ pos: zoomStart || 1, | ||
}) !== null && _b !== void 0 ? _b : 1); | ||
var doZoom = function doZoom(timestamp) { | ||
var _a = zoomStateRef.current, | ||
pos = _a.pos, | ||
direction = _a.direction, | ||
lastTimestamp = _a.lastTimestamp; | ||
pos = _a.pos, | ||
direction = _a.direction, | ||
lastTimestamp = _a.lastTimestamp; | ||
if (direction === ZoomDirection.None) { | ||
return; | ||
} | ||
var diff = Math.max(0, timestamp - lastTimestamp) || 20; // 1st move 20 ms step | ||
// make maxium 'jump' 50ms worth of zoom. | ||
var secsPassed = Math.min(50, diff) / 1000; // zoom in/out step every second | ||
var secsPassed = Math.min(50, diff) / 1000; | ||
// zoom in/out step every second | ||
var step = 1 + direction * secsPassed * zoomStep; | ||
@@ -597,3 +646,2 @@ var zoom = Math.max(minZoom, Math.min(maxZoom, pos * step)); | ||
}; | ||
if (zoom !== pos) { | ||
@@ -603,3 +651,2 @@ if (timestamp === 0) { | ||
var dir = zoomStateRef.current.direction; | ||
if (dir !== ZoomDirection.None) { | ||
@@ -612,3 +659,2 @@ zoomStateRef.current.animReq = window.requestAnimationFrame(doZoom); | ||
} | ||
zoomChangeStart(zoom); | ||
@@ -620,18 +666,13 @@ } else { | ||
}; | ||
var setZoomDirection = function setZoomDirection(newDirection) { | ||
var _a = zoomStateRef.current, | ||
direction = _a.direction, | ||
animReq = _a.animReq, | ||
lastTimestamp = _a.lastTimestamp; | ||
direction = _a.direction, | ||
animReq = _a.animReq, | ||
lastTimestamp = _a.lastTimestamp; | ||
if (newDirection === direction) { | ||
return; | ||
} | ||
var currentlyAnimating = direction !== ZoomDirection.None; | ||
if (newDirection === ZoomDirection.None) { | ||
var timeout = 20; // 20 ms - magic number! | ||
if (animReq && lastTimestamp !== 0) { | ||
@@ -643,3 +684,2 @@ // Stop immediately, we have already animated a couple of frames + | ||
} | ||
setTimeout(function () { | ||
@@ -651,10 +691,7 @@ zoomStateRef.current = __assign(__assign({}, zoomStateRef.current), { | ||
}, timeout); // otherwise let it carry on a bit for short taps | ||
return; | ||
} | ||
zoomStateRef.current = __assign(__assign({}, zoomStateRef.current), { | ||
direction: newDirection | ||
}); | ||
if (!currentlyAnimating) { | ||
@@ -665,15 +702,11 @@ zoomStateRef.current.lastTimestamp = 0; | ||
}; | ||
var zoomInStart = function zoomInStart() { | ||
return setZoomDirection(ZoomDirection.In); | ||
}; | ||
var zoomOutStart = function zoomOutStart() { | ||
return setZoomDirection(ZoomDirection.Out); | ||
}; | ||
var zoomEnd = function zoomEnd() { | ||
return setZoomDirection(ZoomDirection.None); | ||
}; | ||
useEffect(function () { | ||
@@ -685,3 +718,3 @@ zoomStateRef.current = __assign(__assign({}, zoomStateRef.current), { | ||
var zoomPos = zoomStateRef.current.pos; | ||
var style = className + " " + styles$2.zoomButton; | ||
var style = "".concat(className, " ").concat(styles$2.zoomButton); | ||
return /*#__PURE__*/React.createElement("div", { | ||
@@ -702,4 +735,4 @@ className: styles$2.buttonGroup | ||
var css_248z$1 = ".PDFDocument-module_pdfDocument__3MrjJ {\n\toverflow-y: scroll;\n\toverflow-x: hidden;\n\twidth: 100%;\n\tflex: 1\n}\n\n.PDFDocument-module_viewer__2JOdZ {\n\tdisplay: grid;\n\tgrid-gap: 0;\n\tjustify-items: center;\n\ttext-align: center;\n\trow-gap: 16px;\n\ttransition: opacity 0.3s ease-in-out;\n}\n\n.PDFDocument-module_viewer__2JOdZ > div {\n\tposition: relative;\n\tbackground-color: white;\n\tbox-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);\n}\n\n.PDFDocument-module_viewer__2JOdZ .canvasWrapper {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n}\n\n.PDFDocument-module_viewer__2JOdZ .annotationLayer {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n}\n\n.PDFDocument-module_viewer__2JOdZ .linkAnnotation {\n\tposition: absolute;\n}\n\n.PDFDocument-module_viewer__2JOdZ .linkAnnotation a {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: block;\n\tcursor: pointer;\n}\n"; | ||
var styles$1 = {"pdfDocument":"PDFDocument-module_pdfDocument__3MrjJ","viewer":"PDFDocument-module_viewer__2JOdZ"}; | ||
var css_248z$1 = ".PDFDocument-module_pdfDocument__xIoMD {\n\toverflow-y: scroll;\n\toverflow-x: hidden;\n\twidth: 100%;\n\tflex: 1\n}\n\n.PDFDocument-module_viewer__kXSEN {\n\tdisplay: grid;\n\tgrid-gap: 0;\n\tjustify-items: center;\n\ttext-align: center;\n\trow-gap: 16px;\n\ttransition: opacity 0.3s ease-in-out;\n}\n\n.PDFDocument-module_viewer__kXSEN > div {\n\tposition: relative;\n\tbackground-color: white;\n\tbox-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);\n}\n\n.PDFDocument-module_viewer__kXSEN .canvasWrapper {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n}\n\n.PDFDocument-module_viewer__kXSEN .annotationLayer {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n}\n\n.PDFDocument-module_viewer__kXSEN .linkAnnotation {\n\tposition: absolute;\n}\n\n.PDFDocument-module_viewer__kXSEN .linkAnnotation a {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: block;\n\tcursor: pointer;\n}\n"; | ||
var styles$1 = {"pdfDocument":"PDFDocument-module_pdfDocument__xIoMD","viewer":"PDFDocument-module_viewer__kXSEN"}; | ||
styleInject(css_248z$1); | ||
@@ -709,6 +742,6 @@ | ||
var scrollContainerRef = _a.scrollContainerRef, | ||
viewerRef = _a.viewerRef, | ||
pages = _a.pages, | ||
className = _a.className, | ||
rowGap = _a.rowGap; | ||
viewerRef = _a.viewerRef, | ||
pages = _a.pages, | ||
className = _a.className, | ||
rowGap = _a.rowGap; | ||
return /*#__PURE__*/React.createElement("div", { | ||
@@ -728,4 +761,4 @@ id: "scrollContainer", | ||
var css_248z = ".FastScrollPDF-module_fastScrollPDF__1kUDm {\n\twidth: 100%;\n}\n"; | ||
var styles = {"fastScrollPDF":"FastScrollPDF-module_fastScrollPDF__1kUDm"}; | ||
var css_248z = ".FastScrollPDF-module_fastScrollPDF__Zb4BI {\n\twidth: 100%;\n}\n"; | ||
var styles = {"fastScrollPDF":"FastScrollPDF-module_fastScrollPDF__Zb4BI"}; | ||
styleInject(css_248z); | ||
@@ -735,33 +768,28 @@ | ||
var source = _a.source, | ||
loadingImage = _a.loadingImage, | ||
enableAnnotations = _a.enableAnnotations, | ||
className = _a.className, | ||
spinLoadingImage = _a.spinLoadingImage, | ||
_b = _a.hideZoom, | ||
hideZoom = _b === void 0 ? false : _b; | ||
loadingImage = _a.loadingImage, | ||
enableAnnotations = _a.enableAnnotations, | ||
className = _a.className, | ||
spinLoadingImage = _a.spinLoadingImage, | ||
_b = _a.hideZoom, | ||
hideZoom = _b === void 0 ? false : _b; | ||
var _c = useState(1), | ||
zoom = _c[0], | ||
setZoom = _c[1]; | ||
zoom = _c[0], | ||
setZoom = _c[1]; | ||
var scrollContainerRef = useRef(); | ||
var viewerRef = useRef(); | ||
var _d = usePDF({ | ||
source: source, | ||
loadingImage: loadingImage, | ||
enableAnnotations: enableAnnotations, | ||
spinLoadingImage: spinLoadingImage, | ||
scrollContainer: scrollContainerRef.current, | ||
viewer: viewerRef.current | ||
}), | ||
pages = _d.pages, | ||
changeZoomStart = _d.changeZoomStart, | ||
changeZoomEnd = _d.changeZoomEnd, | ||
renderCurrentPage = _d.renderCurrentPage; | ||
source: source, | ||
loadingImage: loadingImage, | ||
enableAnnotations: enableAnnotations, | ||
spinLoadingImage: spinLoadingImage, | ||
scrollContainer: scrollContainerRef.current, | ||
viewer: viewerRef.current | ||
}), | ||
pages = _d.pages, | ||
changeZoomStart = _d.changeZoomStart, | ||
changeZoomEnd = _d.changeZoomEnd, | ||
renderCurrentPage = _d.renderCurrentPage; | ||
var scrollDocument = _.debounce(function () { | ||
return renderCurrentPage(); | ||
}, 100); | ||
var doZoom = function doZoom(newZoom) { | ||
@@ -771,6 +799,4 @@ setZoom(newZoom); | ||
}; | ||
useEffect(function () { | ||
var _a; | ||
var oldRef = scrollContainerRef.current; | ||
@@ -791,3 +817,3 @@ (_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", scrollDocument); | ||
pages: pages, | ||
rowGap: 32 * zoom + "px" | ||
rowGap: "".concat(32 * zoom, "px") | ||
})); | ||
@@ -794,0 +820,0 @@ }; |
@@ -7,7 +7,8 @@ { | ||
"private": true, | ||
"type": "commonjs", | ||
"dependencies": { | ||
"react": "file:../node_modules/react", | ||
"react-dom": "^17.0.2", | ||
"react-dom": "^18.2.0", | ||
"react-fast-scroll-pdf": "file:..", | ||
"react-icons": "^4.3.1" | ||
"react-icons": "^4.4.0" | ||
}, | ||
@@ -26,4 +27,4 @@ "scripts": { | ||
"devDependencies": { | ||
"@types/react-dom": "^17.0.9" | ||
"@types/react-dom": "^18.0.6" | ||
} | ||
} |
{ | ||
"name": "react-fast-scroll-pdf", | ||
"version": "1.0.3", | ||
"version": "1.1.1", | ||
"description": "Image-based PDF viewer using pdfjs", | ||
@@ -35,49 +35,48 @@ "author": "wearemothership", | ||
"dependencies": { | ||
"immer": "^9.0.6", | ||
"html-react-parser": "^3.0.4", | ||
"immer": "^9.0.15", | ||
"lodash": "^4.17.21", | ||
"pdfjs-dist": "^2.8.335", | ||
"react-html-parser": "^2.0.2" | ||
"pdfjs-dist": "^2.16.105" | ||
}, | ||
"peerDependencies": { | ||
"react": "~17.0.0" | ||
"react": "^18.0.0" | ||
}, | ||
"devDependencies": { | ||
"@babel/core": "^7.15.5", | ||
"@babel/plugin-transform-react-jsx": "^7.14.9", | ||
"@babel/plugin-transform-runtime": "^7.15.0", | ||
"@babel/preset-env": "^7.15.6", | ||
"@babel/preset-react": "^7.14.5", | ||
"@babel/runtime": "^7.15.4", | ||
"@rollup/plugin-babel": "^5.3.0", | ||
"@rollup/plugin-commonjs": "^21.0.0", | ||
"@rollup/plugin-eslint": "^8.0.1", | ||
"@rollup/plugin-image": "^2.1.1", | ||
"@rollup/plugin-json": "^4.1.0", | ||
"@rollup/plugin-node-resolve": "^13.0.5", | ||
"@rollup/plugin-typescript": "^8.2.5", | ||
"@testing-library/react-hooks": "^7.0.2", | ||
"@types/jest": "^27.0.2", | ||
"@types/lodash": "^4.14.175", | ||
"@types/react": "^17.0.27", | ||
"@babel/core": "^7.19.3", | ||
"@babel/plugin-transform-react-jsx": "^7.19.0", | ||
"@babel/plugin-transform-runtime": "^7.19.1", | ||
"@babel/preset-env": "^7.19.4", | ||
"@babel/preset-react": "^7.18.6", | ||
"@babel/runtime": "^7.19.4", | ||
"@rollup/plugin-babel": "^6.0.0", | ||
"@rollup/plugin-commonjs": "^23.0.0", | ||
"@rollup/plugin-eslint": "^9.0.0", | ||
"@rollup/plugin-image": "^3.0.0", | ||
"@rollup/plugin-json": "^5.0.0", | ||
"@rollup/plugin-node-resolve": "^15.0.0", | ||
"@rollup/plugin-typescript": "^9.0.1", | ||
"@types/jest": "^29.1.2", | ||
"@types/lodash": "^4.14.186", | ||
"@types/react": "^18.0.21", | ||
"@types/react-html-parser": "^2.0.2", | ||
"@typescript-eslint/eslint-plugin": "^4.32.0", | ||
"@typescript-eslint/parser": "^4.32.0", | ||
"@typescript-eslint/eslint-plugin": "^5.40.0", | ||
"@typescript-eslint/parser": "^5.40.0", | ||
"cross-env": "^7.0.3", | ||
"eslint-config-airbnb": "^18.2.1", | ||
"eslint-plugin-import": "^2.24.2", | ||
"eslint-plugin-jest": "^24.5.2", | ||
"eslint-plugin-jsx-a11y": "^6.4.1", | ||
"eslint-plugin-react": "^7.26.1", | ||
"gh-pages": "^3.2.3", | ||
"nan": "^2.15.0", | ||
"postcss": "^8.3.8", | ||
"react": "^17.0.2", | ||
"react-scripts": "^4.0.3", | ||
"eslint-config-airbnb": "^19.0.4", | ||
"eslint-plugin-import": "^2.26.0", | ||
"eslint-plugin-jest": "^27.1.1", | ||
"eslint-plugin-jsx-a11y": "^6.6.1", | ||
"eslint-plugin-react": "^7.31.10", | ||
"gh-pages": "^4.0.0", | ||
"nan": "^2.17.0", | ||
"postcss": "^8.4.17", | ||
"react": "~18.2.0", | ||
"react-scripts": "^5.0.1", | ||
"rimraf": "^3.0.2", | ||
"rollup": "^2.58.0", | ||
"rollup": "^3.1.0", | ||
"rollup-plugin-node-polyfills": "^0.2.1", | ||
"rollup-plugin-peer-deps-external": "^2.2.4", | ||
"rollup-plugin-postcss": "^4.0.1", | ||
"tslib": "^2.3.1", | ||
"typescript": "^4.4.3" | ||
"rollup-plugin-postcss": "^4.0.2", | ||
"tslib": "^2.4.0", | ||
"typescript": "^4.8.4" | ||
}, | ||
@@ -84,0 +83,0 @@ "babel": { |
@@ -0,1 +1,3 @@ | ||
declare module "@bundled-es-modules/pdfjs-dist/web/pdf_viewer.js" {} | ||
type TDivType = "place" | "canvas" | ||
@@ -2,0 +4,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
37
35602
1371303
+ Addedhtml-react-parser@^3.0.4
+ Addeddom-serializer@2.0.0(transitive)
+ Addeddomhandler@5.0.3(transitive)
+ Addeddomutils@3.1.0(transitive)
+ Addedentities@4.5.0(transitive)
+ Addedhtml-dom-parser@3.1.7(transitive)
+ Addedhtml-react-parser@3.0.16(transitive)
+ Addedhtmlparser2@8.0.2(transitive)
+ Addedinline-style-parser@0.1.1(transitive)
+ Addedreact@18.3.1(transitive)
+ Addedreact-property@2.0.0(transitive)
+ Addedstyle-to-js@1.1.3(transitive)
+ Addedstyle-to-object@0.4.1(transitive)
- Removedreact-html-parser@^2.0.2
- Removeddom-serializer@0.2.2(transitive)
- Removeddomelementtype@1.3.1(transitive)
- Removeddomhandler@2.4.2(transitive)
- Removeddomutils@1.7.0(transitive)
- Removedentities@1.1.22.2.0(transitive)
- Removedhtmlparser2@3.10.1(transitive)
- Removedinherits@2.0.4(transitive)
- Removedobject-assign@4.1.1(transitive)
- Removedprop-types@15.8.1(transitive)
- Removedreact@16.14.017.0.2(transitive)
- Removedreact-html-parser@2.0.2(transitive)
- Removedreact-is@16.13.1(transitive)
- Removedreadable-stream@3.6.2(transitive)
- Removedsafe-buffer@5.2.1(transitive)
- Removedstring_decoder@1.3.0(transitive)
- Removedutil-deprecate@1.0.2(transitive)
Updatedimmer@^9.0.15
Updatedpdfjs-dist@^2.16.105