sense-react-timeline-editor 1.1.4 → 1.1.5

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.
Files changed (6) hide show
  1. package/dist/components/edit_area/edit_action.d.ts +1 -1
  2. package/dist/components/edit_area/edit_row.d.ts +1 -1
  3. package/dist/components/edit_area/hooks/drag_line_controller.d.ts +31 -0
  4. package/dist/index.esm.js +267 -201
  5. package/dist/index.js +267 -200
  6. package/package.json +1 -1
package/dist/components/edit_area/edit_action.d.ts CHANGED
@@ -6,7 +6,7 @@ import './edit_action.less';
6
6
  export declare type EditActionProps = CommonProp & {
7
7
  row: TimelineRow;
8
8
  action: TimelineAction;
9
- dragLineData: DragLineData;
9
+ dragLineData?: DragLineData;
10
10
  setEditorData: (params: TimelineRow[]) => void;
11
11
  handleTime: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => number;
12
12
  areaRef: React.MutableRefObject<HTMLDivElement>;
package/dist/components/edit_area/edit_row.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare type EditRowProps = CommonProp & {
7
7
  areaRef: React.MutableRefObject<HTMLDivElement>;
8
8
  rowData?: TimelineRow;
9
9
  style?: React.CSSProperties;
10
- dragLineData: DragLineData;
10
+ dragLineData?: DragLineData;
11
11
  setEditorData: (params: TimelineRow[]) => void;
12
12
  /** 距离左侧滚动距离 */
13
13
  scrollLeft: number;
package/dist/components/edit_area/hooks/drag_line_controller.d.ts ADDED
@@ -0,0 +1,31 @@
1
+ import React from "react";
2
+ import { TimelineAction, TimelineRow } from "../../../interface/action";
3
+ export interface DragLineControllerRef {
4
+ initDragLine: (data: {
5
+ action: TimelineAction;
6
+ row: TimelineRow;
7
+ }) => void;
8
+ updateDragLine: (data: {
9
+ start: number;
10
+ end: number;
11
+ dir?: "right" | "left";
12
+ }) => void;
13
+ disposeDragLine: () => void;
14
+ }
15
+ interface DragLineControllerProps {
16
+ dragLine: boolean;
17
+ editorData: TimelineRow[];
18
+ cursorTime: number;
19
+ scale: number;
20
+ scaleWidth: number;
21
+ startLeft: number;
22
+ hideCursor: boolean;
23
+ scrollLeft: number;
24
+ getAssistDragLineActionIds?: (params: {
25
+ action: TimelineAction;
26
+ row: TimelineRow;
27
+ editorData: TimelineRow[];
28
+ }) => string[];
29
+ }
30
+ export declare const DragLineController: React.MemoExoticComponent<React.ForwardRefExoticComponent<DragLineControllerProps & React.RefAttributes<DragLineControllerRef>>>;
31
+ export {};
package/dist/index.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState, useLayoutEffect, useCallback } from 'react';
1
+ import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState, useLayoutEffect, useCallback, memo, forwardRef, useMemo } from 'react';
2
2
  import { AutoSizer, Grid, ScrollSync } from 'react-virtualized';
3
3
  import { useThrottleEffect, useThrottleFn } from 'ahooks';
4
4
  import { prefixNames } from 'framework-utils';
@@ -7,6 +7,7 @@ import { useSelectionContainer } from '@air/react-drag-to-select';
7
7
  import { Upload, message } from 'antd/es';
8
8
  import { Howl } from 'howler';
9
9
  import { groupBy } from 'lodash-es';
10
+ import useSize from 'ahooks/es/useSize';
10
11
 
11
12
  function _arrayLikeToArray(r, a) {
12
13
  (null == a || a > r.length) && (a = r.length);
@@ -2081,38 +2082,12 @@ var Cursor = function Cursor(_ref) {
2081
2082
  })));
2082
2083
  };
2083
2084
 
2084
- var css_248z$1 = ".timeline-editor-drag-line-container {\n position: absolute;\n height: 100%;\n top: 0;\n left: 0;\n}\n.timeline-editor-drag-line {\n width: 0;\n position: absolute;\n top: 0;\n height: 99%;\n border-left: 1px dashed rgba(82, 151, 255, 0.6);\n}\n";
2085
+ var css_248z$1 = ".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";
2085
2086
  styleInject(css_248z$1);
2086
2087
 
2087
- /** 拖拽辅助线 */
2088
- var DragLines = function DragLines(_ref) {
2089
- var isMoving = _ref.isMoving,
2090
- _ref$movePositions = _ref.movePositions,
2091
- movePositions = _ref$movePositions === void 0 ? [] : _ref$movePositions,
2092
- _ref$assistPositions = _ref.assistPositions,
2093
- assistPositions = _ref$assistPositions === void 0 ? [] : _ref$assistPositions,
2094
- scrollLeft = _ref.scrollLeft;
2095
- return /*#__PURE__*/React.createElement("div", {
2096
- className: prefix('drag-line-container')
2097
- }, isMoving && movePositions.filter(function (item) {
2098
- return assistPositions.includes(item);
2099
- }).map(function (linePos, index) {
2100
- return /*#__PURE__*/React.createElement("div", {
2101
- key: index,
2102
- className: prefix('drag-line'),
2103
- style: {
2104
- left: linePos - scrollLeft
2105
- }
2106
- });
2107
- }));
2108
- };
2109
-
2110
- 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";
2088
+ var css_248z$2 = ".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 cursor: pointer;\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";
2111
2089
  styleInject(css_248z$2);
2112
2090
 
2113
- 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";
2114
- styleInject(css_248z$3);
2115
-
2116
2091
  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";
2117
2092
 
2118
2093
  var _excluded = ["left", "width", "top"];
