wip #6960

diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index ae07f9a187653c7161ecbdb76ff508dd61ddbf9d..4cc3c64449e15b7aaca2f049c3bbc119112a2036 100644 (file)
--- 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('<div class="container-canvas"><div class="wrapper-canvas"><canvas id="canvas'+ linkData.uid+'" width="'+pw+'" height="'+ph+'"></canvas></div></div>')
+                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('<div class="linkeditor-zoom-copy"><div class="linkeditor-fluidbook-copy"><div class="linkeditor-page linkeditor-page-right-copy" data-page="1"></div><div class="linkeditor-page linkeditor-page-left-copy" data-page="0"></div></div></div>')
+                    $("[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 e036da80c1e8f1239e185555e1f86ccbd94728ab..1e6db84a97901070acba4a1ff61b474c67a104d5 100644 (file)
--- 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 8ba728fe8653db7b18e34c8d4b851d4a8581d3c2..e1773398275bc14024ed59b31a1fcdd93c67ad26 100644 (file)
--- 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 1bd339cfdd3d58f919cf5bd6314a1648cd7d6c93..fdea3355167776f76bceaaaa6fa477540aad80d0 100644 (file)
--- 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