wip #6960 @5:00

diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index 1d6b57aa3de3329dcec1704ae9bb09c434ddc589..a9f42e25b2cd0cd36b002534c257826f0b73dd1a 100644 (file)
--- a/resources/linkeditor/js/linkeditor.links.js
+++ b/resources/linkeditor/js/linkeditor.links.js
@@ -1311,6 +1311,7 @@ LinkeditorLinks.prototype = {
         css.height = pos.y - this.rectSelection.y;
         css.left = this.rectSelection.x;
         css.top = this.rectSelection.y;
+
         if (css.width < 0) {
             css.left = pos.x;
             css.width *= -1;
@@ -1612,10 +1613,6 @@ LinkeditorLinks.prototype = {
                     backgroundColor: linkData.to,
                     'z-index': 99
                 })
-
-                /*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))" : '')
@@ -1639,6 +1636,27 @@ LinkeditorLinks.prototype = {
                     'color': linkData.extra
                 })
                 this.updateFontSize(link)
+            } else if (linkData.type === '39') {
+                $("[data-id-preview=" + linkData.uid + "]").html('<canvas id="canvas'+ linkData.uid+'" width="'+linkData.width* this.linkeditor.zoom.zoom+'" height="'+linkData.height* this.linkeditor.zoom.zoom+'"></canvas>')
+
+                const canvas = $('#canvas'+ linkData.uid).get(0),
+                    ctx = canvas.getContext('2d'),
+                    xLink = linkData.left,
+                    yLink = linkData.top,
+                    wLink = linkData.width,
+                    hLink = linkData.height;
+                var image = new Image();
+                image.src = $(".contents .images").attr('src')
+
+                const image_image = $(".contents .images").get(0);
+                const coord = image_image.getBoundingClientRect()
+                const image_texts = $(".contents .texts").attr("src");
+
+                console.log("pw",this.linkeditor.ph,hLink,yLink)
+                const $this = this
+                image.onload = function() {
+                    ctx.drawImage(image,-(xLink - $this.linkeditor.pw) * $this.linkeditor.zoom.zoom,-yLink* $this.linkeditor.zoom.zoom,$this.linkeditor.pw * $this.linkeditor.zoom.zoom,$this.linkeditor.ph * $this.linkeditor.zoom.zoom);
+                }
             }
 
             if (linkData.type === '10') {