Fix/drag droparea

.gitignore

@@ -24,3 +24,6 @@
 # ide
 /.vscode
 /.idea
+
+/ .npmrc
+.npmrc

README.md

@@ -1,10 +1,16 @@
+## Original Work
+
+This repo is forked from the original author repo `@xzdarcy/react-timeline-editor` and modified with custom requirements.
+
 # 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
@@ -15,50 +21,47 @@ npm install @xzdarcy/react-timeline-editor
 import { Timeline, TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor';
 import React from 'react';
 
-const mockData: TimelineRow[] = [{
-    id: "0",
+const mockData: TimelineRow[] = [
+  {
+    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: 1.5,
         end: 5,
-        effectId: "effect1",
-      }
+        effectId: 'effect1',
+      },
     ],
-}]
+  },
+];
 
 const mockEffect: Record<string, TimelineEffect> = {
   effect0: {
-    id: "effect0",
-    name: "效果0",
+    id: 'effect0',
+    name: '效果0',
   },
   effect1: {
-    id: "effect1",
-    name: "效果1",
+    id: 'effect1',
+    name: '效果1',
   },
 };
 
 const TimelineEditor = () => {
-  return (
-      <Timeline
-        editorData={mockData}
-        effects={mockEffect}
-      />
-  );
+  return <Timeline editorData={mockData} effects={mockEffect} />;
 };
 ```
 
 ## Documention
-Checkout the [Docs](https://zdarcy.com/) for a demonstration of some basic and advanced features.
 
+Checkout the [Docs](https://zdarcy.com/) for a demonstration of some basic and advanced features.

docs/editor-demo/editor-basic-irfan/disable.tsx

@@ -0,0 +1,23 @@
+import { Timeline } from '../../../src/components/timeline';
+
+import { Switch } from 'antd';
+import { cloneDeep } from 'lodash';
+import React, { useState } from 'react';
+import './index.less';
+import { mockData, mockEffect } from './mock';
+
+const defaultEditorData = cloneDeep(mockData);
+
+const TimelineEditor = () => {
+  const [data, setData] = useState(defaultEditorData);
+  const [allow, setAllow] = useState(true);
+
+  return (
+    <div className="timeline-editor-example0">
+      <Switch checkedChildren="开启编辑" unCheckedChildren="禁用编辑" checked={allow} onChange={(e) => setAllow(e)} style={{ marginBottom: 20 }} />
+      <Timeline onChange={setData} editorData={data} effects={mockEffect} disableDrag={!allow} />
+    </div>
+  );
+};
+
+export default TimelineEditor;

docs/editor-demo/editor-basic-irfan/hideCursor.tsx

@@ -0,0 +1,22 @@
+import { Timeline } from '../../../src/components/timeline';
+import { Switch } from 'antd';
+import { cloneDeep } from 'lodash';
+import React, { useState } from 'react';
+import './index.less';
+import { mockData, mockEffect } from './mock';
+
+const defaultEditorData = cloneDeep(mockData);
+
+const TimelineEditor = () => {
+  const [data, setData] = useState(defaultEditorData);
+  const [showCursor, setShowCursor] = useState(false);
+
+  return (
+    <div className="timeline-editor-example0">
+      <Switch checkedChildren="开启光标" unCheckedChildren="隐藏光标" checked={showCursor} onChange={(e) => setShowCursor(e)} style={{ marginBottom: 20 }} />
+      <Timeline onChange={setData} editorData={data} effects={mockEffect} hideCursor={!showCursor} />
+    </div>
+  );
+};
+
+export default TimelineEditor;

docs/editor-demo/editor-basic-irfan/index.less

@@ -0,0 +1,66 @@
+@import '~antd/dist/antd.css';
+
+.dropzone {
+  background-color: #bfe4ff;
+  border: dashed 4px transparent;
+  border-radius: 4px;
+  margin: 10px auto 30px;
+  padding: 10px;
+  width: 80%;
+  transition: background-color 0.3s;
+}
+
+.drop-active {
+  border-color: #aaa !important;
+}
+
+.collison-active {
+  background-color: #E0115F !important;
+}
+
+.drop-target {
+  // background-color: #29e !important;
+  border-color: #fff !important;
+  border-style: solid;
+}
+
+.drag-drop {
+  display: inline-block;
+  min-width: 40px;
+  padding: 2em 0.5em;
+  margin: 1rem 0 0 1rem;
+
+  color: #fff;
+  // background-color: #29e;
+  border: solid 2px #fff;
+
+  touch-action: none;
+  transform: translate(0px, 0px);
+
+  transition: background-color 0.3s;
+}
+
+.drag-drop.can-drop {
+  color: #000;
+  background-color: #4e4;
+}
+
+.timeline-editor-example0 {
+  .timeline-editor {
+    width: 100%;
+    max-width: 800px;
+    height: 300px;
+
+    .timeline-editor-edit-row:nth-of-type(odd) {
+      background-color: darkolivegreen;
+    }
+
+    &-action {
+      height: 28px !important;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}
+
+

docs/editor-demo/editor-basic-irfan/index.md

@@ -0,0 +1,13 @@
+---
+title: editor basic irfan test
+toc: 'menu'
+order: 0
+group:
+  title: 编辑器示例
+---
+
+### dropzone usage
+
+> 尝试向右拖动动作块，可自动识别无限滚动延长
+
+<code src="./index.tsx"></code>

docs/editor-demo/editor-basic-irfan/index.tsx

@@ -0,0 +1,52 @@
+import { cloneDeep } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import './index.less';
+import { mockData, mockEffect } from './mock';
+import { Timeline } from '../../../src/components/timeline';
+
+const defaultEditorData = cloneDeep(mockData);
+
+const TimelineEditor = () => {
+  const [data, setData] = useState(defaultEditorData);
+
+  React.useEffect(() => {
+    console.log('data updated', data);
+  }, [data]);
+
+  const handleOnMoveEnd = (...params) => {
+    console.log('actionMoveEnd', params);
+  };
+
+  const handleOnResizeEnd = (...params) => {
+    console.log('handleOnResizeEnd', params);
+  };
+
+  const handleOnClickRow = (...params) => {
+    console.log('handleOnClickRow', params);
+  };
+
+  const handleOnContextMenuRow = (...params) => {
+    console.log('handleOnContextMenuRow', params);
+  };
+
+  return (
+    <div className="timeline-editor-example0">
+      <Timeline
+        onChange={setData}
+        editorData={data}
+        effects={mockEffect}
+        hideCursor={false}
+        autoScroll
+        autoReRender
+        onActionMoveEnd={handleOnMoveEnd}
+        onActionResizeEnd={handleOnResizeEnd}
+        onClickActionOnly={handleOnClickRow}
+        onContextMenuAction={handleOnContextMenuRow}
+        gridSnap
+        dragLine
+      />
+    </div>
+  );
+};
+
+export default TimelineEditor;

docs/editor-demo/editor-basic-irfan/mock.ts

@@ -0,0 +1,65 @@
+import { TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor';
+
+export const mockEffect: Record<string, TimelineEffect> = {
+  effect0: {
+    id: 'effect0',
+    name: '效果0',
+  },
+  effect1: {
+    id: 'effect1',
+    name: '效果1',
+  },
+};
+
+export 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',
+      },
+    ],
+  },
+  {
+    id: '2',
+    actions: [
+      {
+        id: 'action20',
+        start: 3,
+        end: 4,
+        effectId: 'effect0',
+      },
+    ],
+  },
+  // {
+  //   id: "3",
+  //   actions: [
+  //     {
+  //       id: "action30",
+  //       start: 4,
+  //       end: 4.5,
+  //       effectId: "effect1",
+  //     },
+  //     {
+  //       id: "action31",
+  //       start: 6,
+  //       end: 8,
+  //       effectId: "effect1",
+  //     },
+  //   ],
+  // },
+];

docs/editor-demo/editor-scroll-sync/index.tsx

@@ -1,4 +1,6 @@
-import { Timeline, TimelineState } from '@xzdarcy/react-timeline-editor';
+// import { Timeline, TimelineState } from '@xzdarcy/react-timeline-editor';
+import { Timeline } from '../../../src/components/timeline';
+import { TimelineState } from '../../../src/interface/timeline';
 import { cloneDeep } from 'lodash';
 import React, { useRef, useState } from 'react';
 import './index.less';

docs/engine/engine-standalone/index.tsx

@@ -22,11 +22,11 @@ const TimelineEditor = () => {
     timelineEngine.current.on('paused', () => setIsPlaying(false));
     timelineEngine.current.on('afterSetTime', ({ time }) => setTime(time));
     timelineEngine.current.on('setTimeByTick', ({ time }) => setTime(time));
-    
+
     let dur = 0;
-    mockData.forEach(row => {
-      row.actions.forEach(action => dur = Math.max(dur, action.end));
-    })
+    mockData.forEach((row) => {
+      row.actions.forEach((action) => (dur = Math.max(dur, action.end)));
+    });
     setDuration(dur);
 
     return () => {
@@ -50,7 +50,7 @@ const TimelineEditor = () => {
   const handleSetTime = (value: number) => {
     timelineEngine.current.setTime(Number(value));
     timelineEngine.current.reRender();
-  }
+  };
 
   // 时间展示
   const timeRender = (time: number) => {
@@ -69,7 +69,7 @@ const TimelineEditor = () => {
         </div>
         <div className="play-time">
           <div className="play-time-current">{timeRender(time)}</div>
-          <Slider onChange={handleSetTime} className="play-time-slider" step={0.01} min={0} max={duration} value={time} />
+          {/* <Slider onChange={handleSetTime} className="play-time-slider" step={0.01} min={0} max={duration} value={time} /> */}
           <div className="play-time-duration">{timeRender(duration)}</div>
         </div>
       </div>