@@ -2811,7 +2786,7 @@ var EditActionO = function EditActionO(_ref) {
2811
2786
  height: rowHeight,
2812
2787
  grid: gridSnap && gridSize || DEFAULT_MOVE_GRID,
2813
2788
  adsorptionDistance: gridSnap ? Math.max((gridSize || DEFAULT_MOVE_GRID) / 2, DEFAULT_ADSORPTION_DISTANCE) : DEFAULT_ADSORPTION_DISTANCE,
2814
- adsorptionPositions: dragLineData.assistPositions,
2789
+ // adsorptionPositions={dragLineData?.assistPositions}
2815
2790
  bounds: {
2816
2791
  left: leftLimit,
2817
2792
  right: rightLimit,
@@ -2909,8 +2884,8 @@ var EditActionO = function EditActionO(_ref) {
2909
2884
  };
2910
2885
  var EditAction = /*#__PURE__*/React.memo(EditActionO);
2911
2886
 
2912
- var css_248z$4 = ".timeline-editor-edit-row {\n background-repeat: no-repeat, repeat;\n display: flex;\n flex-direction: row;\n box-sizing: border-box;\n transition: background-color 0.15s ease, box-shadow 0.15s ease;\n}\n.timeline-editor-edit-row.preview-row {\n background-color: rgba(100, 150, 255, 0.15);\n border: 1px dashed rgba(100, 150, 255, 0.5);\n opacity: 0.8;\n transition: all 0.2s ease;\n}\n.timeline-editor-edit-row.selected {\n background-color: rgba(24, 144, 255, 0.08);\n box-shadow: inset 0 0 0 2px rgba(24, 144, 255, 0.4);\n position: relative;\n z-index: 10;\n}\n.timeline-editor-edit-row.selected::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background-color: #1890ff;\n}\n.timeline-editor-edit-row.dragging {\n opacity: 0.6;\n cursor: move;\n}\n";
2913
- styleInject(css_248z$4);
2887
+ var css_248z$3 = ".timeline-editor-edit-row {\n background-repeat: no-repeat, repeat;\n display: flex;\n flex-direction: row;\n box-sizing: border-box;\n transition: background-color 0.15s ease, box-shadow 0.15s ease;\n}\n.timeline-editor-edit-row.preview-row {\n background-color: rgba(100, 150, 255, 0.15);\n border: 1px dashed rgba(100, 150, 255, 0.5);\n opacity: 0.8;\n transition: all 0.2s ease;\n}\n.timeline-editor-edit-row.selected {\n background-color: rgba(24, 144, 255, 0.08);\n box-shadow: inset 0 0 0 2px rgba(24, 144, 255, 0.4);\n position: relative;\n z-index: 10;\n}\n.timeline-editor-edit-row.selected::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background-color: #1890ff;\n}\n.timeline-editor-edit-row.dragging {\n opacity: 0.6;\n cursor: move;\n}\n";
2888
+ styleInject(css_248z$3);
2914
2889
 
2915
2890
  var EditRow = function EditRow(props) {
2916
2891
  var rowData = props.rowData,
@@ -2965,8 +2940,7 @@ var EditRow = function EditRow(props) {
2965
2940
  }
2966
2941
  },
2967
2942
  onClick: function onClick(e) {
2968
- var _e$target;
2969
- var action = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.closest('.timeline-editor-action');
2943
+ // const action = (e.target as HTMLElement)?.closest('.timeline-editor-action');
2970
2944
  var time = handleTime(e);
2971
2945
  if (rowData && onClickRow) {
2972
2946
  onClickRow(e, {
@@ -2974,12 +2948,10 @@ var EditRow = function EditRow(props) {
2974
2948
  time: time
2975
2949
  });
2976
2950
  }
2977
- if (hideCursor) return;
2978
- if (setCursor && !action) {
2979
- setCursor({
2980
- time: time
2981
- });
2982
- }
2951
+ // if (hideCursor) return;
2952
+ // if (setCursor && !action) {
2953
+ // setCursor({ time });
2954
+ // }
2983
2955
  },
2984
2956
  onDoubleClick: function onDoubleClick(e) {
2985
2957
  if (rowData && onDoubleClickRow) {
@@ -3014,112 +2986,6 @@ var EditRow = function EditRow(props) {
3014
2986
  }));
3015
2987
  };
3016
2988
 
3017
- function useDragLine() {
3018
- var _useState = useState({
3019
- isMoving: false,
3020
- movePositions: [],
3021
- assistPositions: []
3022
- }),
3023
- _useState2 = _slicedToArray(_useState, 2),
3024
- dragLineData = _useState2[0],
3025
- setDragLineData = _useState2[1];
3026
- /** 获取辅助线 */
3027
- var defaultGetAssistPosition = function defaultGetAssistPosition(data) {
3028
- var editorData = data.editorData,
3029
- assistActionIds = data.assistActionIds,
3030
- action = data.action,
3031
- row = data.row,
3032
- scale = data.scale,
3033
- scaleWidth = data.scaleWidth,
3034
- startLeft = data.startLeft,
3035
- cursorLeft = data.cursorLeft,
3036
- hideCursor = data.hideCursor;
3037
- var otherActions = [];
3038
- if (assistActionIds) {
3039
- editorData.forEach(function (rowItem) {
3040
- rowItem.actions.forEach(function (actionItem) {
3041
- if (assistActionIds.includes(actionItem.id)) otherActions.push(actionItem);
3042
- });
3043
- });
3044
- } else {
3045
- editorData.forEach(function (rowItem) {
3046
- if (rowItem.id !== row.id) {
3047
- otherActions.push.apply(otherActions, _toConsumableArray(rowItem.actions));
3048
- } else {
3049
- rowItem.actions.forEach(function (actionItem) {
3050
- if (actionItem.id !== action.id) otherActions.push(actionItem);
3051
- });
3052
- }
3053
- });
3054
- }
3055
- var positions = parserActionsToPositions(otherActions, {
3056
- startLeft: startLeft,
3057
- scale: scale,
3058
- scaleWidth: scaleWidth
3059
- });
3060
- if (!hideCursor) positions.push(cursorLeft);
3061
- return positions;
3062
- };
3063
- /** 获取当前移动标记 */
3064
- var defaultGetMovePosition = function defaultGetMovePosition(data) {
3065
- var start = data.start,
3066
- end = data.end,
3067
- dir = data.dir,
3068
- scale = data.scale,
3069
- scaleWidth = data.scaleWidth,
3070
- startLeft = data.startLeft;
3071
- var _parserTimeToTransfor = parserTimeToTransform({
3072
- start: start,
3073
- end: end
3074
- }, {
3075
- startLeft: startLeft,
3076
- scaleWidth: scaleWidth,
3077
- scale: scale
3078
- }),
3079
- left = _parserTimeToTransfor.left,
3080
- width = _parserTimeToTransfor.width;
3081
- if (!dir) return [left, left + width];
3082
- return dir === "right" ? [left + width] : [left];
3083
- };
3084
- /** 初始化draglines */
3085
- var initDragLine = function initDragLine(data) {
3086
- var movePositions = data.movePositions,
3087
- assistPositions = data.assistPositions;
3088
- setDragLineData({
3089
- isMoving: true,
3090
- movePositions: movePositions || [],
3091
- assistPositions: assistPositions || []
3092
- });
3093
- };
3094
- /** 更新dragline */
3095
- var updateDragLine = function updateDragLine(data) {
3096
- var movePositions = data.movePositions,
3097
- assistPositions = data.assistPositions;
3098
- setDragLineData(function (pre) {
3099
- return _objectSpread2(_objectSpread2({}, pre), {}, {
3100
- movePositions: movePositions || pre.movePositions,
3101
- assistPositions: assistPositions || pre.assistPositions
3102
- });
3103
- });
3104
- };
3105
- /** 释放draglines */
3106
- var disposeDragLine = function disposeDragLine() {
3107
- setDragLineData({
3108
- isMoving: false,
3109
- movePositions: [],
3110
- assistPositions: []
3111
- });
3112
- };
3113
- return {
3114
- initDragLine: initDragLine,
3115
- updateDragLine: updateDragLine,
3116
- disposeDragLine: disposeDragLine,
3117
- dragLineData: dragLineData,
3118
- defaultGetAssistPosition: defaultGetAssistPosition,
3119
- defaultGetMovePosition: defaultGetMovePosition
3120
- };
3121
- }
3122
-
3123
2989
  var useRowSelection = function useRowSelection(options) {
3124
2990
  var editorData = options.editorData,
3125
2991
  rowHeight = options.rowHeight,
@@ -3829,13 +3695,6 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
3829
3695
  };
3830
3696
  }();
3831
3697
  };
3832
- var _useDragLine = useDragLine(),
3833
- dragLineData = _useDragLine.dragLineData,
3834
- initDragLine = _useDragLine.initDragLine,
3835
- updateDragLine = _useDragLine.updateDragLine,
3836
- disposeDragLine = _useDragLine.disposeDragLine,
3837
- defaultGetAssistPosition = _useDragLine.defaultGetAssistPosition,
3838
- defaultGetMovePosition = _useDragLine.defaultGetMovePosition;
3839
3698
  var editAreaRef = useRef();
3840
3699
  var gridRef = useRef();
3841
3700
  var _useState = useState(0),
@@ -3937,44 +3796,10 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
3937
3796
  };
3938
3797
  });
3939
3798
  var handleInitDragLine = function handleInitDragLine(data) {
3940
- if (dragLine) {
3941
- var assistActionIds = getAssistDragLineActionIds && getAssistDragLineActionIds({
3942
- action: data.action,
3943
- row: data.row,
3944
- editorData: editorData
3945
- });
3946
- var cursorLeft = parserTimeToPixel(cursorTime, {
3947
- scaleWidth: scaleWidth,
3948
- scale: scale,
3949
- startLeft: startLeft
3950
- });
3951
- var assistPositions = defaultGetAssistPosition({
3952
- editorData: editorData,
3953
- assistActionIds: assistActionIds,
3954
- action: data.action,
3955
- row: data.row,
3956
- scale: scale,
3957
- scaleWidth: scaleWidth,
3958
- startLeft: startLeft,
3959
- hideCursor: hideCursor,
3960
- cursorLeft: cursorLeft
3961
- });
3962
- initDragLine({
3963
- assistPositions: assistPositions
3964
- });
3965
- }
3799
+ _onActionMoveStart === null || _onActionMoveStart === void 0 ? void 0 : _onActionMoveStart(data);
3966
3800
  };
3967
3801
  var handleUpdateDragLine = function handleUpdateDragLine(data) {
3968
- if (dragLine) {
3969
- var movePositions = defaultGetMovePosition(_objectSpread2(_objectSpread2({}, data), {}, {
3970
- startLeft: startLeft,
3971
- scaleWidth: scaleWidth,
3972
- scale: scale
3973
- }));
3974
- updateDragLine({
3975
- movePositions: movePositions
3976
- });
3977
- }
3802
+ _onActionMoving === null || _onActionMoving === void 0 ? void 0 : _onActionMoving(data);
3978
3803
  };
3979
3804
  useEffect(function () {
3980
3805
  if (!(engineRef === null || engineRef === void 0 ? void 0 : engineRef.current)) return;
@@ -4058,7 +3883,6 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
4058
3883
  key: key,
4059
3884
  rowHeight: (row === null || row === void 0 ? void 0 : row.rowHeight) || _rowHeight,
4060
3885
  rowData: row,
4061
- dragLineData: dragLineData,
4062
3886
  allowCreateTrack: allowCreateTrack,
4063
3887
  setDropPreview: setDropPreview,
4064
3888
  containerRef: containerRef,
@@ -4100,11 +3924,9 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
4100
3924
  return _onActionResizing && _onActionResizing(data);
4101
3925
  },
4102
3926
  onActionResizeEnd: function onActionResizeEnd(data) {
4103
- disposeDragLine();
4104
3927
  return _onActionResizeEnd && _onActionResizeEnd(data);
4105
3928
  },
4106
3929
  onActionMoveEnd: function onActionMoveEnd(data) {
4107
- disposeDragLine();
4108
3930
  // 传递拖拽结束参数给多选拖拽处理
4109
3931
  onDragEnd({
4110
3932
  actionId: data.action.id,
@@ -4216,9 +4038,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
4216
4038
  _onScroll(param);
4217
4039
  }
4218
4040
  });
4219
- }), /*#__PURE__*/React.createElement(DragSelection, null), dragLine && /*#__PURE__*/React.createElement(DragLines, _objectSpread2({
4220
- scrollLeft: scrollLeft
4221
- }, dragLineData)), dragIndicator && function () {
4041
+ }), /*#__PURE__*/React.createElement(DragSelection, null), dragIndicator && function () {
4222
4042
  // 计算拖拽位置指示器的位置
4223
4043
  var top = 0;
4224
4044
  var targetIndex = dragIndicator.targetIndex;
@@ -4268,11 +4088,11 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
4268
4088
  });
