fix: correctly compute default axis in hooks (#424)

zakodium-oss · Jun 28, 2022 · 0aa6f36 · 0aa6f36
1 parent db46542
commit 0aa6f36
Show file tree

Hide file tree

Showing 6 changed files with 3,353 additions and 17 deletions.
diff --git a/src/hooks/useAxisZoom.tsx b/src/hooks/useAxisZoom.tsx
@@ -10,20 +10,18 @@ import {
   usePlotEvents,
 } from '../contexts/plotController/plotControllerContext';
 
-import { ControllerHookOptions } from './types';
+import { ControllerHookOptions, DualAxisOptions } from './types';
 import { useStartMoveEnd } from './useStartMoveEnd';
 
-export interface UseAxisZoomOptions extends ControllerHookOptions {
+export interface UseAxisZoomOptions
+  extends ControllerHookOptions,
+    DualAxisOptions {
   /**
    * The zoom direction to use on wheel events.
    * @defaultValue 'vertical'
    * */
   direction?: 'horizontal' | 'vertical';
-  /**
-   * Id of Axis to apply zoom.
-   * Default value is 'x' when direction is horizontal and 'y' if direction is vertical.
-   * */
-  axisId?: string;
+
   /**
    * Zoom rectangle stroke color.
    * @defaultValue "red"
@@ -44,12 +42,13 @@ export function useAxisZoom(options: UseAxisZoomOptions = {}) {
     controllerId,
     disabled,
     direction = 'horizontal',
-    axisId = direction === 'horizontal' ? 'x' : 'y',
+    horizontalAxisId = 'x',
+    verticalAxisId = 'y',
     color = 'red',
     rectangleStyle,
     lineStyle,
   } = options;
-
+  const axisId = direction === 'horizontal' ? horizontalAxisId : verticalAxisId;
   const plotControls = usePlotControls(options);
 
   const startMoveEnd = useStartMoveEnd({
@@ -102,17 +101,65 @@ export function useAxisZoom(options: UseAxisZoomOptions = {}) {
   if (direction === 'horizontal') {
     annotations = (
       <>
-        <Line x1={start} x2={start} y1="0" y2="100%" {...lineProps} />
-        <Rectangle x1={start} x2={end} y1="0" y2="100%" {...rectangleProps} />
-        <Line x1={end} x2={end} y1="0" y2="100%" {...lineProps} />
+        <Line
+          xAxis={horizontalAxisId}
+          yAxis={verticalAxisId}
+          x1={start}
+          x2={start}
+          y1="0"
+          y2="100%"
+          {...lineProps}
+        />
+        <Rectangle
+          xAxis={horizontalAxisId}
+          yAxis={verticalAxisId}
+          x1={start}
+          x2={end}
+          y1="0"
+          y2="100%"
+          {...rectangleProps}
+        />
+        <Line
+          xAxis={horizontalAxisId}
+          yAxis={verticalAxisId}
+          x1={end}
+          x2={end}
+          y1="0"
+          y2="100%"
+          {...lineProps}
+        />
       </>
     );
   } else {
     annotations = (
       <>
-        <Line x1="0" x2="100%" y1={start} y2={start} {...lineProps} />
-        <Rectangle x1="0" x2="100%" y1={start} y2={end} {...rectangleProps} />
-        <Line x1="0" x2="100%" y1={end} y2={end} {...lineProps} />
+        <Line
+          xAxis={horizontalAxisId}
+          yAxis={verticalAxisId}
+          x1="0"
+          x2="100%"
+          y1={start}
+          y2={start}
+          {...lineProps}
+        />
+        <Rectangle
+          xAxis={horizontalAxisId}
+          yAxis={verticalAxisId}
+          x1="0"
+          x2="100%"
+          y1={start}
+          y2={end}
+          {...rectangleProps}
+        />
+        <Line
+          xAxis={horizontalAxisId}
+          yAxis={verticalAxisId}
+          x1="0"
+          x2="100%"
+          y1={end}
+          y2={end}
+          {...lineProps}
+        />
       </>
     );
   }

diff --git a/src/hooks/useCrossHair.tsx b/src/hooks/useCrossHair.tsx
@@ -67,20 +67,26 @@ export function useCrossHair(options: UseCrossHairOptions = {}) {
   const annotations = (
     <>
       <Line
+        xAxis={horizontalAxisId}
+        yAxis={verticalAxisId}
         x1="0%"
         x2="100%"
         y1={hover[verticalAxisId]}
         y2={hover[verticalAxisId]}
         {...lineProps}
       />
       <Line
+        xAxis={horizontalAxisId}
+        yAxis={verticalAxisId}
         y1="0%"
         y2="100%"
         x1={hover[horizontalAxisId]}
         x2={hover[horizontalAxisId]}
         {...lineProps}
       />
       <Text
+        xAxis={horizontalAxisId}
+        yAxis={verticalAxisId}
         text-anchor="end"
         alignment-baseline="after-edge"
         x={hover[horizontalAxisId]}

diff --git a/src/hooks/useDrawPath.tsx b/src/hooks/useDrawPath.tsx
@@ -81,9 +81,21 @@ export function useDrawPath(options: UseDrawPathOptions = {}) {
     annotations:
       data !== null ? (
         close ? (
-          <Polygon color={color} style={style} points={points} />
+          <Polygon
+            xAxis={horizontalAxisId}
+            yAxis={verticalAxisId}
+            color={color}
+            style={style}
+            points={points}
+          />
         ) : (
-          <Polyline color={color} style={style} points={points} />
+          <Polyline
+            xAxis={horizontalAxisId}
+            yAxis={verticalAxisId}
+            color={color}
+            style={style}
+            points={points}
+          />
         )
       ) : null,
   };

diff --git a/src/hooks/useDrawRectangle.tsx b/src/hooks/useDrawRectangle.tsx
@@ -51,6 +51,8 @@ export function useDrawRectangle(options: UseDrawRectangleOptions = {}) {
   return {
     annotations: startMoveEnd?.end ? (
       <Rectangle
+        xAxis={horizontalAxisId}
+        yAxis={verticalAxisId}
         color={color}
         style={{ fillOpacity: 0.2, stroke: color, ...style }}
         x1={startMoveEnd.start.clampedCoordinates[horizontalAxisId]}