diff --git a/README.md b/README.md index 238cef3..ada8155 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,17 @@ # 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) +This repo is forked from [xzdarcy/react-timeline-editor](https://github.com/xzdarcy/react-timeline-editor) +[![npm version](https://img.shields.io/npm/v/@rakesh.rk1/react-timeline-editor.svg?style=flat-square)](https://www.npmjs.com/package/@rakesh.rk1/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 +npm i @rakesh.rk1/react-timeline-editor ``` ```ts -import { Timeline, TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor'; +import { Timeline, TimelineEffect, TimelineRow } from '@rakesh.rk1/react-timeline-editor'; import React from 'react'; const mockData: TimelineRow[] = [{ diff --git a/docs/editor-demo/editor-action-config/custom.tsx b/docs/editor-demo/editor-action-config/custom.tsx index c7e9613..26b3499 100644 --- a/docs/editor-demo/editor-action-config/custom.tsx +++ b/docs/editor-demo/editor-action-config/custom.tsx @@ -1,22 +1,20 @@ import React, { FC } from 'react'; -import { TimelineAction, TimelineRow } from '@xzdarcy/react-timeline-editor'; +import { TimelineAction, TimelineRow } from '@rakesh.rk1/react-timeline-editor'; -export const CustomRender0: FC<{ action: TimelineAction; row: TimelineRow }> = - ({ action, row }) => { - return ( -
-
{`播放音频: ${( - action.end - action.start - ).toFixed(2)}s ${action.movable === false ? '（不可移动）' : ''} ${ - action.flexible === false ? '（不可缩放）' : '' - }`}
-
- ); - }; +export const CustomRender0: FC<{ action: TimelineAction; row: TimelineRow }> = ({ action, row }) => { + return ( +
+
{`播放音频: ${(action.end - action.start).toFixed(2)}s ${action.movable === false ? '（不可移动）' : ''} ${ + action.flexible === false ? '（不可缩放）' : '' + }`}
+
+ ); +}; -export const CustomRender1: FC<{ action: TimelineAction; row: TimelineRow }> = - ({ action, row }) => { - return
+export const CustomRender1: FC<{ action: TimelineAction; row: TimelineRow }> = ({ action, row }) => { + return ( +
-
; - }; +
+ ); +}; diff --git a/docs/editor-demo/editor-action-config/custom2.tsx b/docs/editor-demo/editor-action-config/custom2.tsx index 80d5738..5802436 100644 --- a/docs/editor-demo/editor-action-config/custom2.tsx +++ b/docs/editor-demo/editor-action-config/custom2.tsx @@ -1,13 +1,10 @@ import React, { FC } from 'react'; -import { TimelineAction, TimelineRow } from '@xzdarcy/react-timeline-editor'; +import { TimelineAction, TimelineRow } from '@rakesh.rk1/react-timeline-editor'; -export const CustomRender0: FC<{ action: TimelineAction; row: TimelineRow }> = - ({ action, row }) => { - return ( -
-
{`${typeof action.minStart === 'number' ? 'minStart:' + action.minStart : ''} ${ - typeof action.maxEnd === 'number' ? 'maxEnd:' + action.maxEnd : '' - }`}
-
- ); - }; \ No newline at end of file +export const CustomRender0: FC<{ action: TimelineAction; row: TimelineRow }> = ({ action, row }) => { + return ( +
+
{`${typeof action.minStart === 'number' ? 'minStart:' + action.minStart : ''} ${typeof action.maxEnd === 'number' ? 'maxEnd:' + action.maxEnd : ''}`}
+
+ ); +}; diff --git a/docs/editor-demo/editor-action-config/index.tsx b/docs/editor-demo/editor-action-config/index.tsx index 4e534b7..50f4664 100644 --- a/docs/editor-demo/editor-action-config/index.tsx +++ b/docs/editor-demo/editor-action-config/index.tsx @@ -1,4 +1,4 @@ -import { Timeline } from '@xzdarcy/react-timeline-editor'; +import { Timeline } from '@rakesh.rk1/react-timeline-editor'; import { cloneDeep } from 'lodash'; import React, { useState } from 'react'; import { CustomRender0, CustomRender1 } from './custom'; @@ -18,10 +18,10 @@ const TimelineEditor = () => { effects={mockEffect} hideCursor={false} getActionRender={(action, row) => { - if(action.effectId === 'effect0') { - return + if (action.effectId === 'effect0') { + return ; } else if (action.effectId === 'effect1') { - return + return ; } }} /> diff --git a/docs/editor-demo/editor-action-config/index2.tsx b/docs/editor-demo/editor-action-config/index2.tsx index 847fa08..108bd82 100644 --- a/docs/editor-demo/editor-action-config/index2.tsx +++ b/docs/editor-demo/editor-action-config/index2.tsx @@ -1,4 +1,4 @@ -import { Timeline } from '@xzdarcy/react-timeline-editor'; +import { Timeline } from '@rakesh.rk1/react-timeline-editor'; import { cloneDeep } from 'lodash'; import React, { useState } from 'react'; import { CustomRender0 } from './custom2'; diff --git a/docs/editor-demo/editor-action-config/mock.ts b/docs/editor-demo/editor-action-config/mock.ts index 085a0df..82e7ee7 100644 --- a/docs/editor-demo/editor-action-config/mock.ts +++ b/docs/editor-demo/editor-action-config/mock.ts @@ -1,86 +1,85 @@ -import { TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor'; +import { TimelineEffect, TimelineRow } from '@rakesh.rk1/react-timeline-editor'; export const mockEffect: Record = { effect0: { - id: "effect0", - name: "效果0", + id: 'effect0', + name: '效果0', }, effect1: { - id: "effect1", - name: "效果1", + id: 'effect1', + name: '效果1', }, }; - export const mockData: TimelineRow[] = [ { - id: "0", + id: '0', actions: [ { - id: "action00", + id: 'action00', start: 0, end: 2, - effectId: "effect0", + effectId: 'effect0', }, ], }, { - id: "1", + id: '1', actions: [ { - id: "action10", + id: 'action10', start: 3, end: 3, flexible: false, - effectId: "effect1", - } + effectId: 'effect1', + }, ], }, { - id: "2", + id: '2', actions: [ { - id: "action20", + id: 'action20', flexible: false, start: 2.3, end: 4.6, - effectId: "effect0", + effectId: 'effect0', }, ], }, { - id: "3", + id: '3', actions: [ { - id: "action30", + id: 'action30', start: 1.5, end: 1.5, - effectId: "effect0", - } + effectId: 'effect0', + }, ], }, { - id: "4", + id: '4', actions: [ { - id: "action40", + id: 'action40', start: 1, end: 1, flexible: false, - effectId: "effect1", - } + effectId: 'effect1', + }, ], }, { - id: "5", + id: '5', actions: [ { - id: "action50", + id: 'action50', movable: false, start: 1, end: 3, - effectId: "effect0", - } + effectId: 'effect0', + }, ], }, ]; diff --git a/docs/editor-demo/editor-action-config/mock2.ts b/docs/editor-demo/editor-action-config/mock2.ts index 1b44492..3ec4eb6 100644 --- a/docs/editor-demo/editor-action-config/mock2.ts +++ b/docs/editor-demo/editor-action-config/mock2.ts @@ -1,4 +1,4 @@ -import { TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor'; +import { TimelineEffect, TimelineRow } from '@rakesh.rk1/react-timeline-editor'; export const mockEffect: Record = { effect0: { diff --git a/docs/editor-demo/editor-auto-scroll/index.tsx b/docs/editor-demo/editor-auto-scroll/index.tsx index 6051a8d..0f6c9ff 100644 --- a/docs/editor-demo/editor-auto-scroll/index.tsx +++ b/docs/editor-demo/editor-auto-scroll/index.tsx @@ -1,4 +1,4 @@ -import { Timeline } from '@xzdarcy/react-timeline-editor'; +import { Timeline } from '@rakesh.rk1/react-timeline-editor'; import { Switch } from 'antd'; import { cloneDeep } from 'lodash'; import React, { useState } from 'react'; @@ -13,19 +13,8 @@ const TimelineEditor = () => { return (
- setAutoScroll(e)} - style={{ marginBottom: 20 }} - /> - + setAutoScroll(e)} style={{ marginBottom: 20 }} /> +
); }; diff --git a/docs/editor-demo/editor-auto-scroll/mock.ts b/docs/editor-demo/editor-auto-scroll/mock.ts index f98a26c..228ecf5 100644 --- a/docs/editor-demo/editor-auto-scroll/mock.ts +++ b/docs/editor-demo/editor-auto-scroll/mock.ts @@ -1,4 +1,4 @@ -import { TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor'; +import { TimelineEffect, TimelineRow } from @rakesh.rk1/react-timeline-editor; export const mockEffect: Record = { effect0: { diff --git a/docs/editor-demo/editor-auxiliary-line-snap/index.tsx b/docs/editor-demo/editor-auxiliary-line-snap/index.tsx index 46aff86..15316ec 100644 --- a/docs/editor-demo/editor-auxiliary-line-snap/index.tsx +++ b/docs/editor-demo/editor-auxiliary-line-snap/index.tsx @@ -1,4 +1,4 @@ -import { Timeline } from '@xzdarcy/react-timeline-editor'; +import { Timeline } from @rakesh.rk1/react-timeline-editor; import { Switch } from 'antd'; import { cloneDeep } from 'lodash'; import React, { useState } from 'react'; diff --git a/docs/editor-demo/editor-auxiliary-line-snap/mock.ts b/docs/editor-demo/editor-auxiliary-line-snap/mock.ts index bf169bc..aa4433a 100644 --- a/docs/editor-demo/editor-auxiliary-line-snap/mock.ts +++ b/docs/editor-demo/editor-auxiliary-line-snap/mock.ts @@ -1,4 +1,4 @@ -import { TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor'; +import { TimelineEffect, TimelineRow } from @rakesh.rk1/react-timeline-editor; export const mockEffect: Record = { effect0: { diff --git a/docs/editor-demo/editor-basic-event/index.tsx b/docs/editor-demo/editor-basic-event/index.tsx index f482c5f..a54df83 100644 --- a/docs/editor-demo/editor-basic-event/index.tsx +++ b/docs/editor-demo/editor-basic-event/index.tsx @@ -1,4 +1,4 @@ -import { Timeline, TimelineAction } from '@xzdarcy/react-timeline-editor'; +import { Timeline, TimelineAction } from @rakesh.rk1/react-timeline-editor; import { cloneDeep } from 'lodash'; import React, { useRef, useState } from 'react'; import './index.less'; diff --git a/docs/editor-demo/editor-basic-event/mock.ts b/docs/editor-demo/editor-basic-event/mock.ts index 24e6ebb..f34eb0c 100644 --- a/docs/editor-demo/editor-basic-event/mock.ts +++ b/docs/editor-demo/editor-basic-event/mock.ts @@ -1,4 +1,4 @@ -import { TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor'; +import { TimelineEffect, TimelineRow } from @rakesh.rk1/react-timeline-editor; export const mockEffect: Record = { effect0: { diff --git a/docs/editor-demo/editor-basic/disable.tsx b/docs/editor-demo/editor-basic/disable.tsx index bb12466..424cc83 100644 --- a/docs/editor-demo/editor-basic/disable.tsx +++ b/docs/editor-demo/editor-basic/disable.tsx @@ -1,4 +1,4 @@ -import { Timeline } from '@xzdarcy/react-timeline-editor'; +import { Timeline } from @rakesh.rk1/react-timeline-editor; import { Switch } from 'antd'; import { cloneDeep } from 'lodash'; import React, { useState } from 'react'; diff --git a/docs/editor-demo/editor-basic/hideCursor.tsx b/docs/editor-demo/editor-basic/hideCursor.tsx index 3af9c36..b014443 100644 --- a/docs/editor-demo/editor-basic/hideCursor.tsx +++ b/docs/editor-demo/editor-basic/hideCursor.tsx @@ -1,4 +1,4 @@ -import { Timeline } from '@xzdarcy/react-timeline-editor'; +import { Timeline } from @rakesh.rk1/react-timeline-editor; import { Switch } from 'antd'; import { cloneDeep } from 'lodash'; import React, { useState } from 'react'; diff --git a/docs/editor-demo/editor-basic/index.tsx b/docs/editor-demo/editor-basic/index.tsx index 695b7a9..5b4885a 100644 --- a/docs/editor-demo/editor-basic/index.tsx +++ b/docs/editor-demo/editor-basic/index.tsx @@ -1,4 +1,4 @@ -import { Timeline } from '@xzdarcy/react-timeline-editor'; +import { Timeline } from @rakesh.rk1/react-timeline-editor; import { cloneDeep } from 'lodash'; import React, { useEffect, useState } from 'react'; import './index.less'; diff --git a/docs/editor-demo/editor-basic/mock.ts b/docs/editor-demo/editor-basic/mock.ts index c4e7890..111137c 100644 --- a/docs/editor-demo/editor-basic/mock.ts +++ b/docs/editor-demo/editor-basic/mock.ts @@ -1,4 +1,4 @@ -import { TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor'; +import { TimelineEffect, TimelineRow } from @rakesh.rk1/react-timeline-editor; export const mockEffect: Record = { effect0: { diff --git a/docs/editor-demo/editor-callback/index.tsx b/docs/editor-demo/editor-callback/index.tsx index 90e1549..f31064f 100644 --- a/docs/editor-demo/editor-callback/index.tsx +++ b/docs/editor-demo/editor-callback/index.tsx @@ -1,4 +1,4 @@ -import { Timeline } from '@xzdarcy/react-timeline-editor'; +import { Timeline } from @rakesh.rk1/react-timeline-editor; import { cloneDeep } from 'lodash'; import React, { useState } from 'react'; import './index.less'; diff --git a/docs/editor-demo/editor-callback/mock.ts b/docs/editor-demo/editor-callback/mock.ts index 2a4057f..a9811f9 100644 --- a/docs/editor-demo/editor-callback/mock.ts +++ b/docs/editor-demo/editor-callback/mock.ts @@ -1,4 +1,4 @@ -import { TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor'; +import { TimelineEffect, TimelineRow } from @rakesh.rk1/react-timeline-editor; export const mockEffect: Record = { effect0: { diff --git a/docs/editor-demo/editor-custom-style/custom.tsx b/docs/editor-demo/editor-custom-style/custom.tsx index 653d230..05aa281 100644 --- a/docs/editor-demo/editor-custom-style/custom.tsx +++ b/docs/editor-demo/editor-custom-style/custom.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import { TimelineAction, TimelineRow } from '@xzdarcy/react-timeline-editor'; +import { TimelineAction, TimelineRow } from @rakesh.rk1/react-timeline-editor; export const CustomRender0: FC<{ action: TimelineAction; row: TimelineRow }> = ({ action, row }) => { diff --git a/docs/editor-demo/editor-custom-style/index.tsx b/docs/editor-demo/editor-custom-style/index.tsx index 87a8083..7e2d8ba 100644 --- a/docs/editor-demo/editor-custom-style/index.tsx +++ b/docs/editor-demo/editor-custom-style/index.tsx @@ -1,4 +1,4 @@ -import { Timeline } from '@xzdarcy/react-timeline-editor'; +import { Timeline } from @rakesh.rk1/react-timeline-editor; import { cloneDeep } from 'lodash'; import React, { useEffect, useState } from 'react'; import { CustomRender0, CustomRender1 } from './custom'; diff --git a/docs/editor-demo/editor-custom-style/mock.ts b/docs/editor-demo/editor-custom-style/mock.ts index f992ee2..9b62973 100644 --- a/docs/editor-demo/editor-custom-style/mock.ts +++ b/docs/editor-demo/editor-custom-style/mock.ts @@ -1,4 +1,4 @@ -import { TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor'; +import { TimelineEffect, TimelineRow } from @rakesh.rk1/react-timeline-editor; export const mockEffect: Record = { effect0: { diff --git a/docs/editor-demo/editor-grid-snap/index.tsx b/docs/editor-demo/editor-grid-snap/index.tsx index da7685e..92c58a8 100644 --- a/docs/editor-demo/editor-grid-snap/index.tsx +++ b/docs/editor-demo/editor-grid-snap/index.tsx @@ -1,4 +1,4 @@ -import { Timeline } from '@xzdarcy/react-timeline-editor'; +import { Timeline } from @rakesh.rk1/react-timeline-editor; import { Input, Row, Col, Switch } from 'antd'; import { cloneDeep } from 'lodash'; import React, { useState } from 'react'; diff --git a/docs/editor-demo/editor-grid-snap/mock.ts b/docs/editor-demo/editor-grid-snap/mock.ts index bf169bc..aa4433a 100644 --- a/docs/editor-demo/editor-grid-snap/mock.ts +++ b/docs/editor-demo/editor-grid-snap/mock.ts @@ -1,4 +1,4 @@ -import { TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor'; +import { TimelineEffect, TimelineRow } from @rakesh.rk1/react-timeline-editor; export const mockEffect: Record = { effect0: { diff --git a/docs/editor-demo/editor-scale-customization/custom.tsx b/docs/editor-demo/editor-scale-customization/custom.tsx index 786f849..974b898 100644 --- a/docs/editor-demo/editor-scale-customization/custom.tsx +++ b/docs/editor-demo/editor-scale-customization/custom.tsx @@ -1,4 +1,4 @@ -import { Timeline } from '@xzdarcy/react-timeline-editor'; +import { Timeline } from @rakesh.rk1/react-timeline-editor; import { cloneDeep } from 'lodash'; import React, { useState } from 'react'; import './index.less'; diff --git a/docs/editor-demo/editor-scale-customization/index.tsx b/docs/editor-demo/editor-scale-customization/index.tsx index 98daad2..2c951fd 100644 --- a/docs/editor-demo/editor-scale-customization/index.tsx +++ b/docs/editor-demo/editor-scale-customization/index.tsx @@ -1,4 +1,4 @@ -import { Timeline } from '@xzdarcy/react-timeline-editor'; +import { Timeline } from @rakesh.rk1/react-timeline-editor; import { Col, Input, Row } from 'antd'; import { cloneDeep } from 'lodash'; import React, { useState } from 'react'; diff --git a/docs/editor-demo/editor-scale-customization/mock.ts b/docs/editor-demo/editor-scale-customization/mock.ts index 611061a..c5c5117 100644 --- a/docs/editor-demo/editor-scale-customization/mock.ts +++ b/docs/editor-demo/editor-scale-customization/mock.ts @@ -1,4 +1,4 @@ -import { TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor'; +import { TimelineEffect, TimelineRow } from @rakesh.rk1/react-timeline-editor; export const mockEffect: Record = { effect0: { diff --git a/docs/editor-demo/editor-scroll-sync/index.tsx b/docs/editor-demo/editor-scroll-sync/index.tsx index 7db1536..93804c3 100644 --- a/docs/editor-demo/editor-scroll-sync/index.tsx +++ b/docs/editor-demo/editor-scroll-sync/index.tsx @@ -1,4 +1,4 @@ -import { Timeline, TimelineState } from '@xzdarcy/react-timeline-editor'; +import { Timeline, TimelineState } from @rakesh.rk1/react-timeline-editor; import { cloneDeep } from 'lodash'; import React, { useRef, useState } from 'react'; import './index.less'; diff --git a/docs/editor-demo/editor-scroll-sync/mock.ts b/docs/editor-demo/editor-scroll-sync/mock.ts index 1e7b56c..79052e4 100644 --- a/docs/editor-demo/editor-scroll-sync/mock.ts +++ b/docs/editor-demo/editor-scroll-sync/mock.ts @@ -1,4 +1,4 @@ -import { TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor'; +import { TimelineEffect, TimelineRow } from @rakesh.rk1/react-timeline-editor; export const mockEffect: Record = { effect0: { diff --git a/docs/engine/api.md b/docs/engine/api.md index c51c8a9..3a9ea1d 100644 --- a/docs/engine/api.md +++ b/docs/engine/api.md @@ -51,7 +51,7 @@ group: + autoEnd (可选): 是否在播完全部actions后自动停止 ```ts | pure -import { TimelineEngine } from '@xzdarcy/react-timeline-editor'; +import { TimelineEngine } from @rakesh.rk1/react-timeline-editor; const engine = new TimelineEngine(); engine.play({autoEnd: true}) ``` @@ -65,7 +65,7 @@ engine.play({autoEnd: true}) 你可以监听运行器提供的一些事件，并响应逻辑 ```ts | pure -import { TimelineEngine } from '@xzdarcy/react-timeline-editor'; +import { TimelineEngine } from @rakesh.rk1/react-timeline-editor; const engine = new TimelineEngine(); ``` diff --git a/docs/engine/engine-basic/audioControl.ts b/docs/engine/engine-basic/audioControl.ts index 00852d6..67a56ee 100644 --- a/docs/engine/engine-basic/audioControl.ts +++ b/docs/engine/engine-basic/audioControl.ts @@ -1,5 +1,5 @@ import { Howl } from 'howler'; -import { TimelineEngine } from '@xzdarcy/react-timeline-editor'; +import { TimelineEngine } from @rakesh.rk1/react-timeline-editor; class AudioControl { cacheMap: Record = {}; diff --git a/docs/engine/engine-basic/index.tsx b/docs/engine/engine-basic/index.tsx index 2341377..e657417 100644 --- a/docs/engine/engine-basic/index.tsx +++ b/docs/engine/engine-basic/index.tsx @@ -1,4 +1,4 @@ -import { Timeline, TimelineState } from '@xzdarcy/react-timeline-editor'; +import { Timeline, TimelineState } from @rakesh.rk1/react-timeline-editor; import { Switch } from 'antd'; import { cloneDeep } from 'lodash'; import React, { useRef, useState } from 'react'; diff --git a/docs/engine/engine-basic/mock.ts b/docs/engine/engine-basic/mock.ts index 02a2d2e..42be87c 100644 --- a/docs/engine/engine-basic/mock.ts +++ b/docs/engine/engine-basic/mock.ts @@ -1,4 +1,4 @@ -import { TimelineAction, TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor'; +import { TimelineAction, TimelineEffect, TimelineRow } from @rakesh.rk1/react-timeline-editor; import audioControl from './audioControl'; import lottieControl from './lottieControl'; diff --git a/docs/engine/engine-basic/player.tsx b/docs/engine/engine-basic/player.tsx index 09e0986..bdb91c2 100644 --- a/docs/engine/engine-basic/player.tsx +++ b/docs/engine/engine-basic/player.tsx @@ -1,5 +1,5 @@ import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons'; -import { TimelineState } from '@xzdarcy/react-timeline-editor'; +import { TimelineState } from @rakesh.rk1/react-timeline-editor; import { Select } from 'antd'; import React, { FC, useEffect, useState } from 'react'; import lottieControl from './lottieControl'; diff --git a/docs/engine/engine-standalone/audioControl.ts b/docs/engine/engine-standalone/audioControl.ts index 32622b8..a7831b0 100644 --- a/docs/engine/engine-standalone/audioControl.ts +++ b/docs/engine/engine-standalone/audioControl.ts @@ -1,4 +1,4 @@ -import { TimelineEngine } from '@xzdarcy/react-timeline-editor'; +import { TimelineEngine } from @rakesh.rk1/react-timeline-editor; import { Howl } from 'howler'; class AudioControl { diff --git a/docs/engine/engine-standalone/index.tsx b/docs/engine/engine-standalone/index.tsx index 2ac13dc..4c090bd 100644 --- a/docs/engine/engine-standalone/index.tsx +++ b/docs/engine/engine-standalone/index.tsx @@ -1,5 +1,5 @@ import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons'; -import { TimelineEngine } from '@xzdarcy/react-timeline-editor'; +import { TimelineEngine } from @rakesh.rk1/react-timeline-editor; import { Slider } from 'antd'; import React, { useEffect, useRef, useState } from 'react'; import './index.less'; diff --git a/docs/engine/engine-standalone/mock.ts b/docs/engine/engine-standalone/mock.ts index e7b828a..c36ecd3 100644 --- a/docs/engine/engine-standalone/mock.ts +++ b/docs/engine/engine-standalone/mock.ts @@ -1,4 +1,4 @@ -import { TimelineEffect, TimelineRow, TimelineAction } from '@xzdarcy/react-timeline-editor'; +import { TimelineEffect, TimelineRow, TimelineAction } from @rakesh.rk1/react-timeline-editor; import lottieControl from './lottieControl'; import audioControl from './audioControl'; diff --git a/docs/index.md b/docs/index.md index 2d9c4d7..e1d6659 100644 --- a/docs/index.md +++ b/docs/index.md @@ -6,30 +6,19 @@ toc: 'menu' ## react timeline editor -`react-timeline-editor` 是基于react开发的，用于快速搭建时间线编辑能力的组件。 +`react-timeline-editor` -主要可用于构建动画编辑器、视频编辑器等。 ![timeline](/assets/timeline.gif) -## ✨ 特性 - -- 🛠 支持拖拽、缩放模式，并提供方便的控制钩子。 -- 🔗 提供网格吸附能力、辅助线吸附等交互能力。 -- 🏷 自动识别动作长度，并无限滚动。 -- 🎨 可快速便捷定制样式。 -- 📡 提供强解藕的运行器能力，可脱离编辑器独立运行。 - -## 快速上手 - ``` -npm install @xzdarcy/react-timeline-editor +npm install @rakesh.rk1/react-timeline-editor ``` ```tsx | pure import React from 'react'; -import { Timeline } from '@xzdarcy/react-timeline-editor'; +import { Timeline } from '@rakesh.rk1/react-timeline-editor'; export const TimelineEditor = () => { return ( diff --git a/package.json b/package.json index 7d51f1f..ad0270f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "@xzdarcy/react-timeline-editor", - "version": "0.1.9", - "author": "xzdarcy", + "name": "@rakesh.rk1/react-timeline-editor", + "version": "0.1.5", + "author": "Rakesh", "license": "MIT", "keywords": [ "timeline", @@ -11,12 +11,12 @@ "typescript" ], "bugs": { - "url": "https://github.com/xzdarcy/react-timeline-editor/issues" + "url": "https://github.com/rk9155/react-timeline-editor/issues" }, - "homepage": "https://github.com/xzdarcy/react-timeline-editor#readme", + "homepage": "https://github.com/rk9155/react-timeline-editor#readme", "repository": { "type": "git", - "url": "git+https://github.com/xzdarcy/react-timeline-editor.git" + "url": "git+ssh://git@github.com/rk9155/react-timeline-editor.git" }, "scripts": { "start": "dumi dev", @@ -33,21 +33,21 @@ "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", - "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0" + "react": "^18.2.0", + "react-dom": "^18.2.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" + "react-virtualized": "^9.22.4" }, "devDependencies": { "@types/howler": "^2.2.4", "@types/lodash": "^4.14.177", - "@types/react": "^17.0.17", - "@types/react-dom": "^17.0.17", + "@types/react": "^18.2.16", + "@types/react-dom": "^18.2.7", "@umijs/test": "^3.0.5", "antd": "^4.16.13", "dumi": "^1.0.17", @@ -58,8 +58,12 @@ "lodash": "^4.17.21", "lottie-web": "^5.8.1", "prettier": "^2.2.1", - "react": "^17.0.0", - "react-dom": "^17.0.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", "yorkie": "^2.0.0" + }, + "description": "React Video Timeline", + "directories": { + "doc": "docs" } }