From e9fc396baea376ba92726735e361c6c32027b42b Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Fri, 23 Sep 2022 09:22:04 +0200 Subject: [PATCH] wip #5479 @1 --- resources/linkeditor/js/linkeditor.js | 13 ++--- resources/linkeditor/js/linkeditor.links.js | 62 +++++++++++++++++---- 2 files changed, 57 insertions(+), 18 deletions(-) diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js index 2a7827654..37ec10f7f 100644 --- 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 db2373aa6..fb2b979e6 100644 --- 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); -- 2.39.5