From b105d3dd9af8b5a21353021feec0291578bfdb9c Mon Sep 17 00:00:00 2001 From: soufiane Date: Wed, 24 Jul 2024 18:20:07 +0200 Subject: [PATCH] wip #6960 --- resources/linkeditor/js/linkeditor.links.js | 82 ++++++++++---------- resources/linkeditor/js/linkeditor.resize.js | 6 +- resources/linkeditor/js/linkeditor.zoom.js | 9 +-- resources/linkeditor/style/inc/_links.sass | 2 +- 4 files changed, 48 insertions(+), 51 deletions(-) diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js index ae07f9a18..4cc3c6444 100644 --- a/resources/linkeditor/js/linkeditor.links.js +++ b/resources/linkeditor/js/linkeditor.links.js @@ -154,18 +154,15 @@ LinkeditorLinks.prototype = { } $(document).on('dragenter', '#linkeditor-main', function (e) { // Prevent canvas being scrolled at the begining of the drag - console.log('dragenter') $("#linkeditor-canvas").addClass('noscroll'); setTimeout(function () { $("#linkeditor-canvas").removeClass('noscroll'); }, 2000); commonDragAndDropEvent(e); }).on('dragover', '#linkeditor-main', function (e) { - console.log('dragover') $('#linkeditor-main').addClass('dropfile'); commonDragAndDropEvent(e); }).on('dragleave', '#linkeditor-main', function (e) { - console.log('dragleave') $('#linkeditor-main').removeClass('dropfile'); commonDragAndDropEvent(e); }); @@ -1639,50 +1636,53 @@ LinkeditorLinks.prototype = { }) this.updateFontSize(link) } else if (linkData.type === '39') { - 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 + "]").html('
') + const pw = $(".linkeditor-page").get(0).getBoundingClientRect().width + const ph = $(".linkeditor-page").get(0).getBoundingClientRect().height + if($("[data-id-preview=" + linkData.uid + "] .linkeditor-page").length < 1) { + $("[data-id-preview=" + linkData.uid + "]").html('
') + $("[data-id-preview=" + linkData.uid + "]").find(".linkeditor-page-right-copy,.linkeditor-page-left-copy").css({ + "position": "absolute", + "left": 0 + }) + + $("[data-id-preview=" + linkData.uid + "]").find(".linkeditor-zoom-copy").css({ + "position": "absolute", + "transform-origin": "0 0" + }) + this.linkeditor.resize.resizePages() + + $(".linkeditor-fluidbook-copy").css({position: 'absolute', "transform-origin": "0 0"}); + + this.linkeditor.zoom.setZoom(1) + } + if($("[data-id-preview=" + linkData.uid + "] img").length < 1) { + $("#linkeditor-page-left .contents img").clone().addClass('left').appendTo("[data-id-preview=" + linkData.uid + "] .linkeditor-page-left-copy") + $("#linkeditor-page-right .contents img").clone().addClass('right').appendTo("[data-id-preview=" + linkData.uid + "] .linkeditor-page-right-copy") } - const pageRightRect = $("#linkeditor-page-right").get(0).getBoundingClientRect() - const pageLeftRect = $("#linkeditor-page-left").get(0).getBoundingClientRect() + this.linkeditor.resize.resizeCanvas() const $this = this - $('.wrapper-canvas').css({ - 'transform-origin': '0 0' + $("[data-id-preview=" + linkData.uid + "]").css({ + "clip-path":"inset(0)", + "position": "absolute", + }).find('img').css({ + 'width': '100%', + 'height': '100%', + 'position': 'absolute', + 'left': 0,'top': 0 }) - $('[data-id-preview="' + linkData.uid + '"] #canvas'+ linkData.uid).css({ - 'transform-origin': '0 0' - }) + requestAnimationFrame(function() { + let linkeditorZoomRect = $("#linkeditor-zoom")[0].getBoundingClientRect() + let left = $this.linkeditor.fluidbookToGlobal(linkData.left, 'left') - linkeditorZoomRect.left + let top = $this.linkeditor.fluidbookToGlobal(linkData.top, 'top') - linkeditorZoomRect.top + $("[data-id-preview=" + linkData.uid + "]").find(".linkeditor-zoom-copy").css({ + "left": -left - 1, + "top": -top - 1, + }) - 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), + /*const canvas = $('#canvas'+ linkData.uid).get(0), ctx = canvas.getContext('2d') var image = new Image(); @@ -1700,7 +1700,7 @@ LinkeditorLinks.prototype = { 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); - }) + */}) } diff --git a/resources/linkeditor/js/linkeditor.resize.js b/resources/linkeditor/js/linkeditor.resize.js index e036da80c..1e6db84a9 100644 --- a/resources/linkeditor/js/linkeditor.resize.js +++ b/resources/linkeditor/js/linkeditor.resize.js @@ -73,8 +73,8 @@ LinkeditorResize.prototype = { if (!this.linkeditor.single && !special) { fw *= 2; } - $("#linkeditor-page-right").css({left: this.linkeditor.pw}); - $("#linkeditor-fluidbook").css({width: fw, height: ph}); + $("#linkeditor-page-right,.linkeditor-page-right-copy").css({left: this.linkeditor.pw}); + $("#linkeditor-fluidbook,.linkeditor-fluidbook-copy").css({width: fw, height: ph}); }, @@ -110,7 +110,7 @@ LinkeditorResize.prototype = { left = (this.linkeditor.canvasRect.width - this.linkeditor.fw * this.linkeditor.fs) / 2; top = 75; } - $("#linkeditor-fluidbook").css({left: left, top: top, transform: 'scale(' + this.linkeditor.fs + ')'}); + $("#linkeditor-fluidbook,.linkeditor-fluidbook-copy").css({left: left, top: top, transform: 'scale(' + this.linkeditor.fs + ')'}); }, }; export default LinkeditorResize; diff --git a/resources/linkeditor/js/linkeditor.zoom.js b/resources/linkeditor/js/linkeditor.zoom.js index 8ba728fe8..e17733982 100644 --- a/resources/linkeditor/js/linkeditor.zoom.js +++ b/resources/linkeditor/js/linkeditor.zoom.js @@ -81,7 +81,7 @@ LinkeditorZoom.prototype = { $("#linkeditor-canvas").scrollTo({left: sx, top: sy}); this.linkeditor.rulers.updateRulers(); - this.linkeditor.links.setPreview(true) + this.linkeditor.links.setPreview(this.zoom) }, normalizeZoom: function (z) { @@ -113,11 +113,8 @@ 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({ + $("#linkeditor-zoom,.linkeditor-zoom-copy").css({ transform: 'scale(' + this.zoom + ')', overflow: 'visible', width: cw2, maxWidth: cw2, @@ -127,7 +124,6 @@ LinkeditorZoom.prototype = { maxHeight: zh }); - setTimeout(function () { if (this.zoom === 1) { $this.resetZoomDrag(); @@ -135,6 +131,7 @@ LinkeditorZoom.prototype = { $this.linkeditor.rulers.updateRulers(); }, 10); + return true; }, diff --git a/resources/linkeditor/style/inc/_links.sass b/resources/linkeditor/style/inc/_links.sass index 1bd339cfd..fdea33551 100644 --- a/resources/linkeditor/style/inc/_links.sass +++ b/resources/linkeditor/style/inc/_links.sass @@ -11,7 +11,7 @@ box-sizing: border-box position: absolute - //border: currentColor solid 1px + border: currentColor solid 1px cursor: cell .canvas .images -- 2.39.5