4269
4089
  var EditArea = /*#__PURE__*/React.memo(EditAreaO);
4270
4090
 
4271
- var css_248z$5 = ".timeline-editor {\n height: 600px;\n width: 600px;\n min-height: 32px;\n position: relative;\n font-size: 12px;\n font-family: \"PingFang SC\";\n background-color: #191b1d;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.timeline-editor.light {\n background-color: #fff;\n}\n";
4272
- styleInject(css_248z$5);
4091
+ var css_248z$4 = ".timeline-editor {\n height: 600px;\n width: 600px;\n min-height: 32px;\n position: relative;\n font-size: 12px;\n font-family: \"PingFang SC\";\n background-color: #191b1d;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.timeline-editor.light {\n background-color: #fff;\n}\n";
4092
+ styleInject(css_248z$4);
4273
4093
 
4274
- var css_248z$6 = ".timeline-editor-time-area {\n position: relative;\n height: 32px;\n flex: 0 0 auto;\n}\n.timeline-editor-time-area .ReactVirtualized__Grid {\n outline: none;\n}\n.timeline-editor-time-area .ReactVirtualized__Grid::-webkit-scrollbar {\n display: none;\n}\n.timeline-editor-time-area-interact {\n position: absolute;\n cursor: pointer;\n left: 0;\n top: 0;\n}\n.timeline-editor-time-unit {\n border-right: 1px solid rgba(255, 255, 255, 0.2);\n position: relative;\n box-sizing: content-box;\n height: 4px !important;\n bottom: 0 !important;\n top: auto !important;\n}\n.timeline-editor-time-unit-big {\n height: 8px !important;\n}\n.timeline-editor-time-unit-scale {\n color: rgba(255, 255, 255, 0.6);\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(50%, -100%);\n}\n.light.timeline-editor .timeline-editor-time-unit {\n border-color: #111;\n}\n.light.timeline-editor .timeline-editor-time-unit-scale {\n color: #666;\n}\n";
4275
- styleInject(css_248z$6);
4094
+ var css_248z$5 = ".timeline-editor-time-area {\n position: relative;\n height: 32px;\n flex: 0 0 auto;\n}\n.timeline-editor-time-area .ReactVirtualized__Grid {\n outline: none;\n}\n.timeline-editor-time-area .ReactVirtualized__Grid::-webkit-scrollbar {\n display: none;\n}\n.timeline-editor-time-area-interact {\n position: absolute;\n cursor: pointer;\n left: 0;\n top: 0;\n}\n.timeline-editor-time-unit {\n border-right: 1px solid rgba(255, 255, 255, 0.2);\n position: relative;\n box-sizing: content-box;\n height: 4px !important;\n bottom: 0 !important;\n top: auto !important;\n}\n.timeline-editor-time-unit-big {\n height: 8px !important;\n}\n.timeline-editor-time-unit-scale {\n color: rgba(255, 255, 255, 0.6);\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(50%, -100%);\n}\n.light.timeline-editor .timeline-editor-time-unit {\n border-color: #111;\n}\n.light.timeline-editor .timeline-editor-time-unit-scale {\n color: #666;\n}\n";
4095
+ styleInject(css_248z$5);
4276
4096
 
4277
4097
  /** 动画时间轴组件 */
4278
4098
  var TimeArea = function TimeArea(_ref) {
@@ -4374,6 +4194,190 @@ var TimeArea = function TimeArea(_ref) {
4374
4194
  }));
4375
4195
  };
4376
4196
 
4197
+ var css_248z$6 = ".timeline-editor-drag-line-container {\n position: absolute;\n height: 100%;\n top: 0;\n left: 0;\n}\n.timeline-editor-drag-line {\n width: 0;\n position: absolute;\n top: 0;\n height: 99%;\n border-left: 0.5px solid #009C2C;\n}\n";
4198
+ styleInject(css_248z$6);
4199
+
4200
+ /** 拖拽辅助线 */
4201
+ var DragLines = /*#__PURE__*/memo(function (_ref) {
4202
+ var isMoving = _ref.isMoving,
4203
+ _ref$movePositions = _ref.movePositions,
4204
+ movePositions = _ref$movePositions === void 0 ? [] : _ref$movePositions,
4205
+ _ref$assistPositions = _ref.assistPositions,
4206
+ assistPositions = _ref$assistPositions === void 0 ? [] : _ref$assistPositions,
4207
+ scrollLeft = _ref.scrollLeft;
4208
+ var _ref2 = useSize(document.querySelector('#time-editor-container')) || {},
4209
+ _ref2$height = _ref2.height,
4210
+ height = _ref2$height === void 0 ? 0 : _ref2$height;
4211
+ var tolerance = 5; // 容差范围，单位像素
4212
+ return /*#__PURE__*/React.createElement("div", {
4213
+ className: prefix('drag-line-container'),
4214
+ style: {
4215
+ height: height || '100%'
4216
+ }
4217
+ }, isMoving && movePositions.map(function (movePos) {
4218
+ // 查找在容差范围内的辅助线位置
4219
+ var matchedAssistPos = assistPositions.find(function (assistPos) {
4220
+ return Math.abs(movePos - assistPos) <= tolerance;
4221
+ });
4222
+ if (matchedAssistPos) {
4223
+ return /*#__PURE__*/React.createElement("div", {
4224
+ key: matchedAssistPos,
4225
+ className: prefix('drag-line'),
4226
+ style: {
4227
+ left: matchedAssistPos - scrollLeft
4228
+ }
4229
+ });
4230
+ }
4231
+ return null;
4232
+ }));
4233
+ });
4234
+
4235
+ var defaultGetAssistPosition = function defaultGetAssistPosition(data) {
4236
+ var editorData = data.editorData,
4237
+ assistActionIds = data.assistActionIds,
4238
+ action = data.action,
4239
+ row = data.row,
4240
+ scale = data.scale,
4241
+ scaleWidth = data.scaleWidth,
4242
+ startLeft = data.startLeft,
4243
+ cursorLeft = data.cursorLeft,
4244
+ hideCursor = data.hideCursor;
4245
+ var otherActions = [];
4246
+ if (assistActionIds) {
4247
+ editorData.forEach(function (rowItem) {
4248
+ rowItem.actions.forEach(function (actionItem) {
4249
+ if (assistActionIds.includes(actionItem.id)) otherActions.push(actionItem);
4250
+ });
4251
+ });
4252
+ } else {
4253
+ editorData.forEach(function (rowItem) {
4254
+ if (rowItem.id !== row.id) {
4255
+ otherActions.push.apply(otherActions, _toConsumableArray(rowItem.actions));
4256
+ } else {
4257
+ rowItem.actions.forEach(function (actionItem) {
4258
+ if (actionItem.id !== action.id) otherActions.push(actionItem);
4259
+ });
4260
+ }
4261
+ });
4262
+ }
4263
+ var positions = parserActionsToPositions(otherActions, {
4264
+ startLeft: startLeft,
4265
+ scale: scale,
4266
+ scaleWidth: scaleWidth
4267
+ });
4268
+ if (!hideCursor) positions.push(cursorLeft);
4269
+ return positions;
4270
+ };
4271
+ var defaultGetMovePosition = function defaultGetMovePosition(data) {
4272
+ var start = data.start,
4273
+ end = data.end,
4274
+ dir = data.dir,
4275
+ scale = data.scale,
4276
+ scaleWidth = data.scaleWidth,
4277
+ startLeft = data.startLeft;
4278
+ var _parserTimeToTransfor = parserTimeToTransform({
4279
+ start: start,
4280
+ end: end
4281
+ }, {
4282
+ startLeft: startLeft,
4283
+ scaleWidth: scaleWidth,
4284
+ scale: scale
4285
+ }),
4286
+ left = _parserTimeToTransfor.left,
4287
+ width = _parserTimeToTransfor.width;
4288
+ if (!dir) return [left, left + width];
4289
+ return dir === "right" ? [left + width] : [left];
4290
+ };
4291
+ var DragLineController = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (props, ref) {
4292
+ var dragLine = props.dragLine,
4293
+ editorData = props.editorData,
4294
+ cursorTime = props.cursorTime,
4295
+ scale = props.scale,
4296
+ scaleWidth = props.scaleWidth,
4297
+ startLeft = props.startLeft,
4298
+ hideCursor = props.hideCursor,
4299
+ scrollLeft = props.scrollLeft,
4300
+ getAssistDragLineActionIds = props.getAssistDragLineActionIds;
4301
+ var _useState = useState({
4302
+ isMoving: false,
4303
+ movePositions: [],
4304
+ assistPositions: []
4305
+ }),
4306
+ _useState2 = _slicedToArray(_useState, 2),
4307
+ dragLineData = _useState2[0],
4308
+ setDragLineData = _useState2[1];
4309
+ console.log('dragLineData = ', dragLineData);
4310
+ var initDragLine = useCallback(function (data) {
4311
+ if (dragLine) {
4312
+ var assistActionIds = getAssistDragLineActionIds && getAssistDragLineActionIds({
4313
+ action: data.action,
4314
+ row: data.row,
4315
+ editorData: editorData
4316
+ });
4317
+ var cursorLeft = parserTimeToPixel(cursorTime, {
4318
+ scaleWidth: scaleWidth,
4319
+ scale: scale,
4320
+ startLeft: startLeft
4321
+ });
4322
+ var assistPositions = defaultGetAssistPosition({
4323
+ editorData: editorData,
4324
+ assistActionIds: assistActionIds,
4325
+ action: data.action,
4326
+ row: data.row,
4327
+ scale: scale,
4328
+ scaleWidth: scaleWidth,
4329
+ startLeft: startLeft,
4330
+ hideCursor: hideCursor,
4331
+ cursorLeft: cursorLeft
4332
+ });
4333
+ setDragLineData({
4334
+ isMoving: true,
4335
+ movePositions: [],
4336
+ assistPositions: assistPositions
4337
+ });
4338
+ }
4339
+ }, [dragLine, editorData, cursorTime, scale, scaleWidth, startLeft, hideCursor, getAssistDragLineActionIds]);
4340
+ var updateDragLine = useCallback(function (data) {
4341
+ if (dragLine) {
4342
+ var movePositions = defaultGetMovePosition(_objectSpread2(_objectSpread2({}, data), {}, {
4343
+ startLeft: startLeft,
4344
+ scaleWidth: scaleWidth,
4345
+ scale: scale
4346
+ }));
4347
+ setDragLineData(function (prev) {
4348
+ return _objectSpread2(_objectSpread2({}, prev), {}, {
4349
+ movePositions: movePositions
4350
+ });
4351
+ });
4352
+ }
4353
+ }, [dragLine, startLeft, scaleWidth, scale]);
4354
+ var disposeDragLine = useCallback(function () {
4355
+ setDragLineData({
4356
+ isMoving: false,
4357
+ movePositions: [],
4358
+ assistPositions: []
4359
+ });
4360
+ }, []);
4361
+ useImperativeHandle(ref, function () {
4362
+ return {
4363
+ initDragLine: initDragLine,
4364
+ updateDragLine: updateDragLine,
4365
+ disposeDragLine: disposeDragLine
4366
+ };
4367
+ }, [initDragLine, updateDragLine, disposeDragLine]);
4368
+ var dragLinesProps = useMemo(function () {
4369
+ return {
4370
+ isMoving: dragLineData.isMoving,
4371
+ movePositions: dragLineData.movePositions,
4372
+ assistPositions: dragLineData.assistPositions,
4373
+ scrollLeft: scrollLeft
4374
+ };
4375
+ }, [dragLineData.isMoving, dragLineData.movePositions, dragLineData.assistPositions, scrollLeft]);
4376
+ if (!dragLine) return null;
4377
+ return /*#__PURE__*/React.createElement(DragLines, _objectSpread2({}, dragLinesProps));
4378
+ }));
4379
+ DragLineController.displayName = "DragLineController";
4380
+
4377
4381
  var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4378
