wip #6788 @1:30

diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index e1606574f1b72b23726f4ecf5b513190f9870aa0..4485fd1d5e9ba62d0b131c73c5d45d4971eda1dc 100644 (file)
--- a/resources/linkeditor/js/linkeditor.links.js
+++ b/resources/linkeditor/js/linkeditor.links.js
@@ -1148,6 +1148,7 @@ LinkeditorLinks.prototype = {
     },
 
     updateLinkData: function (id, data, updateHTML) {
+        console.log('is updating')
         if (LINKS[id] === undefined) {
             console.warn('Link ' + id + ' not found');
             return;
@@ -1164,9 +1165,7 @@ LinkeditorLinks.prototype = {
         this.linkeditor.rulers.updateMagnetValues();
         this.updateLayers();
         this.updatePolygonLinks(false);
-        if($("#preview-links").hasClass("active")) {
-            this.updatePreview(LINKS[id]);
-        }
+        this.updatePreview(LINKS[id]);
     },
 
     updateSelectionData: function (props) {
@@ -1585,47 +1584,52 @@ LinkeditorLinks.prototype = {
     },
 
     updatePreview: function(link) {
-        let linkData = link
-
-        let l = this.getLinkById(link.uid)
-        if($('[data-id-preview="'+link.uid+'"]').length < 1) {
-            l.html("<div data-id-preview='" + link.uid + "'></div>")
-        }
+        if($("#preview-links").hasClass("active")) {
+            let linkData = link
 
-        $("[data-id-preview="+linkData.uid+"]").css({
-            height: '100%',
-            width: '100%'
-        })
+            let l = this.getLinkById(link.uid)
+            if ($('[data-id-preview="' + link.uid + '"]').length < 1) {
+                l.html("<div data-id-preview='" + link.uid + "'></div>")
+            }
 
-        if(linkData.type === '14') {
-            $("[data-id-preview="+linkData.uid+"]").css({
-                backgroundColor: linkData.to,
-                'z-index': 99
+            $("[data-id-preview=" + linkData.uid + "]").css({
+                height: '100%',
+                width: '100%'
             })
 
-            /*gsapConfig.forEach(function(conf) {
-                gsap.to($("[data-id-preview="+linkData.uid+"]"),conf)
-            })*/
-        } else if(linkData.type === '15' || /\.(jpg|png|svg|webp|avif)$/.exec(linkData.image)) {
-            let imgUrl = linkData.type === '15' ? ASSETS['uid_'+linkData.uid]['url'] : "/fluidbook-publication/"+FLUIDBOOK_DATA.id +"/edit/links/assets/"+linkData.image
-            let img = "<img src='"+imgUrl+"' />"
-            $("[data-id-preview="+linkData.uid+"]").html(img)
+            if (linkData.type === '14') {
+                $("[data-id-preview=" + linkData.uid + "]").css({
+                    backgroundColor: linkData.to,
+                    'z-index': 99
+                })
 
-            $("[data-id-preview="+linkData.uid+"] img").css({
-                height: '100%',
-                width: '100%',
-                display: 'block',
-                'background-size': '100% 100%',
-                'background-position': '0 0',
-            })
-        } else if(linkData.type === '35') {
-            var hash = 'fb_'+window.MD5(linkData.image).toString().substring(0,10)
-            this.setFontSize(linkData, hash)
-            $("[data-id-preview=" + linkData.uid + "]").text(linkData.to).css({
-                'font-family': hash,
-                'color': linkData.extra,
-            })
-            this.updateFontSize(link)
+                /*gsapConfig.forEach(function(conf) {
+                    gsap.to($("[data-id-preview="+linkData.uid+"]"),conf)
+                })*/
+            } else if (linkData.type === '15' || /\.(jpg|png|svg|webp|avif)$/.exec(linkData.image)) {
+                let imgUrl = linkData.type === '15' ? ASSETS['uid_' + linkData.uid]['url'] : "/fluidbook-publication/" + FLUIDBOOK_DATA.id + "/edit/links/assets/" + linkData.image
+                imgUrl = imgUrl + (imgUrl.includes('.svg') ? "#svgView(preserveAspectRatio(none))" : '')
+                let img = "<img src='" + imgUrl + "' />"
+                $("[data-id-preview=" + linkData.uid + "]").html(img)
+
+                $("[data-id-preview=" + linkData.uid + "] img").css({
+                    height: '100%',
+                    width: '100%',
+                    display: 'block',
+                    'background-size': '100% 100%',
+                    'background-position': '0 0',
+                })
+            } else if (linkData.type === '35') {
+                var hash = 'fb_' + window.MD5(linkData.image).toString().substring(0, 10)
+                this.setFontSize(linkData, hash)
+                $("[data-id-preview=" + linkData.uid + "]").text(linkData.to).css({
+                    'height': 'auto',
+                    'width': 'max-content',
+                    'font-family': hash,
+                    'color': linkData.extra,
+                })
+                this.updateFontSize(link)
+            }
         }
     },
 
@@ -1641,11 +1645,11 @@ LinkeditorLinks.prototype = {
         var pw = FLUIDBOOK_DATA.settings.width;
         var ph = FLUIDBOOK_DATA.settings.height;
 
-        var fs = link.height * (1 * Math.min((567 / pw), (709 / ph) ));
+        var fs = link.height * (1 * Math.min((567 / pw), (709 / ph)));
 
         try {
             $("[data-id-preview=" + link.uid + "]").text(link.to).css({
-                'font-size': Math.round((fs / FONT_SIZE[hash]['capHeight'])) + 'px',
+                'font-size': (fs / FONT_SIZE[hash]['capHeight']).toFixed(2) + 'px',
                 'line-height': FONT_SIZE[hash]['capHeight']
             })
         } catch (e) {