From 9404a66997829dc29b955b1404181268d3a2f59c Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 9 Sep 2022 10:41:57 +0200
Subject: [PATCH] wip #5443 @1.25

---
 .../fluidbook/toolbox/css/linkeditor.css      | 34 +++++++++++--
 .../fluidbook/toolbox/css/linkeditor.css.map  |  2 +-
 .../fluidbook/toolbox/css/linkeditor.less     | 49 ++++++++++++++-----
 .../fluidbook/toolbox/js/linkeditor.js        | 46 +++++++++++++++--
 4 files changed, 111 insertions(+), 20 deletions(-)

diff --git a/public/packages/fluidbook/toolbox/css/linkeditor.css b/public/packages/fluidbook/toolbox/css/linkeditor.css
index ff31fbdba..3c6d35922 100644
--- a/public/packages/fluidbook/toolbox/css/linkeditor.css
+++ b/public/packages/fluidbook/toolbox/css/linkeditor.css
@@ -5,10 +5,6 @@
 }
 img,
 .division {
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -o-user-select: none;
   user-select: none;
   user-drag: none;
 }
@@ -70,9 +66,27 @@ html {
   left: 0;
   top: 0;
 }
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler .info {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  display: inline-block;
+  font-size: 12px;
+  line-height: 8px;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler .info span {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  padding: 3px;
+}
 #linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler .division {
   pointer-events: none;
   position: absolute;
+  background: #fff;
 }
 #linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler .division .value {
   position: absolute;
@@ -85,6 +99,10 @@ html {
   height: 16px;
   width: 100%;
 }
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-x .info {
+  height: 16px;
+  border-left: 1px dotted #333;
+}
 #linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-x .division,
 #linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-x .subdivision {
   width: 0px;
@@ -108,6 +126,14 @@ html {
   width: 16px;
   height: 100%;
 }
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-y .info {
+  width: 16px;
+  border-bottom: 1px dotted #333;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-y .info span {
+  transform-origin: 0 0;
+  transform: rotate(270deg);
+}
 #linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-y .division,
 #linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-y .subdivision {
   height: 0px;
diff --git a/public/packages/fluidbook/toolbox/css/linkeditor.css.map b/public/packages/fluidbook/toolbox/css/linkeditor.css.map
index 5a8eb1ef8..30bcb984c 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 8d0ab9dde..a11afe9a0 100644
--- a/public/packages/fluidbook/toolbox/css/linkeditor.less
+++ b/public/packages/fluidbook/toolbox/css/linkeditor.less
@@ -6,10 +6,6 @@
 
 
 img, .division {
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
     user-select: none;
     user-drag: none;
 }
@@ -21,9 +17,7 @@ body, #linkeditor, html {
 }
 
 #linkeditor {
-
     @rulers-size: 16px;
-
     white-space: nowrap;
     font-size: 0;
 
@@ -79,9 +73,29 @@ body, #linkeditor, html {
                     left: 0;
                     top: 0;
 