4382
  var checkedProps = checkProps(props);
4379
4383
  var style = props.style,
@@ -4385,6 +4389,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4385
4389
  autoScroll = checkedProps.autoScroll,
4386
4390
  hideCursor = checkedProps.hideCursor,
4387
4391
  disableDrag = checkedProps.disableDrag,
4392
+ dragLine = checkedProps.dragLine,
4388
4393
  scale = checkedProps.scale,
4389
4394
  scaleWidth = checkedProps.scaleWidth,
4390
4395
  startLeft = checkedProps.startLeft,
@@ -4428,6 +4433,7 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4428
4433
  _useState0 = _slicedToArray(_useState9, 2),
4429
4434
  width = _useState0[0],
4430
4435
  setWidth = _useState0[1];
4436
+ var dragLineControllerRef = useRef(null);
4431
4437
  var groupedData = groupBy(editorData, 'type');
4432
4438
  var areaCount = Object.keys(groupedData).length;
4433
4439
  var keys = Object.keys(groupedData);
@@ -4503,6 +4509,24 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4503
4509
  scrollLeft: Math.max(scrollSync.current.state.scrollLeft + delta, 0)
4504
4510
  });
4505
4511
  };
4512
+ var handleInitDragLine = useCallback(function (data) {
4513
+ var _checkedProps$onActio, _checkedProps$onActio2, _dragLineControllerRe;
4514
+ (_checkedProps$onActio = checkedProps.onActionMoveStart) === null || _checkedProps$onActio === void 0 ? void 0 : _checkedProps$onActio.call(checkedProps, data);
4515
+ (_checkedProps$onActio2 = checkedProps.onActionResizeStart) === null || _checkedProps$onActio2 === void 0 ? void 0 : _checkedProps$onActio2.call(checkedProps, data);
4516
+ (_dragLineControllerRe = dragLineControllerRef.current) === null || _dragLineControllerRe === void 0 ? void 0 : _dragLineControllerRe.initDragLine(data);
4517
+ }, [checkedProps]);
4518
+ var handleUpdateDragLine = useCallback(function (data) {
4519
+ var _checkedProps$onActio3, _checkedProps$onActio4, _dragLineControllerRe2;
4520
+ (_checkedProps$onActio3 = checkedProps.onActionMoving) === null || _checkedProps$onActio3 === void 0 ? void 0 : _checkedProps$onActio3.call(checkedProps, data);
4521
+ (_checkedProps$onActio4 = checkedProps.onActionResizing) === null || _checkedProps$onActio4 === void 0 ? void 0 : _checkedProps$onActio4.call(checkedProps, data);
4522
+ (_dragLineControllerRe2 = dragLineControllerRef.current) === null || _dragLineControllerRe2 === void 0 ? void 0 : _dragLineControllerRe2.updateDragLine(data);
4523
+ }, [checkedProps]);
4524
+ var handleDisposeDragLine = useCallback(function (data) {
4525
+ var _checkedProps$onActio5, _checkedProps$onActio6, _dragLineControllerRe3;
4526
+ (_checkedProps$onActio5 = checkedProps.onActionMoveEnd) === null || _checkedProps$onActio5 === void 0 ? void 0 : _checkedProps$onActio5.call(checkedProps, data);
4527
+ (_checkedProps$onActio6 = checkedProps.onActionResizeEnd) === null || _checkedProps$onActio6 === void 0 ? void 0 : _checkedProps$onActio6.call(checkedProps, data);
4528
+ (_dragLineControllerRe3 = dragLineControllerRef.current) === null || _dragLineControllerRe3 === void 0 ? void 0 : _dragLineControllerRe3.disposeDragLine();
4529
+ }, [checkedProps]);
4506
4530
  // 处理运行器相关数据
4507
4531
  useEffect(function () {
4508
4532
  var handleTime = function handleTime(_ref) {
@@ -4575,6 +4599,24 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4575
4599
  }
4576
4600
  };
4577
4601
  });
4602
+ var onClickTimeline = function onClickTimeline(e) {
4603
+ var _e$target;
4604
+ if (!domRef.current) return;
4605
+ var rect = domRef.current.getBoundingClientRect();
4606
+ var position = e.clientX - rect.x;
4607
+ var left = position + scrollSync.current.state.scrollLeft;
4608
+ var time = parserPixelToTime(left, {
4609
+ startLeft: startLeft,
4610
+ scale: scale,
4611
+ scaleWidth: scaleWidth
4612
+ });
4613
+ var action = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.closest('.timeline-editor-action');
4614
+ if (action || hideCursor) return;
4615
+ console.log('onClickTimeline = ', time);
4616
+ handleSetCursor({
4617
+ time: time
4618
+ });
4619
+ };
4578
4620
  // 监听timeline区域宽度变化
4579
4621
  useEffect(function () {
4580
4622
  if (areaRef.current) {
@@ -4626,6 +4668,12 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4626
4668
  deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
4627
4669
  allowCreateTrack: allowCreateTrack,
4628
4670
  onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
4671
+ onActionMoveStart: handleInitDragLine,
4672
+ onActionResizeStart: handleInitDragLine,
4673
+ onActionMoving: handleUpdateDragLine,
4674
+ onActionResizing: handleUpdateDragLine,
4675
+ onActionMoveEnd: handleDisposeDragLine,
4676
+ onActionResizeEnd: handleDisposeDragLine,
4629
4677
  onScroll: function onScroll(params) {
4630
4678
  _onScroll(params);
4631
4679
  onScrollVertical && onScrollVertical(params);
@@ -4635,7 +4683,8 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4635
4683
  ref: containerRef,
4636
4684
  style: {
4637
4685
  height: '100%'
4638
- }
4686
+ },
4687
+ onClick: onClickTimeline
4639
4688
  }, Object.keys(groupedData).map(function (key, index) {
4640
4689
  var handleGroupDataChange = function handleGroupDataChange(updatedData) {
4641
4690
  var mergedData = editorData.filter(function (item) {
@@ -4682,6 +4731,12 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4682
4731
  containerRef: containerRef,
4683
4732
  onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
4684
4733
  engineRef: engineRef,
4734
+ onActionMoveStart: handleInitDragLine,
4735
+ onActionResizeStart: handleInitDragLine,
4736
+ onActionMoving: handleUpdateDragLine,
4737
+ onActionResizing: handleUpdateDragLine,
4738
+ onActionMoveEnd: handleDisposeDragLine,
4739
+ onActionResizeEnd: handleDisposeDragLine,
4685
4740
  onScroll: function onScroll(params) {
4686
4741
  _onScroll(params);
4687
4742
  onScrollVertical && onScrollVertical(params);
@@ -4699,7 +4754,18 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
4699
4754
  areaRef: areaRef,
4700
4755
  scrollSync: scrollSync,
4701
4756
  deltaScrollLeft: autoScroll && handleDeltaScrollLeft
4702
- }))));
4757
+ }))), /*#__PURE__*/React.createElement(DragLineController, {
4758
+ ref: dragLineControllerRef,
4759
+ dragLine: dragLine,
4760
+ editorData: editorData,
4761
+ cursorTime: cursorTime,
4762
+ scale: scale,
4763
+ scaleWidth: scaleWidth,
4764
+ startLeft: startLeft,
4765
+ hideCursor: hideCursor,
4766
+ scrollLeft: scrollLeft,
4767
+ getAssistDragLineActionIds: checkedProps.getAssistDragLineActionIds
4768
+ }));
4703
4769
  }));
