@keplar-404/react-timeline-editor 1.0.6

package/src/components/timeline.tsx

@@ -0,0 +1,227 @@
+import { ITimelineEngine, TimelineEngine, TimelineRow } from '@keplar-404/timeline-engine';
+import React, { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { ScrollSync } from 'react-virtualized';
+import { MIN_SCALE_COUNT, PREFIX, START_CURSOR_TIME } from '../interface/const';
+import { TimelineEditor, TimelineState } from '../interface/timeline';
+import { checkProps } from '../utils/check_props';
+import { getScaleCountByRows, parserPixelToTime, parserTimeToPixel } from '../utils/deal_data';
+import { Cursor } from './cursor/cursor';
+import { EditArea } from './edit_area/edit_area';
+import { TimeArea } from './time_area/time_area';
+import './timeline.css';
+
+export const Timeline = React.forwardRef<TimelineState, TimelineEditor>((props, ref) => {
+  const checkedProps = checkProps(props);
+  const { style } = props;
+  let {
+    effects,
+    editorData: data,
+    scrollTop,
+    autoScroll,
+    hideCursor,
+    disableDrag,
+    scale,
+    scaleWidth,
+    startLeft,
+    minScaleCount,
+    maxScaleCount,
+    onChange,
+    engine,
+    autoReRender = true,
+    onScroll: onScrollVertical,
+  } = checkedProps;
+
+  const engineRef = useRef<ITimelineEngine>(engine || new TimelineEngine());
+  const domRef = useRef<HTMLDivElement>(null);
+  const areaRef = useRef<HTMLDivElement>(null);
+
+  const scrollSync = useRef<ScrollSync>(null);
+
+  // Editor data
+  const [editorData, setEditorData] = useState(data);
+  // Scale count
+  const [scaleCount, setScaleCount] = useState(MIN_SCALE_COUNT);
+  // Cursor time
+  const [cursorTime, setCursorTime] = useState(START_CURSOR_TIME);
+  // Whether it is currently playing
+  const [isPlaying, setIsPlaying] = useState(false);
+  // Current timeline width
+  const [width, setWidth] = useState(Number.MAX_SAFE_INTEGER);
+
+  /** Listen for data changes */
+  useLayoutEffect(() => {
+    handleSetScaleCount(getScaleCountByRows(data, { scale }));
+    setEditorData(data);
+  }, [data, minScaleCount, maxScaleCount, scale]);
+
+  useEffect(() => {
+    engineRef.current.effects = effects;
+  }, [effects]);
+
+  useEffect(() => {
+    engineRef.current.data = editorData;
+  }, [editorData]);
+
+  useEffect(() => {
+    autoReRender && engineRef.current.reRender();
+  }, [editorData]);
+
+  // deprecated
+  useEffect(() => {
+    scrollSync.current && scrollSync.current.setState({ scrollTop: scrollTop });
+  }, [scrollTop]);
+
+  /** Dynamically set scale count */
+  const handleSetScaleCount = (value: number) => {
+    const data = Math.min(maxScaleCount, Math.max(minScaleCount, value));
+    setScaleCount(data);
+  };
+
+  /** Handle active data changes */
+  const handleEditorDataChange = (editorData: TimelineRow[]) => {
+    const result = onChange?.(editorData);
+    if (result !== false) {
+      engineRef.current.data = editorData;
+      autoReRender && engineRef.current.reRender();
+    }
+  };
+
+  /** Handle cursor */
+  const handleSetCursor = (param: { left?: number; time?: number; updateTime?: boolean }) => {
+    let { left, time = 0, updateTime = true } = param;
+    if (typeof left === 'undefined' && typeof time === 'undefined') return false;
+
+    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) {
+      result = engineRef.current.setTime(time);
+      autoReRender && engineRef.current.reRender();
+    }
+    result && setCursorTime(time);
+    return result;
+  };
+
+  /** Set scrollLeft */
+  const handleDeltaScrollLeft = (delta: number) => {
+    // When exceeding the maximum distance, prohibit automatic scrolling
+    const data = (scrollSync.current?.state?.scrollLeft ?? 0) + delta;
+    if (data > scaleCount * (scaleWidth - 1) + startLeft - width) return;
+    scrollSync.current && scrollSync.current.setState({ scrollLeft: Math.max(scrollSync.current.state.scrollLeft + delta, 0) });
+  };
+
+  // Handle engine-related data
+  useEffect(() => {
+    const handleTime = ({ time }: { time: number }) => {
+      handleSetCursor({ time, updateTime: false });
+    };
+    const handlePlay = () => setIsPlaying(true);
+    const handlePaused = () => setIsPlaying(false);
+    engineRef.current.on('setTimeByTick', handleTime);
+    engineRef.current.on('play', handlePlay);
+    engineRef.current.on('paused', handlePaused);
+  }, []);
+
+  // ref data
+  useImperativeHandle(ref, () => ({
+    get target() {
+      return domRef.current;
+    },
+    get listener() {
+      return engineRef.current;
+    },
+    get isPlaying() {
+      return engineRef.current.isPlaying;
+    },
+    get isPaused() {
+      return engineRef.current.isPaused;
+    },
+    setPlayRate: engineRef.current.setPlayRate.bind(engineRef.current),
+    getPlayRate: engineRef.current.getPlayRate.bind(engineRef.current),
+    setTime: (time: number) => handleSetCursor({ time }),
+    getTime: engineRef.current.getTime.bind(engineRef.current),
+    reRender: engineRef.current.reRender.bind(engineRef.current),
+    play: (param: Parameters<TimelineState['play']>[0]) => engineRef.current.play({ ...param }),
+    pause: engineRef.current.pause.bind(engineRef.current),
+    setScrollLeft: (val) => {
+      scrollSync.current && scrollSync.current.setState({ scrollLeft: Math.max(val, 0) });
+    },
+    setScrollTop: (val) => {
+      scrollSync.current && scrollSync.current.setState({ scrollTop: Math.max(val, 0) });
+    },
+  }));
+
+  // Listen for width changes in the timeline area
+  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={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={handleSetScaleCount}
+              scrollTop={scrollTop}
+              scrollLeft={scrollLeft}
+              setEditorData={handleEditorDataChange}
+              deltaScrollLeft={autoScroll ? handleDeltaScrollLeft : () => {}}
+              onScroll={(params) => {
+                onScroll(params);
+                onScrollVertical && onScrollVertical(params);
+              }}
+            />
+            {!hideCursor && (
+              <Cursor
+                {...checkedProps}
+                timelineWidth={width}
+                disableDrag={isPlaying}
+                scrollLeft={scrollLeft}
+                scaleCount={scaleCount}
+                setScaleCount={handleSetScaleCount}
+                setCursor={handleSetCursor}
+                cursorTime={cursorTime}
+                editorData={editorData}
+                areaRef={areaRef}
+                scrollSync={scrollSync}
+                deltaScrollLeft={autoScroll ? handleDeltaScrollLeft : undefined}
+              />
+            )}
+          </>
+        )}
+      </ScrollSync>
+    </div>
+  );
+});

