From 2a108d4a9bb063113d69807f7a575a1733c074e9 Mon Sep 17 00:00:00 2001 From: Mark MacKay Date: Thu, 13 May 2021 17:52:10 -0500 Subject: [PATCH] improvements to rulers --- src/css/method-draw.css | 2 +- src/css/rulers.css | 41 +++++++++++------------------------------ src/index.html | 14 ++------------ src/js/Rulers.js | 29 +++++++++++++++++++++-------- src/js/dao.js | 15 ++------------- src/js/start.js | 3 +-- 6 files changed, 38 insertions(+), 66 deletions(-) diff --git a/src/css/method-draw.css b/src/css/method-draw.css index e35fdea..d65bee7 100644 --- a/src/css/method-draw.css +++ b/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; diff --git a/src/css/rulers.css b/src/css/rulers.css index 89cdf34..fc79ba4 100644 --- a/src/css/rulers.css +++ b/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, diff --git a/src/index.html b/src/index.html index c2c59c3..ba987f7 100644 --- a/src/index.html +++ b/src/index.html @@ -35,18 +35,8 @@
-
-
-
- -
-
-
-
-
- -
-
+
+
diff --git a/src/js/Rulers.js b/src/js/Rulers.js index 1cfe529..8f6f995 100644 --- a/src/js/Rulers.js +++ b/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); } diff --git a/src/js/dao.js b/src/js/dao.js index 91d8973..b22791a 100644 --- a/src/js/dao.js +++ b/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 => { diff --git a/src/js/start.js b/src/js/start.js index df77ef0..178bdaf 100644 --- a/src/js/start.js +++ b/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(); \ No newline at end of file +editor.paintBox.canvas.setPaint(state.get("canvasBackground")); \ No newline at end of file