wip #5479 @1

diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js
index 2a7827654a34a540b992f3828ffc1b54cb33ec9a..37ec10f7f67a18238127810c99b08387f4a9fe41 100644 (file)
--- a/resources/linkeditor/js/linkeditor.js
+++ b/resources/linkeditor/js/linkeditor.js
@@ -1,13 +1,5 @@
-window.$ = window.jQuery = require('jquery');
-window.key = require('keymaster');
 import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
-
-window.tippy = tippy;
-
-require('jquery.scrollto');
-require('jquery-contextmenu');
-
 import LinkeditorLinks from './linkeditor.links';
 import LinkeditorLoader from './linkeditor.loader';
 import LinkeditorResize from './linkeditor.resize';
@@ -17,6 +9,11 @@ import LinkeditorUtils from './linkeditor.utils';
 import LinkeditorZoom from './linkeditor.zoom';
 import LinkeditorSave from './linkeditor.save';
 
+window.$ = window.jQuery = require('jquery');
+window.key = require('keymaster');
+window.tippy = tippy;
+require('jquery.scrollto');
+
 function LinkEditor() {
     this.single = ['mobilefirst', 'portrait'].indexOf(FLUIDBOOK_DATA.settings.mobileNavigationType) >= 0;
     this.pw = FLUIDBOOK_DATA.settings.width;

diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index db2373aa6c96995c9807b8b48e9d4ae4a7a639dc..fb2b979e6ef9ff6cc6ddba0f92c7b45022bbae3c 100644 (file)
--- a/resources/linkeditor/js/linkeditor.links.js
+++ b/resources/linkeditor/js/linkeditor.links.js
@@ -87,6 +87,7 @@ LinkeditorLinks.prototype = {
         if (this.resizeLinkPos === null) {
             return;
         }
+        let $this = this;
         let f = 1 / (this.linkeditor.fs * this.linkeditor.zoom.zoom);
         let dx = (this.linkeditor.mx - this.resizeLinkPos.x) * f;
         let dy = (this.linkeditor.my - this.resizeLinkPos.y) * f;
@@ -106,38 +107,41 @@ LinkeditorLinks.prototype = {
             width = dx;
         }
 
+        let magnet = !key.ctrl;
+
         $(".link.selected").each(function () {
             let newWidth = $(this).data('drag-orig-width') + width;
             let newHeight = $(this).data('drag-orig-height') + height;
 
-            if (key.ctrl) {
+            if (key.shift) {
+                magnet = false;
                 // Keep ratio
                 let ratio = $(this).data('drag-orig-width') / $(this).data('drag-orig-height');
                 let xscale = newWidth / $(this).data('drag-orig-width');
                 let yscale = newHeight / $(this).data('drag-orig-height');
-                if (['ne', 'nw', 'se', 'sw'].indexOf(this.resizeLinkPos.corner) >= 0) {
+                if (['ne', 'nw', 'se', 'sw'].indexOf($this.resizeLinkPos.corner) >= 0) {
                     if (xscale < yscale) {
                         newHeight = newWidth / ratio;
                     } else {
                         newWidth = newHeight * ratio;
                     }
-                } else if (['e', 'w'].indexOf(this.resizeLinkPos.corner) >= 0) {
+                } else if (['e', 'w'].indexOf($this.resizeLinkPos.corner) >= 0) {
                     newHeight = newWidth / ratio;
-                } else if (['n', 's'].indexOf(this.resizeLinkPos.corner) >= 0) {
+                } else if (['n', 's'].indexOf($this.resizeLinkPos.corner) >= 0) {
                     newWidth = newHeight * ratio;
                 }
 
                 width = newWidth - $(this).data('drag-orig-width');
                 height = newHeight - $(this).data('drag-orig-height');
 
-                if (['ne', 'e', 'se'].indexOf(this.resizeLinkPos.corner) >= 0) {
+                if (['ne', 'e', 'se'].indexOf($this.resizeLinkPos.corner) >= 0) {
                     left = 0;
-                } else if (['nw', 'w', 'sw'].indexOf(this.resizeLinkPos.corner) >= 0) {
+                } else if (['nw', 'w', 'sw'].indexOf($this.resizeLinkPos.corner) >= 0) {
                     left = width;
                 }
-                if (['ne', 'n', 'nw'].indexOf(this.resizeLinkPos.corner) >= 0) {
+                if (['ne', 'n', 'nw'].indexOf($this.resizeLinkPos.corner) >= 0) {
                     top = height;
-                } else if (['se', 's', 'sw'].indexOf(this.resizeLinkPos.corner) >= 0) {
+                } else if (['se', 's', 'sw'].indexOf($this.resizeLinkPos.corner) >= 0) {
                     top = 0;
                 }
             }
@@ -145,6 +149,32 @@ LinkeditorLinks.prototype = {
             let newLeft = $(this).data('drag-orig-left') + left;
             let newTop = $(this).data('drag-orig-top') + top;
 
+            if (magnet) {
+                let diff = 0;
+                if (left !== 0) {
+                    let magnetLeft = $this.linkeditor.utils.magnetize(newLeft, $this.magnetValuesX);
+                    diff = newLeft - magnetLeft;
+                    newLeft = magnetLeft;
+                    newWidth += diff;
+                }
+                if (top !== 0) {
+                    let magnetTop = $this.linkeditor.utils.magnetize(newTop, $this.magnetValuesY)
+                    diff = newTop - magnetTop;
+                    newTop = magnetTop;
+                    newHeight += diff;
+                }
+                if (width !== 0) {
+                    let magnetLeft = $this.linkeditor.utils.magnetize(newLeft, $this.magnetValuesX, newWidth);
+                    diff = newLeft - magnetLeft;
+                    newWidth -= diff;
+                }
+                if (height !== 0) {
+                    let magnetTop = $this.linkeditor.utils.magnetize(newTop, $this.magnetValuesY, newHeight);
+                    diff = newTop - magnetTop;
+                    newHeight -= diff;
+                }
+            }
+
             $(this).attr('fb-left', newLeft)
                 .attr('fb-top', newTop)
                 .attr('fb-width', newWidth)
@@ -174,13 +204,25 @@ LinkeditorLinks.prototype = {
             return;
         }
 
+        let magnet = !key.ctrl && $(".link.selected").length === 1;
         let $this = this;
         let f = 1 / (this.linkeditor.fs * this.linkeditor.zoom.zoom);
         let dx = (this.linkeditor.mx - this.dragLinkPos.x) * f;
         let dy = (this.linkeditor.my - this.dragLinkPos.y) * f;
+
         $(".link.selected").each(function () {
-            $(this).attr('fb-left', $this.linkeditor.utils.magnetize($(this).data('drag-orig-left') + dx, $this.magnetValuesX, $(this).data('drag-orig-width')))
-                .attr('fb-top', $this.linkeditor.utils.magnetize($(this).data('drag-orig-top') + dy, $this.magnetValuesY, $(this).data('drag-orig-height')))
+            let left = $(this).data('drag-orig-left') + dx;
+            let top = $(this).data('drag-orig-top') + dy;
+
+            // Magnets are enabled when ctrl is not pressed and there is only one item in the selection
+            if (magnet) {
+                left = $this.linkeditor.utils.magnetize(left, $this.magnetValuesX, $(this).data('drag-orig-width'));
+                top = $this.linkeditor.utils.magnetize(top, $this.magnetValuesY, $(this).data('drag-orig-height'));
+            }
+
+            $(this)
+                .attr('fb-left', left)
+                .attr('fb-top', top)
                 .attr('fb-update', '1');
         });
         this.linkeditor.updateFBElements(false);