@keplar-404/react-timeline-editor 1.0.6

package/src/components/row_rnd/row_rnd.tsx

@@ -0,0 +1,365 @@
+import { Interactable } from '@interactjs/core/Interactable';
+import { DragEvent, ResizeEvent } from '@interactjs/types/index';
+import React, { ReactElement, useEffect, useImperativeHandle, useRef } from 'react';
+import { DEFAULT_ADSORPTION_DISTANCE, DEFAULT_MOVE_GRID, DEFAULT_START_LEFT } from '../../interface/const';
+import { useAutoScroll } from './hooks/useAutoScroll';
+import { InteractComp } from './interactable';
+import { Direction, RowRndApi, RowRndProps } from './row_rnd_interface';
+
+export const RowDnd = React.forwardRef<RowRndApi, RowRndProps>(
+  (
+    {
+      children,
+      edges,
+      left,
+      width,
+
+      start = DEFAULT_START_LEFT,
+      grid = DEFAULT_MOVE_GRID,
+      bounds = {
+        left: Number.MIN_SAFE_INTEGER,
+        right: Number.MAX_SAFE_INTEGER,
+      },
+      enableResizing = true,
+      enableDragging = true,
+      adsorptionDistance = DEFAULT_ADSORPTION_DISTANCE,
+      adsorptionPositions = [],
+      onResizeStart,
+      onResize,
+      onResizeEnd,
+      onDragStart,
+      onDragEnd,
+      onDrag,
+      parentRef,
+      deltaScrollLeft,
+    },
+    ref,
+  ) => {
+    const interactable = useRef<Interactable | null>(null);
+    const deltaX = useRef(0);
+    const isAdsorption = useRef(false);
+    const { initAutoScroll, dealDragAutoScroll, dealResizeAutoScroll, stopAutoScroll } = useAutoScroll(parentRef);
+
+    useEffect(() => {
+      return () => {
+        interactable.current && interactable.current.unset();
+      };
+    }, []);
+
+    //#region [rgba(100,120,156,0.08)] Assignment related APIs
+    useImperativeHandle(ref, () => ({
+      updateLeft: (left) => handleUpdateLeft(left || 0, false),
+      updateWidth: (width) => handleUpdateWidth(width, false),
+      getLeft: handleGetLeft,
+      getWidth: handleGetWidth,
+    }));
+    useEffect(() => {
+      const target = interactable.current?.target as HTMLElement;
+      handleUpdateWidth(typeof width === 'undefined' ? target.offsetWidth : width, false);
+    }, [width]);
+    useEffect(() => {
+      handleUpdateLeft(left || 0, false);
+    }, [left]);
+
+    const handleUpdateLeft = (left: number, reset = true) => {
+      if (!interactable.current || !interactable.current.target) return;
+      reset && (deltaX.current = 0);
+      const target = interactable.current.target as HTMLElement;
+      target.style.left = `${left}px`;
+      Object.assign(target.dataset, { left });
+    };
+    const handleUpdateWidth = (width: number, reset = true) => {
+      if (!interactable.current || !interactable.current.target) return;
+      reset && (deltaX.current = 0);
+      const target = interactable.current.target as HTMLElement;
+      target.style.width = `${width}px`;
+      Object.assign(target.dataset, { width });
+    };
+    const handleGetLeft = () => {
+      const target = interactable.current?.target as HTMLElement;
+      return parseFloat(target?.dataset?.left || '0');
+    };
+    const handleGetWidth = () => {
+      const target = interactable.current?.target as HTMLElement;
+      return parseFloat(target?.dataset?.width || '0');
+    };
+    //#endregion
+
+    //#region [rgba(188,188,120,0.05)] Callback APIs
+    const handleMoveStart = (e: DragEvent) => {
+      deltaX.current = 0;
+      isAdsorption.current = false;
+      initAutoScroll();
+      onDragStart && onDragStart();
+    };
+
+    const move = (param: { preLeft: number; preWidth: number; scrollDelta?: number }) => {
+      const { preLeft, preWidth, scrollDelta } = param;
+      const distance = isAdsorption.current ? adsorptionDistance : grid;
+      if (Math.abs(deltaX.current) >= distance) {
+        const count = parseInt(deltaX.current / distance + '');
+        let curLeft = preLeft + count * distance;
+
+        // Control adsorption
+        let adsorption = curLeft;
+        let minDis = Number.MAX_SAFE_INTEGER;
+        adsorptionPositions.forEach((item) => {
+          const dis = Math.abs(item - curLeft);
+          if (dis < adsorptionDistance && dis < minDis) adsorption = item;
+          const dis2 = Math.abs(item - (curLeft + preWidth));
+          if (dis2 < adsorptionDistance && dis2 < minDis) adsorption = item - preWidth;
+        });
+
+        if (adsorption !== curLeft) {
+          // Use adsorption data
+          isAdsorption.current = true;
+          curLeft = adsorption;
+        } else {
+          // Control grid
+          if ((curLeft - start) % grid !== 0) {
+            curLeft = start + grid * Math.round((curLeft - start) / grid);
+          }
+          isAdsorption.current = false;
+        }
+        deltaX.current = deltaX.current % distance;
+
+        // Control bounds
+        if (curLeft < bounds.left) curLeft = bounds.left;
+        else if (curLeft + preWidth > bounds.right) curLeft = bounds.right - preWidth;
+
+        if (onDrag) {
+          const ret = onDrag(
+            {
+              lastLeft: preLeft,
+              left: curLeft,
+              lastWidth: preWidth,
+              width: preWidth,
+            },
+            scrollDelta,
+          );
+          if (ret === false) return;
+        }
+
+        handleUpdateLeft(curLeft, false);
+      }
+    };
+
+    const handleMove = (e: DragEvent) => {
+      const target = e.target;
+
+      if (deltaScrollLeft && parentRef?.current) {
+        const result = dealDragAutoScroll(e, (delta) => {
+          deltaScrollLeft(delta);
+
+          let { left, width } = target.dataset;
+          const preLeft = parseFloat(left || '0');
+          const preWidth = parseFloat(width || '0');
+          deltaX.current += delta;
+          move({ preLeft, preWidth, scrollDelta: delta });
+        });
+        if (!result) return;
+      }
+
+      let { left, width } = target.dataset;
+      const preLeft = parseFloat(left || '0');
+      const preWidth = parseFloat(width || '0');
+
+      deltaX.current += e.dx;
+      move({ preLeft, preWidth });
+    };
+
+    const handleMoveStop = (e: DragEvent) => {
+      deltaX.current = 0;
+      isAdsorption.current = false;
+      stopAutoScroll();
+
+      const target = e.target;
+      let { left, width } = target.dataset;
+      onDragEnd && onDragEnd({ left: parseFloat(left || '0'), width: parseFloat(width || '0') });
+    };
+
+    const handleResizeStart = (e: ResizeEvent) => {
+      deltaX.current = 0;
+      isAdsorption.current = false;
+      initAutoScroll();
+
+      let dir: Direction = e.edges?.right ? 'right' : 'left';
+      onResizeStart && onResizeStart(dir);
+    };
+
+    const resize = (param: { preLeft: number; preWidth: number; dir: 'left' | 'right' }) => {
+      const { dir, preWidth, preLeft } = param;
+      const distance = isAdsorption.current ? adsorptionDistance : grid;
+
+      if (dir === 'left') {
+        // Dragging left side
+        if (Math.abs(deltaX.current) >= distance) {
+          const count = parseInt(deltaX.current / distance + '');
+          let curLeft = preLeft + count * distance;
+
+          // Control adsorption
+          let adsorption = curLeft;
+          let minDis = Number.MAX_SAFE_INTEGER;
+          adsorptionPositions.forEach((item) => {
+            const dis = Math.abs(item - curLeft);
+            if (dis < adsorptionDistance && dis < minDis) adsorption = item;
+          });
+
+          if (adsorption !== curLeft) {
+            // Use adsorption data
+            isAdsorption.current = true;
+            curLeft = adsorption;
+          } else {
+            // Control grid
+            if ((curLeft - start) % grid !== 0) {
+              curLeft = start + grid * Math.round((curLeft - start) / grid);
+            }
+            isAdsorption.current = false;
+          }
+          deltaX.current = deltaX.current % distance;
+
+          // Control bounds
+          const tempRight = preLeft + preWidth;
+          if (curLeft < bounds.left) curLeft = bounds.left;
+          const curWidth = tempRight - curLeft;
+
+          if (onResize) {
+            const ret = onResize('left', {
+              lastLeft: preLeft,
+              lastWidth: preWidth,
+              left: curLeft,
+              width: curWidth,
+            });
+            if (ret === false) return;
+          }
+
+          handleUpdateLeft(curLeft, false);
+          handleUpdateWidth(curWidth, false);
+        }
+      } else if (dir === 'right') {
+        // Dragging right side
+        if (Math.abs(deltaX.current) >= distance) {
+          const count = parseInt(deltaX.current / grid + '');
+          let curWidth = preWidth + count * grid;
+
+          // Control adsorption
+          let adsorption = preLeft + curWidth;
+          let minDis = Number.MAX_SAFE_INTEGER;
+          adsorptionPositions.forEach((item) => {
+            const dis = Math.abs(item - (preLeft + curWidth));
+            if (dis < adsorptionDistance && dis < minDis) adsorption = item;
+          });
+
+          if (adsorption !== preLeft + curWidth) {
+            // Use adsorption data
+            isAdsorption.current = true;
+            curWidth = adsorption - preLeft;
+          } else {
+            // Control grid
+            let tempRight = preLeft + curWidth;
+            if ((tempRight - start) % grid !== 0) {
+              tempRight = start + grid * Math.round((tempRight - start) / grid);
+              curWidth = tempRight - preLeft;
+            }
+            isAdsorption.current = false;
+          }
+          deltaX.current = deltaX.current % distance;
+
+          // Control bounds
+          if (preLeft + curWidth > bounds.right) curWidth = bounds.right - preLeft;
+
+          if (onResize) {
+            const ret = onResize('right', {
+              lastLeft: preLeft,
+              lastWidth: preWidth,
+              left: preLeft,
+              width: curWidth,
+            });
+            if (ret === false) return;
+          }
+
+          handleUpdateWidth(curWidth, false);
+        }
+      }
+    };
+
+    const handleResize = (e: ResizeEvent) => {
+      const target = e.target;
+      const dir = e.edges?.left ? 'left' : 'right';
+
+      if (deltaScrollLeft && parentRef?.current) {
+        const result = dealResizeAutoScroll(e, dir, (delta) => {
+          deltaScrollLeft(delta);
+
+          let { left, width } = target.dataset;
+          const preLeft = parseFloat(left || '0');
+          const preWidth = parseFloat(width || '0');
+          deltaX.current += delta;
+          resize({ preLeft, preWidth, dir });
+        });
+        if (!result) return;
+      }
+
+      let { left, width } = target.dataset;
+      const preLeft = parseFloat(left || '0');
+      const preWidth = parseFloat(width || '0');
+
+      deltaX.current += dir === 'left' ? e.deltaRect?.left || 0 : e.deltaRect?.right || 0;
+      resize({ preLeft, preWidth, dir });
+    };
+    const handleResizeStop = (e: ResizeEvent) => {
+      deltaX.current = 0;
+      isAdsorption.current = false;
+      stopAutoScroll();
+
+      const target = e.target;
+      let { left, width } = target.dataset;
+      let dir: Direction = e.edges?.right ? 'right' : 'left';
+      onResizeEnd &&
+        onResizeEnd(dir, {
+          left: parseFloat(left || '0'),
+          width: parseFloat(width || '0'),
+        });
+    };
+    //#endregion
+
+    return (
+      <InteractComp
+        interactRef={interactable}
+        draggable={enableDragging}
+        resizable={enableResizing}
+        draggableOptions={{
+          lockAxis: 'x',
+          onmove: handleMove,
+          onstart: handleMoveStart,
+          onend: handleMoveStop,
+          cursorChecker: () => {
+            return '';
+          },
+        }}
+        resizableOptions={{
+          axis: 'x',
+          invert: 'none',
+          edges: {
+            left: true,
+            right: true,
+            top: false,
+            bottom: false,
+            ...(edges || {}),
+          },
+          onmove: handleResize,
+          onstart: handleResizeStart,
+          onend: handleResizeStop,
+        }}
+      >
+        {React.cloneElement(children as ReactElement, {
+          style: {
+            ...((children as ReactElement).props.style || {}),
+            left,
+            width,
+          },
+        })}
+      </InteractComp>
+    );
+  },
+);

