sense-react-timeline-editor 1.0.0

package/dist/interface/action.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 动作的基本参数
+ * @export
+ * @interface TimelineAction
+ */
+export interface TimelineAction {
+    /** 动作id */
+    id: string;
+    /** 动作开始时间 */
+    start: number;
+    /** 动作结束时间 */
+    end: number;
+    /** 动作所对应的effectId */
+    effectId: string;
+    /** 动作是否被选中 */
+    selected?: boolean;
+    /** 动作是否可伸缩 */
+    flexible?: boolean;
+    /** 动作是否可移动 */
+    movable?: boolean;
+    /** 动作是否禁止运行 */
+    disable?: boolean;
+    /** 动作最小开始时间限制 */
+    minStart?: number;
+    /** 动作最大结束时间限制 */
+    maxEnd?: number;
+}
+/**
+ * 动作行基本参数
+ * @export
+ * @interface TimelineRow
+ */
+export interface TimelineRow {
+    /** 动作行id */
+    id: string;
+    /** 行的动作列表 */
+    actions: TimelineAction[];
+    /** 自定义行高 */
+    rowHeight?: number;
+    /** 行是否选中 */
+    selected?: boolean;
+    /** 行的扩展类名 */
+    classNames?: string[];
+}

package/dist/interface/common_prop.d.ts

@@ -0,0 +1,12 @@
+import { EditData } from "./timeline";
+/** 组件公共参数 */
+export interface CommonProp extends EditData {
+    /** 刻度个数 */
+    scaleCount: number;
+    /** 设置刻度个数 */
+    setScaleCount: (scaleCount: number) => void;
+    /** 光标时间 */
+    cursorTime: number;
+    /** 当前时间轴宽度 */
+    timelineWidth: number;
+}

package/dist/interface/const.d.ts

@@ -0,0 +1,26 @@
+export declare const PREFIX = "timeline-editor";
+/** 开始时光标所在时间 */
+export declare const START_CURSOR_TIME = 0;
+/** 默认刻度 */
+export declare const DEFAULT_SCALE = 1;
+/** 默认刻度分割数量 */
+export declare const DEFAULT_SCALE_SPLIT_COUNT = 10;
+/** 默认刻度显示宽度 */
+export declare const DEFAULT_SCALE_WIDTH = 160;
+/** 默认刻度左侧开始距离 */
+export declare const DEFAULT_START_LEFT = 20;
+/** 默认移动最小像素 */
+export declare const DEFAULT_MOVE_GRID = 1;
+/** 默认吸附像素 */
+export declare const DEFAULT_ADSORPTION_DISTANCE = 8;
+/** 默认动作行高度 */
+export declare const DEFAULT_ROW_HEIGHT = 32;
+/** 最小scale数量 */
+export declare const MIN_SCALE_COUNT = 20;
+/** 每次新增scale个数 */
+export declare const ADD_SCALE_COUNT = 5;
+/** 错误信息 */
+export declare const ERROR: {
+    START_TIME_LESS_THEN_ZERO: string;
+    END_TIME_LESS_THEN_START_TIME: string;
+};

package/dist/interface/effect.d.ts

@@ -0,0 +1,39 @@
+import { TimelineEngine } from "../engine/engine";
+import { TimelineAction } from "./action";
+export interface TimelineEffect {
+    /** 效果id */
+    id: string;
+    /** 效果名称 */
+    name?: string;
+    /** 效果运行代码 */
+    source?: TimeLineEffectSource;
+}
+export interface EffectSourceParam {
+    /** 当前时间 */
+    time: number;
+    /** 是否正在运行 */
+    isPlaying: boolean;
+    /** 动作 */
+    action: TimelineAction;
+    /** 动作效果 */
+    effect: TimelineEffect;
+    /** 运行引擎 */
+    engine: TimelineEngine;
+}
+/**
+ * 效果执行回调
+ * @export
+ * @interface TimeLineEffectSource
+ */
+export interface TimeLineEffectSource {
+    /** 在当前动作时间区域开始播放时回调 */
+    start?: (param: EffectSourceParam) => void;
+    /** 时间进入动作时执行回调 */
+    enter?: (param: EffectSourceParam) => void;
+    /** 动作更新时回调 */
+    update?: (param: EffectSourceParam) => void;
+    /** 时间离开动作时执行回调 */
+    leave?: (param: EffectSourceParam) => void;
+    /** 在当前动作时间区域停止播放时回调 */
+    stop?: (param: EffectSourceParam) => void;
+}

