From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 9 Sep 2022 15:27:42 +0000 (+0200)
Subject: wip #5443 @1.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=33cf5799da8db3093aafc58a0f02b5e5f511e7aa;p=fluidbook-toolbox.git

wip #5443 @1.5
---

diff --git a/public/packages/fluidbook/toolbox/css/linkeditor.css b/public/packages/fluidbook/toolbox/css/linkeditor.css
index 5518369ef..cd15033e7 100644
--- a/public/packages/fluidbook/toolbox/css/linkeditor.css
+++ b/public/packages/fluidbook/toolbox/css/linkeditor.css
@@ -44,6 +44,48 @@ html {
   height: calc( 100% - 51px);
   width: 100%;
 }
+#linkeditor #linkeditor-main #linkeditor-editor .ruler {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  border-width: 0;
+  border-color: #0f0;
+  border-style: solid;
+}
+#linkeditor #linkeditor-main #linkeditor-editor .ruler:after {
+  position: absolute;
+  content: "";
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+#linkeditor #linkeditor-main #linkeditor-editor .ruler.pending-delete {
+  border-color: #f00 !important;
+}
+#linkeditor #linkeditor-main #linkeditor-editor .ruler:hover {
+  border-color: #0ff;
+}
+#linkeditor #linkeditor-main #linkeditor-editor .ruler[data-axis="x"] {
+  width: 0px;
+  height: 100%;
+  border-left-width: 1px;
+  cursor: col-resize;
+}
+#linkeditor #linkeditor-main #linkeditor-editor .ruler[data-axis="x"]:after {
+  left: -5px;
+  width: 10px;
+}
+#linkeditor #linkeditor-main #linkeditor-editor .ruler[data-axis="y"] {
+  border-bottom-width: 1px;
+  height: 0px;
+  width: 100%;
+}
+#linkeditor #linkeditor-main #linkeditor-editor .ruler[data-axis="y"]:after {
+  top: -5px;
+  height: 10px;
+  cursor: row-resize;
+}
 #linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers {
   color: #333;
   position: absolute;
@@ -61,13 +103,13 @@ html {
   z-index: 5;
   background-color: #aaa;
 }
-#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler {
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler-bar {
   overflow: hidden;
   position: absolute;
   left: 0;
   top: 0;
 }
