diff --git a/packages/visx-annotation/src/components/EditableAnnotation.tsx b/packages/visx-annotation/src/components/EditableAnnotation.tsx index f15cc2e852..ec23c5a783 100644 --- a/packages/visx-annotation/src/components/EditableAnnotation.tsx +++ b/packages/visx-annotation/src/components/EditableAnnotation.tsx @@ -25,6 +25,13 @@ export type EditableAnnotationProps = Pick void; /** Callback invoked on drag end. */ onDragEnd?: ({ x, y, dx, dy, event }: HandlerArgs) => void; + /** Optional x/y desired bounds for subject/label. */ + restrict?: { + xMin?: number; + xMax?: number; + yMin?: number; + yMax?: number; + }; }; export type HandlerArgs = { @@ -58,6 +65,7 @@ export default function EditableAnnotation({ width, x: subjectX = 0, y: subjectY = 0, + restrict, }: EditableAnnotationProps) { // chicken before the egg, we need these to reference drag state // in drag callbacks which are defined before useDrag() state is available @@ -115,6 +123,7 @@ export default function EditableAnnotation({ onDragEnd: handleDragEnd, x: subjectX, y: subjectY, + restrict: restrict, }); const labelDrag = useDrag({ @@ -123,6 +132,7 @@ export default function EditableAnnotation({ onDragEnd: handleDragEnd, x: labelDx, y: labelDy, + restrict: restrict, }); // enable referencing these in the callbacks defined before useDrag is called