@keplar-404/react-timeline-editor 1.0.6

package/src/components/edit_area/edit_row.tsx

@@ -0,0 +1,128 @@
+import React, { FC, useRef, useCallback } from 'react';
+import { TimelineAction, TimelineRow } from '@keplar-404/timeline-engine';
+import { CommonProp } from '../../interface/common_prop';
+import { prefix } from '../../utils/deal_class_prefix';
+import { parserPixelToTime } from '../../utils/deal_data';
+import { DragLineData } from './drag_lines';
+import { EditAction } from './edit_action';
+import './edit_row.css';
+
+export type EditRowProps = CommonProp & {
+  areaRef: React.RefObject<HTMLDivElement>;
+  rowData?: TimelineRow;
+  style?: React.CSSProperties;
+  dragLineData: DragLineData;
+  setEditorData: (params: TimelineRow[]) => void;
+  /** Horizontal scroll offset */
+  scrollLeft: number;
+  /** Horizontal scroll delta */
+  deltaScrollLeft: (scrollLeft: number) => void;
+  /** Row index in the editor data array */
+  rowIndex?: number;
+  /** Current row-reorder drag state */
+  dragState?: {
+    isDragging: boolean;
+    draggedIndex: number;
+  };
+  /** Enable cross-row block drag */
+  enableCrossRowDrag?: boolean;
+  /** Show ghost preview while block dragging across rows */
+  enableGhostPreview?: boolean;
+};
+
+export const EditRow: FC<EditRowProps> = (props) => {
+  const {
+    rowData,
+    style = {},
+    onClickRow,
+    onDoubleClickRow,
+    onContextMenuRow,
+    areaRef,
+    scrollLeft,
+    startLeft,
+    scale,
+    scaleWidth,
+    enableRowDrag,
+    onRowDragStart,
+    rowIndex = -1,
+    dragState,
+    enableCrossRowDrag,
+    enableGhostPreview,
+  } = props;
+
+  const classNames = ['edit-row'];
+  if (rowData?.selected) classNames.push('edit-row-selected');
+  if (dragState?.isDragging && dragState.draggedIndex === rowIndex) {
+    classNames.push('edit-row-dragging');
+  }
+
+  const dragHandleRef = useRef<HTMLDivElement>(null);
+
+  const handleTime = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (!areaRef.current) return 0;
+    const rect = areaRef.current.getBoundingClientRect();
+    const position = e.clientX - rect.x;
+    const left = position + scrollLeft;
+    return parserPixelToTime(left, { startLeft, scale, scaleWidth });
+  };
+
+  // Row-reorder drag handle
+  const handleDragHandleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!enableRowDrag || !rowData || rowIndex === -1) return;
+      e.preventDefault();
+      e.stopPropagation();
+      onRowDragStart?.({ row: rowData });
+    },
+    [enableRowDrag, rowData, rowIndex, onRowDragStart],
+  );
+
+  return (
+    <div
+      className={`${prefix(...classNames)} ${(rowData?.classNames || []).join(' ')}`}
+      style={style}
+      onClick={(e) => {
+        if (rowData && onClickRow) {
+          const time = handleTime(e);
+          onClickRow(e, { row: rowData, time });
+        }
+      }}
+      onDoubleClick={(e) => {
+        if (rowData && onDoubleClickRow) {
+          const time = handleTime(e);
+          onDoubleClickRow(e, { row: rowData, time });
+        }
+      }}
+      onContextMenu={(e) => {
+        if (rowData && onContextMenuRow) {
+          const time = handleTime(e);
+          onContextMenuRow(e, { row: rowData, time });
+        }
+      }}
+    >
+      {/* Row-reorder drag handle */}
+      {enableRowDrag && rowData && (
+        <div
+          ref={dragHandleRef}
+          className={prefix('edit-row-drag-handle')}
+          onMouseDown={handleDragHandleMouseDown}
+          title="Drag to reorder row"
+        >
+          ⋮⋮
+        </div>
+      )}
+
+      {(rowData?.actions || []).map((action: TimelineAction) => (
+        <EditAction
+          key={action.id}
+          {...props}
+          handleTime={handleTime}
+          row={rowData!}
+          action={action}
+          enableCrossRowDrag={enableCrossRowDrag}
+          enableGhostPreview={enableGhostPreview}
+        />
+      ))}
+    </div>
+  );
+};

package/src/components/edit_area/hooks/use_drag_line.ts

