From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 11 Oct 2022 10:43:46 +0000 (+0200)
Subject: wip #5467 @2
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=66d80dd2b9a6f32e5d10ce4cd0c69ad6d81a8b5c;p=fluidbook-toolbox.git

wip #5467 @2
---

diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js
index 85fde75fb..e74b5aed3 100644
--- a/resources/linkeditor/js/linkeditor.js
+++ b/resources/linkeditor/js/linkeditor.js
@@ -85,6 +85,7 @@ LinkEditor.prototype = {
         });
 
         $(document).on('mousedown', "#linkeditor-main", function (e) {
+            var deselectAll=true;
             $this.setMouseCoordinates(e);
             if ($(this).hasClass('duplicate')) {
                 $this.links.duplicateLinkClick();
@@ -99,8 +100,12 @@ LinkEditor.prototype = {
                 $(this).addClass('grabbing');
             } else {
                 $this.zoom.resetZoomDrag();
+                $this.links.createLinkDrag();
+                deselectAll=false;
+            }
+            if(deselectAll) {
+                $this.links.deselectAllLinks();
             }
-            $this.links.deselectAllLinks();
         });
 
         $(window).on('mousemove', function (e) {
diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index 92eff3780..42e429af1 100644
--- a/resources/linkeditor/js/linkeditor.links.js
+++ b/resources/linkeditor/js/linkeditor.links.js
@@ -80,18 +80,23 @@ LinkeditorLinks.prototype = {
         this.stopResizeLink();
     },
 
+    createLinkDrag: function () {
+        var link = this.duplicateLinkClick({width: 0, height: 0});
+        $(link).addClass('pendingCreate');
+        this.startResizeLink('se');
+    },
+
     startResizeLink: function (corner) {
         this.resizeLinkPos = {x: this.linkeditor.mx, y: this.linkeditor.my, corner: corner};
-        $(".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')));
-        });
+        this.setDragOrigValues();
     },
 
     stopResizeLink: function () {
+        var $this = this;
         this.moveResizeLink();
+        $('.pendingCreate').each(function () {
+            $this.deleteLink($(this), true);
+        });
         this.resizeLinkPos = null;
     },
 
@@ -187,12 +192,25 @@ LinkeditorLinks.prototype = {
                 }
             }
 
+            if (newWidth < 0) {
+                newWidth *= -1;
+                newLeft -= newWidth;
+            }
+            if (newHeight < 0) {
+                newHeight *= -1;
+                newTop -= newHeight;
+            }
+
             $(this).attr('fb-left', newLeft)
                 .attr('fb-top', newTop)
                 .attr('fb-width', newWidth)
                 .attr('fb-height', newHeight)
                 .attr('fb-update', '1');
 
+            if ($(this).hasClass('pendingCreate') && newWidth > 2 && newHeight > 2) {
+                $(this).removeClass('pendingCreate');
+            }
+
             $this.updateLinkData($(this).attr('fb-uid'), {
                 top: newTop, left: newLeft, width: newWidth, height: newHeight
             });
@@ -209,6 +227,10 @@ LinkeditorLinks.prototype = {
 
     startDragLink: function () {
         this.dragLinkPos = {x: this.linkeditor.mx, y: this.linkeditor.my};
+        this.setDragOrigValues();
+    },
+
+    setDragOrigValues: function () {
         $(".link.selected").each(function () {
             $(this).data('drag-orig-left', parseFloat($(this).attr('fb-left')));
             $(this).data('drag-orig-top', parseFloat($(this).attr('fb-top')));
@@ -290,9 +312,14 @@ LinkeditorLinks.prototype = {
     },
 
     offsetSelectedLinks: function (dim, value) {
+        var $this = this;
         $('.link.selected').each(function () {
             let v = parseFloat($(this).attr('fb-' + dim));
-            $(this).attr('fb-' + dim, v + value).attr('fb-update', '1');
+            let newValue = v + value;
+            let data = {};
+            data[dim] = newValue;
+            $(this).attr('fb-' + dim, newValue).attr('fb-update', '1');
+            $this.updateLinkData($(this).attr('fb-uid'), data);
         });
         this.linkeditor.updateFBElements();
     },
@@ -369,26 +396,41 @@ LinkeditorLinks.prototype = {
         });
     },
 
-    duplicateLinkClick: function () {
+    duplicateLinkClick: function (overwriteData) {
         var data = this.lastSelectedLinkData;
         var pos = this.linkeditor.globalToFluidbook(this.linkeditor.mx, this.linkeditor.my, this.linkeditor.single);
         data.left = pos.x;
         data.top = pos.y;
         data.page = this.linkeditor.currentPage;
+        if (overwriteData !== undefined) {
+            $.extend(data, overwriteData);
+        }
         delete data.uid;
         let link = this.addLink(data);
         this.deselectAllLinks();
         this.selectLink($(link));
+        return $(link);
     },
 
     deleteSelection: function () {
+        var $this = this;
         $(".link.selected").each(function () {
-            delete LINKS[$(this).attr('fb-uid')];
-            $(this).remove();
+            $this.deleteLink(this, false);
         });
         this.linkeditor.hasChanged();
     },
 
+    deleteLink: function (link, triggerChange) {
+        if (triggerChange === undefined) {
+            triggerChange = true;
+        }
+        delete LINKS[$(link).attr('fb-uid')];
+        $(link).remove();
+        if (triggerChange === true) {
+            this.linkeditor.hasChanged();
+        }
+    },
+
     selectAll: function () {
         let $this = this;
         $('.link').each(function () {
diff --git a/resources/linkeditor/style/links.sass b/resources/linkeditor/style/links.sass
index 1ebef6f2c..f1c08920c 100644
--- a/resources/linkeditor/style/links.sass
+++ b/resources/linkeditor/style/links.sass
@@ -3,11 +3,15 @@
 #linkeditor-links
     .link
         position: absolute
-        outline: 1px solid currentColor
+        border: 1px solid currentColor
         cursor: cell
 
+        &.pendingCreate
+            opacity: 0
+
         &.selected
             cursor: move
+
             .corners
                 visibility: visible
 
@@ -21,7 +25,7 @@
 
             > div
                 position: absolute
-                outline: 1px solid currentColor
+                border: 1px solid currentColor
                 background-color: #fff
                 width: 8px
                 height: 8px