Added restriction to set time during the drag. Added time event source.

animation-timeline.js

@@ -283,11 +283,33 @@ var animationTimeline = function (window, document) {
 			let sizes = getLanesSizes();
 			if (sizes && sizes.areaRect) {
 
+				additionalOffset = + 100;
 				newWidth = newWidth || 0;
-				newWidth = Math.max(newWidth, sizes.areaRect.w + options.leftMarginPx + 100, scrollContainer.scrollLeft + canvas.clientWidth);
+				// not less than current timeline position
+				let timelineGlobalPos = msToPx(timeLine.ms, true);
+				let timelinePos = 0;
+				if (timelineGlobalPos > scrollContainer.scrollWidth) {
+					timelinePos = Math.floor(timelineGlobalPos + canvas.clientWidth / 1.5);
+				}
+
+				newWidth = Math.max(newWidth,
+					// keyframes size
+					sizes.areaRect.w + options.leftMarginPx + additionalOffset,
+					// not less than current scroll position
+					scrollContainer.scrollLeft + canvas.clientWidth,
+					timelinePos,
+				);
+
+				let h = Math.floor(sizes.areaRect.h + sizes.areaRect.h + 20) + "px";
+				if (size.style.minHeight != h) {
+					size.style.minHeight = h
+				}
 
-				size.style.minHeight = sizes.areaRect.h + sizes.areaRect.h * 0.8 + "px";
-				size.style.minWidth = newWidth + "px";
+				newWidth = Math.floor(newWidth) + "px";
+
+				if (newWidth != size.style.minWidth) {
+					size.style.minWidth = newWidth
+				}
 			}
 
 		}