4704
4770
  });
4705
4771
 
package/dist/index.js CHANGED
@@ -11,11 +11,13 @@ var reactDragToSelect = require('@air/react-drag-to-select');
11
11
  var es = require('antd/es');
12
12
  var howler = require('howler');
13
13
  var lodashEs = require('lodash-es');
14
+ var useSize = require('ahooks/es/useSize');
14
15
 
15
16
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
17
 
17
18
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
19
  var interact__default = /*#__PURE__*/_interopDefaultLegacy(interact);
20
+ var useSize__default = /*#__PURE__*/_interopDefaultLegacy(useSize);
19
21
 
20
22
  function _arrayLikeToArray(r, a) {
21
23
  (null == a || a > r.length) && (a = r.length);
@@ -2090,38 +2092,12 @@ var Cursor = function Cursor(_ref) {
2090
2092
  })));
2091
2093
  };
2092
2094
 
2093
- var css_248z$1 = ".timeline-editor-drag-line-container {\n position: absolute;\n height: 100%;\n top: 0;\n left: 0;\n}\n.timeline-editor-drag-line {\n width: 0;\n position: absolute;\n top: 0;\n height: 99%;\n border-left: 1px dashed rgba(82, 151, 255, 0.6);\n}\n";
2095
+ var css_248z$1 = ".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";
2094
2096
  styleInject(css_248z$1);
2095
2097
 
2096
- /** 拖拽辅助线 */
2097
- var DragLines = function DragLines(_ref) {
2098
- var isMoving = _ref.isMoving,
2099
- _ref$movePositions = _ref.movePositions,
2100
- movePositions = _ref$movePositions === void 0 ? [] : _ref$movePositions,
2101
- _ref$assistPositions = _ref.assistPositions,
2102
- assistPositions = _ref$assistPositions === void 0 ? [] : _ref$assistPositions,
2103
- scrollLeft = _ref.scrollLeft;
2104
- return /*#__PURE__*/React__default['default'].createElement("div", {
2105
- className: prefix('drag-line-container')
2106
- }, isMoving && movePositions.filter(function (item) {
2107
- return assistPositions.includes(item);
2108
- }).map(function (linePos, index) {
2109
- return /*#__PURE__*/React__default['default'].createElement("div", {
2110
- key: index,
2111
- className: prefix('drag-line'),
2112
- style: {
2113
- left: linePos - scrollLeft
2114
- }
2115
- });
2116
- }));
2117
- };
2118
-
2119
- 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";
2098
+ var css_248z$2 = ".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 cursor: pointer;\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";
2120
2099
  styleInject(css_248z$2);
2121
2100
 
2122
- 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";
2123
- styleInject(css_248z$3);
2124
-
2125
2101
  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";
2126
2102
 
2127
2103
  var _excluded = ["left", "width", "top"];
@@ -2820,7 +2796,7 @@ var EditActionO = function EditActionO(_ref) {
2820
2796
  height: rowHeight,
2821
2797
  grid: gridSnap && gridSize || DEFAULT_MOVE_GRID,
2822
2798
  adsorptionDistance: gridSnap ? Math.max((gridSize || DEFAULT_MOVE_GRID) / 2, DEFAULT_ADSORPTION_DISTANCE) : DEFAULT_ADSORPTION_DISTANCE,
2823
- adsorptionPositions: dragLineData.assistPositions,
2799
+ // adsorptionPositions={dragLineData?.assistPositions}
2824
2800
  bounds: {
2825
2801
  left: leftLimit,
2826
2802
  right: rightLimit,
@@ -2918,8 +2894,8 @@ var EditActionO = function EditActionO(_ref) {
2918
2894
  };
2919
2895
  var EditAction = /*#__PURE__*/React__default['default'].memo(EditActionO);
2920
2896
 
2921
- var css_248z$4 = ".timeline-editor-edit-row {\n background-repeat: no-repeat, repeat;\n display: flex;\n flex-direction: row;\n box-sizing: border-box;\n transition: background-color 0.15s ease, box-shadow 0.15s ease;\n}\n.timeline-editor-edit-row.preview-row {\n background-color: rgba(100, 150, 255, 0.15);\n border: 1px dashed rgba(100, 150, 255, 0.5);\n opacity: 0.8;\n transition: all 0.2s ease;\n}\n.timeline-editor-edit-row.selected {\n background-color: rgba(24, 144, 255, 0.08);\n box-shadow: inset 0 0 0 2px rgba(24, 144, 255, 0.4);\n position: relative;\n z-index: 10;\n}\n.timeline-editor-edit-row.selected::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background-color: #1890ff;\n}\n.timeline-editor-edit-row.dragging {\n opacity: 0.6;\n cursor: move;\n}\n";
2922
- styleInject(css_248z$4);
2897
+ var css_248z$3 = ".timeline-editor-edit-row {\n background-repeat: no-repeat, repeat;\n display: flex;\n flex-direction: row;\n box-sizing: border-box;\n transition: background-color 0.15s ease, box-shadow 0.15s ease;\n}\n.timeline-editor-edit-row.preview-row {\n background-color: rgba(100, 150, 255, 0.15);\n border: 1px dashed rgba(100, 150, 255, 0.5);\n opacity: 0.8;\n transition: all 0.2s ease;\n}\n.timeline-editor-edit-row.selected {\n background-color: rgba(24, 144, 255, 0.08);\n box-shadow: inset 0 0 0 2px rgba(24, 144, 255, 0.4);\n position: relative;\n z-index: 10;\n}\n.timeline-editor-edit-row.selected::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background-color: #1890ff;\n}\n.timeline-editor-edit-row.dragging {\n opacity: 0.6;\n cursor: move;\n}\n";
2898
+ styleInject(css_248z$3);
2923
2899
 
2924
2900
  var EditRow = function EditRow(props) {
2925
2901
  var rowData = props.rowData,
@@ -2974,8 +2950,7 @@ var EditRow = function EditRow(props) {
2974
2950
  }
2975
2951
  },
2976
2952
  onClick: function onClick(e) {
2977
- var _e$target;
2978
- var action = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.closest('.timeline-editor-action');
2953
+ // const action = (e.target as HTMLElement)?.closest('.timeline-editor-action');
2979
2954
  var time = handleTime(e);
2980
2955
  if (rowData && onClickRow) {
2981
2956
  onClickRow(e, {
@@ -2983,12 +2958,10 @@ var EditRow = function EditRow(props) {
2983
2958
  time: time
2984
2959
  });
2985
2960
  }
2986
- if (hideCursor) return;
2987
- if (setCursor && !action) {
2988
- setCursor({
2989
- time: time
2990
- });
2991
- }
2961
+ // if (hideCursor) return;
2962
+ // if (setCursor && !action) {
2963
+ // setCursor({ time });
2964
+ // }
2992
2965
  },
2993
2966
  onDoubleClick: function onDoubleClick(e) {
2994
2967
  if (rowData && onDoubleClickRow) {
@@ -3023,112 +2996,6 @@ var EditRow = function EditRow(props) {
3023
2996
  }));
3024
2997
  };
3025
2998
 
3026
- function useDragLine() {
3027
- var _useState = React.useState({
3028
- isMoving: false,
3029
- movePositions: [],
3030
- assistPositions: []
3031
- }),
3032
- _useState2 = _slicedToArray(_useState, 2),
3033
- dragLineData = _useState2[0],
3034
- setDragLineData = _useState2[1];
3035
- /** 获取辅助线 */
3036
- var defaultGetAssistPosition = function defaultGetAssistPosition(data) {
3037
- var editorData = data.editorData,
3038
- assistActionIds = data.assistActionIds,
3039
- action = data.action,
3040
- row = data.row,
3041
- scale = data.scale,
3042
- scaleWidth = data.scaleWidth,
3043
- startLeft = data.startLeft,
3044
- cursorLeft = data.cursorLeft,
3045
- hideCursor = data.hideCursor;
3046
- var otherActions = [];
3047
- if (assistActionIds) {
3048
- editorData.forEach(function (rowItem) {
3049
- rowItem.actions.forEach(function (actionItem) {
3050
- if (assistActionIds.includes(actionItem.id)) otherActions.push(actionItem);
3051
- });
3052
- });
3053
- } else {
3054
- editorData.forEach(function (rowItem) {
3055
- if (rowItem.id !== row.id) {
3056
- otherActions.push.apply(otherActions, _toConsumableArray(rowItem.actions));
3057
- } else {
3058
- rowItem.actions.forEach(function (actionItem) {
3059
- if (actionItem.id !== action.id) otherActions.push(actionItem);
3060
- });
3061
- }
3062
- });
3063
- }
3064
- var positions = parserActionsToPositions(otherActions, {
3065
- startLeft: startLeft,
3066
- scale: scale,
3067
- scaleWidth: scaleWidth
3068
- });
3069
- if (!hideCursor) positions.push(cursorLeft);
3070
- return positions;
3071
- };
3072
- /** 获取当前移动标记 */
3073
- var defaultGetMovePosition = function defaultGetMovePosition(data) {
3074
- var start = data.start,
3075
- end = data.end,
3076
- dir = data.dir,
3077
- scale = data.scale,
3078
- scaleWidth = data.scaleWidth,
3079
- startLeft = data.startLeft;
3080
- var _parserTimeToTransfor = parserTimeToTransform({
3081
- start: start,
3082
- end: end
3083
- }, {
3084
- startLeft: startLeft,
3085
- scaleWidth: scaleWidth,
3086
- scale: scale
3087
- }),
3088
- left = _parserTimeToTransfor.left,
3089
- width = _parserTimeToTransfor.width;
3090
- if (!dir) return [left, left + width];
3091
- return dir === "right" ? [left + width] : [left];
3092
- };
3093
- /** 初始化draglines */
3094
- var initDragLine = function initDragLine(data) {
3095
- var movePositions = data.movePositions,
3096
- assistPositions = data.assistPositions;
3097
- setDragLineData({
3098
- isMoving: true,
3099
- movePositions: movePositions || [],
3100
- assistPositions: assistPositions || []
3101
- });
3102
- };
3103
- /** 更新dragline */
3104
- var updateDragLine = function updateDragLine(data) {
3105
- var movePositions = data.movePositions,
3106
- assistPositions = data.assistPositions;
3107
- setDragLineData(function (pre) {
3108
- return _objectSpread2(_objectSpread2({}, pre), {}, {
3109
- movePositions: movePositions || pre.movePositions,
3110
- assistPositions: assistPositions || pre.assistPositions
3111
- });
3112
- });
3113
- };
3114
- /** 释放draglines */
3115
- var disposeDragLine = function disposeDragLine() {
3116
- setDragLineData({
3117
- isMoving: false,
3118
- movePositions: [],
3119
- assistPositions: []
3120
- });
3121
- };
3122
- return {
3123
- initDragLine: initDragLine,
3124
- updateDragLine: updateDragLine,
3125
- disposeDragLine: disposeDragLine,
3126
- dragLineData: dragLineData,
3127
- defaultGetAssistPosition: defaultGetAssistPosition,
3128
- defaultGetMovePosition: defaultGetMovePosition
3129
- };
3130
- }
3131
-
3132
2999
  var useRowSelection = function useRowSelection(options) {
3133
3000
  var editorData = options.editorData,
3134
3001
  rowHeight = options.rowHeight,
@@ -3838,13 +3705,6 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
3838
3705
  };
3839
3706
  }();
3840
3707
  };
