@checksub_team/peaks_timeline 1.9.1-beta.3 → 1.9.1-beta.4

package/package.json

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

package/peaks.js

@@ -15721,7 +15721,6 @@ module.exports = function (Utils, Source, SourceGroup, Konva) {
         this._playheadLayer = playheadLayer;
         this._stage = stage;
         this._selectedElements = {};
-        this._currentLine = null;
         this._layer = new Konva.Layer({ listening: this._mode !== 'default' });
         this._prepareDefaultMode();
         this._onMouseClickInDefaultMode = this._onMouseClickInDefaultMode.bind(this);
@@ -15740,7 +15739,6 @@ module.exports = function (Utils, Source, SourceGroup, Konva) {
         const sources = [];
         const segments = [];
         const self = this;
-        this.deselectAll(true);
         elements.forEach(function (element) {
             self._selectedElements[element.id] = element;
             element.setSelected(true);
@@ -16265,6 +16263,7 @@ module.exports = function (Utils, Konva) {
     PlayheadLayer.prototype._onPlayheadDragStart = function () {
         this._view.enableAutoScroll(false);
         this._dragging = true;
+        this._scrollInterval = null;
     };
     PlayheadLayer.prototype._onPlayheadDragEnd = function () {
         this._view.enableAutoScroll(true);
@@ -16501,7 +16500,14 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         });
         this._shapeGroup.add(this._rectangle);
         this._shapeGroup.dragBoundFunc(function () {
-            return self._onShapeGroupDrag(this);
+            var diff = self._view.getPointerPosition().x - self._mouseDownX;
+            self._group.updateSegment(self._segment, self._initialStartPixel + diff, self._initialEndPixel + diff);
+            self._startMarker.timeUpdated(self._segment.startTime);
+            self._endMarker.timeUpdated(self._segment.endTime);
+            return {
+                x: this.absolutePosition().x,
+                y: this.absolutePosition().y
+            };
         });
         this._shapeGroup.on('mouseenter', this._onMouseEnter.bind(this));
         this._shapeGroup.on('mouseleave', this._onMouseLeave.bind(this));
@@ -16526,16 +16532,6 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         this._shapeGroup.add(this._indicatorsGroup);
         this.createIndicators();
     }
-    SegmentShape.prototype._onShapeGroupDrag = function (draggedElement) {
-        const diff = this._view.getPointerPosition().x - this._mouseDownX;
-        this._group.updateSegment(this._segment, this._initialStartPixel + diff, this._initialEndPixel + diff);
-        this._startMarker.timeUpdated(this._segment.startTime);
-        this._endMarker.timeUpdated(this._segment.endTime);
-        return {
-            x: draggedElement.absolutePosition().x,
-            y: draggedElement.absolutePosition().y
-        };
-    };
     SegmentShape.prototype._cornerRadius = function () {
         return this._segment.borderRadius !== undefined && this._segment.borderRadius !== null ? this._segment.borderRadius : SEGMENT_CORNER_RADIUS;
     };
@@ -17638,7 +17634,17 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         this._wrappedHeight = this._peaks.options.wrappedLineHeight;
         this._borderWidth = this._source.borderWidth;
         this._previewList = [];
-        this._group = new Konva.Group({ x: this._x });
+        this._group = new Konva.Group({
+            x: this._x,
+            draggable: this._source.draggable,
+            dragBoundFunc: function () {
+                return {
+                    x: this.absolutePosition().x,
+                    y: this.absolutePosition().y
+                };
+            }
+        });
+        this._group.on('dragstart', this._onSourceGroupDragStart.bind(this));
         this._group.on('mouseover', function () {
             self._view.setHoveredElement(self);
             if (self._view.getCurrentMode() === 'cut') {
@@ -17653,6 +17659,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 self.toggleResizing(true);
             }
         });
+        this._group.on('dragend', this._onSourceGroupDragEnd.bind(this));
         this._group.add(new Konva.Group());
         if (this._borderWidth) {
             this._border = new Konva.Shape({
@@ -17670,30 +17677,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         this._group.add(this._indicatorsGroup);
         this.createIndicators();
     }
-    SourceGroup.prototype.setDraggingParent = function () {
-        if (this._source.draggable) {
-            const self = this;
-            if (this._draggingParent) {
-                this._draggingParent.setAttrs({
-                    draggable: this._source.draggable,
-                    dragBoundFunc: function () {
-                        return self._onSourceGroupDrag(this);
-                    }
-                });
-                this._draggingParent.on('dragstart', this._onSourceGroupDragStart.bind(this));
-                this._draggingParent.on('dragend', this._onSourceGroupDragEnd.bind(this));
-            } else {
-                this._group.setAttrs({
-                    draggable: this._source.draggable,
-                    dragBoundFunc: function () {
-                        return self._onSourceGroupDrag(this);
-                    }
-                });
-                this._group.on('dragstart', this._onSourceGroupDragStart.bind(this));
-                this._group.on('dragend', this._onSourceGroupDragEnd.bind(this));
-            }
-        }
-    };
     SourceGroup.prototype._onSourceGroupDragStart = function () {
         this._dragged = true;
         this._mouseDownX = this._view.getPointerPosition().x;
@@ -17713,17 +17696,17 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         this._view.updateTimelineLength();
         this._peaks.emit('sources.updated', [this._source]);
     };
-    SourceGroup.prototype._updateSourceGroup = function () {
-        var mousePos = Math.min(this._view.getWidth() - this._peaks.options.autoScrollThreshold * this._view.getWidth(), Math.max(0, this._view.getPointerPosition().x));
-        var diff = mousePos - this._mouseDownX;
-        this._layer.updateSource(this._source, this._initialStartPixel + diff + (this._view.getFrameOffset() - this._initialFrameOffset), this._initialEndPixel + diff + (this._view.getFrameOffset() - this._initialFrameOffset), this._view.getPointerPosition().y);
-        this._view.setTimelineLength(this._view.timeToPixels(this._source.endTime) + this._view.getWidth());
-    };
     SourceGroup.prototype._onSourceGroupDrag = function (draggedElement) {
-        this._view.updateWithAutoScroll(this._updateSourceGroup.bind(this));
+        var self = this;
+        var pos = this._view.updateWithAutoScroll(draggedElement, function () {
+            var mousePos = Math.min(self._view.getWidth() - self._peaks.options.autoScrollThreshold * self._view.getWidth(), Math.max(0, self._view.getPointerPosition().x));
+            var diff = mousePos - self._mouseDownX;
+            self._layer.updateSource(self._source, self._initialStartPixel + diff + (self._view.getFrameOffset() - self._initialFrameOffset), self._initialEndPixel + diff + (self._view.getFrameOffset() - self._initialFrameOffset), self._view.getPointerPosition().y);
+            self._view.setTimelineLength(self._view.timeToPixels(self._source.endTime) + self._view.getWidth());
+        });
         return {
-            x: draggedElement.absolutePosition().x,
-            y: draggedElement.absolutePosition().y
+            x: pos.x,
+            y: pos.y
         };
     };
     SourceGroup.prototype._onSourceGroupHandleDrag = function (draggedElement, dragPos, leftHandle) {
@@ -17788,6 +17771,12 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 }
             });
             if (this._source.resizable) {
+                this._leftHandle.on('dragend', function () {
+                    if (this._scrollingInterval) {
+                        clearInterval(this._scrollingInterval);
+                        this._scrollingInterval = null;
+                    }
+                });
                 this._leftHandle.on('mouseover', function () {
                     self._view.setCursor('ew-resize');
                 });
@@ -17808,6 +17797,12 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 }
             });
             if (this._source.resizable) {
+                this._rightHandle.on('dragend', function () {
+                    if (this._scrollingInterval) {
+                        clearInterval(this._scrollingInterval);
+                        this._scrollingInterval = null;
+                    }
+                });
                 this._rightHandle.on('mouseover', function () {
                     self._view.setCursor('ew-resize');
                 });
@@ -17878,6 +17873,13 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         var unwrap = new Konva.Group({
             width: this._width,
             height: this._unwrappedHeight,
+            draggable: this._source.draggable,
+            dragBoundFunc: function () {
+                return {
+                    x: this.absolutePosition().x,
+                    y: this.absolutePosition().y
+                };
+            },
             clipFunc: function (ctx) {
                 self.drawSourceShape(ctx, null, true);
             }
@@ -17889,12 +17891,25 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             unwrap.on('mouseout', function () {
                 self._view.setCursor('default');
             });
+            unwrap.on('dragstart', function () {
+                this._scrollInterval = null;
+            });
+            unwrap.on('dragend', function () {
+                if (this._scrollingInterval) {
+                    clearInterval(this._scrollingInterval);
+                    this._scrollingInterval = null;
+                }
+            });
         }
         var background = new Konva.Group();
         background.add(new Konva.Shape({
             fill: this._source.backgroundColor,
             sceneFunc: function (ctx, shape) {
                 self.drawSourceShape(ctx, shape, true);
+            },
+            draggable: this._source.draggable,
+            dragBoundFunc: function () {
+                return self._onSourceGroupDrag(this);
             }
         }));
         unwrap.add(background);
@@ -17924,6 +17939,13 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         var wrap = new Konva.Group({
             width: this._width,
             height: this._wrappedHeight,
+            draggable: this._source.draggable,
+            dragBoundFunc: function () {
+                return {
+                    x: this.absolutePosition().x,
+                    y: this.absolutePosition().y
+                };
+            },
             clipFunc: function (ctx) {
                 self.drawSourceShape(ctx, null, true);
             }
@@ -17935,12 +17957,25 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             wrap.on('mouseout', function () {
                 self._view.setCursor('default');
             });
+            wrap.on('dragstart', function () {
+                this._scrollInterval = null;
+            });
+            wrap.on('dragend', function () {
+                if (this._scrollingInterval) {
+                    clearInterval(this._scrollingInterval);
+                    this._scrollingInterval = null;
+                }
+            });
         }
         var background = new Konva.Group();
         background.add(new Konva.Shape({
             fill: this._source.backgroundColor,
             sceneFunc: function (ctx, shape) {
                 self.drawSourceShape(ctx, shape, true);
+            },
+            draggable: this._source.draggable,
+            dragBoundFunc: function () {
+                return self._onSourceGroupDrag(this);
             }
         }));
         wrap.add(background);
@@ -18214,7 +18249,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 }
             }
         }
-        this.setDraggingParent();
     };
     SourceGroup.prototype.updatePreviews = function () {
         var self = this;
@@ -18324,9 +18358,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     SourceGroup.prototype.destroy = function () {
         this._group.destroy();
     };
-    SourceGroup.prototype.getLine = function () {
-        return this._source.position;
-    };
     SourceGroup.prototype.createIndicators = function () {
         var newIndicatorsColors = this._source.indicators;
         var oldIndicators = this._indicators;
@@ -20106,9 +20137,6 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         });
         this._stage.on('wheel', function (e) {
             e.evt.preventDefault();
-            if (self._mouseDragHandler.isDragging()) {
-                return;
-            }
             if (self._peaks.keyboardHandler.isCtrlCmdPressed()) {
                 if (e.evt.deltaY > 0) {
                     self.setZoom(self.getTimeToPixelsScale() + Math.floor(self.getTimeToPixelsScale() / 10) + 1);
@@ -20135,55 +20163,46 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
                 }
             }
         });