@@ -445,8 +467,6 @@ var animationTimeline = function (window, document) {
 			startPos = trackMousePos(canvas, args);
 			clickDurarion = new Date();
 			currentPos = startPos;
-			startPos.scrollLeft = scrollContainer.scrollLeft;
-			startPos.scrollTop = scrollContainer.scrollTo;
 			drag = getDraggable(currentPos);
 			// Select keyframes on mouse down
 			if (drag) {
@@ -502,7 +522,7 @@ var animationTimeline = function (window, document) {
 						let convertedMs = mousePosToMs(currentPos.x, true);
 						//redraw();
 						if (drag.type == 'timeline') {
-							isChanged |= setTime(convertedMs);
+							isChanged |= setTimeInternal(convertedMs, 'user');
 						} else if ((drag.type == 'keyframe' || drag.type == 'lane') && drag.selectedItems) {
 							let offset = Math.floor(convertedMs - drag.ms);
 							if (Math.abs(offset) > 0) {
@@ -621,7 +641,7 @@ var animationTimeline = function (window, document) {
 					// change timeline pos:
 					let convertedMs = mousePosToMs(pos.x, true);
 					// Set current timeline position if it's not a drag or selection rect small or fast click.
-					isChanged |= setTime(convertedMs);
+					isChanged |= setTimeInternal(convertedMs, 'user');
 				}
 			}
 			else {
@@ -631,7 +651,7 @@ var animationTimeline = function (window, document) {
 				// change timeline pos:
 				let convertedMs = mousePosToMs(pos.x, true);
 				// Set current timeline position if it's not a drag or selection rect small or fast click.
-				isChanged |= setTime(convertedMs);
+				isChanged |= setTimeInternal(convertedMs, 'user');
 			}
 
 			return isChanged;
@@ -771,9 +791,7 @@ var animationTimeline = function (window, document) {
 			return false;
 		}
 
-		width = canvas.clientWidth;
 		//stepsCanFit
-
 		rescale();
 
 		let intervalReference = null;
@@ -813,8 +831,7 @@ var animationTimeline = function (window, document) {
 		function scrollByDrag(pos) {
 			let x = pos.x;
 			let isChanged = false;
-			let speed = 0;
-			if (x <= 0 || x >= canvas.clientWidth) {
+			if (x <= 0) {
 				// Auto move init
 				startAutoScrollInterval();
 
@@ -822,27 +839,43 @@ var animationTimeline = function (window, document) {
 					return;
 				}
 
-				if (x <= 0) {
-					speed = -getDistance(x, 0);
+				if (scrollLeft) {
+
 				}
 				else {
-					// One second distance: 
-					speed = getDistance(x, canvas.clientWidth);
+
 				}
 
-				if (!isNaN(options.scrollByDragSpeed)) {
-					speed = speed * options.scrollByDragSpeed;
+				// Get normilized speed.
+				speed = -getDistance(x, 0) * (isNaN(options.scrollByDragSpeed) ? 1 : options.scrollByDragSpeed);
+
+				if (Math.abs(speed) > 0) {
+					scrollContainer.scrollLeft += speed;
+					isChanged = true;
+				}
+
+			} else if (x >= canvas.clientWidth) {
+				// Auto move init
+				startAutoScrollInterval();
+
+				if (checkUpdateSpeedIsFast()) {
+					return;
+				}
+
+				// Get normalized speed: 
+				speed = getDistance(x, canvas.clientWidth) * (isNaN(options.scrollByDragSpeed) ? 1 : options.scrollByDragSpeed);
+
+				rescale(scrollContainer.scrollLeft + canvas.scrollWidth + speed);
+
+				if (Math.abs(speed) > 0) {
+					scrollLeft();
+					isChanged = true;
 				}
 			}
 			else {
 				clearMoveInterval();
 			}
 
-			if (Math.abs(speed) > 0) {
-				rescale(scrollContainer.scrollLeft + canvas.scrollWidth + speed);
-				scrollContainer.scrollLeft += speed;
-			}
-
 			return isChanged;
 		}
 
@@ -1348,8 +1381,30 @@ var animationTimeline = function (window, document) {
 				ctx.restore();
 			}
 		}
-
 		function redraw() {
+			redrawInternal();
+			if (window.requestAnimationFrame) {
+				window.requestAnimationFrame.call(this, redrawInternal);
+			} else {
+
+			}
+		}
+
+		function scrollLeft() {
+			if (scrollContainer.scrollLeft != scrollContainer.scrollWidth) {
+				scrollContainer.scrollLeft = scrollContainer.scrollWidth;
+			}
+		}
+
+		this.scrollLeft = scrollLeft;
+		function redrawInternal() {
+			// Rescale when timeline is goes more than 
+			if (msToPx(timeLine.ms, true) > scrollContainer.scrollWidth) {
+				rescale();
+				if (!drag && !selectionRect)
+					scrollLeft();
+			}
+
 			drawBackground();
 			drawLanes();
 			drawHeaderBackground();
@@ -1357,6 +1412,7 @@ var animationTimeline = function (window, document) {
 			drawKeyframes();
 			drawSelection();
 			drawTimeLine();
+
 		}
 
 		function getSharp(pos, thinkess) {
@@ -1379,7 +1435,7 @@ var animationTimeline = function (window, document) {
 			return timeLine.ms;
 		}
 
-		this.setTime = function (ms) {
+		function setTimeInternal(ms, source) {
 			ms = Math.round(ms);
 			if (ms < 0) {
 				ms = 0;
@@ -1387,10 +1443,22 @@ var animationTimeline = function (window, document) {
 
 			if (timeLine.ms != ms) {
 				timeLine.ms = ms;
-				this.emit('timeChanged', ms);
+				this.emit('timeChanged', { ms: ms, source: source });
+				return true;
 			}
+
+			return true;
 		}
 
+		this.setTime = function (ms) {
+			// Dont allow to change time during drag:
+			if (drag && drag.type == 'timeline') {
+				return false;
+			}
+
+			return setTimeInternal(ms);
+		};
+
 		this.select = function (value) {
 			performSelection(value);
 			redraw();

index.html

@@ -1,58 +1,60 @@
 <!DOCTYPE html>
 <html>
-<style>
-  #timeline-canvas-container {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-  }
 
-  #timeline-size-content {
-    width: 100px;
-    height: 100%;
-  }
+<head>
+  <style>
+    #timeline-canvas-container {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    }
 
-  #timeline-scroll-container {
-    border: 1px solid #d3d3d3;
-    background: white;
-    overflow: scroll;
-    max-width: 100%;
-    height: 400px;
-    position: relative;
-    box-sizing: border-box;
-    width: 100%;
-    touch-action: none;
-  }
+    #timeline-size-content {
+      width: 100px;
+      height: 100%;
+    }
 
-  #timeline {
+    #timeline-scroll-container {
+      border: 1px solid #d3d3d3;
+      background: white;
+      overflow: scroll;
+      max-width: 100%;
+      height: 400px;
+      position: relative;
+      box-sizing: border-box;
+      width: 100%;
+      touch-action: none;
+    }
 
-    image-rendering: -moz-crisp-edges;
-    image-rendering: -webkit-crisp-edges;
-    image-rendering: pixelated;
-    image-rendering: crisp-edges;
-    user-select: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-    touch-action: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
+    #timeline {
 
-  }
-</style>
+      image-rendering: -moz-crisp-edges;
+      image-rendering: -webkit-crisp-edges;
+      image-rendering: pixelated;
+      image-rendering: crisp-edges;
+      user-select: none;
+      -webkit-user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -o-user-select: none;
+      user-select: none;
+      touch-action: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
 
+    }
+  </style>
 
-
-<body>
   <script src="animation-timeline.js" type="text/javascript">
   </script>
+</head>
+
+<body>
   <div id="timeline-scroll-container">
     <div id="timeline-size-content">
     </div>
@@ -120,17 +122,16 @@
           ms: 100
         }
         ]
-      }//, {}, {}, {}, {}, {}, {},
+      }
     ];
 
     let timeline = animationTimeline.initialize({ id: 'timeline', scrollId: 'timeline-scroll-container', sizeId: 'timeline-size-content' }, lanes);
 
     timeline.on('timeChanged', function (object) {
-      document.getElementById('currentTime').innerHTML = object + 'ms';
+      document.getElementById('currentTime').innerHTML = object.ms + 'ms';
     })
 
   </script>
-
 </body>
 
 </html>