improvements to rulers

src/css/method-draw.css

@@ -244,7 +244,7 @@ button:focus {
  #tools_left {
   position: absolute;
   border-right: none;
-  width: 50px;
+  width: var(--x12);
   top: 30px;
   bottom: 0;
   left: 0;

src/css/rulers.css

@@ -1,4 +1,3 @@
-
 #rulers > div {
   position: absolute;
   background: var(--z2);
@@ -9,46 +8,28 @@
 
 #rulers #ruler_corner {
   top: 30px;
-  left: 50px;
+  left: var(--x12);
   width: var(--x4);
   height: var(--x4);
   z-index: 2;
 }
 
 #ruler_x {
-  height: 15px;
+  height: var(--x4);
   top: 30px;
-  left: 66px;
+  left: var(--x12);
+  margin-left: 2px;
   right: 175px;
-  
-}
-
-#rulers.moved #ruler_corner,
-#rulers.moved #ruler_x {
-  top: 101px;
+  overflow: hidden;
 }
 
 #ruler_y {
-  width: 15px;
-  top: 46px;
-  left: 50px;
-  bottom: 40px;
-}
-
-#rulers.moved #ruler_y {
-  top: 116px;
-}
-
-#ruler_x canvas:first-child {
-  margin-left: -16px;
-}
-
-#ruler_x canvas {
-  float: left;
-}
-
-#ruler_y canvas {
-  margin-top: -16px;
+  width: var(--x4);
+  top: var(--x8);
+  margin-top: -2px;
+  left: var(--x12);
+  bottom: var(--x10);
+  overflow: hidden;
 }
 
 #ruler_x > div, 

src/index.html

@@ -35,18 +35,8 @@
 <div id="svg_editor">
 <div id="rulers">
   <div id="ruler_corner"></div>
-  <div id="ruler_x">
-    <div id="ruler_x_cursor"></div>
-    <div>
-      <canvas height="15"></canvas>
-    </div>
-  </div>
-  <div id="ruler_y">
-    <div id="ruler_y_cursor"></div>
-    <div>
-      <canvas width="15"></canvas>
-    </div>
-  </div>
+  <div id="ruler_x"></div>
+  <div id="ruler_y"></div>
 </div>
 
 <div id="workarea">

src/js/Rulers.js

@@ -6,6 +6,15 @@ MD.Rulers = function(){
   const svgcanvas = document.getElementById("svgcanvas");
   const ruler_x = document.getElementById("ruler_x");
   const ruler_y = document.getElementById("ruler_y");
+  ruler_x.appendChild(document.createElement("canvas"));
+  ruler_y.appendChild(document.createElement("canvas"));
+
+  function clear(){
+    ruler_x.innerHTML = "";
+    ruler_y.innerHTML = "";
+    ruler_x.appendChild(canvas_x);
+    ruler_y.appendChild(canvas_y);
+  }
 
   function toggleRulers(){
     editor.menu.flash($('#view_menu'));
@@ -33,6 +42,11 @@ MD.Rulers = function(){
     ruler_y.scrollTop = workarea.scrollTop; 
   });
 
+  window.addEventListener("resize", function(){
+    editor.canvas.update();
+    update();
+  })
+
   var r_intervals = [];
   for(var i = .1; i < 1E5; i *= 10) {
     r_intervals.push(1 * i);
@@ -41,11 +55,11 @@ MD.Rulers = function(){
   }
 
   function update(zoom) {
+    console.log("happens")
     const gray = getComputedStyle(document.body).getPropertyValue('--z6') || "#999";
     if(!zoom) zoom = svgCanvas.getZoom();
     var limit = 30000;
     var c_elem = svgCanvas.getContentElem();    
-    var units = svgedit.units.getTypeMap();
     var unit = 1;
 
     for(var d = 0; d < 2; d++) {
@@ -58,7 +72,8 @@ MD.Rulers = function(){
       var hcanv = document.querySelector('#ruler_' + dim + ' canvas');
     
       // Set the canvas size to the width of the container
-      var ruler_len = svgcanvas[lentype === "width" ? "offsetWidth" : "offsetHeight"]*2;
+      var ruler_len = svgcanvas[lentype === "width" ? "offsetWidth" : "offsetHeight"];
+      console.log(ruler_len)
       var total_len = ruler_len;
       hcanv.parentNode.style[lentype] = total_len + 'px';
       
@@ -68,11 +83,10 @@ MD.Rulers = function(){
       var ctx = hcanv.getContext("2d");
       var scale = window.devicePixelRatio*2 || 1;
       hcanv.style[lentype] = total_len + "px";
-      hcanv.style[notlentype] = 15 + "px";
+      hcanv.style[notlentype] = 16 + "px";
       hcanv[lentype] = Math.floor(total_len * scale);
-      hcanv[notlentype] = Math.floor(15 * scale);
+      hcanv[notlentype] = Math.floor(16 * scale);
       ctx.scale(scale,scale);
-      ctx.fillRect(0,0,hcanv.width/scale,hcanv.height/scale); 
       
       // Remove any existing canvasses
       $(hcanv).siblings().remove();
@@ -115,7 +129,6 @@ MD.Rulers = function(){
       ctx.fillStyle = gray;
       ctx.strokeStyle = gray;
       ctx.scale(scale,scale);
-
       var ruler_d = ((content_d / u_multi) % multi) * u_multi - 50;
       var label_pos = ruler_d - big_int;
       for (; ruler_d < total_len; ruler_d += big_int) {
@@ -124,10 +137,10 @@ MD.Rulers = function(){
 
         var cur_d = Math.round(ruler_d);
         if(is_x) {
-          ctx.moveTo(cur_d, 15);
+          ctx.moveTo(cur_d, 16);
           ctx.lineTo(cur_d, 0);
         } else {
-          ctx.moveTo(15, cur_d);
+          ctx.moveTo(16, cur_d);
           ctx.lineTo(0, cur_d);
         }
 

src/js/dao.js

@@ -128,7 +128,7 @@ const dao = [
     private: true,
     save: true,
   },
-  // english or spanish, set by the browser
+  // future use
   {
     name: "language",
     label: "Language",
@@ -137,7 +137,7 @@ const dao = [
     private: true,
     save: true,
   },
-  // if it is the first time visitor we onboard them
+  // if it is the first time visitor we can onboard them
   {
     name: "visited",
     label: "Has visited before",
@@ -147,17 +147,6 @@ const dao = [
     save: true,
   },
 
-  // how many seconds have passed since the user moved the mouse
-  // mostly for hiding UI, but we could also use it for exercises
-  // where we want to force keyboard usage to edit, for example
-  {
-    name: "mouseIdle",
-    label: "Mouse Idle",
-    type: "number",
-    default: false,
-    private: true,
-    save: false,
-  },
 ];
 
 dao.forEach(thing => {

src/js/start.js

@@ -119,5 +119,4 @@ state.set("canvasMode", state.get("canvasMode"));
 svgCanvas.setSvgString(state.get("canvasContent"));
 editor.paintBox.fill.setPaint(state.get("canvasFill"));
 editor.paintBox.stroke.setPaint(state.get("canvasStroke"));
-editor.paintBox.canvas.setPaint(state.get("canvasBackground"));
-editor.rulers.update();
+editor.paintBox.canvas.setPaint(state.get("canvasBackground"));