package/src/components/transport/TransportBar.css

@@ -0,0 +1,171 @@
+.timeline-transport-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  height: 48px;
+  background: rgba(10, 10, 20, 0.85);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  gap: 16px;
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
+}
+.timeline-transport-controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.timeline-transport-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  background: rgba(255, 255, 255, 0.03);
+  color: #64748b;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+.timeline-transport-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #94a3b8;
+  border-color: rgba(255, 255, 255, 0.12);
+}
+.timeline-transport-btn--primary {
+  color: #c4c9d4;
+}
+.timeline-transport-btn--primary:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #e2e8f0;
+}
+.timeline-transport-btn--stop:hover {
+  background: rgba(239, 68, 68, 0.12);
+  border-color: rgba(239, 68, 68, 0.3);
+  color: #ef4444;
+}
+.timeline-transport-btn--loop {
+  font-size: 14px;
+  line-height: 1;
+  width: auto;
+  padding: 0 6px;
+  color: #4b5563;
+}
+.timeline-transport-btn--loop:hover {
+  background: rgba(16, 185, 129, 0.1);
+  border-color: rgba(16, 185, 129, 0.3);
+  color: #10b981;
+}
+.timeline-transport-btn--loop-active {
+  background: rgba(16, 185, 129, 0.18) !important;
+  border-color: rgba(16, 185, 129, 0.5) !important;
+  color: #10b981 !important;
+  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25) !important;
+}
+.timeline-transport-divider {
+  width: 1px;
+  height: 20px;
+  background: rgba(255, 255, 255, 0.08);
+  margin: 0 4px;
+  flex-shrink: 0;
+}
+.timeline-transport-loop-inputs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 4px;
+}
+.timeline-transport-loop-input {
+  width: 52px;
+  background: rgba(0, 0, 0, 0.35);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+  border-radius: 5px;
+  color: #10b981;
+  font-size: 12px;
+  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
+  font-weight: 600;
+  padding: 2px 6px;
+  text-align: center;
+  outline: none;
+  transition: border-color 0.12s;
+}
+.timeline-transport-loop-input:focus {
+  border-color: rgba(16, 185, 129, 0.7);
+  box-shadow: 0 0 6px rgba(16, 185, 129, 0.2);
+}
+.timeline-transport-loop-input::-webkit-inner-spin-button,
+.timeline-transport-loop-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.timeline-transport-loop-arrow {
+  font-size: 11px;
+  color: #334155;
+}
+.timeline-transport-loop-unit {
+  font-size: 10px;
+  color: #334155;
+  font-family: 'SF Mono', 'Cascadia Code', monospace;
+}
+.timeline-transport-time {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+  min-width: 100px;
+}
+.timeline-transport-time-value {
+  font-size: 22px;
+  font-weight: 700;
+  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
+  color: #e2e8f0;
+  letter-spacing: 0.05em;
+  line-height: 1;
+}
+.timeline-transport-time-label {
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.15em;
+  color: #475569;
+  text-transform: uppercase;
+}
+.timeline-transport-rate {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.timeline-transport-rate-label {
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.15em;
+  color: #475569;
+  text-transform: uppercase;
+}
+.timeline-transport-rate-buttons {
+  display: flex;
+  gap: 3px;
+}
+.timeline-transport-rate-btn {
+  padding: 3px 8px;
+  border-radius: 5px;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  background: rgba(255, 255, 255, 0.03);
+  color: #475569;
+  font-size: 11px;
+  font-weight: 600;
+  font-family: 'SF Mono', 'Cascadia Code', monospace;
+  cursor: pointer;
+  transition: all 0.12s;
+}
+.timeline-transport-rate-btn:hover {
+  background: rgba(255, 255, 255, 0.07);
+  color: #94a3b8;
+}
+.timeline-transport-rate-btn--active {
+  background: rgba(59, 130, 246, 0.15);
+  border-color: rgba(59, 130, 246, 0.4);
+  color: #3b82f6;
+  box-shadow: 0 0 6px rgba(59, 130, 246, 0.15);
+}