| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333 |
- var LAYER_CHANGE_ACTIVE_CLASS = 'layerChange-active'
- // 获取 button 元素
- var layerChangeButton = document.getElementById('layerChange');
- var isLayerChangeButtonActive = () => {
- return layerChangeButton.classList.contains(LAYER_CHANGE_ACTIVE_CLASS)
- }
- var getLocale = () => {
- console.log('test-iframe-locale', localStorage.getItem('umi-locale') ,localStorage.getItem('locale') , '')
- return localStorage.getItem('umi_locale') || localStorage.getItem('locale') || 'zh-CN';
- }
- // 添加tooltip
- function createHoverTooltip(element, tooltipText, id, options = {}) {
- const tooltip = document.createElement('div');
- tooltip.className = `tooltip-${id} tooltip`;
- tooltip.style.display = 'none';
- tooltip.style.zIndex = '999';
- document.body.appendChild(tooltip);
- const defaultOptions = {
- offset: { y: 10 },
- delay: 200,
- duration: 200,
- };
- const mergedOptions = { ...defaultOptions, ...options };
- let tooltipTimer;
- function positionTooltip() {
- const rect = element.getBoundingClientRect();
- const tooltipRect = tooltip.getBoundingClientRect();
- const left = rect.left + (rect.width - tooltipRect.width) / 2;
- const top = rect.bottom + mergedOptions.offset.y;
- tooltip.style.left = `${left}px`;
- tooltip.style.top = `${top}px`;
- }
- function showTooltip() {
- tooltip.textContent = tooltipText;
- tooltip.style.display = 'block';
- tooltip.style.opacity = '0';
- tooltip.style.transition = `opacity ${mergedOptions.duration}ms`;
- positionTooltip();
- setTimeout(() => {
- tooltip.style.opacity = '1';
- }, 10);
- }
- function hideTooltip() {
- tooltip.style.opacity = '0';
- setTimeout(() => {
- tooltip.style.display = 'none';
- }, mergedOptions.duration);
- }
- element.addEventListener('mouseenter', () => {
- tooltipTimer = setTimeout(showTooltip, mergedOptions.delay);
- });
- element.addEventListener('mouseleave', () => {
- clearTimeout(tooltipTimer);
- hideTooltip();
- });
- window.addEventListener('resize', positionTooltip);
- window.addEventListener('scroll', positionTooltip);
- // 返回对象,包含 updateTooltipText 函数
- return {
- updateTooltipText: (newText) => {
- tooltipText = newText;
- positionTooltip()
- if (tooltip.style.display !== 'none') {
- showTooltip();
- tooltipText = newText;
- }
- }
- };
- }
- const tooltipLayer = createHoverTooltip(layerChangeButton, getLocale() === 'zh-CN' ? '隐藏识别结果': 'Hide recognition results', 'layerChange', { offset: { y: 22 } });
- window.addEventListener('storage', function(event) {
- // 检查事件是否与监听的键相关
- if (event.key === 'umi_locale'|| event.key === 'locale') {
- const text = isLayerChangeButtonActive() ? event?.newValue === 'zh-CN' ? '隐藏识别结果': 'Hide recognition results': getLocale() === 'zh-CN' ? '显示识别结果': 'Display recognition results'
- tooltipLayer?.updateTooltipText(text)
- }
- });
- // 添加点击事件监听器
- layerChangeButton.addEventListener('click', function() {
- // 检查当前 button 的选中状态
- if (isLayerChangeButtonActive()) {
- // 如果已经处于选中状态,则移除选中状态的 class
- const annotationLayerList = document.getElementsByClassName('annotationLayer')
- Array?.from(annotationLayerList)?.forEach(element => {
- var extractLayer = element.querySelector('#extractLayer');
- if(extractLayer) {
- extractLayer.style.opacity = 0
- }
- });
- console.log('test-dd', annotationLayerList, typeof annotationLayerList)
- tooltipLayer?.updateTooltipText( getLocale() === 'zh-CN' ? '显示识别结果': 'Display recognition results')
- this.classList.remove(LAYER_CHANGE_ACTIVE_CLASS);
- } else {
- // 如果未处于选中状态,则添加选中状态的 class
- this.classList.add(LAYER_CHANGE_ACTIVE_CLASS);
- tooltipLayer?.updateTooltipText(getLocale() === 'zh-CN' ? '隐藏识别结果': 'Hide recognition results')
- const scale = 0.943 / 0.7071 * window?.PDFViewerApplication?.pdfViewer?._currentScale || 1
- window.renderExtractLayer(window.pdfExtractData, Number(0), scale)
- const annotationLayerList = document.getElementsByClassName('annotationLayer')
- Array?.from(annotationLayerList)?.forEach(element => {
- var extractLayer = element.querySelector('#extractLayer');
- if(extractLayer) {
- extractLayer.style.opacity = 1
- }
- })
- }
- });
- // 获取显示消息的元素
- const messageDisplay = document.getElementById('messageDisplay');
- function removeDuplicates(arr) {
- return [...new Set(arr)];
- }
- window.addEventListener('error', function(event) {
- if (event.target && event.target.tagName === 'SCRIPT') {
- console.error("Script error detected: ", event);
- }
- }, true);
- // 添加消息监听器
- window.addEventListener('message', function(event) {
- const receivedMessage = event.data;
- const data = receivedMessage?.data
- const type = receivedMessage?.type
- function setHasRenderAnimatedPage (num) {
- if(!window.hasRenderAnimatedPage ) {
- window.hasRenderAnimatedPage = []
- }
- if( typeof window.hasRenderAnimatedPage === 'object'){
- window.hasRenderAnimatedPage = removeDuplicates([...window.hasRenderAnimatedPage, num])
- }
- }
- let animatingBox = new Map()
- function renderExtractLayer(data, pageNum, scale) {
- // 判断按钮是开的还是关的
- if(!isLayerChangeButtonActive()) return;
- const bboxes = data?.[pageNum]?.bboxes || []
- function drawBoxes(boxes, scale) {
- if(animatingBox.get(pageNum)) return
- // const annotationLayer = document.querySelector('.canvasWrapper');
- const pageLayer = document.getElementsByClassName('page')?.[pageNum]
- const annotationLayer = pageLayer.querySelectorAll('.annotationLayer')?.[0];
- // annotationLayer.removeAttribute('hidden');
- if(!annotationLayer) {
- // console.error('error: annotationLayer has not been rendered')
- return
- }
- const extractLayer = annotationLayer.querySelector('#extractLayer');
- // 因为pdfjs只会缓存8页的内容,所以采用每次切换移除重建canvas的方式
- if (extractLayer) {
- extractLayer?.remove();
- }
- annotationLayer.style.width = '100%';
- annotationLayer.style.height = '100%'
- annotationLayer.style.position = 'absolute';
- annotationLayer.style.top = 0;
- annotationLayer.style.left = 0;
- const computedLayer = document.querySelector('.canvasWrapper');
- const canvas = document.createElement('canvas');
- canvas.id = 'extractLayer'
- const w = pageLayer?.offsetWidth - 18;
- const h = pageLayer?.offsetHeight - 18;
- canvas.width = true ? `${w}` : '100%';
- canvas.height = true ? `${h}`: '100%';
- canvas.style.width = true ? `${w}px` : '100%';
- canvas.style.height = true ? `${h}px`: '100%';
- canvas.style.position = 'absolute';
- canvas.style.top = 0;
- canvas.style.left = 0;
- annotationLayer.append(canvas)
- const ctx = canvas.getContext('2d');
- // 移除之前的画布内容
- // ctx.clearRect(0, 0, canvas.width, canvas.height);
- ctx.save();
- // console.log('renderExtractLayer: draw boxes')
- function drawPartialRect(ctx, box, progress, scale) {
- const [x, y, x2, y2]= box.bbox.map((i) => (i * scale));
- const width = x2 - x;
- const height = y2 - y;
- const color = box?.color?.line
- const fillColor = box?.color?.fill
- ctx.beginPath();
- ctx.strokeStyle = color;
- // 左边竖线
- ctx.moveTo(x, y);
- ctx.lineTo(x, y2);
- // 上边横线
- ctx.moveTo(x, y);
- ctx.lineTo(x + width * (progress < 0 ? 0: progress), y);
- // 右边竖线 (只在进度完成时绘制)
- if (progress === 1) {
- ctx.moveTo(x2, y);
- ctx.lineTo(x2, y2);
- ctx.fillStyle = fillColor;
- ctx.fillRect(x, y, width, height);
- }
- // 下边横线
- ctx.moveTo(x, y2);
- ctx.lineTo(x + width * (progress < 0 ? 0: progress), y2);
- ctx.stroke();
- }
- function fillRect(ctx, box, scale) {
- const [x, y, x2, y2]= box.bbox.map((i) => (i * scale));
- const width = x2 - x;
- const height = y2 - y;
- const color = box?.color?.fill
- ctx.fillStyle = color;
- ctx.fillRect(x, y, width, height);
- }
- function animateBox(ctx, box, duration = 1000) {
- const startTime = performance.now();
- function animate(currentTime) {
- const elapsedTime = currentTime - startTime;
- const progress = Math.min(elapsedTime / duration, 1);
- // ctx.clearRect(...box.bbox); // 清除之前的绘制
- drawPartialRect(ctx, box, progress, scale);
- if (progress < 1) {
- requestAnimationFrame(animate);
- }
- }
- requestAnimationFrame(animate);
- }
- async function animateAllBoxes() {
- // const [index, value] of array.entries()
- for (const [index, box] of boxes?.entries()) {
- await animateBox(ctx, box, 600); // 动画时间改为500ms
- await new Promise(resolve => setTimeout(resolve, 200)); // 每个框之间的延迟也减少到100ms
- }
- // 所有线框动画完成后,一次性填充所有矩形
- // ctx.clearRect(...box.bbox); // 清除之前的绘制
- // boxes.forEach(box => fillRect(ctx, box, scale));
- console.log("test-animate All animations completed and boxes filled");
- animatingBox.set(pageNum, false)
- }
- boxes.forEach((box, index) => {
- drawPartialRect(ctx, box, 1, scale);
- });
- canvas.style.width = false ? `${w}px` : '100%';
- canvas.style.height = false ? `${h}px`: '100%';
- ctx.restore();
- }
- !!bboxes?.length&&drawBoxes(bboxes, scale);
- }
- // init extractLayer data
- if(type === 'initExtractLayerData') {
- const scale = 0.943 / 0.7071 * window?.PDFViewerApplication?.pdfViewer?._currentScale || 1
- const currentPageNumber = window?.PDFViewerApplication?.pdfViewer?._currentPageNumber || 1
- window.pdfExtractData = data;
- window.renderExtractLayer = renderExtractLayer
- // window.renderExtractLayer(window.pdfExtractData, currentPageNumber - 1, scale)
- // use the picture view rather than outlined view
- window.renderExtractLayer(window.pdfExtractData, Number(0), scale)
- window?.PDFViewerApplication?.pdfSidebar?.switchView(1, false)
- }
- if(type === 'pageChange') {
- if(window.renderExtractLayer
- && window.pdfExtractData
- ) {
- const scale = 0.943 / 0.7071 * window?.PDFViewerApplication?.pdfViewer?._currentScale || 1
- const currentPageNumber = data || 0
- window.renderExtractLayer(window.pdfExtractData, Number(0), scale)
- window.renderExtractLayer(window.pdfExtractData, Number(data), scale)
- } else if(!window.pdfExtractData) {
- // console.error('extract pdf render data has not been initialized')
- }
- }
- if( type === 'title') {
- const odlPdfTitle = document.getElementById("odl-pdf-title");
- odlPdfTitle.innerText = data;
- }
- if( type === 'setPage') {
- window?.PDFViewerApplication?.eventBus?.dispatch("pagenumberchanged", {
- value: data
- })
- }
- if( type === '') {
- }
- });
|