From f6427112925d11082e152f84d054bf1fca9002f8 Mon Sep 17 00:00:00 2001 From: soufiane Date: Fri, 24 Jan 2025 11:00:40 +0100 Subject: [PATCH] wait #6961 @350:00 --- .../js/fluidbook.links.animations.js | 1 + resources/linkeditor/js/linkeditor.js | 4 +- resources/linkeditor/js/linkeditor.links.js | 72 +++++--- .../linkeditor/js/linkeditor.previewLinks.js | 173 +++++++++++++----- resources/linkeditor/js/linkeditor.resize.js | 2 +- resources/linkeditor/js/linkeditor.zoom.js | 8 +- resources/linkeditor/style/inc/_links.sass | 80 ++++++-- .../link_editor.blade.php | 6 + 8 files changed, 253 insertions(+), 93 deletions(-) diff --git a/resources/linkeditor/js/fluidbook.links.animations.js b/resources/linkeditor/js/fluidbook.links.animations.js index 2da9f3863..9fd3388ec 100644 --- 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 d797621f3..e56a52f48 100644 --- 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 3d2a4c920..e0b963dd3 100644 --- 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("") + $("body").append("
") 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#"+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 db7cb7c42..cc7f75682 100644 --- 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('') + } 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("
") + //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 = ` -
-
-
-
+
+
+
+
+
+
+
+
+
`; - if(zoom) { + /*if(zoom) { html = '
'+html+'
' + }*/ + 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 ccda429c0..7607b5381 100644 --- 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 f237433d5..82735bbcf 100644 --- 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 ce8edb572..e3b6b8734 100644 --- 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 0a22be904..f672a23c6 100644 --- a/resources/views/fluidbook_publication/link_editor.blade.php +++ b/resources/views/fluidbook_publication/link_editor.blade.php @@ -308,6 +308,10 @@ @endif + + @@ -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; -- 2.39.5