text rotate update

flip the text at an angle greater than or equal to 135 and less than 170 so that the text is read from left to right

index.html

@@ -93,6 +93,7 @@ <h2 id="result">Answer: 42</h2>
     <script src="main.js" defer></script>
     <script src="junction.js" defer></script>
     <script src="node.js" defer></script>
+    <script src="text.js" defer></script>
     <script src="wire.js" defer></script>
 </body>
 </html>

main.js

@@ -247,6 +247,8 @@ function drawGrid() {
   ctx.restore();
 }
 
+
+
 function renderAll() {
   ctx.setTransform(1, 0, 0, 1, 0, 0);
   ctx.clearRect(0,0, canvas.width, canvas.height);
@@ -271,8 +273,7 @@ function renderAll() {
 document.addEventListener('keypress', function(e) { // rotate
   if (e.key === 'r' && selectedComponents.length > 0) {
 
-    selectedComponents[0].angle += 45;
-    selectedComponents[0].angle %= 360;
+    selectedComponents[0].rotate(45);
 
     if (!isDragging) {
       selectedComponents[0].update();
@@ -284,17 +285,17 @@ document.addEventListener('keypress', function(e) { // rotate
 
   if (e.key === 'e' && selectedComponents.length > 0) {
     let newValue = prompt(`new ${selectedComponents[0].name} value`);
-    selectedComponents[0].value = newValue;
+    selectedComponents[0].value.value = newValue;
 
     renderAll();
   }
 });
 
 function deleteSelected() {
   if (selectedComponents.length > 0) {
-    selectedComponents[0].selected = false;
+    selectedComponents[0].select(false);
     selectedComponents[0].onDelete();
-    delete components[selectedComponents[0].name];
+    delete components[selectedComponents[0].name.value];
     selectedComponents.length = 0;
   }
 
@@ -353,7 +354,7 @@ canvas.addEventListener('mousedown', function(event) {
 
   if (event.button === 0) { // left btn
     if (selectedComponents.length)
-        selectedComponents[0].selected = false;
+        selectedComponents[0].select(false);
     selectedComponents.length = 0;
     selectedWires.length = 0;
     for (let i in components) {
@@ -362,12 +363,12 @@ canvas.addEventListener('mousedown', function(event) {
       { 
         isDragging = true;
         selectedComponents.push(component);
-        component.selected = true;
+        component.select(true);
         mouseOffsetX = mouseX / zoom - component.x;
         mouseOffsetY = mouseY / zoom - component.y;
         break;
       } else {
-        component.selected = false;
+        component.select(false);
       }
     }
 

text.js

@@ -0,0 +1,110 @@
+class Text {
+    constructor(value) {
+        this.value = value;
+        this.x = null;
+        this.y = null;
+        this.parent = null;
+        this.angle = 0;
+        this.flipY = 1;
+        this.flipX = 1;
+        this.font = "bold 12px sans-serif";
+
+        this.selected = false;
+    }
+
+    width() {
+        ctx.save();
+        ctx.font = this.font;
+        let w = ctx.measureText(this.value).width; 
+        ctx.restore();
+        return w;
+    }
+
+
+    height() {
+        ctx.save();
+        ctx.font = this.font;
+        let t = ctx.measureText(this.value);
+        let h = t.actualBoundingBoxAscent + t.actualBoundingBoxDescent; 
+        ctx.restore();
+        return h;
+    }
+
+    rotationPointX() {
+        return this.x + this.width()/2;
+    }
+
+    rotationPointY() {
+        return this.y + this.height()/2;
+    }
+
+    draw() {
+        ctx.save();
+
+        ctx.fillStyle = "#FF0000";
+        ctx.textAlign = "left";
+
+        ctx.font = this.font;
+
+        let drawX = this.x + Math.abs(this.width() - this.parent.width)/2;
+        let drawY = this.y;
+
+        ctx.translate(this.parent.rotationPointX(), this.parent.rotationPointY());
+        ctx.rotate(this.angle * (Math.PI / 180));
+        ctx.translate(-this.parent.rotationPointX(), -this.parent.rotationPointY());
+
+
+        ctx.scale(this.flipX, this.flipY);
+
+        drawX = this.x + Math.abs(this.width() - this.parent.width)/2;
+        drawY = this.y;
+
+        if (this.selected) {
+            ctx.strokeStyle = "#FF0000";
+            ctx.fillStyle = "#FF0000";
+        }
+        else {
+            ctx.strokeStyle = "#000000";
+            ctx.fillStyle = "#000000";
+        }
+
+
+        if (this.flipX === -1) {
+            drawX *= -1;
+            drawX -= this.width();
+        }
+
+        if (this.flipY === -1) {
+            drawY *= -1;
+            drawY += this.height();
+        }
+
+
+
+        ctx.fillText(this.value, drawX, drawY);
+
+
+        ctx.restore();
+
+    }
+
+    rotate(angle) {
+
+        this.angle += angle;
+
+        this.angle %= 360;
+
+        let absAngle = Math.abs(this.angle);
+
+        if (absAngle >= 135 && absAngle < 270) {
+            this.flipX = -1;
+            this.flipY = -1;
+
+        }
+        else {
+            this.flipX = 1;
+            this.flipY = 1;
+        }
+
+    }
+}