sense-react-timeline-editor 1.1.35 → 1.1.37

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 (4) hide show
  1. package/dist/index.esm.js +39 -32
  2. package/dist/index.js +39 -32
  3. package/dist/interface/timeline.d.ts +1 -1
  4. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -1873,11 +1873,13 @@ var RowDnd = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
1873
1873
  var preLeft = parseFloat(left || '0');
1874
1874
  var preWidth = parseFloat(width || '0');
1875
1875
  deltaX.current += delta;
1876
- resize({
1877
- preLeft: preLeft,
1878
- preWidth: preWidth,
1879
- dir: dir
1880
- });
1876
+ setTimeout(function () {
1877
+ resize({
1878
+ preLeft: preLeft,
1879
+ preWidth: preWidth,
1880
+ dir: dir
1881
+ });
1882
+ }, 0);
1881
1883
  });
1882
1884
  if (!result) return;
1883
1885
  }
@@ -1887,11 +1889,13 @@ var RowDnd = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
1887
1889
  var preLeft = parseFloat(left || '0');
1888
1890
  var preWidth = parseFloat(width || '0');
1889
1891
  deltaX.current += dir === 'left' ? e.deltaRect.left : e.deltaRect.right;
1890
- resize({
1891
- preLeft: preLeft,
1892
- preWidth: preWidth,
1893
- dir: dir
1894
- });
1892
+ setTimeout(function () {
1893
+ resize({
1894
+ preLeft: preLeft,
1895
+ preWidth: preWidth,
1896
+ dir: dir
1897
+ });
1898
+ }, 0);
1895
1899
  };
