@keplar-404/react-timeline-editor 1.0.6

package/src/components/edit_area/cross_row_drag.tsx

@@ -0,0 +1,174 @@
+import React, { createContext, useContext, useState, useCallback, useRef } from 'react';
+import { TimelineAction, TimelineRow } from '@keplar-404/timeline-engine';
+
+// ─────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────
+
+export interface CrossRowDragState {
+  isDragging: boolean;
+  /** The action currently being dragged across rows */
+  action: TimelineAction | null;
+  /** The source row (where the action came from) */
+  sourceRow: TimelineRow | null;
+  /** Visual width of the ghost (px) */
+  ghostWidth: number;
+  /** Visual height of the ghost (px) */
+  ghostHeight: number;
+  /** Current cursor X (client) */
+  cursorX: number;
+  /** Current cursor Y (client) */
+  cursorY: number;
+  /** Offset from the left edge of the block where the user grabbed it */
+  grabOffsetX: number;
+}
+
+export interface CrossRowDragAPI {
+  state: CrossRowDragState;
+  startCrossRowDrag: (params: {
+    action: TimelineAction;
+    sourceRow: TimelineRow;
+    ghostWidth: number;
+    ghostHeight: number;
+    grabOffsetX: number;
+    initialX: number;
+    initialY: number;
+  }) => void;
+  endCrossRowDrag: () => void;
+  /** Called by the EditArea when mouse is released to commit the move */
+  onCommit: (
+    action: TimelineAction,
+    sourceRow: TimelineRow,
+    targetRow: TimelineRow,
+    newStart: number,
+    newEnd: number,
+  ) => void;
+  setOnCommit: (fn: CrossRowDragAPI['onCommit']) => void;
+}
+
+const initialState: CrossRowDragState = {
+  isDragging: false,
+  action: null,
+  sourceRow: null,
+  ghostWidth: 0,
+  ghostHeight: 0,
+  cursorX: 0,
+  cursorY: 0,
+  grabOffsetX: 0,
+};
+
+// ─────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────
+
+const CrossRowDragContext = createContext<CrossRowDragAPI | null>(null);
+
+export const useCrossRowDrag = (): CrossRowDragAPI => {
+  const ctx = useContext(CrossRowDragContext);
+  if (!ctx) throw new Error('useCrossRowDrag must be used inside CrossRowDragProvider');
+  return ctx;
+};
+
+// ─────────────────────────────────────────────
+// Provider
+// ─────────────────────────────────────────────
+
+export const CrossRowDragProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [state, setState] = useState<CrossRowDragState>(initialState);
+  const onCommitRef = useRef<CrossRowDragAPI['onCommit']>(() => {});
+
+  const startCrossRowDrag: CrossRowDragAPI['startCrossRowDrag'] = useCallback((params) => {
+    setState({
+      isDragging: true,
+      action: params.action,
+      sourceRow: params.sourceRow,
+      ghostWidth: params.ghostWidth,
+      ghostHeight: params.ghostHeight,
+      cursorX: params.initialX,
+      cursorY: params.initialY,
+      grabOffsetX: params.grabOffsetX,
+    });
+  }, []);
+
+  const endCrossRowDrag: CrossRowDragAPI['endCrossRowDrag'] = useCallback(() => {
+    setState(initialState);
+  }, []);
+
+  const setOnCommit: CrossRowDragAPI['setOnCommit'] = useCallback((fn) => {
+    onCommitRef.current = fn;
+  }, []);
+
+  const onCommit: CrossRowDragAPI['onCommit'] = useCallback(
+    (action, sourceRow, targetRow, newStart, newEnd) => {
+      onCommitRef.current(action, sourceRow, targetRow, newStart, newEnd);
+    },
+    [],
+  );
+
+  return (
+    <CrossRowDragContext.Provider
+      value={{ state, startCrossRowDrag, endCrossRowDrag, onCommit, setOnCommit }}
+    >
+      {children}
+    </CrossRowDragContext.Provider>
+  );
+};
+
+// ─────────────────────────────────────────────
+// Ghost Element
+// ─────────────────────────────────────────────
+
+interface GhostProps {
+  state: CrossRowDragState;
+  enableGhostPreview: boolean;
+  /** Optional custom render function; receives the dragged action + source row */
+  getGhostPreview?: (params: { action: TimelineAction; row: TimelineRow }) => React.ReactNode;
+}
+
+export const CrossRowGhost: React.FC<GhostProps> = ({
+  state,
+  enableGhostPreview,
+  getGhostPreview,
+}) => {
+  if (!state.isDragging || !enableGhostPreview) return null;
+  if (!state.action || !state.sourceRow) return null;
+
+  const left = state.cursorX - state.grabOffsetX;
+  const top = state.cursorY - state.ghostHeight / 2;
+
+  // Render custom preview if provided, otherwise use default glowing box
+  const customContent = getGhostPreview
+    ? getGhostPreview({ action: state.action, row: state.sourceRow })
+    : null;
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        left,
+        top,
+        width: state.ghostWidth,
+        height: state.ghostHeight,
+        pointerEvents: 'none',
+        zIndex: 9999,
+        transition: 'none',
+        // Default appearance only when no custom content provided
+        ...(customContent == null && {
+          background: 'rgba(99, 179, 237, 0.55)',
+          border: '2px solid rgba(99, 179, 237, 0.9)',
+          borderRadius: 4,
+          boxShadow: '0 0 16px rgba(99,179,237,0.7), 0 0 4px rgba(99,179,237,0.9)',
+          backdropFilter: 'blur(2px)',
+        }),
+        // When custom: just a transparent, sized container
+        ...(customContent != null && {
+          overflow: 'hidden',
+          opacity: 0.85,
+        }),
+      }}
+    >
+      {customContent}
+    </div>
+  );
+};
+

