Add a ruler for the grid

A ruler would be useful to check part dimensions before exporting.

This proof of concept kind of works:

diff --git a/src/moto/space.js b/src/moto/space.js
index 06589e0..6711326 100644
--- a/src/moto/space.js
+++ b/src/moto/space.js
@@ -248,13 +248,29 @@
             h = y / 2,
             d = z / 2,
             zp = -d - platformZOff + gridZOff,
-            majors = [], minors = unitMinor ? [] : null, i;
+            majors = [], minors = unitMinor ? [] : null, i,
+            labelSize = gridUnitMinor * 1.5,
+            canvasScale = 4,
+            canvasPadding = 10,
+            xLabelsMesh,
+            xLabelCanvas = document.createElement('canvas'),
+            xLabelCtx = xLabelCanvas.getContext('2d');
+
+        xLabelCanvas.width = x * canvasScale + canvasPadding * 2 * canvasScale;
+        xLabelCanvas.height = labelSize * canvasScale;
+        xLabelCtx.scale(canvasScale, canvasScale);
+        xLabelCtx.fillStyle = '#333333';
+        xLabelCtx.font = labelSize + 'px monospace';
+        xLabelCtx.textAlign = 'center';
+        xLabelCtx.textBaseline = 'top';
+
         for (i = -xo; i <= xo; i += unitMinor) {
             let oh = isRound ? Math.sqrt(1-(i/xo)*(i/xo)) * h : h,
                 dM = Math.abs(i % unitMajor);
             if (i < -w || i > w) continue;
             if (dM < 1 || Math.abs(unitMajor - dM) < 0.1) {
                 majors.append({x:i, y:-oh, z:zp}).append({x:i, y:oh, z:zp});
+                xLabelCtx.fillText('' + (i + w), i + xo + canvasPadding, 0)
             } else {
                 minors.append({x:i, y:-oh, z:zp}).append({x:i, y:oh, z:zp});
             }
@@ -273,6 +289,18 @@
         if (minors) gridView.add(makeLinesFromPoints(minors, gridColorMinor || 0xcccccc, 1));
         if (oldGridView) Space.scene.remove(oldGridView);
         Space.scene.add(gridView);
+
+        xLabelsMesh = new THREE.Mesh(
+            new THREE.PlaneGeometry(x + canvasPadding * 2, labelSize),
+            new THREE.MeshBasicMaterial({
+                transparent: true,
+                map: new THREE.CanvasTexture(xLabelCanvas),
+            })
+        );
+        xLabelsMesh.position.x = 0;
+        xLabelsMesh.position.y = - h - labelSize;
+        xLabelsMesh.position.z = zp;
+        gridView.add(xLabelsMesh);
     }
 
     function setOrigin(x, y, z) {

[juodumas]

Thanks for this project and for merging. The ruler will be useful to us.

[juodumas]

Makes sense. Will see what I can do.