sense-react-timeline-editor 1.0.15 → 1.0.17

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

@@ -68,6 +68,7 @@ export declare const useRowDrag: (options: UseRowDragOptions) => {
         lastWidth?: number;
         lastTop?: number;
         lastHeight?: number;
+        gap?: number;
     }) => void;
     onDragEnd: (params?: {
         actionId: string;

package/dist/index.esm.js

@@ -2000,7 +2000,7 @@ var Cursor = function Cursor(_ref) {
       }) - scrollLeft);
     }
   }, [cursorTime, startLeft, scaleWidth, scale, scrollLeft], {
-    wait: 800
+    wait: 10
   });
   var clientHeight = ((_document$querySelect = document.querySelector("#time-editor-container")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
   return /*#__PURE__*/React.createElement(RowDnd, {
@@ -2168,6 +2168,12 @@ var EditActionO = function EditActionO(_ref) {
     _action$movable = action.movable,
     movable = _action$movable === void 0 ? true : _action$movable,
     effectId = action.effectId;
+  var originStart = start;
+  parserTimeToPixel(originStart, {
+    startLeft: startLeft,
+    scale: scale,
+    scaleWidth: scaleWidth
+  });
   var handleDeltaScrollTop = function handleDeltaScrollTop(delta) {
     if (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) {
       containerRef.current.scrollTop += delta * 2;
@@ -2294,6 +2300,16 @@ var EditActionO = function EditActionO(_ref) {
         }),
         _start = _parserTransformToTim.start,
         _end = _parserTransformToTim.end;
+      var g1 = parserTimeToPixel(originStart, {
+        startLeft: startLeft,
+        scale: scale,
+        scaleWidth: scaleWidth
+      });
+      var g2 = parserTimeToPixel(_start, {
+        startLeft: startLeft,
+        scale: scale,
+        scaleWidth: scaleWidth
+      });
       var result = onActionMoving(_objectSpread2({
         action: action,
         row: row,
@@ -2301,7 +2317,8 @@ var EditActionO = function EditActionO(_ref) {
         end: _end,
         left: left,
         width: width,
-        top: top
+        top: top,
+        offsetX: g2 - g1
       }, args));
       if (result === false) return false;
     }
@@ -2869,17 +2886,17 @@ var EditActionO = function EditActionO(_ref) {
     style: {
       height: rowHeight
     }
-  }, getActionRender && getActionRender(nowAction, nowRow), flexible && /*#__PURE__*/React.createElement("div", {
+  }, getActionRender && getActionRender(nowAction, nowRow), flexible && (/*#__PURE__*/React.createElement("div", {
     className: prefix('action-left-stretch')
   }, /*#__PURE__*/React.createElement("img", {
     src: stretchIcon,
     alt: ""
-  })), flexible && /*#__PURE__*/React.createElement("div", {
+  }))), flexible && (/*#__PURE__*/React.createElement("div", {
     className: prefix('action-right-stretch')
   }, /*#__PURE__*/React.createElement("img", {
     src: stretchIcon,
     alt: ""
-  }))));
+  })))));
 };
 var EditAction = /*#__PURE__*/React.memo(EditActionO);
 