package/src/components/edit_area/drag_lines.css

@@ -0,0 +1,13 @@
+.timeline-editor-drag-line-container {
+  position: absolute;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.timeline-editor-drag-line {
+  width: 0;
+  position: absolute;
+  top: 0;
+  height: 99%;
+  border-left: 1px dashed rgba(82, 151, 255, 0.6);
+}

package/src/components/edit_area/drag_lines.tsx

@@ -0,0 +1,31 @@
+import React, { FC, useEffect, useState } from "react";
+import { prefix } from "../../utils/deal_class_prefix";
+import './drag_lines.css';
+
+export interface DragLineData {
+  isMoving: boolean;
+  movePositions: number[];
+  assistPositions: number[];
+}
+
+export type DragLineProps = DragLineData & {scrollLeft: number};
+
+/** Drag auxiliary lines */
+export const DragLines: FC<DragLineProps> = ({
+  isMoving,
+  movePositions = [],
+  assistPositions = [],
+  scrollLeft,
+}) => {
+  return(
+    <div className={prefix('drag-line-container')}>
+      {
+        isMoving && movePositions.filter(item => assistPositions.includes(item)).map(((linePos, index) => {
+          return (
+            <div key={index} className={prefix('drag-line')} style={{left: linePos - scrollLeft}} />
+          )
+        }))
+      }
+    </div>
+  )
+}

package/src/components/edit_area/drag_preview.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from 'react';
+import { prefix } from '../../utils/deal_class_prefix';
+
+interface DragPreviewProps {
+  /** Top position of the preview element */
+  top: number;
+  /** Height of the preview element */
+  height: number;
+  /** Whether the preview element is visible */
+  visible: boolean;
+}
+
+/**
+ * Drag preview component - displays a preview of the row being dragged
+ */
+export const DragPreview: FC<DragPreviewProps> = ({ top, height, visible }) => {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div
+      className={prefix('edit-area-drag-preview')}
+      style={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top,
+        height,
+        background: 'rgba(74, 144, 226, 0.3)',
+        border: '2px dashed #4a90e2',
+        borderRadius: '4px',
+        zIndex: 1001,
+        pointerEvents: 'none',
+        opacity: 0.8,
+      }}
+    >
+      <div
+        style={{
+          padding: '8px 16px',
+          color: '#4a90e2',
+          fontSize: '12px',
+          fontWeight: 'bold',
+        }}
+      >
+        Dragging...
+      </div>
+    </div>
+  );
+};

package/src/components/edit_area/drag_utils.ts

