Fix handles disappearing with invertedAxis

FormidableLabs · Nov 5, 2019 · 2d6e14f · 2d6e14f
1 parent e173b63
commit 2d6e14f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/demo/components/victory-brush-container-demo.js b/demo/components/victory-brush-container-demo.js
@@ -114,6 +114,7 @@ class App extends React.Component {
               <VictoryBrushContainer brushDomain={{ x: [2, 4], y: [-2, 2] }} allowDraw={false} />
             }
           >
+            <VictoryAxis dependentAxis invertAxis />
             <VictoryLegend
               x={120}
               y={20}

diff --git a/packages/victory-brush-container/src/victory-brush-container.js b/packages/victory-brush-container/src/victory-brush-container.js
@@ -127,12 +127,16 @@ export const brushContainerMixin = (base) =>
       const cursors = this.getCursorPointers(props);
       const yProps = { style, width, height: handleWidth, cursor: cursors.yProps };
       const xProps = { style, width: handleWidth, height, cursor: cursors.xProps };
+      const minX = Math.min(x[0], x[1]);
+      const maxX = Math.max(x[0], x[1]);
+      const minY = Math.min(y[0], y[1]);
+      const maxY = Math.max(y[0], y[1]);
 
       const handleProps = {
-        top: brushDimension !== "x" && assign({ x: x[0], y: y[1] - handleWidth / 2 }, yProps),
-        bottom: brushDimension !== "x" && assign({ x: x[0], y: y[0] - handleWidth / 2 }, yProps),
-        left: brushDimension !== "y" && assign({ y: y[1], x: x[0] - handleWidth / 2 }, xProps),
-        right: brushDimension !== "y" && assign({ y: y[1], x: x[1] - handleWidth / 2 }, xProps)
+        top: brushDimension !== "x" && assign({ x: minX, y: minY - handleWidth / 2 }, yProps),
+        bottom: brushDimension !== "x" && assign({ x: minX, y: maxY - handleWidth / 2 }, yProps),
+        left: brushDimension !== "y" && assign({ y: minY, x: minX - handleWidth / 2 }, xProps),
+        right: brushDimension !== "y" && assign({ y: minY, x: maxX - handleWidth / 2 }, xProps)
       };
       const handles = ["top", "bottom", "left", "right"].reduce((memo, curr) => {
         memo = handleProps[curr]