fix: change panning cursor to col-resize (#2071)

* change panning cursor to col-resize

* revert to grabby, and support grabbing
This commit is contained in:
Justin Domingue 2021-07-16 10:49:27 -07:00 committed by GitHub
parent a00432c1c3
commit 6004c4be3e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 2 deletions

@ -5,7 +5,7 @@ import { AxisBottom } from './AxisBottom'
import { Brush } from './Brush' import { Brush } from './Brush'
import { Line } from './Line' import { Line } from './Line'
import { ChartEntry, LiquidityChartRangeInputProps } from './types' import { ChartEntry, LiquidityChartRangeInputProps } from './types'
import Zoom from './Zoom' import Zoom, { ZoomOverlay } from './Zoom'
export const xAccessor = (d: ChartEntry) => d.price0 export const xAccessor = (d: ChartEntry) => d.price0
export const yAccessor = (d: ChartEntry) => d.activeLiquidity export const yAccessor = (d: ChartEntry) => d.activeLiquidity
@ -117,7 +117,7 @@ export function Chart({
<AxisBottom xScale={xScale} innerHeight={innerHeight} /> <AxisBottom xScale={xScale} innerHeight={innerHeight} />
</g> </g>
<rect width={innerWidth} height={height} fill="transparent" ref={zoomRef} cursor="grab" /> <ZoomOverlay width={innerWidth} height={height} ref={zoomRef} />
<Brush <Brush
id={id} id={id}

@ -26,6 +26,15 @@ const Button = styled(ButtonGray)`
padding: 4px; padding: 4px;
` `
export const ZoomOverlay = styled.rect`
fill: transparent;
cursor: grab;
&:active {
cursor: grabbing;
}
`
export default function Zoom({ export default function Zoom({
svg, svg,
xScale, xScale,