From 3a3a2fd403284e1f8a9f09915a47ff33972247d4 Mon Sep 17 00:00:00 2001
From: Thomas G <t_glaessle@gmx.de>
Date: Fri, 13 Mar 2020 20:57:42 +0100
Subject: [PATCH] fix(axis): some consistency issues with label rotation (#114)

* Remove ineffective code in drawAxisLabel[XY]Rotate

* Set textAlign/Baseline explicitly in drawAxisLabel[XY]Rotate

The filled in values were taken from `console.log` outputs at the
corresponding locations.

* Make alignment of X labels more consistent with the Y labels

There is a very slight difference here, but most users probably won't
notice.

* Remove weird text offsets in drawAxisLabel[XY]Rotate

The position is already set by ctx.translate() *before* rotation. Adding
another offset by point/100 *after* rotation doesn't make sense to me
and is prone to give unexpected results. Also, the margin introduced by
these offsets look pretty large compared to the margins when drawing the
text unrotated.

* Remove additional drawing orientation for Y axis

This one was responsible for flipping the Y axis numbers from leftwards
to rightwards when the slope of the Y axis on screen becomes negative.
IMO, this is slightly weird because as viewer you have to readjust the
orientation in which you read, but more importantly this is inconsistent
with how the X axis is drawn (which simply doesn't make this
distinction). I think both axes should be drawn the same way.

* Change label orientation to bottom->top
---
 lib/graph3d/Graph3d.js | 30 +++++++++---------------------
 1 file changed, 9 insertions(+), 21 deletions(-)

diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js
index 639bb34d0..64e685b0f 100755
--- a/lib/graph3d/Graph3d.js
+++ b/lib/graph3d/Graph3d.js
@@ -1130,12 +1130,11 @@ Graph3d.prototype.drawAxisLabelXRotate = function (ctx, point3d, text, armAngle,
   if (Math.cos(armAngle * 2) > 0) {
     ctx.save();
     ctx.translate( point2d.x, point2d.y);
-    ctx.rotate( Math.PI / 2 );
+    ctx.rotate(-Math.PI / 2);
+    ctx.textAlign = 'right';
+    ctx.textBaseline = 'middle';
     ctx.fillStyle = this.axisColor;
-    ctx.fillText(text, point2d.x/100, point2d.y/100 );
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'top';
-    point2d.y += yMargin;
+    ctx.fillText(text, 0, 0);
     ctx.restore();
   } else if (Math.sin(armAngle * 2) < 0) {
     ctx.textAlign = 'right';
@@ -1164,25 +1163,14 @@ Graph3d.prototype.drawAxisLabelYRotate = function (ctx, point3d, text, armAngle,
   }
 
   var point2d = this._convert3Dto2D(point3d);
-  if (Math.cos(armAngle * 2) < 0 && Math.sin(armAngle * 2) < 0) {
+  if (Math.cos(armAngle * 2) < 0 ) {
     ctx.save();
     ctx.translate( point2d.x, point2d.y);
-    ctx.rotate( (Math.PI / 2) * -1 );
-    ctx.fillStyle = this.axisColor;
-    ctx.fillText(text, point2d.x/100, point2d.y/100 );
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'top';
-    point2d.y += yMargin;
-    ctx.restore();
-  } else if (Math.cos(armAngle * 2) < 0 ) {
-    ctx.save();
-    ctx.translate( point2d.x, point2d.y);
-    ctx.rotate( Math.PI / 2 );
+    ctx.rotate(-Math.PI / 2);
+    ctx.textAlign = 'right';
+    ctx.textBaseline = 'middle';
     ctx.fillStyle = this.axisColor;
-    ctx.fillText(text, point2d.x/100, point2d.y/100 );
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'top';
-    point2d.y += yMargin;
+    ctx.fillText(text, 0, 0);
     ctx.restore();
   } else if (Math.sin(armAngle * 2) > 0) {
     ctx.textAlign = 'right';