3841
- var _useDragLine = useDragLine(),
3842
- dragLineData = _useDragLine.dragLineData,
3843
- initDragLine = _useDragLine.initDragLine,
3844
- updateDragLine = _useDragLine.updateDragLine,
3845
- disposeDragLine = _useDragLine.disposeDragLine,
3846
- defaultGetAssistPosition = _useDragLine.defaultGetAssistPosition,
3847
- defaultGetMovePosition = _useDragLine.defaultGetMovePosition;
3848
3708
  var editAreaRef = React.useRef();
3849
3709
  var gridRef = React.useRef();
3850
3710
  var _useState = React.useState(0),
@@ -3946,44 +3806,10 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
3946
3806
  };
3947
3807
  });
3948
3808
  var handleInitDragLine = function handleInitDragLine(data) {
3949
- if (dragLine) {
3950
- var assistActionIds = getAssistDragLineActionIds && getAssistDragLineActionIds({
3951
- action: data.action,
3952
- row: data.row,
3953
- editorData: editorData
3954
- });
3955
- var cursorLeft = parserTimeToPixel(cursorTime, {
3956
- scaleWidth: scaleWidth,
3957
- scale: scale,
3958
- startLeft: startLeft
3959
- });
3960
- var assistPositions = defaultGetAssistPosition({
3961
- editorData: editorData,
3962
- assistActionIds: assistActionIds,
3963
- action: data.action,
3964
- row: data.row,
3965
- scale: scale,
3966
- scaleWidth: scaleWidth,
3967
- startLeft: startLeft,
3968
- hideCursor: hideCursor,
3969
- cursorLeft: cursorLeft
3970
- });
3971
- initDragLine({
3972
- assistPositions: assistPositions
3973
- });
3974
- }
3809
+ _onActionMoveStart === null || _onActionMoveStart === void 0 ? void 0 : _onActionMoveStart(data);
3975
3810
  };
3976
3811
  var handleUpdateDragLine = function handleUpdateDragLine(data) {
3977
- if (dragLine) {
3978
- var movePositions = defaultGetMovePosition(_objectSpread2(_objectSpread2({}, data), {}, {
3979
- startLeft: startLeft,
3980
- scaleWidth: scaleWidth,
3981
- scale: scale
3982
- }));
3983
- updateDragLine({
3984
- movePositions: movePositions
3985
- });
3986
- }
3812
+ _onActionMoving === null || _onActionMoving === void 0 ? void 0 : _onActionMoving(data);
3987
3813
  };
3988
3814
  React.useEffect(function () {
3989
3815
  if (!(engineRef === null || engineRef === void 0 ? void 0 : engineRef.current)) return;
@@ -4067,7 +3893,6 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
4067
3893
  key: key,
4068
3894
  rowHeight: (row === null || row === void 0 ? void 0 : row.rowHeight) || _rowHeight,
4069
3895
  rowData: row,
4070
- dragLineData: dragLineData,
4071
3896
  allowCreateTrack: allowCreateTrack,
4072
3897
  setDropPreview: setDropPreview,
4073
3898
  containerRef: containerRef,
@@ -4109,11 +3934,9 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
4109
3934
  return _onActionResizing && _onActionResizing(data);
4110
3935
  },
4111
3936
  onActionResizeEnd: function onActionResizeEnd(data) {
4112
- disposeDragLine();
4113
3937
  return _onActionResizeEnd && _onActionResizeEnd(data);
4114
3938
  },
4115
3939
  onActionMoveEnd: function onActionMoveEnd(data) {
4116
- disposeDragLine();
4117
3940
  // 传递拖拽结束参数给多选拖拽处理
4118
3941
  onDragEnd({
4119
3942
  actionId: data.action.id,
@@ -4225,9 +4048,7 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
4225
4048
  _onScroll(param);
4226
4049
  }
4227
4050
  });
4228
- }), /*#__PURE__*/React__default['default'].createElement(DragSelection, null), dragLine && /*#__PURE__*/React__default['default'].createElement(DragLines, _objectSpread2({
4229
- scrollLeft: scrollLeft
4230
- }, dragLineData)), dragIndicator && function () {
4051
+ }), /*#__PURE__*/React__default['default'].createElement(DragSelection, null), dragIndicator && function () {
4231
4052
  // 计算拖拽位置指示器的位置
4232
4053
  var top = 0;
4233
4054
  var targetIndex = dragIndicator.targetIndex;
@@ -4277,11 +4098,11 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
4277
4098
  });
4278
4099
  var EditArea = /*#__PURE__*/React__default['default'].memo(EditAreaO);
4279
4100
 
4280
- var css_248z$5 = ".timeline-editor {\n height: 600px;\n width: 600px;\n min-height: 32px;\n position: relative;\n font-size: 12px;\n font-family: \"PingFang SC\";\n background-color: #191b1d;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.timeline-editor.light {\n background-color: #fff;\n}\n";
4281
- styleInject(css_248z$5);
4101
+ var css_248z$4 = ".timeline-editor {\n height: 600px;\n width: 600px;\n min-height: 32px;\n position: relative;\n font-size: 12px;\n font-family: \"PingFang SC\";\n background-color: #191b1d;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.timeline-editor.light {\n background-color: #fff;\n}\n";
4102
+ styleInject(css_248z$4);
4282
4103
 
