sense-react-timeline-editor 1.1.20 → 1.1.22

package/dist/index.esm.js

@@ -2522,6 +2522,35 @@ var EditActionO = function EditActionO(_ref7) {
       }),
       start = _parserTransformToTim.start,
       end = _parserTransformToTim.end;
+    var isSelectionMultiDrag = ((selectedActionIds === null || selectedActionIds === void 0 ? void 0 : selectedActionIds.length) || 0) > 1 && (selectedActionIds === null || selectedActionIds === void 0 ? void 0 : selectedActionIds.includes(action.id));
+    if (isSelectionMultiDrag || isMultiDrag) {
+      var originalTransform = parserTimeToTransform({
+        start: action.start,
+        end: action.end
+      }, {
+        startLeft: startLeft,
+        scale: scale,
+        scaleWidth: scaleWidth
+      });
+      setTransform(_objectSpread2(_objectSpread2({}, originalTransform), {}, {
+        top: 0
+      }));
+      if (onActionMoveEnd) {
+        onActionMoveEnd({
+          action: action,
+          row: row,
+          start: start,
+          end: end,
+          left: left,
+          width: width,
+          top: top,
+          height: height,
+          up: 0,
+          isMultiDrag: true
+        });
+      }
+      return;
+    }
     // Step 1: 根据鼠标垂直位置确定初始目标行
     var placement = resolveTargetRowPlacement({
       editorData: editorData,
@@ -2793,6 +2822,7 @@ var EditActionO = function EditActionO(_ref7) {
   }, /*#__PURE__*/React.createElement("div", {
     "data-action-id": action.id,
     "data-action-drag": dragging,
+    "data-action-name": action.file_name,
     "data-action-disabled": action.is_disabled ? 1 : 0,
     onMouseDown: function onMouseDown() {
       isDragWhenClick.current = false;
@@ -3413,6 +3443,13 @@ var useRowDrag = function useRowDrag(options) {
       timeOffset: timeOffset,
       rowDelta: rowDelta
     });
+    var hasConflict = placements.some(function (placement) {
+      return placement.conflicted;
+    });
+    if (hasConflict) {
+      multiDragState.current = resetMultiDragState();
+      return;
+    }
     var rows = cloneRows(editorData);
     var updatedActions = [];
     var removedActions = new Map();
@@ -4287,6 +4324,7 @@ var TimeArea = function TimeArea(_ref) {
           scaleWidth: scaleWidth
         });
         var result = onClickTimeArea && onClickTimeArea(time, e);
+        console.log('TimeArea click = ', time);
         if (result === false) return; // 返回 false 时阻止设置时间
         setCursor({
           time: time
@@ -4409,7 +4447,6 @@ var DragLineController = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (pro
     _useState2 = _slicedToArray(_useState, 2),
     dragLineData = _useState2[0],
     setDragLineData = _useState2[1];
-  console.log('dragLineData = ', dragLineData);
   var initDragLine = useCallback(function (data) {
     if (dragLine) {
       var assistActionIds = getAssistDragLineActionIds && getAssistDragLineActionIds({
@@ -4657,6 +4694,8 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
   useEffect(function () {
     var handleClickOutside = function handleClickOutside(e) {
       var target = e.target;
+      var actionEl = target.closest('.timeline-editor-time-area');
+      if (actionEl) return;
       engineRef.current.trigger('mousedown', {
         target: target,
         evt: e
@@ -4838,7 +4877,8 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
       id: "time-editor-container",
       ref: containerRef,
       style: {
-        height: '100%'
+        height: '100%',
+        background: '#fff'
       },
       onClick: onClickTimeline
     }, Object.keys(groupedData).map(function (key, index) {

package/dist/index.js

@@ -2532,6 +2532,35 @@ var EditActionO = function EditActionO(_ref7) {
       }),
       start = _parserTransformToTim.start,
       end = _parserTransformToTim.end;
+    var isSelectionMultiDrag = ((selectedActionIds === null || selectedActionIds === void 0 ? void 0 : selectedActionIds.length) || 0) > 1 && (selectedActionIds === null || selectedActionIds === void 0 ? void 0 : selectedActionIds.includes(action.id));
+    if (isSelectionMultiDrag || isMultiDrag) {
+      var originalTransform = parserTimeToTransform({
+        start: action.start,
+        end: action.end
+      }, {
+        startLeft: startLeft,
+        scale: scale,
+        scaleWidth: scaleWidth
+      });
+      setTransform(_objectSpread2(_objectSpread2({}, originalTransform), {}, {
+        top: 0
+      }));
+      if (onActionMoveEnd) {
+        onActionMoveEnd({
+          action: action,
+          row: row,
+          start: start,
+          end: end,
+          left: left,
+          width: width,
+          top: top,
+          height: height,
+          up: 0,
+          isMultiDrag: true
+        });
+      }
+      return;
+    }
     // Step 1: 根据鼠标垂直位置确定初始目标行
     var placement = resolveTargetRowPlacement({
       editorData: editorData,
@@ -2803,6 +2832,7 @@ var EditActionO = function EditActionO(_ref7) {
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     "data-action-id": action.id,
     "data-action-drag": dragging,
+    "data-action-name": action.file_name,
     "data-action-disabled": action.is_disabled ? 1 : 0,
     onMouseDown: function onMouseDown() {
       isDragWhenClick.current = false;
@@ -3423,6 +3453,13 @@ var useRowDrag = function useRowDrag(options) {
       timeOffset: timeOffset,
       rowDelta: rowDelta
     });
+    var hasConflict = placements.some(function (placement) {
+      return placement.conflicted;
+    });
+    if (hasConflict) {
+      multiDragState.current = resetMultiDragState();
+      return;
+    }
     var rows = cloneRows(editorData);
     var updatedActions = [];
     var removedActions = new Map();
@@ -4297,6 +4334,7 @@ var TimeArea = function TimeArea(_ref) {
           scaleWidth: scaleWidth
         });
         var result = onClickTimeArea && onClickTimeArea(time, e);
+        console.log('TimeArea click = ', time);
         if (result === false) return; // 返回 false 时阻止设置时间
         setCursor({
           time: time
@@ -4419,7 +4457,6 @@ var DragLineController = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(f
     _useState2 = _slicedToArray(_useState, 2),
     dragLineData = _useState2[0],
     setDragLineData = _useState2[1];
-  console.log('dragLineData = ', dragLineData);
   var initDragLine = React.useCallback(function (data) {
     if (dragLine) {
       var assistActionIds = getAssistDragLineActionIds && getAssistDragLineActionIds({
@@ -4667,6 +4704,8 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
   React.useEffect(function () {
     var handleClickOutside = function handleClickOutside(e) {
       var target = e.target;
+      var actionEl = target.closest('.timeline-editor-time-area');
+      if (actionEl) return;
       engineRef.current.trigger('mousedown', {
         target: target,
         evt: e
@@ -4848,7 +4887,8 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
       id: "time-editor-container",
       ref: containerRef,
       style: {
-        height: '100%'
+        height: '100%',
+        background: '#fff'
       },
       onClick: onClickTimeline
     }, Object.keys(groupedData).map(function (key, index) {

package/package.json

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