|
|
@@ -61,6 +61,7 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
"TimelineInteractionMode": () => (/* reexport */ TimelineInteractionMode),
|
|
|
"TimelineKeyframeChangedEvent": () => (/* reexport */ TimelineKeyframeChangedEvent),
|
|
|
"TimelineKeyframeShape": () => (/* reexport */ TimelineKeyframeShape),
|
|
|
+ "TimelineScrollSource": () => (/* reexport */ TimelineScrollSource),
|
|
|
"TimelineSelectedEvent": () => (/* reexport */ TimelineSelectedEvent),
|
|
|
"TimelineSelectionMode": () => (/* reexport */ TimelineSelectionMode),
|
|
|
"TimelineStyleUtils": () => (/* reexport */ TimelineStyleUtils),
|
|
|
@@ -810,6 +811,7 @@ var TimelineEvents;
|
|
|
TimelineEvents["Drag"] = "drag";
|
|
|
TimelineEvents["DragFinished"] = "dragFinished";
|
|
|
TimelineEvents["Scroll"] = "scroll";
|
|
|
+ TimelineEvents["ScrollFinished"] = "scrollFinished";
|
|
|
TimelineEvents["DoubleClick"] = "doubleClick";
|
|
|
TimelineEvents["MouseDown"] = "mouseDown";
|
|
|
})(TimelineEvents || (TimelineEvents = {}));
|
|
|
@@ -974,6 +976,13 @@ var defaultTimelineConsts = {
|
|
|
*/
|
|
|
clickThreshold: 3
|
|
|
};
|
|
|
+;// CONCATENATED MODULE: ./src/enums/timelineScrollSource.ts
|
|
|
+var TimelineScrollSource;
|
|
|
+(function (TimelineScrollSource) {
|
|
|
+ TimelineScrollSource["DefaultMode"] = "none";
|
|
|
+ TimelineScrollSource["ZoomMode"] = "zoom";
|
|
|
+ TimelineScrollSource["ScrollBySelection"] = "scrollBySelection";
|
|
|
+})(TimelineScrollSource || (TimelineScrollSource = {}));
|
|
|
;// CONCATENATED MODULE: ./src/timeline.ts
|
|
|
function timeline_typeof(obj) { "@babel/helpers - typeof"; return timeline_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, timeline_typeof(obj); }
|
|
|
function timeline_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
|
@@ -1013,6 +1022,7 @@ function timeline_defineProperty(obj, key, value) { if (key in obj) { Object.def
|
|
|
|
|
|
// @private defaults are exposed:
|
|
|
|
|
|
+
|
|
|
var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
timeline_inherits(Timeline, _TimelineEventsEmitte);
|
|
|
var _super = timeline_createSuper(Timeline);
|
|
|
@@ -1030,6 +1040,7 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
|
|
|
/**
|
|
|
* Dynamically generated virtual scroll content.
|
|
|
+ * While canvas has no real size, this element is used to create virtual scroll on the parent element.
|
|
|
*/
|
|
|
|
|
|
/**
|
|
|
@@ -1049,7 +1060,51 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
*/
|
|
|
|
|
|
/**
|
|
|
- * scroll finished timer reference.
|
|
|
+ * Private. Current mouse position that is used to track values between mouse up/down events.
|
|
|
+ * Can be null, use public methods and properties instead.
|
|
|
+ */
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Private. Current active mouse area selection rectangle displayed during the mouse up/down drag events.
|
|
|
+ */
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Private. Whether selection rectangle is displayed.
|
|
|
+ */
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Private. Information in regard of current active drag state.
|
|
|
+ */
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Private. whether click is allowed.
|
|
|
+ */
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Private. scroll finished timer reference.
|
|
|
+ */
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Private.Current timeline position.
|
|
|
+ * Please use public get\set methods to properly change the timeline position.
|
|
|
+ */
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Private. Current zoom level. Please use publicly available properties to set zoom levels.
|
|
|
+ */
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Private. Ref for the auto pan scroll interval.
|
|
|
+ */
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Private.
|
|
|
+ * Component interaction mode. Please use publicly available methods.
|
|
|
+ */
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Private.
|
|
|
+ * Indication when scroll are drag or click is started.
|
|
|
*/
|
|
|
|
|
|
/**
|
|
|
@@ -1080,6 +1135,7 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
timeline_defineProperty(timeline_assertThisInitialized(_this), "_drag", null);
|
|
|
timeline_defineProperty(timeline_assertThisInitialized(_this), "_startedDragWithCtrl", false);
|
|
|
timeline_defineProperty(timeline_assertThisInitialized(_this), "_startedDragWithShiftKey", false);
|
|
|
+ timeline_defineProperty(timeline_assertThisInitialized(_this), "_scrollProgrammatically", false);
|
|
|
timeline_defineProperty(timeline_assertThisInitialized(_this), "_clickTimeout", 0);
|
|
|
timeline_defineProperty(timeline_assertThisInitialized(_this), "_lastClickTime", 0);
|
|
|
timeline_defineProperty(timeline_assertThisInitialized(_this), "_lastClickPoint", null);
|
|
|
@@ -1095,6 +1151,7 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
timeline_defineProperty(timeline_assertThisInitialized(_this), "_interactionMode", TimelineInteractionMode.Selection);
|
|
|
timeline_defineProperty(timeline_assertThisInitialized(_this), "_lastUsedArgs", null);
|
|
|
timeline_defineProperty(timeline_assertThisInitialized(_this), "_model", null);
|
|
|
+ timeline_defineProperty(timeline_assertThisInitialized(_this), "_scrollAreaClickOrDragStarted", false);
|
|
|
timeline_defineProperty(timeline_assertThisInitialized(_this), "_handleKeyUp", function (event) {
|
|
|
if (_this._interactionMode === TimelineInteractionMode.Zoom) {
|
|
|
_this._setZoomCursor(event);
|
|
|
@@ -1113,21 +1170,28 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
_this.rescale();
|
|
|
_this.redraw();
|
|
|
});
|
|
|
+ timeline_defineProperty(timeline_assertThisInitialized(_this), "_handleScrollMouseDownEvent", function () {
|
|
|
+ _this._scrollAreaClickOrDragStarted = true;
|
|
|
+ });
|
|
|
timeline_defineProperty(timeline_assertThisInitialized(_this), "_handleScrollEvent", function (args) {
|
|
|
+ var scrollProgrammatically = _this._scrollProgrammatically;
|
|
|
+ if (_this._scrollProgrammatically) {
|
|
|
+ _this._scrollProgrammatically = false;
|
|
|
+ }
|
|
|
+ // Stop previous running timeout.
|
|
|
_this._clearScrollFinishedTimer();
|
|
|
- // Set a timeout to run event 'scrolling end'. Auto scroll is used to repeat scroll when drag element outside of the area.
|
|
|
+ // Set a timeout to run event 'scrolling end'.
|
|
|
+ // Auto scroll is used to repeat scroll when drag element or select items outside of the visible area.
|
|
|
_this._scrollFinishedTimerRef = window.setTimeout(function () {
|
|
|
if (!_this._isPanStarted) {
|
|
|
- if (_this._scrollFinishedTimerRef) {
|
|
|
- clearTimeout(_this._scrollFinishedTimerRef);
|
|
|
- _this._scrollFinishedTimerRef = null;
|
|
|
- }
|
|
|
+ _this._clearScrollFinishedTimer();
|
|
|
_this.rescale();
|
|
|
_this.redraw();
|
|
|
}
|
|
|
+ _this._emitScrollEvent(args, scrollProgrammatically, TimelineEvents.ScrollFinished);
|
|
|
}, _this._consts.scrollFinishedTimeoutMs);
|
|
|
_this.redraw();
|
|
|
- _this._emitScrollEvent(args);
|
|
|
+ _this._emitScrollEvent(args, scrollProgrammatically);
|
|
|
});
|
|
|
timeline_defineProperty(timeline_assertThisInitialized(_this), "_handleWheelEvent", function (event) {
|
|
|
if (_this._controlKeyPressed(event)) {
|
|
|
@@ -1245,6 +1309,9 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
}
|
|
|
args = args;
|
|
|
var isLeftClicked = _this.isLeftButtonClicked(args);
|
|
|
+ if (!isLeftClicked) {
|
|
|
+ _this._scrollAreaClickOrDragStarted = false;
|
|
|
+ }
|
|
|
// On dragging is started.
|
|
|
if (_this._startPos) {
|
|
|
// On left button is on hold by the user
|
|
|
@@ -1332,6 +1399,7 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
}
|
|
|
});
|
|
|
timeline_defineProperty(timeline_assertThisInitialized(_this), "_handleMouseUpEvent", function (args) {
|
|
|
+ _this._scrollAreaClickOrDragStarted = false;
|
|
|
if (_this._startPos) {
|
|
|
//window.releaseCapture();
|
|
|
var pos = _this._trackMousePos(_this._canvas, args);
|
|
|
@@ -1407,7 +1475,7 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
if (options) {
|
|
|
this._options = this._setOptions(options);
|
|
|
}
|
|
|
- this._subscribeOnEvents();
|
|
|
+ this._subscribeComponentEvents();
|
|
|
this.rescale();
|
|
|
this.redraw();
|
|
|
}
|
|
|
@@ -1453,53 +1521,85 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
}
|
|
|
/**
|
|
|
* Subscribe current component on the related events.
|
|
|
+ * Private. Use initialize method instead.
|
|
|
*/
|
|
|
}, {
|
|
|
- key: "_subscribeOnEvents",
|
|
|
- value: function _subscribeOnEvents() {
|
|
|
- this._container.addEventListener('wheel', this._handleWheelEvent);
|
|
|
+ key: "_subscribeComponentEvents",
|
|
|
+ value: function _subscribeComponentEvents() {
|
|
|
+ // Allow to call event multiple times, revoke current subscription and subscribe again.
|
|
|
+ this._unsubscribeComponentEvents();
|
|
|
+ if (!this._container || !this._scrollContainer || !this._canvas) {
|
|
|
+ throw Error("Cannot subscribe on scroll events while one of the containers is null or empty. Please call initialize method first");
|
|
|
+ }
|
|
|
+ if (this._container) {
|
|
|
+ this._container.addEventListener('wheel', this._handleWheelEvent);
|
|
|
+ }
|
|
|
if (this._scrollContainer) {
|
|
|
this._scrollContainer.addEventListener('scroll', this._handleScrollEvent);
|
|
|
+ this._scrollContainer.addEventListener('touchstart', this._handleScrollMouseDownEvent);
|
|
|
+ this._scrollContainer.addEventListener('mousedown', this._handleScrollMouseDownEvent);
|
|
|
}
|
|
|
document.addEventListener('keyup', this._handleKeyUp, false);
|
|
|
document.addEventListener('keydown', this._handleKeyDown, false);
|
|
|
window.addEventListener('blur', this._handleBlurEvent, false);
|
|
|
window.addEventListener('resize', this._handleWindowResizeEvent, false);
|
|
|
- this._canvas.addEventListener('touchstart', this._handleMouseDownEvent, false);
|
|
|
- this._canvas.addEventListener('mousedown', this._handleMouseDownEvent, false);
|
|
|
+ if (this._canvas) {
|
|
|
+ this._canvas.addEventListener('touchstart', this._handleMouseDownEvent, false);
|
|
|
+ this._canvas.addEventListener('mousedown', this._handleMouseDownEvent, false);
|
|
|
+ }
|
|
|
window.addEventListener('mousemove', this._handleMouseMoveEvent, false);
|
|
|
window.addEventListener('touchmove', this._handleMouseMoveEvent, false);
|
|
|
window.addEventListener('mouseup', this._handleMouseUpEvent, false);
|
|
|
window.addEventListener('touchend', this._handleMouseUpEvent, false);
|
|
|
}
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Private. Use dispose method instead.
|
|
|
+ */
|
|
|
}, {
|
|
|
- key: "dispose",
|
|
|
- value: function dispose() {
|
|
|
- // Unsubscribe all events
|
|
|
- this.offAll();
|
|
|
- this._container = null;
|
|
|
- this._canvas = null;
|
|
|
- this._scrollContainer = null;
|
|
|
- this._scrollContent = null;
|
|
|
- this._ctx = null;
|
|
|
- this._cleanUpSelection();
|
|
|
+ key: "_unsubscribeComponentEvents",
|
|
|
+ value: function _unsubscribeComponentEvents() {
|
|
|
this._container.removeEventListener('wheel', this._handleWheelEvent);
|
|
|
if (this._scrollContainer) {
|
|
|
this._scrollContainer.removeEventListener('scroll', this._handleScrollEvent);
|
|
|
+ this._scrollContainer.removeEventListener('touchstart', this._handleScrollMouseDownEvent);
|
|
|
+ this._scrollContainer.removeEventListener('mousedown', this._handleScrollMouseDownEvent);
|
|
|
+ } else {
|
|
|
+ console.warn("Cannot unsubscribe scroll while it's already empty");
|
|
|
}
|
|
|
window.removeEventListener('blur', this._handleBlurEvent);
|
|
|
window.removeEventListener('resize', this._handleWindowResizeEvent);
|
|
|
document.removeEventListener('keydown', this._handleKeyDown);
|
|
|
document.removeEventListener('keyup', this._handleKeyUp);
|
|
|
- this._canvas.removeEventListener('touchstart', this._handleMouseDownEvent);
|
|
|
- this._canvas.removeEventListener('mousedown', this._handleMouseDownEvent);
|
|
|
+ if (this._canvas) {
|
|
|
+ this._canvas.removeEventListener('touchstart', this._handleMouseDownEvent);
|
|
|
+ this._canvas.removeEventListener('mousedown', this._handleMouseDownEvent);
|
|
|
+ } else {
|
|
|
+ console.warn("Cannot unsubscribe canvas while it's already empty");
|
|
|
+ }
|
|
|
window.removeEventListener('mousemove', this._handleMouseMoveEvent);
|
|
|
window.removeEventListener('touchmove', this._handleMouseMoveEvent);
|
|
|
window.removeEventListener('mouseup', this._handleMouseUpEvent);
|
|
|
window.removeEventListener('touchend', this._handleMouseUpEvent);
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * Dispose current component: unsubscribe component and user events.
|
|
|
+ */
|
|
|
+ }, {
|
|
|
+ key: "dispose",
|
|
|
+ value: function dispose() {
|
|
|
+ // Unsubscribe all user events.
|
|
|
+ this.offAll();
|
|
|
// Stop times
|
|
|
this._stopAutoPan();
|
|
|
this._clearScrollFinishedTimer();
|
|
|
+ this._unsubscribeComponentEvents();
|
|
|
+ this._container = null;
|
|
|
+ this._canvas = null;
|
|
|
+ this._scrollContainer = null;
|
|
|
+ this._scrollContent = null;
|
|
|
+ this._ctx = null;
|
|
|
+ this._cleanUpSelection();
|
|
|
}
|
|
|
}, {
|
|
|
key: "_setZoomCursor",
|
|
|
@@ -1543,10 +1643,9 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
if (newScrollLeft <= 0) {
|
|
|
newScrollLeft = 0;
|
|
|
}
|
|
|
- this._rescaleInternal(newScrollLeft + this._width(), null, 'zoom');
|
|
|
+ this._rescaleInternal(newScrollLeft + this._width(), null, TimelineScrollSource.ZoomMode);
|
|
|
if (this._scrollContainer.scrollLeft != newScrollLeft) {
|
|
|
- // Scroll event will redraw the screen.
|
|
|
- this._scrollContainer.scrollLeft = newScrollLeft;
|
|
|
+ this.setScrollLeft(newScrollLeft);
|
|
|
}
|
|
|
this.redraw();
|
|
|
}
|
|
|
@@ -1647,6 +1746,7 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
value: function isLeftButtonClicked(args) {
|
|
|
return !!args && args.buttons == 1;
|
|
|
}
|
|
|
+
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
|
}, {
|
|
|
key: "_moveElements",
|
|
|
@@ -1830,16 +1930,16 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * Set pan mode
|
|
|
- * @param isPan
|
|
|
+ * Set component interaction mode.
|
|
|
*/
|
|
|
}, {
|
|
|
key: "setInteractionMode",
|
|
|
value: function setInteractionMode(mode) {
|
|
|
if (this._interactionMode != mode) {
|
|
|
this._interactionMode = mode;
|
|
|
- // Avoid any conflicts with other modes:
|
|
|
+ // Avoid any conflicts with other modes, clean current state.
|
|
|
this._cleanUpSelection();
|
|
|
+ this.redraw();
|
|
|
}
|
|
|
}
|
|
|
/**
|
|
|
@@ -2083,6 +2183,7 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
this._emitDragFinishedEvent(forcePrevent);
|
|
|
this._startPos = null;
|
|
|
this._drag = null;
|
|
|
+ this._scrollAreaClickOrDragStarted = false;
|
|
|
this._startedDragWithCtrl = false;
|
|
|
this._startedDragWithShiftKey = false;
|
|
|
this._selectionRect = null;
|
|
|
@@ -2165,9 +2266,9 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
this._rescaleInternal(newLeft + this._width());
|
|
|
}
|
|
|
if (offsetX > 0 && newLeft + this._width() >= this._scrollContainer.scrollWidth - 5) {
|
|
|
- this._scrollContainer.scrollLeft = this._scrollContainer.scrollWidth;
|
|
|
+ this.setScrollLeft(this._scrollContainer.scrollWidth);
|
|
|
} else {
|
|
|
- this._scrollContainer.scrollLeft = newLeft;
|
|
|
+ this.setScrollLeft(newLeft);
|
|
|
}
|
|
|
this._scrollContainer.scrollTop = Math.round(scrollStartPos.y + start.y - pos.y);
|
|
|
}
|
|
|
@@ -2214,14 +2315,14 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
this._stopAutoPan();
|
|
|
}
|
|
|
if (newWidth || newHeight) {
|
|
|
- this._rescaleInternal(newWidth, newHeight, 'scrollBySelection');
|
|
|
+ this._rescaleInternal(newWidth, newHeight, TimelineScrollSource.ScrollBySelection);
|
|
|
}
|
|
|
if (Math.abs(speedX) > 0) {
|
|
|
- this._scrollContainer.scrollLeft += speedX;
|
|
|
+ this.setScrollLeft(this._scrollContainer.scrollLeft + speedX);
|
|
|
isChanged = true;
|
|
|
}
|
|
|
if (Math.abs(speedY) > 0) {
|
|
|
- this._scrollContainer.scrollTop += speedY;
|
|
|
+ this.setScrollTop(this._scrollContainer.scrollTop + speedY);
|
|
|
isChanged = true;
|
|
|
}
|
|
|
return isChanged;
|
|
|
@@ -2889,8 +2990,8 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
}, {
|
|
|
key: "scrollLeft",
|
|
|
value: function scrollLeft() {
|
|
|
- if (this._scrollContainer.scrollLeft != this._scrollContainer.scrollWidth) {
|
|
|
- this._scrollContainer.scrollLeft = this._scrollContainer.scrollWidth;
|
|
|
+ if (this._scrollContainer && this._scrollContainer.scrollLeft != this._scrollContainer.scrollWidth) {
|
|
|
+ this.setScrollLeft(this._scrollContainer.scrollWidth);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -2990,14 +3091,16 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
}, {
|
|
|
key: "setScrollLeft",
|
|
|
value: function setScrollLeft(value) {
|
|
|
- if (this._scrollContainer) {
|
|
|
+ if (this._scrollContainer && this._scrollContainer.scrollLeft !== value) {
|
|
|
+ this._scrollProgrammatically = true;
|
|
|
this._scrollContainer.scrollLeft = value;
|
|
|
}
|
|
|
}
|
|
|
}, {
|
|
|
key: "setScrollTop",
|
|
|
value: function setScrollTop(value) {
|
|
|
- if (this._scrollContainer) {
|
|
|
+ if (this._scrollContainer && this._scrollContainer.scrollTop !== value) {
|
|
|
+ this._scrollProgrammatically = true;
|
|
|
this._scrollContainer.scrollTop = value;
|
|
|
}
|
|
|
}
|
|
|
@@ -3148,45 +3251,58 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
}, {
|
|
|
key: "rescale",
|
|
|
value: function rescale() {
|
|
|
- this._rescaleInternal();
|
|
|
+ return this._rescaleInternal();
|
|
|
}
|
|
|
+
|
|
|
+ /**
|
|
|
+ * This method is used to draw additional space when after there are no keyframes.
|
|
|
+ * When scrolled we should allow to indefinitely scroll right, so space should be extended to drag keyframes outside of the current size bounds.
|
|
|
+ */
|
|
|
}, {
|
|
|
key: "_rescaleInternal",
|
|
|
value: function _rescaleInternal() {
|
|
|
var newWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
|
var newHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
|
- var scrollMode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'default';
|
|
|
- this._updateCanvasScale();
|
|
|
+ var scrollMode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : TimelineScrollSource.DefaultMode;
|
|
|
+ var changed = this._updateCanvasScale();
|
|
|
var data = this._calculateModel();
|
|
|
if (data && data.size) {
|
|
|
var additionalOffset = this._options.stepPx;
|
|
|
newWidth = newWidth || 0;
|
|
|
- // not less than current timeline position
|
|
|
- var timelineGlobalPos = this.valToPx(this._val);
|
|
|
+ // content should be not less than current timeline position + width of the timeline
|
|
|
+ var timelineGlobalPos = this.valToPx(this._val) + this._leftMargin();
|
|
|
var timelinePos = 0;
|
|
|
- if (timelineGlobalPos > this._width()) {
|
|
|
- if (scrollMode == 'scrollBySelection') {
|
|
|
- timelinePos = Math.floor(timelineGlobalPos + this._width() + (this._options.stepPx || 0));
|
|
|
+ var rightPosition = this.getScrollLeft() + this.getClientWidth();
|
|
|
+ if (timelineGlobalPos >= rightPosition) {
|
|
|
+ if (scrollMode == TimelineScrollSource.ScrollBySelection) {
|
|
|
+ // When item (timeline, selection rectangle) is just dragged to the right corner.
|
|
|
+ timelinePos = Math.floor(timelineGlobalPos + this._leftMargin());
|
|
|
} else {
|
|
|
- timelinePos = Math.floor(timelineGlobalPos + this._width() / 1.5);
|
|
|
+ // When timeline is playing and we need to add next screen (when timeline goes out of the bounds.)
|
|
|
+ timelinePos = Math.floor(timelineGlobalPos + this.getClientWidth() + this._leftMargin());
|
|
|
}
|
|
|
}
|
|
|
var keyframeW = data.size.width + this._leftMargin() + additionalOffset;
|
|
|
- newWidth = Math.max(newWidth,
|
|
|
- // keyframes size
|
|
|
+ newWidth = Math.max(
|
|
|
+ // New expected component width.
|
|
|
+ newWidth,
|
|
|
+ // keyframes max width
|
|
|
keyframeW,
|
|
|
// not less than current scroll position
|
|
|
- this.getScrollLeft() + this._width(), timelinePos);
|
|
|
+ rightPosition, timelinePos);
|
|
|
var minWidthPx = Math.floor(newWidth) + 'px';
|
|
|
if (minWidthPx != this._scrollContent.style.minWidth) {
|
|
|
this._scrollContent.style.minWidth = minWidthPx;
|
|
|
+ changed = true;
|
|
|
}
|
|
|
newHeight = Math.max(Math.floor(data.size.height + this._height() * 0.2), this._scrollContainer.scrollTop + this._height() - 1, Math.round(newHeight || 0));
|
|
|
- var h = newHeight + 'px';
|
|
|
+ var h = Math.floor(newHeight) + 'px';
|
|
|
if (this._scrollContent.style.minHeight != h) {
|
|
|
this._scrollContent.style.minHeight = h;
|
|
|
+ return changed;
|
|
|
}
|
|
|
}
|
|
|
+ return changed;
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
@@ -3259,7 +3375,7 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * get all clickable elements by a screen point.
|
|
|
+ * get all clickable elements by the given local screen coordinate.
|
|
|
*/
|
|
|
}, {
|
|
|
key: "elementFromPoint",
|
|
|
@@ -3387,7 +3503,7 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
return toArg;
|
|
|
}
|
|
|
/**
|
|
|
- * Subscribe on time changed.
|
|
|
+ * Subscribe user callback on time changed.
|
|
|
*/
|
|
|
}, {
|
|
|
key: "onTimeChanged",
|
|
|
@@ -3395,7 +3511,7 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
this.on(TimelineEvents.TimeChanged, callback);
|
|
|
}
|
|
|
/**
|
|
|
- * Subscribe on drag started event.
|
|
|
+ * Subscribe user callback on drag started event.
|
|
|
*/
|
|
|
}, {
|
|
|
key: "onDragStarted",
|
|
|
@@ -3403,7 +3519,7 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
this.on(TimelineEvents.DragStarted, callback);
|
|
|
}
|
|
|
/**
|
|
|
- * Subscribe on drag event.
|
|
|
+ * Subscribe user callback on drag event.
|
|
|
*/
|
|
|
}, {
|
|
|
key: "onDrag",
|
|
|
@@ -3411,7 +3527,7 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
this.on(TimelineEvents.Drag, callback);
|
|
|
}
|
|
|
/**
|
|
|
- * Subscribe on drag finished event.
|
|
|
+ * Subscribe user callback on drag finished event.
|
|
|
*/
|
|
|
}, {
|
|
|
key: "onDragFinished",
|
|
|
@@ -3419,7 +3535,7 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
this.on(TimelineEvents.DragFinished, callback);
|
|
|
}
|
|
|
/**
|
|
|
- * Subscribe on double click.
|
|
|
+ * Subscribe user callback on double click.
|
|
|
*/
|
|
|
}, {
|
|
|
key: "onDoubleClick",
|
|
|
@@ -3427,7 +3543,7 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
this.on(TimelineEvents.DoubleClick, callback);
|
|
|
}
|
|
|
/**
|
|
|
- * Subscribe on keyframe changed event.
|
|
|
+ * Subscribe user callback on keyframe changed event.
|
|
|
*/
|
|
|
}, {
|
|
|
key: "onKeyframeChanged",
|
|
|
@@ -3435,37 +3551,48 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
this.on(TimelineEvents.KeyframeChanged, callback);
|
|
|
}
|
|
|
/**
|
|
|
- * Subscribe on drag finished event.
|
|
|
+ * Subscribe user callback on drag finished event.
|
|
|
*/
|
|
|
}, {
|
|
|
key: "onMouseDown",
|
|
|
value: function onMouseDown(callback) {
|
|
|
this.on(TimelineEvents.MouseDown, callback);
|
|
|
}
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Subscribe user callback on selected.
|
|
|
+ */
|
|
|
}, {
|
|
|
key: "onSelected",
|
|
|
value: function onSelected(callback) {
|
|
|
this.on(TimelineEvents.Selected, callback);
|
|
|
}
|
|
|
/**
|
|
|
- * Subscribe on scroll event
|
|
|
+ * Subscribe user callback on scroll event
|
|
|
*/
|
|
|
}, {
|
|
|
key: "onScroll",
|
|
|
value: function onScroll(callback) {
|
|
|
this.on(TimelineEvents.Scroll, callback);
|
|
|
}
|
|
|
+ }, {
|
|
|
+ key: "onScrollFinished",
|
|
|
+ value: function onScrollFinished(callback) {
|
|
|
+ this.on(TimelineEvents.ScrollFinished, callback);
|
|
|
+ }
|
|
|
}, {
|
|
|
key: "_emitScrollEvent",
|
|
|
- value: function _emitScrollEvent(args) {
|
|
|
+ value: function _emitScrollEvent(args, scrollProgrammatically) {
|
|
|
+ var eventType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : TimelineEvents.Scroll;
|
|
|
var scrollEvent = {
|
|
|
args: args,
|
|
|
+ scrollProgrammatically: scrollProgrammatically,
|
|
|
scrollLeft: this.getScrollLeft(),
|
|
|
scrollTop: this.getScrollTop(),
|
|
|
scrollHeight: this._scrollContainer.scrollHeight,
|
|
|
scrollWidth: this._scrollContainer.scrollWidth
|
|
|
};
|
|
|
- _get(timeline_getPrototypeOf(Timeline.prototype), "emit", this).call(this, TimelineEvents.Scroll, scrollEvent);
|
|
|
+ _get(timeline_getPrototypeOf(Timeline.prototype), "emit", this).call(this, eventType, scrollEvent);
|
|
|
return scrollEvent;
|
|
|
}
|
|
|
}, {
|
|
|
@@ -3552,15 +3679,19 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
key: "_getDragEventArgs",
|
|
|
value: function _getDragEventArgs() {
|
|
|
var draggableArguments = new TimelineDragEvent();
|
|
|
- if (!this._drag) {
|
|
|
- return draggableArguments;
|
|
|
- }
|
|
|
- draggableArguments.val = this._currentPos.val;
|
|
|
- draggableArguments.originalVal = this._currentPos.originalVal;
|
|
|
- draggableArguments.snapVal = this._currentPos.snapVal;
|
|
|
- draggableArguments.pos = this._currentPos;
|
|
|
- draggableArguments.elements = this._drag.elements;
|
|
|
- draggableArguments.target = this._drag.target;
|
|
|
+ if (this._currentPos) {
|
|
|
+ draggableArguments.val = this._currentPos.val;
|
|
|
+ draggableArguments.originalVal = this._currentPos.originalVal;
|
|
|
+ draggableArguments.snapVal = this._currentPos.snapVal;
|
|
|
+ draggableArguments.pos = this._currentPos;
|
|
|
+ }
|
|
|
+ if (this._drag) {
|
|
|
+ draggableArguments.elements = this._drag.elements;
|
|
|
+ draggableArguments.target = this._drag.target;
|
|
|
+ } else {
|
|
|
+ draggableArguments.elements = [];
|
|
|
+ draggableArguments.target = null;
|
|
|
+ }
|
|
|
return draggableArguments;
|
|
|
}
|
|
|
}]);
|
|
|
@@ -3619,6 +3750,7 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
|
|
|
|
|
|
|
|
|
|
|
|
+
|
|
|
// @private defaults are exposed:
|
|
|
|
|
|
/******/ return __webpack_exports__;
|
Ievgen Naida