package/src/components/row_rnd/row_rnd_interface.ts

@@ -0,0 +1,59 @@
+import { DragEvent, ResizeEvent } from "@interactjs/types/index";
+
+type EventData = {
+  lastLeft: number;
+  left: number;
+  lastWidth: number;
+  width: number;
+};
+
+export type RndDragStartCallback = () => void;
+export type RndDragCallback = (
+  data: EventData,
+  scrollDelta?: number,
+) => boolean | void;
+export type RndDragEndCallback = (data: Pick<EventData, 'left' | 'width'>) => void;
+
+export type Direction = "left" | "right";
+export type RndResizeStartCallback = (dir: Direction) => void;
+export type RndResizeCallback = (
+  dir: Direction,
+  data: EventData
+) => boolean | void;
+export type RndResizeEndCallback = (
+  dir: Direction,
+  data: Pick<EventData, 'left' | 'width'>
+) => void;
+
+export interface RowRndApi {
+  updateWidth: (size: number) => void;
+  updateLeft: (left: number) => void;
+  getLeft: () => number;
+  getWidth: () => number;
+}
+
+export interface RowRndProps {
+  width?: number;
+  left?: number;
+  grid?: number;
+  start?: number;
+  bounds?: { left: number; right: number };
+  edges?: {left: boolean | string, right: boolean | string};
+
+  onResizeStart?: RndResizeStartCallback;
+  onResize?: RndResizeCallback;
+  onResizeEnd?: RndResizeEndCallback;
+  onDragStart?: RndDragStartCallback;
+  onDrag?: RndDragCallback;
+  onDragEnd?: RndDragEndCallback;
+  // Automatic scrolling is enabled when both parentRef and deltaScrollLeft are provided
+  parentRef: React.RefObject<HTMLDivElement>;
+  deltaScrollLeft?: (delta: number) => void;
+
+  children?: React.ReactNode;
+
+  enableResizing?: boolean;
+  enableDragging?: boolean;
+  adsorptionPositions?: number[];
+  adsorptionDistance?: number;
+}

