sense-react-timeline-editor 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 zdarcy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+# React Timeline Editor
+[![npm version](https://img.shields.io/npm/v/@xzdarcy/react-timeline-editor.svg?style=flat-square)](https://www.npmjs.com/package/@xzdarcy/react-timeline-editor)
+[![npm downloads](https://img.shields.io/npm/dm/@xzdarcy/react-timeline-editor.svg?style=flat-square)](https://www.npmjs.com/package/@xzdarcy/react-timeline-editor)
+
+**[React Timeline Editor](https://zdarcy.com/)** is a react component used to quickly build a timeline animation editor.
+
+![example](https://github.com/xzdarcy/react-timeline-editor/blob/f79d85eee8a723e5210c04232daf2c51888418c0/public/assets/timeline.gif)
+## Getting Started
+
+```bash
+npm install @xzdarcy/react-timeline-editor
+```
+
+```ts
+import { Timeline, TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor';
+import React from 'react';
+
+const mockData: TimelineRow[] = [{
+    id: "0",
+    actions: [
+      {
+        id: "action00",
+        start: 0,
+        end: 2,
+        effectId: "effect0",
+      },
+    ],
+  },
+  {
+    id: "1",
+    actions: [
+      {
+        id: "action10",
+        start: 1.5,
+        end: 5,
+        effectId: "effect1",
+      }
+    ],
+}]
+
+const mockEffect: Record<string, TimelineEffect> = {
+  effect0: {
+    id: "effect0",
+    name: "效果0",
+  },
+  effect1: {
+    id: "effect1",
+    name: "效果1",
+  },
+};
+
+const TimelineEditor = () => {
+  return (
+      <Timeline
+        editorData={mockData}
+        effects={mockEffect}
+      />
+  );
+};
+```
+
+## Documention
+Checkout the [Docs](https://zdarcy.com/) for a demonstration of some basic and advanced features.
+

package/dist/components/cursor/cursor.d.ts

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { ScrollSync } from 'react-virtualized';
+import { CommonProp } from '../../interface/common_prop';
+import './cursor.less';
+/** 动画时间轴组件参数 */
+export declare type CursorProps = CommonProp & {
+    /** 距离左侧滚动距离 */
+    scrollLeft: number;
+    /** 设置光标位置 */
+    setCursor: (param: {
+        left?: number;
+        time?: number;
+    }) => boolean;
+    /** 时间轴区域dom ref */
+    areaRef: React.MutableRefObject<HTMLDivElement>;
+    /** 设置scroll left */
+    deltaScrollLeft: (delta: number) => void;
+    /** 滚动同步ref（TODO: 该数据用于临时解决scrollLeft拖住时不同步问题） */
+    scrollSync: React.MutableRefObject<ScrollSync>;
+};
+export declare const Cursor: FC<CursorProps>;

package/dist/components/edit_area/drag_lines.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import './drag_lines.less';
+export interface DragLineData {
+    isMoving: boolean;
+    movePositions: number[];
+    assistPositions: number[];
+}
+export declare type DragLineProps = DragLineData & {
+    scrollLeft: number;
+};
+/** 拖拽辅助线 */
+export declare const DragLines: FC<DragLineProps>;

package/dist/components/edit_area/edit_action.d.ts

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import { TimelineAction, TimelineRow } from '../../interface/action';
+import { CommonProp } from '../../interface/common_prop';
+import { DragLineData } from './drag_lines';
+import './edit_action.less';
+export declare type EditActionProps = CommonProp & {
+    row: TimelineRow;
+    action: TimelineAction;
+    dragLineData: DragLineData;
+    setEditorData: (params: TimelineRow[]) => void;
+    handleTime: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => number;
+    areaRef: React.MutableRefObject<HTMLDivElement>;
+    /** 设置scroll left */
+    deltaScrollLeft?: (delta: number) => void;
+};
+export declare const EditAction: FC<EditActionProps>;

package/dist/components/edit_area/edit_area.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { OnScrollParams } from 'react-virtualized';
+import { TimelineRow } from '../../interface/action';
+import { CommonProp } from '../../interface/common_prop';
+import './edit_area.less';
+export declare type EditAreaProps = CommonProp & {
+    /** 距离左侧滚动距离 */
+    scrollLeft: number;
+    /** 距离顶部滚动距离 */
+    scrollTop: number;
+    /** 滚动回调，用于同步滚动 */
+    onScroll: (params: OnScrollParams) => void;
+    /** 设置编辑器数据 */
+    setEditorData: (params: TimelineRow[]) => void;
+    /** 设置scroll left */
+    deltaScrollLeft: (scrollLeft: number) => void;
+};
+/** edit area ref数据 */
+export interface EditAreaState {
+    domRef: React.MutableRefObject<HTMLDivElement>;
+}
+export declare const EditArea: React.ForwardRefExoticComponent<CommonProp & {
+    /** 距离左侧滚动距离 */
+    scrollLeft: number;
+    /** 距离顶部滚动距离 */
+    scrollTop: number;
+    /** 滚动回调，用于同步滚动 */
+    onScroll: (params: OnScrollParams) => void;
+    /** 设置编辑器数据 */
+    setEditorData: (params: TimelineRow[]) => void;
+    /** 设置scroll left */
+    deltaScrollLeft: (scrollLeft: number) => void;
+} & React.RefAttributes<EditAreaState>>;

package/dist/components/edit_area/edit_row.d.ts

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+import { TimelineRow } from '../../interface/action';
+import { CommonProp } from '../../interface/common_prop';
+import { DragLineData } from './drag_lines';
+import './edit_row.less';
+export declare type EditRowProps = CommonProp & {
+    areaRef: React.MutableRefObject<HTMLDivElement>;
+    rowData?: TimelineRow;
+    style?: React.CSSProperties;
+    dragLineData: DragLineData;
+    setEditorData: (params: TimelineRow[]) => void;
+    /** 距离左侧滚动距离 */
+    scrollLeft: number;
+    /** 设置scroll left */
+    deltaScrollLeft: (scrollLeft: number) => void;
+};
+export declare const EditRow: FC<EditRowProps>;

package/dist/components/edit_area/hooks/use_drag_line.d.ts

@@ -0,0 +1,33 @@
+import { TimelineAction, TimelineRow } from "../../../interface/action";
+import { DragLineData } from "../drag_lines";
+export declare function useDragLine(): {
+    initDragLine: (data: {
+        movePositions?: number[];
+        assistPositions?: number[];
+    }) => void;
+    updateDragLine: (data: {
+        movePositions?: number[];
+        assistPositions?: number[];
+    }) => void;
+    disposeDragLine: () => void;
+    dragLineData: DragLineData;
+    defaultGetAssistPosition: (data: {
+        editorData: TimelineRow[];
+        assistActionIds?: string[];
+        action: TimelineAction;
+        row: TimelineRow;
+        startLeft: number;
+        scale: number;
+        scaleWidth: number;
+        hideCursor: boolean;
+        cursorLeft: number;
+    }) => number[];
+    defaultGetMovePosition: (data: {
+        start: number;
+        end: number;
+        dir?: "right" | "left";
+        startLeft: number;
+        scale: number;
+        scaleWidth: number;
+    }) => number[];
+};

package/dist/components/row_rnd/hooks/useAutoScroll.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DragEvent, ResizeEvent } from '@interactjs/types/index';
+export declare function useAutoScroll(target: React.MutableRefObject<HTMLDivElement>): {
+    initAutoScroll: () => void;
+    dealDragAutoScroll: (e: DragEvent, deltaScroll?: (delta: number) => void) => boolean;
+    dealResizeAutoScroll: (e: ResizeEvent, dir: 'left' | 'right', deltaScroll?: (delta: number) => void) => boolean;
+    stopAutoScroll: () => void;
+};

package/dist/components/row_rnd/interactable.d.ts

@@ -0,0 +1,11 @@
+import { DraggableOptions } from "@interactjs/actions/drag/plugin";
+import { ResizableOptions } from "@interactjs/actions/resize/plugin";
+import { Interactable } from "@interactjs/types";
+import { FC } from "react";
+export declare const InteractComp: FC<{
+    interactRef?: React.MutableRefObject<Interactable>;
+    draggable: boolean;
+    draggableOptions: DraggableOptions;
+    resizable: boolean;
+    resizableOptions: ResizableOptions;
+}>;

package/dist/components/row_rnd/row_rnd.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { RowRndApi, RowRndProps } from './row_rnd_interface';
+export declare const RowDnd: React.ForwardRefExoticComponent<RowRndProps & React.RefAttributes<RowRndApi>>;

package/dist/components/row_rnd/row_rnd_interface.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+declare type EventData = {
+    lastLeft: number;
+    left: number;
+    lastWidth: number;
+    width: number;
+    lastTop?: number;
+    top?: number;
+    lastHeight?: number;
+    height?: number;
+};
+export declare type RndDragStartCallback = () => void;
+export declare type RndDragCallback = (data: EventData, scrollDelta?: number) => boolean | void;
+export declare type RndDragEndCallback = (data: Pick<EventData, 'left' | 'width' | 'top' | 'height'>) => void;
+export declare type Direction = "left" | "right";
+export declare type RndResizeStartCallback = (dir: Direction) => void;
+export declare type RndResizeCallback = (dir: Direction, data: EventData) => boolean | void;
+export declare type RndResizeEndCallback = (dir: Direction, data: Pick<EventData, 'left' | 'width' | 'top' | 'height'>) => void;
+export interface RowRndApi {
+    updateWidth: (size: number) => void;
+    updateLeft: (left: number) => void;
+    updateHeight: (size: number) => void;
+    updateTop: (top: number) => void;
+    getLeft: () => number;
+    getWidth: () => number;
+    getTop: () => number;
+    getHeight: () => number;
+}
+export interface RowRndProps {
+    width?: number;
+    left?: number;
+    height?: number;
+    top?: number;
+    grid?: number;
+    start?: number;
+    bounds?: {
+        left: number;
+        right: number;
+        top?: number;
+        bottom?: number;
+    };
+    edges?: {
+        left: boolean | string;
+        right: boolean | string;
+    };
+    onResizeStart?: RndResizeStartCallback;
+    onResize?: RndResizeCallback;
+    onResizeEnd?: RndResizeEndCallback;
+    onDragStart?: RndDragStartCallback;
+    onDrag?: RndDragCallback;
+    onDragEnd?: RndDragEndCallback;
+    parentRef?: React.MutableRefObject<HTMLDivElement>;
+    deltaScrollLeft?: (delta: number) => void;
+    children?: React.ReactNode;
+    enableResizing?: boolean;
+    enableDragging?: boolean;
+    adsorptionPositions?: number[];
+    adsorptionDistance?: number;
+}
+export {};

package/dist/components/time_area/time_area.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { OnScrollParams } from 'react-virtualized';
+import { CommonProp } from '../../interface/common_prop';
+import './time_area.less';
+/** 动画时间轴组件参数 */
+export declare type TimeAreaProps = CommonProp & {
+    /** 左侧滚动距离 */
+    scrollLeft: number;
+    /** 滚动回调，用于同步滚动 */
+    onScroll: (params: OnScrollParams) => void;
+    /** 设置光标位置 */
+    setCursor: (param: {
+        left?: number;
+        time?: number;
+    }) => void;
+};
+/** 动画时间轴组件 */
+export declare const TimeArea: FC<TimeAreaProps>;

package/dist/components/timeline.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TimelineEditor, TimelineState } from '../interface/timeline';
+import './timeline.less';
+export declare const Timeline: React.ForwardRefExoticComponent<TimelineEditor & React.RefAttributes<TimelineState>>;

package/dist/engine/emitter.d.ts

@@ -0,0 +1,16 @@
+import { Events } from './events';
+/**
+ * 事件派发器
+ */
+export declare class Emitter<EventTypes> {
+    events: {
+        [key: string]: CallableFunction[];
+    };
+    constructor(events: Events);
+    on<K extends keyof EventTypes>(names: K | K[], handler: (args: EventTypes[K]) => boolean | unknown): this;
+    trigger<K extends keyof EventTypes>(name: K, params: EventTypes[K]): boolean;
+    bind(name: string): void;
+    exist(name: string): boolean;
+    off<K extends keyof EventTypes>(name: K, handler?: (args: EventTypes[K]) => boolean | unknown): void;
+    offAll(): void;
+}

package/dist/engine/engine.d.ts

@@ -0,0 +1,125 @@
+import { TimelineRow } from '../interface/action';
+import { TimelineEffect } from '../interface/effect';
+import { Emitter } from './emitter';
+import { EventTypes } from './events';
+export interface ITimelineEngine extends Emitter<EventTypes> {
+    readonly isPlaying: boolean;
+    readonly isPaused: boolean;
+    effects: Record<string, TimelineEffect>;
+    data: TimelineRow[];
+    /** 设置播放速率 */
+    setPlayRate(rate: number): boolean;
+    /** 获取播放速率 */
+    getPlayRate(): number;
+    /** 重新渲染当前时间 */
+    reRender(): void;
+    /** 设置播放时间 */
+    setTime(time: number, isTick?: boolean): boolean;
+    /** 获取播放时间 */
+    getTime(): number;
+    /** 播放 */
+    play(param: {
+        /** 默认从头运行到尾, 优先级大于autoEnd */
+        toTime?: number;
+        /** 是否播放完后自动结束 */
+        autoEnd?: boolean;
+    }): boolean;
+    /** 暂停 */
+    pause(): void;
+}
+/**
+ * 时间轴播放器
+ * 可脱离编辑器单独运行
+ * @export
+ * @class TimelineEngine
+ * @extends {Emitter<EventTypes>}
+ */
+export declare class TimelineEngine extends Emitter<EventTypes> implements ITimelineEngine {
+    constructor();
+    /** requestAnimationFrame timerId */
+    private _timerId;
+    /** 播放速率 */
+    private _playRate;
+    /** 当前时间 */
+    private _currentTime;
+    /** 播放状态 */
+    private _playState;
+    /** 时间帧pre数据 */
+    private _prev;
+    /** 动作效果map */
+    private _effectMap;
+    /** 需要运行的动作map */
+    private _actionMap;
+    /** 按动作开始时间正序排列后的动作id数组 */
+    private _actionSortIds;
+    /** 当前遍历到的action index */
+    private _next;
+    /** 动作时间范围包含当前时间的actionId列表 */
+    private _activeActionIds;
+    /** 是否正在播放 */
+    get isPlaying(): boolean;
+    /** 是否暂停中 */
+    get isPaused(): boolean;
+    set effects(effects: Record<string, TimelineEffect>);
+    set data(data: TimelineRow[]);
+    /**
+     * 设置播放速率
+     * @memberof TimelineEngine
+     */
+    setPlayRate(rate: number): boolean;
+    /**
+     * 获取播放速率
+     * @memberof TimelineEngine
+     */
+    getPlayRate(): number;
+    /**
+     * 重新渲染当前时间
+     * @return {*}
+     * @memberof TimelineEngine
+     */
+    reRender(): void;
+    /**
+     * 设置播放时间
+     * @param {number} time
+     * @param {boolean} [isTick] 是否是tick触发
+     * @memberof TimelineEngine
+     */
+    setTime(time: number, isTick?: boolean): boolean;
+    /**
+     * 获取当前时间
+     * @return {*}  {number}
+     * @memberof TimelineEngine
+     */
+    getTime(): number;
+    /**
+     * 运行: 开始时间为当前time
+     * @param param
+     * @return {boolean} {boolean}
+     */
+    play(param: {
+        /** 默认从头运行到尾, 优先级大于autoEnd */
+        toTime?: number;
+        /** 是否播放完后自动结束 */
+        autoEnd?: boolean;
+    }): boolean;
+    /**
+     * 暂停播放
+     * @memberof TimelineEngine
+     */
+    pause(): void;
+    /** 播放完成 */
+    private _end;
+    private _startOrStop;
+    /** 每帧执行 */
+    private _tick;
+    /** tick运行actions */
+    private _tickAction;
+    /** 重置active数据 */
+    private _dealClear;
+    /** 处理action time enter */
+    private _dealEnter;
+    /** 处理action time leave */
+    private _dealLeave;
+    /** 处理数据 */
+    private _dealData;
+}

package/dist/engine/events.d.ts

@@ -0,0 +1,77 @@
+import { TimelineEngine } from "./engine";
+export declare class Events {
+    handlers: {};
+    constructor(handlers?: {});
+}
+export interface EventTypes {
+    /**
+     * 设置时间前(手动)
+     * @type {{ time: number, engine: TimelineEngine }}
+     * @memberof EventTypes
+     */
+    beforeSetTime: {
+        time: number;
+        engine: TimelineEngine;
+    };
+    /**
+     * 设置时间后(手动)
+     * @type {{ time: number, engine: TimelineEngine }}
+     * @memberof EventTypes
+     */
+    afterSetTime: {
+        time: number;
+        engine: TimelineEngine;
+    };
+    /**
+     * tick设置时间后
+     * @type {{ time: number, engine: TimelineEngine }}
+     * @memberof EventTypes
+     */
+    setTimeByTick: {
+        time: number;
+        engine: TimelineEngine;
+    };
+    /**
+     * 设置运行速率前
+     * return false 将阻止设置速率
+     * @type {{ speed: number, engine: TimelineEngine }}
+     * @memberof EventTypes
+     */
+    beforeSetPlayRate: {
+        rate: number;
+        engine: TimelineEngine;
+    };
+    /**
+     * 设置运行速率后
+     * @type {{ speed: number, engine: TimelineEngine }}
+     * @memberof EventTypes
+     */
+    afterSetPlayRate: {
+        rate: number;
+        engine: TimelineEngine;
+    };
+    /**
+     * 运行
+     * @type {{engine: TimelineEngine}}
+     * @memberof EventTypes
+     */
+    play: {
+        engine: TimelineEngine;
+    };
+    /**
+     * 停止
+     * @type {{ engine: TimelineEngine }}
+     * @memberof EventTypes
+     */
+    paused: {
+        engine: TimelineEngine;
+    };
+    /**
+     * 运行结束
+     * @type {{ engine: TimelineEngine }}
+     * @memberof EventTypes
+     */
+    ended: {
+        engine: TimelineEngine;
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components/timeline';
+export * from './interface/timeline';
+export * from './engine/engine';