wip #6960

diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index b8451e2a7f5aaf4af1e191a9721d74c1f952d3a9..ae07f9a187653c7161ecbdb76ff508dd61ddbf9d 100644 (file)
--- 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('<canvas id="canvas'+ linkData.uid+'" width="'+pw* this.linkeditor.zoom.zoom+'" height="'+ph* this.linkeditor.zoom.zoom+'"></canvas>')
-                    //$("[data-id-preview=" + linkData.uid + "]").html("<div class='canvas' style='height:100%;clip-path:inset(0 0 0 0);'></div>")
+                    $("[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>')
                 }
-                /*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 a863651080633f5ab381284dab062337a4a4cea9..8ba728fe8653db7b18e34c8d4b851d4a8581d3c2 100644 (file)
--- 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 7f9a69530ac0ef78197e5f804210e97463391845..1bd339cfdd3d58f919cf5bd6314a1648cd7d6c93 100644 (file)
--- 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