feat: ✨ max scale count

xzdarcy · xzdarcy · commit 1012b8cfb055 · 2023-02-20T00:30:21.000+08:00
diff --git a/src/components/cursor/cursor.tsx b/src/components/cursor/cursor.tsx
@@ -26,7 +26,7 @@ export const Cursor: FC<CursorProps> = ({
   cursorTime,
   setCursor,
   startLeft,
-  scaleCount,
+  timelineWidth,
   scaleWidth,
   scale,
   scrollLeft,
@@ -39,7 +39,6 @@ export const Cursor: FC<CursorProps> = ({
 }) => {
   const rowRnd = useRef<RowRndApi>();
   const draggingLeft = useRef<undefined | number>();
-  const [width, setWidth] = useState(Number.MAX_SAFE_INTEGER);
 
   useEffect(() => {
     if (typeof draggingLeft.current === 'undefined') {
@@ -48,38 +47,16 @@ export const Cursor: FC<CursorProps> = ({
     }
   }, [cursorTime, startLeft, scaleWidth, scale, scrollLeft]);
 
-  useEffect(() => {
-    if (areaRef.current) {
-      const resizeObserver = new ResizeObserver(() => {
-        if(!areaRef.current) return;
-        setWidth(areaRef.current.getBoundingClientRect().width);
-      });
-      resizeObserver.observe(areaRef.current!);
-      return () => {
-        resizeObserver && resizeObserver.disconnect();
-      };
-    }
-  }, []);
-
   return (
     <RowDnd
       start={startLeft}
       ref={rowRnd}
       parentRef={areaRef}
       bounds={{
         left: 0,
-        right: width,
+        right: timelineWidth,
       }}
-      deltaScrollLeft={
-        deltaScrollLeft
-          ? (delta) => {
-              // 当超过最大距离时，禁止滚动
-              const data = scrollSync.current.state.scrollLeft + delta;
-              if (data > scaleCount * (scaleWidth - 1) + startLeft - width) return;
-              deltaScrollLeft(delta);
-            }
-          : undefined
-      }
+      deltaScrollLeft={deltaScrollLeft}
       enableDragging={!disableDrag}
       enableResizing={false}
       onDragStart={() => {
diff --git a/src/components/edit_area/edit_action.tsx b/src/components/edit_area/edit_action.tsx
@@ -34,6 +34,7 @@ export const EditAction: FC<EditActionProps> = ({
   disableDrag,
 
   scaleCount,
+  maxScaleCount,
   setScaleCount,
   onActionMoveStart,
   onActionMoving,
@@ -63,11 +64,14 @@ export const EditAction: FC<EditActionProps> = ({
     scale,
     scaleWidth,
   });
-  const rightLimit = parserTimeToPixel(maxEnd || Number.MAX_VALUE, {
-    startLeft,
-    scale,
-    scaleWidth,
-  });
+  const rightLimit = Math.min(
+    maxScaleCount * scaleWidth + startLeft, // 根据maxScaleCount限制移动范围
+    parserTimeToPixel(maxEnd || Number.MAX_VALUE, {
+      startLeft,
+      scale,
+      scaleWidth,
+    }),
+  );
 
   // 初始化动作坐标数据
   const [transform, setTransform] = useState(() => {
diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx
@@ -24,6 +24,7 @@ export const Timeline = React.forwardRef<TimelineState, TimelineEditor>((props,
     scaleWidth,
     startLeft,
     minScaleCount,
+    maxScaleCount,
     onChange,
     autoReRender = true,
     onScroll: onScrollVertical,
@@ -42,12 +43,14 @@ export const Timeline = React.forwardRef<TimelineState, TimelineEditor>((props,
   const [cursorTime, setCursorTime] = useState(START_CURSOR_TIME);
   // 是否正在运行
   const [isPlaying, setIsPlaying] = useState(false);
+  // 当前时间轴宽度
+  const [width, setWidth] = useState(Number.MAX_SAFE_INTEGER);
 
   /** 监听数据变化 */
   useLayoutEffect(() => {
-    setScaleCount(Math.max(minScaleCount, getScaleCountByRows(data, { scale })));
+    handleSetScaleCount(getScaleCountByRows(data, { scale }));
     setEditorData(data);
-  }, [data, minScaleCount, scale]);
+  }, [data, minScaleCount, maxScaleCount, scale]);
 
   useEffect(() => {
     engineRef.current.effects = effects;
@@ -66,6 +69,12 @@ export const Timeline = React.forwardRef<TimelineState, TimelineEditor>((props,
     scrollSync.current && scrollSync.current.setState({ scrollTop: scrollTop });
   }, [scrollTop]);
 
+  /** 动态设置scale count */
+  const handleSetScaleCount = (value: number) => {
+    const data = Math.min(maxScaleCount, Math.max(minScaleCount, value));
+    setScaleCount(data);
+  };
+
   /** 处理主动数据变化 */
   const handleEditorDataChange = (editorData: TimelineRow[]) => {
     const result = onChange(editorData);
@@ -96,6 +105,9 @@ export const Timeline = React.forwardRef<TimelineState, TimelineEditor>((props,
 
   /** 设置scrollLeft */
   const handleDeltaScrollLeft = (delta: number) => {
+    // 当超过最大距离时，禁止自动滚动
+    const data = scrollSync.current.state.scrollLeft + delta;
+    if (data > scaleCount * (scaleWidth - 1) + startLeft - width) return;
     scrollSync.current && scrollSync.current.setState({ scrollLeft: Math.max(scrollSync.current.state.scrollLeft + delta, 0) });
   };
 
@@ -140,30 +152,46 @@ export const Timeline = React.forwardRef<TimelineState, TimelineEditor>((props,
     },
   }));
 
+  // 监听timeline区域宽度变化
+  useEffect(() => {
+    if (areaRef.current) {
+      const resizeObserver = new ResizeObserver(() => {
+        if (!areaRef.current) return;
+        setWidth(areaRef.current.getBoundingClientRect().width);
+      });
+      resizeObserver.observe(areaRef.current!);
+      return () => {
+        resizeObserver && resizeObserver.disconnect();
+      };
+    }
+  }, []);
+
   return (
     <div ref={domRef} style={style} className={`${PREFIX} ${disableDrag ? PREFIX + '-disable' : ''}`}>
       <ScrollSync ref={scrollSync}>
         {({ scrollLeft, scrollTop, onScroll }) => (
           <>
             <TimeArea
               {...checkedProps}
+              timelineWidth={width}
               disableDrag={disableDrag || isPlaying}
               setCursor={handleSetCursor}
               cursorTime={cursorTime}
               editorData={editorData}
               scaleCount={scaleCount}
-              setScaleCount={setScaleCount}
+              setScaleCount={handleSetScaleCount}
               onScroll={onScroll}
               scrollLeft={scrollLeft}
             />
             <EditArea
               {...checkedProps}
+              timelineWidth={width}
               ref={(ref) => ((areaRef.current as any) = ref?.domRef.current)}
               disableDrag={disableDrag || isPlaying}
               editorData={editorData}
               cursorTime={cursorTime}
               scaleCount={scaleCount}
-              setScaleCount={setScaleCount}
+              setScaleCount={handleSetScaleCount}
               scrollTop={scrollTop}
               scrollLeft={scrollLeft}
               setEditorData={handleEditorDataChange}
@@ -176,10 +204,11 @@ export const Timeline = React.forwardRef<TimelineState, TimelineEditor>((props,
             {!hideCursor && (
               <Cursor
                 {...checkedProps}
+                timelineWidth={width}
                 disableDrag={isPlaying}
                 scrollLeft={scrollLeft}
                 scaleCount={scaleCount}
-                setScaleCount={setScaleCount}
+                setScaleCount={handleSetScaleCount}
                 setCursor={handleSetCursor}
                 cursorTime={cursorTime}
                 editorData={editorData}
diff --git a/src/interface/common_prop.ts b/src/interface/common_prop.ts
@@ -8,4 +8,6 @@ export interface CommonProp extends EditData {
   setScaleCount: (scaleCount: number) => void;
   /** 光标时间 */
   cursorTime: number;
+  /** 当前时间轴宽度 */
+  timelineWidth: number;
 }
diff --git a/src/interface/timeline.ts b/src/interface/timeline.ts
@@ -26,6 +26,11 @@ export interface EditData {
    * @default 20
    */
   minScaleCount?: number;
+  /**
+   * @description 最大刻度个数（>=minScaleCount）
+   * @default Infinity
+   */
+  maxScaleCount?: number;
   /**
    * @description 单个刻度细分单元数（>0整数）
    * @default 10
diff --git a/src/utils/check_props.ts b/src/utils/check_props.ts
@@ -13,6 +13,7 @@ export function checkProps(props: TimelineEditor): TimelineEditor {
     scaleWidth = DEFAULT_SCALE_WIDTH,
     startLeft = DEFAULT_START_LEFT,
     minScaleCount = MIN_SCALE_COUNT,
+    maxScaleCount = Infinity,
     rowHeight = DEFAULT_ROW_HEIGHT,
   } = props;
 
@@ -42,11 +43,17 @@ export function checkProps(props: TimelineEditor): TimelineEditor {
   }
 
   if(minScaleCount < 1) {
-    logger.warn('Warning: rowHeight must be greater than 0!')
+    logger.warn('Warning: minScaleCount must be greater than 1!')
     minScaleCount = MIN_SCALE_COUNT
   }
   minScaleCount = parseInt(minScaleCount + '');
 
+  if(maxScaleCount < minScaleCount) {
+    logger.warn('Warning: maxScaleCount cannot be less than minScaleCount!')
+    maxScaleCount = minScaleCount
+  }
+  maxScaleCount = maxScaleCount === Infinity ? Infinity : parseInt(maxScaleCount + '');
+
   if(rowHeight <= 0) {
     logger.warn('Warning: rowHeight must be greater than 0!')
     rowHeight = DEFAULT_ROW_HEIGHT
@@ -64,6 +71,7 @@ export function checkProps(props: TimelineEditor): TimelineEditor {
     scaleWidth,
     startLeft,
     minScaleCount,
+    maxScaleCount,
     rowHeight,
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -8,4 +8,6 @@ export interface CommonProp extends EditData {`
`8`	`8`	`setScaleCount: (scaleCount: number) => void;`
`9`	`9`	`/** 光标时间 */`
`10`	`10`	`cursorTime: number;`
	`11`	`+ /** 当前时间轴宽度 */`
	`12`	`+ timelineWidth: number;`
`11`	`13`	`}`