package/dist/interface/timeline.d.ts

@@ -0,0 +1,285 @@
+import React, { ReactNode } from 'react';
+import { OnScrollParams } from 'react-virtualized';
+import { ITimelineEngine } from '..';
+import { Emitter } from '../engine/emitter';
+import { EventTypes } from '../engine/events';
+import { TimelineAction, TimelineRow } from './action';
+import { TimelineEffect } from './effect';
+export * from './action';
+export * from './effect';
+export interface EditData {
+    /**
+     * @description 时间轴编辑数据
+     */
+    editorData: TimelineRow[];
+    /**
+     * @description 时间轴动作效果map
+     */
+    effects: Record<string, TimelineEffect>;
+    /**
+     * @description 单个刻度标记范畴（>0）
+     * @default 1
+     */
+    scale?: number;
+    /**
+     * @description 最少刻度个数（>=1）
+     * @default 20
+     */
+    minScaleCount?: number;
+    /**
+     * @description 最大刻度个数（>=minScaleCount）
+     * @default Infinity
+     */
+    maxScaleCount?: number;
+    /**
+     * @description 单个刻度细分单元数（>0整数）
+     * @default 10
+     */
+    scaleSplitCount?: number;
+    /**
+     * @description 单个刻度的显示宽度（>0, 单位：px）
+     * @default 160
+     */
+    scaleWidth?: number;
+    /**
+     * @description 刻度开始距离左侧的距离（>=0, 单位：px）
+     * @default 20
+     */
+    startLeft?: number;
+    /**
+     * @description 每个编辑行默认高度（>0, 单位：px）
+     * @default 32
+     */
+    rowHeight?: number;
+    /**
+     * @description 是否启动网格移动吸附
+     * @default false
+     */
+    gridSnap?: boolean;
+    /**
+     * @description 启动拖拽辅助线吸附
+     * @default false
+     */
+    dragLine?: boolean;
+    /**
+     * @description 是否隐藏光标
+     * @default false
+     */
+    hideCursor?: boolean;
+    /**
+     * @description 禁止全部动作区域拖动
+     * @default false
+     */
+    disableDrag?: boolean;
+    /**
+     * @description timeline运行器，不传则使用内置运行器
+     */
+    engine?: ITimelineEngine;
+    /**
+     * @description 自定义action区域渲染
+     */
+    getActionRender?: (action: TimelineAction, row: TimelineRow) => ReactNode;
+    /**
+     * @description 自定义scale渲染
+     */
+    getScaleRender?: (scale: number) => ReactNode;
+    /**
+     * @description 开始移动回调
+     */
+    onActionMoveStart?: (params: {
+        action: TimelineAction;
+        row: TimelineRow;
+    }) => void;
+    /**
+     * @description 移动回调（return false可阻止移动）
+     */
+    onActionMoving?: (params: {
+        action: TimelineAction;
+        row: TimelineRow;
+        start: number;
+        end: number;
+    }) => void | boolean;
+    /**
+     * @description 移动结束回调（return false可阻止onChange触发）
+     */
+    onActionMoveEnd?: (params: {
+        action: TimelineAction;
+        row: TimelineRow;
+        start: number;
+        end: number;
+    }) => void;
+    /**
+     * @description 开始改变大小回调
+     */
+    onActionResizeStart?: (params: {
+        action: TimelineAction;
+        row: TimelineRow;
+        dir: 'right' | 'left';
+    }) => void;
+    /**
+     * @description 开始大小回调（return false可阻止改变）
+     */
+    onActionResizing?: (params: {
+        action: TimelineAction;
+        row: TimelineRow;
+        start: number;
+        end: number;
+        dir: 'right' | 'left';
+    }) => void | boolean;
+    /**
+     * @description 改变大小结束回调（return false可阻止onChange触发）
+     */
+    onActionResizeEnd?: (params: {
+        action: TimelineAction;
+        row: TimelineRow;
+        start: number;
+        end: number;
+        dir: 'right' | 'left';
+    }) => void;
+    /**
+     * @description 点击行回调
+     */
+    onClickRow?: (e: React.MouseEvent<HTMLElement, MouseEvent>, param: {
+        row: TimelineRow;
+        time: number;
+    }) => void;
+    /**
+     * @description 点击动作回调
+     */
+    onClickAction?: (e: React.MouseEvent<HTMLElement, MouseEvent>, param: {
+        action: TimelineAction;
+        row: TimelineRow;
+        time: number;
+    }) => void;
+    /**
+     * @description 点击动作回调（触发drag时不执行）
+     */
+    onClickActionOnly?: (e: React.MouseEvent<HTMLElement, MouseEvent>, param: {
+        action: TimelineAction;
+        row: TimelineRow;
+        time: number;
+    }) => void;
+    /**
+     * @description 双击行回调
+     */
+    onDoubleClickRow?: (e: React.MouseEvent<HTMLElement, MouseEvent>, param: {
+        row: TimelineRow;
+        time: number;
+    }) => void;
+    /**
+     * @description 双击动作回调
+     */
+    onDoubleClickAction?: (e: React.MouseEvent<HTMLElement, MouseEvent>, param: {
+        action: TimelineAction;
+        row: TimelineRow;
+        time: number;
+    }) => void;
+    /**
+     * @description 右键行回调
+     */
+    onContextMenuRow?: (e: React.MouseEvent<HTMLElement, MouseEvent>, param: {
+        row: TimelineRow;
+        time: number;
+    }) => void;
+    /**
+     * @description 右键动作回调
+     */
+    onContextMenuAction?: (e: React.MouseEvent<HTMLElement, MouseEvent>, param: {
+        action: TimelineAction;
+        row: TimelineRow;
+        time: number;
+    }) => void;
+    /**
+     * @description 获取要提示辅助线的action id列表，在move/resize start 时进行计算，默认获取除当前移动action的全部
+     */
+    getAssistDragLineActionIds?: (params: {
+        action: TimelineAction;
+        editorData: TimelineRow[];
+        row: TimelineRow;
+    }) => string[];
+    /**
+     * @description cursor开始拖拽事件
+     */
+    onCursorDragStart?: (time: number) => void;
+    /**
+     * @description cursor结束拖拽事件
+     */
+    onCursorDragEnd?: (time: number) => void;
+    /**
+     * @description cursor拖拽事件
+     */
+    onCursorDrag?: (time: number) => void;
+    /**
+     * @description 点击时间区域事件, 返回false时阻止设置时间
+     */
+    onClickTimeArea?: (time: number, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => boolean | undefined;
+}
+export interface TimelineState {
+    /** dom节点 */
+    target: HTMLElement;
+    /** 运行监听器 */
+    listener: Emitter<EventTypes>;
+    /** 是否正在播放 */
+    isPlaying: boolean;
+    /** 是否暂停中 */
+    isPaused: boolean;
+    /** 设置当前播放时间 */
+    setTime: (time: number) => void;
+    /** 获取当前播放时间 */
+    getTime: () => number;
+    /** 设置播放速率 */
+    setPlayRate: (rate: number) => void;
+    /** 设置播放速率 */
+    getPlayRate: () => number;
+    /** 重新渲染当前时间 */
+    reRender: () => void;
+    /** 播放 */
+    play: (param: {
+        /** 默认从头运行到尾, 优先级大于autoEnd */
+        toTime?: number;
+        /** 是否播放完后自动结束 */
+        autoEnd?: boolean;
+        /** 运行的actionId列表，不穿默认全部运行 */
+        runActionIds?: string[];
+    }) => boolean;
+    /** 暂停 */
+    pause: () => void;
+    /** 设置scroll left */
+    setScrollLeft: (val: number) => void;
+    /** 设置scroll top */
+    setScrollTop: (val: number) => void;
+}
+/**
+ * 动画编辑器参数
+ * @export
+ * @interface TimelineProp
+ */
+export interface TimelineEditor extends EditData {
+    /**
+     * @description 编辑区域距离顶部滚动距离 (请使用ref.setScrollTop代替)
+     * @deprecated
+     */
+    scrollTop?: number;
+    /**
+     * @description 编辑区域滚动回调 (用于控制与编辑行滚动同步)
+     */
+    onScroll?: (params: OnScrollParams) => void;
+    /**
+     * @description 拖拽时是否启动自动滚动
+     * @default false
+     */
+    autoScroll?: boolean;
+    /**
+     * @description 自定义timeline样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * @description 是否自动重新渲染（当数据改变或光标时间改变时update tick）
+     * @default true
+     */
+    autoReRender?: boolean;
+    /**
+     * @description 数据改变回调，会在操作动作end改变数据后触发(返回false会阻止自动engine同步，用于减少性能开销)
+     */
+    onChange?: (editorData: TimelineRow[]) => void | boolean;
+}

package/dist/utils/check_props.d.ts

@@ -0,0 +1,2 @@
+import { TimelineEditor } from "../interface/timeline";
+export declare function checkProps(props: TimelineEditor): TimelineEditor;

package/dist/utils/deal_class_prefix.d.ts

@@ -0,0 +1 @@
+export declare function prefix(...classNames: string[]): string;

package/dist/utils/deal_data.d.ts

@@ -0,0 +1,53 @@
+import { TimelineAction, TimelineRow } from "../interface/action";
+/** 时间转像素 */
+export declare function parserTimeToPixel(data: number, param: {
+    startLeft: number;
+    scale: number;
+    scaleWidth: number;
+}): number;
+/** 像素转时间 */
+export declare function parserPixelToTime(data: number, param: {
+    startLeft: number;
+    scale: number;
+    scaleWidth: number;
+}): number;
+/** 位置 + 宽度 转 start + end */
+export declare function parserTransformToTime(data: {
+    left: number;
+    width: number;
+}, param: {
+    startLeft: number;
+    scale: number;
+    scaleWidth: number;
+}): {
+    start: number;
+    end: number;
+};
+/** start + end 转 位置 + 宽度 */
+export declare function parserTimeToTransform(data: {
+    start: number;
+    end: number;
+}, param: {
+    startLeft: number;
+    scale: number;
+    scaleWidth: number;
+}): {
+    left: number;
+    width: number;
+};
+/** 根据数据获取刻度个数 */
+export declare function getScaleCountByRows(data: TimelineRow[], param: {
+    scale: number;
+}): number;
+/** 根据时间获取目前刻度数 */
+export declare function getScaleCountByPixel(data: number, param: {
+    startLeft: number;
+    scaleWidth: number;
+    scaleCount: number;
+}): number;
+/** 获取动作全部时间的位置集合 */
+export declare function parserActionsToPositions(actions: TimelineAction[], param: {
+    startLeft: number;
+    scale: number;
+    scaleWidth: number;
+}): number[];

package/dist/utils/logger.d.ts

@@ -0,0 +1,132 @@
+export declare enum LogLevel {
+    VERBOSE = 0,
+    LOG = 1,
+    INFO = 2,
+    WARN = 3,
+    ERROR = 4,
+    FATAL = 5,
+    SILENT = Infinity
+}
+export declare const LogLevels: {
+    VERBOSE: LogLevel;
+    LOG: LogLevel;
+    INFO: LogLevel;
+    WARN: LogLevel;
+    ERROR: LogLevel;
+    SILENT: LogLevel;
+};
+export default class ConsoleLogger {
+    static readonly instances: ConsoleLogger[];
+    static level: LogLevel;
+    static Levels: {
+        VERBOSE: LogLevel;
+        LOG: LogLevel;
+        INFO: LogLevel;
+        WARN: LogLevel;
+        ERROR: LogLevel;
+        SILENT: LogLevel;
+    };
+    static noColor: boolean;
+    Levels: {
+        VERBOSE: LogLevel;
+        LOG: LogLevel;
+        INFO: LogLevel;
+        WARN: LogLevel;
+        ERROR: LogLevel;
+        SILENT: LogLevel;
+    };
+    level: LogLevel;
+    prefix: string;
+    enabled: boolean;
+    debugColor: string;
+    logColor: string;
+    infoColor: string;
+    warnColor: string;
+    errorColor: string;
+    fatalColor: string;
+    /**
+     * ConsoleLogger
+     * @param   {string}  prefix  Logger prefix
+     * @return  {ConsoleLogger}
+     */
+    constructor(prefix: string);
+    static setLevel(level: LogLevel): void;
+    static enable(level?: LogLevel): void;
+    static disable(): void;
+    /**
+     * set logger prefix
+     * @param prefix
+     */
+    setPrefix(prefix: string): void;
+    /**
+     * enable logger with optional log level
+     * @param level
+     */
+    enable(level?: LogLevel): void;
+    /**
+     * disable logger
+     */
+    disable(): void;
+    /**
+     * Set log level
+     * @param   {LogLevel}  level
+     * @return  {void}
+     */
+    setLevel(level: LogLevel): void;
+    /**
+     * trace
+     * @param title
+     * @param args
+     */
+    trace(title: string, ...args: any[]): void;
+    /**
+     * debug
+     * @param title
+     * @param args
+     */
+    debug(title: string, ...args: any[]): void;
+    /**
+     * log
+     * @param title
+     * @param args
+     */
+    log(title: string, ...args: any[]): void;
+    /**
+     * info
+     * @param title
+     * @param args
+     */
+    info(title: string, ...args: any[]): void;
+    /**
+     * warn
+     * @param title
+     * @param args
+     */
+    warn(title: string, ...args: any[]): void;
+    /**
+     * error
+     * @param title
+     * @param args
+     */
+    error(title: string, ...args: any[]): void;
+    /**
+     * fatal error
+     * @param title
+     * @param args
+     */
+    fatal(title: string, ...args: any[]): void;
+    /**
+     * start a group with label
+     * @param label
+     */
+    group(...label: any[]): void;
+    /**
+     * end a group
+     */
+    groupEnd(): void;
+    /**
+     * collapse log group
+     * @param label
+     */
+    groupCollapsed(...label: any[]): void;
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "sense-react-timeline-editor",
+  "version": "1.0.0",
+  "author": "xzdarcy",
+  "license": "MIT",
+  "keywords": [
+    "timeline",
+    "animation",
+    "editor",
+    "react",
+    "typescript"
+  ],
+  "bugs": {
+    "url": "https://github.com/xzdarcy/react-timeline-editor/issues"
+  },
+  "homepage": "https://github.com/xzdarcy/react-timeline-editor#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xzdarcy/react-timeline-editor.git"
+  },
+  "scripts": {
+    "start": "NODE_OPTIONS=--openssl-legacy-provider dumi dev",
+    "docs:build": "dumi build",
+    "docs:deploy": "",
+    "build": "father-build",
+    "deploy": "npm run docs:build && npm run docs:deploy",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts",
+  "peerDependencies": {
+    "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@interactjs/types": "^1.10.11",
+    "@types/react-virtualized": "^9.21.14",
+    "framework-utils": "^1.1.0",
+    "interactjs": "^1.10.11",
+    "react-virtualized": "^9.22.3"
+  },
+  "devDependencies": {
+    "@types/howler": "^2.2.4",
+    "@types/lodash": "^4.14.177",
+    "@types/react": "^17.0.17",
+    "@types/react-dom": "^17.0.17",
+    "@umijs/test": "^3.0.5",
+    "antd": "^4.16.13",
+    "dumi": "^1.0.17",
+    "father-build": "^1.17.2",
+    "gh-pages": "^3.0.0",
+    "howler": "^2.2.3",
+    "lint-staged": "^10.0.7",
+    "lodash": "^4.17.21",
+    "lottie-web": "^5.8.1",
+    "prettier": "^2.2.1",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "typescript": "^4.8.4",
+    "yorkie": "^2.0.0"
+  }
+}