add Axes.getTickSigns

Author: etpinard

src/components/colorbar/draw.js

@@ -437,22 +437,15 @@ module.exports = function draw(gd, id) {
                     var shift = xLeft + thickPx +
                         (opts.outlinewidth || 0) / 2 - (opts.ticks === 'outside' ? 1 : 0);
 
-                    // TODO dry!
-                    var sideOpposite = 'right';
-                    var axLetter = 'y';
-                    var tickSign = [-1, 1, cbAxisOut.side === sideOpposite ? 1 : -1];
-                    if((cbAxisOut.ticks !== 'inside') === (axLetter === 'x')) {
-                        tickSign = tickSign.map(function(v) { return -v; });
-                    }
-
                     var vals = Axes.calcTicks(cbAxisOut);
                     var transFn = Axes.makeTransFn(cbAxisOut);
                     var labelFns = Axes.makeLabelFns(cbAxisOut, shift);
+                    var tickSign = Axes.getTickSigns(cbAxisOut)[2];
 
                     Axes.drawTicks(gd, cbAxisOut, {
                         vals: cbAxisOut.ticks === 'inside' ? Axes.clipEnds(cbAxisOut, vals) : vals,
                         layer: axisLayer,
-                        path: Axes.makeTickPath(cbAxisOut, shift, tickSign[2]),
+                        path: Axes.makeTickPath(cbAxisOut, shift, tickSign),
                         transFn: transFn
                     });
 

src/plots/cartesian/axes.js

@@ -1643,21 +1643,14 @@ axes.drawOne = function(gd, ax, opts) {
         }
     }
 
