wip #6960 @7:00

diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index 5d51f34c75b54c59800f97da575dc55e61414c0b..85c224561242c869228a947e8fedcbabefcd201e 100644 (file)
--- a/resources/linkeditor/js/linkeditor.links.js
+++ b/resources/linkeditor/js/linkeditor.links.js
@@ -48,6 +48,7 @@ LinkeditorLinks.prototype = {
         });
 
         $(document).on('mousedown', '.link', function (e) {
+            console.log('mousedown')
             if ($this.linkeditor.rightClick) {
                 return true;
             }
@@ -154,15 +155,18 @@ 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);
         });
@@ -179,6 +183,8 @@ LinkeditorLinks.prototype = {
             let link = this;
             $this.deselectAllLinks();
 
+            console.log('drop')
+
             commonDragAndDropEvent(e);
             let uid = $(this).attr('fb-uid');
             var fd = new FormData();
@@ -695,7 +701,6 @@ LinkeditorLinks.prototype = {
         this.linkeditor.save.hasChanged();
     },
 
-
     startDragLink: function () {
         this.dragLinkPos = {x: this.linkeditor.mx, y: this.linkeditor.my};
         this.setDragOrigValues();
@@ -719,7 +724,7 @@ LinkeditorLinks.prototype = {
         this.linkeditor.hasChanged();
     },
 
-    moveDragLink: function () {
+    moveDragLink: function (e) {
         if (this.updateRectSelection()) {
             return;
         }
@@ -755,10 +760,10 @@ LinkeditorLinks.prototype = {
             dy -= rect.top - ry;
         }
 
-
         $(".link.selected").each(function () {
             let left = $(this).data('drag-orig-left') + dx;
             let top = $(this).data('drag-orig-top') + dy;
+            let bottom = top + $(this).data('drag-orig-height');
 
             $(this)
                 .attr('fb-left', left)
@@ -901,7 +906,6 @@ LinkeditorLinks.prototype = {
         });
     },
 
-
     addLink: function (link, triggerChange) {
         if (triggerChange === undefined) {
             triggerChange = true;
@@ -1494,7 +1498,6 @@ LinkeditorLinks.prototype = {
         }
     },
 
-
     getConvexClipPath: function (points) {
         const grahamscan = new GrahamScan();
         grahamscan.setPoints(points);
@@ -1637,21 +1640,47 @@ LinkeditorLinks.prototype = {
                 })
                 this.updateFontSize(link)
             } else if (linkData.type === '39') {
-                $("[data-id-preview=" + linkData.uid + "]").parent().css("overflow","hidden")
-                $("[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").length < 1) {
+                    $("[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) {
-                    $("#linkeditor-page-right .contents").clone().appendTo("[data-id-preview=" + linkData.uid + "] .canvas")
+                    const pageLeftImageSrc = $("#linkeditor-page-left .contents img.images").attr('src')
+                    const pageLeftTextsSrc = $("#linkeditor-page-left .contents img.texts").attr('src')
+                    $("#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({
+                        "transform-style":"preserve-3d",
+                        'backface-visibility': 'hidden',
+                        'overflow': 'hidden'
+                    })
                 }
+                const $this = this
+                const pageRightRect = $("#linkeditor-page-right").get(0).getBoundingClientRect()
+                const pageLeftRect = $("#linkeditor-page-left").get(0).getBoundingClientRect()
+
+                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,
+                    })
+                    $('[data-id-preview="' + linkData.uid + '"] .canvas img.left').css({
+                        'left': -xLeft +'px',
+                        'top': -yLeft +'px',
+                        'transform': 'translate(-1px, -1px)'
+                    })
+                    $('[data-id-preview="' + linkData.uid + '"] .canvas img.right').css({
+                        'left': -xRight +'px',
+                        'top': -yRight +'px',
+                        'transform': 'translate(-1px, -1px)'
+                    })
 
-                const   wp = $(".linkeditor-page").get(0).getBoundingClientRect().width,
-                        pageRightRect = $("#linkeditor-page-right").get(0).getBoundingClientRect()
-
-                $('[data-id-preview="' + linkData.uid + '"] .canvas img').css({
-                    'position': 'fixed',
-                    'width': wp,
-                    'left': pageRightRect.x,
-                    'top': pageRightRect.y,
                 })
 
             }