1896
1900
  var handleResizeStop = function handleResizeStop(e) {
1897
1901
  var _e$edges3;
@@ -2280,6 +2284,10 @@ var EditActionO = function EditActionO(_ref8) {
2280
2284
  _useState2 = _slicedToArray(_useState, 2),
2281
2285
  dragging = _useState2[0],
2282
2286
  setDragging = _useState2[1];
2287
+ var _useState3 = useState(false),
2288
+ _useState4 = _slicedToArray(_useState3, 2),
2289
+ resizing = _useState4[0],
2290
+ setResizing = _useState4[1];
2283
2291
  var originStart = start;
2284
2292
  parserTimeToPixel(originStart, {
2285
2293
  startLeft: startLeft,
@@ -2311,7 +2319,7 @@ var EditActionO = function EditActionO(_ref8) {
2311
2319
  scaleWidth: scaleWidth
2312
2320
  }));
2313
2321
  // 初始化动作坐标数据
2314
- var _useState3 = useState(function () {
2322
+ var _useState5 = useState(function () {
2315
2323
  return _objectSpread2(_objectSpread2({}, parserTimeToTransform({
2316
2324
  start: start,
2317
2325
  end: end
@@ -2323,9 +2331,9 @@ var EditActionO = function EditActionO(_ref8) {
2323
2331
  top: 0
2324
2332
  });
2325
2333
  }),
2326
- _useState4 = _slicedToArray(_useState3, 2),
2327
- transform = _useState4[0],
2328
- setTransform = _useState4[1];
2334
+ _useState6 = _slicedToArray(_useState5, 2),
2335
+ transform = _useState6[0],
2336
+ setTransform = _useState6[1];
2329
2337
  useLayoutEffect(function () {
2330
2338
  setTransform(_objectSpread2(_objectSpread2({}, parserTimeToTransform({
2331
2339
  start: start,
@@ -2727,6 +2735,7 @@ var EditActionO = function EditActionO(_ref8) {
2727
2735
  row: row,
2728
2736
  dir: dir
2729
2737
  });
2738
+ setResizing(true);
2730
2739
  };
2731
2740
  var handleResizing = function handleResizing(dir, _ref1) {
2732
2741
  var left = _ref1.left,
@@ -2785,6 +2794,7 @@ var EditActionO = function EditActionO(_ref8) {
2785
2794
  action.start = start;
2786
2795
  action.end = end;
2787
2796
  setEditorData(editorData);
2797
+ setResizing(false);
2788
2798
  // 触发回调
2789
2799
  if (onActionResizeEnd) onActionResizeEnd({
2790
2800
  action: action,
@@ -2942,7 +2952,7 @@ var EditActionO = function EditActionO(_ref8) {
2942
2952
  style: {
2943
2953
  height: rowHeight
2944
2954
  }
2945
- }, getActionRender && getActionRender(nowAction, nowRow), flexible && (/*#__PURE__*/React.createElement("div", {
2955
+ }, getActionRender && getActionRender(nowAction, nowRow, resizing), flexible && (/*#__PURE__*/React.createElement("div", {
2946
2956
  className: prefix('action-left-stretch')
2947
2957
  }, /*#__PURE__*/React.createElement("img", {
2948
2958
  src: stretchIcon,
@@ -4719,21 +4729,18 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
4719
4729
  scrollLeft: Math.max(scrollSync.current.state.scrollLeft + delta, 0)
4720
4730
  });
4721
4731
  }, [getMaxScrollLeft]);
4722
- useLayoutEffect(function () {
4723
- var _scrollSync$current$s, _scrollSync$current;
4724
- var maxScrollLeft = getMaxScrollLeft();
4725
- var currentScrollLeft = (_scrollSync$current$s = (_scrollSync$current = scrollSync.current) === null || _scrollSync$current === void 0 ? void 0 : _scrollSync$current.state.scrollLeft) !== null && _scrollSync$current$s !== void 0 ? _scrollSync$current$s : 0;
4726
- var nextScrollLeft = Math.min(Math.max(currentScrollLeft, 0), maxScrollLeft);
4727
- var timelineEl = document.querySelector('.timeline-editor');
4728
- if (timelineEl && Math.abs(timelineEl.scrollLeft - nextScrollLeft) > 1) {
4729
- timelineEl.scrollLeft = nextScrollLeft;
4730
- }
4731
- if (scrollSync.current && Math.abs(currentScrollLeft - nextScrollLeft) > 1) {
4732
- scrollSync.current.setState({
4733
- scrollLeft: nextScrollLeft
4734
- });
4735
- }
4736
- }, [getMaxScrollLeft, scale, scaleWidth, scaleCount, width]);
4732
+ // useLayoutEffect(() => {
4733
+ // const maxScrollLeft = getMaxScrollLeft();
4734
+ // const currentScrollLeft = scrollSync.current?.state.scrollLeft ?? 0;
4735
+ // const nextScrollLeft = Math.min(Math.max(currentScrollLeft, 0), maxScrollLeft);
4736
+ // const timelineEl = document.querySelector('.timeline-editor') as HTMLElement | null;
4737
+ // if (timelineEl && Math.abs(timelineEl.scrollLeft - nextScrollLeft) > 1) {
4738
+ // timelineEl.scrollLeft = nextScrollLeft;
4739
+ // }
4740
+ // if (scrollSync.current && Math.abs(currentScrollLeft - nextScrollLeft) > 1) {
4741
+ // scrollSync.current.setState({ scrollLeft: nextScrollLeft });
4742
+ // }
4743
+ // }, [getMaxScrollLeft, scale, scaleWidth, scaleCount, width]);
4737
4744
  var handleInitDragLine = useCallback(function (data) {
4738
4745
  var _checkedProps$onActio, _checkedProps$onActio2, _dragLineControllerRe;
4739
4746
  (_checkedProps$onActio = checkedProps.onActionMoveStart) === null || _checkedProps$onActio === void 0 ? void 0 : _checkedProps$onActio.call(checkedProps, data);
@@ -4859,12 +4866,12 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
4859
4866
  };
4860
4867
  });
4861
4868
  var onClickTimeline = useCallback(function (e) {
4862
- var _ref2, _timelineEditorEl$scr, _scrollSync$current2, _e$target;
4869
+ var _ref2, _timelineEditorEl$scr, _scrollSync$current, _e$target;
4863
4870
  if (!domRef.current) return;
4864
4871
  var timelineEditorEl = document.querySelector('.timeline-editor');
4865
4872
  var rect = domRef.current.getBoundingClientRect();
4866
4873
  var position = e.clientX - rect.x;
4867
- var scrollLeft = (_ref2 = (_timelineEditorEl$scr = timelineEditorEl === null || timelineEditorEl === void 0 ? void 0 : timelineEditorEl.scrollLeft) !== null && _timelineEditorEl$scr !== void 0 ? _timelineEditorEl$scr : (_scrollSync$current2 = scrollSync.current) === null || _scrollSync$current2 === void 0 ? void 0 : _scrollSync$current2.state.scrollLeft) !== null && _ref2 !== void 0 ? _ref2 : 0;
4874
+ var scrollLeft = (_ref2 = (_timelineEditorEl$scr = timelineEditorEl === null || timelineEditorEl === void 0 ? void 0 : timelineEditorEl.scrollLeft) !== null && _timelineEditorEl$scr !== void 0 ? _timelineEditorEl$scr : (_scrollSync$current = scrollSync.current) === null || _scrollSync$current === void 0 ? void 0 : _scrollSync$current.state.scrollLeft) !== null && _ref2 !== void 0 ? _ref2 : 0;
4868
4875
  var left = position + scrollLeft;
4869
4876
  var time = parserPixelToTime(left, {
4870
4877
  startLeft: startLeft,
package/dist/index.js CHANGED
@@ -1883,11 +1883,13 @@ var RowDnd = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, r
1883
1883
  var preLeft = parseFloat(left || '0');
1884
1884
  var preWidth = parseFloat(width || '0');
1885
1885
  deltaX.current += delta;
1886
- resize({
1887
- preLeft: preLeft,
1888
- preWidth: preWidth,
1889
- dir: dir
1890
- });
1886
+ setTimeout(function () {
1887
+ resize({
1888
+ preLeft: preLeft,
1889
+ preWidth: preWidth,
1890
+ dir: dir
1891
+ });
1892
+ }, 0);
1891
1893
  });
1892
1894
  if (!result) return;
1893
1895
  }
@@ -1897,11 +1899,13 @@ var RowDnd = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, r
1897
1899
  var preLeft = parseFloat(left || '0');
1898
1900
  var preWidth = parseFloat(width || '0');
1899
1901
  deltaX.current += dir === 'left' ? e.deltaRect.left : e.deltaRect.right;
1900
- resize({
1901
- preLeft: preLeft,
1902
- preWidth: preWidth,
1903
- dir: dir
1904
- });
1902
+ setTimeout(function () {
1903
+ resize({
1904
+ preLeft: preLeft,
1905
+ preWidth: preWidth,
1906
+ dir: dir
1907
+ });
1908
+ }, 0);
1905
1909
  };
1906
1910
  var handleResizeStop = function handleResizeStop(e) {
1907
1911
  var _e$edges3;
@@ -2290,6 +2294,10 @@ var EditActionO = function EditActionO(_ref8) {
2290
2294
  _useState2 = _slicedToArray(_useState, 2),
2291
2295
  dragging = _useState2[0],
2292
2296
  setDragging = _useState2[1];
2297
+ var _useState3 = React.useState(false),
2298
+ _useState4 = _slicedToArray(_useState3, 2),
2299
+ resizing = _useState4[0],
2300
+ setResizing = _useState4[1];
2293
2301
  var originStart = start;
2294
2302
  parserTimeToPixel(originStart, {
2295
2303
  startLeft: startLeft,
@@ -2321,7 +2329,7 @@ var EditActionO = function EditActionO(_ref8) {
2321
2329
  scaleWidth: scaleWidth
2322
2330
  }));
2323
2331
  // 初始化动作坐标数据
2324
- var _useState3 = React.useState(function () {
2332
+ var _useState5 = React.useState(function () {
2325
2333
  return _objectSpread2(_objectSpread2({}, parserTimeToTransform({
2326
2334
  start: start,
2327
2335
  end: end
@@ -2333,9 +2341,9 @@ var EditActionO = function EditActionO(_ref8) {
2333
2341
  top: 0
2334
2342
  });
2335
2343
  }),
2336
- _useState4 = _slicedToArray(_useState3, 2),
2337
- transform = _useState4[0],
2338
- setTransform = _useState4[1];
2344
+ _useState6 = _slicedToArray(_useState5, 2),
2345
+ transform = _useState6[0],
2346
+ setTransform = _useState6[1];
2339
2347
  React.useLayoutEffect(function () {
2340
2348
  setTransform(_objectSpread2(_objectSpread2({}, parserTimeToTransform({
2341
2349
  start: start,
@@ -2737,6 +2745,7 @@ var EditActionO = function EditActionO(_ref8) {
2737
2745
  row: row,
2738
2746
  dir: dir
2739
2747
  });
2748
+ setResizing(true);
2740
2749
  };
2741
2750
  var handleResizing = function handleResizing(dir, _ref1) {
2742
2751
  var left = _ref1.left,
@@ -2795,6 +2804,7 @@ var EditActionO = function EditActionO(_ref8) {
2795
2804
  action.start = start;
2796
2805
  action.end = end;
2797
2806
  setEditorData(editorData);
2807
+ setResizing(false);
2798
2808
  // 触发回调
2799
2809
  if (onActionResizeEnd) onActionResizeEnd({
2800
2810
  action: action,
@@ -2952,7 +2962,7 @@ var EditActionO = function EditActionO(_ref8) {
2952
2962
  style: {
2953
2963
  height: rowHeight
2954
2964
  }
2955
- }, getActionRender && getActionRender(nowAction, nowRow), flexible && (/*#__PURE__*/React__default['default'].createElement("div", {
2965
+ }, getActionRender && getActionRender(nowAction, nowRow, resizing), flexible && (/*#__PURE__*/React__default['default'].createElement("div", {
2956
2966
  className: prefix('action-left-stretch')
2957
2967
  }, /*#__PURE__*/React__default['default'].createElement("img", {
2958
2968
  src: stretchIcon,
@@ -4729,21 +4739,18 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
4729
4739
  scrollLeft: Math.max(scrollSync.current.state.scrollLeft + delta, 0)
4730
4740
  });
4731
4741
  }, [getMaxScrollLeft]);
4732
- React.useLayoutEffect(function () {
4733
- var _scrollSync$current$s, _scrollSync$current;
4734
- var maxScrollLeft = getMaxScrollLeft();
4735
- var currentScrollLeft = (_scrollSync$current$s = (_scrollSync$current = scrollSync.current) === null || _scrollSync$current === void 0 ? void 0 : _scrollSync$current.state.scrollLeft) !== null && _scrollSync$current$s !== void 0 ? _scrollSync$current$s : 0;
4736
- var nextScrollLeft = Math.min(Math.max(currentScrollLeft, 0), maxScrollLeft);
4737
- var timelineEl = document.querySelector('.timeline-editor');
4738
- if (timelineEl && Math.abs(timelineEl.scrollLeft - nextScrollLeft) > 1) {
4739
- timelineEl.scrollLeft = nextScrollLeft;
4740
- }
4741
- if (scrollSync.current && Math.abs(currentScrollLeft - nextScrollLeft) > 1) {
4742
- scrollSync.current.setState({
4743
- scrollLeft: nextScrollLeft
4744
- });
4745
- }
4746
- }, [getMaxScrollLeft, scale, scaleWidth, scaleCount, width]);
4742
+ // useLayoutEffect(() => {
4743
+ // const maxScrollLeft = getMaxScrollLeft();
4744
+ // const currentScrollLeft = scrollSync.current?.state.scrollLeft ?? 0;
4745
+ // const nextScrollLeft = Math.min(Math.max(currentScrollLeft, 0), maxScrollLeft);
4746
+ // const timelineEl = document.querySelector('.timeline-editor') as HTMLElement | null;
4747
+ // if (timelineEl && Math.abs(timelineEl.scrollLeft - nextScrollLeft) > 1) {
4748
+ // timelineEl.scrollLeft = nextScrollLeft;
4749
+ // }
4750
+ // if (scrollSync.current && Math.abs(currentScrollLeft - nextScrollLeft) > 1) {
4751
+ // scrollSync.current.setState({ scrollLeft: nextScrollLeft });
4752
+ // }
4753
+ // }, [getMaxScrollLeft, scale, scaleWidth, scaleCount, width]);
4747
4754
  var handleInitDragLine = React.useCallback(function (data) {
4748
4755
  var _checkedProps$onActio, _checkedProps$onActio2, _dragLineControllerRe;
4749
4756
  (_checkedProps$onActio = checkedProps.onActionMoveStart) === null || _checkedProps$onActio === void 0 ? void 0 : _checkedProps$onActio.call(checkedProps, data);
@@ -4869,12 +4876,12 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
4869
4876
  };
4870
4877
  });
4871
4878
  var onClickTimeline = React.useCallback(function (e) {
4872
- var _ref2, _timelineEditorEl$scr, _scrollSync$current2, _e$target;
4879
+ var _ref2, _timelineEditorEl$scr, _scrollSync$current, _e$target;
4873
4880
  if (!domRef.current) return;
4874
4881
  var timelineEditorEl = document.querySelector('.timeline-editor');
4875
4882
  var rect = domRef.current.getBoundingClientRect();
4876
4883
  var position = e.clientX - rect.x;
4877
- var scrollLeft = (_ref2 = (_timelineEditorEl$scr = timelineEditorEl === null || timelineEditorEl === void 0 ? void 0 : timelineEditorEl.scrollLeft) !== null && _timelineEditorEl$scr !== void 0 ? _timelineEditorEl$scr : (_scrollSync$current2 = scrollSync.current) === null || _scrollSync$current2 === void 0 ? void 0 : _scrollSync$current2.state.scrollLeft) !== null && _ref2 !== void 0 ? _ref2 : 0;
4884
+ var scrollLeft = (_ref2 = (_timelineEditorEl$scr = timelineEditorEl === null || timelineEditorEl === void 0 ? void 0 : timelineEditorEl.scrollLeft) !== null && _timelineEditorEl$scr !== void 0 ? _timelineEditorEl$scr : (_scrollSync$current = scrollSync.current) === null || _scrollSync$current === void 0 ? void 0 : _scrollSync$current.state.scrollLeft) !== null && _ref2 !== void 0 ? _ref2 : 0;
4878
4885
  var left = position + scrollLeft;
4879
4886
  var time = parserPixelToTime(left, {
4880
4887
  startLeft: startLeft,
package/dist/interface/timeline.d.ts CHANGED
@@ -84,7 +84,7 @@ export interface EditData {
84
84
  /**
85
85
  * @description 自定义action区域渲染
86
86
  */
87
- getActionRender?: (action: TimelineAction, row: TimelineRow) => ReactNode;
87
+ getActionRender?: (action: TimelineAction, row: TimelineRow, resizing?: boolean) => ReactNode;
88
88
  /**
89
89
  * @description 自定义scale渲染
90
90
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sense-react-timeline-editor",
3
- "version": "1.1.35",
3
+ "version": "1.1.37",
4
4
  "author": "xzdarcy",
5
5
  "license": "MIT",
6
6
  "keywords": [