Skip to content

Commit

Permalink
fix: 🐛 scroll sync error
Browse files Browse the repository at this point in the history
  • Loading branch information
@xzdarcy
xzdarcy committed Jan 4, 2023
1 parent 4234b90 commit 0a7b459
Show file tree
Hide file tree
Showing 4 changed files with 8 additions and 233 deletions.
220 changes: 0 additions & 220 deletions docs/editor-demo/editor-scroll-sync/mock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,224 +197,4 @@ export const mockData: TimelineRow[] = [
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
{
id: '15',
actions: [
{
id: 'action150',
start: 1,
end: 2,
effectId: 'effect1',
},
],
},
];
4 changes: 2 additions & 2 deletions src/components/edit_area/edit_action.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { FC, useEffect, useRef, useState } from 'react';
import React, { FC, useLayoutEffect, useRef, useState } from 'react';
import { TimelineAction, TimelineRow } from '../../interface/action';
import { CommonProp } from '../../interface/common_prop';
import { DEFAULT_ADSORPTION_DISTANCE, DEFAULT_MOVE_GRID } from '../../interface/const';
Expand Down Expand Up @@ -74,7 +74,7 @@ export const EditAction: FC<EditActionProps> = ({
return parserTimeToTransform({ start, end }, { startLeft, scale, scaleWidth });
});

useEffect(() => {
useLayoutEffect(() => {
setTransform(parserTimeToTransform({ start, end }, { startLeft, scale, scaleWidth }));
}, [end, start, startLeft, scaleWidth, scale]);

Expand Down
16 changes: 6 additions & 10 deletions src/components/edit_area/edit_area.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { FC, useEffect, useImperativeHandle, useRef, useState } from 'react';
import React, { useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';
import { AutoSizer, Grid, GridCellRenderer, OnScrollParams } from 'react-virtualized';
import { TimelineRow } from '../../interface/action';
import { CommonProp } from '../../interface/common_prop';
Expand All @@ -25,7 +25,7 @@ export type EditAreaProps = CommonProp & {

/** edit area ref数据 */
export interface EditAreaState {
domRef: React.MutableRefObject<HTMLDivElement>
domRef: React.MutableRefObject<HTMLDivElement>;
}

export const EditArea = React.forwardRef<EditAreaState, EditAreaProps>((props, ref) => {
Expand All @@ -51,7 +51,6 @@ export const EditArea = React.forwardRef<EditAreaState, EditAreaProps>((props, r
onActionResizing,
} = props;
const { dragLineData, initDragLine, updateDragLine, disposeDragLine, defaultGetAssistPosition, defaultGetMovePosition } = useDragLine();
const [top, setTop] = useState(scrollTop);
const editAreaRef = useRef<HTMLDivElement>();
const gridRef = useRef<Grid>();
const heightRef = useRef(-1);
Expand All @@ -60,7 +59,7 @@ export const EditArea = React.forwardRef<EditAreaState, EditAreaProps>((props, r
useImperativeHandle(ref, () => ({
get domRef() {
return editAreaRef;
}
},
}));

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

useEffect(() => {
setTop(scrollTop);
}, [scrollTop]);
useLayoutEffect(() => {
gridRef.current?.scrollToPosition({ scrollTop, scrollLeft });
}, [scrollTop, scrollLeft]);

useEffect(() => {
gridRef.current.recomputeGridSize();
Expand Down Expand Up @@ -189,10 +188,7 @@ export const EditArea = React.forwardRef<EditAreaState, EditAreaProps>((props, r
rowHeight={({ index }) => heights[index] || rowHeight}
overscanRowCount={10}
overscanColumnCount={0}
scrollLeft={scrollLeft}
scrollTop={top}
onScroll={(param) => {
setTop(param.scrollTop);
onScroll(param);
}}
/>
Expand Down
1 change: 0 additions & 1 deletion src/components/time_area/time_area.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,6 @@ export const TimeArea: FC<TimeAreaProps> = ({
overscanColumnCount={10}
cellRenderer={cellRenderer}
scrollLeft={scrollLeft}
onScroll={onScroll}
></Grid>
<div
style={{ width, height }}
Expand Down

0 comments on commit 0a7b459

Please sign in to comment.