Updates

client/filelist.txt

@@ -117,6 +117,8 @@ shared/src/SimuloShape.js
 shared/src/SimuloShape.js.map
 shared/src/SimuloStep.js
 shared/src/SimuloStep.js.map
+shared/src/SimuloText.js
+shared/src/SimuloText.js.map
 shared/src/SimuloTheme.js
 shared/src/SimuloTheme.js.map
 shared/src/intersect.js

client/src/SimuloClientController/index.ts

@@ -19,6 +19,7 @@ function queryParent(element: HTMLElement, className: string): HTMLElement | nul
 }
 
 import { SimuloPolygon, SimuloCircle, SimuloEdge, SimuloShape, SimuloRectangle } from '../../../shared/src/SimuloShape.js';
+import SimuloText from '../../../shared/src/SimuloText';
 import SimuloCreatingObject, { SimuloCreatingPolygon } from '../../../shared/src/SimuloCreatingObject.js';
 
 const personPoints = [{
@@ -169,6 +170,7 @@ class SimuloClientController {
                         angle: Math.PI
                     } as SimuloCircle,
                 ]
+
             }
         };
 
@@ -1428,6 +1430,8 @@ class SimuloClientController {
                 }
 
                 var shapes: SimuloShape[] = [];
+                var texts: SimuloText[] = [];
+
                 // push all the entities
                 //shapes = shapes.concat(this.entities);
                 this.entities.forEach((entityObj) => {
@@ -1604,8 +1608,20 @@ class SimuloClientController {
                             type: 'circle', color: newColor, image: null,
                             border: 'white',
                             borderWidth: 3.5,
-                            borderScaleWithZoom: true
+                            borderScaleWithZoom: true,
                         } as SimuloCircle);
+
+                        if (radius > 0.01) {
+                            texts.push({
+                                x: posX + radius,
+                                y: posY - radius,
+                                text: "r = " + (radius * 0.425).toFixed(3) + ' m',
+                                color: 'white',
+                                fontSize: 20 / this.viewer.cameraZoom,
+                                fontFamily: 'Urbanist'
+                            } as SimuloText);
+                        }
+
                     }
                     else if (creatingObject.shape == 'rectangle' || creatingObject.shape == 'select' && !creatingObject.moving) {
                         // Calculate the difference between creatingObjects[id] x and y and the current player x and y
@@ -1646,6 +1662,31 @@ class SimuloClientController {
                             borderScaleWithZoom: true
                         } as SimuloRectangle);
 
+                        // Create dimension text when creating a rectangle, we need to check if the object is a rectangle because we don't want to create dimension text for a select object
+                        if (creatingObject.shape == 'rectangle' && width > 0.01 && height > 0.01) {
+                            texts.push({ // width "dimension text"
+                                x: topLeftX + width / 2,
+                                y: topLeftY - (10 / this.viewer.cameraZoom),
+                                text: (width * 0.425).toFixed(3) + ' m',
+                                color: 'white',
+                                zDepth: 0,
+                                fontSize: 20 / this.viewer.cameraZoom,
+                                fontFamily: 'Urbanist',
+                                align: 'center'
+                            } as SimuloText);
+                            texts.push({ // height "dimension text"
+                                x: (topLeftX + width) + (10 / this.viewer.cameraZoom),
+                                y: topLeftY + height / 2,
+                                text: (height * 0.425).toFixed(3) + ' m',
+                                color: 'white',
+                                zDepth: 0,
+                                fontSize: 20 / this.viewer.cameraZoom,
+                                fontFamily: 'Urbanist',
+                                align: 'left',
+                                baseline: 'middle'
+                            } as SimuloText);
+                        }
+
                         console.log('rendered with topLeftX: ' + topLeftX + ' topLeftY: ' + topLeftY + ' width: ' + width + ' height: ' + height);
                     }
                 });
@@ -1797,6 +1838,7 @@ class SimuloClientController {
                 }
 
                 this.viewer.shapes = shapes;
+                this.viewer.texts = texts;
             }
             if (body.type == 'world_update_failed') {
                 console.log('Failed to update the world! Try changing the simulation speed.');

client/src/SimuloViewer/index.ts

@@ -1,4 +1,5 @@
 import SimuloShape, { SimuloCircle, SimuloEdge, SimuloPolygon, SimuloRectangle } from '../../../shared/src/SimuloShape';
+import SimuloText from '../../../shared/src/SimuloText';
 const style = `/*canvas.simulo-viewer.fullscreen {
     position: fixed;
     top: 0;
@@ -596,7 +597,11 @@ class SimuloViewer {
         this.ctx.fillRect(x, y, width, height);
     }
 
-    drawText(text: string, x: number, y: number, size: number, font: string) {
+    drawText(text: string, x: number, y: number, size: number, color: string, font: string = "urbanist", 
+                align: "left" | "center" | "right" = "left", baseline: "alphabetic" | "top" | "middle" | "bottom" = "alphabetic") {
+        this.ctx.fillStyle = color;
+        this.ctx.textAlign = align;
+        this.ctx.textBaseline = baseline;
         this.ctx.font = `${size}px ${font}`;
         this.ctx.fillText(text, x, y);
     }
@@ -657,6 +662,7 @@ class SimuloViewer {
         return this.ctx;
     }
     shapes: SimuloShape[] = [];
+    texts: SimuloText[] = [];
     /** Draw the current state of the world to the canvas or other drawing context. */
     draw() {
         // if the classlist contains .fullscreen
@@ -791,7 +797,19 @@ class SimuloViewer {
                 ];
                 this.drawVertsAt(shapeRectangle.x, shapeRectangle.y, verts, shapeRectangle.angle);
             }
+
+            if(shape.text) {
+                this.drawText(shape.text.text, shape.x, shape.y, shape.text.fontSize, shape.text.color, shape.text.fontFamily,  shape.text.align, shape.text.baseline);
+            }
+        }
+
+        // Draw any text that is not attached to a shape
+        for (var i = 0; i < this.texts.length; i++) {
+            var text = this.texts[i];
+            this.drawText(text.text, text.x, text.y, text.fontSize, text.color, text.fontFamily, text.align, text.baseline);
         }
+
+
         /*
                 // draw springs (white line from spring.p1 (array of x and y) to spring.p2 (array of x and y))
                 this.ctx.strokeStyle = 'white';

client/version

@@ -1,4 +1,4 @@
 {
-    "date": 1688242129052,
-    "version": "0.7.1"
+    "date": 1688499243865,
+    "version": "0.8.0"
 }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "simulo",
-    "version": "0.7.1",
+    "version": "0.8.0",
     "main": "server/src/index.js",
     "scripts": {
         "start": "node server/src/index.js",