@checksub_team/peaks_timeline 2.3.0-alpha.3 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "2.3.0-alpha.3",
+  "version": "2.3.1",
   "description": "JavaScript UI component for displaying audio waveforms",
   "main": "./peaks.js",
   "types": "./peaks.js.d.ts",

package/peaks.js

@@ -19663,6 +19663,7 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         this._rescaleVersion = 0;
         this._throttledBatchDraw = this._invoker.throttleTrailing(this._layer.batchDraw.bind(this._layer));
         this._drawPending = false;
+        this._suppressDragLifecycleForSourceId = null;
         this._peaks.on('handler.sources.add', this._onSourcesAdd.bind(this));
         this._peaks.on('handler.sources.destroy', this._onSourcesDestroy.bind(this));
         this._peaks.on('handler.sources.show', this._onSourcesShow.bind(this));
@@ -19727,9 +19728,22 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         var redraw = false;
         var isSourceGroupHovered = false;
         var isSourceGroupDragged = false;
+        var isActiveDraggedSource = false;
+        var draggedAbsPos = null;
+        var pointerPos = null;
         if (sourceGroup) {
             isSourceGroupHovered = sourceGroup.isHovered();
             isSourceGroupDragged = sourceGroup.isDragged();
+            isActiveDraggedSource = Boolean(isSourceGroupDragged && this.isDragInProgress() && this._draggedElementId && this._draggedElementId === source.id);
+            if (isSourceGroupDragged) {
+                draggedAbsPos = sourceGroup.absolutePosition();
+            }
+            if (isActiveDraggedSource) {
+                pointerPos = this._view.getPointerPosition();
+                this._suppressDragLifecycleForSourceId = source.id;
+                sourceGroup.stopDrag();
+                sourceGroup.setDragging(false);
+            }
             this._destroySourceGroup(source);
             redraw = true;
         }
@@ -19739,10 +19753,27 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
                 newSourceGroup.startHover();
             }
             if (isSourceGroupDragged) {
-                newSourceGroup.startDrag();
+                newSourceGroup.setDragging(true);
+                if (draggedAbsPos) {
+                    newSourceGroup.moveTo(this._dragGroup);
+                    newSourceGroup.absolutePosition(draggedAbsPos);
+                }
+                if (isActiveDraggedSource) {
+                    if (pointerPos && draggedAbsPos) {
+                        this._dragOffsetX = draggedAbsPos.x - pointerPos.x;
+                        this._dragOffsetY = draggedAbsPos.y - pointerPos.y;
+                    } else {
+                        this._dragOffsetX = undefined;
+                        this._dragOffsetY = undefined;
+                    }
+                    newSourceGroup.startDrag();
+                }
             }
             redraw = true;
         }
+        if (this._suppressDragLifecycleForSourceId === source.id) {
+            this._suppressDragLifecycleForSourceId = null;
+        }
         if (redraw) {
             this.updateSources(frameStartTime, frameEndTime);
         }
@@ -19850,9 +19881,25 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             this.batchDraw();
         }
     };
+    SourcesLayer.prototype.isDragInProgress = function () {
+        return this._draggedElements && this._draggedElements.length > 0;
+    };
+    SourcesLayer.prototype.cleanupAfterDrag = function () {
+        this._initialSourcePositions = null;
+        this._dragOffsetX = undefined;
+        this._dragOffsetY = undefined;
+        this._draggedElements = null;
+        this._draggedElementId = null;
+        this._draggedElementsData = null;
+    };
     SourcesLayer.prototype.onSourcesGroupDragStart = function (element) {
-        this._initialTimeOffset = this._view.getTimeOffset();
+        if (this._suppressDragLifecycleForSourceId && element && element.currentTarget && element.currentTarget.attrs && element.currentTarget.attrs.sourceId === this._suppressDragLifecycleForSourceId) {
+            return;
+        }
         this._mouseDownX = this._view.getPointerPosition().x;
+        this._initialTimeOffset = this._view.getTimeOffset();
+        this._dragOffsetX = undefined;
+        this._dragOffsetY = undefined;
         this._draggedElementId = element.currentTarget.attrs.sourceId;
         var selectedElements = this._view.getSelectedElements();
         const shouldDragSelectedElements = Object.keys(selectedElements).includes(this._draggedElementId);
@@ -19891,11 +19938,11 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             }
         });
     };