@@ -0,0 +1,77 @@
+import { TimelineRow } from '@keplar-404/timeline-engine';
+
+/**
+ * Calculate the accumulated height of rows
+ * @param editorData Editor data
+ * @param rowIndex Target row index
+ * @param defaultRowHeight Default row height
+ * @returns Accumulated height
+ */
+export const calculateRowAccumulatedHeight = (
+  editorData: TimelineRow[],
+  rowIndex: number,
+  defaultRowHeight: number
+): number => {
+  let accumulatedHeight = 0;
+  for (let i = 0; i < rowIndex; i++) {
+    accumulatedHeight += editorData[i]?.rowHeight || defaultRowHeight;
+  }
+  return accumulatedHeight;
+};
+
+/**
+ * Calculate total height of all rows
+ * @param editorData Editor data
+ * @param defaultRowHeight Default row height
+ * @returns Total height
+ */
+export const calculateTotalHeight = (
+  editorData: TimelineRow[],
+  defaultRowHeight: number
+): number => {
+  return editorData.reduce((total, row) => total + (row?.rowHeight || defaultRowHeight), 0);
+};
+
+/**
+ * Get an array of actual heights for each row
+ * @param editorData Editor data
+ * @param defaultRowHeight Default row height
+ * @returns Height array
+ */
+export const getRowHeights = (
+  editorData: TimelineRow[],
+  defaultRowHeight: number
+): number[] => {
+  return editorData.map(row => row?.rowHeight || defaultRowHeight);
+};
+
+/**
+ * Calculate the position of the insertion line
+ * @param editorData Editor data
+ * @param targetIndex Target index
+ * @param defaultRowHeight Default row height
+ * @returns Insertion line top position
+ */
+export const calculateInsertionLineTop = (
+  editorData: TimelineRow[],
+  targetIndex: number,
+  defaultRowHeight: number
+): number => {
+  return calculateRowAccumulatedHeight(editorData, targetIndex, defaultRowHeight);
+};
+
+/**
+ * Validate whether the drag target index is valid
+ * @param targetIndex Target index
+ * @param draggedIndex Index of the row being dragged
+ * @param totalRows Total number of rows
+ * @returns Whether it is valid
+ */
+export const isValidDragTarget = (
+  targetIndex: number,
+  draggedIndex: number,
+  totalRows: number
+): boolean => {
+  // Allow dragging to the last row (targetIndex = totalRows)
+  return targetIndex >= 0 && targetIndex <= totalRows && targetIndex !== draggedIndex;
+};

package/src/components/edit_area/edit_action.css

@@ -0,0 +1,56 @@
+.timeline-editor-action {
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: #2f3134;
+  cursor: default;
+  transition: box-shadow 0.15s ease;
+  /** Glow effect when the block is in an active drag state (cross-row) */
+}
+.timeline-editor-action.action-cross-row-dragging {
+  box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.8), 0 0 16px rgba(99, 179, 237, 0.6), 0 0 32px rgba(99, 179, 237, 0.3);
+  opacity: 0.75;
+  z-index: 10;
+}
+.timeline-editor-action.action-movable {
+  cursor: move;
+}
+.timeline-editor-action .timeline-editor-action-left-stretch,
+.timeline-editor-action .timeline-editor-action-right-stretch {
+  position: absolute;
+  top: 0;
+  width: 10px;
+  border-radius: 4px;
+  height: 100%;
+  overflow: hidden;
+}
+.timeline-editor-action .timeline-editor-action-left-stretch::after,
+.timeline-editor-action .timeline-editor-action-right-stretch::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  border-radius: 4px;
+  border-top: 28px solid transparent;
+  border-bottom: 28px solid transparent;
+}
+.timeline-editor-action .timeline-editor-action-left-stretch {
+  left: 0;
+  cursor: w-resize;
+}
+.timeline-editor-action .timeline-editor-action-left-stretch::after {
+  left: 0;
+  content: '';
+  border-left: 7px solid rgba(255, 255, 255, 0.1);
+  border-right: 7px solid transparent;
+}
+.timeline-editor-action .timeline-editor-action-right-stretch {
+  right: 0;
+  cursor: e-resize;
+}
+.timeline-editor-action .timeline-editor-action-right-stretch::after {
+  right: 0;
+  content: '';
+  border-right: 7px solid rgba(255, 255, 255, 0.1);
+  border-left: 7px solid transparent;
+}