From e44858b7e83044eb41133ffb39e06292e8db7422 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Thu, 8 Feb 2024 19:41:34 +0100 Subject: [PATCH] wip #6200 @3.5 --- js/libs/fluidbook/fluidbook.loader.js | 236 +++++++++++++++----------- js/libs/fluidbook/fluidbook.utils.js | 32 ++++ 2 files changed, 169 insertions(+), 99 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js index 6ddda8c1..ce8a7ffc 100644 --- a/js/libs/fluidbook/fluidbook.loader.js +++ b/js/libs/fluidbook/fluidbook.loader.js @@ -534,7 +534,7 @@ FluidbookLoader.prototype = { this._needSeparateTextures[page] = false; $.each(this.fluidbook.settings.clinks[page], function (blendmode, links) { $.each(links, function (k, link) { - if (link.indexOf('data-animation-hide') >= 0 || link.indexOf('data-animation-hide-on-leave') >= 0) { + if (link.indexOf('data-animation-hide') >= 0 || link.indexOf('data-animation-hide-on-leave') >= 0 || link.indexOf('data-animation-zommed-in') >= 0 || link.indexOf('data-animation-zoomed-out') >= 0) { $this._needSeparateTextures[page] = true; return false; } @@ -676,126 +676,164 @@ FluidbookLoader.prototype = { } var $this = this; - 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 c = document.getElementById("pscanvas"); - c.width = d; - c.height = d; - var ctx = c.getContext("2d"); - ctx.clearRect(0, 0, d, d); - - var wr = d / $this.fluidbook.settings.width; - var hr = d / $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); - } else { - ctx.fillStyle = "#FFFFFF"; - ctx.fillRect(0, 0, d, d); - } - // Draw the texts if necessary - if ($this.getVersionToLoad(page) === 'textasvector' || $this.getVersionToLoad(page) === 'vector') { - try { - var img = $this.texts[page].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, d + 2, d); - } catch (e) { - console.warn(e); + 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 c = document.getElementById("pscanvas"); + c.width = d; + c.height = d; + var ctx = c.getContext("2d"); + ctx.clearRect(0, 0, d, d); + + var wr = d / $this.fluidbook.settings.width; + var hr = d / $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); + } else { + ctx.fillStyle = "#FFFFFF"; + ctx.fillRect(0, 0, d, d); + } + // Draw the texts if necessary + if ($this.getVersionToLoad(page) === 'textasvector' || $this.getVersionToLoad(page) === 'vector') { + try { + var img = $this.texts[page].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, d + 2, d); + } catch (e) { + console.warn(e); } + } + + // Draw content links + if (clinks !== '') { + $('.texture_clinks[data-page="' + page + '"] .contentLink').each(function () { + if ((enter && $(this).is('[data-animation-hide]')) || (!enter && $(this).is('[data-animation-hide-on-leave]'))) { + return; + } - // Draw content links - if (clinks !== '') { - $('.texture_clinks[data-page="' + page + '"] .contentLink').each(function () { - if ((enter && $(this).is('[data-animation-hide]')) || (!enter && $(this).is('[data-animation-hide-on-leave]'))) { + let texture; + + 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; } - var left = parseFloat($(this).css('left')) * wr; - var top = parseFloat($(this).css('top')) * hr; - var width = parseFloat($(this).css('width')) * wr; - var height = parseFloat($(this).css('height')) * hr; + 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')); - var blendmode = $(this).data('blendmode'); + if (scale !== 1) { + let origin = '50% 50%'; + origin = parseTransformOrigin(origin); - if (blendmode === 'normal') { + 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 blendmode = $(this).data('blendmode'); + + if (blendmode === 'normal') { + ctx.globalCompositeOperation = 'source-over'; + } else { + try { + ctx.globalCompositeOperation = blendmode; + } catch (e) { 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]')) { - var i = $(this).data('id'); - if (textures[i] !== undefined && textures[i] !== null) { - try { - ctx.drawImage(textures[i].get(0), left, top, width, height); - } catch (e) { - console.warn(textures[i]); - } + 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); } - }); - $('.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; } - ctx.globalAlpha = 2 * $this.fluidbook.settings.shadeAlpha / 100; - ctx.drawImage(s.get(0), x, 0, sw, d); - ctx.globalAlpha = 1; + }); + $('.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; } + 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; - } else { - $this.leaveTextures[page] = i; - } - callback(); + 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; } - i.src = dataurl; - } catch (e) { - console.warn(e); callback(); } - } else { + i.src = dataurl; + } catch (e) { + console.warn(e); callback(); } + } else { + callback(); } - ); + }); }, getURL(url) { diff --git a/js/libs/fluidbook/fluidbook.utils.js b/js/libs/fluidbook/fluidbook.utils.js index 5354347e..5121cf45 100644 --- a/js/libs/fluidbook/fluidbook.utils.js +++ b/js/libs/fluidbook/fluidbook.utils.js @@ -121,3 +121,35 @@ function getIframeDocument(iframe) { return doc; } +function parseTransformOrigin(origin) { + origin = origin.trim(); + if (origin === 'center') { + return [0.5, 0.5]; + } + let o = origin.split(' '); + if (o.length <= 1) { + return [0.5, 0.5]; + } + return [parseTransformOriginComponent(o[0]), parseTransformOriginComponent(o[1])]; +} + +function parseTransformOriginComponent(c) { + c = c.trim(); + switch (c) { + case 'left': + case 'top': + return 0; + case 'middle': + case 'center': + return 0.5; + case 'right': + case 'bottom': + return 1; + default: + if (c.indexOf('%') > 0) { + return parseFloat(c) / 100; + } + return parseFloat(c); + } +} + -- 2.39.5