From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 8 Sep 2022 17:05:15 +0000 (+0200)
Subject: wip #5443 @3
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=07a362fe7631bbe0c51293454a92e2251792177a;p=fluidbook-toolbox.git

wip #5443 @3
---

diff --git a/public/packages/fluidbook/toolbox/css/linkeditor.css b/public/packages/fluidbook/toolbox/css/linkeditor.css
index cdc60eb18..aed4a15c2 100644
--- a/public/packages/fluidbook/toolbox/css/linkeditor.css
+++ b/public/packages/fluidbook/toolbox/css/linkeditor.css
@@ -3,7 +3,8 @@
   padding: 0;
   box-sizing: border-box;
 }
-img {
+img,
+.division {
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
@@ -42,9 +43,98 @@ html {
   height: 51px;
 }
 #linkeditor #linkeditor-main #linkeditor-editor {
+  position: relative;
   height: calc( 100% - 51px);
   width: 100%;
 }
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers {
+  color: #333;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-corner {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  border: 1px solid #aaa;
+  border-width: 0 1px 1px 0;
+  width: 16px;
+  height: 16px;
+  z-index: 1;
+  background-color: #ddd;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler {
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler .division {
+  pointer-events: none;
+  position: absolute;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler .division .value {
+  position: absolute;
+  font-size: 12px;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler .division .subdivision {
+  position: absolute;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-x {
+  height: 16px;
+  width: 100%;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-x .division,
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-x .subdivision {
+  width: 0px;
+  border-left: 1px solid #333;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-x .division {
+  height: 16px;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-x .division .value {
+  bottom: 0px;
+  left: 3px;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-x .subdivision {
+  bottom: 0;
+  height: 2px;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-x .subdivision.middle {
+  height: 5px;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-y {
+  width: 16px;
+  height: 100%;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-y .division,
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-y .subdivision {
+  height: 0px;
+  border-bottom: 1px solid #333;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-y .division {
+  width: 16px;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-y .division .value {
+  text-align: center;
+  max-width: 16px;
+  word-wrap: break-word;
+  white-space: normal;
+  line-height: 10px;
+  letter-spacing: 30px;
+  top: 3px;
+  left: 3px;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-y .division .subdivision {
+  right: 0;
+  width: 2px;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-y .division .subdivision.middle {
+  width: 5px;
+}
 #linkeditor #linkeditor-main #linkeditor-editor #linkeditor-zoom {
   width: 100%;
   height: 100%;
@@ -53,6 +143,7 @@ html {
 #linkeditor #linkeditor-main #linkeditor-editor #linkeditor-canvas {
   background-color: #505050;
   position: relative;
+  z-index: 1;
   top: 16px;
   left: 16px;
   height: calc( 100% - 16px);
diff --git a/public/packages/fluidbook/toolbox/css/linkeditor.css.map b/public/packages/fluidbook/toolbox/css/linkeditor.css.map
index 2093f8a8a..16ba4bfe0 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":"AAAA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;;AAIJ;EACI,yBAAA;EACA,wBAAA;EACA,sBAAA;EACA,oBAAA;EACA,iBAAA;EACA,eAAA;;AAGJ;AAAM;AAAa;EACf,YAAA;EACA,WAAA;EACA,gBAAA;;AAGJ;EACI,mBAAA;EACA,YAAA;;AAFJ,WAII;AAJJ,WAIW;EACH,qBAAA;EACA,YAAA;EACA,mBAAA;EACA,gBAAA;;AARR,WAWI;EACI,WAAA;EACA,yBAAA;;AAbR,WAgBI;EACI,yBAAA;;AAjBR,WAgBI,iBAGI;EACI,yBAAA;EACA,cAAA;EACA,YAAA;;AAtBZ,WAgBI,iBASI;EACI,0BAAA;EACA,WAAA;;AA3BZ,WAgBI,iBASI,mBAII;EACI,WAAA;EACA,YAAA;EACA,qBAAA;;AAhChB,WAgBI,iBASI,mBAUI;EACI,yBAAA;EACA,kBAAA;EACA,SAAA;EACA,UAAA;EACA,0BAAA;EACA,8BAAA;EACA,yBAAA;EACA,6BAAA;EACA,cAAA;;AAEA,WA9BZ,iBASI,mBAUI,mBAWK;EACG,UAAA;EACA,WAAA;;AAIJ,WApCZ,iBASI,mBAUI,mBAiBK;EACG,uBAAA;;AAEA,WAvChB,iBASI,mBAUI,mBAiBK,yBAGI;EACG,sBAAA;;AAIR,WA5CZ,iBASI,mBAUI,mBAyBK;EACG,sBAAA;EACA,sBAAA;EACA,mBAAA;;AAGJ,WAlDZ,iBASI,mBAUI,mBA+BK;EACG,YAAA;;AAGJ,WAtDZ,iBASI,mBAUI,mBAmCK;EACG,gBAAA;;AAvEpB,WAgBI,iBASI,mBAUI,mBAwCI;EACI,qBAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;;AA/EpB,WAgBI,iBASI,mBAUI,mBAwCI,sBAMI;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,0CAAA;;AArFxB,WAgBI,iBASI,mBAUI,mBAwCI,sBAMI,iBAMI;EACI,cAAA;EACA,WAAA;EACA,YAAA;;AAIA,OAAQ,YA9EhC,iBASI,mBAUI,mBAwCI,sBAMI,iBAYK;EAEO,aAAA","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 8470b0957..44d35e08b 100644
--- a/public/packages/fluidbook/toolbox/css/linkeditor.less
+++ b/public/packages/fluidbook/toolbox/css/linkeditor.less
@@ -5,7 +5,7 @@
 }
 
 
-img {
+img, .division {
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
@@ -21,6 +21,9 @@ body, #linkeditor, html {
 }
 
 #linkeditor {
+
+    @rulers-size: 16px;
+
     white-space: nowrap;
     font-size: 0;
 
@@ -46,9 +49,116 @@ body, #linkeditor, html {
         }
 
         #linkeditor-editor {
+            position: relative;
             height: ~"calc( 100% - 51px)";
             width: 100%;
 
+            #linkeditor-rulers {
+                @rulers-color: #333;
+
+                color: @rulers-color;
+                position: absolute;
+                top: 0px;
+                left: 0px;
+                width: 100%;
+                height: 100%;
+
+                #linkeditor-ruler-corner {
+                    position: absolute;
+                    top: 0px;
+                    left: 0px;
+                    border: 1px solid #aaa;
+                    border-width: 0 1px 1px 0;
+                    width: @rulers-size;
+                    height: @rulers-size;
+                    z-index: 1;
+                    background-color: #ddd;
+                }
+
+                .ruler {
+                    overflow: hidden;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+
+                    .division {
+                        pointer-events: none;
+                        position: absolute;
+
+                        .value {
+                            position: absolute;
+                            font-size: 12px;
+                        }
+
+                        .subdivision {
+                            position: absolute;
+                        }
+                    }
+                }
+
+                #linkeditor-ruler-x {
+                    height: @rulers-size;
+                    width: 100%;
+
+                    .division, .subdivision {
+                        width: 0px;
+                        border-left: 1px solid @rulers-color;
+                    }
+
+                    .division {
+                        height: @rulers-size;
+                        .value{
+                            bottom: 0px;
+                            left:3px;
+                        }
+                    }
+
+                    .subdivision {
+                        bottom: 0;
+                        height: 2px;
+
+                        &.middle {
+                            height: 5px;
+                        }
+                    }
+
+                }
+
+                #linkeditor-ruler-y {
+                    width: @rulers-size;
+                    height: 100%;
+
+                    .division, .subdivision {
+                        height: 0px;
+                        border-bottom: 1px solid @rulers-color;
+                    }
+
+                    .division {
+                        width: @rulers-size;
+
+                        .value {
+                            text-align: center;
+                            max-width: @rulers-size;
+                            word-wrap: break-word;
+                            white-space: normal;
+                            line-height: 10px;
+                            letter-spacing: 30px;
+                            top: 3px;
+                            left: 3px;
+                        }
+
+                        .subdivision {
+                            right: 0;
+                            width: 2px;
+
+                            &.middle {
+                                width: 5px;
+                            }
+                        }
+                    }
+                }
+            }
+
             #linkeditor-zoom {
                 width: 100%;
                 height: 100%;
@@ -58,12 +168,13 @@ body, #linkeditor, html {
             #linkeditor-canvas {
                 background-color: #505050;
                 position: relative;
-                top: 16px;
-                left: 16px;
-                height: ~"calc( 100% - 16px)";
-                max-height: ~"calc( 100% - 16px)";
-                width: ~"calc( 100% - 16px)";
-                max-width: ~"calc( 100% - 16px)";
+                z-index: 1;
+                top: @rulers-size;
+                left: @rulers-size;
+                height: ~"calc( 100% - @{rulers-size})";
+                max-height: ~"calc( 100% - @{rulers-size})";
+                width: ~"calc( 100% - @{rulers-size})";
+                max-width: ~"calc( 100% - @{rulers-size})";
                 overflow: auto;
 
                 &::-webkit-scrollbar {
diff --git a/public/packages/fluidbook/toolbox/js/linkeditor.js b/public/packages/fluidbook/toolbox/js/linkeditor.js
index 751dfed8f..c7810a0e4 100644
--- a/public/packages/fluidbook/toolbox/js/linkeditor.js
+++ b/public/packages/fluidbook/toolbox/js/linkeditor.js
@@ -4,8 +4,10 @@ $(function () {
     var ph = FLUIDBOOK_DATA.settings.height;
     var fw = pw * (single ? 1 : 2);
     var fh = ph;
+    var fs = 1;
     var zoom = 1;
     var zoomdragging = false;
+    var dividers = [1, 2, 5, 10, 20, 50, 100, 200, 500, 1000];
 
     function init() {
         $(window).on('hashchange', function () {
@@ -30,6 +32,10 @@ $(function () {
                 resetZoomDrag();
             }
         });
+
+        $("#linkeditor-canvas").on('scroll', function () {
+            updateRulers();
+        });
         $("#linkeditor-canvas").on('mousedown', function (e) {
             if ($(this).hasClass('grab') && zoom > 1) {
                 zoomdragging = {
@@ -72,7 +78,6 @@ $(function () {
             } else {
                 setZoom(zoom - 0.25);
             }
-
             return false;
         });
 
@@ -103,6 +108,7 @@ $(function () {
         $("#linkeditor-canvas").scrollTo({
             top: zoomdragging.scrollY - deltaY, left: zoomdragging.scrollX - deltaX
         });
+        updateRulers();
     }
 
     function moveZoom(e) {
@@ -110,6 +116,7 @@ $(function () {
         var lx = (e.originalEvent.pageX - rect.x) / rect.width;
         var ly = (e.originalEvent.pageY - rect.y) / rect.height;
         $("#linkeditor-canvas").scrollTo({left: pct(lx), top: pct(ly)});
+        updateRulers();
     }
 
     function pct(v) {
@@ -124,6 +131,7 @@ $(function () {
         zoom = z;
         $("#linkeditor-canvas").attr('data-z', zoom);
         $("#linkeditor-zoom").css({transform: 'scale(' + zoom + ')'});
+        updateRulers();
         return true;
     }
 
@@ -158,6 +166,72 @@ $(function () {
 
     function resize() {
         resizeCanvas();
+        updateRulers();
+    }
+
+    function updateRulers() {
+        $("#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;
+        // Find the best divider to have around 10 main divisions
+        var divider = 0;
+        for (var i in dividers) {
+            divider = dividers[i];
+            var v = visible_h / divider;
+            if (v <= 10) {
+                break;
+            }
+        }
+
+        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 yruler = '';
+        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) {
+                continue;
+            }
+            yruler += '<div class="division" style="top:' + ystart + '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>';
+            }
+            yruler += '</div>';
+        }
+        $("#linkeditor-ruler-y").html(yruler);
+
+        // Draw horizontal ruler
+        nbDivisions = Math.floor(visible_w / divider);
+        var x0 = 16 + rect.x - crect.x;
+        var xruler = '';
+
+        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) {
+                continue;
+            }
+            xruler += '<div class="division" style="left:' + xstart + '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);
     }
 
     function resizeCanvas() {
@@ -165,10 +239,10 @@ $(function () {
         var ch = $('#linkeditor-canvas').outerHeight();
         var aw = cw - 20;
         var ah = ch - 20;
-        var s = Math.min(aw / fw, ah / fh);
-        var left = (cw - fw * s) / 2;
-        var top = (ch - fh * s) / 2;
-        $("#linkeditor-fluidbook").css({left: left, top: top, transform: 'scale(' + s + ')'});
+        fs = Math.min(aw / fw, ah / fh);
+        var left = (cw - fw * fs) / 2;
+        var top = (ch - fh * fs) / 2;
+        $("#linkeditor-fluidbook").css({left: left, top: top, transform: 'scale(' + fs + ')'});
     }
 
     init();
diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php
index 2dded2b08..4222f1cb3 100644
--- a/resources/views/fluidbook_publication/link_editor.blade.php
+++ b/resources/views/fluidbook_publication/link_editor.blade.php
@@ -9,7 +9,11 @@
         <div id="linkeditor-main">
             <div draggable="false" id="linkeditor-toolbar"></div>
             <div id="linkeditor-editor">
-                <div draggable="false" id="linkeditor-rulers"></div>
+                <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>
                 <div draggable="false" id="linkeditor-canvas">
                     <div draggable="false" id="linkeditor-zoom">
                         <div draggable="false" id="linkeditor-fluidbook">