Remove fanciness from slider constants

Author: rreusser

src/components/sliders/constants.js

@@ -48,16 +48,6 @@ module.exports = {
     // font size to height scale
     fontSizeToHeight: 1.3,
 
-    // item rect radii
-    rx: 2,
-    ry: 2,
-
-    // item  text x offset off left edge
-    textOffsetX: 12,
-
-    // item  text y offset (w.r.t. middle)
-    textOffsetY: 3,
-
     // arrow offset off right edge
     arrowOffsetX: 4,
 
@@ -67,6 +57,16 @@ module.exports = {
     railBorderColor: '#bec8d9',
     railBgColor: '#ebedf0',
 
+    // The distance of the rail from the edge of the touchable area
+    // Slightly less than the step inset because of the curved edges
+    // of the rail
+    railInset: 8,
+
+    // The distance from the extremal tick marks to the edge of the
+    // touchable area. This is basically the same as the grip radius,
+    // but for other styles it wouldn't really need to be.
+    stepInset: 10,
+
     gripRadius: 10,
     gripWidth: 20,
     gripHeight: 20,
@@ -76,15 +76,15 @@ module.exports = {
     gripBgColor: '#ebedf0',
     gripBgActiveColor: '#dbdde0',
 
-    // Padding in the direction perpendicular to the length of the rail:
-    // (which, at the moment is always vertical, but for the sake of the future...)
-    widthPadding: 10,
+    labelPadding: 8,
+    labelOffset: 0,
 
-    labelPadding: 4,
     tickWidth: 1,
     tickColor: '#333',
     tickOffset: 25,
     tickLength: 7,
+
+    minorTickOffset: 25,
     minorTickColor: '#333',
     minorTickLength: 4,
 };

src/components/sliders/draw.js

@@ -146,16 +146,14 @@ function findDimensions(gd, sliderOpts) {
     // The length of the rail, *excluding* padding on either end:
     sliderOpts.inputAreaStart = 0;
     sliderOpts.inputAreaLength = Math.round(sliderOpts.outerLength - sliderOpts.pad.l - sliderOpts.pad.r);
-    sliderOpts.railInset = Math.round(Math.max(0, constants.gripWidth - constants.railWidth) * 0.5);
-    sliderOpts.stepInset = Math.round(Math.max(sliderOpts.railInset, constants.gripWidth * 0.5));
 
-    var textableInputLength = sliderOpts.inputAreaLength - 2 * sliderOpts.stepInset;
+    var textableInputLength = sliderOpts.inputAreaLength - 2 * constants.stepInset;
     var availableSpacePerLabel = textableInputLength / (sliderOpts.steps.length - 1);
     var computedSpacePerLabel = maxLabelWidth + constants.labelPadding;
     sliderOpts.labelStride = Math.max(1, Math.ceil(computedSpacePerLabel / availableSpacePerLabel));
     sliderOpts.labelHeight = labelHeight;
 
-    sliderOpts.height = constants.tickOffset + constants.tickLength + sliderOpts.labelHeight + sliderOpts.pad.t + sliderOpts.pad.b;
+    sliderOpts.height = constants.tickOffset + constants.tickLength + constants.labelOffset + sliderOpts.labelHeight + sliderOpts.pad.t + sliderOpts.pad.b;
 
     var xanchor = 'left';
     if(anchorUtils.isRightAnchor(sliderOpts)) {
@@ -307,7 +305,7 @@ function drawLabelGroup(sliderGroup, sliderOpts) {
 
         Lib.setTranslate(item,
             normalizedValueToPosition(sliderOpts, d.fraction),
-            constants.tickOffset + constants.tickLength + sliderOpts.labelHeight
+            constants.tickOffset + constants.tickLength + sliderOpts.labelHeight + constants.labelOffset
         );
     });
 
@@ -405,7 +403,7 @@ function drawTicks(sliderGroup, sliderOpts) {
 
         Lib.setTranslate(item,
             normalizedValueToPosition(sliderOpts, i / (sliderOpts.steps.length - 1)) - 0.5 * constants.tickWidth,
-            constants.tickOffset
+            isMajor ? constants.tickOffset : constants.minorTickOffset
         );
     });
 
@@ -443,13 +441,13 @@ function setGripPosition(sliderGroup, sliderOpts, position, doTransition) {
 
 // Convert a number from [0-1] to a pixel position relative to the slider group container:
 function normalizedValueToPosition(sliderOpts, normalizedPosition) {
-    return sliderOpts.inputAreaStart + sliderOpts.stepInset +
-        (sliderOpts.inputAreaLength - 2 * sliderOpts.stepInset) * Math.min(1, Math.max(0, normalizedPosition));
+    return sliderOpts.inputAreaStart + constants.stepInset +
+        (sliderOpts.inputAreaLength - 2 * constants.stepInset) * Math.min(1, Math.max(0, normalizedPosition));
 }
 
 // Convert a position relative to the slider group to a nubmer in [0, 1]
 function positionToNormalizedValue(sliderOpts, position) {
-    return Math.min(1, Math.max(0, (position - sliderOpts.stepInset - sliderOpts.inputAreaStart) / (sliderOpts.inputAreaLength - 2 * sliderOpts.stepInset - 2 * sliderOpts.inputAreaStart)));
+    return Math.min(1, Math.max(0, (position - constants.stepInset - sliderOpts.inputAreaStart) / (sliderOpts.inputAreaLength - 2 * constants.stepInset - 2 * sliderOpts.inputAreaStart)));
 }
 
 function drawTouchRect(sliderGroup, gd, sliderOpts) {
@@ -466,7 +464,7 @@ function drawTouchRect(sliderGroup, gd, sliderOpts) {
         height: Math.max(sliderOpts.inputAreaWidth, constants.tickOffset + constants.tickLength + sliderOpts.labelHeight)
     })
         .call(Color.fill, constants.gripBgColor)
-        .attr('opacity', 0.0);
+        .attr('opacity', 0);
 
     Lib.setTranslate(rect, 0, 0);
 }
@@ -478,7 +476,7 @@ function drawRail(sliderGroup, sliderOpts) {
     rect.enter().append('rect')
         .classed(constants.railRectClass, true);
 
-    var computedLength = sliderOpts.inputAreaLength - sliderOpts.railInset * 2;
+    var computedLength = sliderOpts.inputAreaLength - constants.railInset * 2;
 
     rect.attr({
         width: computedLength,
@@ -491,7 +489,7 @@ function drawRail(sliderGroup, sliderOpts) {
         .call(Color.fill, constants.railBgColor)
         .style('stroke-width', '1px');
 
-    Lib.setTranslate(rect, sliderOpts.railInset, (sliderOpts.inputAreaWidth - constants.railWidth) * 0.5);
+    Lib.setTranslate(rect, constants.railInset, (sliderOpts.inputAreaWidth - constants.railWidth) * 0.5);
 }
 
 function clearPushMargins(gd) {