@checksub_team/peaks_timeline 2.3.0-alpha.0 → 2.3.0-alpha.1

package/src/components/sources-layer.js

@@ -39,12 +39,17 @@ define([
     this._allowEditing  = allowEditing;
     this._sourcesGroup  = {};
     this._layer         = new Konva.Layer();
-    // Separate layer for dragged elements - always renders on top of sources layer
-    this._dragLayer     = new Konva.Layer();
     this._dataRetriever = new DataRetriever(peaks);
     this._lineGroups    = new LineGroups(peaks, view, this);
     this._lineGroups.addToLayer(this);
 
+    // Drag overlay container.
+    // Use a Group inside the main sources layer to avoid adding an extra Stage layer.
+    this._dragGroup = new Konva.Group({
+      listening: false
+    });
+    this._layer.add(this._dragGroup);
+
     this._loadedData = {};
 
     // Create invoker for performance optimizations
@@ -76,7 +81,7 @@ define([
 
   SourcesLayer.prototype._onSourcesDelayedLineChanged = function() {
     // Update dragged source groups when sources change line after a delay (e.g., after automatic line creation)
-    if (this._dragGhosts && this._draggedElements && this._draggedElements.length > 0) {
+    if (this._draggedElements && this._draggedElements.length > 0) {
       this._dragSourcesGroup();
     }
   };
@@ -107,6 +112,11 @@ define([
 
   SourcesLayer.prototype.add = function(element) {
     this._layer.add(element);
+
+    // Keep drag group on top even if other callers add elements later.
+    if (this._dragGroup) {
+      this._dragGroup.moveToTop();
+    }
   };
 
   /**
@@ -117,7 +127,6 @@ define([
 
   SourcesLayer.prototype.addToStage = function(stage) {
     stage.add(this._layer);
-    stage.add(this._dragLayer);
   };
 
   SourcesLayer.prototype.enableEditing = function(enable) {
@@ -375,10 +384,8 @@ define([
       draggable: true
     });
 
-    // Store initial source positions and create ghost previews
     var self = this;
 
-    this._dragGhosts = [];
     this._initialSourcePositions = {};
 
     this._draggedElements.forEach(function(source) {
@@ -399,38 +406,22 @@ define([
         // Get absolute Y position before moving (relative to line group)
         var absoluteY = sourceGroup.getAbsoluteY();
 
-        // Move source to the drag layer so it draws above ALL other sources/segments
-        sourceGroup.moveTo(self._dragLayer);
+        // Move source to the drag group so it draws above ALL other sources/segments
+        // without introducing an additional Konva.Layer on the Stage.
+        sourceGroup.moveTo(self._dragGroup);
         // Restore the Y position (now relative to drag layer, which is at y=0)
         sourceGroup.y(absoluteY);
-
-        // Create ghost preview
-        var ghost = self._createDragGhost(sourceGroup);
-
-        self._dragGhosts.push({
-          ghost: ghost,
-          sourceId: source.id
-        });
       }
     });
   };
 
   SourcesLayer.prototype.onSourcesGroupDragEnd = function() {
-    // Clean up ghost previews
-    if (this._dragGhosts) {
-      this._dragGhosts.forEach(function(item) {
-        if (item.ghost) {
-          item.ghost.destroy();
-        }
-      });
-      this._dragGhosts = null;
-    }
+    var self = this;
+
     this._initialSourcePositions = null;
     this._dragOffsetX = undefined;
     this._dragOffsetY = undefined;
 
-    var self = this;
-
     const updatedSources = this._draggedElements.map(
       function(source) {
         const sourceGroup = self._sourcesGroup[source.id];
@@ -462,10 +453,9 @@ define([
   SourcesLayer.prototype.onSourcesGroupDrag = function(draggedElement) {
     var pointerPos = this._view.getPointerPosition();
 
-    this._view.updateWithAutoScroll(this._dragSourcesGroup.bind(this));
+    this._view.updateWithAutoScroll(this._dragSourcesGroup.bind(this), null, true);
 
     // Return position that follows the mouse cursor exactly
-    // The ghost preview shows where it will actually be placed
     var clickedSourceGroup = this._sourcesGroup[this._draggedElementId];
 
     if (clickedSourceGroup) {
@@ -563,11 +553,8 @@ define([
       mousePosY
     );
 
-    this._updateDragGhosts();
-
     if (shouldRedraw) {
       this.batchDraw();
-      this._dragLayer.batchDraw();
     }
   };
 
@@ -582,78 +569,6 @@ define([
     );
   };
 
-  /**
-   * Creates a ghost preview element for a source being dragged.
-   * The ghost shows where the source will be placed when released.
-   *
-   * @private
-   * @param {SourceGroup} sourceGroup The source group to create a ghost for
-   * @returns {Konva.Rect} The ghost preview element
-   */
-  SourcesLayer.prototype._createDragGhost = function(sourceGroup) {
-    var source = sourceGroup.getSource();
-    var frameOffset = this._view.getFrameOffset();
-    var x = this._view.timeToPixels(source.startTime) - frameOffset;
-    var width = this._view.timeToPixels(source.endTime - source.startTime);
-    var height = sourceGroup.getCurrentHeight();
-    var y = sourceGroup.getAbsoluteY();
-
-    var ghost = new Konva.Rect({
-      x: x,
-      y: y,
-      width: width,
-      height: height,
-      fill: source.backgroundColor,
-      opacity: 0.4,
-      stroke: source.selectedBorderColor,
-      strokeWidth: 2,
-      dash: [8, 4],
-      cornerRadius: 8,
-      listening: false
-    });
-
-    this._layer.add(ghost);
-    ghost.moveToBottom();
-
-    return ghost;
-  };
-
-  /**
-   * Updates the positions of all drag ghost previews.
-   *
-   * @private
-   */
-  SourcesLayer.prototype._updateDragGhosts = function() {
-    if (!this._dragGhosts) {
-      return;
-    }
-
-    var self = this;
-    var frameOffset = this._view.getFrameOffset();
-    var lineGroupsById = this._lineGroups.getLineGroupsById();
-
-    this._dragGhosts.forEach(function(item) {
-      var sourceGroup = self._sourcesGroup[item.sourceId];
-
-      if (!sourceGroup || !item.ghost) {
-        return;
-      }
-
-      // Use current source times (updated during drag)
-      var sourceData = sourceGroup.getSource();
-      var x = self._view.timeToPixels(sourceData.startTime) - frameOffset;
-
-      item.ghost.x(x);
-
-      // Update Y position based on line
-      var lineGroup = lineGroupsById[sourceData.lineId];
-
-      if (lineGroup) {
-        item.ghost.y(lineGroup.y());
-      }
-    });
-  };
-
   /**
    * Updates source times during drag using initial positions.
    *
@@ -815,17 +730,9 @@ define([
         // Get Y position from line group before moving
         var absoluteY = sourceGroup.getAbsoluteY();
 
-        // Move to drag layer
-        sourceGroup.moveTo(this._dragLayer);
+        // Move to drag group
+        sourceGroup.moveTo(this._dragGroup);
         sourceGroup.y(absoluteY);
-
-        // Create ghost preview for this source
-        var ghost = this._createDragGhost(sourceGroup);
-
-        this._dragGhosts.push({
-          ghost: ghost,
-          sourceId: source.id
-        });
       }
     }
 

package/src/view.js

@@ -345,46 +345,72 @@ define([
    * @param {Function} [updateWhileNotScrolling] Called when not scrolling.
    */
   View.prototype.updateWithAutoScroll = function(updateWhileScrolling,
-    updateWhileNotScrolling) {
+    updateWhileNotScrolling,
+    enableVerticalAutoScroll) {
     var self = this;
 
     var pointer = this.getPointerPosition();
     var pointerX = pointer ? pointer.x : null;
+    var pointerY = pointer ? pointer.y : null;
     var viewWidth = this.getWidth();
+    var viewHeight = this.getHeight();
     var thresholdPx = Math.round(this._peaks.options.autoScrollThreshold * viewWidth);
+    var thresholdPy = Math.round(this._peaks.options.autoScrollThreshold * viewHeight);
 
     var MAX_AUTO_SCROLL_PX_PER_FRAME = 30;
     var NOMINAL_FRAME_MS = 16.67; // ~60fps
 
-    function getAutoScrollVelocity(pointerXValue) {
-      if (typeof pointerXValue !== 'number' || thresholdPx <= 0) {
+    function getAutoScrollVelocity(pointerValue, threshold, size) {
+      if (typeof pointerValue !== 'number' || threshold <= 0 || size <= 0) {
         return 0;
       }
 
-      if (pointerXValue < thresholdPx) {
+      if (pointerValue < threshold) {
         return Math.round(
-          -MAX_AUTO_SCROLL_PX_PER_FRAME * Math.min(1, (thresholdPx - pointerXValue) / thresholdPx)
+          -MAX_AUTO_SCROLL_PX_PER_FRAME * Math.min(1, (threshold - pointerValue) / threshold)
         );
       }
-      if (pointerXValue > viewWidth - thresholdPx) {
+      if (pointerValue > size - threshold) {
         return Math.round(
           MAX_AUTO_SCROLL_PX_PER_FRAME
-          * Math.min(1, (pointerXValue - (viewWidth - thresholdPx)) / thresholdPx)
+          * Math.min(1, (pointerValue - (size - threshold)) / threshold)
         );
       }
       return 0;
     }
 
-    var velocityPxPerFrame = getAutoScrollVelocity(pointerX);
+    var velocityXPerFrame = getAutoScrollVelocity(pointerX, thresholdPx, viewWidth);
+
+    var verticalScrollingEnabled = Boolean(enableVerticalAutoScroll
+      && this._peaks.options.enableVerticalScrolling);
+
+    var maxFrameOffsetY = 0;
+
+    if (verticalScrollingEnabled) {
+      maxFrameOffsetY = this.getFullHeight() - viewHeight;
+      if (!Number.isFinite(maxFrameOffsetY) || maxFrameOffsetY < 0) {
+        maxFrameOffsetY = 0;
+      }
+    }
+
+    var velocityYPerFrame = verticalScrollingEnabled && maxFrameOffsetY > 0 ?
+      getAutoScrollVelocity(pointerY, thresholdPy, viewHeight) :
+      0;
 
     // For left scroll (negative), only scroll if we can actually move left.
     // For right scroll (positive), allow scrolling (timeline can extend).
-    var canScroll = velocityPxPerFrame > 0 || (velocityPxPerFrame < 0 && self.getFrameOffset() > 0);
+    var canScrollX = velocityXPerFrame > 0 || (velocityXPerFrame < 0 && self.getFrameOffset() > 0);
+    var canScrollY = verticalScrollingEnabled && maxFrameOffsetY > 0 && (
+      (velocityYPerFrame > 0 && self.getFrameOffsetY() < maxFrameOffsetY)
+      || (velocityYPerFrame < 0 && self.getFrameOffsetY() > 0)
+    );
 
-    // Keep the current velocity on the instance for debugging/inspection.
-    this._limited = velocityPxPerFrame;
+    // Keep the current velocities on the instance for debugging/inspection.
+    this._autoScrollVelocityX = velocityXPerFrame;
+    this._autoScrollVelocityY = velocityYPerFrame;
 
-    if (velocityPxPerFrame !== 0 && canScroll) {
+    if ((velocityXPerFrame !== 0 && canScrollX)
+      || (velocityYPerFrame !== 0 && canScrollY)) {
       if (!this._scrollingRafId) {
         var lastTime = performance.now();
 
@@ -393,23 +419,64 @@ define([
             return;
           }
 
+          var xVel = self._autoScrollVelocityX || 0;
+          var yVel = self._autoScrollVelocityY || 0;
+
+          var canContinueX = xVel > 0 || (xVel < 0 && self.getFrameOffset() > 0);
+          var maxY = 0;
+          var canContinueY = false;
+
+          if (verticalScrollingEnabled) {
+            maxY = self.getFullHeight() - self.getHeight();
+            if (!Number.isFinite(maxY) || maxY < 0) {
+              maxY = 0;
+            }
+
+            canContinueY = maxY > 0 && (
+              (yVel > 0 && self.getFrameOffsetY() < maxY)
+              || (yVel < 0 && self.getFrameOffsetY() > 0)
+            );
+          }
+
+          if ((xVel === 0 || !canContinueX)
+            && (yVel === 0 || !canContinueY)) {
+            self.stopAutoScroll();
+            updateWhileScrolling();
+            return;
+          }
+
           // Calculate time delta for consistent scroll speed regardless of frame rate
           var deltaTime = currentTime - lastTime;
-          var scrollAmount = Math.round(self._limited * deltaTime / NOMINAL_FRAME_MS);
+          var scrollAmountX = Math.round(xVel * deltaTime / NOMINAL_FRAME_MS);
+          var scrollAmountY = Math.round(yVel * deltaTime / NOMINAL_FRAME_MS);
 
           lastTime = currentTime;
 
-          var newOffset = self.getFrameOffset() + scrollAmount;
+          var newOffsetX = self.getFrameOffset() + scrollAmountX;
+          var newOffsetY = self.getFrameOffsetY() + scrollAmountY;
 
-          if (newOffset < 0) {
-            self.updateTimeline(0);
-            self._scrollingRafId = null;
+          if (newOffsetX < 0) {
+            newOffsetX = 0;
+          }
+
+          if (verticalScrollingEnabled) {
+            if (newOffsetY < 0) {
+              newOffsetY = 0;
+            }
+            else if (newOffsetY > maxY) {
+              newOffsetY = maxY;
+            }
+          }
+
+          if (!verticalScrollingEnabled) {
+            self.updateTimeline(newOffsetX);
           }
           else {
-            self.updateTimeline(newOffset);
-            updateWhileScrolling();
-            self._scrollingRafId = requestAnimationFrame(scrollFrame);
+            self.updateTimeline(newOffsetX, newOffsetY);
           }
+
+          updateWhileScrolling();
+          self._scrollingRafId = requestAnimationFrame(scrollFrame);
         }
 
         self._scrollingRafId = requestAnimationFrame(scrollFrame);