-        window.addEventListener('mouseup', this._mouseUp.bind(this), false);
-        window.addEventListener('touchend', this._mouseUp.bind(this), false);
-        window.addEventListener('blur', this._mouseUp.bind(this), false);
     }
-    TimelineZoomView.prototype._mouseUp = function () {
-        this.clearScrollingInterval();
-    };
-    TimelineZoomView.prototype._createElementGroup = function () {
-        this._selectedGroup = new Konva.Group({ listening: false });
-        this._layer.add(this._selectedGroup);
-    };
-    TimelineZoomView.prototype.updateWithAutoScroll = function (updateInInterval, updateOutInterval) {
+    TimelineZoomView.prototype.updateWithAutoScroll = function (obj, updateInInterval, updateOutInterval) {
         var self = this;
         var posX = this.getPointerPosition().x;
         var threshold = Math.round(this._peaks.options.autoScrollThreshold * this.getWidth());
-        this._limited = 0;
+        obj._limited = 0;
         if (posX < threshold) {
-            this._limited = Math.round(-30 * Math.min(1, (threshold - posX) / threshold));
+            obj._limited = Math.round(-30 * Math.min(1, (threshold - posX) / threshold));
         } else if (posX > this.getWidth() - threshold) {
-            this._limited = Math.round(30 * Math.min(1, (posX - (this.getWidth() - threshold)) / threshold));
+            obj._limited = Math.round(30 * Math.min(1, (posX - (this.getWidth() - threshold)) / threshold));
         }
-        if (this._limited && self.getFrameOffset() > 0 || this._limited > 0) {
-            if (!this._scrollingInterval) {
-                this._scrollingInterval = setInterval(function () {
-                    var newOffset = self.getFrameOffset() + self._limited;
+        if (obj._limited && self.getFrameOffset() > 0 || obj._limited > 0) {
+            if (!obj._scrollingInterval) {
+                obj._scrollingInterval = setInterval(function () {
+                    var newOffset = self.getFrameOffset() + obj._limited;
                     if (newOffset < 0) {
                         self.updateTimeline(0, null, false);
-                        clearInterval(self._scrollingInterval);
-                        self._scrollingInterval = null;
+                        clearInterval(obj._scrollingInterval);
+                        obj._scrollingInterval = null;
                     } else {
-                        self.updateTimeline(self.getFrameOffset() + self._limited, null, false);
+                        self.updateTimeline(self.getFrameOffset() + obj._limited, null, false);
                     }
                     updateInInterval();
                 }, 10);
             }
         } else {
-            this.clearScrollingInterval();
+            if (obj._scrollingInterval) {
+                clearInterval(obj._scrollingInterval);
+                obj._scrollingInterval = null;
+            }
             if (updateOutInterval) {
                 updateOutInterval();
             } else {
                 updateInInterval();
             }
         }
-    };
-    TimelineZoomView.prototype.clearScrollingInterval = function () {
-        if (this._scrollingInterval) {
-            clearInterval(this._scrollingInterval);
-            this._scrollingInterval = null;
-        }
+        return {
+            x: obj.absolutePosition().x,
+            y: obj.absolutePosition().y
+        };
     };
     TimelineZoomView.prototype.getCurrentMode = function () {
         return this._modeLayer.getCurrentMode();
@@ -20202,7 +20221,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     TimelineZoomView.prototype.selectSourceById = function (sourceId) {
         const sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
         if (sourceGroup) {
-            this._modeLayer.selectElement(sourceGroup, false);
+            this._modeLayer.selectElements([sourceGroup.getSource()], false);
         }
     };
     TimelineZoomView.prototype.selectSourcesOnLineAfter = function (lineId, time) {

package/src/mode-layer.js

@@ -36,7 +36,6 @@ define([
     this._stage = stage;
 
     this._selectedElements = {};
-    this._currentLine = null;
 
     this._layer = new Konva.Layer({
       listening: this._mode !== 'default'
@@ -72,8 +71,6 @@ define([
     const segments = [];
     const self = this;
 
-    this.deselectAll(true);
-
     elements.forEach(function(element) {
       self._selectedElements[element.id] = element;
       element.setSelected(true);
@@ -86,7 +83,6 @@ define([
         }
       }
     });
-
     if (notify) {
       if (sources.length) {
         this._peaks.emit('sources.selected', sources);
@@ -117,7 +113,6 @@ define([
         delete this._selectedElements[id];
       }
     }
-
     if (notify) {
       if (sources.length) {
         this._peaks.emit('sources.deselected', sources);

package/src/playhead-layer.js

@@ -180,6 +180,7 @@ define([
   PlayheadLayer.prototype._onPlayheadDragStart = function() {
     this._view.enableAutoScroll(false);
     this._dragging = true;
+    this._scrollInterval = null;
   };
 
   PlayheadLayer.prototype._onPlayheadDragEnd = function() {

package/src/segment-shape.js

@@ -88,7 +88,20 @@ define([
     this._shapeGroup.add(this._rectangle);
 
     this._shapeGroup.dragBoundFunc(function() {
-      return self._onShapeGroupDrag(this);
+      var diff = self._view.getPointerPosition().x - self._mouseDownX;
+
+      self._group.updateSegment(
+        self._segment,
+        self._initialStartPixel + diff, self._initialEndPixel + diff
+      );
+
+      self._startMarker.timeUpdated(self._segment.startTime);
+      self._endMarker.timeUpdated(self._segment.endTime);
+
+      return {
+        x: this.absolutePosition().x,
+        y: this.absolutePosition().y
+      };
     });
 
     // Set up event handlers to show/hide the segment label text when the user
@@ -124,23 +137,6 @@ define([
     this.createIndicators();
   }
 
-  SegmentShape.prototype._onShapeGroupDrag = function(draggedElement) {
-    const diff = this._view.getPointerPosition().x - this._mouseDownX;
-
-    this._group.updateSegment(
-      this._segment,
-      this._initialStartPixel + diff, this._initialEndPixel + diff
-    );
-
-    this._startMarker.timeUpdated(this._segment.startTime);
-    this._endMarker.timeUpdated(this._segment.endTime);
-
-    return {
-      x: draggedElement.absolutePosition().x,
-      y: draggedElement.absolutePosition().y
-    };
-  };
-
   SegmentShape.prototype._cornerRadius = function() {
     return this._segment.borderRadius !== undefined && this._segment.borderRadius !== null ?
       this._segment.borderRadius :

package/src/source-group.js

@@ -57,9 +57,17 @@ define([
     this._previewList = [];
 
     this._group = new Konva.Group({
-      x: this._x
+      x: this._x,
+      draggable: this._source.draggable,
+      dragBoundFunc: function() {
+        return {
+          x: this.absolutePosition().x,
+          y: this.absolutePosition().y
+        };
+      }
     });
 
+    this._group.on('dragstart', this._onSourceGroupDragStart.bind(this));
     this._group.on('mouseover', function() {
       self._view.setHoveredElement(self);
       if (self._view.getCurrentMode() === 'cut') {
@@ -74,6 +82,7 @@ define([
         self.toggleResizing(true);
       }
     });
+    this._group.on('dragend', this._onSourceGroupDragEnd.bind(this));
 
     this._group.add(new Konva.Group());
 
@@ -116,36 +125,6 @@ define([
   //   });
   // };
 
-  SourceGroup.prototype.setDraggingParent = function() {
-    if (this._source.draggable) {
-      const self = this;
-
-      // this._draggingParent = this._source._selected ?
-      //   this._layer.getSelectedGroup() :
-      //   null;
-      if (this._draggingParent) {
-        this._draggingParent.setAttrs({
-          draggable: this._source.draggable,
-          dragBoundFunc: function() {
-            return self._onSourceGroupDrag(this);
-          }
-        });
-        this._draggingParent.on('dragstart', this._onSourceGroupDragStart.bind(this));
-        this._draggingParent.on('dragend', this._onSourceGroupDragEnd.bind(this));
-      }
-      else {
-        this._group.setAttrs({
-          draggable: this._source.draggable,
-          dragBoundFunc: function() {
-            return self._onSourceGroupDrag(this);
-          }
-        });
-        this._group.on('dragstart', this._onSourceGroupDragStart.bind(this));
-        this._group.on('dragend', this._onSourceGroupDragEnd.bind(this));
-      }
-    }
-  };
-
   SourceGroup.prototype._onSourceGroupDragStart = function() {
     this._dragged = true;
     this._mouseDownX = this._view.getPointerPosition().x;
@@ -171,35 +150,38 @@ define([
     this._peaks.emit('sources.updated', [this._source]);
   };
 
-  SourceGroup.prototype._updateSourceGroup = function() {
-    var mousePos = Math.min(
-      this._view.getWidth() - this._peaks.options.autoScrollThreshold * this._view.getWidth(),
-      Math.max(
-        0,
-        this._view.getPointerPosition().x
-      )
-    );
+  SourceGroup.prototype._onSourceGroupDrag = function(draggedElement) {
+    var self = this;
 
-    var diff = mousePos - this._mouseDownX;
+    var pos = this._view.updateWithAutoScroll(
+      draggedElement,
+      function() {
+        var mousePos = Math.min(
+          self._view.getWidth() - self._peaks.options.autoScrollThreshold * self._view.getWidth(),
+          Math.max(
+            0,
+            self._view.getPointerPosition().x
+          )
+        );
 
-    this._layer.updateSource(
-      this._source,
-      this._initialStartPixel + diff + (this._view.getFrameOffset() - this._initialFrameOffset),
-      this._initialEndPixel + diff + (this._view.getFrameOffset() - this._initialFrameOffset),
-      this._view.getPointerPosition().y
-    );
+        var diff = mousePos - self._mouseDownX;
 
-    this._view.setTimelineLength(
-      this._view.timeToPixels(this._source.endTime) + this._view.getWidth()
-    );
-  };
+        self._layer.updateSource(
+          self._source,
+          self._initialStartPixel + diff + (self._view.getFrameOffset() - self._initialFrameOffset),
+          self._initialEndPixel + diff + (self._view.getFrameOffset() - self._initialFrameOffset),
+          self._view.getPointerPosition().y
+        );
 
-  SourceGroup.prototype._onSourceGroupDrag = function(draggedElement) {
-    this._view.updateWithAutoScroll(this._updateSourceGroup.bind(this));
+        self._view.setTimelineLength(
+          self._view.timeToPixels(self._source.endTime) + self._view.getWidth()
+        );
+      }
+    );
 
     return {
-      x: draggedElement.absolutePosition().x,
-      y: draggedElement.absolutePosition().y
+      x: pos.x,
+      y: pos.y
     };
   };
 
@@ -293,6 +275,13 @@ define([
       });
 
       if (this._source.resizable) {
+        this._leftHandle.on('dragend', function() {
+          if (this._scrollingInterval) {
+            clearInterval(this._scrollingInterval);
+            this._scrollingInterval = null;
+          }
+        });
+
         this._leftHandle.on('mouseover', function() {
           self._view.setCursor('ew-resize');
         });
@@ -316,6 +305,13 @@ define([
       });
 
       if (this._source.resizable) {
+        this._rightHandle.on('dragend', function() {
+          if (this._scrollingInterval) {
+            clearInterval(this._scrollingInterval);
+            this._scrollingInterval = null;
+          }
+        });
+
         this._rightHandle.on('mouseover', function() {
           self._view.setCursor('ew-resize');
         });
@@ -425,6 +421,13 @@ define([
     var unwrap = new Konva.Group({
       width: this._width,
       height: this._unwrappedHeight,
+      draggable: this._source.draggable,
+      dragBoundFunc: function() {
+        return {
+          x: this.absolutePosition().x,
+          y: this.absolutePosition().y
+        };
+      },
       clipFunc: function(ctx) {
         self.drawSourceShape(ctx, null, true);
       }
@@ -437,6 +440,17 @@ define([
       unwrap.on('mouseout', function() {
         self._view.setCursor('default');
       });
+
+      unwrap.on('dragstart', function() {
+        this._scrollInterval = null;
+      });
+
+      unwrap.on('dragend', function() {
+        if (this._scrollingInterval) {
+          clearInterval(this._scrollingInterval);
+          this._scrollingInterval = null;
+        }
+      });
     }
 
     var background = new Konva.Group();
@@ -445,6 +459,10 @@ define([
       fill: this._source.backgroundColor,
       sceneFunc: function(ctx, shape) {
         self.drawSourceShape(ctx, shape, true);
+      },
+      draggable: this._source.draggable,
+      dragBoundFunc: function() {
+        return self._onSourceGroupDrag(this);
       }
     }));
 
@@ -483,6 +501,13 @@ define([
     var wrap = new Konva.Group({
       width: this._width,
       height: this._wrappedHeight,
+      draggable: this._source.draggable,
+      dragBoundFunc: function() {
+        return {
+          x: this.absolutePosition().x,
+          y: this.absolutePosition().y
+        };
+      },
       clipFunc: function(ctx) {
         self.drawSourceShape(ctx, null, true);
       }
@@ -495,6 +520,17 @@ define([
       wrap.on('mouseout', function() {
         self._view.setCursor('default');
       });
+
+      wrap.on('dragstart', function() {
+        this._scrollInterval = null;
+      });
+
+      wrap.on('dragend', function() {
+        if (this._scrollingInterval) {
+          clearInterval(this._scrollingInterval);
+          this._scrollingInterval = null;
+        }
+      });
     }
 
     var background = new Konva.Group();
@@ -503,6 +539,10 @@ define([
       fill: this._source.backgroundColor,
       sceneFunc: function(ctx, shape) {
         self.drawSourceShape(ctx, shape, true);
+      },
+      draggable: this._source.draggable,
+      dragBoundFunc: function() {
+        return self._onSourceGroupDrag(this);
       }
     }));
 
@@ -859,7 +899,6 @@ define([
         }
       }
     }
-    this.setDraggingParent();
   };
 
   SourceGroup.prototype.updatePreviews = function() {
@@ -1009,10 +1048,6 @@ define([
     this._group.destroy();
   };
 
-  SourceGroup.prototype.getLine = function() {
-    return this._source.position;
-  };
-
   SourceGroup.prototype.createIndicators = function() {
     var newIndicatorsColors = this._source.indicators;
 

package/src/timeline-zoomview.js

@@ -241,10 +241,6 @@ define([
       // prevent parent scrolling
       e.evt.preventDefault();
 
-      if (self._mouseDragHandler.isDragging()) {
-        return;
-      }
-
       if (self._peaks.keyboardHandler.isCtrlCmdPressed()) {
         if (e.evt.deltaY > 0) {
           self.setZoom(
@@ -292,54 +288,38 @@ define([
         }
       }
     });
-
-    window.addEventListener('mouseup', this._mouseUp.bind(this), false);
-    window.addEventListener('touchend', this._mouseUp.bind(this), false);
-    window.addEventListener('blur', this._mouseUp.bind(this), false);
   }
 
-  TimelineZoomView.prototype._mouseUp = function() {
-    this.clearScrollingInterval();
-  };
-
-  TimelineZoomView.prototype._createElementGroup = function() {
-    this._selectedGroup = new Konva.Group({
-      listening: false
-    });
-
-    this._layer.add(this._selectedGroup);
-  };
-
-  TimelineZoomView.prototype.updateWithAutoScroll = function(updateInInterval,
+  TimelineZoomView.prototype.updateWithAutoScroll = function(obj, updateInInterval,
     updateOutInterval) {
     var self = this;
     var posX = this.getPointerPosition().x;
     var threshold = Math.round(this._peaks.options.autoScrollThreshold * this.getWidth());
 
-    this._limited = 0;
+    obj._limited = 0;
 
     if (posX < threshold) {
-      this._limited = Math.round(-30 * Math.min(1, (threshold - posX) / threshold));
+      obj._limited = Math.round(-30 * Math.min(1, (threshold - posX) / threshold));
     }
     else if (posX > this.getWidth() - threshold) {
-      this._limited = Math.round(
+      obj._limited = Math.round(
         30 * Math.min(1, (posX - (this.getWidth() - threshold)) / threshold)
       );
     }
 
-    if (this._limited && self.getFrameOffset() > 0 || this._limited > 0) {
-      if (!this._scrollingInterval) {
-        this._scrollingInterval = setInterval(
+    if (obj._limited && self.getFrameOffset() > 0 || obj._limited > 0) {
+      if (!obj._scrollingInterval) {
+        obj._scrollingInterval = setInterval(
           function() {
-            var newOffset = self.getFrameOffset() + self._limited;
+            var newOffset = self.getFrameOffset() + obj._limited;
 
             if (newOffset < 0) {
               self.updateTimeline(0, null, false);
-              clearInterval(self._scrollingInterval);
-              self._scrollingInterval = null;
+              clearInterval(obj._scrollingInterval);
+              obj._scrollingInterval = null;
             }
             else {
-              self.updateTimeline(self.getFrameOffset() + self._limited, null, false);
+              self.updateTimeline(self.getFrameOffset() + obj._limited, null, false);
             }
 
             updateInInterval();
@@ -349,7 +329,10 @@ define([
       }
     }
     else {
-      this.clearScrollingInterval();
+      if (obj._scrollingInterval) {
+        clearInterval(obj._scrollingInterval);
+        obj._scrollingInterval = null;
+      }
 
       if (updateOutInterval) {
         updateOutInterval();
@@ -358,13 +341,11 @@ define([
         updateInInterval();
       }
     }
-  };
 
-  TimelineZoomView.prototype.clearScrollingInterval = function() {
-    if (this._scrollingInterval) {
-      clearInterval(this._scrollingInterval);
-      this._scrollingInterval = null;
-    }
+    return {
+      x: obj.absolutePosition().x,
+      y: obj.absolutePosition().y
+    };
   };
 
   TimelineZoomView.prototype.getCurrentMode = function() {
@@ -388,7 +369,7 @@ define([
     const sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
 
     if (sourceGroup) {
-      this._modeLayer.selectElement(sourceGroup, false);
+      this._modeLayer.selectElements([sourceGroup.getSource()], false);
     }
   };