From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 20 Sep 2022 14:35:41 +0000 (+0200)
Subject: wip #5467 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=4a40ac0fdd4f29d41836cd91f7875270d6fa66d0;p=fluidbook-toolbox.git

wip #5467 @1
---

diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js
index 33c5153c5..04b09d07a 100644
--- a/resources/linkeditor/js/linkeditor.js
+++ b/resources/linkeditor/js/linkeditor.js
@@ -2,6 +2,7 @@ window.$ = window.jQuery = require('jquery');
 import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
 import key from 'keymaster';
+
 require('jquery.scrollto');
 require('jquery-contextmenu');
 
@@ -27,6 +28,7 @@ var dimensionProperties = ['left', 'top', 'width', 'height'];
 var rulersMagnetValuesX = [];
 var rulersMagnetValuesY = [];
 var currentSelection = [];
+var dragLinkPos = null;
 
 $(function () {
     init();
@@ -63,7 +65,22 @@ function init() {
     $("#linkeditor-canvas").on('scroll', function () {
         updateRulers();
     });
-    $("#linkeditor-main").on('mousedown', function (e) {
+
+    $(document).on('mousedown', '.link', function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!$(this).hasClass('selected')) {
+            if (!e.ctrlKey) {
+                deselectAllLinks();
+            }
+            selectLink($(this));
+        }
+        startDragLink();
+
+        return false;
+    });
+
+    $(document).on('mousedown', "#linkeditor-main", function (e) {
         if ($(this).hasClass('grab') && zoom > 1) {
             zoomdragging = {
                 x: e.pageX,
@@ -78,12 +95,6 @@ function init() {
         deselectAllLinks();
     });
 
-    $(document).on('mousedown', '.link', function (e) {
-        if (!e.ctrlKey) {
-            deselectAllLinks();
-        }
-        selectLink($(this));
-    });
 
     $("#linkeditor-ruler-x").on('mousedown', function (e) {
         addRuler('y');
@@ -106,11 +117,13 @@ function init() {
             moveZoomDrag(e);
         }
         updateMousePosition(e);
+        moveDragLink();
     });
     $(window).on('mouseup', function (e) {
         if (zoomdragging !== false) {
             moveZoomDrag(e);
         }
+        stopDragLink();
         stopMoveRuler();
         resetZoomDrag();
     });
@@ -144,11 +157,64 @@ function init() {
     $('#linkeditor-fluidbook').css({
         width: fw, height: ph
     });
+
+    key('left', function () {
+        offsetSelectedLinks('left', -1);
+    });
+    key('ctrl+left', function () {
+        offsetSelectedLinks('left', -10);
+    });
+    key('right', function () {
+        offsetSelectedLinks('left', 1);
+    });
+    key('ctrl+right', function () {
+        offsetSelectedLinks('left', 10);
+    });
+    key('up', function () {
+        offsetSelectedLinks('top', -1);
+    });
+    key('ctrl+up', function () {
+        offsetSelectedLinks('top', -10);
+    });
+    key('down', function () {
+        offsetSelectedLinks('top', 1);
+    });
+    key('ctrl+down', function () {
+        offsetSelectedLinks('top', 10);
+    });
+
+
     initToolbar();
     resize();
     changePage();
 }
 
+function startDragLink() {
+    dragLinkPos = {x: mx, y: my};
+    $(".link.selected").each(function () {
+        $(this).data('drag-orig-left', parseFloat($(this).attr('fb-left')));
+        $(this).data('drag-orig-top', parseFloat($(this).attr('fb-top')));
+    });
+}
+
+function stopDragLink() {
+    moveDragLink();
+    dragLinkPos = null;
+}
+
+function moveDragLink() {
+    if (dragLinkPos === null) {
+        return;
+    }
+    var f = 1 / (fs * zoom);
+    var dx = (mx - dragLinkPos.x) * f;
+    var dy = (my - 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');
+    });
+    updateFBElements(false);
+}
+
 function selectLink(l) {
     if ($(l).find('.corners').length === 0) {
         $(l).append('<div class="corners"><div class="nw"></div><div class="n"></div><div class="ne"></div><div class="e"></div><div class="se"></div><div class="s"></div><div class="sw"></div><div class="w"></div></div>')
@@ -157,11 +223,21 @@ function selectLink(l) {
     currentSelection.push(l);
 }
 
+
 function deselectAllLinks() {
     currentSelection = [];
     $(".link.selected").removeClass('selected');
 }
 
+function offsetSelectedLinks(dim, value) {
+    console.log(dim, value);
+    $('.link.selected').each(function () {
+        var v = parseFloat($(this).attr('fb-' + dim));
+        $(this).attr('fb-' + dim, v + value).attr('fb-update', '1');
+    });
+    updateFBElements();
+}
+
 function initToolbar() {
     $("#linkeditor-page-field input").on('change', function () {
         changePage($(this).val());
@@ -196,7 +272,7 @@ function initToolbar() {
 }
 
 function runAction(act) {
-    eval(act+'()');
+    eval(act + '()');
 }
 
 function saveLinks(message) {
@@ -270,7 +346,7 @@ function addRuler(axis, pos, uid) {
         RULERS[uid] = {page: currentPage, type: axis, uid: uid};
         hasChanged();
     }
-    var ruler = $('<div class="ruler" data-uid="' + uid + '" fb-ref="editor" data-axis="' + axis + '"></div>');
+    var ruler = $('<div class="ruler" data-uid="' + uid + '" fb-update="1" fb-ref="editor" data-axis="' + axis + '"></div>');
     if (pos === undefined) {
         movingRuler = ruler;
     } else {
@@ -310,7 +386,7 @@ function moveRuler() {
     var editorMouse = globalToEditor(mx, my);
     var fbMouse = globalToFluidbook(mx, my, false);
     var css = {};
-    var attrs = {};
+    var attrs = {'fb-update': '1'};
     var v, fbv;
     if ($(movingRuler).data('axis') === 'x') {
         v = editorMouse.x;
@@ -372,8 +448,13 @@ function getLinksOfPage(p) {
     return res;
 }
 
-function updateFBElements() {
-    $('[fb-ref]').each(function () {
+function updateFBElements(force) {
+    var selector = '[fb-ref]';
+    if (force !== true) {
+        selector += '[fb-update="1"]';
+    }
+
+    $(selector).each(function () {
         var e = $(this);
         var rect = $(this).attr('fb-ref');
         var css = {};
@@ -387,7 +468,7 @@ function updateFBElements() {
                 }
             }
         });
-        $(e).css(css);
+        $(e).css(css).attr('fb-update', '0');
     });
 }
 
@@ -634,7 +715,7 @@ function addLink(link) {
         }
     });
 
-    var e = $('<div class="link" fb-ref="editor"></div>');
+    var e = $('<div class="link" fb-ref="editor" fb-update="1"></div>');
     $(e).attr(attrs);
     $("#linkeditor-links").append(e);
 }
@@ -745,7 +826,7 @@ function updateRulers() {
         }
     }
     $("#linkeditor-ruler-x").html(xruler);
-    updateFBElements()
+    updateFBElements(true);
     updateMousePositionRulers();
 }