From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 30 Nov 2022 12:04:35 +0000 (+0100)
Subject: wait #5618 @2
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=245825a36aadb80f1d1cf29a0fa429252edf1e34;p=fluidbook-toolbox.git

wait #5618 @2
---

diff --git a/app/SubForms/Link/Base.php b/app/SubForms/Link/Base.php
index d1d22c270..b60527321 100644
--- a/app/SubForms/Link/Base.php
+++ b/app/SubForms/Link/Base.php
@@ -195,6 +195,7 @@ class Base extends Form
     public function addTypeField()
     {
         $this->addField('type', LinkType::class, __('Type de lien'));
+        $this->addUIDField();
     }
 
     public function addDestinationField()
@@ -219,7 +220,7 @@ class Base extends Form
         if ($this->_integration) {
             $this->addField('inline', MultimediaIntegration::class, __('Intégration'));
         }
-        $this->addUIDField();
+
         if ($this->_addedContents) {
             $this->addField('header_contents', FormSection::class, __('Contenus superposés'));
             $this->addField('image', FilesOrURL::class, __('Image'), $this->getFilesOrURLEntry() + ['accept' => self::$_acceptImage]);
diff --git a/app/SubForms/Link/Tooltip.php b/app/SubForms/Link/Tooltip.php
index ebc00e767..3a5d66789 100644
--- a/app/SubForms/Link/Tooltip.php
+++ b/app/SubForms/Link/Tooltip.php
@@ -24,6 +24,5 @@ class Tooltip extends Base
         $this->addField('header_tooltip', FormSection::class, __('Paramètres'));
         $this->addField('tooltip', Textarea::class, __('Texte de l\'infobulle'));
         $this->addField('display_area', Checkbox::class, __('Afficher la zone de couleur au survol'), ['default' => true]);
-        $this->addUIDField();
     }
 }
diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js
index 1269db68a..ef6918d0c 100644
--- a/resources/linkeditor/js/linkeditor.js
+++ b/resources/linkeditor/js/linkeditor.js
@@ -72,6 +72,7 @@ LinkEditor.prototype = {
         this.initEvents();
         this.initIcons();
         this.panels.init();
+        this.zoom.reset();
     },
 
     initIcons: function () {
@@ -89,10 +90,8 @@ LinkEditor.prototype = {
         // Disable scroll by spacebar
         $(window).on('keydown', function (e) {
             if (e.keyCode == 32) {
-                if ($this.zoom.zoom !== 1) {
-                    $("#linkeditor-main").addClass('grab');
-                    return false;
-                }
+                $("#linkeditor-main").addClass('grab');
+                return false;
             } else if (e.keyCode == 18) {
                 $("#linkeditor-main").addClass('duplicate');
                 return false;
@@ -115,7 +114,7 @@ LinkEditor.prototype = {
             if ($(this).hasClass('duplicate')) {
                 $this.links.duplicateLinkClick();
                 return;
-            } else if ($(this).hasClass('grab') && $this.zoom.zoom > 1) {
+            } else if ($(this).hasClass('grab')) {
                 $this.zoom.zoomdragging = {
                     x: $this.mx,
                     y: $this.my,
@@ -124,9 +123,12 @@ LinkEditor.prototype = {
                 };
                 $(this).addClass('grabbing');
             } else {
-                $this.zoom.resetZoomDrag();
-                $this.links.createLinkDrag();
-                deselectAll = false;
+                // Check if the user is not clicking the scrollbar
+                if ($this.mx < $this.canvasRect.right - 20 && $this.my < $this.canvasRect.bottom - 20) {
+                    $this.zoom.resetZoomDrag();
+                    $this.links.createLinkDrag();
+                    deselectAll = false;
+                }
             }
             if (deselectAll) {
                 $this.form.saveFormDataInLink();
@@ -260,7 +262,6 @@ LinkEditor.prototype = {
         this.links.moveDragLink();
         this.links.moveResizeLink();
         this.zoom.updateMousePosition();
-
     },
 
     setMouseCoordinates: function (e) {
diff --git a/resources/linkeditor/js/linkeditor.resize.js b/resources/linkeditor/js/linkeditor.resize.js
index 62b45c896..043d52896 100644
--- a/resources/linkeditor/js/linkeditor.resize.js
+++ b/resources/linkeditor/js/linkeditor.resize.js
@@ -36,8 +36,8 @@ LinkeditorResize.prototype = {
         var aw = this.linkeditor.canvasRect.width - 30;
         var ah = this.linkeditor.canvasRect.height - 30;
         this.linkeditor.fs = Math.min(aw / this.linkeditor.fw, ah / this.linkeditor.fh);
-        var left = (this.linkeditor.canvasRect.width - this.linkeditor.fw * this.linkeditor.fs) / 2;
-        var top = (this.linkeditor.canvasRect.height - this.linkeditor.fh * this.linkeditor.fs) / 2;
+        var left = ((this.linkeditor.canvasRect.width * 2) - this.linkeditor.fw * this.linkeditor.fs) / 2;
+        var top = ((this.linkeditor.canvasRect.height * 2) - this.linkeditor.fh * this.linkeditor.fs) / 2;
         $("#linkeditor-fluidbook").css({left: left, top: top, transform: 'scale(' + this.linkeditor.fs + ')'});
     },
 };
diff --git a/resources/linkeditor/js/linkeditor.zoom.js b/resources/linkeditor/js/linkeditor.zoom.js
index 6fd7f7965..750de7d20 100644
--- a/resources/linkeditor/js/linkeditor.zoom.js
+++ b/resources/linkeditor/js/linkeditor.zoom.js
@@ -11,6 +11,7 @@ LinkeditorZoom.prototype = {
         this.zoomdragging = false;
 
         $("#linkeditor-main").on('wheel', function (e) {
+            var step = $this.zoom >= 1 ? 0.25 : 0.1;
             $this.linkeditor.setMouseCoordinates(e);
             let delta = e.originalEvent.deltaY;
             if (delta === 0) {
@@ -20,11 +21,11 @@ LinkeditorZoom.prototype = {
             e.stopImmediatePropagation();
             e.preventDefault();
             if (delta < 0) {
-                if ($this.setZoom($this.zoom + 0.25)) {
+                if ($this.setZoom($this.zoom + step)) {
                     $this.moveZoom(e);
                 }
             } else {
-                $this.setZoom($this.zoom - 0.25);
+                $this.setZoom($this.zoom - step);
             }
             return false;
         });
@@ -39,7 +40,7 @@ LinkeditorZoom.prototype = {
     },
 
     updateMousePosition: function () {
-        if (!$("#linkeditor-main").hasClass('grab') || this.zoom === 1) {
+        if (!$("#linkeditor-main").hasClass('grab')) {
             this.resetZoomDrag();
         }
         if (this.zoomdragging !== false) {
@@ -49,9 +50,6 @@ LinkeditorZoom.prototype = {
 
     resetZoomDrag: function () {
         $("#linkeditor-main").removeClass('grab').removeClass('grabbing');
-        if (this.zoom === 1) {
-            $("#linkeditor-canvas").scrollTo({left: 0, top: 0});
-        }
         this.zoomdragging = false;
     },
 
@@ -72,18 +70,38 @@ LinkeditorZoom.prototype = {
         this.linkeditor.rulers.updateRulers();
     },
 
-    setZoom: function (z) {
+
+    normalizeZoom: function (z) {
+        return Math.max(0.5, Math.min(8, z));
+    },
+
+    setZoom: function (z, force) {
         let $this = this;
-        z = Math.max(1, Math.min(6, z));
-        if (z === this.zoom) {
+        z = this.normalizeZoom(z);
+        if (force !== true && z === this.zoom) {
             return false;
         }
         this.zoom = z;
+        let cw2 = this.linkeditor.canvasRect.width * 2;
+        let ch2 = this.linkeditor.canvasRect.height * 2;
+        let zh = ch2;
+        if (this.zoom < 1) {
+            zh *= this.zoom;
+        }
         $("#linkeditor-canvas").attr('data-z', this.zoom);
-        $("#linkeditor-zoom").css({transform: 'scale(' + this.zoom + ')', overflow: 'visible'});
+        $("#linkeditor-zoom").css({
+            transform: 'scale(' + this.zoom + ')', overflow: 'visible',
+            width: cw2,
+            maxWidth: cw2,
+            minWidth: cw2,
+            height: zh,
+            minHeight: zh,
+            maxHeight: zh
+        });
+
 
         setTimeout(function () {
-            $("#linkeditor-zoom").css({overflow: 'hidden'});
+            //$("#linkeditor-zoom").css({overflow: 'hidden'});
             if (this.zoom === 1) {
                 $this.resetZoomDrag();
             }
@@ -95,6 +113,7 @@ LinkeditorZoom.prototype = {
 
     reset: function () {
         this.setZoom(1);
+        $("#linkeditor-canvas").scrollTo({top: '50%', left: '50%'});
         this.resetZoomDrag();
     },
 };
diff --git a/resources/linkeditor/style/links.sass b/resources/linkeditor/style/links.sass
index 3b95a023f..92ab99b4a 100644
--- a/resources/linkeditor/style/links.sass
+++ b/resources/linkeditor/style/links.sass
@@ -2,6 +2,8 @@
 
 #linkeditor-links
     .link
+        #linkeditor-main.grab &
+            pointer-events: none
         box-sizing: border-box
         position: absolute
         border: currentColor solid 1px
diff --git a/resources/linkeditor/style/style.sass b/resources/linkeditor/style/style.sass
index b5b0524e5..1235de403 100644
--- a/resources/linkeditor/style/style.sass
+++ b/resources/linkeditor/style/style.sass
@@ -66,14 +66,13 @@ body, #linkeditor, html
             overflow: hidden
 
             #linkeditor-zoom
-                width: 100%
-                height: 100%
-                max-width: 100%
-                max-height: 100%
-                min-height: 100%
-                min-width: 100%
+                width: 200%
+                height: 200%
+                max-width: 200%
+                max-height: 200%
+                min-height: 200%
+                min-width: 200%
                 transform-origin: 0 0
-                overflow: hidden
 
             #linkeditor-canvas
                 background-color: #505050