Skip to content

Commit dfa7504

Browse files
tannerlinsleytannerlinsley
committed
fix focusing
1 parent a7f9d26 commit dfa7504

File tree

3 files changed

+85
-90
lines changed

3 files changed

+85
-90
lines changed

‎src/components/Chart.tsx

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ function applyDefaults({
5050
getSeriesStyle = () => ({}),
5151
getDatumStyle = () => ({}),
5252
getSeriesOrder = (d) => d,
53-
onHover = () => {},
5453
grouping = groupingPrimary,
5554
focus = focusAuto,
5655
showVoronoi = false,
@@ -61,7 +60,6 @@ function applyDefaults({
6160
getSeriesStyle,
6261
getDatumStyle,
6362
getSeriesOrder,
64-
onHover,
6563
grouping,
6664
focus,
6765
showVoronoi,
@@ -96,7 +94,7 @@ export default function ChartState(options) {
9694
});
9795

9896
return {
99-
hovered: null,
97+
focused: null,
10098
element: null,
10199
axisDimensions: {},
102100
offset: {},
@@ -138,15 +136,14 @@ export function Chart(options) {
138136
getDatumStyle,
139137
onClick,
140138
onFocus,
141-
onHover,
142139
getSeriesOrder,
143140
defaultColors,
144141
...rest
145142
} = applyDefaults(options);
146143

147-
const [{ hovered, element, axisDimensions, pointer }] = useChartState(
144+
let [{ focused, element, axisDimensions, pointer }] = useChartState(
148145
(d) => ({
149-
hovered: d.hovered,
146+
focused: d.focused,
150147
element: d.element,
151148
axisDimensions: d.axisDimensions,
152149
pointer: d.pointer,
@@ -158,7 +155,6 @@ export function Chart(options) {
158155

159156
const getOnClick = useGetLatest(onClick);
160157
const getOnFocus = useGetLatest(onFocus);
161-
const getOnHover = useGetLatest(onHover);
162158

163159
let materializedData = useMaterializeData({ data });
164160

@@ -197,9 +193,9 @@ export function Chart(options) {
197193
defaultColors,
198194
});
199195

200-
const focused = React.useMemo(() => {
196+
const focusedElement = React.useMemo(() => {
201197
// Get the closest focus datum out of the datum group
202-
if (hovered || element) {
198+
if (focused || element) {
203199
let resolvedFocus = focus;
204200

205201
if (focus === focusAuto) {
@@ -213,11 +209,12 @@ export function Chart(options) {
213209
if (resolvedFocus === focusElement && element) {
214210
return element;
215211
} else if (resolvedFocus === focusClosest) {
216-
return getClosestPoint(pointer, hovered.group);
212+
return getClosestPoint(pointer, focused.group);
217213
}
218214
}
215+
219216
return null;
220-
}, [element, focus, hovered, pointer]);
217+
}, [element, focus, focused, pointer]);
221218

222219
// keep the previous focused value around for animations
223220
const latestFocused = useLatest(focused, focused);
@@ -254,6 +251,7 @@ export function Chart(options) {
254251

255252
const contextValue = {
256253
latestFocused,
254+
focusedElement,
257255
tooltip,
258256
width,
259257
height,
@@ -289,12 +287,6 @@ export function Chart(options) {
289287
}
290288
}, [focused, getOnFocus]);
291289

292-
React.useEffect(() => {
293-
if (getOnHover()) {
294-
getOnHover()(focused);
295-
}
296-
}, [focused, getOnHover]);
297-
298290
const previousDragging = usePrevious(pointer.dragging);
299291

300292
React.useEffect(() => {

‎src/components/ChartInner.tsx

Lines changed: 70 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
import React from 'react'
1+
import React from 'react';
22
//
3-
import Raf from '../utils/Raf'
4-
import { translate } from '../utils/Utils'
3+
import Raf from '../utils/Raf';
4+
import { translate } from '../utils/Utils';
55

6-
import useChartContext from '../hooks/useChartContext'
7-
import useChartState from '../hooks/useChartState'
8-
import useIsomorphicLayoutEffect from '../hooks/useIsomorphicLayoutEffect'
6+
import useChartContext from '../hooks/useChartContext';
7+
import useChartState from '../hooks/useChartState';
8+
import useIsomorphicLayoutEffect from '../hooks/useIsomorphicLayoutEffect';
99

10-
import Rectangle from '../primitives/Rectangle'
10+
import Rectangle from '../primitives/Rectangle';
1111

12-
import Voronoi from './Voronoi'
13-
import Axis from './Axis'
14-
import Tooltip from './Tooltip'
15-
import Cursor from './Cursor'
16-
import Brush from './Brush'
12+
import Voronoi from './Voronoi';
13+
import Axis from './Axis';
14+
import Tooltip from './Tooltip';
15+
import Cursor from './Cursor';
16+
import Brush from './Brush';
1717

1818
export default React.forwardRef(function ChartInner(
1919
{ className, style = {}, ...rest },
2020
ref
2121
) {
22-
const svgRef = React.useRef()
22+
const svgRef = React.useRef();
2323

2424
const {
2525
width,
@@ -33,73 +33,74 @@ export default React.forwardRef(function ChartInner(
3333
seriesOptions,
3434
getSeriesOrder,
3535
focused,
36+
focusedElement,
3637
getOnClick,
37-
} = useChartContext()
38+
} = useChartContext();
3839

39-
const [offset] = useChartState(d => d.offset)
40-
const [setOffset, setChartState] = useChartState(d => d.setOffset)
40+
const [offset] = useChartState((d) => d.offset);
41+
const [setOffset, setChartState] = useChartState((d) => d.setOffset);
4142

4243
useIsomorphicLayoutEffect(() => {
4344
if (!svgRef.current) {
44-
return
45+
return;
4546
}
4647

47-
const current = svgRef.current.getBoundingClientRect()
48+
const current = svgRef.current.getBoundingClientRect();
4849

4950
if (current.left !== offset.left || current.top !== offset.top) {
5051
setOffset({
5152
left: current.left,
5253
top: current.top,
53-
})
54+
});
5455
}
55-
})
56+
});
5657

57-
const onMouseLeave = e => {
58-
setChartState(old => ({ ...old, hovered: null }))
59-
setChartState(old => ({
58+
const onMouseLeave = (e) => {
59+
setChartState((old) => ({ ...old, focused: null }));
60+
setChartState((old) => ({
6061
...old,
6162
pointer: {
6263
...old.pointer,
6364
active: false,
6465
},
65-
}))
66-
}
66+
}));
67+
};
6768

68-
const rafRef = React.useRef()
69+
const rafRef = React.useRef();
6970

70-
const onMouseMove = e => {
71+
const onMouseMove = (e) => {
7172
if (rafRef.current) {
72-
Raf.cancel(rafRef.current)
73+
Raf.cancel(rafRef.current);
7374
}
7475
rafRef.current = Raf(() => {
75-
rafRef.current = null
76-
const { clientX, clientY } = e
76+
rafRef.current = null;
77+
const { clientX, clientY } = e;
7778

78-
setChartState(old => {
79-
const x = clientX - offset.left - gridX
80-
const y = clientY - offset.top - gridY
79+
setChartState((old) => {
80+
const x = clientX - offset.left - gridX;
81+
const y = clientY - offset.top - gridY;
8182

8283
const pointer = {
8384
...old.pointer,
8485
active: true,
8586
x,
8687
y,
8788
dragging: old.pointer?.down,
88-
}
89+
};
8990

9091
return {
9192
...old,
9293
pointer,
93-
}
94-
})
95-
})
96-
}
94+
};
95+
});
96+
});
97+
};
9798

9899
const onMouseUp = () => {
99-
document.removeEventListener('mouseup', onMouseUp)
100-
document.removeEventListener('mousemove', onMouseMove)
100+
document.removeEventListener('mouseup', onMouseUp);
101+
document.removeEventListener('mousemove', onMouseMove);
101102

102-
setChartState(old => {
103+
setChartState((old) => {
103104
return {
104105
...old,
105106
pointer: {
@@ -111,32 +112,32 @@ export default React.forwardRef(function ChartInner(
111112
y: old.pointer.y,
112113
},
113114
},
114-
}
115-
})
116-
}
115+
};
116+
});
117+
};
117118

118119
const onMouseDown = () => {
119-
document.addEventListener('mouseup', onMouseUp)
120-
document.addEventListener('mousemove', onMouseMove)
120+
document.addEventListener('mouseup', onMouseUp);
121+
document.addEventListener('mousemove', onMouseMove);
121122

122-
setChartState(old => ({
123+
setChartState((old) => ({
123124
...old,
124125
pointer: {
125126
...old.pointer,
126127
sourceX: old.pointer.x,
127128
sourceY: old.pointer.y,
128129
down: true,
129130
},
130-
}))
131-
}
131+
}));
132+
};
132133

133134
// Reverse the stack order for proper z-indexing
134-
const reversedStackData = [...stackData].reverse()
135-
const orderedStackData = getSeriesOrder(reversedStackData)
135+
const reversedStackData = [...stackData].reverse();
136+
const orderedStackData = getSeriesOrder(reversedStackData);
136137

137138
const focusedSeriesIndex = focused
138-
? orderedStackData.findIndex(series => series.id === focused.series.id)
139-
: -1
139+
? orderedStackData.findIndex((series) => series.id === focused.series.id)
140+
: -1;
140141

141142
// Bring focused series to the front
142143
const focusOrderedStackData = focused
@@ -145,28 +146,28 @@ export default React.forwardRef(function ChartInner(
145146
...orderedStackData.slice(focusedSeriesIndex + 1),
146147
orderedStackData[focusedSeriesIndex],
147148
]
148-
: orderedStackData
149+
: orderedStackData;
149150

150-
const stacks = focusOrderedStackData.map(stack => {
151+
const stacks = focusOrderedStackData.map((stack) => {
151152
return (
152153
<stack.Component
153154
key={stack.id}
154155
{...seriesOptions[stack.index]}
155156
series={stack}
156157
stackData={stackData}
157158
/>
158-
)
159-
})
159+
);
160+
});
160161

161162
useIsomorphicLayoutEffect(() => {
162163
if (
163164
ref.current &&
164165
ref.current.parentElement &&
165166
!ref.current.parentElement.style.position
166167
) {
167-
ref.current.parentElement.style.position = 'relative'
168+
ref.current.parentElement.style.position = 'relative';
168169
}
169-
})
170+
});
170171

171172
return (
172173
<div
@@ -179,7 +180,9 @@ export default React.forwardRef(function ChartInner(
179180
position: 'absolute',
180181
...style,
181182
}}
182-
onClick={getOnClick() ? e => getOnClick()(focused, e) : undefined}
183+
onClick={
184+
getOnClick() ? (e) => getOnClick()(focusedElement, e) : undefined
185+
}
183186
>
184187
<svg
185188
ref={svgRef}
@@ -188,10 +191,10 @@ export default React.forwardRef(function ChartInner(
188191
height,
189192
overflow: 'hidden',
190193
}}
191-
onMouseEnter={e => e.persist() || onMouseMove(e)}
192-
onMouseMove={e => e.persist() || onMouseMove(e)}
193-
onMouseLeave={e => e.persist() || onMouseLeave(e)}
194-
onMouseDown={e => e.persist() || onMouseDown(e)}
194+
onMouseEnter={(e) => e.persist() || onMouseMove(e)}
195+
onMouseMove={(e) => e.persist() || onMouseMove(e)}
196+
onMouseLeave={(e) => e.persist() || onMouseLeave(e)}
197+
onMouseDown={(e) => e.persist() || onMouseDown(e)}
195198
>
196199
{width && height ? (
197200
<>
@@ -212,7 +215,7 @@ export default React.forwardRef(function ChartInner(
212215
/>
213216
<Voronoi />
214217
<g className="axes">
215-
{[...primaryAxes, ...secondaryAxes].map(axis => (
218+
{[...primaryAxes, ...secondaryAxes].map((axis) => (
216219
<Axis key={axis.id} {...axis} />
217220
))}
218221
</g>
@@ -234,5 +237,5 @@ export default React.forwardRef(function ChartInner(
234237
<Brush />
235238
<Tooltip />
236239
</div>
237-
)
238-
})
240+
);
241+
});

0 commit comments

Comments
 (0)