diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/RubberBand.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/RubberBand.tsx index cb4fe7ff1c..4bb097a3d1 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/RubberBand.tsx +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/RubberBand.tsx @@ -80,11 +80,6 @@ const VerticalGuide = observer( }, ) -interface Coord { - left: number - top: number -} - function RubberBand({ model, ControlComponent =
, @@ -94,7 +89,14 @@ function RubberBand({ }) { const [startX, setStartX] = useState() const [currentX, setCurrentX] = useState() - const [anchorPosition, setAnchorPosition] = useState() + + // clientX and clientY used for anchorPosition for menu + // offsetX used for calculations about width of selection + const [anchorPosition, setAnchorPosition] = useState<{ + offsetX: number + clientX: number + clientY: number + }>() const [guideX, setGuideX] = useState() const controlsRef = useRef(null) const rubberBandRef = useRef(null) @@ -112,9 +114,16 @@ function RubberBand({ function globalMouseUp(event: MouseEvent) { if (startX !== undefined && controlsRef.current) { - const left = - event.clientX - controlsRef.current.getBoundingClientRect().left - setAnchorPosition({ left, top: event.clientY }) + const { clientX, clientY } = event + const ref = controlsRef.current + const offsetX = clientX - ref.getBoundingClientRect().left + // as stated above, store both clientX/Y and offsetX for different + // purposes + setAnchorPosition({ + offsetX, + clientX, + clientY, + }) setGuideX(undefined) } } @@ -165,7 +174,7 @@ function RubberBand({ return } let leftPx = startX - let rightPx = anchorPosition.left + let rightPx = anchorPosition.offsetX if (rightPx < leftPx) { ;[leftPx, rightPx] = [rightPx, leftPx] } @@ -179,7 +188,7 @@ function RubberBand({ return } let leftPx = startX - let rightPx = anchorPosition.left + let rightPx = anchorPosition.offsetX // handles clicking and draging to the left if (rightPx < leftPx) { ;[leftPx, rightPx] = [rightPx, leftPx] @@ -247,7 +256,7 @@ function RubberBand({ } /* Calculating Pixels for Mouse Dragging */ - const right = anchorPosition ? anchorPosition.left : currentX || 0 + const right = anchorPosition ? anchorPosition.offsetX : currentX || 0 const left = right < startX ? right : startX const width = Math.abs(right - startX) const leftBpOffset = model.pxToBp(left) @@ -322,7 +331,10 @@ function RubberBand({ {anchorPosition ? (