@@ -3367,7 +3384,7 @@ var useRowDrag = function useRowDrag(options) {
     var selectedEls = getSelectedActionEls();
     if (selectedEls.length === 0) return;
     // 更新偏移量
-    state.offsetX = (state.offsetX || 0) + dx;
+    state.offsetX = params.gap;
     state.offsetY = (state.offsetY || 0) + dy;
     // 遍历所有选中的元素，同步移动
     selectedEls.forEach(function (el) {
@@ -3377,8 +3394,8 @@ var useRowDrag = function useRowDrag(options) {
       var initialPos = state.initialElementPositions.get(elActionId);
       if (!initialPos) return;
       // 计算新位置 = 初始位置 + 总偏移量
-      var newX = state.offsetX;
-      var newY = state.offsetY;
+      var newX = initialPos.x + state.offsetX;
+      var newY = initialPos.y + state.offsetY;
       // 更新元素位置
       el.style.transform = "translate(".concat(newX, "px, ").concat(newY, "px)");
       // 存储当前位置数据
@@ -3981,7 +3998,8 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
           lastLeft: data.lastLeft,
           lastWidth: data.lastWidth,
           lastTop: data.lastTop,
-          lastHeight: data.lastHeight
+          lastHeight: data.lastHeight,
+          gap: data.offsetX || 0
         });
         return _onActionMoving && _onActionMoving(data);
       },
@@ -4097,7 +4115,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
       height: height,
       rowHeight: function rowHeight(_ref4) {
         var index = _ref4.index;
-        return heights[index] || _rowHeight;
+        return heights[index] || _rowHeight || 0;
       },
       overscanRowCount: 10,
       overscanColumnCount: 0,
@@ -4220,12 +4238,16 @@ var TimeArea = function TimeArea(_ref) {
       height = _ref3.height;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, {
       ref: gridRef,
+      containerStyle: {
+        width: timelineWidth + 10,
+        maxWidth: timelineWidth + 10
+      },
       columnCount: showUnit ? scaleCount * scaleSplitCount + 1 : scaleCount,
       columnWidth: getColumnWidth,
       estimatedColumnSize: estColumnWidth,
       rowCount: 1,
       rowHeight: height,
-      width: timelineWidth,
+      width: timelineWidth + 10,
       // width={width}
       height: height,
       overscanRowCount: 0,
@@ -4465,7 +4487,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (areaRef.current) {
       var resizeObserver = new ResizeObserver(function () {
         if (!areaRef.current) return;
-        setWidth(areaRef.current.getBoundingClientRect().width);
+        setWidth(areaRef.current.getBoundingClientRect().width + 10);
       });
       resizeObserver.observe(areaRef.current);
       return function () {

package/dist/index.js

@@ -2009,7 +2009,7 @@ var Cursor = function Cursor(_ref) {
       }) - scrollLeft);
     }
   }, [cursorTime, startLeft, scaleWidth, scale, scrollLeft], {
-    wait: 800
+    wait: 10
   });
   var clientHeight = ((_document$querySelect = document.querySelector("#time-editor-container")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
   return /*#__PURE__*/React__default['default'].createElement(RowDnd, {
@@ -2177,6 +2177,12 @@ var EditActionO = function EditActionO(_ref) {
     _action$movable = action.movable,
     movable = _action$movable === void 0 ? true : _action$movable,
     effectId = action.effectId;
+  var originStart = start;
+  parserTimeToPixel(originStart, {
+    startLeft: startLeft,
+    scale: scale,
+    scaleWidth: scaleWidth
+  });
   var handleDeltaScrollTop = function handleDeltaScrollTop(delta) {
     if (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) {
       containerRef.current.scrollTop += delta * 2;
@@ -2303,6 +2309,16 @@ var EditActionO = function EditActionO(_ref) {
         }),
         _start = _parserTransformToTim.start,
         _end = _parserTransformToTim.end;
+      var g1 = parserTimeToPixel(originStart, {
+        startLeft: startLeft,
+        scale: scale,
+        scaleWidth: scaleWidth
+      });
+      var g2 = parserTimeToPixel(_start, {
+        startLeft: startLeft,
+        scale: scale,
+        scaleWidth: scaleWidth
+      });
       var result = onActionMoving(_objectSpread2({
         action: action,
         row: row,
@@ -2310,7 +2326,8 @@ var EditActionO = function EditActionO(_ref) {
         end: _end,
         left: left,
         width: width,
-        top: top
+        top: top,
+        offsetX: g2 - g1
       }, args));
       if (result === false) return false;
     }
@@ -2878,17 +2895,17 @@ var EditActionO = function EditActionO(_ref) {
     style: {
       height: rowHeight
     }
-  }, getActionRender && getActionRender(nowAction, nowRow), flexible && /*#__PURE__*/React__default['default'].createElement("div", {
+  }, getActionRender && getActionRender(nowAction, nowRow), flexible && (/*#__PURE__*/React__default['default'].createElement("div", {
     className: prefix('action-left-stretch')
   }, /*#__PURE__*/React__default['default'].createElement("img", {
     src: stretchIcon,
     alt: ""
-  })), flexible && /*#__PURE__*/React__default['default'].createElement("div", {
+  }))), flexible && (/*#__PURE__*/React__default['default'].createElement("div", {
     className: prefix('action-right-stretch')
   }, /*#__PURE__*/React__default['default'].createElement("img", {
     src: stretchIcon,
     alt: ""
-  }))));
+  })))));
 };
 var EditAction = /*#__PURE__*/React__default['default'].memo(EditActionO);
 
@@ -3376,7 +3393,7 @@ var useRowDrag = function useRowDrag(options) {
     var selectedEls = getSelectedActionEls();
     if (selectedEls.length === 0) return;
     // 更新偏移量
-    state.offsetX = (state.offsetX || 0) + dx;
+    state.offsetX = params.gap;
     state.offsetY = (state.offsetY || 0) + dy;
     // 遍历所有选中的元素，同步移动
     selectedEls.forEach(function (el) {
@@ -3386,8 +3403,8 @@ var useRowDrag = function useRowDrag(options) {
       var initialPos = state.initialElementPositions.get(elActionId);
       if (!initialPos) return;
       // 计算新位置 = 初始位置 + 总偏移量
-      var newX = state.offsetX;
-      var newY = state.offsetY;
+      var newX = initialPos.x + state.offsetX;
+      var newY = initialPos.y + state.offsetY;
       // 更新元素位置
       el.style.transform = "translate(".concat(newX, "px, ").concat(newY, "px)");
       // 存储当前位置数据
@@ -3990,7 +4007,8 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
           lastLeft: data.lastLeft,
           lastWidth: data.lastWidth,
           lastTop: data.lastTop,
-          lastHeight: data.lastHeight
+          lastHeight: data.lastHeight,
+          gap: data.offsetX || 0
         });
         return _onActionMoving && _onActionMoving(data);
       },
@@ -4106,7 +4124,7 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
       height: height,
       rowHeight: function rowHeight(_ref4) {
         var index = _ref4.index;
-        return heights[index] || _rowHeight;
+        return heights[index] || _rowHeight || 0;
       },
       overscanRowCount: 10,
       overscanColumnCount: 0,
@@ -4229,12 +4247,16 @@ var TimeArea = function TimeArea(_ref) {
       height = _ref3.height;
     return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(reactVirtualized.Grid, {
       ref: gridRef,
+      containerStyle: {
+        width: timelineWidth + 10,
+        maxWidth: timelineWidth + 10
+      },
       columnCount: showUnit ? scaleCount * scaleSplitCount + 1 : scaleCount,
       columnWidth: getColumnWidth,
       estimatedColumnSize: estColumnWidth,
       rowCount: 1,
       rowHeight: height,
-      width: timelineWidth,
+      width: timelineWidth + 10,
       // width={width}
       height: height,
       overscanRowCount: 0,
@@ -4474,7 +4496,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
     if (areaRef.current) {
       var resizeObserver = new ResizeObserver(function () {
         if (!areaRef.current) return;
-        setWidth(areaRef.current.getBoundingClientRect().width);
+        setWidth(areaRef.current.getBoundingClientRect().width + 10);
       });
       resizeObserver.observe(areaRef.current);
       return function () {

package/package.json

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