@@ -0,0 +1,93 @@
+import { useState } from "react";
+import { TimelineAction, TimelineRow } from "@keplar-404/timeline-engine";
+import { parserActionsToPositions, parserTimeToTransform } from "../../../utils/deal_data";
+import { DragLineData } from "../drag_lines";
+
+export function useDragLine() {
+  const [dragLineData, setDragLineData] = useState<DragLineData>({ isMoving: false, movePositions: [], assistPositions: [] });
+
+  /** Get auxiliary lines */
+  const defaultGetAssistPosition = (data: {
+    editorData: TimelineRow[];
+    assistActionIds?: string[];
+    action: TimelineAction;
+    row: TimelineRow;
+    startLeft: number;
+    scale: number;
+    scaleWidth: number;
+    hideCursor: boolean;
+    cursorLeft: number;
+  }) => {
+    const { editorData, assistActionIds, action, row, scale, scaleWidth, startLeft, cursorLeft, hideCursor } = data;
+    const otherActions: TimelineAction[] = [];
+    if (assistActionIds) {
+      editorData.forEach((rowItem) => {
+        rowItem.actions.forEach((actionItem: TimelineAction) => {
+          if (assistActionIds.includes(actionItem.id)) otherActions.push(actionItem);
+        });
+      });
+    } else {
+      editorData.forEach((rowItem) => {
+        if (rowItem.id !== row.id) {
+          otherActions.push(...rowItem.actions);
+        } else {
+          rowItem.actions.forEach((actionItem: TimelineAction) => {
+            if (actionItem.id !== action.id) otherActions.push(actionItem);
+          });
+        }
+      });
+    }
+
+    const positions = parserActionsToPositions(otherActions, {
+      startLeft,
+      scale,
+      scaleWidth,
+    });
+    if (!hideCursor) positions.push(cursorLeft);
+
+    return positions;
+  };
+
+  /** Get current movement markers */
+  const defaultGetMovePosition = (data: { start: number; end: number; dir?: "right" | "left"; startLeft: number; scale: number; scaleWidth: number }) => {
+    const { start, end, dir, scale, scaleWidth, startLeft } = data;
+    const { left, width } = parserTimeToTransform({ start, end }, { startLeft, scaleWidth, scale });
+    if (!dir) return [left, left + width];
+    return dir === "right" ? [left + width] : [left];
+  };
+
+  /** Initialize drag lines */
+  const initDragLine = (data: { movePositions?: number[]; assistPositions?: number[] }) => {
+    const { movePositions, assistPositions } = data;
+
+    setDragLineData({
+      isMoving: true,
+      movePositions: movePositions || [],
+      assistPositions: assistPositions || [],
+    });
+  };
+
+  /** Update drag line */
+  const updateDragLine = (data: { movePositions?: number[]; assistPositions?: number[] }) => {
+    const { movePositions, assistPositions } = data;
+    setDragLineData((pre) => ({
+      ...pre,
+      movePositions: movePositions || pre.movePositions,
+      assistPositions: assistPositions || pre.assistPositions,
+    }));
+  };
+
+  /** Dispose drag lines */
+  const disposeDragLine = () => {
+    setDragLineData({ isMoving: false, movePositions: [], assistPositions: [] });
+  };
+
+  return {
+    initDragLine,
+    updateDragLine,
+    disposeDragLine,
+    dragLineData,
+    defaultGetAssistPosition,
+    defaultGetMovePosition,
+  };
+}

package/src/components/edit_area/insertion_line.tsx

@@ -0,0 +1,39 @@
+import React, { FC } from 'react';
+import { prefix } from '../../utils/deal_class_prefix';
+import { TimelineRow } from '@keplar-404/timeline-engine';
+import { calculateInsertionLineTop } from './drag_utils';
+
+interface InsertionLineProps {
+  /** Distance from top */
+  top: number;
+  /** Whether the insertion line is visible */
+  visible: boolean;
+}
+
+/**
+ * Insertion line component - displays the drag insertion position
+ */
+export const InsertionLine: FC<InsertionLineProps> = ({ top, visible }) => {
+  if (!visible || top < 0) {
+    return null;
+  }
+
+  // Calculate insertion line position
+  // const top = calculateInsertionLineTop(editorData, insertionLineIndex, rowHeight);
+
+  return (
+    <div
+      className={prefix('edit-area-insertion-line')}
+      style={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        height: '2px',
+        background: '#4a90e2',
+        zIndex: 1000,
+        pointerEvents: 'none',
+        top,
+      }}
+    />
+  );
+};

package/src/components/loop-zone/LoopZoneOverlay.css

@@ -0,0 +1,65 @@
+.loop-zone-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  pointer-events: none;
+  z-index: 4;
+  overflow: visible;
+}
+.loop-zone-band {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  pointer-events: none;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  border-top: 2px solid transparent;
+}
+.loop-zone-handle {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  transform: translateX(-50%);
+  pointer-events: none;
+  user-select: none;
+}
+.loop-zone-handle__line {
+  position: absolute;
+  top: 32px;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 1px;
+  pointer-events: none;
+  border-left: 1px dashed transparent;
+  background: currentColor;
+  opacity: 0.5;
+}
+.loop-zone-handle__grip {
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  transform: translateX(-50%);
+  pointer-events: auto;
+  cursor: ew-resize;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 7px;
+  border-radius: 5px;
+  transition: filter 0.12s, transform 0.1s;
+}
+.loop-zone-handle__grip:hover {
+  filter: brightness(1.2);
+  transform: translateX(-50%) scaleY(1.1);
+}
+.loop-zone-handle__grip:active {
+  transform: translateX(-50%) scale(0.94);
+}
+.loop-zone-handle__grip svg {
+  display: block;
+  flex-shrink: 0;
+}