4283
- var css_248z$6 = ".timeline-editor-time-area {\n position: relative;\n height: 32px;\n flex: 0 0 auto;\n}\n.timeline-editor-time-area .ReactVirtualized__Grid {\n outline: none;\n}\n.timeline-editor-time-area .ReactVirtualized__Grid::-webkit-scrollbar {\n display: none;\n}\n.timeline-editor-time-area-interact {\n position: absolute;\n cursor: pointer;\n left: 0;\n top: 0;\n}\n.timeline-editor-time-unit {\n border-right: 1px solid rgba(255, 255, 255, 0.2);\n position: relative;\n box-sizing: content-box;\n height: 4px !important;\n bottom: 0 !important;\n top: auto !important;\n}\n.timeline-editor-time-unit-big {\n height: 8px !important;\n}\n.timeline-editor-time-unit-scale {\n color: rgba(255, 255, 255, 0.6);\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(50%, -100%);\n}\n.light.timeline-editor .timeline-editor-time-unit {\n border-color: #111;\n}\n.light.timeline-editor .timeline-editor-time-unit-scale {\n color: #666;\n}\n";
4284
- styleInject(css_248z$6);
4104
+ var css_248z$5 = ".timeline-editor-time-area {\n position: relative;\n height: 32px;\n flex: 0 0 auto;\n}\n.timeline-editor-time-area .ReactVirtualized__Grid {\n outline: none;\n}\n.timeline-editor-time-area .ReactVirtualized__Grid::-webkit-scrollbar {\n display: none;\n}\n.timeline-editor-time-area-interact {\n position: absolute;\n cursor: pointer;\n left: 0;\n top: 0;\n}\n.timeline-editor-time-unit {\n border-right: 1px solid rgba(255, 255, 255, 0.2);\n position: relative;\n box-sizing: content-box;\n height: 4px !important;\n bottom: 0 !important;\n top: auto !important;\n}\n.timeline-editor-time-unit-big {\n height: 8px !important;\n}\n.timeline-editor-time-unit-scale {\n color: rgba(255, 255, 255, 0.6);\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(50%, -100%);\n}\n.light.timeline-editor .timeline-editor-time-unit {\n border-color: #111;\n}\n.light.timeline-editor .timeline-editor-time-unit-scale {\n color: #666;\n}\n";
4105
+ styleInject(css_248z$5);
4285
4106
 
4286
4107
  /** 动画时间轴组件 */
4287
4108
  var TimeArea = function TimeArea(_ref) {
@@ -4383,6 +4204,190 @@ var TimeArea = function TimeArea(_ref) {
4383
4204
  }));
4384
4205
  };
4385
4206
 
4207
+ var css_248z$6 = ".timeline-editor-drag-line-container {\n position: absolute;\n height: 100%;\n top: 0;\n left: 0;\n}\n.timeline-editor-drag-line {\n width: 0;\n position: absolute;\n top: 0;\n height: 99%;\n border-left: 0.5px solid #009C2C;\n}\n";
4208
+ styleInject(css_248z$6);
4209
+
4210
+ /** 拖拽辅助线 */
4211
+ var DragLines = /*#__PURE__*/React.memo(function (_ref) {
4212
+ var isMoving = _ref.isMoving,
4213
+ _ref$movePositions = _ref.movePositions,
4214
+ movePositions = _ref$movePositions === void 0 ? [] : _ref$movePositions,
4215
+ _ref$assistPositions = _ref.assistPositions,
4216
+ assistPositions = _ref$assistPositions === void 0 ? [] : _ref$assistPositions,
4217
+ scrollLeft = _ref.scrollLeft;
4218
+ var _ref2 = useSize__default['default'](document.querySelector('#time-editor-container')) || {},
4219
+ _ref2$height = _ref2.height,
4220
+ height = _ref2$height === void 0 ? 0 : _ref2$height;
4221
+ var tolerance = 5; // 容差范围，单位像素
4222
+ return /*#__PURE__*/React__default['default'].createElement("div", {
4223
+ className: prefix('drag-line-container'),
4224
+ style: {
4225
+ height: height || '100%'
4226
+ }
4227
+ }, isMoving && movePositions.map(function (movePos) {
4228
+ // 查找在容差范围内的辅助线位置
4229
+ var matchedAssistPos = assistPositions.find(function (assistPos) {
4230
+ return Math.abs(movePos - assistPos) <= tolerance;
4231
+ });
4232
+ if (matchedAssistPos) {
4233
+ return /*#__PURE__*/React__default['default'].createElement("div", {
4234
+ key: matchedAssistPos,
4235
+ className: prefix('drag-line'),
4236
+ style: {
4237
+ left: matchedAssistPos - scrollLeft
4238
+ }
4239
+ });
4240
+ }
4241
+ return null;
4242
+ }));
4243
+ });
4244
+
4245
+ var defaultGetAssistPosition = function defaultGetAssistPosition(data) {
4246
+ var editorData = data.editorData,
4247
+ assistActionIds = data.assistActionIds,
4248
+ action = data.action,
4249
+ row = data.row,
4250
+ scale = data.scale,
4251
+ scaleWidth = data.scaleWidth,
4252
+ startLeft = data.startLeft,
4253
+ cursorLeft = data.cursorLeft,
4254
+ hideCursor = data.hideCursor;
4255
+ var otherActions = [];
4256
+ if (assistActionIds) {
4257
+ editorData.forEach(function (rowItem) {
4258
+ rowItem.actions.forEach(function (actionItem) {
4259
+ if (assistActionIds.includes(actionItem.id)) otherActions.push(actionItem);
4260
+ });
4261
+ });
4262
+ } else {
4263
+ editorData.forEach(function (rowItem) {
4264
+ if (rowItem.id !== row.id) {
4265
+ otherActions.push.apply(otherActions, _toConsumableArray(rowItem.actions));
4266
+ } else {
4267
+ rowItem.actions.forEach(function (actionItem) {
4268
+ if (actionItem.id !== action.id) otherActions.push(actionItem);
4269
+ });
4270
+ }
4271
+ });
4272
+ }
4273
+ var positions = parserActionsToPositions(otherActions, {
4274
+ startLeft: startLeft,
4275
+ scale: scale,
4276
+ scaleWidth: scaleWidth
4277
+ });
4278
+ if (!hideCursor) positions.push(cursorLeft);
4279
+ return positions;
4280
+ };
4281
+ var defaultGetMovePosition = function defaultGetMovePosition(data) {
4282
+ var start = data.start,
4283
+ end = data.end,
4284
+ dir = data.dir,
4285
+ scale = data.scale,
4286
+ scaleWidth = data.scaleWidth,
4287
+ startLeft = data.startLeft;
4288
+ var _parserTimeToTransfor = parserTimeToTransform({
4289
+ start: start,
4290
+ end: end
4291
+ }, {
4292
+ startLeft: startLeft,
4293
+ scaleWidth: scaleWidth,
4294
+ scale: scale
4295
+ }),
4296
+ left = _parserTimeToTransfor.left,
4297
+ width = _parserTimeToTransfor.width;
4298
+ if (!dir) return [left, left + width];
4299
+ return dir === "right" ? [left + width] : [left];
4300
+ };
4301
+ var DragLineController = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
4302
+ var dragLine = props.dragLine,
4303
+ editorData = props.editorData,
4304
+ cursorTime = props.cursorTime,
4305
+ scale = props.scale,
4306
+ scaleWidth = props.scaleWidth,
4307
+ startLeft = props.startLeft,
4308
+ hideCursor = props.hideCursor,
4309
+ scrollLeft = props.scrollLeft,
4310
+ getAssistDragLineActionIds = props.getAssistDragLineActionIds;
4311
+ var _useState = React.useState({
4312
+ isMoving: false,
4313
+ movePositions: [],
4314
+ assistPositions: []
4315
+ }),
4316
+ _useState2 = _slicedToArray(_useState, 2),
4317
+ dragLineData = _useState2[0],
4318
+ setDragLineData = _useState2[1];
4319
+ console.log('dragLineData = ', dragLineData);
4320
+ var initDragLine = React.useCallback(function (data) {
4321
+ if (dragLine) {
4322
+ var assistActionIds = getAssistDragLineActionIds && getAssistDragLineActionIds({
4323
+ action: data.action,
4324
+ row: data.row,
4325
+ editorData: editorData
4326
+ });
4327
+ var cursorLeft = parserTimeToPixel(cursorTime, {
4328
+ scaleWidth: scaleWidth,
4329
+ scale: scale,
4330
+ startLeft: startLeft
4331
+ });
4332
+ var assistPositions = defaultGetAssistPosition({
4333
+ editorData: editorData,
4334
+ assistActionIds: assistActionIds,
4335
+ action: data.action,
4336
+ row: data.row,
4337
+ scale: scale,
4338
+ scaleWidth: scaleWidth,
4339
+ startLeft: startLeft,
4340
+ hideCursor: hideCursor,
4341
+ cursorLeft: cursorLeft
4342
+ });
4343
+ setDragLineData({
4344
+ isMoving: true,
4345
+ movePositions: [],
4346
+ assistPositions: assistPositions
4347
+ });
4348
+ }
4349
+ }, [dragLine, editorData, cursorTime, scale, scaleWidth, startLeft, hideCursor, getAssistDragLineActionIds]);
4350
+ var updateDragLine = React.useCallback(function (data) {
4351
+ if (dragLine) {
4352
+ var movePositions = defaultGetMovePosition(_objectSpread2(_objectSpread2({}, data), {}, {
4353
+ startLeft: startLeft,
4354
+ scaleWidth: scaleWidth,
4355
+ scale: scale
4356
+ }));
4357
+ setDragLineData(function (prev) {
4358
+ return _objectSpread2(_objectSpread2({}, prev), {}, {
4359
+ movePositions: movePositions
4360
+ });
4361
+ });
4362
+ }
4363
+ }, [dragLine, startLeft, scaleWidth, scale]);
4364
+ var disposeDragLine = React.useCallback(function () {
4365
+ setDragLineData({
4366
+ isMoving: false,
4367
+ movePositions: [],
4368
+ assistPositions: []
4369
+ });
4370
+ }, []);
4371
+ React.useImperativeHandle(ref, function () {
4372
+ return {
4373
+ initDragLine: initDragLine,
4374
+ updateDragLine: updateDragLine,
4375
+ disposeDragLine: disposeDragLine
4376
+ };
4377
+ }, [initDragLine, updateDragLine, disposeDragLine]);
4378
+ var dragLinesProps = React.useMemo(function () {
4379
+ return {
4380
+ isMoving: dragLineData.isMoving,
4381
+ movePositions: dragLineData.movePositions,
4382
+ assistPositions: dragLineData.assistPositions,
4383
+ scrollLeft: scrollLeft
4384
+ };
4385
+ }, [dragLineData.isMoving, dragLineData.movePositions, dragLineData.assistPositions, scrollLeft]);
4386
+ if (!dragLine) return null;
4387
+ return /*#__PURE__*/React__default['default'].createElement(DragLines, _objectSpread2({}, dragLinesProps));
4388
+ }));
4389
+ DragLineController.displayName = "DragLineController";
4390
+
4386
4391
  var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
