sense-react-timeline-editor 1.1.24 → 1.1.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -12,6 +12,7 @@ export interface UseRowSelectionOptions {
|
|
|
12
12
|
export declare const useRowSelection: (options: UseRowSelectionOptions) => {
|
|
13
13
|
DragSelection: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
14
14
|
selectedActionIds: string[];
|
|
15
|
+
justFinishedSelectionRef: import("react").MutableRefObject<boolean>;
|
|
15
16
|
clearSelection: () => void;
|
|
16
17
|
onClickOutside: (target: HTMLElement) => void;
|
|
17
18
|
onCtrlClick: (actionId: string, event: MouseEvent) => void;
|
package/dist/index.esm.js
CHANGED
|
@@ -3095,6 +3095,8 @@ var useRowSelection = function useRowSelection(options) {
|
|
|
3095
3095
|
_useState2 = _slicedToArray(_useState, 2),
|
|
3096
3096
|
selectedActionIds = _useState2[0],
|
|
3097
3097
|
setSelectedActionIds = _useState2[1];
|
|
3098
|
+
var justFinishedSelectionRef = useRef(false);
|
|
3099
|
+
var selectionResetTimerRef = useRef(null);
|
|
3098
3100
|
// 计算框选区域与 action 的交集
|
|
3099
3101
|
var getIntersectedActions = useCallback(function (box) {
|
|
3100
3102
|
var _containerRef$current, _containerRef$current2;
|
|
@@ -3160,7 +3162,22 @@ var useRowSelection = function useRowSelection(options) {
|
|
|
3160
3162
|
}
|
|
3161
3163
|
},
|
|
3162
3164
|
onSelectionEnd: function onSelectionEnd() {
|
|
3163
|
-
|
|
3165
|
+
justFinishedSelectionRef.current = true;
|
|
3166
|
+
if (selectionResetTimerRef.current) {
|
|
3167
|
+
clearTimeout(selectionResetTimerRef.current);
|
|
3168
|
+
}
|
|
3169
|
+
selectionResetTimerRef.current = setTimeout(function () {
|
|
3170
|
+
justFinishedSelectionRef.current = false;
|
|
3171
|
+
selectionResetTimerRef.current = null;
|
|
3172
|
+
}, 0);
|
|
3173
|
+
// 清除框选框
|
|
3174
|
+
setTimeout(function () {
|
|
3175
|
+
var selectionBoxes = document.querySelectorAll('.timeline-editor-selection-box');
|
|
3176
|
+
Array.from(selectionBoxes).forEach(function (selectionBox) {
|
|
3177
|
+
// @ts-expect-error 忽略类型检查错误
|
|
3178
|
+
selectionBox.style.left = '-10px';
|
|
3179
|
+
});
|
|
3180
|
+
}, 0);
|
|
3164
3181
|
},
|
|
3165
3182
|
shouldStartSelecting: function shouldStartSelecting(target) {
|
|
3166
3183
|
var _element$closest, _element$closest2, _element$closest3, _element$closest4;
|
|
@@ -3177,7 +3194,8 @@ var useRowSelection = function useRowSelection(options) {
|
|
|
3177
3194
|
style: {
|
|
3178
3195
|
border: '2px solid #1890ff',
|
|
3179
3196
|
backgroundColor: 'rgba(24, 144, 255, 0.1)',
|
|
3180
|
-
zIndex: 9999
|
|
3197
|
+
zIndex: 9999,
|
|
3198
|
+
left: '-10px'
|
|
3181
3199
|
}
|
|
3182
3200
|
},
|
|
3183
3201
|
isEnabled: !disabled,
|
|
@@ -3222,11 +3240,15 @@ var useRowSelection = function useRowSelection(options) {
|
|
|
3222
3240
|
document.addEventListener('keydown', handleKeyDown);
|
|
3223
3241
|
return function () {
|
|
3224
3242
|
document.removeEventListener('keydown', handleKeyDown);
|
|
3243
|
+
if (selectionResetTimerRef.current) {
|
|
3244
|
+
clearTimeout(selectionResetTimerRef.current);
|
|
3245
|
+
}
|
|
3225
3246
|
};
|
|
3226
3247
|
}, [handleKeyDown]);
|
|
3227
3248
|
return {
|
|
3228
3249
|
DragSelection: DragSelection,
|
|
3229
3250
|
selectedActionIds: Array.from(selectedActionIds),
|
|
3251
|
+
justFinishedSelectionRef: justFinishedSelectionRef,
|
|
3230
3252
|
clearSelection: clearSelection,
|
|
3231
3253
|
onClickOutside: handleClickOutside,
|
|
3232
3254
|
onCtrlClick: handleCtrlClick,
|
|
@@ -3629,7 +3651,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3629
3651
|
var handleUploadChange = function handleUploadChange(row) {
|
|
3630
3652
|
return /*#__PURE__*/function () {
|
|
3631
3653
|
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(info) {
|
|
3632
|
-
var _info$file$response, _info$file;
|
|
3654
|
+
var _info$file$response, _info$file, _info$file$response2;
|
|
3633
3655
|
var maxSize, hasDefault, totalDuration, _newAction, uid, duration, newAction;
|
|
3634
3656
|
return _regenerator().w(function (_context) {
|
|
3635
3657
|
while (1) switch (_context.n) {
|
|
@@ -3714,7 +3736,8 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3714
3736
|
isUpload: true,
|
|
3715
3737
|
segment_type: 'bgm',
|
|
3716
3738
|
isUploading: false,
|
|
3717
|
-
uid: (_info$file = info.file) === null || _info$file === void 0 ? void 0 : _info$file.uid
|
|
3739
|
+
uid: (_info$file = info.file) === null || _info$file === void 0 ? void 0 : _info$file.uid,
|
|
3740
|
+
waveform: ((_info$file$response2 = info.file.response) === null || _info$file$response2 === void 0 ? void 0 : _info$file$response2.peaks) || []
|
|
3718
3741
|
};
|
|
3719
3742
|
onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [newAction]);
|
|
3720
3743
|
case 7:
|
|
@@ -3895,6 +3918,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3895
3918
|
}),
|
|
3896
3919
|
DragSelection = _useRowSelection.DragSelection,
|
|
3897
3920
|
selectedActionIds = _useRowSelection.selectedActionIds,
|
|
3921
|
+
justFinishedSelectionRef = _useRowSelection.justFinishedSelectionRef,
|
|
3898
3922
|
onClickOutside = _useRowSelection.onClickOutside,
|
|
3899
3923
|
onCtrlClick = _useRowSelection.onCtrlClick,
|
|
3900
3924
|
setSelectedActionIds = _useRowSelection.setSelectedActionIds;
|
|
@@ -4163,6 +4187,11 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4163
4187
|
return /*#__PURE__*/React.createElement("div", {
|
|
4164
4188
|
ref: editAreaRef,
|
|
4165
4189
|
className: prefix('edit-area') + " ".concat((className || '').replace('timeline-editor', '') || ''),
|
|
4190
|
+
onClickCapture: function onClickCapture(e) {
|
|
4191
|
+
if (!justFinishedSelectionRef.current) return;
|
|
4192
|
+
e.preventDefault();
|
|
4193
|
+
e.stopPropagation();
|
|
4194
|
+
},
|
|
4166
4195
|
style: {
|
|
4167
4196
|
height: isMulti ? _totalHeight : 'unset',
|
|
4168
4197
|
maxHeight: isMulti ? _totalHeight : 'unset',
|
package/dist/index.js
CHANGED
|
@@ -3105,6 +3105,8 @@ var useRowSelection = function useRowSelection(options) {
|
|
|
3105
3105
|
_useState2 = _slicedToArray(_useState, 2),
|
|
3106
3106
|
selectedActionIds = _useState2[0],
|
|
3107
3107
|
setSelectedActionIds = _useState2[1];
|
|
3108
|
+
var justFinishedSelectionRef = React.useRef(false);
|
|
3109
|
+
var selectionResetTimerRef = React.useRef(null);
|
|
3108
3110
|
// 计算框选区域与 action 的交集
|
|
3109
3111
|
var getIntersectedActions = React.useCallback(function (box) {
|
|
3110
3112
|
var _containerRef$current, _containerRef$current2;
|
|
@@ -3170,7 +3172,22 @@ var useRowSelection = function useRowSelection(options) {
|
|
|
3170
3172
|
}
|
|
3171
3173
|
},
|
|
3172
3174
|
onSelectionEnd: function onSelectionEnd() {
|
|
3173
|
-
|
|
3175
|
+
justFinishedSelectionRef.current = true;
|
|
3176
|
+
if (selectionResetTimerRef.current) {
|
|
3177
|
+
clearTimeout(selectionResetTimerRef.current);
|
|
3178
|
+
}
|
|
3179
|
+
selectionResetTimerRef.current = setTimeout(function () {
|
|
3180
|
+
justFinishedSelectionRef.current = false;
|
|
3181
|
+
selectionResetTimerRef.current = null;
|
|
3182
|
+
}, 0);
|
|
3183
|
+
// 清除框选框
|
|
3184
|
+
setTimeout(function () {
|
|
3185
|
+
var selectionBoxes = document.querySelectorAll('.timeline-editor-selection-box');
|
|
3186
|
+
Array.from(selectionBoxes).forEach(function (selectionBox) {
|
|
3187
|
+
// @ts-expect-error 忽略类型检查错误
|
|
3188
|
+
selectionBox.style.left = '-10px';
|
|
3189
|
+
});
|
|
3190
|
+
}, 0);
|
|
3174
3191
|
},
|
|
3175
3192
|
shouldStartSelecting: function shouldStartSelecting(target) {
|
|
3176
3193
|
var _element$closest, _element$closest2, _element$closest3, _element$closest4;
|
|
@@ -3187,7 +3204,8 @@ var useRowSelection = function useRowSelection(options) {
|
|
|
3187
3204
|
style: {
|
|
3188
3205
|
border: '2px solid #1890ff',
|
|
3189
3206
|
backgroundColor: 'rgba(24, 144, 255, 0.1)',
|
|
3190
|
-
zIndex: 9999
|
|
3207
|
+
zIndex: 9999,
|
|
3208
|
+
left: '-10px'
|
|
3191
3209
|
}
|
|
3192
3210
|
},
|
|
3193
3211
|
isEnabled: !disabled,
|
|
@@ -3232,11 +3250,15 @@ var useRowSelection = function useRowSelection(options) {
|
|
|
3232
3250
|
document.addEventListener('keydown', handleKeyDown);
|
|
3233
3251
|
return function () {
|
|
3234
3252
|
document.removeEventListener('keydown', handleKeyDown);
|
|
3253
|
+
if (selectionResetTimerRef.current) {
|
|
3254
|
+
clearTimeout(selectionResetTimerRef.current);
|
|
3255
|
+
}
|
|
3235
3256
|
};
|
|
3236
3257
|
}, [handleKeyDown]);
|
|
3237
3258
|
return {
|
|
3238
3259
|
DragSelection: DragSelection,
|
|
3239
3260
|
selectedActionIds: Array.from(selectedActionIds),
|
|
3261
|
+
justFinishedSelectionRef: justFinishedSelectionRef,
|
|
3240
3262
|
clearSelection: clearSelection,
|
|
3241
3263
|
onClickOutside: handleClickOutside,
|
|
3242
3264
|
onCtrlClick: handleCtrlClick,
|
|
@@ -3639,7 +3661,7 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
|
|
|
3639
3661
|
var handleUploadChange = function handleUploadChange(row) {
|
|
3640
3662
|
return /*#__PURE__*/function () {
|
|
3641
3663
|
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(info) {
|
|
3642
|
-
var _info$file$response, _info$file;
|
|
3664
|
+
var _info$file$response, _info$file, _info$file$response2;
|
|
3643
3665
|
var maxSize, hasDefault, totalDuration, _newAction, uid, duration, newAction;
|
|
3644
3666
|
return _regenerator().w(function (_context) {
|
|
3645
3667
|
while (1) switch (_context.n) {
|
|
@@ -3724,7 +3746,8 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
|
|
|
3724
3746
|
isUpload: true,
|
|
3725
3747
|
segment_type: 'bgm',
|
|
3726
3748
|
isUploading: false,
|
|
3727
|
-
uid: (_info$file = info.file) === null || _info$file === void 0 ? void 0 : _info$file.uid
|
|
3749
|
+
uid: (_info$file = info.file) === null || _info$file === void 0 ? void 0 : _info$file.uid,
|
|
3750
|
+
waveform: ((_info$file$response2 = info.file.response) === null || _info$file$response2 === void 0 ? void 0 : _info$file$response2.peaks) || []
|
|
3728
3751
|
};
|
|
3729
3752
|
onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [newAction]);
|
|
3730
3753
|
case 7:
|
|
@@ -3905,6 +3928,7 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
|
|
|
3905
3928
|
}),
|
|
3906
3929
|
DragSelection = _useRowSelection.DragSelection,
|
|
3907
3930
|
selectedActionIds = _useRowSelection.selectedActionIds,
|
|
3931
|
+
justFinishedSelectionRef = _useRowSelection.justFinishedSelectionRef,
|
|
3908
3932
|
onClickOutside = _useRowSelection.onClickOutside,
|
|
3909
3933
|
onCtrlClick = _useRowSelection.onCtrlClick,
|
|
3910
3934
|
setSelectedActionIds = _useRowSelection.setSelectedActionIds;
|
|
@@ -4173,6 +4197,11 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
|
|
|
4173
4197
|
return /*#__PURE__*/React__default['default'].createElement("div", {
|
|
4174
4198
|
ref: editAreaRef,
|
|
4175
4199
|
className: prefix('edit-area') + " ".concat((className || '').replace('timeline-editor', '') || ''),
|
|
4200
|
+
onClickCapture: function onClickCapture(e) {
|
|
4201
|
+
if (!justFinishedSelectionRef.current) return;
|
|
4202
|
+
e.preventDefault();
|
|
4203
|
+
e.stopPropagation();
|
|
4204
|
+
},
|
|
4176
4205
|
style: {
|
|
4177
4206
|
height: isMulti ? _totalHeight : 'unset',
|
|
4178
4207
|
maxHeight: isMulti ? _totalHeight : 'unset',
|