From 1599d814f8c7a1e5ac5d609a38023b459e3ce138 Mon Sep 17 00:00:00 2001 From: soufiane Date: Mon, 22 Jul 2024 11:57:04 +0200 Subject: [PATCH] wip #6960 --- resources/linkeditor/js/linkeditor.links.js | 99 +++++++++------------ resources/linkeditor/js/linkeditor.zoom.js | 7 +- resources/linkeditor/style/inc/_links.sass | 12 ++- 3 files changed, 58 insertions(+), 60 deletions(-) diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js index b8451e2a7..ae07f9a18 100644 --- a/resources/linkeditor/js/linkeditor.links.js +++ b/resources/linkeditor/js/linkeditor.links.js @@ -48,7 +48,6 @@ LinkeditorLinks.prototype = { }); $(document).on('mousedown', '.link', function (e) { - console.log('mousedown') if ($this.linkeditor.rightClick) { return true; } @@ -1585,7 +1584,7 @@ LinkeditorLinks.prototype = { } }, - updatePreview: function(link, zoom = false) { + updatePreview: function(link, zooming = false) { if($("#preview-links").hasClass("active")) { let linkData = link @@ -1640,61 +1639,49 @@ 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 + const pw = $(".linkeditor-page img").get(0).getBoundingClientRect().width + const ph = $(".linkeditor-page img").get(0).getBoundingClientRect().height if($("[data-id-preview=" + linkData.uid + "] .canvas").length < 1) { - $("[data-id-preview=" + linkData.uid + "]").css({ - 'transform': 'translate(-1px, -1px)' - }).html('') - //$("[data-id-preview=" + linkData.uid + "]").html("
") + $("[data-id-preview=" + linkData.uid + "]").html('
') } - /*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').css({ - "transform-style":"preserve-3d", - 'backface-visibility': 'hidden', - 'overflow': 'hidden', - 'position': 'absolute', - 'will-change': 'transform, left, top' - }) - }*/ 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','') - - 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 + ($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 + ($this.linkeditor.zoom.zoom / 2) +'px', - 'top': -yRight + ($this.linkeditor.zoom.zoom / 2) + 'px', - })*/ + $('.wrapper-canvas').css({ + 'transform-origin': '0 0' + }) + $('[data-id-preview="' + linkData.uid + '"] #canvas'+ linkData.uid).css({ + 'transform-origin': '0 0' + }) + + let ultimateTop = this.linkeditor.globalToFluidbook(this.linkeditor.mx, this.linkeditor.my).y - (this.linkeditor.globalToFluidbook(this.linkeditor.mx, this.linkeditor.my).y - linkData.top), + ultimateLeft = this.linkeditor.globalToFluidbook(this.linkeditor.mx, this.linkeditor.my).x - (this.linkeditor.globalToFluidbook(this.linkeditor.mx, this.linkeditor.my).x - linkData.left) + + let yRight = $this.linkeditor.fluidbookToGlobal(ultimateTop, 'top') - (pageRightRect.y), + xRight = $this.linkeditor.fluidbookToGlobal(ultimateLeft, 'left') - (pageRightRect.x), + yLeft = $this.linkeditor.fluidbookToGlobal(ultimateTop, 'top') - (pageLeftRect.y), + xLeft = $this.linkeditor.fluidbookToGlobal(ultimateLeft, 'left') - (pageLeftRect.x) + + /* + * TEST LOG + * */ + let imgRect = $("#linkeditor-page-right .images").get(0).getBoundingClientRect() + console.log("imgRect",imgRect.x,imgRect.y) + console.log("imgRect global to fluidbook",this.linkeditor.globalToFluidbook(imgRect.x,imgRect.y)) + console.log("linkData",linkData) + console.log("xRight,yRight",xRight.toFixed(2),yRight) + console.log("pw,ph",pw,ph) + console.log("getFluidbookPositionOfCursor", this.linkeditor.zoom.getFluidbookPositionOfCursor()) + console.log("------") + /* + * + * + * */ + + requestAnimationFrame(function () { const canvas = $('#canvas'+ linkData.uid).get(0), ctx = canvas.getContext('2d') @@ -1709,14 +1696,14 @@ LinkeditorLinks.prototype = { 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); + ctx.drawImage(image,-xLeft,-yLeft,pw,ph); + ctx.drawImage(texts,-xLeft,-yLeft,pw,ph); + ctx.drawImage(image2,-xRight.toFixed(2),-yRight,pw,ph); + ctx.drawImage(texts2,-xRight.toFixed(2),-yRight,pw,ph); }) - } + if (linkData.type === '10') { let paramIframe = 'accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;' @@ -1760,11 +1747,11 @@ LinkeditorLinks.prototype = { } }, - setPreview: function() { + setPreview: function(zooming = false) { const links = this.getLinksOfPage(this.linkeditor.currentPage) for(let link in links) { - this.updatePreview(links[link]) + this.updatePreview(links[link], zooming) } }, diff --git a/resources/linkeditor/js/linkeditor.zoom.js b/resources/linkeditor/js/linkeditor.zoom.js index a86365108..8ba728fe8 100644 --- a/resources/linkeditor/js/linkeditor.zoom.js +++ b/resources/linkeditor/js/linkeditor.zoom.js @@ -81,10 +81,9 @@ LinkeditorZoom.prototype = { $("#linkeditor-canvas").scrollTo({left: sx, top: sy}); this.linkeditor.rulers.updateRulers(); - this.linkeditor.links.setPreview() + this.linkeditor.links.setPreview(true) }, - normalizeZoom: function (z) { if (this.linkeditor.mobileFirst) { return 1; @@ -114,6 +113,9 @@ LinkeditorZoom.prototype = { } } + console.log("this.linkeditor.canvasRect.width",this.linkeditor.canvasRect.width) + console.log("this.linkeditor.canvasRect.height",this.linkeditor.canvasRect.height) + $("#linkeditor-canvas").attr('data-z', this.zoom); $("#linkeditor-zoom").css({ transform: 'scale(' + this.zoom + ')', overflow: 'visible', @@ -125,6 +127,7 @@ LinkeditorZoom.prototype = { maxHeight: zh }); + setTimeout(function () { if (this.zoom === 1) { $this.resetZoomDrag(); diff --git a/resources/linkeditor/style/inc/_links.sass b/resources/linkeditor/style/inc/_links.sass index 7f9a69530..1bd339cfd 100644 --- a/resources/linkeditor/style/inc/_links.sass +++ b/resources/linkeditor/style/inc/_links.sass @@ -11,9 +11,17 @@ box-sizing: border-box position: absolute - border: currentColor solid 1px + //border: currentColor solid 1px cursor: cell - overflow: hidden + + .canvas .images + z-index: 1 + + .canvas .texts + z-index: 2 + + [data-id-preview] + overflow: hidden #linkeditor-main.dropfile &.dropfile border-style: dashed -- 2.39.5