From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 22 Sep 2022 17:01:00 +0000 (+0200)
Subject: wip #5479 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=ebb5a276594f2296813be398f1afe45cbfd5aedc;p=fluidbook-toolbox.git

wip #5479 @1
---

diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js
index 7d8ffb453..2a7827654 100644
--- a/resources/linkeditor/js/linkeditor.js
+++ b/resources/linkeditor/js/linkeditor.js
@@ -236,6 +236,21 @@ LinkEditor.prototype = {
         this.loader.preloadPages();
     },
 
+    getCurrentPages: function (page) {
+        if (page === undefined) {
+            page = this.currentPage;
+        } else {
+            page = this.utils.normalizePage(page);
+        }
+        if (this.single) {
+            return [page];
+        }
+        if (page % 2 === 1) {
+            page--;
+        }
+        return [page, page + 1];
+    },
+
 
 // Convert global coordinates to fluidbook ones
     globalToFluidbook: function (x, y, onePage) {
diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index d444ac3ac..db2373aa6 100644
--- a/resources/linkeditor/js/linkeditor.links.js
+++ b/resources/linkeditor/js/linkeditor.links.js
@@ -5,12 +5,15 @@ var LinkeditorLinks = function (linkeditor) {
     this.dragLinkPos = null;
     this.resizeLinkPos = null;
 
+    this.magnetValuesX = [];
+    this.magnetValuesY = [];
+
     this.init();
 }
 
 LinkeditorLinks.prototype = {
     init: function () {
-        var $this = this;
+        let $this = this;
         $(document).on('mousedown', '.link .corners div', function (e) {
             e.preventDefault();
             e.stopPropagation();
@@ -84,11 +87,11 @@ LinkeditorLinks.prototype = {
         if (this.resizeLinkPos === null) {
             return;
         }
-        var f = 1 / (this.linkeditor.fs * this.linkeditor.zoom.zoom);
-        var dx = (this.linkeditor.mx - this.resizeLinkPos.x) * f;
-        var dy = (this.linkeditor.my - this.resizeLinkPos.y) * f;
+        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;
 
-        var top = 0, left = 0, width = 0, height = 0;
+        let top = 0, left = 0, width = 0, height = 0;
 
         if (['n', 'ne', 'nw'].indexOf(this.resizeLinkPos.corner) >= 0) {
             top = dy;
@@ -104,14 +107,14 @@ LinkeditorLinks.prototype = {
         }
 
         $(".link.selected").each(function () {
-            var newWidth = $(this).data('drag-orig-width') + width;
-            var newHeight = $(this).data('drag-orig-height') + height;
+            let newWidth = $(this).data('drag-orig-width') + width;
+            let newHeight = $(this).data('drag-orig-height') + height;
 
             if (key.ctrl) {
                 // Keep ratio
-                var ratio = $(this).data('drag-orig-width') / $(this).data('drag-orig-height');
-                var xscale = newWidth / $(this).data('drag-orig-width');
-                var yscale = newHeight / $(this).data('drag-orig-height');
+                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 (xscale < yscale) {
                         newHeight = newWidth / ratio;
@@ -139,8 +142,8 @@ LinkeditorLinks.prototype = {
                 }
             }
 
-            var newLeft = $(this).data('drag-orig-left') + left;
-            var newTop = $(this).data('drag-orig-top') + top;
+            let newLeft = $(this).data('drag-orig-left') + left;
+            let newTop = $(this).data('drag-orig-top') + top;
 
             $(this).attr('fb-left', newLeft)
                 .attr('fb-top', newTop)
@@ -156,6 +159,8 @@ LinkeditorLinks.prototype = {
         $(".link.selected").each(function () {
             $(this).data('drag-orig-left', parseFloat($(this).attr('fb-left')));
             $(this).data('drag-orig-top', parseFloat($(this).attr('fb-top')));
+            $(this).data('drag-orig-width', parseFloat($(this).attr('fb-width')));
+            $(this).data('drag-orig-height', parseFloat($(this).attr('fb-height')));
         });
     },
 
@@ -168,11 +173,15 @@ LinkeditorLinks.prototype = {
         if (this.dragLinkPos === null) {
             return;
         }
-        var f = 1 / (this.linkeditor.fs * this.linkeditor.zoom.zoom);
-        var dx = (this.linkeditor.mx - this.dragLinkPos.x) * f;
-        var dy = (this.linkeditor.my - this.dragLinkPos.y) * f;
+
+        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).data('drag-orig-left') + dx).attr('fb-top', $(this).data('drag-orig-top') + dy).attr('fb-update', '1');
+            $(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')))
+                .attr('fb-update', '1');
         });
         this.linkeditor.updateFBElements(false);
     },
@@ -193,7 +202,7 @@ LinkeditorLinks.prototype = {
 
     offsetSelectedLinks: function (dim, value) {
         $('.link.selected').each(function () {
-            var v = parseFloat($(this).attr('fb-' + dim));
+            let v = parseFloat($(this).attr('fb-' + dim));
             $(this).attr('fb-' + dim, v + value).attr('fb-update', '1');
         });
         this.linkeditor.updateFBElements();
@@ -220,7 +229,7 @@ LinkeditorLinks.prototype = {
     },
 
     loadLinks: function (page, side) {
-        var $this = this;
+        let $this = this;
         $.each(LINKS, function (uid, link) {
             if (link.page != page) {
                 return;
@@ -233,7 +242,7 @@ LinkeditorLinks.prototype = {
     },
 
     addLink: function (link) {
-        var $this = this;
+        let $this = this;
         if (link.uid === undefined) {
             link.uid = generateUID();
             LINKS[link.uid] = link;
@@ -241,7 +250,7 @@ LinkeditorLinks.prototype = {
             this.linkeditor.hasChanged();
         }
 
-        var attrs = {};
+        let attrs = {};
         $.each(link, function (k, v) {
             if ($this.linkeditor.dimensionProperties.indexOf(k) >= 0) {
                 attrs['fb-' + k] = v;
@@ -250,11 +259,23 @@ LinkeditorLinks.prototype = {
             }
         });
 
-        var e = $('<div class="link" fb-ref="editor" fb-update="1"></div>');
+        let e = $('<div class="link" fb-ref="editor" fb-update="1"></div>');
         $(e).attr(attrs);
         $("#linkeditor-links").append(e);
     },
 
+    updateMagnetValues: function () {
+        let $this = this;
+        this.magnetValuesX = [];
+        this.magnetValuesY = [];
+        $.each(this.linkeditor.rulers.getRulersOfPage(), function (uid, ruler) {
+            if (ruler.type === 'y') {
+                $this.magnetValuesY.push(ruler.pos);
+            } else {
+                $this.magnetValuesX.push(ruler.pos);
+            }
+        });
+    },
 
     clear: function () {
         $("#linkeditor-links").html('');
diff --git a/resources/linkeditor/js/linkeditor.rulers.js b/resources/linkeditor/js/linkeditor.rulers.js
index 014d16c13..62ef11bcd 100644
--- a/resources/linkeditor/js/linkeditor.rulers.js
+++ b/resources/linkeditor/js/linkeditor.rulers.js
@@ -35,15 +35,24 @@ LinkeditorRulers.prototype = {
 
     loadRulers: function (page, side) {
         let $this = this;
+        $.each(this.getRulersOfPage(page), function (uid, ruler) {
+            $this.addRuler(ruler.type, ruler.pos, ruler.uid);
+        });
+        this.linkeditor.links.updateMagnetValues();
+    },
+
+    getRulersOfPage(page) {
+        var pages = this.linkeditor.getCurrentPages(page);
+        var res = {};
         $.each(RULERS, function (uid, ruler) {
-            if (ruler.page != page) {
+            if (pages.indexOf(parseInt(ruler.page)) === -1) {
                 return;
             }
-            $this.addRuler(ruler.type, ruler.pos, ruler.uid);
+            res[uid] = ruler;
         });
+        return res;
     },
 
-
     updateRulers: function () {
         // Update rects
         this.linkeditor.fluidbookRect = $("#linkeditor-fluidbook").get(0).getBoundingClientRect();
@@ -194,6 +203,7 @@ LinkeditorRulers.prototype = {
         $(this.movingRuler).css(css).attr(attrs);
         RULERS[$(this.movingRuler).data('uid')].pos = fbv;
         this.linkeditor.updateFBElements();
+        this.linkeditor.links.updateMagnetValues();
     },
 
     addRuler: function (axis, pos, uid) {
@@ -220,6 +230,7 @@ LinkeditorRulers.prototype = {
         delete RULERS[$(ruler).data('uid')];
         $(ruler).remove();
         this.movingRuler = null;
+        this.linkeditor.links.updateMagnetValues();
         this.linkeditor.hasChanged();
     },
 
diff --git a/resources/linkeditor/js/linkeditor.utils.js b/resources/linkeditor/js/linkeditor.utils.js
index f5122f7e2..e7f10942f 100644
--- a/resources/linkeditor/js/linkeditor.utils.js
+++ b/resources/linkeditor/js/linkeditor.utils.js
@@ -44,10 +44,15 @@ LinkeditorUtils.prototype = {
         return result;
     },
 
-    magnetize: function (value, values) {
+    magnetize: function (value, values, width) {
+        if (width === undefined) {
+            width = 0;
+        }
         let sensibility = 8 / (this.linkeditor.zoom.zoom * this.linkeditor.fs);
         let min = 100000;
         let magnetValue;
+        let magnetizeOtherSide = false;
+
         if (values.length === 0) {
             return value;
         }
@@ -55,16 +60,27 @@ LinkeditorUtils.prototype = {
         for (let i in values) {
             let v = values[i];
             let diff = Math.abs(v - value);
+            let diffOtherSide = Math.abs(v - (value + width));
             if (diff < min) {
                 min = diff;
                 magnetValue = v;
+                magnetizeOtherSide = false;
+            }
+            if (diffOtherSide < min) {
+                min = diffOtherSide;
+                magnetValue = v;
+                magnetizeOtherSide = true;
             }
         }
 
         if (min > sensibility) {
             return value;
         }
-        return magnetValue;
+        if (magnetizeOtherSide) {
+            return magnetValue - width;
+        } else {
+            return magnetValue;
+        }
     },
 };
 
diff --git a/resources/linkeditor/js/linkeditor.zoom.js b/resources/linkeditor/js/linkeditor.zoom.js
index 13abe497c..ce1a00cfc 100644
--- a/resources/linkeditor/js/linkeditor.zoom.js
+++ b/resources/linkeditor/js/linkeditor.zoom.js
@@ -12,7 +12,7 @@ LinkeditorZoom.prototype = {
 
         $("#linkeditor-main").on('wheel', function (e) {
             let delta = e.originalEvent.deltaY;
-            if (delta == 0) {
+            if (delta === 0) {
                 return true;
             }
             e.stopPropagation();
diff --git a/resources/linkeditor/style/rulers.sass b/resources/linkeditor/style/rulers.sass
index b00e2553a..52478a641 100644
--- a/resources/linkeditor/style/rulers.sass
+++ b/resources/linkeditor/style/rulers.sass
@@ -4,7 +4,7 @@
     position: absolute
     top: 0
     left: 0
-    z-index: 600
+    z-index: 400
     border-width: 0
     border-color: #0ff
     border-style: solid