wait #6961 @350:00

diff --git a/resources/linkeditor/js/fluidbook.links.animations.js b/resources/linkeditor/js/fluidbook.links.animations.js
index 2da9f38636cbb4c3bc18c12fa81176dd82652408..9fd3388ecff9a0e616ccc3cdfe1d655fce700525 100644 (file)
--- a/resources/linkeditor/js/fluidbook.links.animations.js
+++ b/resources/linkeditor/js/fluidbook.links.animations.js
@@ -45,6 +45,7 @@ FluidbookLinksAnimations.prototype = {
     },
 
     executeAnimation: function (link, animation) {
+        console.log("animation-started")
         $(link).data('animation-started', true);
 
         link = $(link);

diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js
index d797621f38f06d838c72d9756cda3cdcbb62ecf5..e56a52f48b43af59d1b83a52b5479e1cdc210081 100644 (file)
--- a/resources/linkeditor/js/linkeditor.js
+++ b/resources/linkeditor/js/linkeditor.js
@@ -3,6 +3,7 @@ import 'tippy.js/dist/tippy.css';
 import gsap from "gsap";
 import Raphael from "raphael";
 import { CountUp } from "countup.js";
+import * as fabric from 'fabric';
 
 import Noty from "noty";
 import 'noty/lib/noty.css';
@@ -37,6 +38,7 @@ window.GrahamScan = GrahamScan;
 window.gsap = gsap;
 window.Raphael = Raphael;
 window.CountUp = CountUp;
+window.fabric = fabric;
 
 window.key.filter = function (event) {
     return keyfilter(event);
@@ -423,7 +425,6 @@ LinkEditor.prototype = {
         return this.fluidbookToGlobal(dim, name) - rect[name];
     },
 
-
     updateMousePosition: function (e) {
         if (e !== undefined) {
             this.setMouseCoordinates(e);
@@ -506,6 +507,7 @@ LinkEditor.prototype = {
         }
         this.undo.updateIconsStates();
         this.loader.preloadPages();
+        $("#linkeditor-layer-links").empty()
         this.previewLinks.setPreview();
     },
 

diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index 3d2a4c92085cb08f06a5845935e4100cae3e5de0..e0b963dd3b143afe981451b2e29111f80a4ed81f 100644 (file)
--- a/resources/linkeditor/js/linkeditor.links.js
+++ b/resources/linkeditor/js/linkeditor.links.js
@@ -1182,9 +1182,9 @@ LinkeditorLinks.prototype = {
          * alors on autorise la mise à jour de la preview
          *
          */
-        if(LINKS[id].type !== '39') {
-            $this.linkeditor.previewLinks.updatePreview(LINKS[id]);
-        }
+        //if(LINKS[id].type !== '39') {
+        $this.linkeditor.previewLinks.updatePreview(LINKS[id]);
+        //}
     },
 
     updateSelectionData: function (props) {
@@ -1585,15 +1585,17 @@ LinkeditorLinks.prototype = {
         for(let link in links) {
             let $link = $("[fb-uid=" + links[link].uid + "]")
             let animationText = $link.attr("fb-image_rollover")
-            let animations = this.resolveAnimation(animationText)
-            let previewDiv = $("[data-id-preview=" + links[link].uid + "]")
-            let el = previewDiv
+            let target = $("#linkeditor-layer-links [data-id-preview='"+links[link].uid+"']")
+            target.css("display","block")
+            let animations = this.resolveAnimation(animationText, target)
+            let previewDiv = links[link].type === '39' ? $("#linkeditor-layer-links > [data-id-preview-wrap="+links[link].uid+"] > [data-id-preview="+links[link].uid+"]") : $("[data-id-preview=" + links[link].uid + "]")
+            var el = previewDiv
 
-            let animWithBackground = animations.filter((v) => v.backgroundColor)
-            let backgroundColor = animWithBackground.length > 0 ? animWithBackground[0].backgroundColor : 'transparent'
+            let animWithBackground = animations.filter((v) => v.backgroundcolor)
+            let backgroundColor = animWithBackground.length > 0 ? animWithBackground[0].backgroundcolor : 'transparent'
 
             if(links[link].type !== '45') {
-                $link.find('.bg-preview').css('background-color', backgroundColor)
+                $("#linkeditor-layer-links [data-id-preview-wrap='"+links[link].uid+"'],[fb-uid=" + links[link].uid + "]").find('.bg-preview').css('background-color', backgroundColor)
             }
 
             /**
@@ -1642,8 +1644,11 @@ LinkeditorLinks.prototype = {
                 complete: function () {
                     $("#extra-font-face").remove()
                     $("head").append("<style id='extra-font-face'></style>")
+                    $("body").append("<div id='load-extra-font'></div>")
                     for (let k in FONT_SIZE) {
                         $("#extra-font-face").append("@font-face{font-family:" + FONT_SIZE[k]['font'] + ";src:url('/fluidbook-publication/" + FLUIDBOOK_DATA.id + "/edit/links/assets/" + FONT_SIZE[k]['hash'] + "' ) format('woff');}")
+                        $("#load-extra-font").append("<div id='"+k+"'></div>")
+                        $("div#"+k).css("font-family", FONT_SIZE[k]['font'])
                     }
                     $("#preview-links").removeClass('disabled');
                     $this.linkeditor.rulers.updateRulers()
@@ -1665,37 +1670,25 @@ LinkeditorLinks.prototype = {
         try {
             const z = this.linkeditor.zoom.normalizeZoom(this.linkeditor.zoom.getZoom());
             const hash = 'fb_' + window.MD5(link.image).toString().substring(0, 10);
+
             const capHeight = FONT_SIZE[hash]['capHeight'];
-            const cssScale = this.getCssScale()
 
             // On récupère la hauteur du lien
             // en prenant en compte le changement de dimension
             // lors du zoom
-            let h = link.height * z;
+            let h = Math.round((link.height * this.linkeditor.fs) / capHeight) * z;
 
-            let fz = h;
-            fz = h / capHeight
+            //console.log(this.linkeditor.fs)
 
             $("[data-id-preview=" + link.uid + "]").text(link.to).css({
-                'font-size': fz.toFixed(2) * 0.8 + 'px',
+                'font-size': h.toFixed(2) + 'px',
                 'line-height': capHeight
             })
         } catch (e) {
-            console.log(e)
+            //console.log(e)
         }
     },
 
-    getCssScale: function() {
-        // Voir \Fluidbook\Tools\Compiler\
-        const pageZoomFactor = 3;
-        const optimalWidth = 567;
-        const optimalHeight = 709;
-        const pw = FLUIDBOOK_DATA.settings.width;
-        const ph = FLUIDBOOK_DATA.settings.height;
-
-        return pageZoomFactor * Math.min(( optimalWidth / pw), (optimalHeight / ph))
-    },
-
     addStyleToWrappersLinkText: function(link) {
         let scaleString = false
         if (link.image_rollover) {
@@ -1717,8 +1710,16 @@ LinkeditorLinks.prototype = {
         })
     },
 
-    resolveAnimation: function(animationText) {
+    resolveAnimation: function(animationText, target = null) {
         let obj = []
+        let origin, origin0_50, origin0_100, origin0_0
+        if(target) {
+            origin = target.attr("data-origin")
+            origin0_50 = target.attr("data-origin-0-50")
+            origin0_100 = target.attr("data-origin-0-100")
+            origin0_0 = target.attr("data-origin-0-0")
+        }
+
         if(animationText) {
             let animations = animationText.split('---')
             let result = []
@@ -1726,9 +1727,24 @@ LinkeditorLinks.prototype = {
                 let o = animations[anim].trim().split('\n')
                 obj.push({});
                 result = []
+                if(origin) result['transformorigin'] = origin
                 for (let k in o) {
                     let entries = o[k].split('=')
-                    result[entries[0]] = entries[1]?.replace(/([\"]+)/gm, "")
+                    result[entries[0].toLowerCase()] = entries[1]?.replace(/([\"]+)/gm, "")
+                    if(entries[0] === "preventFlickering"){
+                        result['preventflickering'] = 0
+                    }
+                    if(entries[0] === "transformOrigin"){
+                        if(entries[1]?.replace(/([\"]+)/gm, "") === "0% 50%") {
+                            result['transformorigin'] = origin0_50
+                        }else if(entries[1]?.replace(/([\"]+)/gm, "") === "0% 100%") {
+                            result['transformorigin'] = origin0_100
+                        }else if(entries[1]?.replace(/([\"]+)/gm, "") === "0% 0%") {
+                            result['transformorigin'] = origin0_0
+                        }else if(entries[1]?.replace(/([\"]+)/gm, "") === "center") {
+                            result['transformorigin'] = origin
+                        }
+                    }
                 }
                 obj[anim] = Object.assign({}, result)
             }

diff --git a/resources/linkeditor/js/linkeditor.previewLinks.js b/resources/linkeditor/js/linkeditor.previewLinks.js
index db7cb7c42923b5771154b517b0a1baf4bda611a8..cc7f7568275a42f3c1561f9ddf9479b20e63a80b 100644 (file)
--- a/resources/linkeditor/js/linkeditor.previewLinks.js
+++ b/resources/linkeditor/js/linkeditor.previewLinks.js
@@ -20,9 +20,13 @@ LinkeditorPreviewLinks.prototype = {
     setPreview: function(isZooming = false, reset = false) {
         const links = this.linkeditor.links.getLinksOfPage(this.linkeditor.currentPage)
 
+        if($('#linkeditor-layer-links').length < 1) {
+            $("#linkeditor-zoom").prepend('<div id="linkeditor-layer-links"></div>')
+        }
         for (let link in links) {
             this.updatePreview(links[link],isZooming,reset)
         }
+        this.linkeditor.links.updatePolygonLinks();
     },
 
     updatePreview: function(link, isZooming = false, reset = false) {
@@ -32,6 +36,7 @@ LinkeditorPreviewLinks.prototype = {
 
         if ($('[data-id-preview="' + link.uid + '"]').length < 1) {
             l.html("<div class='bg-preview'></div><div data-id-preview-wrap='" + link.uid + "'><div data-id-preview='" + link.uid + "'></div></div>")
+            //this.setTransformOrigin(link.uid)
         }
 
         $this.previewByType(link.type, isZooming, reset)
@@ -62,19 +67,27 @@ LinkeditorPreviewLinks.prototype = {
         }
     },
 
-    createPreviewLayerHTML: function(el,zoom = false) {
+    createPreviewLayerHTML: function(el,id) {
         let 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 data-id-preview-wrap="${id}"> <!-- utilisé pour cliper dans la limite de la taille du lien -->
+            <div class='bg-preview'></div>
+            <div data-id-preview="${id}"> <!-- utilisé pour l'animation en general -->
+              <div class="preview"> <!-- utilisé pour l'animation sur des background-image -->
+                    <div class="linkeditor-fluidbook-copy" data-id="${id}">
+                        <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>
             </div>
+          </div>
         `;
-        if(zoom) {
+        /*if(zoom) {
             html = '<div class="preview-wrapper">'+html+'</div>'
+        }*/
+        if($('#linkeditor-layer-links [data-id-preview-wrap="'+id+'"]').length === 0)
+        {
+            el.append(html)
         }
-        el.html(html)
     },
 
     /**
@@ -136,7 +149,6 @@ LinkeditorPreviewLinks.prototype = {
             'transform-origin': '0 100%'
         })
 
-        console.log(options)
         if(options !== null) {
             let countup = new CountUp(previewDiv.attr('id'), previewDiv.attr('data-anim-numeric-value'), options);
             countup.start()
@@ -149,16 +161,17 @@ LinkeditorPreviewLinks.prototype = {
         let animationText = $link.attr("fb-image_rollover")
         let animations = $this.linkeditor.links.resolveAnimation(animationText)
         let animZoom = animations.filter((v) => v.type === "zoomout" || v.type === "zoomin")
+        let polygon = $link.attr("fb-polygon")
         var previewDiv = $("[data-id-preview=" + $this.linkData.uid + "]")
 
-        /**
-         *
-         */
         if(!isZooming) {
-            this.createPreviewLayerHTML(previewDiv,animZoom.length > 0)
-
-            if (animZoom.length > 0) {
-                $("[data-id-preview=" + $this.linkData.uid + "] .preview-wrapper").addClass("img")
+            /**
+             *
+             */
+            this.createPreviewLayerHTML($("#linkeditor-layer-links"),$this.linkData.uid)
+            this.setTransformOrigin($this.linkData)
+            /*if (animZoom.length > 0) {
+                $("#linkeditor-layer-links [data-id-preview=" + $this.linkData.uid + "] .preview").addClass("img")
 
                 let srcImgLeft = $("#linkeditor-page-left .contents img.images").attr('src')
                 let srcTextLeft = $("#linkeditor-page-left .contents img.texts").attr('src')
@@ -173,9 +186,10 @@ LinkeditorPreviewLinks.prototype = {
                     bgLeft = 'url(' + srcTextLeft + ')'
                 }
 
-                $("[data-id-preview=" + $this.linkData.uid + "] .linkeditor-page-left-copy").css({
-                    "background": bgLeft,
-                    "background-size": "100%"
+                $("#linkeditor-layer-links [data-id-preview=" + $this.linkData.uid + "] .preview").css({
+                    "background-image": bgLeft,
+                    "background-size": "100%",
+                    "height": "100%"
                 })
 
                 if($("#linkeditor").hasClass("double")) {
@@ -192,20 +206,20 @@ LinkeditorPreviewLinks.prototype = {
                         bgRight = 'url(' + srcTextRight + ')'
                     }
 
-                    $("[data-id-preview=" + $this.linkData.uid + "] .linkeditor-page-right-copy").css({
+                    $(".linkeditor-fluidbook-copy[data-id=" + $this.linkData.uid + "] .linkeditor-page-right-copy").css({
                         "background": bgRight,
                         "background-size": "100%"
                     })
                 }
 
                 //$("[data-id-preview=" + $this.linkData.uid + "] .preview-wrapper .linkeditor-page").remove()
-            } else {
-                if ($("[data-id-preview=" + $this.linkData.uid + "] img").length < 1) {
-                    $("#linkeditor-page-left .contents img").clone().addClass('left').appendTo("[data-id-preview=" + $this.linkData.uid + "] .linkeditor-page-left-copy")
-                    $("#linkeditor-page-right .contents img").clone().addClass('right').appendTo("[data-id-preview=" + $this.linkData.uid + "] .linkeditor-page-right-copy")
+            } else {*/
+                if ($(".linkeditor-fluidbook-copy[data-id=" + $this.linkData.uid + "] img").length < 1) {
+                    $("#linkeditor-page-left .contents img").clone().addClass('left').appendTo(".linkeditor-fluidbook-copy[data-id=" + $this.linkData.uid + "] .linkeditor-page-left-copy")
+                    $("#linkeditor-page-right .contents img").clone().addClass('right').appendTo(".linkeditor-fluidbook-copy[data-id=" + $this.linkData.uid + "] .linkeditor-page-right-copy")
                 }
-                previewDiv.find(".preview-wrapper").remove()
-            }
+                $("#linkeditor-layer-links [data-id-preview=" + $this.linkData.uid + "] .preview").removeClass("img")
+            /*}*/
         }
 
         const z = this.linkeditor.zoom.normalizeZoom(this.linkeditor.zoom.getZoom())
@@ -221,13 +235,53 @@ LinkeditorPreviewLinks.prototype = {
          */
         let width = $("#linkeditor-fluidbook").css("width")
         let height = $("#linkeditor-fluidbook").css("height")
+        let transform = $("#linkeditor-fluidbook").css("transform")
         let left_ = $("#linkeditor-fluidbook").css("left")
         let top_ = $("#linkeditor-fluidbook").css("top")
-        let transform = $("#linkeditor-fluidbook").css("transform")
-        $("[data-id-preview=" + $this.linkData.uid + "] .linkeditor-fluidbook-copy").css({'width':width,'height':height,'left':left_,'top':top_,'transform':transform})
+
+        $("#linkeditor-layer-links").css({
+            'width':width,
+            'height':height,
+            'left':left_,
+            'top':top_,
+            'transform':transform,
+        })
+
+        $(".linkeditor-fluidbook-copy[data-id="+$this.linkData.uid+"]").css({
+            'width':width,
+            'height':height
+        })
+
+        if(polygon) {
+            $("#linkeditor-layer-links [data-id-preview-wrap="+$this.linkData.uid+"]").css({
+                'z-index': 3,
+                'clip-path': this.getPolygon($this.linkData.left,$this.linkData.top,polygon)
+            })
+        }else{
+            if(animZoom.length > 0) {
+                $("#linkeditor-layer-links [data-id-preview-wrap=" + $this.linkData.uid + "]").css({
+                    'clip-path': this.getClipPath($this.linkData.left, $this.linkData.top, $this.linkData.width, $this.linkData.height)
+                })
+            }
+        }
+
+        $("#linkeditor-layer-links [data-id-preview="+$this.linkData.uid+"], #linkeditor-layer-links [data-id-preview-wrap="+$this.linkData.uid+"] .bg-preview").css({
+            'clip-path': this.getClipPath($this.linkData.left,$this.linkData.top,$this.linkData.width,$this.linkData.height)
+        })
+
+        $("#linkeditor-layer-links .bg-preview").css({
+            'width':'100%',
+            'height':'100%',
+            'position': 'absolute',
+            'background-color': '#fff',
+            'z-index': 2
+        })
 
         /**
+         *
          * Application des styles pour #linkeditor-page-right-copy
+         * Pour caler la page sur la moitié droite
+         *
          */
         let left__ = $("#linkeditor-page-right").css("left")
         $(".linkeditor-page-right-copy").css('left',left__)
@@ -235,23 +289,10 @@ LinkeditorPreviewLinks.prototype = {
         if(reset) {
             $this.linkeditor.rulers.updateRulers();
         }
-        let linkeditorZoomRect = $("#linkeditor-zoom")[0].getBoundingClientRect()
-        //console.log(this.linkeditor.globalToEditor(linkeditorZoomRect.left,linkeditorZoomRect.top))
-        var left = this.linkeditor.fluidbookToGlobal($this.linkData.left, 'left') - linkeditorZoomRect.left
-        var top = this.linkeditor.fluidbookToGlobal($this.linkData.top, 'top') - linkeditorZoomRect.top
-
-        //
-        requestAnimationFrame(function() {
-            previewDiv.find(".linkeditor-zoom-copy").css({
-                "left": -left - 1,
-                "top": -top - 1,
-            })
-        })
-
 
-        if(animZoom.length > 0) {
+        /*if(animZoom.length > 0) {
             previewDiv.children().appendTo("[data-id-preview=" + $this.linkData.uid + "] .preview-wrapper")
-        }
+        }*/
     },
 
     previewIframe: function($this) {
@@ -289,8 +330,52 @@ LinkeditorPreviewLinks.prototype = {
         previewDiv.find("video").remove()
         previewDiv.css("position","relative").append(html)
         previewDiv.find("video").css({...$this.absoluteCss, ...{'object-fit': 'fill'} })
-    }
+    },
 
-}
+    getBoundingClientRectByEl(el) {
+        return el[0].getBoundingClientRect()
+    },
+
+    setTransformOrigin(link, option) {
+        const targetDiv = $('#linkeditor-layer-links [data-id-preview="'+link.uid+'"]');
+
+        if(targetDiv !== undefined) {
+            let referenceCenterX = parseInt(link.left) + parseInt(link.width) / 2;
+            let referenceCenterY = parseInt(link.top) + parseInt(link.height) / 2;
+            targetDiv.attr("data-origin", `${referenceCenterX}px ${referenceCenterY}px`);
+
+            let referenceCenterX0 = parseInt(link.left)
+            targetDiv.attr("data-origin-0-50", `${referenceCenterX0}px ${referenceCenterY}px`);
+
+            let referenceCenterY100 = parseInt(link.top) + parseInt(link.height)
+            targetDiv.attr("data-origin-0-100", `${referenceCenterX0}px ${referenceCenterY100}px`);
 
+            let referenceCenterY0 = parseInt(link.top)
+            targetDiv.attr("data-origin-0-0", `${referenceCenterX0}px ${referenceCenterY0}px`);
+        }
+    },
+
+    getClipPath(x,y,w,h) {
+        let x2 = parseInt(x) + parseInt(w)
+        let y3 = parseInt(y) + parseInt(h)
+
+        return `polygon(${x}px ${y}px, ${x2}px ${y}px, ${x2}px ${y3}px, ${x}px ${y3}px)`
+    },
+
+    getPolygon(x,y,param) {
+        let json = param !== undefined ? JSON.parse(param) : {}
+        let polygon = "polygon("
+        if(json.length > 0) {
+            for(let i in json) {
+                polygon += (parseInt(x)+parseInt(json[i].x))+"px "+(parseInt(y)+parseInt(json[i].y))+"px"
+                if(+i+1 !== json.length) {
+                    polygon += ','
+                }
+            }
+        }
+        polygon += ")"
+
+        return polygon
+    }
+}
 export default LinkeditorPreviewLinks;

diff --git a/resources/linkeditor/js/linkeditor.resize.js b/resources/linkeditor/js/linkeditor.resize.js
index ccda429c000b181da41c6ae0467351dc62b8e3d8..7607b5381bcda9bd9fbbc3e57fcf496373cf5710 100644 (file)
--- a/resources/linkeditor/js/linkeditor.resize.js
+++ b/resources/linkeditor/js/linkeditor.resize.js
@@ -74,7 +74,7 @@ LinkeditorResize.prototype = {
         }
         $("#linkeditor-page-right").css({left: this.linkeditor.pw});
         $("#linkeditor-fluidbook").css({width: fw, height: ph});
-
+        this.linkeditor.previewLinks.setPreview(true)
     },
 
     resizeMain: function () {

diff --git a/resources/linkeditor/js/linkeditor.zoom.js b/resources/linkeditor/js/linkeditor.zoom.js
index f237433d576520ef0c3670eaea1e62723b267882..82735bbcfa74df91d7f2aa2359e6faba6ea2b866 100644 (file)
--- a/resources/linkeditor/js/linkeditor.zoom.js
+++ b/resources/linkeditor/js/linkeditor.zoom.js
@@ -82,7 +82,9 @@ LinkeditorZoom.prototype = {
 
         $("#linkeditor-canvas").scrollTo({left: sx, top: sy});
         this.linkeditor.rulers.updateRulers();
-        this.linkeditor.previewLinks.setPreview(true)
+        const $this = this
+        $this.linkeditor.previewLinks.setPreview(true)
+
     },
 
     normalizeZoom: function (z) {
@@ -137,15 +139,15 @@ LinkeditorZoom.prototype = {
     },
 
     reset: function () {
+        this.linkeditor.previewLinks.setPreview(true, true)
         this.setZoom(1);
         var top = this.linkeditor.mobileFirst ? 0 : '50%';
         $("#linkeditor-canvas").scrollTo({top: top, left: '50%'});
         this.resetZoomDrag();
-        this.linkeditor.previewLinks.setPreview(true, true)
     },
 
     getZoom: function() {
-        return $("#linkeditor-canvas").attr("data-z")
+        return this.normalizeZoom($("#linkeditor-canvas").attr("data-z"))
     }
 };
 export default LinkeditorZoom;

diff --git a/resources/linkeditor/style/inc/_links.sass b/resources/linkeditor/style/inc/_links.sass
index ce8edb572e4f4802d34ee93121e2707100958a6b..e3b6b873462297ecd8cf76f7ec94a64ae5fbaf9d 100644 (file)
--- a/resources/linkeditor/style/inc/_links.sass
+++ b/resources/linkeditor/style/inc/_links.sass
@@ -1,29 +1,74 @@
 @import "variables"
 
 body.preview
-    #linkeditor-links
+    #linkeditor-links,
+    #linkeditor-layer-links
         .link
             background-color: transparent
             border-style: dashed
-            [data-id-preview]
-                display: block !important
+            &[fb-polygon^="["]
+                border: 0
+                polygon
+                    fill-opacity: 0
+                    stroke-dasharray: 2
+        [data-id-preview]
+            display: block !important
 
 body:not(.preview)
-    #linkeditor-links
-        .link
-            .bg-preview
-                display: none
+    #linkeditor-links,
+    #linkeditor-layer-links
+        .bg-preview
+            display: none
+        [data-id-preview]
+            display: none
 
 #linkeditor
+    .linkeditor-page-right-copy,
+    .linkeditor-page-left-copy
+        height: 100%
+        .link &
+            z-index: 3
     &.double
         .linkeditor-page-right-copy,
         .linkeditor-page-left-copy
             width: 50%
     &.single
-        .linkeditor-page-right-copy,
+        .linkeditor-page-right-copy
+            display: none
         .linkeditor-page-left-copy
             width: 100%
 
+#linkeditor-layer-links
+    position: absolute
+    transform-origin: 0 0
+    z-index: 2
+    [data-id-preview-wrap],
+    [data-id-preview]
+        position: absolute
+        width: 100%
+        height: 100%
+        z-index: 2
+
+    .linkeditor-fluidbook-copy
+        position: absolute
+        transform-origin: 0 0
+    .linkeditor-page
+        position: absolute
+        top: 0
+        left: 0
+    img
+        display: block
+        position: absolute
+        top: 0
+        left: 0
+        width: 100%
+        height: 100%
+        z-index: 1
+
+#fabricCanvas
+    background-color: blue
+    width: 100%
+    height: 100%
 
 #linkeditor-links
     .link
@@ -74,15 +119,18 @@ body:not(.preview)
             img
                 width: 100%
 
-        &[fb-type='39'] [data-id-preview]
-            clip-path: inset(0)
-            position: absolute
-            img
-                width: 100%
-                height: 100%
+        &[fb-type='39']
+            .bg-preview
+                display: none
+            [data-id-preview]
+                clip-path: inset(0)
                 position: absolute
-                left: 0
-                top: 0
+                img
+                    width: 100%
+                    height: 100%
+                    position: absolute
+                    left: 0
+                    top: 0
 
         &[fb-type='10'],
         &[fb-type='4']

diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php
index 0a22be904917ebade0c8ba5a31d76b599003103c..f672a23c607c9e13b847e23835e6a93123d42dd0 100644 (file)
--- a/resources/views/fluidbook_publication/link_editor.blade.php
+++ b/resources/views/fluidbook_publication/link_editor.blade.php
@@ -308,6 +308,10 @@
                     @endif
                     <a href="#" data-action="toggleWhiteOverlay" data-icon="white-overlay"
                        data-tooltip="{{__('Afficher un overlay blanc semi-opaque au dessus des pages')}}"></a>
+                    <a href="#" id="preview-links" class="disabled" data-action="links.preview" data-icon="preview-links"
+                       data-tooltip="{{__('Voir un aperçu des liens (Ctrl+Y)')}}" data-key="ctrl+y"></a>
+                    <a href="#" id="start-animations" class="" data-action="links.animation" data-icon="start-animation"
+                       data-tooltip="{{__('Lancer les animations')}}"></a>
                     <a href="#" data-action="openFluidbook" data-icon="open-fluidbook"
                        data-tooltip="{{__('Ouvrir le fluidbook à la page courante')}}"></a>
 
@@ -401,6 +405,8 @@
         var ASSETS = @json($assets);
         var CAN_CONTAIN_LINKS = @json($canContainLinks);
         var DEPTH = @json($depths);
+        var FONT_SIZE = @json([]);
+        var ZOOM = null;
     </script>
     <script
         src="/packages/linkeditor/js/linkeditor.js?v={{filemtime(public_path('packages/linkeditor/js/linkeditor.js'))}}"></script>