Skip to content

Commit 0a7b459

Browse files
xzdarcyxzdarcy
committed
fix: 🐛 scroll sync error
1 parent 4234b90 commit 0a7b459

File tree

4 files changed

+8
-233
lines changed

4 files changed

+8
-233
lines changed

‎docs/editor-demo/editor-scroll-sync/mock.ts

Lines changed: 0 additions & 220 deletions
Original file line numberDiff line numberDiff line change
@@ -197,224 +197,4 @@ export const mockData: TimelineRow[] = [
197197
},
198198
],
199199
},
200-
{
201-
id: '15',
202-
actions: [
203-
{
204-
id: 'action150',
205-
start: 1,
206-
end: 2,
207-
effectId: 'effect1',
208-
},
209-
],
210-
},
211-
{
212-
id: '15',
213-
actions: [
214-
{
215-
id: 'action150',
216-
start: 1,
217-
end: 2,
218-
effectId: 'effect1',
219-
},
220-
],
221-
},
222-
{
223-
id: '15',
224-
actions: [
225-
{
226-
id: 'action150',
227-
start: 1,
228-
end: 2,
229-
effectId: 'effect1',
230-
},
231-
],
232-
},
233-
{
234-
id: '15',
235-
actions: [
236-
{
237-
id: 'action150',
238-
start: 1,
239-
end: 2,
240-
effectId: 'effect1',
241-
},
242-
],
243-
},
244-
{
245-
id: '15',
246-
actions: [
247-
{
248-
id: 'action150',
249-
start: 1,
250-
end: 2,
251-
effectId: 'effect1',
252-
},
253-
],
254-
},
255-
{
256-
id: '15',
257-
actions: [
258-
{
259-
id: 'action150',
260-
start: 1,
261-
end: 2,
262-
effectId: 'effect1',
263-
},
264-
],
265-
},
266-
{
267-
id: '15',
268-
actions: [
269-
{
270-
id: 'action150',
271-
start: 1,
272-
end: 2,
273-
effectId: 'effect1',
274-
},
275-
],
276-
},
277-
{
278-
id: '15',
279-
actions: [
280-
{
281-
id: 'action150',
282-
start: 1,
283-
end: 2,
284-
effectId: 'effect1',
285-
},
286-
],
287-
},
288-
{
289-
id: '15',
290-
actions: [
291-
{
292-
id: 'action150',
293-
start: 1,
294-
end: 2,
295-
effectId: 'effect1',
296-
},
297-
],
298-
},
299-
{
300-
id: '15',
301-
actions: [
302-
{
303-
id: 'action150',
304-
start: 1,
305-
end: 2,
306-
effectId: 'effect1',
307-
},
308-
],
309-
},
310-
{
311-
id: '15',
312-
actions: [
313-
{
314-
id: 'action150',
315-
start: 1,
316-
end: 2,
317-
effectId: 'effect1',
318-
},
319-
],
320-
},
321-
{
322-
id: '15',
323-
actions: [
324-
{
325-
id: 'action150',
326-
start: 1,
327-
end: 2,
328-
effectId: 'effect1',
329-
},
330-
],
331-
},
332-
{
333-
id: '15',
334-
actions: [
335-
{
336-
id: 'action150',
337-
start: 1,
338-
end: 2,
339-
effectId: 'effect1',
340-
},
341-
],
342-
},
343-
{
344-
id: '15',
345-
actions: [
346-
{
347-
id: 'action150',
348-
start: 1,
349-
end: 2,
350-
effectId: 'effect1',
351-
},
352-
],
353-
},
354-
{
355-
id: '15',
356-
actions: [
357-
{
358-
id: 'action150',
359-
start: 1,
360-
end: 2,
361-
effectId: 'effect1',
362-
},
363-
],
364-
},
365-
{
366-
id: '15',
367-
actions: [
368-
{
369-
id: 'action150',
370-
start: 1,
371-
end: 2,
372-
effectId: 'effect1',
373-
},
374-
],
375-
},
376-
{
377-
id: '15',
378-
actions: [
379-
{
380-
id: 'action150',
381-
start: 1,
382-
end: 2,
383-
effectId: 'effect1',
384-
},
385-
],
386-
},
387-
{
388-
id: '15',
389-
actions: [
390-
{
391-
id: 'action150',
392-
start: 1,
393-
end: 2,
394-
effectId: 'effect1',
395-
},
396-
],
397-
},
398-
{
399-
id: '15',
400-
actions: [
401-
{
402-
id: 'action150',
403-
start: 1,
404-
end: 2,
405-
effectId: 'effect1',
406-
},
407-
],
408-
},
409-
{
410-
id: '15',
411-
actions: [
412-
{
413-
id: 'action150',
414-
start: 1,
415-
end: 2,
416-
effectId: 'effect1',
417-
},
418-
],
419-
},
420200
];