-    // Which direction do the 'ax.side' values, and free ticks go?
-    // then we flip if outside XOR y axis
-    var sideOpposite = {x: 'top', y: 'right'}[axLetter];
-    var tickSign = [-1, 1, ax.side === sideOpposite ? 1 : -1];
-    if((ax.ticks !== 'inside') === (axLetter === 'x')) {
-        tickSign = tickSign.map(function(v) { return -v; });
-    }
-
+    var tickSigns = axes.getTickSigns(ax);
     var tickVals = ax.ticks === 'inside' ? valsClipped : vals;
     var tickSubplots = [];
 
     if(ax.ticks) {
-        var mainTickPath = axes.makeTickPath(ax, ax._mainLinePosition, tickSign[2]);
+        var mainTickPath = axes.makeTickPath(ax, ax._mainLinePosition, tickSigns[2]);
         if(ax._anchorAxis && ax.mirror && ax.mirror !== true) {
-            mainTickPath += axes.makeTickPath(ax, ax._mainMirrorPosition, -tickSign[2]);
+            mainTickPath += axes.makeTickPath(ax, ax._mainMirrorPosition, tickSigns[3]);
         }
 
         axes.drawTicks(gd, ax, {
@@ -1675,8 +1668,8 @@ axes.drawOne = function(gd, ax, opts) {
         plotinfo = fullLayout._plots[sp];
         // [bottom or left, top or right], free and main are handled above
         var linepositions = ax._linepositions[sp] || [];
-        var spTickPath = axes.makeTickPath(ax, linepositions[0], tickSign[0]) +
-            axes.makeTickPath(ax, linepositions[1], tickSign[1]);
+        var spTickPath = axes.makeTickPath(ax, linepositions[0], tickSigns[0]) +
+            axes.makeTickPath(ax, linepositions[1], tickSigns[1]);
 
         axes.drawTicks(gd, ax, {
             vals: tickVals,
@@ -1709,6 +1702,31 @@ axes.drawOne = function(gd, ax, opts) {
     });
 };
 
+/**
+ * Which direction do the 'ax.side' values, and free ticks go?
+ *
+ * @param {object} ax (full) axis object
+ *  - @param {string} _id (starting with 'x' or 'y')
+ *  - @param {string} side
+ *  - @param {string} ticks
+ * @return {array} all entries are either -1 or 1
+ *  - [0]: sign for top/right ticks (i.e. negative SVG direction)
+ *  - [1]: sign for bottom/left ticks (i.e. positive SVG direction)
+ *  - [2]: sign for ticks corresponding to 'ax.side'
+ *  - [3]: sign for ticks mirroring 'ax.side'
+ */
+axes.getTickSigns = function(ax) {
+    var axLetter = ax._id.charAt(0);
+    var sideOpposite = {x: 'top', y: 'right'}[axLetter];
+    var main = ax.side === sideOpposite ? 1 : -1;
+    var out = [-1, 1, main, -main];
+    // then we flip if outside XOR y axis
+    if((ax.ticks !== 'inside') === (axLetter === 'x')) {
+        out = out.map(function(v) { return -v; });
+    }
+    return out;
+};
+
 axes.makeTransFn = function(ax) {
     var axLetter = ax._id.charAt(0);
     var offset = ax._offset;
@@ -1717,8 +1735,6 @@ axes.makeTransFn = function(ax) {
         function(d) { return 'translate(0,' + (offset + ax.l2p(d.x)) + ')'; };
 };
 
-// incorporate sng logic here!
-
 axes.makeTickPath = function(ax, shift, sgn) {
     var axLetter = ax._id.charAt(0);
     var pad = (ax.linewidth || 1) / 2;

src/plots/polar/polar.js

@@ -405,17 +405,12 @@ proto.updateRadialAxis = function(fullLayout, polarLayout) {
         var vals = Axes.calcTicks(ax);
         var valsClipped = Axes.clipEnds(ax, vals);
         var labelFns = Axes.makeLabelFns(ax, 0);
-
-        var sideOpposite = {x: 'top', y: 'right'}[ax._id];
-        var tickSign = [-1, 1, ax.side === sideOpposite ? 1 : -1];
-        if((ax.ticks !== 'inside') === (ax._id === 'x')) {
-            tickSign = tickSign.map(function(v) { return -v; });
-        }
+        var tickSign = Axes.getTickSigns(ax)[2];
 
         Axes.drawTicks(gd, ax, {
             vals: vals,
             layer: layers['radial-axis'],
-            path: Axes.makeTickPath(ax, 0, tickSign[2]),
+            path: Axes.makeTickPath(ax, 0, tickSign),
             transFn: transFn,
             noCrisp: true
         });
@@ -625,17 +620,12 @@ proto.updateAngularAxis = function(fullLayout, polarLayout) {
     }
 
     if(ax.visible) {
-        // TODO dry!!
-        var sideOpposite = 'right';
-        var tickSign = [-1, 1, ax.side === sideOpposite ? 1 : -1];
-        if((ax.ticks !== 'inside') === false) {
-            tickSign = tickSign.map(function(v) { return -v; });
-        }
+        var tickSign = ax.ticks === 'inside' ? -1 : 1;
 
         Axes.drawTicks(gd, ax, {
             vals: vals,
             layer: layers['angular-axis'],
-            path: 'M' + (tickSign[2] * pad) + ',0h' + (tickSign[2] * ax.ticklen),
+            path: 'M' + (tickSign * pad) + ',0h' + (tickSign * ax.ticklen),
             transFn: transFn2,
             noCrisp: true
         });

src/plots/ternary/ternary.js

@@ -419,20 +419,15 @@ proto.drawAx = function(ax) {
     }
 
     ax.setScale();
+
     var vals = Axes.calcTicks(ax);
     var valsClipped = Axes.clipEnds(ax, vals);
     var transFn = Axes.makeTransFn(ax);
-
-    // TODO dry!!
-    var sideOpposite = {x: 'top', y: 'right'}[axId];
-    var tickSign = [-1, 1, ax.side === sideOpposite ? 1 : -1];
-    if((ax.ticks !== 'inside') === (axId === 'x')) {
-        tickSign = tickSign.map(function(v) { return -v; });
-    }
+    var tickSign = Axes.getTickSigns(ax)[2];
 
     var caRad = Lib.deg2rad(counterAngle);
-    var pad = tickSign[2] * (ax.linewidth || 1) / 2;
-    var len = tickSign[2] * ax.ticklen;
+    var pad = tickSign * (ax.linewidth || 1) / 2;
+    var len = tickSign * ax.ticklen;
     var w = _this.w;
     var h = _this.h;