feat: ✨ on cursor drag

Author: xzdarcy

src/components/cursor/cursor.tsx

@@ -34,12 +34,20 @@ export const Cursor: FC<CursorProps> = ({
   areaRef,
   deltaScrollLeft,
   onCursorDragStart,
+  onCursorDrag,
   onCursorDragEnd,
 }) => {
   const rowRnd = useRef<RowRndApi>();
-  const [draggingLeft, setDraggingLeft] = useState<undefined | number>();
+  const draggingLeft = useRef<undefined | number>();
   const [width, setWidth] = useState(Number.MAX_SAFE_INTEGER);
 
+  useEffect(() => {
+    if (typeof draggingLeft.current === 'undefined') {
+      // 非dragging时，根据穿参更新cursor刻度
+      rowRnd.current.updateLeft(parserTimeToPixel(cursorTime, { startLeft, scaleWidth, scale }) - scrollLeft);
+    }
+  }, [cursorTime, startLeft, scaleWidth, scale]);
+
   useEffect(() => {
     if (areaRef.current) {
       const resizeObserver = new ResizeObserver(() => {
@@ -56,8 +64,6 @@ export const Cursor: FC<CursorProps> = ({
     <RowDnd
       start={startLeft}
       ref={rowRnd}
-      // dragging时，单向同步数据
-      left={typeof draggingLeft === 'number' ? draggingLeft : parserTimeToPixel(cursorTime, { startLeft, scaleWidth, scale }) - scrollLeft}
       parentRef={areaRef}
       bounds={{
         left: 0,
@@ -77,28 +83,32 @@ export const Cursor: FC<CursorProps> = ({
       enableResizing={false}
       onDragStart={() => {
         onCursorDragStart && onCursorDragStart(cursorTime);
-        setDraggingLeft(parserTimeToPixel(cursorTime, { startLeft, scaleWidth, scale }) - scrollLeft);
+        draggingLeft.current = parserTimeToPixel(cursorTime, { startLeft, scaleWidth, scale }) - scrollLeft;
+        rowRnd.current.updateLeft(draggingLeft.current);
       }}
       onDragEnd={() => {
-        setCursor({ left: draggingLeft + scrollLeft });
-        setDraggingLeft(undefined);
-        onCursorDragEnd && onCursorDragEnd(parserPixelToTime(draggingLeft + scrollLeft, { startLeft, scale, scaleWidth }));
+        const time = parserPixelToTime(draggingLeft.current + scrollLeft, { startLeft, scale, scaleWidth });
+        setCursor({ time });
+        onCursorDragEnd && onCursorDragEnd(time);
+        draggingLeft.current = undefined;
       }}
       onDrag={({ left }, scroll = 0) => {
         const scrollLeft = scrollSync.current.state.scrollLeft;
 
         if (!scroll || scrollLeft === 0) {
           // 拖拽时，如果当前left < left min，将数值设置为 left min
-          if (left < startLeft - scrollLeft) setDraggingLeft(startLeft - scrollLeft);
-          else setDraggingLeft(left);
+          if (left < startLeft - scrollLeft) draggingLeft.current = startLeft - scrollLeft;
+          else draggingLeft.current = left;
         } else {
           // 自动滚动时，如果当前left < left min，将数值设置为 left min
-          if (draggingLeft < startLeft - scrollLeft - scroll) {
-            setDraggingLeft(startLeft - scrollLeft - scroll);
+          if (draggingLeft.current < startLeft - scrollLeft - scroll) {
+            draggingLeft.current = startLeft - scrollLeft - scroll;
           }
         }
-
-        setCursor({ left: draggingLeft + scrollLeft });
+        rowRnd.current.updateLeft(draggingLeft.current);
+        const time = parserPixelToTime(draggingLeft.current + scrollLeft, { startLeft, scale, scaleWidth });
+        setCursor({ time });
+        onCursorDrag && onCursorDrag(time);
         return false;
       }}
     >

src/components/row_rnd/row_rnd.tsx

@@ -48,8 +48,8 @@ export const RowDnd = React.forwardRef<RowRndApi, RowRndProps>(
 
     //#region [rgba(100,120,156,0.08)] 赋值相关api
     useImperativeHandle(ref, () => ({
-      updateLeft: handleUpdateLeft,
-      updateWidth: handleUpdateWidth,
+      updateLeft: (left) => handleUpdateLeft(left || 0, false),
+      updateWidth: (width) => handleUpdateWidth(width, false),
       getLeft: handleGetLeft,
       getWidth: handleGetWidth,
     }));

src/components/timeline.tsx

@@ -79,8 +79,11 @@ export const Timeline = React.forwardRef<TimelineState, TimelineEditor>((props,
   const handleSetCursor = (param: { left?: number; time?: number; updateTime?: boolean }) => {
     let { left, time, updateTime = true } = param;
     if (typeof left === 'undefined' && typeof time === 'undefined') return;
-    if (typeof left === 'undefined') left = parserTimeToPixel(time, { startLeft, scale, scaleWidth });
-    if (typeof time === 'undefined') time = parserPixelToTime(left, { startLeft, scale, scaleWidth });
+
+    if (typeof time === 'undefined') {
+      if (typeof left === 'undefined') left = parserTimeToPixel(time, { startLeft, scale, scaleWidth });
+      time = parserPixelToTime(left, { startLeft, scale, scaleWidth });
+    }
 
     let result = true;
     if (updateTime) {

src/interface/timeline.ts

@@ -184,6 +184,10 @@ export interface EditData {
    * @description cursor结束拖拽事件
    */
   onCursorDragEnd?: (time: number) => void;
+  /**
+   * @description cursor拖拽事件
+   */
+  onCursorDrag?: (time: number) => void;
 }
 
 export interface TimelineState {