From a8debcd29957b6c98721145b7ce5c7409017ca50 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Wed, 26 Apr 2023 11:06:34 +0200 Subject: [PATCH] wip #5884 @1 --- resources/linkeditor/js/linkeditor.js | 16 ++-- resources/linkeditor/js/linkeditor.links.js | 83 +++++++++++++++++-- resources/linkeditor/js/linkeditor.utils.js | 8 +- resources/linkeditor/style/style.sass | 14 +++- .../link_editor.blade.php | 1 + 5 files changed, 106 insertions(+), 16 deletions(-) diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js index bbae23742..fc70d7bb7 100644 --- 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 1373d9631..5efce8868 100644 --- 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 087568218..a111550b6 100644 --- 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 7f8543d1c..74b870d28 100644 --- 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 d4947139b..df32be8f2 100644 --- a/resources/views/fluidbook_publication/link_editor.blade.php +++ b/resources/views/fluidbook_publication/link_editor.blade.php @@ -264,6 +264,7 @@
+
-- 2.39.5