wip #5884 @1

diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js
index bbae237421b30e2243e9901e66d9cfc1aebe0479..fc70d7bb771b06f74b8a379faa7383d62d0709ae 100644 (file)
--- a/resources/linkeditor/js/linkeditor.js
+++ b/resources/linkeditor/js/linkeditor.js
@@ -157,25 +157,26 @@ LinkEditor.prototype = {
 
 
         $(window).on('keydown', function (e) {
-            if (e.keyCode == 32) {
+            if (e.keyCode == 16) {
+                $("#linkeditor-main").addClass('selection');
+            } else if (e.keyCode == 32) {
                 if (!$this.mobileFirst) {
                     $("#linkeditor-main").addClass('grab');
                 }
-                return false;
             } else if (e.keyCode == 18) {
                 $("#linkeditor-main").addClass('duplicate');
-                return false;
             }
             $this.rulers.moveRuler();
         });
 
         // Disable scroll by spacebar
         $(window).on('keyup', function (e) {
-            if (e.keyCode == 32) {
+            if (e.keyCode == 16) {
+                $("#linkeditor-main").removeClass('selection');
+            } else if (e.keyCode == 32) {
                 $this.zoom.resetZoomDrag();
             } else if (e.keyCode == 18) {
                 $("#linkeditor-main").removeClass('duplicate');
-                return false;
             }
             $this.rulers.moveRuler();
         });
@@ -187,7 +188,10 @@ LinkEditor.prototype = {
             }
             var deselectAll = true;
 
-            if ($('#linkeditor-main').hasClass('duplicate')) {
+            if ($('#linkeditor-main').hasClass('selection')) {
+                $this.links.startRectSelection();
+                return false;
+            } else if ($('#linkeditor-main').hasClass('duplicate')) {
                 $this.links.duplicateLinkClick();
                 return false;
             } else if ($('#linkeditor-main').hasClass('grab')) {

diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index 1373d963133d7632aa190861c7159426c9658896..5efce8868f514c5b4343966a7cf9a9f06f9cbfad 100644 (file)
--- a/resources/linkeditor/js/linkeditor.links.js
+++ b/resources/linkeditor/js/linkeditor.links.js
@@ -12,6 +12,8 @@ var LinkeditorLinks = function (linkeditor) {
 
     this.contextMenuPosition = null;
 
+    this.rectSelection = null;
+
     this.dropTypes = [4, 7, 12, 15, 16, 17, 18, 25, 30, 31];
 
     this.init();
@@ -496,6 +498,7 @@ LinkeditorLinks.prototype = {
     },
 
     mouseUp: function () {
+        this.endRectSelection();
         this.stopDragLink();
         this.stopResizeLink();
         this.cleanPendingCreateLink();
@@ -677,6 +680,9 @@ LinkeditorLinks.prototype = {
     },
 
     moveDragLink: function () {
+        if (this.updateRectSelection()) {
+            return;
+        }
         if (this.dragLinkPos === null) {
             return;
         }
@@ -1052,13 +1058,21 @@ LinkeditorLinks.prototype = {
         this.linkeditor.hasChanged();
     },
 
-    dimensionSelection: function (dimension) {
-        let d = this.getMinMaxSelection(dimension);
-        this.getCurrentSelection().each(function () {
-            $(this).attr('fb-' + dimension, d.maxl);
-        });
-        this.updateSelectionData([dimension]);
-        this.linkeditor.hasChanged();
+    dimensionSelection: function (dimension, skipChanged) {
+        if (dimension === 'both') {
+            this.dimensionSelection('width', true);
+            this.dimensionSelection('height', true);
+
+        } else {
+            let d = this.getMinMaxSelection(dimension);
+            this.getCurrentSelection().each(function () {
+                $(this).attr('fb-' + dimension, d.maxl);
+            });
+        }
+        if (skipChanged !== true) {
+            this.updateSelectionData([dimension]);
+            this.linkeditor.hasChanged();
+        }
     },
 
     updateLinkData: function (id, data) {
@@ -1199,6 +1213,61 @@ LinkeditorLinks.prototype = {
 
         this.linkeditor.hasChanged(false);
     },
+
+
+    startRectSelection: function () {
+        $('.link.selected').addClass('selectedBeforeRect');
+        this.rectSelection = this.linkeditor.globalToCanvas(this.linkeditor.mx, this.linkeditor.my);
+    },
+
+    updateRectSelection: function () {
+        if (this.rectSelection === null) {
+            return false;
+        }
+
+        var $this = this;
+        let pos = this.linkeditor.globalToCanvas(this.linkeditor.mx, this.linkeditor.my);
+
+        var css = {};
+        css.width = pos.x - this.rectSelection.x;
+        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;
+        }
+        if (css.height < 0) {
+            css.top = pos.y;
+            css.height *= -1;
+        }
+
+        $("#linkeditor-selectlink-rect").show();
+        $("#linkeditor-selectlink-rect").css(css);
+
+        let selectRect = $("#linkeditor-selectlink-rect").get(0).getBoundingClientRect();
+        $(".link:not(.selectedBeforeRect)").each(function () {
+            if ($this.linkeditor.utils.intersectRect($(this).get(0).getBoundingClientRect(), selectRect)) {
+                $this.selectLink(this);
+            } else {
+                $this.deselectLink(this);
+            }
+        });
+
+        return true;
+    },
+
+    endRectSelection: function () {
+        if (this.rectSelection === null) {
+            return false;
+        }
+        $(".selectedBeforeRect").removeClass('selectedBeforeRect');
+        $("#linkeditor-selectlink-rect").hide();
+        this.rectSelection = null;
+        return true;
+    },
+
+
 };
 
 module.exports = LinkeditorLinks;

diff --git a/resources/linkeditor/js/linkeditor.utils.js b/resources/linkeditor/js/linkeditor.utils.js
index 087568218cf15486619e5766f4a3e1162c383ed7..a111550b69d9af57d0dc62856823a9ba94db818b 100644 (file)
--- a/resources/linkeditor/js/linkeditor.utils.js
+++ b/resources/linkeditor/js/linkeditor.utils.js
@@ -135,7 +135,13 @@ LinkeditorUtils.prototype = {
 
     roundDimension: function (v) {
         return (Math.round(v * 100000) / 100000);
-    }
+    },
+    intersectRect: function (r1, r2) {
+        return !(r2.left > r1.right ||
+            r2.right < r1.left ||
+            r2.top > r1.bottom ||
+            r2.bottom < r1.top);
+    },
 };
 
 module.exports = LinkeditorUtils;

diff --git a/resources/linkeditor/style/style.sass b/resources/linkeditor/style/style.sass
index 7f8543d1ccfc3356ee8e833a653b98f2cf68aaf7..74b870d280ce8770d5e2907e3c0b172b26f2b164 100644 (file)
--- a/resources/linkeditor/style/style.sass
+++ b/resources/linkeditor/style/style.sass
@@ -55,7 +55,7 @@ body, #linkeditor, html
         &.grabbing
             cursor: grabbing
 
-        #linkeditor-duplicatelink-overlay
+        #linkeditor-duplicatelink-overlay, #linkeditor-selectlink-overlay
             display: none
             position: absolute
             z-index: 700
@@ -65,11 +65,21 @@ body, #linkeditor, html
             max-height: calc(100% - $rulers-size)
             width: calc(100% - $rulers-size)
             max-width: calc(100% - $rulers-size)
-            cursor: copy
 
         &.duplicate
             #linkeditor-duplicatelink-overlay
                 display: block
+                cursor: copy
+
+        &.selection
+            #linkeditor-selectlink-overlay
+                display: block
+                cursor: crosshair
+
+                #linkeditor-selectlink-rect
+                    border: 1px dashed #000000
+                    background-color: rgba(255, 255, 255, 0.25)
+                    position: absolute
 
         #linkeditor-editor
             position: relative

diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php
index d4947139b6463784324202dcb2a6e8dced0ee77a..df32be8f2323cd0ac2a7a2f1d13ebc82005e276b 100644 (file)
--- a/resources/views/fluidbook_publication/link_editor.blade.php
+++ b/resources/views/fluidbook_publication/link_editor.blade.php
@@ -264,6 +264,7 @@
                     <div class="ruler-bar" id="linkeditor-ruler-y"></div>
                 </div>
                 <div draggable="false" id="linkeditor-duplicatelink-overlay"></div>
+                <div draggable="false" id="linkeditor-selectlink-overlay"><div id="linkeditor-selectlink-rect"></div></div>
                 <div draggable="false" id="linkeditor-canvas">
                     <div draggable="false" id="linkeditor-zoom">
                         <div draggable="false" id="linkeditor-fluidbook">