allow to execute autopan even if edge of component is touching edge of a screen.

lib/animation-timeline.js

@@ -547,6 +547,8 @@ var TimelineConsts = function TimelineConsts() {
   timelineConsts_defineProperty(this, "doubleClickTimeoutMs", 400);
 
   timelineConsts_defineProperty(this, "scrollFinishedTimeoutMs", 500);
+
+  timelineConsts_defineProperty(this, "autoPanByScrollPadding", 10);
 };
 // CONCATENATED MODULE: ./src/enums/timelineCursorType.ts
 var TimelineCursorType;
@@ -1724,11 +1726,13 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
       var y = pos.y;
       var isChanged = false;
       var speedX = 0;
-      var speedY = 0;
-      var isLeft = x <= 0;
-      var isRight = x >= this.canvas.clientWidth;
-      var isTop = y <= 0;
-      var isBottom = y >= this.canvas.clientHeight;
+      var speedY = 0; // Small offset to start auto pan earlier.
+
+      var bounds = this.consts.autoPanByScrollPadding;
+      var isLeft = x <= bounds;
+      var isRight = x >= this.canvas.clientWidth - bounds;
+      var isTop = y <= bounds;
+      var isBottom = y >= this.canvas.clientHeight - bounds;
       var newWidth = null;
       var newHeight = null;
 
@@ -1744,19 +1748,19 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
 
         if (isLeft) {
           // Get normalized speed.
-          speedX = -TimelineUtils.getDistance(x, 0) * scrollSpeedMultiplier;
+          speedX = -TimelineUtils.getDistance(x, bounds) * scrollSpeedMultiplier;
         } else if (isRight) {
           // Get normalized speed:
-          speedX = TimelineUtils.getDistance(x, this.canvas.clientWidth) * scrollSpeedMultiplier;
+          speedX = TimelineUtils.getDistance(x, this.canvas.clientWidth - bounds) * scrollSpeedMultiplier;
           newWidth = this.scrollContainer.scrollLeft + this.canvas.clientWidth + speedX;
         }
 
         if (isTop) {
           // Get normalized speed.
-          speedY = -TimelineUtils.getDistance(x, 0) * scrollSpeedMultiplier / 4;
+          speedY = -TimelineUtils.getDistance(x, bounds) * scrollSpeedMultiplier / 4;
         } else if (isBottom) {
           // Get normalized speed:
-          speedY = TimelineUtils.getDistance(x, this.canvas.clientHeight) * scrollSpeedMultiplier / 4;
+          speedY = TimelineUtils.getDistance(x, this.canvas.clientHeight - bounds) * scrollSpeedMultiplier / 4;
           newHeight = this.scrollContainer.scrollTop + this.canvas.clientHeight;
         }
       } else {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "animation-timeline-js",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "animation timeline control based on the canvas.",
   "main": "lib/animation-timeline.min.js",
   "types": "src/index.ts",

src/settings/timelineConsts.ts

@@ -19,4 +19,8 @@ export class TimelineConsts {
    * Time in ms used to refresh scrollbars when pan is finished.
    */
   scrollFinishedTimeoutMs = 500;
+  /**
+   * Auto pan padding
+   */
+  autoPanByScrollPadding = 10;
 }

src/timeline.ts

@@ -795,10 +795,12 @@ export class Timeline extends TimelineEventsEmitter {
     let isChanged = false;
     let speedX = 0;
     let speedY = 0;
-    const isLeft = x <= 0;
-    const isRight = x >= this.canvas.clientWidth;
-    const isTop = y <= 0;
-    const isBottom = y >= this.canvas.clientHeight;
+    // Small offset to start auto pan earlier.
+    const bounds = this.consts.autoPanByScrollPadding;
+    const isLeft = x <= bounds;
+    const isRight = x >= this.canvas.clientWidth - bounds;
+    const isTop = y <= bounds;
+    const isBottom = y >= this.canvas.clientHeight - bounds;
     let newWidth = null;
     let newHeight = null;
     if (isLeft || isRight || isTop || isBottom) {
@@ -812,19 +814,19 @@ export class Timeline extends TimelineEventsEmitter {
       const scrollSpeedMultiplier = isNaN(this.consts.scrollByDragSpeed) ? 1 : this.consts.scrollByDragSpeed;
       if (isLeft) {
         // Get normalized speed.
-        speedX = -TimelineUtils.getDistance(x, 0) * scrollSpeedMultiplier;
+        speedX = -TimelineUtils.getDistance(x, bounds) * scrollSpeedMultiplier;
       } else if (isRight) {
         // Get normalized speed:
-        speedX = TimelineUtils.getDistance(x, this.canvas.clientWidth) * scrollSpeedMultiplier;
+        speedX = TimelineUtils.getDistance(x, this.canvas.clientWidth - bounds) * scrollSpeedMultiplier;
         newWidth = this.scrollContainer.scrollLeft + this.canvas.clientWidth + speedX;
       }
 
       if (isTop) {
         // Get normalized speed.
-        speedY = (-TimelineUtils.getDistance(x, 0) * scrollSpeedMultiplier) / 4;
+        speedY = (-TimelineUtils.getDistance(x, bounds) * scrollSpeedMultiplier) / 4;
       } else if (isBottom) {
         // Get normalized speed:
-        speedY = (TimelineUtils.getDistance(x, this.canvas.clientHeight) * scrollSpeedMultiplier) / 4;
+        speedY = (TimelineUtils.getDistance(x, this.canvas.clientHeight - bounds) * scrollSpeedMultiplier) / 4;
         newHeight = this.scrollContainer.scrollTop + this.canvas.clientHeight;
       }
     } else {