‎src/components/edit_area/edit_action.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { FC, useEffect, useRef, useState } from 'react';
1+
import React, { FC, useLayoutEffect, useRef, useState } from 'react';
22
import { TimelineAction, TimelineRow } from '../../interface/action';
33
import { CommonProp } from '../../interface/common_prop';
44
import { DEFAULT_ADSORPTION_DISTANCE, DEFAULT_MOVE_GRID } from '../../interface/const';
@@ -74,7 +74,7 @@ export const EditAction: FC<EditActionProps> = ({
7474
return parserTimeToTransform({ start, end }, { startLeft, scale, scaleWidth });
7575
});
7676

77-
useEffect(() => {
77+
useLayoutEffect(() => {
7878
setTransform(parserTimeToTransform({ start, end }, { startLeft, scale, scaleWidth }));
7979
}, [end, start, startLeft, scaleWidth, scale]);
8080

‎src/components/edit_area/edit_area.tsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { FC, useEffect, useImperativeHandle, useRef, useState } from 'react';
1+
import React, { useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';
22
import { AutoSizer, Grid, GridCellRenderer, OnScrollParams } from 'react-virtualized';
33
import { TimelineRow } from '../../interface/action';
44
import { CommonProp } from '../../interface/common_prop';
@@ -25,7 +25,7 @@ export type EditAreaProps = CommonProp & {
2525

2626
/** edit area ref数据 */
2727
export interface EditAreaState {
28-
domRef: React.MutableRefObject<HTMLDivElement>
28+
domRef: React.MutableRefObject<HTMLDivElement>;
2929
}
3030

3131
export const EditArea = React.forwardRef<EditAreaState, EditAreaProps>((props, ref) => {
@@ -51,7 +51,6 @@ export const EditArea = React.forwardRef<EditAreaState, EditAreaProps>((props, r
5151
onActionResizing,
5252
} = props;
5353
const { dragLineData, initDragLine, updateDragLine, disposeDragLine, defaultGetAssistPosition, defaultGetMovePosition } = useDragLine();
54-
const [top, setTop] = useState(scrollTop);
5554
const editAreaRef = useRef<HTMLDivElement>();
5655
const gridRef = useRef<Grid>();
5756
const heightRef = useRef(-1);
@@ -60,7 +59,7 @@ export const EditArea = React.forwardRef<EditAreaState, EditAreaProps>((props, r
6059
useImperativeHandle(ref, () => ({
6160
get domRef() {
6261
return editAreaRef;
63-
}
62+
},
6463
}));
6564

6665
const handleInitDragLine: EditData['onActionMoveStart'] = (data) => {
@@ -145,9 +144,9 @@ export const EditArea = React.forwardRef<EditAreaState, EditAreaProps>((props, r
145144
);
146145
};
147146

148-
useEffect(() => {
149-
setTop(scrollTop);
150-
}, [scrollTop]);
147+
useLayoutEffect(() => {
148+
gridRef.current?.scrollToPosition({ scrollTop, scrollLeft });
149+
}, [scrollTop, scrollLeft]);
151150

152151
useEffect(() => {
153152
gridRef.current.recomputeGridSize();
@@ -189,10 +188,7 @@ export const EditArea = React.forwardRef<EditAreaState, EditAreaProps>((props, r
189188
rowHeight={({ index }) => heights[index] || rowHeight}
190189
overscanRowCount={10}
191190
overscanColumnCount={0}
192-
scrollLeft={scrollLeft}
193-
scrollTop={top}
194191
onScroll={(param) => {
195-
setTop(param.scrollTop);
196192
onScroll(param);
197193
}}
198194
/>

‎src/components/time_area/time_area.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,6 @@ export const TimeArea: FC<TimeAreaProps> = ({
8686
overscanColumnCount={10}
8787
cellRenderer={cellRenderer}
8888
scrollLeft={scrollLeft}
89-
onScroll={onScroll}
9089
></Grid>
9190
<div
9291
style={{ width, height }}

0 commit comments

Comments
 (0)