Make relationship between overlaying and domain clearer

Author: VeraZab

src/components/fields/derived.js

@@ -232,6 +232,18 @@ export const NumericFraction = connectToContainer(UnconnectedNumericFraction, {
   modifyPlotProps: numericFractionModifyPlotProps,
 });
 
+export const NumericFractionDomain = connectToContainer(
+  UnconnectedNumericFraction,
+  {
+    modifyPlotProps: (props, context, plotProps) => {
+      numericFractionModifyPlotProps(props, context, plotProps);
+      if (context.container.overlaying) {
+        plotProps.isVisible = null;
+      }
+    },
+  }
+);
+
 export const LayoutNumericFraction = connectLayoutToPlot(
   connectToContainer(UnconnectedNumericFraction, {
     supplyPlotProps: supplyLayoutPlotProps,

src/components/fields/index.js

@@ -27,6 +27,7 @@ import {
   GeoScope,
   HoverInfo,
   NumericFraction,
+  NumericFractionDomain,
   PositioningNumeric,
   NumericFractionInverse,
   LayoutNumericFraction,
@@ -62,6 +63,7 @@ export {
   LayoutNumericFraction,
   LayoutNumericFractionInverse,
   NumericFraction,
+  NumericFractionDomain,
   NumericFractionInverse,
   PositioningNumeric,
   LineDashSelector,

src/components/index.js

@@ -25,6 +25,7 @@ import {
   LayoutNumericFraction,
   LayoutNumericFractionInverse,
   NumericFraction,
+  NumericFractionDomain,
   PositioningNumeric,
   NumericFractionInverse,
   LineDashSelector,
@@ -92,6 +93,7 @@ export {
   HoverInfo,
   Info,
   NumericFraction,
+  NumericFractionDomain,
   PositioningNumeric,
   NumericFractionInverse,
   LayoutNumericFraction,

src/default_panels/StyleAxesPanel.js

@@ -9,7 +9,7 @@ import {
   Dropdown,
   FontSelector,
   Numeric,
-  NumericFraction,
+  NumericFractionDomain,
   Radio,
   TextEditor,
   MenuPanel,
@@ -36,18 +36,22 @@ const StyleAxesPanel = ({localize: _}) => (
       </AxesFold>
 
       <AxesFold name={_('Layout')}>
-        <Section name={_('Axis Space')} attr="domain[0]">
-          <NumericFraction label={_('Start Position')} attr="domain[0]" />
-          <NumericFraction label={_('End Position')} attr="domain[1]" />
-        </Section>
-
-        <Section name={_('Positioning')}>
-          <AxisAnchorDropdown label={_('Anchor')} attr="anchor" localize={_} />
+        <Section name={_('Boundaries')} attr="domain[0]">
           <AxisOverlayDropdown
             label={_('Overlay')}
             attr="overlaying"
             localize={_}
           />
+          <NumericFractionDomain label={_('Start Position')} attr="domain[0]" />
+          <NumericFractionDomain label={_('End Position')} attr="domain[1]" />
+        </Section>
+
+        <Section name={_('Anchor')}>
+          <AxisAnchorDropdown
+            label={_('Anchor To')}
+            attr="anchor"
+            localize={_}
+          />
           <AxisSide label={_('Side')} attr="side" localize={_} />
         </Section>
       </AxesFold>