sense-react-timeline-editor 1.1.3 → 1.1.4

package/dist/engine/events.d.ts

@@ -83,4 +83,20 @@ export interface EventTypes {
         target: HTMLElement;
         evt: MouseEvent;
     };
+    /**
+     * 特效播放事件
+     * @type {{ id: string }}
+     * @memberof EventTypes
+     */
+    "effect-play": {
+        id: string;
+    };
+    /**
+     * 特效离开事件
+     * @type {{ id: string }}
+     * @memberof EventTypes
+     */
+    "effect-leave": {
+        id: string;
+    };
 }

package/dist/index.esm.js

@@ -401,7 +401,9 @@ var Events = /*#__PURE__*/_createClass(function Events() {
     play: [],
     paused: [],
     ended: [],
-    mousedown: []
+    mousedown: [],
+    "effect-play": [],
+    "effect-leave": []
   }, handlers);
 });
 
@@ -2108,7 +2110,7 @@ var DragLines = function DragLines(_ref) {
 var css_248z$2 = ".timeline-editor .ant-upload-wrapper .ant-upload-drag {\n  border: none !important;\n  background: none !important;\n}\n.timeline-editor:hover .timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar {\n  height: 4px;\n}\n.timeline-editor-edit-area {\n  flex: 1 1 auto;\n  margin-top: 10px;\n  overflow: hidden;\n  position: relative;\n}\n.timeline-editor-edit-area.no-flex {\n  flex: 0 0 auto;\n}\n.timeline-editor-edit-area.overflow-hidden {\n  overflow: hidden;\n}\n.timeline-editor-edit-area.overflow-hidden .ReactVirtualized__Grid {\n  overflow: hidden !important;\n  height: initial !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid {\n  outline: none !important;\n  overflow: overlay !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar-track {\n  background-color: transparent !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar-thumb {\n  background: #666;\n  border-radius: 16px;\n}\n.timeline-editor-selection-box {\n  position: fixed;\n  border: 2px solid #1890ff;\n  background-color: rgba(24, 144, 255, 0.1);\n  pointer-events: none;\n  z-index: 9999;\n  box-shadow: 0 0 8px rgba(24, 144, 255, 0.3);\n  left: -100px;\n}\n";
 styleInject(css_248z$2);
 
-var css_248z$3 = ".timeline-editor-action {\n  position: absolute;\n  left: 0;\n  top: 0;\n  background-color: #c6cbd2;\n  display: flex;\n  align-items: center;\n}\n.timeline-editor-action .timeline-editor-action-left-stretch,\n.timeline-editor-action .timeline-editor-action-right-stretch {\n  position: absolute;\n}\n.timeline-editor-action .timeline-editor-action-left-stretch {\n  left: -3px;\n}\n.timeline-editor-action .timeline-editor-action-right-stretch {\n  right: -3px;\n  transform: rotate(180deg);\n}\n";
+var css_248z$3 = ".timeline-editor-action {\n  position: absolute;\n  left: 0;\n  top: 0;\n  background-color: #c6cbd2;\n  display: flex;\n  align-items: center;\n}\n.timeline-editor-action[data-action-drag=\"true\"] {\n  box-shadow: 0px 8px 8px rgba(77, 54, 41, 0.08);\n  border-radius: 34px;\n}\n.timeline-editor-action .timeline-editor-action-left-stretch,\n.timeline-editor-action .timeline-editor-action-right-stretch {\n  position: absolute;\n}\n.timeline-editor-action .timeline-editor-action-left-stretch {\n  left: -3px;\n}\n.timeline-editor-action .timeline-editor-action-right-stretch {\n  right: -3px;\n  transform: rotate(180deg);\n}\n";
 styleInject(css_248z$3);
 
 var stretchIcon = "data:image/svg+xml,%3Csvg%20width%3D%227%22%20height%3D%2216%22%20viewBox%3D%220%200%207%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7%2015C7%2015.5523%206.55228%2016%206%2016L1%2016C0.447715%2016%201.06779e-08%2015.5523%202.38498e-08%2015L3.57746e-07%201C3.70918e-07%200.447715%200.447716%20-1.5627e-07%201%20-1.43099e-07L6%209.29825e-07C6.55229%209.42996e-07%207%200.447716%207%201L7%2015Z%22%20fill%3D%22%23226EFF%22%2F%3E%3Cpath%20d%3D%22M2%204L2%2012%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%2012.25L5.5%208L4%203.75%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M4%2012.25L5.5%208L4%203.75L4%2012.25Z%22%20stroke%3D%22white%22%20stroke-width%3D%220.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
@@ -2168,6 +2170,10 @@ var EditActionO = function EditActionO(_ref) {
     _action$movable = action.movable,
     movable = _action$movable === void 0 ? true : _action$movable,
     effectId = action.effectId;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragging = _useState2[0],
+    setDragging = _useState2[1];
   var originStart = start;
   parserTimeToPixel(originStart, {
     startLeft: startLeft,
@@ -2199,7 +2205,7 @@ var EditActionO = function EditActionO(_ref) {
     scaleWidth: scaleWidth
   }));
   // 初始化动作坐标数据
-  var _useState = useState(function () {
+  var _useState3 = useState(function () {
       return _objectSpread2(_objectSpread2({}, parserTimeToTransform({
         start: start,
         end: end
@@ -2211,9 +2217,9 @@ var EditActionO = function EditActionO(_ref) {
         top: 0
       });
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    transform = _useState2[0],
-    setTransform = _useState2[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    transform = _useState4[0],
+    setTransform = _useState4[1];
   useLayoutEffect(function () {
     setTransform(_objectSpread2(_objectSpread2({}, parserTimeToTransform({
       start: start,
@@ -2246,6 +2252,7 @@ var EditActionO = function EditActionO(_ref) {
   //#region [rgba(100,120,156,0.08)] 回调
   var handleDragStart = function handleDragStart() {
     // 保存原始位置
+    setDragging(true);
     originalPosition.current = {
       start: action.start,
       end: action.end
@@ -2339,6 +2346,7 @@ var EditActionO = function EditActionO(_ref) {
       isMultiDrag = _ref3.isMultiDrag,
       fnCallback = _ref3.fn;
     console.log('handleDragEnd: ', left, width, top, height);
+    setDragging(false);
     // 清理预览指示器
     if (setDropPreview) {
       setDropPreview(null);
@@ -2826,6 +2834,7 @@ var EditActionO = function EditActionO(_ref) {
     deltaScrollTop: handleDeltaScrollTop
   }, /*#__PURE__*/React.createElement("div", {
     "data-action-id": action.id,
+    "data-action-drag": dragging,
     "data-action-disabled": action.is_disabled ? 1 : 0,
     onMouseDown: function onMouseDown() {
       isDragWhenClick.current = false;

package/dist/index.js

@@ -410,7 +410,9 @@ var Events = /*#__PURE__*/_createClass(function Events() {
     play: [],
     paused: [],
     ended: [],
-    mousedown: []
+    mousedown: [],
+    "effect-play": [],
+    "effect-leave": []
   }, handlers);
 });
 
@@ -2117,7 +2119,7 @@ var DragLines = function DragLines(_ref) {
 var css_248z$2 = ".timeline-editor .ant-upload-wrapper .ant-upload-drag {\n  border: none !important;\n  background: none !important;\n}\n.timeline-editor:hover .timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar {\n  height: 4px;\n}\n.timeline-editor-edit-area {\n  flex: 1 1 auto;\n  margin-top: 10px;\n  overflow: hidden;\n  position: relative;\n}\n.timeline-editor-edit-area.no-flex {\n  flex: 0 0 auto;\n}\n.timeline-editor-edit-area.overflow-hidden {\n  overflow: hidden;\n}\n.timeline-editor-edit-area.overflow-hidden .ReactVirtualized__Grid {\n  overflow: hidden !important;\n  height: initial !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid {\n  outline: none !important;\n  overflow: overlay !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar-track {\n  background-color: transparent !important;\n}\n.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar-thumb {\n  background: #666;\n  border-radius: 16px;\n}\n.timeline-editor-selection-box {\n  position: fixed;\n  border: 2px solid #1890ff;\n  background-color: rgba(24, 144, 255, 0.1);\n  pointer-events: none;\n  z-index: 9999;\n  box-shadow: 0 0 8px rgba(24, 144, 255, 0.3);\n  left: -100px;\n}\n";
 styleInject(css_248z$2);
 
-var css_248z$3 = ".timeline-editor-action {\n  position: absolute;\n  left: 0;\n  top: 0;\n  background-color: #c6cbd2;\n  display: flex;\n  align-items: center;\n}\n.timeline-editor-action .timeline-editor-action-left-stretch,\n.timeline-editor-action .timeline-editor-action-right-stretch {\n  position: absolute;\n}\n.timeline-editor-action .timeline-editor-action-left-stretch {\n  left: -3px;\n}\n.timeline-editor-action .timeline-editor-action-right-stretch {\n  right: -3px;\n  transform: rotate(180deg);\n}\n";
+var css_248z$3 = ".timeline-editor-action {\n  position: absolute;\n  left: 0;\n  top: 0;\n  background-color: #c6cbd2;\n  display: flex;\n  align-items: center;\n}\n.timeline-editor-action[data-action-drag=\"true\"] {\n  box-shadow: 0px 8px 8px rgba(77, 54, 41, 0.08);\n  border-radius: 34px;\n}\n.timeline-editor-action .timeline-editor-action-left-stretch,\n.timeline-editor-action .timeline-editor-action-right-stretch {\n  position: absolute;\n}\n.timeline-editor-action .timeline-editor-action-left-stretch {\n  left: -3px;\n}\n.timeline-editor-action .timeline-editor-action-right-stretch {\n  right: -3px;\n  transform: rotate(180deg);\n}\n";
 styleInject(css_248z$3);
 
 var stretchIcon = "data:image/svg+xml,%3Csvg%20width%3D%227%22%20height%3D%2216%22%20viewBox%3D%220%200%207%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7%2015C7%2015.5523%206.55228%2016%206%2016L1%2016C0.447715%2016%201.06779e-08%2015.5523%202.38498e-08%2015L3.57746e-07%201C3.70918e-07%200.447715%200.447716%20-1.5627e-07%201%20-1.43099e-07L6%209.29825e-07C6.55229%209.42996e-07%207%200.447716%207%201L7%2015Z%22%20fill%3D%22%23226EFF%22%2F%3E%3Cpath%20d%3D%22M2%204L2%2012%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%2012.25L5.5%208L4%203.75%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M4%2012.25L5.5%208L4%203.75L4%2012.25Z%22%20stroke%3D%22white%22%20stroke-width%3D%220.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
@@ -2177,6 +2179,10 @@ var EditActionO = function EditActionO(_ref) {
     _action$movable = action.movable,
     movable = _action$movable === void 0 ? true : _action$movable,
     effectId = action.effectId;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragging = _useState2[0],
+    setDragging = _useState2[1];
   var originStart = start;
   parserTimeToPixel(originStart, {
     startLeft: startLeft,
@@ -2208,7 +2214,7 @@ var EditActionO = function EditActionO(_ref) {
     scaleWidth: scaleWidth
   }));
   // 初始化动作坐标数据
-  var _useState = React.useState(function () {
+  var _useState3 = React.useState(function () {
       return _objectSpread2(_objectSpread2({}, parserTimeToTransform({
         start: start,
         end: end
@@ -2220,9 +2226,9 @@ var EditActionO = function EditActionO(_ref) {
         top: 0
       });
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    transform = _useState2[0],
-    setTransform = _useState2[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    transform = _useState4[0],
+    setTransform = _useState4[1];
   React.useLayoutEffect(function () {
     setTransform(_objectSpread2(_objectSpread2({}, parserTimeToTransform({
       start: start,
@@ -2255,6 +2261,7 @@ var EditActionO = function EditActionO(_ref) {
   //#region [rgba(100,120,156,0.08)] 回调
   var handleDragStart = function handleDragStart() {
     // 保存原始位置
+    setDragging(true);
     originalPosition.current = {
       start: action.start,
       end: action.end
@@ -2348,6 +2355,7 @@ var EditActionO = function EditActionO(_ref) {
       isMultiDrag = _ref3.isMultiDrag,
       fnCallback = _ref3.fn;
     console.log('handleDragEnd: ', left, width, top, height);
+    setDragging(false);
     // 清理预览指示器
     if (setDropPreview) {
       setDropPreview(null);
@@ -2835,6 +2843,7 @@ var EditActionO = function EditActionO(_ref) {
     deltaScrollTop: handleDeltaScrollTop
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     "data-action-id": action.id,
+    "data-action-drag": dragging,
     "data-action-disabled": action.is_disabled ? 1 : 0,
     onMouseDown: function onMouseDown() {
       isDragWhenClick.current = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sense-react-timeline-editor",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "author": "xzdarcy",
   "license": "MIT",
   "keywords": [