-    SourcesLayer.prototype.onSourcesGroupDragEnd = function () {
+    SourcesLayer.prototype.onSourcesGroupDragEnd = function (element) {
+        if (this._suppressDragLifecycleForSourceId && element && element.currentTarget && element.currentTarget.attrs && element.currentTarget.attrs.sourceId === this._suppressDragLifecycleForSourceId) {
+            return;
+        }
         var self = this;
-        this._initialSourcePositions = null;
-        this._dragOffsetX = undefined;
-        this._dragOffsetY = undefined;
         const updatedSources = this._draggedElements.map(function (source) {
             const sourceGroup = self._sourcesGroup[source.id];
             if (sourceGroup) {
@@ -19905,10 +19952,85 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             }
             return source;
         });
-        this._draggedElementId = null;
+        this.cleanupAfterDrag();
         this.refresh();
         this.processSourceUpdates(updatedSources);
     };
+    SourcesLayer.prototype._getInitialPixelOffsetFromClickedSource = function (draggedSourceId, clickedInitialPixelX) {
+        if (!this._initialSourcePositions) {
+            return null;
+        }
+        var initialPos = this._initialSourcePositions[draggedSourceId];
+        if (!initialPos) {
+            return null;
+        }
+        var initialPixelX = this._view.timeToPixels(initialPos.startTime);
+        return initialPixelX - clickedInitialPixelX;
+    };
+    SourcesLayer.prototype._maybeCreateDraggedSourceGroupInViewport = function (draggedSource, clickedSourceX, clickedSourceY, clickedInitialPixelX, viewWidth) {
+        if (!draggedSource || this._sourcesGroup[draggedSource.id]) {
+            return false;
+        }
+        var pixelOffset = this._getInitialPixelOffsetFromClickedSource(draggedSource.id, clickedInitialPixelX);
+        if (pixelOffset === null) {
+            return false;
+        }
+        var absX = clickedSourceX + pixelOffset;
+        var width = this._view.timeToPixels(draggedSource.endTime - draggedSource.startTime);
+        if (absX > viewWidth || absX + width < 0) {
+            return false;
+        }
+        var createdGroup = this._addSourceGroup(draggedSource);
+        createdGroup.setDragging(true);
+        createdGroup.moveTo(this._dragGroup);
+        createdGroup.absolutePosition({
+            x: absX,
+            y: clickedSourceY
+        });
+        return true;
+    };
+    SourcesLayer.prototype._createMissingDraggedSourceGroupsInViewport = function (clickedSourceX, clickedSourceY) {
+        if (!this._draggedElements || this._draggedElements.length <= 1 || !this._initialSourcePositions || !this._draggedElementId || !this._initialSourcePositions[this._draggedElementId]) {
+            return;
+        }
+        var clickedInitialPos = this._initialSourcePositions[this._draggedElementId];
+        var clickedInitialPixelX = this._view.timeToPixels(clickedInitialPos.startTime);
+        var viewWidth = this._view.getWidth();
+        for (var i = 0; i < this._draggedElements.length; i++) {
+            var draggedSource = this._draggedElements[i];
+            if (draggedSource && draggedSource.id !== this._draggedElementId) {
+                this._maybeCreateDraggedSourceGroupInViewport(draggedSource, clickedSourceX, clickedSourceY, clickedInitialPixelX, viewWidth);
+            }
+        }
+    };
+    SourcesLayer.prototype._positionSecondaryDraggedSourceGroups = function (clickedSourceX, clickedSourceY) {
+        if (!this._draggedElements || this._draggedElements.length <= 1 || !this._initialSourcePositions) {
+            return;
+        }
+        var clickedInitialPos = this._initialSourcePositions[this._draggedElementId];
+        if (!clickedInitialPos) {
+            return;
+        }
+        var clickedInitialPixelX = this._view.timeToPixels(clickedInitialPos.startTime);
+        var self = this;
+        this._draggedElements.forEach(function (source) {
+            if (source.id === self._draggedElementId) {
+                return;
+            }
+            var sourceGroup = self._sourcesGroup[source.id];
+            if (!sourceGroup) {
+                return;
+            }
+            var pixelOffset = self._getInitialPixelOffsetFromClickedSource(source.id, clickedInitialPixelX);
+            if (pixelOffset === null) {
+                return;
+            }
+            sourceGroup.absolutePosition({
+                x: clickedSourceX + pixelOffset,
+                y: clickedSourceY
+            });
+        });
+    };
     SourcesLayer.prototype.onSourcesGroupDrag = function (draggedElement) {
         var pointerPos = this._view.getPointerPosition();
         this._view.updateWithAutoScroll(this._dragSourcesGroup.bind(this), null, true);
@@ -19927,29 +20049,8 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             }
             var clickedSourceX = mouseX + offsetX;
             var clickedSourceY = mouseY + offsetY;
-            if (this._draggedElements && this._draggedElements.length > 1 && this._initialSourcePositions) {
-                var self = this;
-                var clickedInitialPos = this._initialSourcePositions[this._draggedElementId];
-                if (clickedInitialPos) {
-                    var clickedInitialPixelX = this._view.timeToPixels(clickedInitialPos.startTime);
-                    this._draggedElements.forEach(function (source) {
-                        if (source.id !== self._draggedElementId) {
-                            var sourceGroup = self._sourcesGroup[source.id];
-                            if (sourceGroup) {
-                                var initialPos = self._initialSourcePositions[source.id];
-                                if (initialPos) {
-                                    var initialPixelX = self._view.timeToPixels(initialPos.startTime);
-                                    var pixelOffset = initialPixelX - clickedInitialPixelX;
-                                    sourceGroup.absolutePosition({
-                                        x: clickedSourceX + pixelOffset,
-                                        y: clickedSourceY
-                                    });
-                                }
-                            }
-                        }
-                    });
-                }
-            }
+            this._createMissingDraggedSourceGroupsInViewport(clickedSourceX, clickedSourceY);
+            this._positionSecondaryDraggedSourceGroups(clickedSourceX, clickedSourceY);
             return {
                 x: clickedSourceX,
                 y: clickedSourceY
@@ -20007,38 +20108,40 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         });
     };
     SourcesLayer.prototype._applyTimeChangesToSources = function (sources, initialStartTime, newStartTime, newEndTime) {
+        if (!sources || sources.length === 0) {
+            return;
+        }
         if (sources.length === 1) {
             sources[0].updateTimes(newStartTime, newEndTime);
-        } else {
-            var canUseInitialPositions = Boolean(this._initialSourcePositions && this._initialSourcePositions[sources[0].id]);
-            if (canUseInitialPositions) {
-                for (var i = 0; i < sources.length; i++) {
-                    if (!this._initialSourcePositions[sources[i].id]) {
-                        canUseInitialPositions = false;
-                        break;
-                    }
+            return;
+        }
+        if (typeof newStartTime !== 'number') {
+            return;
+        }
+        if (this.isDragInProgress() && this._draggedElementsData && this._initialSourcePositions && typeof this._draggedElementsData.initialStartTime === 'number' && isFinite(this._draggedElementsData.initialStartTime)) {
+            var timeDiffFromDragStart = Utils.roundTime(newStartTime - this._draggedElementsData.initialStartTime);
+            for (var d = 0; d < sources.length; d++) {
+                var draggedSource = sources[d];
+                var initialPos = this._initialSourcePositions[draggedSource.id];
+                if (!initialPos) {
+                    this._initialSourcePositions[draggedSource.id] = {
+                        startTime: draggedSource.startTime,
+                        endTime: draggedSource.endTime,
+                        lineId: draggedSource.lineId
+                    };
+                    initialPos = this._initialSourcePositions[draggedSource.id];
                 }
+                draggedSource.updateTimes(Utils.roundTime(initialPos.startTime + timeDiffFromDragStart), Utils.roundTime(initialPos.endTime + timeDiffFromDragStart));
             }
-            if (canUseInitialPositions) {
-                var firstInitial = this._initialSourcePositions[sources[0].id];
-                var timeDiffFromInitial = Utils.roundTime(newStartTime - firstInitial.startTime);
-                if (timeDiffFromInitial !== 0) {
-                    var self = this;
-                    sources.forEach(function (source) {
-                        var initialPos = self._initialSourcePositions[source.id];
-                        source.updateTimes(Utils.roundTime(initialPos.startTime + timeDiffFromInitial), Utils.roundTime(initialPos.endTime + timeDiffFromInitial));
-                    });
-                }
-            } else {
-                const timeDiff = Utils.roundTime(newStartTime - initialStartTime);
-                if (timeDiff !== 0) {
-                    sources.forEach(function (source) {
-                        source.updateTimes(Utils.roundTime(source.startTime + timeDiff), Utils.roundTime(source.endTime + timeDiff));
-                    });
-                }
+            return;
+        }
+        var timeDiff = Utils.roundTime(newStartTime - initialStartTime);
+        if (timeDiff !== 0) {
+            for (var s = 0; s < sources.length; s++) {
+                var source = sources[s];
+                source.updateTimes(Utils.roundTime(source.startTime + timeDiff), Utils.roundTime(source.endTime + timeDiff));
             }
         }
-        this.refresh();
     };
     SourcesLayer.prototype.manageSourceMovements = function (sources, newStartTime, newEndTime, orderable, mouseX, mouseY) {
         newStartTime = typeof newStartTime === 'number' ? Utils.roundTime(newStartTime) : newStartTime;
@@ -20052,6 +20155,7 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         ({newStartTime, newEndTime} = this.manageCollision(sources, newStartTime, newEndTime));
         this._applyTimeChangesToSources(sources, sources[0].startTime, newStartTime, newEndTime);
         this._view.setTimelineLength(this._view.timeToPixels(sources[sources.length - 1].endTime) + this._view.getWidth());
+        this.refresh();
         return true;
     };
     SourcesLayer.prototype.manageVerticalPosition = function (sources, startTime, endTime, mouseX, mouseY) {
@@ -20074,16 +20178,25 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             sourceGroup = this._addSourceGroup(source);
             isNewlyCreated = true;
         }
-        if (isNewlyCreated && this._draggedElements && this._initialSourcePositions) {
-            var isDraggedSource = this._draggedElements.some(function (s) {
-                return s.id === source.id;
-            });
-            if (isDraggedSource) {
-                sourceGroup.setDragging(true);
-                var absoluteY = sourceGroup.getAbsoluteY();
-                sourceGroup.moveTo(this._dragGroup);
-                sourceGroup.y(absoluteY);
+        if (isNewlyCreated && this._initialSourcePositions && this._initialSourcePositions[source.id]) {
+            sourceGroup.setDragging(true);
+            var targetAbsPos = sourceGroup.absolutePosition();
+            var clickedId = this._draggedElementId;
+            var clickedGroup = clickedId ? this._sourcesGroup[clickedId] : null;
+            var clickedInitial = clickedId && this._initialSourcePositions ? this._initialSourcePositions[clickedId] : null;
+            var currentInitial = this._initialSourcePositions[source.id];
+            if (clickedGroup && clickedInitial && currentInitial) {
+                var clickedAbsPos = clickedGroup.absolutePosition();
+                var clickedInitialPixelX = this._view.timeToPixels(clickedInitial.startTime);
+                var currentInitialPixelX = this._view.timeToPixels(currentInitial.startTime);
+                var pixelOffset = currentInitialPixelX - clickedInitialPixelX;
+                targetAbsPos = {
+                    x: clickedAbsPos.x + pixelOffset,
+                    y: clickedAbsPos.y
+                };
             }
+            sourceGroup.moveTo(this._dragGroup);
+            sourceGroup.absolutePosition(targetAbsPos);
         }
         return sourceGroup;
     };

package/src/components/sources-layer.js

@@ -66,6 +66,10 @@ define([
     // Pending draw flag to coalesce multiple draw requests
     this._drawPending = false;
 
+    // Used to suppress drag lifecycle callbacks when a dragged source is
+    // temporarily stopped/restarted as part of a rebuild.
+    this._suppressDragLifecycleForSourceId = null;
+
     this._peaks.on('handler.sources.add', this._onSourcesAdd.bind(this));
     this._peaks.on('handler.sources.destroy', this._onSourcesDestroy.bind(this));
     this._peaks.on('handler.sources.show', this._onSourcesShow.bind(this));
@@ -156,10 +160,44 @@ define([
     var redraw = false;
     var isSourceGroupHovered = false;
     var isSourceGroupDragged = false;
+    var isActiveDraggedSource = false;
+
+    // If a source is updated while being dragged, we still want the update to apply.
+    // But destroying a node mid-drag without stopping the drag can leave an orphaned
+    // visual on Konva's drag layer. So we stop drag, rebuild, and resume.
+    var draggedAbsPos = null;
+    var pointerPos = null;
 
     if (sourceGroup) {
       isSourceGroupHovered = sourceGroup.isHovered();
       isSourceGroupDragged = sourceGroup.isDragged();
+
+       // Only the actively mouse-dragged source should have its Konva drag
+       // stopped/restarted. Secondary sources in a multi-drag are positioned
+       // manually (absolutePosition) and should not be put into Konva's drag
+       // layer.
+      isActiveDraggedSource = Boolean(
+        isSourceGroupDragged
+        && this.isDragInProgress()
+        && this._draggedElementId
+        && this._draggedElementId === source.id
+      );
+
+      if (isSourceGroupDragged) {
+        draggedAbsPos = sourceGroup.absolutePosition();
+      }
+
+      if (isActiveDraggedSource) {
+        pointerPos = this._view.getPointerPosition();
+
+        // Ensure Konva's internal drag state is cleaned up before destruction.
+        // We suppress our drag lifecycle handlers so multi-drag state isn't
+        // torn down/reinitialized for a single frame.
+        this._suppressDragLifecycleForSourceId = source.id;
+        sourceGroup.stopDrag();
+        sourceGroup.setDragging(false);
+      }
+
       this._destroySourceGroup(source);
       redraw = true;
     }
@@ -170,12 +208,38 @@ define([
       if (isSourceGroupHovered) {
         newSourceGroup.startHover();
       }
+
       if (isSourceGroupDragged) {
-        newSourceGroup.startDrag();
+        // Put the rebuilt group back into the drag group.
+        newSourceGroup.setDragging(true);
+
+        if (draggedAbsPos) {
+          newSourceGroup.moveTo(this._dragGroup);
+          newSourceGroup.absolutePosition(draggedAbsPos);
+        }
+
+        if (isActiveDraggedSource) {
+          // Recompute offsets so the cursor-to-node relation stays stable.
+          if (pointerPos && draggedAbsPos) {
+            this._dragOffsetX = draggedAbsPos.x - pointerPos.x;
+            this._dragOffsetY = draggedAbsPos.y - pointerPos.y;
+          }
+          else {
+            this._dragOffsetX = undefined;
+            this._dragOffsetY = undefined;
+          }
+
+          // Only resume Konva drag for the active mouse-dragged source.
+          newSourceGroup.startDrag();
+        }
       }
       redraw = true;
     }
 
+    if (this._suppressDragLifecycleForSourceId === source.id) {
+      this._suppressDragLifecycleForSourceId = null;
+    }
+
     if (redraw) {
       this.updateSources(frameStartTime, frameEndTime);
     }
@@ -351,9 +415,32 @@ define([
     }
   };
 
+  SourcesLayer.prototype.isDragInProgress = function() {
+    return this._draggedElements && this._draggedElements.length > 0;
+  };
+
+  SourcesLayer.prototype.cleanupAfterDrag = function() {
+    this._initialSourcePositions = null;
+    this._dragOffsetX = undefined;
+    this._dragOffsetY = undefined;
+    this._draggedElements = null;
+    this._draggedElementId = null;
+    this._draggedElementsData = null;
+  };
+
   SourcesLayer.prototype.onSourcesGroupDragStart = function(element) {
-    this._initialTimeOffset = this._view.getTimeOffset();
+    if (this._suppressDragLifecycleForSourceId
+      && element
+      && element.currentTarget
+      && element.currentTarget.attrs
+      && element.currentTarget.attrs.sourceId === this._suppressDragLifecycleForSourceId) {
+      return;
+    }
+
     this._mouseDownX = this._view.getPointerPosition().x;
+    this._initialTimeOffset = this._view.getTimeOffset();
+    this._dragOffsetX = undefined;
+    this._dragOffsetY = undefined;
 
     this._draggedElementId = element.currentTarget.attrs.sourceId;
 
@@ -415,12 +502,16 @@ define([
     });
   };
 
-  SourcesLayer.prototype.onSourcesGroupDragEnd = function() {
-    var self = this;
+  SourcesLayer.prototype.onSourcesGroupDragEnd = function(element) {
+    if (this._suppressDragLifecycleForSourceId
+      && element
+      && element.currentTarget
+      && element.currentTarget.attrs
+      && element.currentTarget.attrs.sourceId === this._suppressDragLifecycleForSourceId) {
+      return;
+    }
 
-    this._initialSourcePositions = null;
-    this._dragOffsetX = undefined;
-    this._dragOffsetY = undefined;
+    var self = this;
 
     const updatedSources = this._draggedElements.map(
       function(source) {
@@ -440,12 +531,131 @@ define([
       }
     );
 
-    this._draggedElementId = null;
+    this.cleanupAfterDrag();
 
     this.refresh();
     this.processSourceUpdates(updatedSources);
   };
 
+  SourcesLayer.prototype._getInitialPixelOffsetFromClickedSource = function(draggedSourceId, clickedInitialPixelX) {
+    if (!this._initialSourcePositions) {
+      return null;
+    }
+
+    var initialPos = this._initialSourcePositions[draggedSourceId];
+
+    if (!initialPos) {
+      return null;
+    }
+
+    var initialPixelX = this._view.timeToPixels(initialPos.startTime);
+
+    return initialPixelX - clickedInitialPixelX;
+  };
+
+  SourcesLayer.prototype._maybeCreateDraggedSourceGroupInViewport = function(
+    draggedSource,
+    clickedSourceX,
+    clickedSourceY,
+    clickedInitialPixelX,
+    viewWidth
+  ) {
+    if (!draggedSource || this._sourcesGroup[draggedSource.id]) {
+      return false;
+    }
+
+    var pixelOffset = this._getInitialPixelOffsetFromClickedSource(draggedSource.id, clickedInitialPixelX);
+
+    if (pixelOffset === null) {
+      return false;
+    }
+
+    var absX = clickedSourceX + pixelOffset;
+    var width = this._view.timeToPixels(draggedSource.endTime - draggedSource.startTime);
+
+    // If it intersects the visible viewport, create it now.
+    if (absX > viewWidth || (absX + width) < 0) {
+      return false;
+    }
+
+    var createdGroup = this._addSourceGroup(draggedSource);
+
+    createdGroup.setDragging(true);
+    createdGroup.moveTo(this._dragGroup);
+    createdGroup.absolutePosition({
+      x: absX,
+      y: clickedSourceY
+    });
+
+    return true;
+  };
+
+  SourcesLayer.prototype._createMissingDraggedSourceGroupsInViewport = function(clickedSourceX, clickedSourceY) {
+    if (!this._draggedElements
+      || this._draggedElements.length <= 1
+      || !this._initialSourcePositions
+      || !this._draggedElementId
+      || !this._initialSourcePositions[this._draggedElementId]) {
+      return;
+    }
+
+    var clickedInitialPos = this._initialSourcePositions[this._draggedElementId];
+    var clickedInitialPixelX = this._view.timeToPixels(clickedInitialPos.startTime);
+    var viewWidth = this._view.getWidth();
+
+    for (var i = 0; i < this._draggedElements.length; i++) {
+      var draggedSource = this._draggedElements[i];
+
+      if (draggedSource && draggedSource.id !== this._draggedElementId) {
+        this._maybeCreateDraggedSourceGroupInViewport(
+          draggedSource,
+          clickedSourceX,
+          clickedSourceY,
+          clickedInitialPixelX,
+          viewWidth
+        );
+      }
+    }
+  };
+
+  SourcesLayer.prototype._positionSecondaryDraggedSourceGroups = function(clickedSourceX, clickedSourceY) {
+    if (!this._draggedElements || this._draggedElements.length <= 1 || !this._initialSourcePositions) {
+      return;
+    }
+
+    var clickedInitialPos = this._initialSourcePositions[this._draggedElementId];
+
+    if (!clickedInitialPos) {
+      return;
+    }
+
+    var clickedInitialPixelX = this._view.timeToPixels(clickedInitialPos.startTime);
+    var self = this;
+
+    this._draggedElements.forEach(function(source) {
+      if (source.id === self._draggedElementId) {
+        return;
+      }
+
+      var sourceGroup = self._sourcesGroup[source.id];
+
+      if (!sourceGroup) {
+        return;
+      }
+
+      var pixelOffset = self._getInitialPixelOffsetFromClickedSource(source.id, clickedInitialPixelX);
+
+      if (pixelOffset === null) {
+        return;
+      }
+
+      sourceGroup.absolutePosition({
+        x: clickedSourceX + pixelOffset,
+        y: clickedSourceY
+      });
+    });
+  };
+
   SourcesLayer.prototype.onSourcesGroupDrag = function(draggedElement) {
     var pointerPos = this._view.getPointerPosition();
 
@@ -473,38 +683,13 @@ define([
       var clickedSourceX = mouseX + offsetX;
       var clickedSourceY = mouseY + offsetY;
 
-      // Position all other dragged sources relative to the clicked source
-      // They should maintain their initial relative positions
-      if (this._draggedElements && this._draggedElements.length > 1 && this._initialSourcePositions) {
-        var self = this;
-        var clickedInitialPos = this._initialSourcePositions[this._draggedElementId];
-
-        if (clickedInitialPos) {
-          var clickedInitialPixelX = this._view.timeToPixels(clickedInitialPos.startTime);
-
-          this._draggedElements.forEach(function(source) {
-            if (source.id !== self._draggedElementId) {
-              var sourceGroup = self._sourcesGroup[source.id];
-
-              if (sourceGroup) {
-                var initialPos = self._initialSourcePositions[source.id];
-
-                if (initialPos) {
-                  // Calculate pixel offset from clicked source's initial position
-                  var initialPixelX = self._view.timeToPixels(initialPos.startTime);
-                  var pixelOffset = initialPixelX - clickedInitialPixelX;
-
-                  // Position this source relative to clicked source's current position
-                  sourceGroup.absolutePosition({
-                    x: clickedSourceX + pixelOffset,
-                    y: clickedSourceY
-                  });
-                }
-              }
-            }
-          });
-        }
-      }
+      // If we're dragging multiple sources, some dragged sources might not yet
+      // have a SourceGroup (they were outside the view when the drag started).
+      // Create them as soon as their on-canvas bounds intersect the viewport.
+      this._createMissingDraggedSourceGroupsInViewport(clickedSourceX, clickedSourceY);
+
+      // Position all other dragged sources relative to the clicked source.
+      this._positionSecondaryDraggedSourceGroups(clickedSourceX, clickedSourceY);
 
       return {
         x: clickedSourceX,
@@ -607,60 +792,71 @@ define([
 
   SourcesLayer.prototype._applyTimeChangesToSources = function(sources, initialStartTime, newStartTime, newEndTime
   ) {
+    if (!sources || sources.length === 0) {
+      return;
+    }
+
+    // Single-source updates can be moves or resizes; Source.updateTimes handles
+    // undefined for one side.
     if (sources.length === 1) {
-      sources[0].updateTimes(
-        newStartTime,
-        newEndTime
-      );
+      sources[0].updateTimes(newStartTime, newEndTime);
+      return;
     }
-    else {
-      // When moving multiple sources via block-drag, compute time diff from the
-      // drag-start positions to avoid cumulative drift as times are updated.
-      var canUseInitialPositions = Boolean(this._initialSourcePositions
-        && this._initialSourcePositions[sources[0].id]);
-
-      if (canUseInitialPositions) {
-        for (var i = 0; i < sources.length; i++) {
-          if (!this._initialSourcePositions[sources[i].id]) {
-            canUseInitialPositions = false;
-            break;
-          }
+
+    // Multi-source updates are treated as a block move, so we need a numeric
+    // start time to compute a delta. (Single-source resizes can pass null/undefined
+    // for one side, but that does not apply to multi-source moves.)
+    if (typeof newStartTime !== 'number') {
+      return;
+    }
+
+    // During an active drag, always compute a single delta from the drag-start
+    // bounds and apply it from the stored drag-start positions. This prevents
+    // drift/jumps when sources are rebuilt or lines are changed repeatedly
+    // without releasing the drag.
+    if (this.isDragInProgress()
+      && this._draggedElementsData
+      && this._initialSourcePositions
+      && typeof this._draggedElementsData.initialStartTime === 'number'
+      && isFinite(this._draggedElementsData.initialStartTime)) {
+      var timeDiffFromDragStart = Utils.roundTime(newStartTime - this._draggedElementsData.initialStartTime);
+
+      for (var d = 0; d < sources.length; d++) {
+        var draggedSource = sources[d];
+        var initialPos = this._initialSourcePositions[draggedSource.id];
+
+        // Be defensive: if a source enters the dragged set mid-drag (or an
+        // entry was missing), capture its baseline once to avoid drift.
+        if (!initialPos) {
+          this._initialSourcePositions[draggedSource.id] = {
+            startTime: draggedSource.startTime,
+            endTime: draggedSource.endTime,
+            lineId: draggedSource.lineId
+          };
+          initialPos = this._initialSourcePositions[draggedSource.id];
         }
+
+        draggedSource.updateTimes(
+          Utils.roundTime(initialPos.startTime + timeDiffFromDragStart),
+          Utils.roundTime(initialPos.endTime + timeDiffFromDragStart)
+        );
       }
 
-      if (canUseInitialPositions) {
-        var firstInitial = this._initialSourcePositions[sources[0].id];
-        var timeDiffFromInitial = Utils.roundTime(newStartTime - firstInitial.startTime);
+      return;
+    }
 
-        if (timeDiffFromInitial !== 0) {
-          var self = this;
+    var timeDiff = Utils.roundTime(newStartTime - initialStartTime);
 
-          sources.forEach(function(source) {
-            var initialPos = self._initialSourcePositions[source.id];
+    if (timeDiff !== 0) {
+      for (var s = 0; s < sources.length; s++) {
+        var source = sources[s];
 
-            source.updateTimes(
-              Utils.roundTime(initialPos.startTime + timeDiffFromInitial),
-              Utils.roundTime(initialPos.endTime + timeDiffFromInitial)
-            );
-          });
-        }
-      }
-      else {
-        // Fallback for non-drag multi-updates.
-        const timeDiff = Utils.roundTime(newStartTime - initialStartTime);
-
-        if (timeDiff !== 0) {
-          sources.forEach(function(source) {
-            source.updateTimes(
-              Utils.roundTime(source.startTime + timeDiff),
-              Utils.roundTime(source.endTime + timeDiff)
-            );
-          });
-        }
+        source.updateTimes(
+          Utils.roundTime(source.startTime + timeDiff),
+          Utils.roundTime(source.endTime + timeDiff)
+        );
       }
     }
-
-    this.refresh();
   };
 
   // WARNING: This assumes that no sources between the start and the end are unselected
@@ -685,6 +881,8 @@ define([
       this._view.timeToPixels(sources[sources.length - 1].endTime) + this._view.getWidth()
     );
 
+    this.refresh();
+
     return true;
   };
 
@@ -721,22 +919,35 @@ define([
 
     // If this source is being dragged and was just recreated (came back into view),
     // set it up properly for dragging
-    if (isNewlyCreated && this._draggedElements && this._initialSourcePositions) {
-      var isDraggedSource = this._draggedElements.some(function(s) {
-        return s.id === source.id;
-      });
-
-      if (isDraggedSource) {
-        // Mark as dragging
-        sourceGroup.setDragging(true);
-
-        // Get Y position from line group before moving
-        var absoluteY = sourceGroup.getAbsoluteY();
-
-        // Move to drag group
-        sourceGroup.moveTo(this._dragGroup);
-        sourceGroup.y(absoluteY);
+    if (isNewlyCreated && this._initialSourcePositions && this._initialSourcePositions[source.id]) {
+      // Mark as dragging
+      sourceGroup.setDragging(true);
+
+      // Compute where this source should be while the group drag is in progress.
+      // We prefer positioning relative to the clicked dragged source so the
+      // source appears immediately when it enters the viewport.
+      var targetAbsPos = sourceGroup.absolutePosition();
+
+      var clickedId = this._draggedElementId;
+      var clickedGroup = clickedId ? this._sourcesGroup[clickedId] : null;
+      var clickedInitial = clickedId && this._initialSourcePositions ? this._initialSourcePositions[clickedId] : null;
+      var currentInitial = this._initialSourcePositions[source.id];
+
+      if (clickedGroup && clickedInitial && currentInitial) {
+        var clickedAbsPos = clickedGroup.absolutePosition();
+        var clickedInitialPixelX = this._view.timeToPixels(clickedInitial.startTime);
+        var currentInitialPixelX = this._view.timeToPixels(currentInitial.startTime);
+        var pixelOffset = currentInitialPixelX - clickedInitialPixelX;
+
+        targetAbsPos = {
+          x: clickedAbsPos.x + pixelOffset,
+          y: clickedAbsPos.y
+        };
       }
+
+      // Move to drag group and apply the computed absolute position.
+      sourceGroup.moveTo(this._dragGroup);
+      sourceGroup.absolutePosition(targetAbsPos);
     }
 
     return sourceGroup;