package/src/components/time_area/time_area.css

@@ -0,0 +1,35 @@
+.timeline-editor-time-area {
+  position: relative;
+  height: 32px;
+  flex: 0 0 auto;
+}
+.timeline-editor-time-area .ReactVirtualized__Grid {
+  outline: none;
+}
+.timeline-editor-time-area .ReactVirtualized__Grid::-webkit-scrollbar {
+  display: none;
+}
+.timeline-editor-time-area-interact {
+  position: absolute;
+  cursor: pointer;
+  left: 0;
+  top: 0;
+}
+.timeline-editor-time-unit {
+  border-right: 1px solid rgba(255, 255, 255, 0.2);
+  position: relative;
+  box-sizing: content-box;
+  height: 4px !important;
+  bottom: 0 !important;
+  top: auto !important;
+}
+.timeline-editor-time-unit-big {
+  height: 8px !important;
+}
+.timeline-editor-time-unit-scale {
+  color: rgba(255, 255, 255, 0.6);
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translate(50%, -100%);
+}

package/src/components/time_area/time_area.tsx

@@ -0,0 +1,93 @@
+import { FC, useEffect, useRef } from 'react';
+import { AutoSizer, Grid, GridCellRenderer, OnScrollParams } from 'react-virtualized';
+import { CommonProp } from '../../interface/common_prop';
+import { prefix } from '../../utils/deal_class_prefix';
+import { parserPixelToTime } from '../../utils/deal_data';
+import './time_area.css';
+
+/** Animation timeline component parameters */
+export type TimeAreaProps = CommonProp & {
+  /** Scroll distance from left */
+  scrollLeft: number;
+  /** Scroll callback, used for synchronous scrolling */
+  onScroll: (params: OnScrollParams) => void;
+  /** Set cursor position */
+  setCursor: (param: { left?: number; time?: number }) => void;
+};
+
+/** Animation timeline component */
+export const TimeArea: FC<TimeAreaProps> = ({ setCursor, maxScaleCount, hideCursor, scale, scaleWidth, scaleCount, scaleSplitCount, startLeft, scrollLeft, onClickTimeArea, getScaleRender }) => {
+  const gridRef = useRef<Grid>(null);
+  /** Whether to show subdivision marks */
+  const showUnit = scaleSplitCount > 0;
+
+  /** Get rendering content for each cell */
+  const cellRenderer: GridCellRenderer = ({ columnIndex, key, style }) => {
+    const isShowScale = showUnit ? columnIndex % scaleSplitCount === 0 : true;
+    const classNames = ['time-unit'];
+    if (isShowScale) classNames.push('time-unit-big');
+    const item = (showUnit ? columnIndex / scaleSplitCount : columnIndex) * scale;
+    return (
+      <div key={key} style={style} className={prefix(...classNames)}>
+        {isShowScale && <div className={prefix('time-unit-scale')}>{getScaleRender ? getScaleRender(item) : item}</div>}
+      </div>
+    );
+  };
+
+  useEffect(() => {
+    gridRef.current?.recomputeGridSize();
+  }, [scaleWidth, startLeft]);
+
+  /** Get column width */
+  const getColumnWidth = (data: { index: number }) => {
+    switch (data.index) {
+      case 0:
+        return startLeft;
+      default:
+        return showUnit ? scaleWidth / scaleSplitCount : scaleWidth;
+    }
+  };
+  const estColumnWidth=getColumnWidth({index:1});
+  return (
+    <div className={prefix('time-area')}>
+      <AutoSizer>
+        {({ width, height }) => {
+          return (
+            <>
+              <Grid
+                ref={gridRef}
+                columnCount={showUnit ? scaleCount * scaleSplitCount + 1 : scaleCount}
+                columnWidth={getColumnWidth}
+                estimatedColumnSize={estColumnWidth}
+                rowCount={1}
+                rowHeight={height}
+                width={width}
+                height={height}
+                overscanRowCount={0}
+                overscanColumnCount={10}
+                cellRenderer={cellRenderer}
+                scrollLeft={scrollLeft}
+              ></Grid>
+              <div
+                style={{ width, height }}
+                onClick={(e) => {
+                  if (hideCursor) return;
+                  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+                  const position = e.clientX - rect.x;
+                  const left = Math.max(position + scrollLeft, startLeft);
+                  if (left > maxScaleCount * scaleWidth + startLeft - scrollLeft) return;
+
+                  const time = parserPixelToTime(left, { startLeft, scale, scaleWidth });
+                  const result = onClickTimeArea && onClickTimeArea(time, e);
+                  if (result === false) return; // Prevent setting time when false is returned
+                  setCursor({ time });
+                }}
+                className={prefix('time-area-interact')}
+              ></div>
+            </>
+          );
+        }}
+      </AutoSizer>
+    </div>
+  );
+};

package/src/components/timeline.css

@@ -0,0 +1,12 @@
+.timeline-editor {
+  height: 600px;
+  width: 600px;
+  min-height: 32px;
+  position: relative;
+  font-size: 12px;
+  font-family: "PingFang SC";
+  background-color: #191b1d;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}