From: Vincent Vanwaelscappel Date: Wed, 20 Mar 2024 15:32:31 +0000 (+0100) Subject: wip #6800 @2 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=e7dd755f7aa256e96f126a6abdf220df6956d8ae;p=fluidbook-html5.git wip #6800 @2 --- diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js index 28b905ac..bae752d9 100644 --- a/js/libs/fluidbook/fluidbook.loader.js +++ b/js/libs/fluidbook/fluidbook.loader.js @@ -400,6 +400,8 @@ FluidbookLoader.prototype = { var version = this.getVersionToLoad(parseInt(pageNr)); page = $("#page_" + pageNr); $(doublePage).append(page); + this.renderPDFTextsCanvas(); + this.renderTextsCanvas(); $(page).show(); $(page).addClass(position); var $this = this; @@ -683,165 +685,177 @@ FluidbookLoader.prototype = { this._preloadContentLinkTextures(page, this.fluidbook.settings.clinks[page], this.fluidbook.settings.links[page], enter, function (textures, clinks) { if ($this.fluidbook.pagetransitions.flip3d !== false) { - var d = 1024; + var dh = screen.height * window.devicePixelRatio * 1.1; + var dw = $this.fluidbook.settings.width * (dh / $this.fluidbook.settings.height); var c = document.getElementById("pscanvas"); - c.width = d; - c.height = d; + c.width = dw; + c.height = dh; var ctx = c.getContext("2d"); - ctx.clearRect(0, 0, d, d); + ctx.clearRect(0, 0, dw, dh); - var wr = d / $this.fluidbook.settings.width; - var hr = d / $this.fluidbook.settings.height; + var wr = dw / $this.fluidbook.settings.width; + var hr = dh / $this.fluidbook.settings.height; // Draw background if ($this.backgrounds[page] !== undefined && $this.backgrounds[page] !== null) { - ctx.drawImage($this.backgrounds[page].get(0), 0, 0, d * 1.002, d); + ctx.drawImage($this.backgrounds[page].get(0), 0, 0, dw * 1.002, dh); } else { ctx.fillStyle = "#FFFFFF"; - ctx.fillRect(0, 0, d, d); + ctx.fillRect(0, 0, dw, dh); } // Draw the texts if necessary if ($this.getVersionToLoad(page) === 'textasvector' || $this.getVersionToLoad(page) === 'vector') { - try { - var img = $this.texts[page]; - if (img !== undefined && img !== null) { - img = img.get(0); - if (img.width === 0) { - $this.deletePage(page); - $this._preloadPage(page, callback); - console.warn('failed to load page for drawing texture ', page); - return; + if ($this.fluidbook.support.pdftocanvas) { + $this.renderPDFPageToCanvas(page, ctx, dw, dh, function () { + afterTexts(); + }); + } else { + try { + var img = $this.texts[page]; + if (img !== undefined && img !== null) { + img = img.get(0); + if (img.width === 0) { + $this.deletePage(page); + $this._preloadPage(page, callback); + console.warn('failed to load page for drawing texture ', page); + return; + } + ctx.drawImage(img, -1, 0, dw + 2, dh); } - ctx.drawImage(img, -1, 0, d + 2, d); + } catch (e) { + console.warn(e); } - } catch (e) { - console.warn(e); + afterTexts(); } } - // Draw content links - if (clinks !== '') { - $('.texture_clinks[data-page="' + page + '"] .contentLink').each(function () { - if ($(this).is('[data-rollover-hide]')) { - return; - } - if ((enter && $(this).is('[data-animation-hide]')) || (!enter && $(this).is('[data-animation-hide-on-leave]'))) { - return; - } + var afterTexts = function () { + // Draw content links + if (clinks !== '') { + $('.texture_clinks[data-page="' + page + '"] .contentLink').each(function () { + if ($(this).is('[data-rollover-hide]')) { + return; + } + if ((enter && $(this).is('[data-animation-hide]')) || (!enter && $(this).is('[data-animation-hide-on-leave]'))) { + return; + } - let texture; + let texture; - let scale = 1; - let sx = 0; - let sy = 0; - let sw = 0; - let sh = 0; - let tw; - let th; + let scale = 1; + let sx = 0; + let sy = 0; + let sw = 0; + let sh = 0; + let tw; + let th; - if ($(this).is('[data-image]')) { - var i = $(this).data('id'); - if (textures[i] === undefined || textures[i] === null) { - return; + if ($(this).is('[data-image]')) { + var i = $(this).data('id'); + if (textures[i] === undefined || textures[i] === null) { + return; + } + texture = textures[i].get(0); + tw = sw = texture.width; + th = sh = texture.height; } - texture = textures[i].get(0); - tw = sw = texture.width; - th = sh = texture.height; - } - if (enter && $(this).is('[data-animation-zoomed-out]')) { - scale = parseFloat($(this).data('animation-zoomed-out')); - } else if (!enter && $(this).is('[data-animation-zoomed-in]')) { - scale = parseFloat($(this).data('animation-zoomed-in')); - } - let w = parseFloat($(this).css('width')); - let h = parseFloat($(this).css('height')); + if (enter && $(this).is('[data-animation-zoomed-out]')) { + scale = parseFloat($(this).data('animation-zoomed-out')); + } else if (!enter && $(this).is('[data-animation-zoomed-in]')) { + scale = parseFloat($(this).data('animation-zoomed-in')); + } + let w = parseFloat($(this).css('width')); + let h = parseFloat($(this).css('height')); - if (scale !== 1) { - let origin = $(this).data('animation-zoomed-origin'); - origin = parseTransformOrigin(origin); + if (scale !== 1) { + let origin = $(this).data('animation-zoomed-origin'); + origin = parseTransformOrigin(origin); - sx = (1 - (1 / scale)) * tw * origin[0]; - sy = (1 - (1 / scale)) * th * origin[1]; - sw = tw - (sx / (1 - origin[0])); - sh = th - (sy / (1 - origin[1])); - } + sx = (1 - (1 / scale)) * tw * origin[0]; + sy = (1 - (1 / scale)) * th * origin[1]; + sw = tw - (sx / (1 - origin[0])); + sh = th - (sy / (1 - origin[1])); + } - var left = (parseFloat($(this).css('left'))) * wr; - var top = (parseFloat($(this).css('top'))) * hr; - var width = w * wr; - var height = h * hr; + var left = (parseFloat($(this).css('left'))) * wr; + var top = (parseFloat($(this).css('top'))) * hr; + var width = w * wr; + var height = h * hr; - var blendmode = $(this).data('blendmode'); + var blendmode = $(this).data('blendmode'); - if (blendmode === 'normal') { - ctx.globalCompositeOperation = 'source-over'; - } else { - try { - ctx.globalCompositeOperation = blendmode; - } catch (e) { + if (blendmode === 'normal') { ctx.globalCompositeOperation = 'source-over'; + } else { + try { + ctx.globalCompositeOperation = blendmode; + } catch (e) { + ctx.globalCompositeOperation = 'source-over'; + } } - } - if ($(this).is('[data-layer="bothsvg"]')) { - ctx.fillStyle = '#ffffff'; - ctx.fillRect(left, top, width, height); - } + if ($(this).is('[data-layer="bothsvg"]')) { + ctx.fillStyle = '#ffffff'; + ctx.fillRect(left, top, width, height); + } - if ($(this).is('[data-color]')) { - ctx.fillStyle = $(this).attr('data-color'); - ctx.fillRect(left, top, width, height); - } else if ($(this).is('[data-image]')) { - try { - ctx.drawImage(texture, sx, sy, sw, sh, left, top, width, height); - if (scale != 1) { - console.log(scale, '|', sx, sy, sw, sh, '|', tw, th, '|', left, top, width, height); + if ($(this).is('[data-color]')) { + ctx.fillStyle = $(this).attr('data-color'); + ctx.fillRect(left, top, width, height); + } else if ($(this).is('[data-image]')) { + try { + ctx.drawImage(texture, sx, sy, sw, sh, left, top, width, height); + if (scale != 1) { + console.log(scale, '|', sx, sy, sw, sh, '|', tw, th, '|', left, top, width, height); + } + } catch (e) { + console.warn(texture); } - } catch (e) { - console.warn(texture); } - } - }); - $('.texture_clinks[data-page="' + page + '"]').remove(); - } - - // Draw the shadow if necessary - if ($this.fluidbook.settings.shadeAlpha > 0) { - var sw = d * .25; - var s, x; - if (page % 2 === 0 && $this.fluidbook.l10n.ltr || page % 2 === 1 && $this.fluidbook.l10n.rtl) { - // Left - s = $this.shadeLeft; - x = 1024 - sw; - } else { - // Right - s = $this.shadeRight; - x = 0; + }); + $('.texture_clinks[data-page="' + page + '"]').remove(); } - ctx.globalAlpha = 2 * $this.fluidbook.settings.shadeAlpha / 100; - ctx.drawImage(s.get(0), x, 0, sw, d); - ctx.globalAlpha = 1; - } - try { - let dataurl = c.toDataURL("image/png"); - var i = new Image(); - i.onload = function () { - if (enter) { - $this.textures[page] = i; + // Draw the shadow if necessary + if ($this.fluidbook.settings.shadeAlpha > 0) { + var sw = dw * .25; + var s, x; + if (page % 2 === 0 && $this.fluidbook.l10n.ltr || page % 2 === 1 && $this.fluidbook.l10n.rtl) { + // Left + s = $this.shadeLeft; + x = dw - sw; } else { - $this.leaveTextures[page] = i; + // Right + s = $this.shadeRight; + x = 0; } + ctx.globalAlpha = 2 * $this.fluidbook.settings.shadeAlpha / 100; + ctx.drawImage(s.get(0), x, 0, sw, dh); + ctx.globalAlpha = 1; + } + + try { + let dataurl = c.toDataURL("image/png"); + var i = new Image(); + i.onload = function () { + if (enter) { + $this.textures[page] = i; + } else { + $this.leaveTextures[page] = i; + } + callback(); + } + i.src = dataurl; + } catch (e) { + console.warn(e); callback(); } - i.src = dataurl; - } catch (e) { - console.warn(e); - callback(); - } + }; + + } else { callback(); } @@ -899,17 +913,6 @@ FluidbookLoader.prototype = { addTextContents: function (pageNr, callback) { var t = $("#page_" + pageNr + ' .texts'); if (this.fluidbook.support.svgtocanvas || this.fluidbook.support.pdftocanvas) { - var html = ''; - if (!this.fluidbook.mobilefirst.enabled) { - html += ''; - } - $(t).html(html); - - if (this.fluidbook.support.svgtocanvas) { - this.renderTextsCanvas(); - } else { - this.renderPDFTextsCanvas() - } } else { $(t).append(this.texts[pageNr]); } @@ -922,9 +925,8 @@ FluidbookLoader.prototype = { return; } let $this = this; - //PDFJS.disableWorker = true; pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/build/pdf.worker.js'; - let loadingTask = pdfjsLib.getDocument('data/' + this.fluidbook.settings.pdfName); + let loadingTask = pdfjsLib.getDocument('data/texts.pdf'); loadingTask.promise.then(function (pdfDoc) { $this.pdfDoc = pdfDoc; @@ -940,148 +942,112 @@ FluidbookLoader.prototype = { } let $this = this; - let upscale = 1; - var z = window.devicePixelRatio * upscale; - var mz = this.fluidbook.zoom.max * window.devicePixelRatio * upscale * 1.1; + let canvas = $this.prepareCanvas(1); - $('canvas[data-page]:not(.thick)').each(function () { - if ($this.fluidbook.zoom.zoom === 1 && $(this).hasClass('z')) { - return; - } - - var page = $(this).data('page'); - - var c = $(this).closest('.texts'); - var tw = $(c).width(); - var th = $(c).height(); - - var w = tw * z; - var h = th * z; - var wz = tw * mz; - var hz = th * mz; + let callback = function (c) { + $('#currentDoublePage .page[data-page="' + c.page + '"] .texts canvas').hide(); + $(c.canvas).show(); + } - var canvas = $(this).get(0); + $.each(canvas, function (k, c) { + if (c.render) { + $this.renderPDFPageToCanvas(c.page, c.canvas.get(0).getContext("2d"), c.cw, c.ch, function () { + callback(c); + }); + } else { + callback(c); + } + }); - var cz = $(this).hasClass('z') ? mz : z; - var cw = $(this).hasClass('z') ? wz : w; - var ch = $(this).hasClass('z') ? hz : h; + }, - if ($(this).data('w') === cw && $(this).data('h') === ch) { - return; - } + prepareCanvas: function (upscale) { - canvas.width = cw + 30; - canvas.height = ch + 30; + let $this = this; - if (cz === 1) { - $(canvas).css('transform', null); - } else { - $(canvas).css('transform', 'scale(' + (1 / cz) + ')'); + var z = window.devicePixelRatio * upscale; + var mz = this.fluidbook.zoom.max * z; + var res = []; + $(".doublePage .page .texts").each(function () { + var page = parseInt($(this).closest('.page').data('page')); + var cw = $(this).width(); + var ch = $(this).height(); + var cz = ($this.fluidbook.zoom.zoom === 1) ? z : mz; + cw *= cz; + ch *= cz; + + let cacheKey = page + "/" + cw + "/" + ch; + let render = false; + + let canvas = $(this).find('canvas[data-cache="' + cacheKey + '"]'); + if ($(canvas).length === 0) { + canvas = $(''); + $(this).append(canvas); + if (cz === 1) { + $(canvas).css('transform', null); + } else { + $(canvas).css('transform', 'scale(' + (1 / cz) + ')'); + } + render = true; } + res.push({page: page, canvas: canvas, render: render, cacheKey: cacheKey, cw: cw, ch: ch}); + }); + return res; + }, - var ctx = canvas.getContext("2d"); - + renderPDFPageToCanvas: function (page, ctx, cw, ch, callback) { + this.pdfDoc.getPage(page).then(function (pdfPage) { + var unscaledViewport = pdfPage.getViewport({scale: 1}); + var scaleY = (ch / unscaledViewport.height); + var scaleX = (cw / unscaledViewport.width); - $this.pdfDoc.getPage(page).then(function (pdfPage) { - var unscaledViewport = pdfPage.getViewport({scale: 1}); - var scale = Math.min((ch / unscaledViewport.height), (cw / unscaledViewport.width)); + var scale = Math.min(scaleX, scaleY); - let renderTask = pdfPage.render({ - canvasContext: ctx, - viewport: pdfPage.getViewport({scale: scale}), - annotationMode: 0 - }); - renderTask.promise.then(function () { - console.log('page ' + page + ' rendered at scale ' + scale, cw, ch, cz, unscaledViewport.width, unscaledViewport.height); - }); - }) - - $(this).data('w', cw).data('h', ch); - - // let textThickness = parseFloat($this.fluidbook.settings.textsThickness); - // - // if (!$(this).hasClass('z') && $this.fluidbook.settings.textsThickness > 1 && $this.fluidbook.settings.textsThicknessPages.indexOf(page) >= 0) { - // $('canvas:not(.z)[data-page=' + page + '].thick').remove(); - // var clone; - // for (var i = 1; i <= textThickness; i++) { - // clone = $this._cloneCanvas($(this).get(0)); - // $(clone).insertBefore($(this)); - // } - // var lastOpacity = $this.fluidbook.settings.textsThickness - Math.floor($this.fluidbook.settings.textsThickness); - // if (lastOpacity > 0) { - // $(clone).css('opacity', lastOpacity); - // } - // } + let renderTask = pdfPage.render({ + canvasContext: ctx, + viewport: pdfPage.getViewport({scale: scale}), + background: 'rgba(0,0,0,0)', + annotationMode: 0 + }); + renderTask.promise.then(function () { + if (callback !== undefined) { + callback(); + } + }); - }); + }) }, renderTextsCanvas: function () { - if (!this.fluidbook.support.svgtocanvas) { return; } var $this = this; - var upscale = this.fluidbook.settings.svgToCanvasUpscale !== undefined ? parseFloat(this.fluidbook.settings.svgToCanvasUpscale) : 1; - - var z = window.devicePixelRatio * upscale; - var mz = this.fluidbook.zoom.max * window.devicePixelRatio * upscale * 1.1; - $('canvas[data-page]:not(.thick)').each(function () { if ($this.fluidbook.zoom.zoom === 1 && $(this).hasClass('z')) { return; } - - var page = $(this).data('page'); - - var c = $(this).closest('.texts'); - var tw = $(c).width(); - var th = $(c).height(); - - - var w = tw * z; - var h = th * z; - var wz = tw * mz; - var hz = th * mz; - - var canvas = $(this).get(0); - - var cz = $(this).hasClass('z') ? mz : z; - var cw = $(this).hasClass('z') ? wz : w; - var ch = $(this).hasClass('z') ? hz : h; - - if ($(this).data('w') === cw && $(this).data('h') === ch) { + let c = $this.prepareCanvas($(this), this.fluidbook.settings.svgToCanvasUpscale !== undefined ? parseFloat(this.fluidbook.settings.svgToCanvasUpscale) : 1); + if (!c.changed) { return; } + var ctx = c.canvas.getContext("2d"); - canvas.width = cw + 30; - canvas.height = ch + 30; - - if (cz === 1) { - $(canvas).css('transform', null); - } else { - $(canvas).css('transform', 'scale(' + (1 / cz) + ')'); - } - - var ctx = canvas.getContext("2d"); - - var img = $this.texts[page]; + var img = $this.texts[c.page]; if (img !== undefined && img !== null) { img = img.get(0); if (img.width === 0) { - $this.deletePage(page); - $this._preloadPage(page, function () { + $this.deletePage(c.page); + $this._preloadPage(c.page, function () { }); return; } - ctx.drawImage(img, 0, 0, img.width - 2, img.height - 2, 0, 0, cw, ch); + ctx.drawImage(img, 0, 0, img.width - 2, img.height - 2, 0, 0, c.cw, c.ch); } - $(this).data('w', cw).data('h', ch); - let textThickness = parseFloat($this.fluidbook.settings.textsThickness); if (!$(this).hasClass('z') && $this.fluidbook.settings.textsThickness > 1 && $this.fluidbook.settings.textsThicknessPages.indexOf(page) >= 0) { diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js index c82cb4b1..cf733d6c 100644 --- a/js/libs/fluidbook/fluidbook.resize.js +++ b/js/libs/fluidbook/fluidbook.resize.js @@ -63,7 +63,7 @@ FluidbookResize.prototype = { init: function () { - if(this.fluidbook.settings.fixAirPixel && this.fluidbook.settings.mobileNavigationType === 'portrait'){ + if (this.fluidbook.settings.fixAirPixel && this.fluidbook.settings.mobileNavigationType === 'portrait') { $('body').addClass('fixairpixel'); } @@ -228,6 +228,7 @@ FluidbookResize.prototype = { } this.fluidbook.loader.renderTextsCanvas(); + this.fluidbook.loader.renderPDFTextsCanvas(); this.centerOffset = this.fw / 4; this.fluidbook.pagetransitions.centerBook(); diff --git a/js/libs/fluidbook/fluidbook.zoom.js b/js/libs/fluidbook/fluidbook.zoom.js index eb289ad0..d45c2fca 100644 --- a/js/libs/fluidbook/fluidbook.zoom.js +++ b/js/libs/fluidbook/fluidbook.zoom.js @@ -369,17 +369,25 @@ FluidbookZoom.prototype = { $this.triggerEvent(((this.zoom === 1) ? 'out' : 'in') + '.end'); } - if (this.zoom > 1) { - $("body").addClass('zoomed'); - } else { - $("body").removeClass('zoomed'); - } + let callback = function () { + if ($this.zoom > 1) { + $("body").addClass('zoomed'); + } else { + $("body").removeClass('zoomed'); + } + }; + try { - this.fluidbook.loader.renderTextsCanvas(); + if (this.fluidbook.support.svgtocanvas) { + this.fluidbook.loader.renderTextsCanvas(); + } else if (this.fluidbook.support.pdftocanvas) { + this.fluidbook.loader.renderPDFTextsCanvas(); + } } catch (e) { } + callback(); return true; } } diff --git a/style/fluidbook.less b/style/fluidbook.less index 236e25cd..fc71df63 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -433,25 +433,7 @@ body, html { top: 0px; left: 0px; transform-origin: 0 0; - - - &.p { - display: block; - - .zoomed & { - display: none; - } - } - - &.z { - display: none; - - .zoomed & { - display: block; - } - } } - } /* Espaces forcés */