Numeric sliders (#346)

Author: nicolaskruchten

package.json

@@ -21,6 +21,7 @@
     "react-color": "^2.13.8",
     "react-colorscales": "^0.4.2",
     "react-dom": "^16.2.0",
+    "react-rangeslider": "^2.2.0",
     "react-select": "^1.0.0-rc.10",
     "react-tabs": "^2.2.1",
     "tinycolor2": "^1.4.1"

src/components/fields/Numeric.js

@@ -25,6 +25,7 @@ export class UnconnectedNumeric extends Component {
           onChange={this.props.updatePlot}
           onUpdate={this.props.updatePlot}
           showArrows={!this.props.hideArrows}
+          showSlider={this.props.showSlider}
         />
       </Field>
     );
@@ -38,6 +39,7 @@ UnconnectedNumeric.propTypes = {
   max: PropTypes.number,
   multiValued: PropTypes.bool,
   hideArrows: PropTypes.bool,
+  showSlider: PropTypes.bool,
   step: PropTypes.number,
   updatePlot: PropTypes.func,
   ...Field.propTypes,

src/components/fields/derived.js

@@ -105,14 +105,45 @@ export const AxesRange = connectToContainer(UnconnectedNumeric, {
   },
 });
 
-class NumericFraction extends UnconnectedNumeric {}
-NumericFraction.propTypes = UnconnectedNumeric.propTypes;
-NumericFraction.defaultProps = {
+class UnconnectedNumericFraction extends UnconnectedNumeric {}
+UnconnectedNumericFraction.propTypes = UnconnectedNumeric.propTypes;
+UnconnectedNumericFraction.defaultProps = {
   units: '%',
+  showSlider: true,
 };
 
+const numericFractionModifyPlotProps = (props, context, plotProps) => {
+  const {attrMeta, fullValue, updatePlot} = plotProps;
+  const min = attrMeta.min || 0;
+  const max = attrMeta.max || 1;
+  if (isNumeric(fullValue)) {
+    plotProps.fullValue = Math.round(100 * (fullValue - min) / (max - min));
+  }
+
+  plotProps.updatePlot = v => {
+    if (isNumeric(v)) {
+      updatePlot(v / 100 * (max - min) + min);
+    } else {
+      updatePlot(v);
+    }
+  };
+  plotProps.max = 100;
+  plotProps.min = 0;
+};
+
+export const NumericFraction = connectToContainer(UnconnectedNumericFraction, {
+  modifyPlotProps: numericFractionModifyPlotProps,
+});
+
+export const LayoutNumericFraction = connectLayoutToPlot(
+  connectToContainer(UnconnectedNumericFraction, {
+    supplyPlotProps: supplyLayoutPlotProps,
+    modifyPlotProps: numericFractionModifyPlotProps,
+  })
+);
+
 export const LayoutNumericFractionInverse = connectLayoutToPlot(
-  connectToContainer(NumericFraction, {
+  connectToContainer(UnconnectedNumericFraction, {
     supplyPlotProps: supplyLayoutPlotProps,
     modifyPlotProps: (props, context, plotProps) => {
       const {attrMeta, fullValue, updatePlot} = plotProps;
@@ -142,36 +173,6 @@ export const LayoutNumericFractionInverse = connectLayoutToPlot(
   })
 );
 
-export const LayoutNumericFraction = connectLayoutToPlot(
-  connectToContainer(NumericFraction, {
-    supplyPlotProps: supplyLayoutPlotProps,
-    modifyPlotProps: (props, context, plotProps) => {
-      const {attrMeta, fullValue, updatePlot} = plotProps;
-      if (isNumeric(fullValue)) {
-        plotProps.fullValue = fullValue * 100;
-      }
-
-      plotProps.updatePlot = v => {
-        if (isNumeric(v)) {
-          updatePlot(v / 100);
-        } else {
-          updatePlot(v);
-        }
-      };
-
-      if (attrMeta) {
-        if (isNumeric(attrMeta.max)) {
-          plotProps.max = attrMeta.max * 100;
-        }
-
-        if (isNumeric(attrMeta.min)) {
-          plotProps.min = attrMeta.min * 100;
-        }
-      }
-    },
-  })
-);
-
 export const AnnotationArrowRef = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
     const {fullContainer: {xref, yref}, plotly, graphDiv} = context;
@@ -271,6 +272,34 @@ export const PositioningRef = connectToContainer(UnconnectedDropdown, {
   },
 });
 
+export const PositioningNumeric = connectToContainer(UnconnectedNumeric, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {fullContainer, fullValue, updatePlot} = plotProps;
+    if (
+      fullContainer &&
+      (fullContainer[props.attr[0] + 'ref'] === 'paper' ||
+        fullContainer[props.attr[props.attr.length - 1] + 'ref'] === 'paper')
+    ) {
+      plotProps.units = '%';
+      plotProps.showSlider = true;
+      plotProps.max = 100;
+      plotProps.min = 0;
+      plotProps.step = 1;
+      if (isNumeric(fullValue)) {
+        plotProps.fullValue = Math.round(100 * fullValue);
+      }
+
+      plotProps.updatePlot = v => {
+        if (isNumeric(v)) {
+          updatePlot(v / 100);
+        } else {
+          updatePlot(v);
+        }
+      };
+    }
+  },
+});
+
 function computeAxesRefOptions(axes) {
   const options = [];
   for (let i = 0; i < axes.length; i++) {

src/components/fields/index.js

@@ -24,6 +24,9 @@ import {
   GeoProjections,
   GeoScope,
   HoverInfo,
+  NumericFraction,
+  PositioningNumeric,
+  NumericFractionInverse,
   LayoutNumericFraction,
   LayoutNumericFractionInverse,
   TraceOrientation,
@@ -53,6 +56,9 @@ export {
   Info,
   LayoutNumericFraction,
   LayoutNumericFractionInverse,
+  NumericFraction,
+  NumericFractionInverse,
+  PositioningNumeric,
   LineDashSelector,
   LineShapeSelector,
   Numeric,

src/components/index.js

@@ -21,6 +21,9 @@ import {
   Info,
   LayoutNumericFraction,
   LayoutNumericFractionInverse,
+  NumericFraction,
+  PositioningNumeric,
+  NumericFractionInverse,
   LineDashSelector,
   LineShapeSelector,
   Numeric,
@@ -81,6 +84,9 @@ export {
   GeoScope,
   HoverInfo,
   Info,
+  NumericFraction,
+  PositioningNumeric,
+  NumericFractionInverse,
   LayoutNumericFraction,
   LayoutNumericFractionInverse,
   LayoutPanel,

src/components/widgets/NumericInput.js

@@ -2,6 +2,7 @@ import EditableText from './EditableText';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import isNumeric from 'fast-isnumeric';
+import Slider from 'react-rangeslider';
 import {CarretDownIcon, CarretUpIcon} from 'plotly-icons';
 
 export const UP_ARROW = 38;
@@ -94,7 +95,7 @@ export default class NumericInput extends Component {
   }
 
   renderArrows() {
-    if (!this.props.showArrows) {
+    if (!this.props.showArrows || this.props.showSlider) {
       return null;
     }
 
@@ -116,6 +117,23 @@ export default class NumericInput extends Component {
     );
   }
 
+  renderSlider() {
+    if (!this.props.showSlider) {
+      return null;
+    }
+
+    return (
+      <Slider
+        min={this.props.min}
+        max={this.props.max}
+        step={this.props.step}
+        value={this.state.value}
+        onChange={this.updateValue}
+        tooltip={false}
+      />
+    );
+  }
+
   render() {
     return (
       <div className="numeric-input__wrapper">
@@ -129,6 +147,7 @@ export default class NumericInput extends Component {
           onKeyDown={this.onKeyDown}
         />
         {this.renderArrows()}
+        {this.renderSlider()}
       </div>
     );
   }
@@ -143,6 +162,7 @@ NumericInput.propTypes = {
   onUpdate: PropTypes.func.isRequired,
   placeholder: PropTypes.string,
   showArrows: PropTypes.bool,
+  showSlider: PropTypes.bool,
   step: PropTypes.number,
   value: PropTypes.any,
 };

src/default_panels/StyleAxesPanel.js

@@ -6,6 +6,7 @@ import {
   Dropdown,
   FontSelector,
   Numeric,
+  NumericFraction,
   Radio,
   TextEditor,
   MenuPanel,
@@ -292,18 +293,8 @@ const StyleAxesPanel = ({localize: _}) => (
       </AxesFold>
       <AxesFold name={_('Layout')}>
         <Section name={_('Axis Width')} attr="domain[0]">
-          <Numeric
-            label={_('Start Position')}
-            attr="domain[0]"
-            units="%"
-            step={0.1}
-          />
-          <Numeric
-            label={_('End Position')}
-            attr="domain[1]"
-            units="%"
-            step={0.1}
-          />
+          <NumericFraction label={_('Start Position')} attr="domain[0]" />
+          <NumericFraction label={_('End Position')} attr="domain[1]" />
         </Section>
         <Section name={_('Positioning')}>
           <Radio

src/default_panels/StyleImagesPanel.js

@@ -4,7 +4,7 @@ import {
   ImageAccordion,
   Radio,
   TextEditor,
-  Numeric,
+  PositioningNumeric,
   Section,
   PositioningRef,
   Dropdown,
@@ -33,8 +33,8 @@ const StyleImagesPanel = ({localize: _}) => (
         {label: _('Stretch'), value: 'stretch'},
       ]}
     />
-    <Numeric attr="sizex" label={_('Width')} />
-    <Numeric attr="sizey" label={_('Height')} />
+    <PositioningNumeric attr="sizex" label={_('Width')} />
+    <PositioningNumeric attr="sizey" label={_('Height')} />
     <Section name={_('Horizontal Positioning')}>
       <MenuPanel>
         <Section name={_('Anchor Point')}>
@@ -49,7 +49,7 @@ const StyleImagesPanel = ({localize: _}) => (
         </Section>
       </MenuPanel>
       <PositioningRef label={_('Relative To')} attr="xref" />
-      <Numeric label={_('Position')} attr="x" hideArrows />
+      <PositioningNumeric label={_('Position')} attr="x" />
     </Section>
 
     <Section name={_('Vertical Positioning')}>
@@ -66,7 +66,7 @@ const StyleImagesPanel = ({localize: _}) => (
         </Section>
       </MenuPanel>
       <PositioningRef label={_('Relative To')} attr="yref" />
-      <Numeric label={_('Position')} attr="y" hideArrows />
+      <PositioningNumeric label={_('Position')} attr="y" />
     </Section>
   </ImageAccordion>
 );

src/default_panels/StyleNotesPanel.js

@@ -9,6 +9,7 @@ import {
   FontSelector,
   Info,
   Numeric,
+  PositioningNumeric,
   Radio,
   TextEditor,
   Section,
@@ -40,8 +41,8 @@ const StyleNotesPanel = ({localize: _}) => (
       <Numeric label={_('Scale')} step={0.1} attr="arrowsize" units="px" />
       <AnnotationArrowRef label="X Offset" attr="axref" />
       <AnnotationArrowRef label="Y Offset" attr="ayref" />
-      <Numeric label={_('X Vector')} attr="ax" hideArrows />
-      <Numeric label={_('Y Vector')} attr="ay" hideArrows />
+      <Numeric label={_('X Vector')} attr="ax" />
+      <Numeric label={_('Y Vector')} attr="ay" />
     </Section>
     <Section name={_('Horizontal Positioning')}>
       <MenuPanel>
@@ -64,7 +65,7 @@ const StyleNotesPanel = ({localize: _}) => (
         </Section>
       </MenuPanel>
       <AnnotationRef label={_('Relative To')} attr="xref" />
-      <Numeric label={_('Position')} attr="x" hideArrows />
+      <PositioningNumeric label={_('Position')} attr="x" />
     </Section>
     <Section name={_('Vertical Positioning')}>
       <MenuPanel>
@@ -87,7 +88,7 @@ const StyleNotesPanel = ({localize: _}) => (
         </Section>
       </MenuPanel>
       <AnnotationRef label={_('Relative To')} attr="yref" />
-      <Numeric label={_('Position')} attr="y" hideArrows />
+      <PositioningNumeric label={_('Position')} attr="y" />
     </Section>
   </AnnotationAccordion>
 );

src/default_panels/StyleShapesPanel.js

@@ -5,6 +5,7 @@ import {
   Radio,
   Section,
   PositioningRef,
+  PositioningNumeric,
   Numeric,
   ColorPicker,
   LineDashSelector,
@@ -32,14 +33,14 @@ const StyleShapesPanel = ({localize: _}) => (
 
     <Section name={_('Horizontal Boundaries')}>
       <PositioningRef label={_('Relative to')} attr="xref" />
-      <Numeric label={_('Start Point')} attr="x0" />
-      <Numeric label={_('End Point')} attr="x1" />
+      <PositioningNumeric label={_('Start Point')} attr="x0" />
+      <PositioningNumeric label={_('End Point')} attr="x1" />
     </Section>
 
     <Section name={_('Vertical Boundaries')}>
       <PositioningRef label={_('Relative to')} attr="yref" />
-      <Numeric label={_('Start Point')} attr="y0" />
-      <Numeric label={_('End Point')} attr="y1" />
+      <PositioningNumeric label={_('Start Point')} attr="y0" />
+      <PositioningNumeric label={_('End Point')} attr="y1" />
     </Section>
     <Section name={_('Lines')}>
       <Numeric label={_('Width')} attr="line.width" />