From ea553ea465678a8ec8f57428aa8eb201538946bf Mon Sep 17 00:00:00 2001 From: soufiane Date: Mon, 8 Jul 2024 11:04:57 +0200 Subject: [PATCH] wip #6960 @7:00 --- resources/linkeditor/js/linkeditor.links.js | 80 ++++++++++++++------- resources/linkeditor/style/inc/_links.sass | 1 + 2 files changed, 57 insertions(+), 24 deletions(-) diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js index 85c224561..b8451e2a7 100644 --- a/resources/linkeditor/js/linkeditor.links.js +++ b/resources/linkeditor/js/linkeditor.links.js @@ -1640,47 +1640,79 @@ LinkeditorLinks.prototype = { }) this.updateFontSize(link) } else if (linkData.type === '39') { + const pw = $(".linkeditor-page").get(0).getBoundingClientRect().width + const ph = $(".linkeditor-page").get(0).getBoundingClientRect().height if($("[data-id-preview=" + linkData.uid + "] .canvas").length < 1) { - $("[data-id-preview=" + linkData.uid + "]").html("
") + $("[data-id-preview=" + linkData.uid + "]").css({ + 'transform': 'translate(-1px, -1px)' + }).html('') + //$("[data-id-preview=" + linkData.uid + "]").html("
") } - if($("[data-id-preview=" + linkData.uid + "] .canvas img").length < 1) { - const pageLeftImageSrc = $("#linkeditor-page-left .contents img.images").attr('src') - const pageLeftTextsSrc = $("#linkeditor-page-left .contents img.texts").attr('src') + /*if($("[data-id-preview=" + linkData.uid + "] .canvas img").length < 1) { + let wp = $(".linkeditor-page").get(0).getBoundingClientRect().width + let hp = $(".linkeditor-page").get(0).getBoundingClientRect().height $("#linkeditor-page-left .contents img").clone().addClass('left').appendTo("[data-id-preview=" + linkData.uid + "] .canvas") $("#linkeditor-page-right .contents img").clone().addClass('right').appendTo("[data-id-preview=" + linkData.uid + "] .canvas") $('[data-id-preview="' + linkData.uid + '"] .canvas img.right').parents().css("transform-style","preserve-3d") - $('[data-id-preview="' + linkData.uid + '"] .canvas img.right').css({ + $('[data-id-preview="' + linkData.uid + '"] .canvas img').css({ "transform-style":"preserve-3d", 'backface-visibility': 'hidden', - 'overflow': 'hidden' + 'overflow': 'hidden', + 'position': 'absolute', + 'will-change': 'transform, left, top' }) - } - const $this = this + }*/ + const pageRightRect = $("#linkeditor-page-right").get(0).getBoundingClientRect() const pageLeftRect = $("#linkeditor-page-left").get(0).getBoundingClientRect() + const linkeditorFluidbookStyle = $("#linkeditor-fluidbook")[0].style + let scale = $("#linkeditor-fluidbook")[0].style.transform.split('(')[1].replace(')',''), + width = $(".linkeditor-page")[0].style.width.replace('px',''), + height = $(".linkeditor-page")[0].style.height.replace('px','') - requestAnimationFrame(function(r) { - let wp = $(".linkeditor-page").get(0).getBoundingClientRect().width, - yRight = ($this.linkeditor.fluidbookToGlobal(linkData.top, "top") - pageRightRect.y), - xRight = ($this.linkeditor.fluidbookToGlobal(linkData.left, "left") - pageRightRect.x), - yLeft = ($this.linkeditor.fluidbookToGlobal(linkData.top, "top") - pageLeftRect.y), - xLeft = ($this.linkeditor.fluidbookToGlobal(linkData.left, "left") - pageLeftRect.x) - $('[data-id-preview="' + linkData.uid + '"] .canvas img').css({ - 'position': 'absolute', - 'width': wp, + const $this = this + + requestAnimationFrame(function() { + + let yRight = ($this.linkeditor.fluidbookToGlobal(linkData.top, "top") - (pageRightRect.y)), + xRight = ($this.linkeditor.fluidbookToGlobal(linkData.left, "left") - (pageRightRect.x)), + yLeft = ($this.linkeditor.fluidbookToGlobal(linkData.top, "top") - (pageLeftRect.y)), + xLeft = ($this.linkeditor.fluidbookToGlobal(linkData.left, "left") - (pageLeftRect.x)) + + /*$('[data-id-preview="' + linkData.uid + '"] .canvas img').css({ + 'width': ((width*scale))+'px', + 'height': ((height*scale))+'px', + 'transform': 'scale('+$this.linkeditor.zoom.zoom+')', + 'transform-origin': 'top left' }) $('[data-id-preview="' + linkData.uid + '"] .canvas img.left').css({ - 'left': -xLeft +'px', - 'top': -yLeft +'px', - 'transform': 'translate(-1px, -1px)' + 'left': -xLeft + ($this.linkeditor.zoom.zoom / 2) +'px', + 'top': -yLeft + ($this.linkeditor.zoom.zoom / 2) +'px', }) $('[data-id-preview="' + linkData.uid + '"] .canvas img.right').css({ - 'left': -xRight +'px', - 'top': -yRight +'px', - 'transform': 'translate(-1px, -1px)' - }) + 'left': -xRight + ($this.linkeditor.zoom.zoom / 2) +'px', + 'top': -yRight + ($this.linkeditor.zoom.zoom / 2) + 'px', + })*/ + + const canvas = $('#canvas'+ linkData.uid).get(0), + ctx = canvas.getContext('2d') + + var image = new Image(); + image.src = $("#linkeditor-page-left .contents .images").attr('src') + + var texts = new Image(); + texts.src = $("#linkeditor-page-left .contents .texts").attr('src') + + var image2 = new Image(); + image2.src = $("#linkeditor-page-right .contents .images").attr('src') + var texts2 = new Image(); + texts2.src = $("#linkeditor-page-right .contents .texts").attr('src') + ctx.drawImage(image,-xLeft,-yLeft,-(width*scale) * $this.linkeditor.zoom.zoom,(height*scale) * $this.linkeditor.zoom.zoom); + ctx.drawImage(texts,-xLeft,-yLeft,-(width*scale) * $this.linkeditor.zoom.zoom,(height*scale) * $this.linkeditor.zoom.zoom); + ctx.drawImage(image2,-xRight,-yRight,(width*scale) * $this.linkeditor.zoom.zoom,(height*scale) * $this.linkeditor.zoom.zoom); + ctx.drawImage(texts2,-xRight,-yRight,(width*scale) * $this.linkeditor.zoom.zoom,(height*scale) * $this.linkeditor.zoom.zoom); }) } diff --git a/resources/linkeditor/style/inc/_links.sass b/resources/linkeditor/style/inc/_links.sass index 24c38cd6d..7f9a69530 100644 --- a/resources/linkeditor/style/inc/_links.sass +++ b/resources/linkeditor/style/inc/_links.sass @@ -13,6 +13,7 @@ position: absolute border: currentColor solid 1px cursor: cell + overflow: hidden #linkeditor-main.dropfile &.dropfile border-style: dashed -- 2.39.5