sense-react-timeline-editor 1.1.10 → 1.1.11
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.
- package/dist/index.esm.js +33 -10
- package/dist/index.js +33 -10
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -2002,7 +2002,7 @@ var Cursor = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
2002
2002
|
startLeft: startLeft,
|
|
2003
2003
|
scaleWidth: scaleWidth,
|
|
2004
2004
|
scale: scale
|
|
2005
|
-
})
|
|
2005
|
+
}));
|
|
2006
2006
|
}
|
|
2007
2007
|
};
|
|
2008
2008
|
});
|
|
@@ -2013,9 +2013,9 @@ var Cursor = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
2013
2013
|
startLeft: startLeft,
|
|
2014
2014
|
scaleWidth: scaleWidth,
|
|
2015
2015
|
scale: scale
|
|
2016
|
-
})
|
|
2016
|
+
}));
|
|
2017
2017
|
}
|
|
2018
|
-
}, [cursorTime, startLeft, scaleWidth, scale
|
|
2018
|
+
}, [cursorTime, startLeft, scaleWidth, scale], {
|
|
2019
2019
|
wait: 10
|
|
2020
2020
|
});
|
|
2021
2021
|
var clientHeight = ((_document$querySelect = document.querySelector('#time-editor-container')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
|
|
@@ -4268,8 +4268,10 @@ var TimeArea = function TimeArea(_ref) {
|
|
|
4268
4268
|
if (hideCursor) return;
|
|
4269
4269
|
var rect = e.currentTarget.getBoundingClientRect();
|
|
4270
4270
|
var position = e.clientX - rect.x;
|
|
4271
|
-
var left = Math.max(position
|
|
4272
|
-
|
|
4271
|
+
var left = Math.max(position, startLeft);
|
|
4272
|
+
// const left = Math.max(position + scrollLeft, startLeft);
|
|
4273
|
+
if (left > maxScaleCount * scaleWidth + startLeft) return;
|
|
4274
|
+
// if (left > maxScaleCount * scaleWidth + startLeft - scrollLeft) return;
|
|
4273
4275
|
var time = parserPixelToTime(left, {
|
|
4274
4276
|
startLeft: startLeft,
|
|
4275
4277
|
scale: scale,
|
|
@@ -4711,7 +4713,8 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
|
|
|
4711
4713
|
if (action || hideCursor) return;
|
|
4712
4714
|
console.log('onClickTimeline = ', time);
|
|
4713
4715
|
handleSetCursor({
|
|
4714
|
-
time: time
|
|
4716
|
+
time: time,
|
|
4717
|
+
updateTime: true
|
|
4715
4718
|
});
|
|
4716
4719
|
}, [startLeft, scale, scaleWidth, hideCursor, handleSetCursor]);
|
|
4717
4720
|
// 监听timeline区域宽度变化
|
|
@@ -4730,17 +4733,37 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
|
|
|
4730
4733
|
useEffect(function () {
|
|
4731
4734
|
var containerEl = document.querySelector('.timeline-editor');
|
|
4732
4735
|
var handleScroll = throttle(function (e) {
|
|
4733
|
-
|
|
4736
|
+
var scrollLeft = e.target.scrollLeft || 0;
|
|
4734
4737
|
scrollSync.current && scrollSync.current.setState({
|
|
4735
|
-
scrollLeft:
|
|
4738
|
+
scrollLeft: scrollLeft
|
|
4739
|
+
});
|
|
4740
|
+
var clientWidth = document.documentElement.clientWidth;
|
|
4741
|
+
var timeStart = parserPixelToTime(scrollLeft, {
|
|
4742
|
+
startLeft: startLeft,
|
|
4743
|
+
scale: scale,
|
|
4744
|
+
scaleWidth: scaleWidth
|
|
4745
|
+
});
|
|
4746
|
+
var timeEnd = parserPixelToTime(scrollLeft + clientWidth, {
|
|
4747
|
+
startLeft: startLeft,
|
|
4748
|
+
scale: scale,
|
|
4749
|
+
scaleWidth: scaleWidth
|
|
4736
4750
|
});
|
|
4751
|
+
window.dispatchEvent(new CustomEvent('container-scroll', {
|
|
4752
|
+
detail: {
|
|
4753
|
+
scrollLeft: scrollLeft,
|
|
4754
|
+
scrollWidth: containerEl.scrollWidth,
|
|
4755
|
+
clientWidth: clientWidth,
|
|
4756
|
+
timeStart: timeStart,
|
|
4757
|
+
timeEnd: timeEnd
|
|
4758
|
+
}
|
|
4759
|
+
}));
|
|
4737
4760
|
}, 100);
|
|
4738
4761
|
containerEl.addEventListener('scroll', handleScroll);
|
|
4739
4762
|
return function () {
|
|
4740
4763
|
containerEl.removeEventListener('scroll', handleScroll);
|
|
4741
4764
|
handleScroll.cancel();
|
|
4742
4765
|
};
|
|
4743
|
-
}, []);
|
|
4766
|
+
}, [startLeft, scale, scaleWidth]);
|
|
4744
4767
|
return /*#__PURE__*/React.createElement("div", {
|
|
4745
4768
|
ref: domRef,
|
|
4746
4769
|
style: style,
|
|
@@ -4839,7 +4862,7 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
|
|
|
4839
4862
|
setCursor: handleSetCursor,
|
|
4840
4863
|
deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
|
|
4841
4864
|
allowCreateTrack: allowCreateTrack,
|
|
4842
|
-
minHeight: index === 0 ?
|
|
4865
|
+
minHeight: index === 0 ? 122 : _totalHeight,
|
|
4843
4866
|
containerRef: containerRef,
|
|
4844
4867
|
onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
|
|
4845
4868
|
engineRef: engineRef,
|
package/dist/index.js
CHANGED
|
@@ -2012,7 +2012,7 @@ var Cursor = /*#__PURE__*/React__default['default'].forwardRef(function (props,
|
|
|
2012
2012
|
startLeft: startLeft,
|
|
2013
2013
|
scaleWidth: scaleWidth,
|
|
2014
2014
|
scale: scale
|
|
2015
|
-
})
|
|
2015
|
+
}));
|
|
2016
2016
|
}
|
|
2017
2017
|
};
|
|
2018
2018
|
});
|
|
@@ -2023,9 +2023,9 @@ var Cursor = /*#__PURE__*/React__default['default'].forwardRef(function (props,
|
|
|
2023
2023
|
startLeft: startLeft,
|
|
2024
2024
|
scaleWidth: scaleWidth,
|
|
2025
2025
|
scale: scale
|
|
2026
|
-
})
|
|
2026
|
+
}));
|
|
2027
2027
|
}
|
|
2028
|
-
}, [cursorTime, startLeft, scaleWidth, scale
|
|
2028
|
+
}, [cursorTime, startLeft, scaleWidth, scale], {
|
|
2029
2029
|
wait: 10
|
|
2030
2030
|
});
|
|
2031
2031
|
var clientHeight = ((_document$querySelect = document.querySelector('#time-editor-container')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
|
|
@@ -4278,8 +4278,10 @@ var TimeArea = function TimeArea(_ref) {
|
|
|
4278
4278
|
if (hideCursor) return;
|
|
4279
4279
|
var rect = e.currentTarget.getBoundingClientRect();
|
|
4280
4280
|
var position = e.clientX - rect.x;
|
|
4281
|
-
var left = Math.max(position
|
|
4282
|
-
|
|
4281
|
+
var left = Math.max(position, startLeft);
|
|
4282
|
+
// const left = Math.max(position + scrollLeft, startLeft);
|
|
4283
|
+
if (left > maxScaleCount * scaleWidth + startLeft) return;
|
|
4284
|
+
// if (left > maxScaleCount * scaleWidth + startLeft - scrollLeft) return;
|
|
4283
4285
|
var time = parserPixelToTime(left, {
|
|
4284
4286
|
startLeft: startLeft,
|
|
4285
4287
|
scale: scale,
|
|
@@ -4721,7 +4723,8 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
|
|
|
4721
4723
|
if (action || hideCursor) return;
|
|
4722
4724
|
console.log('onClickTimeline = ', time);
|
|
4723
4725
|
handleSetCursor({
|
|
4724
|
-
time: time
|
|
4726
|
+
time: time,
|
|
4727
|
+
updateTime: true
|
|
4725
4728
|
});
|
|
4726
4729
|
}, [startLeft, scale, scaleWidth, hideCursor, handleSetCursor]);
|
|
4727
4730
|
// 监听timeline区域宽度变化
|
|
@@ -4740,17 +4743,37 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
|
|
|
4740
4743
|
React.useEffect(function () {
|
|
4741
4744
|
var containerEl = document.querySelector('.timeline-editor');
|
|
4742
4745
|
var handleScroll = lodashEs.throttle(function (e) {
|
|
4743
|
-
|
|
4746
|
+
var scrollLeft = e.target.scrollLeft || 0;
|
|
4744
4747
|
scrollSync.current && scrollSync.current.setState({
|
|
4745
|
-
scrollLeft:
|
|
4748
|
+
scrollLeft: scrollLeft
|
|
4749
|
+
});
|
|
4750
|
+
var clientWidth = document.documentElement.clientWidth;
|
|
4751
|
+
var timeStart = parserPixelToTime(scrollLeft, {
|
|
4752
|
+
startLeft: startLeft,
|
|
4753
|
+
scale: scale,
|
|
4754
|
+
scaleWidth: scaleWidth
|
|
4755
|
+
});
|
|
4756
|
+
var timeEnd = parserPixelToTime(scrollLeft + clientWidth, {
|
|
4757
|
+
startLeft: startLeft,
|
|
4758
|
+
scale: scale,
|
|
4759
|
+
scaleWidth: scaleWidth
|
|
4746
4760
|
});
|
|
4761
|
+
window.dispatchEvent(new CustomEvent('container-scroll', {
|
|
4762
|
+
detail: {
|
|
4763
|
+
scrollLeft: scrollLeft,
|
|
4764
|
+
scrollWidth: containerEl.scrollWidth,
|
|
4765
|
+
clientWidth: clientWidth,
|
|
4766
|
+
timeStart: timeStart,
|
|
4767
|
+
timeEnd: timeEnd
|
|
4768
|
+
}
|
|
4769
|
+
}));
|
|
4747
4770
|
}, 100);
|
|
4748
4771
|
containerEl.addEventListener('scroll', handleScroll);
|
|
4749
4772
|
return function () {
|
|
4750
4773
|
containerEl.removeEventListener('scroll', handleScroll);
|
|
4751
4774
|
handleScroll.cancel();
|
|
4752
4775
|
};
|
|
4753
|
-
}, []);
|
|
4776
|
+
}, [startLeft, scale, scaleWidth]);
|
|
4754
4777
|
return /*#__PURE__*/React__default['default'].createElement("div", {
|
|
4755
4778
|
ref: domRef,
|
|
4756
4779
|
style: style,
|
|
@@ -4849,7 +4872,7 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
|
|
|
4849
4872
|
setCursor: handleSetCursor,
|
|
4850
4873
|
deltaScrollLeft: autoScroll && handleDeltaScrollLeft,
|
|
4851
4874
|
allowCreateTrack: allowCreateTrack,
|
|
4852
|
-
minHeight: index === 0 ?
|
|
4875
|
+
minHeight: index === 0 ? 122 : _totalHeight,
|
|
4853
4876
|
containerRef: containerRef,
|
|
4854
4877
|
onMutiSelectChange: props === null || props === void 0 ? void 0 : props.onMutiSelectChange,
|
|
4855
4878
|
engineRef: engineRef,
|