-#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler .info {
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler-bar .info {
   position: absolute;
   top: 0;
   left: 0;
@@ -76,7 +118,7 @@ html {
   line-height: 8px;
   display: none;
 }
-#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler .info span {
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler-bar .info span {
   display: block;
   position: absolute;
   top: 0;
@@ -84,16 +126,16 @@ html {
   background-color: #fff;
   padding: 3px;
 }
-#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler .division {
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler-bar .division {
   pointer-events: none;
   position: absolute;
   background: #fff;
 }
-#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler .division .value {
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler-bar .division .value {
   position: absolute;
   font-size: 12px;
 }
-#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler .division .subdivision {
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler-bar .division .subdivision {
   position: absolute;
 }
 #linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-x {
diff --git a/public/packages/fluidbook/toolbox/css/linkeditor.css.map b/public/packages/fluidbook/toolbox/css/linkeditor.css.map
index a17d8c564..9496d2a24 100644
--- a/public/packages/fluidbook/toolbox/css/linkeditor.css.map
+++ b/public/packages/fluidbook/toolbox/css/linkeditor.css.map
@@ -1 +1 @@
-{"version":3,"sources":["linkeditor.less"],"names":[],"mappings":"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","file":"linkeditor.css"}
\ No newline at end of file
+{"version":3,"sources":["linkeditor.less"],"names":[],"mappings":"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","file":"linkeditor.css"}
\ No newline at end of file
diff --git a/public/packages/fluidbook/toolbox/css/linkeditor.less b/public/packages/fluidbook/toolbox/css/linkeditor.less
index d3bbc2c30..d7e476089 100644
--- a/public/packages/fluidbook/toolbox/css/linkeditor.less
+++ b/public/packages/fluidbook/toolbox/css/linkeditor.less
@@ -47,6 +47,56 @@ body, #linkeditor, html {
             height: ~"calc( 100% - 51px)";
             width: 100%;
 
+
+            .ruler {
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 1000;
+                border-width: 0;
+                border-color: #0f0;
+                border-style: solid;
+
+                &:after{
+                    position: absolute;
+                    content: "";
+                    display: block;
+                    height:100%;
+                    width: 100%;
+                }
+
+                &.pending-delete {
+                    border-color: #f00 !important;
+                }
+
+                &:hover {
+                    border-color: #0ff;
+                }
+
+                &[data-axis="x"] {
+                    width: 0px;
+                    height: 100%;
+                    border-left-width: 1px;
+                    cursor: col-resize;
+                    &:after{
+                        left:-5px;
+                        width: 10px;
+                    }
+                }
+
+                &[data-axis="y"] {
+                    border-bottom-width: 1px;
+                    height: 0px;
+                    width: 100%;
+                    &:after{
+                        top:-5px;
+                        height: 10px;
+                        cursor: row-resize;
+                    }
+                }
+            }
+
+
             #linkeditor-rulers {
                 @rulers-color: #333;
 
@@ -67,7 +117,7 @@ body, #linkeditor, html {
                     background-color: #aaa;
                 }
 
-                .ruler {
+                .ruler-bar {
                     overflow: hidden;
                     position: absolute;
                     left: 0;
diff --git a/public/packages/fluidbook/toolbox/js/linkeditor.js b/public/packages/fluidbook/toolbox/js/linkeditor.js
index 333853091..4a20f0f2e 100644
--- a/public/packages/fluidbook/toolbox/js/linkeditor.js
+++ b/public/packages/fluidbook/toolbox/js/linkeditor.js
@@ -9,6 +9,9 @@ $(function () {
     var zoom = 1;
     var zoomdragging = false;
     var dividers = [1, 2, 5, 10, 20, 50, 100, 200, 500, 1000];
+    var fluidbookRect, canvasRect, editorRect;
+
+    var movingRuler = null;
 
     function init() {
         $(window).on('hashchange', function () {
@@ -50,6 +53,20 @@ $(function () {
                 resetZoomDrag();
             }
         });
+
+        $("#linkeditor-ruler-x").on('mousedown', function (e) {
+            addRuler('y');
+        });
+
+        $("#linkeditor-ruler-y").on('mousedown', function (e) {
+            addRuler('x');
+        });
+
+        $(document).on('mousedown', ".ruler", function (e) {
+            movingRuler = $(this);
+
+        });
+
         $(window).on('mousemove', function (e) {
             if (!$("#linkeditor-canvas").hasClass('grab') || zoom === 1) {
                 resetZoomDrag();
@@ -63,6 +80,7 @@ $(function () {
             if (zoomdragging !== false) {
                 moveZoomDrag(e);
             }
+            stopMoveRuler();
             resetZoomDrag();
         });
         $("#linkeditor-canvas").on('wheel', function (e) {
@@ -99,10 +117,84 @@ $(function () {
         changePage();
     }
 
+    function addRuler(axis) {
+        movingRuler = $('<div class="ruler" fb-ref="editor" data-axis="' + axis + '"></div>');
+        $("#linkeditor-editor").append(movingRuler);
+        moveRuler();
+    }
+
+    function deleteRuler(ruler) {
+        if (ruler === undefined) {
+            ruler = movingRuler;
+        }
+        $(ruler).remove();
+        movingRuler = null;
+    }
+
+    function moveRuler() {
+        if (movingRuler === null || movingRuler === undefined) {
+            return;
+        }
+        var editorMouse = globalToEditor(mx, my);
+        var fbMouse = globalToFluidbook(mx, my, false);
+        var css = {};
+        var attrs = {};
+        var v;
+        if ($(movingRuler).data('axis') === 'x') {
+            v = editorMouse.x;
+            attrs['fb-left'] = fbMouse.x;
+        } else {
+            v = editorMouse.y;
+            attrs['fb-top'] = fbMouse.y;
+        }
+        if (v < 16) {
+            $(movingRuler).addClass('pending-delete');
+        } else {
+            $(movingRuler).removeClass('pending-delete');
+        }
+        $(movingRuler).css(css).attr(attrs);
+        updateFBElements();
+    }
+
+    function updateFBElements() {
+        var dims = ['left', 'top', 'width', 'height'];
+        $('[fb-ref]').each(function () {
+            var e = $(this);
+            var rect = $(this).attr('fb-ref');
+            $.each(dims, function (k, dim) {
+                if ($(e).is('[fb-' + dim + ']')) {
+                    var v = fluidbookTo(parseFloat($(e).attr('fb-' + dim)), dim, rect);
+                    $(e).css(dim, v);
+                }
+            });
+        });
+    }
+
+    function fluidbookTo(dim, name, rect) {
+        switch (rect) {
+            case 'editor':
+                rect = editorRect;
+                break;
+            case 'canvas':
+                rect = canvasRect;
+                break;
+        }
+        return fluidbookToGlobal(dim, name) - rect[name];
+    }
+
+    function stopMoveRuler() {
+        moveRuler();
+        if ($(movingRuler).hasClass('pending-delete')) {
+            deleteRuler($(movingRuler));
+        }
+        movingRuler = null;
+    }
+
     function updateMousePosition(e) {
         mx = e.pageX;
         my = e.pageY;
         updateMousePositionRulers();
+        moveRuler();
     }
 
     function updateMousePositionRulers() {
@@ -111,7 +203,7 @@ $(function () {
         var ry = my - rulersRect.y;
         $("#linkeditor-ruler-x .info").css('left', rx);
         $("#linkeditor-ruler-y .info").css('top', ry);
-        var frect = $("#linkeditor-fluidbook").get(0).getBoundingClientRect();
+
         var rrect = $("#linkeditor-rulers").get(0).getBoundingClientRect();
 
         if (mx - rrect.x < 0 || my - rrect.y < 0 || mx - rrect.x > rrect.width || my - rrect.y > rrect.height) {
@@ -119,21 +211,9 @@ $(function () {
             return;
         }
 
-        var x0 = frect.x;
-        var y0 = frect.y;
-
-        var mry = (my - y0);
-        var mrx = (mx - x0);
-
-        var vy = mry / (fs * zoom);
-        $("#linkeditor-ruler-y .info span").text(vy.toFixed(2));
-        var vx = mrx / (fs * zoom);
-        if (!single) {
-            if (vx >= pw) {
-                vx -= pw;
-            }
-        }
-        $("#linkeditor-ruler-x .info span").text(vx.toFixed(2));
+        var fb = globalToFluidbook(mx, my, true);
+        $("#linkeditor-ruler-y .info span").text(fb.y.toFixed(2));
+        $("#linkeditor-ruler-x .info span").text(fb.x.toFixed(2));
         $("#linkeditor-rulers .info").css('display', 'inline-block');
     }
 
@@ -181,6 +261,7 @@ $(function () {
                 resetZoomDrag();
             }
             updateRulers();
+
         }, 10);
 
         return true;
@@ -206,6 +287,35 @@ $(function () {
         resize();
     }
 
+    // Convert global coordinates to fluidbook ones
+    function globalToFluidbook(x, y, onePage) {
+        var res = _globalTo(x, y, fluidbookRect, 1 / (fs * zoom));
+        if (onePage) {
+            res.xside = 'left';
+            if (!single && res.x >= pw) {
+                res.xside = 'right';
+                res.x -= pw;
+            }
+        }
+        return res;
+    }
+
+    function fluidbookToGlobal(dim, name) {
+        return fluidbookRect[name] + (dim * fs * zoom);
+    }
+
+    function globalToCanvas(x, y) {
+        return _globalTo(x, y, canvasRect, 1);
+    }
+
+    function globalToEditor(x, y) {
+        return _globalTo(x, y, editorRect, 1);
+    }
+
+    function _globalTo(x, y, rect, multi) {
+        return {x: multi * (x - rect.x), y: multi * (y - rect.y)};
+    }
+
     function loadPage(p, side) {
         var container = $("#linkeditor-page-" + side);
         if (p === 0 || p > FLUIDBOOK_DATA.settings.pages) {
@@ -221,12 +331,15 @@ $(function () {
     }
 
     function updateRulers() {
+        // Update rects
+        fluidbookRect = $("#linkeditor-fluidbook").get(0).getBoundingClientRect();
+
         $("#linkeditor-ruler-y,#linkeditor-ruler-x").html('');
         // Measure of visible fluidbook px at current zoom
-        var crect = $("#linkeditor-canvas").get(0).getBoundingClientRect();
+
         var factor = fs / zoom;
-        var visible_w = crect.width * factor;
-        var visible_h = crect.height * factor;
+        var visible_w = canvasRect.width * factor;
+        var visible_h = canvasRect.height * factor;
         // Find the best divider to have around 10 main divisions
         var divider = 0;
         for (var i in dividers) {
@@ -237,19 +350,19 @@ $(function () {
             }
         }
 
-        var rect = $("#linkeditor-fluidbook").get(0).getBoundingClientRect();
+
         var divisionSize = divider * fs * zoom;
         // Draw vertical ruler
         var margin = 100;
         var nbDivisions = Math.floor(visible_h / divider);
-        var y0 = 16 + rect.y - crect.y;
+        var y0 = 16 + fluidbookRect.y - canvasRect.y;
 
         var yruler = '<div class="info"><span>1234.12</span></div>';
         for (var y = -margin; y <= nbDivisions + (margin * 2) + 1; y++) {
             // Draw subdivision
             var v = divider * y;
             var ystart = y0 + (y * divisionSize);
-            if (ystart + divisionSize < 0 || ystart > crect.height) {
+            if (ystart + divisionSize < 0 || ystart > canvasRect.height) {
                 continue;
             }
             yruler += '<div class="division" style="top:' + ystart + 'px;height:' + divisionSize + 'px;"><div class="value">' + Math.abs(v) + '</div>';
@@ -262,14 +375,14 @@ $(function () {
 
         // Draw horizontal ruler
         nbDivisions = Math.floor(visible_w / divider);
-        var x0 = 16 + rect.x - crect.x;
+        var x0 = 16 + fluidbookRect.x - canvasRect.x;
         var xruler = '<div class="info"><span></span></div>';
 
         for (var x = -margin; x <= nbDivisions + (margin * 2) + 1; x++) {
             // Draw subdivision
             var v = divider * x;
             var xstart = x0 + (x * divisionSize);
-            if (xstart + divisionSize < 0 || xstart > crect.width) {
+            if (xstart + divisionSize < 0 || xstart > canvasRect.width) {
                 continue;
             }
             xruler += '<div class="division" style="left:' + xstart + 'px;width:' + divisionSize + 'px;"><div class="value">' + Math.abs(v) + '</div>';
@@ -289,7 +402,7 @@ $(function () {
                 // Draw subdivision
                 var v = divider * x;
                 var xstart = x0 + (x * divisionSize);
-                if (xstart + divisionSize < 0 || xstart > crect.width) {
+                if (xstart + divisionSize < 0 || xstart > canvasRect.width) {
                     continue;
                 }
                 xruler += '<div class="division" style="left:' + xstart + 'px;width:' + divisionSize + 'px;"><div class="value">' + Math.abs(v) + '</div>';
@@ -304,17 +417,18 @@ $(function () {
             }
         }
         $("#linkeditor-ruler-x").html(xruler);
+        updateFBElements()
         updateMousePositionRulers();
     }
 
     function resizeCanvas() {
-        var cw = $('#linkeditor-canvas').outerWidth();
-        var ch = $('#linkeditor-canvas').outerHeight();
-        var aw = cw - 30;
-        var ah = ch - 30;
+        canvasRect = $("#linkeditor-canvas").get(0).getBoundingClientRect();
+        editorRect = $("#linkeditor-editor").get(0).getBoundingClientRect();
+        var aw = canvasRect.width - 30;
+        var ah = canvasRect.height - 30;
         fs = Math.min(aw / fw, ah / fh);
-        var left = (cw - fw * fs) / 2;
-        var top = (ch - fh * fs) / 2;
+        var left = (canvasRect.width - fw * fs) / 2;
+        var top = (canvasRect.height - fh * fs) / 2;
         $("#linkeditor-fluidbook").css({left: left, top: top, transform: 'scale(' + fs + ')'});
     }
 
diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php
index 4222f1cb3..e40fdad5d 100644
--- a/resources/views/fluidbook_publication/link_editor.blade.php
+++ b/resources/views/fluidbook_publication/link_editor.blade.php
@@ -11,8 +11,8 @@
             <div id="linkeditor-editor">
                 <div draggable="false" id="linkeditor-rulers">
                     <div id="linkeditor-ruler-corner"></div>
-                    <div class="ruler" id="linkeditor-ruler-x"></div>
-                    <div class="ruler" id="linkeditor-ruler-y"></div>
+                    <div class="ruler-bar" id="linkeditor-ruler-x"></div>
+                    <div class="ruler-bar" id="linkeditor-ruler-y"></div>
                 </div>
                 <div draggable="false" id="linkeditor-canvas">
                     <div draggable="false" id="linkeditor-zoom">