wip #6960 @7:00

diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index 85c224561242c869228a947e8fedcbabefcd201e..b8451e2a7f5aaf4af1e191a9721d74c1f952d3a9 100644 (file)
--- 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("<div class='canvas' style='height:100%;clip-path:inset(0 0 0 0);'></div>")
+                    $("[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>")
                 }
-                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 24c38cd6def97e1c1c2030481368b80730f6a3e4..7f9a69530ac0ef78197e5f804210e97463391845 100644 (file)
--- 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