+                    .info {
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        z-index: 3;
+                        display: inline-block;
+                        font-size: 12px;
+                        line-height: 8px;
+
+                        span {
+                            display: block;
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            background-color: #fff;
+                            padding: 3px;
+                        }
+                    }
+
                     .division {
                         pointer-events: none;
                         position: absolute;
+                        background: #fff;
 
                         .value {
                             position: absolute;
@@ -98,6 +112,11 @@ body, #linkeditor, html {
                     height: @rulers-size;
                     width: 100%;
 
+                    .info {
+                        height: @rulers-size;
+                        border-left: 1px dotted @rulers-color;
+                    }
+
                     .division, .subdivision {
                         width: 0px;
                         border-left: 1px solid @rulers-color;
@@ -105,9 +124,10 @@ body, #linkeditor, html {
 
                     .division {
                         height: @rulers-size;
-                        .value{
+
+                        .value {
                             bottom: 0px;
-                            left:3px;
+                            left: 3px;
                         }
                     }
 
@@ -119,13 +139,22 @@ body, #linkeditor, html {
                             height: 5px;
                         }
                     }
-
                 }
 
                 #linkeditor-ruler-y {
                     width: @rulers-size;
                     height: 100%;
 
+                    .info {
+                        width: @rulers-size;
+                        border-bottom: 1px dotted @rulers-color;
+
+                        span {
+                            transform-origin: 0 0;
+                            transform: rotate(270deg);
+                        }
+                    }
+
                     .division, .subdivision {
                         height: 0px;
                         border-bottom: 1px solid @rulers-color;
@@ -178,7 +207,6 @@ body, #linkeditor, html {
                 &::-webkit-scrollbar {
                     width: 6px;
                     height: 6px;
-
                 }
 
                 &::-webkit-scrollbar-track {
@@ -203,7 +231,6 @@ body, #linkeditor, html {
                     cursor: grabbing;
                 }
 
-
                 #linkeditor-fluidbook {
                     transform-origin: 0 0;
                     position: absolute;
diff --git a/public/packages/fluidbook/toolbox/js/linkeditor.js b/public/packages/fluidbook/toolbox/js/linkeditor.js
index c7810a0e4..e78b8902e 100644
--- a/public/packages/fluidbook/toolbox/js/linkeditor.js
+++ b/public/packages/fluidbook/toolbox/js/linkeditor.js
@@ -5,6 +5,7 @@ $(function () {
     var fw = pw * (single ? 1 : 2);
     var fh = ph;
     var fs = 1;
+    var mx, my;
     var zoom = 1;
     var zoomdragging = false;
     var dividers = [1, 2, 5, 10, 20, 50, 100, 200, 500, 1000];
@@ -56,6 +57,7 @@ $(function () {
             if (zoomdragging !== false) {
                 moveZoomDrag(e);
             }
+            updateMousePosition(e);
         });
         $(window).on('mouseup', function (e) {
             if (zoomdragging !== false) {
@@ -97,6 +99,20 @@ $(function () {
         changePage();
     }
 
+    function updateMousePosition(e) {
+        mx = e.pageX;
+        my = e.pageY;
+        updateMousePositionRulers();
+    }
+
+    function updateMousePositionRulers() {
+        var rulersRect = $("#linkeditor-rulers").get(0).getBoundingClientRect();
+        var rx = mx - rulersRect.x;
+        var ry = my - rulersRect.y;
+        $("#linkeditor-ruler-x .info").css('left', rx);
+        $("#linkeditor-ruler-y .info").css('top', ry);
+    }
+
     function resetZoomDrag() {
         $("#linkeditor-canvas").removeClass('grab').removeClass('grabbing');
         zoomdragging = false;
@@ -193,7 +209,7 @@ $(function () {
         var nbDivisions = Math.floor(visible_h / divider);
         var y0 = 16 + rect.y - crect.y;
 
-        var yruler = '';
+        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;
@@ -201,7 +217,7 @@ $(function () {
             if (ystart + divisionSize < 0 || ystart > crect.height) {
                 continue;
             }
-            yruler += '<div class="division" style="top:' + ystart + 'px;"><div class="value">' + Math.abs(v) + '</div>';
+            yruler += '<div class="division" style="top:' + ystart + 'px;height:' + divisionSize + 'px;"><div class="value">' + Math.abs(v) + '</div>';
             for (var i = 1; i <= 9; i++) {
                 yruler += '<div class="subdivision ' + (i === 5 ? ' middle' : '') + '" style="top:' + ((i * divisionSize) / 10) + 'px;"></div>';
             }
@@ -212,7 +228,7 @@ $(function () {
         // Draw horizontal ruler
         nbDivisions = Math.floor(visible_w / divider);
         var x0 = 16 + rect.x - crect.x;
-        var xruler = '';
+        var xruler = '<div class="info"><span>1234.12</span></div>';
 
         for (var x = -margin; x <= nbDivisions + (margin * 2) + 1; x++) {
             // Draw subdivision
@@ -221,7 +237,7 @@ $(function () {
             if (xstart + divisionSize < 0 || xstart > crect.width) {
                 continue;
             }
-            xruler += '<div class="division" style="left:' + xstart + 'px;"><div class="value">' + Math.abs(v) + '</div>';
+            xruler += '<div class="division" style="left:' + xstart + 'px;width:' + divisionSize + 'px;"><div class="value">' + Math.abs(v) + '</div>';
             for (var i = 1; i <= 9; i++) {
                 var cls = '';
                 if (i === 5) {
@@ -231,7 +247,29 @@ $(function () {
             }
             xruler += '</div>';
         }
+        // Draw right page horizontal ruler
+        if (!single) {
+            x0 = x0 + (fw / 2) * fs * zoom;
+            for (var x = 0; x <= nbDivisions + margin + 1; x++) {
+                // Draw subdivision
+                var v = divider * x;
+                var xstart = x0 + (x * divisionSize);
+                if (xstart + divisionSize < 0 || xstart > crect.width) {
+                    continue;
+                }
+                xruler += '<div class="division" style="left:' + xstart + 'px;width:' + divisionSize + 'px;"><div class="value">' + Math.abs(v) + '</div>';
+                for (var i = 1; i <= 9; i++) {
+                    var cls = '';
+                    if (i === 5) {
+                        cls += ' middle';
+                    }
+                    xruler += '<div class="subdivision ' + cls + '" style="left:' + ((i * divisionSize) / 10) + 'px;"></div>';
+                }
+                xruler += '</div>';
+            }
+        }
         $("#linkeditor-ruler-x").html(xruler);
+        updateMousePositionRulers();
     }
 
     function resizeCanvas() {
-- 
2.39.5