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

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) {
@@ -146,22 +155,22 @@ define([
     const frameEndTime   = this._view.pixelsToTime(frameOffset + width);
     var redraw = false;
     var isSourceGroupHovered = false;
-    var isSourceGroupActive = false;
+    var isSourceGroupDragged = false;
 
     if (sourceGroup) {
       isSourceGroupHovered = sourceGroup.isHovered();
-      isSourceGroupActive = sourceGroup.isActive();
+      isSourceGroupDragged = sourceGroup.isDragged();
       this._destroySourceGroup(source);
       redraw = true;
     }
 
-    if (source.isVisible(frameStartTime, frameEndTime) || isSourceGroupActive) {
+    if (source.isVisible(frameStartTime, frameEndTime) || isSourceGroupDragged) {
       const newSourceGroup = this._addSourceGroup(source);
 
       if (isSourceGroupHovered) {
         newSourceGroup.startHover();
       }
-      if (isSourceGroupActive) {
+      if (isSourceGroupDragged) {
         newSourceGroup.startDrag();
       }
       redraw = true;
@@ -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];
@@ -438,7 +429,6 @@ define([
         if (sourceGroup) {
           // Clear dragging state before moving back to line group
           sourceGroup.setDragging(false);
-          sourceGroup.prepareDragEnd();
           // Move source back to its line group (it was moved to layer during drag)
           self._lineGroups.addSource(source, sourceGroup);
           // Reset Y position to 0 relative to parent line group
@@ -453,19 +443,15 @@ define([
     this._draggedElementId = null;
 
     this.refresh();
-    this._view.batchDrawSourcesLayer();
-    this._view.updateTimelineLength();
-
-    this._peaks.emit('sources.updated', updatedSources);
+    this.processSourceUpdates(updatedSources);
   };
 
   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,14 +549,18 @@ define([
       mousePosY
     );
 
-    this._updateDragGhosts();
-
     if (shouldRedraw) {
       this.batchDraw();
-      this._dragLayer.batchDraw();
     }
   };
 
+  SourcesLayer.prototype.processSourceUpdates = function(updatedSources) {
+    this._view.batchDrawSourcesLayer();
+    this._view.updateTimelineLength();
+
+    this._peaks.emit('sources.updated', updatedSources);
+  };
+
   SourcesLayer.prototype.findSources = function(startTime, endTime) {
     var sources = this._peaks.sourceHandler.find(startTime, endTime);
     var lineIds = this._lineGroups.getVisibleLines();
@@ -582,78 +572,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.
    *
@@ -745,7 +663,7 @@ define([
     this.refresh();
   };
 
-  // TODO: This assumes that no sources between the start and the end are unselected
+  // WARNING: This assumes that no sources between the start and the end are unselected
   SourcesLayer.prototype.manageSourceMovements = function(sources, newStartTime, newEndTime, orderable, mouseX,
     mouseY
   ) {
@@ -815,17 +733,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
-        });
       }
     }
 
@@ -849,7 +759,10 @@ define([
       if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
         var sourceGroup = this._sourcesGroup[sourceId];
 
-        if (!sourceGroup.isActive()) {
+        if (sourceGroup.isActive()) {
+          sourceGroup.update();
+        }
+        else {
           var source = this._sourcesGroup[sourceId].getSource();
 
           if (!this._isSourceVisible(source, startTime, endTime)) {

package/src/components/waveform-shape.js

@@ -51,64 +51,102 @@ define(['../utils', 'konva'], function(Utils, Konva) {
 
   function WaveformShape(options) {
     const shape = new Konva.Shape({
-      fill: options.source.color
+      fill: options.color,
+      listening: false
     });
 
     Object.assign(this, shape);
 
-    this._layer = options.layer;
     this._view = options.view;
-    this._source = options.source;
     this._height = options.height;
-    this._url = options.url + '-scaled';
+    this._waveformDataFunc = options.waveformDataFunc;
 
-    this.sceneFunc(this._sceneFunc);
+    this.sceneFunc(function(context) {
+      var waveformPoints = this._waveformDataFunc ? this._waveformDataFunc() : null;
 
-    this.hitFunc(this._waveformShapeHitFunc);
+      this._sceneFunc(context, waveformPoints);
+    });
   }
 
   WaveformShape.prototype = Object.create(Konva.Shape.prototype);
 
-  WaveformShape.prototype._sceneFunc = function(context) {
-    var width = this._view.getWidth();
-    var waveformData = this._layer.getLoadedData(this._url).data;
+  WaveformShape.prototype._sceneFunc = function(context, waveformPoints) {
+    if (!waveformPoints) {
+      return;
+    }
 
-    var startPixel = 0, startOffset = 0, endPixel = width, targetSpeed = 1.0;
+    var xPoints = [];
+    var minByChannel = [];
+    var maxByChannel = [];
+    var channels = 0;
 
-    if (this._source) {
-      targetSpeed = this._source.targetSpeed || 1.0;
+    this._forEachWaveformPoint(waveformPoints, function(point) {
+      if (!point || !point.min || !point.max) {
+        return;
+      }
 
-      startPixel = Math.floor(
-        (this._view.timeToPixels(this._source.mediaStartTime) + Math.max(
-          this._view.getFrameOffset() - this._view.timeToPixels(this._source.startTime),
-          0
-        )) * targetSpeed
-      );
+      if (channels === 0) {
+        channels = point.min.length;
+        for (var c = 0; c < channels; c++) {
+          minByChannel[c] = [];
+          maxByChannel[c] = [];
+        }
+      }
 
-      startOffset = this._view.timeToPixels(this._source.mediaStartTime);
-
-      endPixel = Math.min(
-        Math.ceil(
-          (this._view.timeToPixels(this._source.mediaEndTime) - Math.max(
-            this._view.timeToPixels(this._source.endTime)
-              - this._view.getFrameOffset()
-              - this._view.getWidth(),
-            0
-          )) * targetSpeed
-        ),
-        waveformData.length
-      );
+      xPoints.push(point.x);
+
+      for (var i = 0; i < channels; i++) {
+        minByChannel[i].push(point.min[i]);
+        maxByChannel[i].push(point.max[i]);
+      }
+    });
+
+    if (channels === 0 || xPoints.length === 0) {
+      return;
+    }
+
+    this._drawWaveformFromPoints(context, xPoints, minByChannel, maxByChannel, channels, this._height);
+  };
+
+  WaveformShape.prototype._forEachWaveformPoint = function(waveformPoints, callback) {
+    if (!waveformPoints) {
+      return;
+    }
+
+    // Support iterators ({ next() }) without requiring Symbol.iterator.
+    if (typeof waveformPoints.next === 'function') {
+      while (true) {
+        var result = waveformPoints.next();
+
+        if (!result || result.done) {
+          break;
+        }
+        callback(result.value);
+      }
+      return;
+    }
+
+    // Support ES6 iterables if available.
+    if (typeof Symbol !== 'undefined' && waveformPoints[Symbol.iterator]) {
+      var iterator = waveformPoints[Symbol.iterator]();
+
+      while (true) {
+        var iterResult = iterator.next();
+
+        if (iterResult.done) {
+          break;
+        }
+        callback(iterResult.value);
+      }
+      return;
     }
 
-    this._drawWaveform(
-      context,
-      waveformData,
-      startPixel,
-      startOffset,
-      endPixel,
-      targetSpeed,
-      this._height
-    );
+    // Fallback for arrays.
+    if (Array.isArray(waveformPoints)) {
+      for (var i = 0; i < waveformPoints.length; i++) {
+        callback(waveformPoints[i]);
+      }
+    }
   };
 
   /**
@@ -126,10 +164,14 @@ define(['../utils', 'konva'], function(Utils, Konva) {
    * @param {Number} height The height of the waveform area, in pixels.
    */
 
-  WaveformShape.prototype._drawWaveform = function(context, waveformData,
-    startPixel, startOffset, endPixel, targetSpeed, height) {
-    var channels = waveformData.channels;
-
+  WaveformShape.prototype._drawWaveformFromPoints = function(
+    context,
+    xPoints,
+    minByChannel,
+    maxByChannel,
+    channels,
+    height
+  ) {
     var waveformTop = 0;
     var waveformHeight = Math.floor(height / channels);
 
@@ -138,81 +180,35 @@ define(['../utils', 'konva'], function(Utils, Konva) {
         waveformHeight = height - (channels - 1) * waveformHeight;
       }
 
-      this._drawChannel(
+      this._drawChannelFromPoints(
         context,
-        waveformData.channel(i),
-        startPixel,
-        startOffset,
-        endPixel,
+        xPoints,
+        minByChannel[i],
+        maxByChannel[i],
         waveformTop,
-        waveformHeight,
-        targetSpeed
+        waveformHeight
       );
 
       waveformTop += waveformHeight;
     }
   };
 
-  WaveformShape.prototype._drawChannel = function(context, channel,
-    startPixel, startOffset, endPixel, top, height, targetSpeed) {
-    var x, val;
-
+  WaveformShape.prototype._drawChannelFromPoints = function(context, xPoints, minValues, maxValues, top, height) {
     var amplitudeScale = this._view.getAmplitudeScale();
 
     context.beginPath();
 
-    for (x = startPixel; x < endPixel; x++) {
-      val = channel.min_sample(x);
-
-      context.lineTo(x / targetSpeed - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+    for (var i = 0; i < xPoints.length; i++) {
+      context.lineTo(xPoints[i], top + scaleY(minValues[i], height, amplitudeScale) + 0.5);
     }
 
-    for (x = endPixel - 1; x >= startPixel; x--) {
-      val = channel.max_sample(x);
-
-      context.lineTo(x / targetSpeed - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+    for (var j = xPoints.length - 1; j >= 0; j--) {
+      context.lineTo(xPoints[j], top + scaleY(maxValues[j], height, amplitudeScale) + 0.5);
     }
 
     context.closePath();
-
     context.fillShape(this);
   };
 
-  WaveformShape.prototype._waveformShapeHitFunc = function(context) {
-    if (!this._source) {
-      return;
-    }
-
-    var frameOffset = this._view.getFrameOffset();
-    var viewWidth = this._view.getWidth();
-
-    var startPixels = this._view.timeToPixels(this._source.startTime);
-    var endPixels   = this._view.timeToPixels(this._source.endTime);
-
-    var offsetY = 10;
-    var hitRectHeight = this._height;
-
-    if (hitRectHeight < 0) {
-      hitRectHeight = 0;
-    }
-
-    var hitRectLeft = startPixels - frameOffset;
-    var hitRectWidth = endPixels - startPixels;
-
-    if (hitRectLeft < 0) {
-      hitRectWidth -= -hitRectLeft;
-      hitRectLeft = 0;
-    }
-
-    if (hitRectLeft + hitRectWidth > viewWidth) {
-      hitRectWidth -= hitRectLeft + hitRectWidth - viewWidth;
-    }
-
-    context.beginPath();
-    context.rect(hitRectLeft, offsetY, hitRectWidth, hitRectHeight);
-    context.closePath();
-    context.fillStrokeShape(this);
-  };
-
   return WaveformShape;
 });