implementation specific naming for Box* + min max transformation

Author: bpostlethwaite

src/DefaultEditor.js

@@ -24,7 +24,7 @@ import {
 import {DEFAULT_FONTS} from './constants';
 import {localize, connectAxesToLayout, connectLayoutToPlot} from './lib';
 
-import {BoxWidth, BoxPad} from './shame';
+import {LayoutNumericFractionInverse, LayoutNumericFraction} from './shame';
 
 const LayoutPanel = connectLayoutToPlot(Panel);
 const AxesFold = connectAxesToLayout(Fold);
@@ -148,10 +148,22 @@ class DefaultEditor extends Component {
             </TraceMarkerSection>
 
             <Section name={_('Size and Spacing')}>
-              <BoxWidth label={_('Bar Width')} attr="bargap" />
-              <BoxWidth label={_('Box Width')} attr="boxgap" />
-              <BoxPad label={_('Bar Padding')} attr="bargroupgap" />
-              <BoxPad label={_('Box Padding')} attr="boxgroupgap" />
+              <LayoutNumericFractionInverse
+                label={_('Bar Width')}
+                attr="bargap"
+              />
+              <LayoutNumericFractionInverse
+                label={_('Box Width')}
+                attr="boxgap"
+              />
+              <LayoutNumericFraction
+                label={_('Bar Padding')}
+                attr="bargroupgap"
+              />
+              <LayoutNumericFraction
+                label={_('Box Padding')}
+                attr="boxgroupgap"
+              />
             </Section>
 
             <Section name={_('Lines')}>

src/shame.js

@@ -36,11 +36,11 @@ const supplyLayoutPlotProps = (props, context) => {
   });
 };
 
-export const BoxWidth = connectLayoutToPlot(
+export const LayoutNumericFractionInverse = connectLayoutToPlot(
   connectToContainer(NumericNoArrows, {
     supplyPlotProps: supplyLayoutPlotProps,
     modifyPlotProps: (props, context, plotProps) => {
-      const {fullValue, updatePlot} = plotProps;
+      const {attrMeta, fullValue, updatePlot} = plotProps;
       plotProps.fullValue = () => {
         let fv = fullValue();
         if (isNumeric(fv)) {
@@ -57,16 +57,25 @@ export const BoxWidth = connectLayoutToPlot(
         }
       };
 
-      plotProps.max = 100;
+      // Also take the inverse of max and min.
+      if (attrMeta) {
+        if (isNumeric(attrMeta.min)) {
+          plotProps.max = (1 - attrMeta.min) * 100;
+        }
+
+        if (isNumeric(attrMeta.max)) {
+          plotProps.min = (1 - attrMeta.max) * 100;
+        }
+      }
     },
   })
 );
 
-export const BoxPad = connectLayoutToPlot(
+export const LayoutNumericFraction = connectLayoutToPlot(
   connectToContainer(NumericNoArrows, {
     supplyPlotProps: supplyLayoutPlotProps,
     modifyPlotProps: (props, context, plotProps) => {
-      const {fullValue, updatePlot} = plotProps;
+      const {attrMeta, fullValue, updatePlot} = plotProps;
       plotProps.fullValue = () => {
         let fv = fullValue();
         if (isNumeric(fv)) {
@@ -83,7 +92,15 @@ export const BoxPad = connectLayoutToPlot(
         }
       };
 
-      plotProps.max = 100;
+      if (attrMeta) {
+        if (isNumeric(attrMeta.max)) {
+          plotProps.max = attrMeta.max * 100;
+        }
+
+        if (isNumeric(attrMeta.max)) {
+          plotProps.min = attrMeta.min * 100;
+        }
+      }
     },
   })
 );