4387
4392
  var checkedProps = checkProps(props);
4388
4393
  var style = props.style,
@@ -4394,6 +4399,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
4394
4399
  autoScroll = checkedProps.autoScroll,
4395
4400
  hideCursor = checkedProps.hideCursor,
4396
4401
  disableDrag = checkedProps.disableDrag,
4402
+ dragLine = checkedProps.dragLine,
4397
4403
  scale = checkedProps.scale,
4398
4404
  scaleWidth = checkedProps.scaleWidth,
4399
4405
  startLeft = checkedProps.startLeft,
@@ -4437,6 +4443,7 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
4437
4443
  _useState0 = _slicedToArray(_useState9, 2),
4438
4444
  width = _useState0[0],
4439
4445
  setWidth = _useState0[1];
4446
+ var dragLineControllerRef = React.useRef(null);
4440
4447
  var groupedData = lodashEs.groupBy(editorData, 'type');
4441
4448
  var areaCount = Object.keys(groupedData).length;
4442
4449
  var keys = Object.keys(groupedData);
@@ -4512,6 +4519,24 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
4512
4519
  scrollLeft: Math.max(scrollSync.current.state.scrollLeft + delta, 0)
4513
4520
  });
4514
4521
  };
4522
+ var handleInitDragLine = React.useCallback(function (data) {
4523
+ var _checkedProps$onActio, _checkedProps$onActio2, _dragLineControllerRe;
4524
+ (_checkedProps$onActio = checkedProps.onActionMoveStart) === null || _checkedProps$onActio === void 0 ? void 0 : _checkedProps$onActio.call(checkedProps, data);
4525
+ (_checkedProps$onActio2 = checkedProps.onActionResizeStart) === null || _checkedProps$onActio2 === void 0 ? void 0 : _checkedProps$onActio2.call(checkedProps, data);
4526
+ (_dragLineControllerRe = dragLineControllerRef.current) === null || _dragLineControllerRe === void 0 ? void 0 : _dragLineControllerRe.initDragLine(data);
4527
+ }, [checkedProps]);
4528
+ var handleUpdateDragLine = React.useCallback(function (data) {
4529
+ var _checkedProps$onActio3, _checkedProps$onActio4, _dragLineControllerRe2;
4530
+ (_checkedProps$onActio3 = checkedProps.onActionMoving) === null || _checkedProps$onActio3 === void 0 ? void 0 : _checkedProps$onActio3.call(checkedProps, data);
4531
+ (_checkedProps$onActio4 = checkedProps.onActionResizing) === null || _checkedProps$onActio4 === void 0 ? void 0 : _checkedProps$onActio4.call(checkedProps, data);
4532
+ (_dragLineControllerRe2 = dragLineControllerRef.current) === null || _dragLineControllerRe2 === void 0 ? void 0 : _dragLineControllerRe2.updateDragLine(data);
4533
+ }, [checkedProps]);
4534
+ var handleDisposeDragLine = React.useCallback(function (data) {
4535
+ var _checkedProps$onActio5, _checkedProps$onActio6, _dragLineControllerRe3;
4536
+ (_checkedProps$onActio5 = checkedProps.onActionMoveEnd) === null || _checkedProps$onActio5 === void 0 ? void 0 : _checkedProps$onActio5.call(checkedProps, data);
4537
+ (_checkedProps$onActio6 = checkedProps.onActionResizeEnd) === null || _checkedProps$onActio6 === void 0 ? void 0 : _checkedProps$onActio6.call(checkedProps, data);
4538
+ (_dragLineControllerRe3 = dragLineControllerRef.current) === null || _dragLineControllerRe3 === void 0 ? void 0 : _dragLineControllerRe3.disposeDragLine();
4539
+ }, [checkedProps]);
4515
4540
  // 处理运行器相关数据
4516
4541
  React.useEffect(function () {
4517
4542
  var handleTime = function handleTime(_ref) {
@@ -4584,6 +4609,24 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
4584
4609
  }
4585
4610
  };
4586
4611
  });
4612
+ var onClickTimeline = function onClickTimeline(e) {
4613
+ var _e$target;
4614
+ if (!domRef.current) return;
4615
+ var rect = domRef.current.getBoundingClientRect();
4616
+ var position = e.clientX - rect.x;
4617
+ var left = position + scrollSync.current.state.scrollLeft;
4618
+ var time = parserPixelToTime(left, {
4619
+ startLeft: startLeft,
4620
+ scale: scale,
4621
+ scaleWidth: scaleWidth
4622
+ });
4623
+ var action = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.closest('.timeline-editor-action');
4624
+ if (action || hideCursor) return;
4625
+ console.log('onClickTimeline = ', time);
4626
+ handleSetCursor({
4627
+ time: time
4628
+ });
4629
+ };
4587
4630
  // 监听timeline区域宽度变化
4588
4631
  React.useEffect(function () {
4589
4632
  if (areaRef.current) {
@@ -4635,6 +4678,12 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
4635
4678
  deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
4636
4679
  allowCreateTrack: allowCreateTrack,
4637
4680
  onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
4681
+ onActionMoveStart: handleInitDragLine,
4682
+ onActionResizeStart: handleInitDragLine,
4683
+ onActionMoving: handleUpdateDragLine,
4684
+ onActionResizing: handleUpdateDragLine,
4685
+ onActionMoveEnd: handleDisposeDragLine,
4686
+ onActionResizeEnd: handleDisposeDragLine,
4638
4687
  onScroll: function onScroll(params) {
4639
4688
  _onScroll(params);
4640
4689
  onScrollVertical && onScrollVertical(params);
@@ -4644,7 +4693,8 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
4644
4693
  ref: containerRef,
4645
4694
  style: {
4646
4695
  height: '100%'
4647
- }
4696
+ },
4697
+ onClick: onClickTimeline
4648
4698
  }, Object.keys(groupedData).map(function (key, index) {
4649
4699
  var handleGroupDataChange = function handleGroupDataChange(updatedData) {
4650
4700
  var mergedData = editorData.filter(function (item) {
@@ -4691,6 +4741,12 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
4691
4741
  containerRef: containerRef,
4692
4742
  onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
4693
4743
  engineRef: engineRef,
4744
+ onActionMoveStart: handleInitDragLine,
4745
+ onActionResizeStart: handleInitDragLine,
4746
+ onActionMoving: handleUpdateDragLine,
4747
+ onActionResizing: handleUpdateDragLine,
4748
+ onActionMoveEnd: handleDisposeDragLine,
4749
+ onActionResizeEnd: handleDisposeDragLine,
4694
4750
  onScroll: function onScroll(params) {
4695
4751
  _onScroll(params);
4696
4752
  onScrollVertical && onScrollVertical(params);
@@ -4708,7 +4764,18 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
4708
4764
  areaRef: areaRef,
4709
4765
  scrollSync: scrollSync,
4710
4766
  deltaScrollLeft: autoScroll && handleDeltaScrollLeft
4711
- }))));
4767
+ }))), /*#__PURE__*/React__default['default'].createElement(DragLineController, {
4768
+ ref: dragLineControllerRef,
4769
+ dragLine: dragLine,
4770
+ editorData: editorData,
4771
+ cursorTime: cursorTime,
4772
+ scale: scale,
4773
+ scaleWidth: scaleWidth,
4774
+ startLeft: startLeft,
4775
+ hideCursor: hideCursor,
4776
+ scrollLeft: scrollLeft,
4777
+ getAssistDragLineActionIds: checkedProps.getAssistDragLineActionIds
4778
+ }));
4712
4779
  }));
4713
4780
  });
4714
4781
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sense-react-timeline-editor",
3
- "version": "1.1.4",
3
+ "version": "1.1.5",
4
4
  "author": "xzdarcy",
5
5
  "license": "MIT",
6
6
  "keywords": [