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

package/package.json

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

package/peaks.js

@@ -15721,6 +15721,7 @@ 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);
@@ -15739,6 +15740,7 @@ 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);
@@ -16263,7 +16265,6 @@ 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);
@@ -16500,14 +16501,7 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         });
         this._shapeGroup.add(this._rectangle);
         this._shapeGroup.dragBoundFunc(function () {
-            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
-            };
+            return self._onShapeGroupDrag(this);
         });
         this._shapeGroup.on('mouseenter', this._onMouseEnter.bind(this));
         this._shapeGroup.on('mouseleave', this._onMouseLeave.bind(this));
@@ -16532,6 +16526,16 @@ 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;
     };
@@ -17634,17 +17638,7 @@ 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,
-            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 = new Konva.Group({ x: this._x });
         this._group.on('mouseover', function () {
             self._view.setHoveredElement(self);
             if (self._view.getCurrentMode() === 'cut') {
@@ -17659,7 +17653,6 @@ 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({
@@ -17677,6 +17670,30 @@ 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;
@@ -17696,17 +17713,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) {
-        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());
-        });
+        this._view.updateWithAutoScroll(this._updateSourceGroup.bind(this));
         return {
-            x: pos.x,
-            y: pos.y
+            x: draggedElement.absolutePosition().x,
+            y: draggedElement.absolutePosition().y
         };
     };
     SourceGroup.prototype._onSourceGroupHandleDrag = function (draggedElement, dragPos, leftHandle) {
@@ -17771,12 +17788,6 @@ 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');
                 });
@@ -17797,12 +17808,6 @@ 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');
                 });
@@ -17873,13 +17878,6 @@ 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);
             }
@@ -17891,25 +17889,12 @@ 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);
@@ -17939,13 +17924,6 @@ 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);
             }
@@ -17957,25 +17935,12 @@ 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);
@@ -18249,6 +18214,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 }
             }
         }
+        this.setDraggingParent();
     };
     SourceGroup.prototype.updatePreviews = function () {
         var self = this;
@@ -18358,6 +18324,9 @@ 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;
@@ -20137,6 +20106,9 @@ 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);
@@ -20163,46 +20135,55 @@ 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.updateWithAutoScroll = function (obj, updateInInterval, updateOutInterval) {
+    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) {
         var self = this;
         var posX = this.getPointerPosition().x;
         var threshold = Math.round(this._peaks.options.autoScrollThreshold * this.getWidth());
-        obj._limited = 0;
+        this._limited = 0;
         if (posX < threshold) {
-            obj._limited = Math.round(-30 * Math.min(1, (threshold - posX) / threshold));
+            this._limited = Math.round(-30 * Math.min(1, (threshold - posX) / threshold));
         } else if (posX > this.getWidth() - threshold) {
-            obj._limited = Math.round(30 * Math.min(1, (posX - (this.getWidth() - threshold)) / threshold));
+            this._limited = Math.round(30 * Math.min(1, (posX - (this.getWidth() - threshold)) / threshold));
         }
-        if (obj._limited && self.getFrameOffset() > 0 || obj._limited > 0) {
-            if (!obj._scrollingInterval) {
-                obj._scrollingInterval = setInterval(function () {
-                    var newOffset = self.getFrameOffset() + obj._limited;
+        if (this._limited && self.getFrameOffset() > 0 || this._limited > 0) {
+            if (!this._scrollingInterval) {
+                this._scrollingInterval = setInterval(function () {
+                    var newOffset = self.getFrameOffset() + self._limited;
                     if (newOffset < 0) {
                         self.updateTimeline(0, null, false);
-                        clearInterval(obj._scrollingInterval);
-                        obj._scrollingInterval = null;
+                        clearInterval(self._scrollingInterval);
+                        self._scrollingInterval = null;
                     } else {
-                        self.updateTimeline(self.getFrameOffset() + obj._limited, null, false);
+                        self.updateTimeline(self.getFrameOffset() + self._limited, null, false);
                     }
                     updateInInterval();
                 }, 10);
             }
         } else {
-            if (obj._scrollingInterval) {
-                clearInterval(obj._scrollingInterval);
-                obj._scrollingInterval = null;
-            }
+            this.clearScrollingInterval();
             if (updateOutInterval) {
                 updateOutInterval();
             } else {
                 updateInInterval();
             }
         }
-        return {
-            x: obj.absolutePosition().x,
-            y: obj.absolutePosition().y
-        };
+    };
+    TimelineZoomView.prototype.clearScrollingInterval = function () {
+        if (this._scrollingInterval) {
+            clearInterval(this._scrollingInterval);
+            this._scrollingInterval = null;
+        }
     };
     TimelineZoomView.prototype.getCurrentMode = function () {
         return this._modeLayer.getCurrentMode();

package/src/mode-layer.js

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

package/src/playhead-layer.js

@@ -180,7 +180,6 @@ 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,20 +88,7 @@ define([
     this._shapeGroup.add(this._rectangle);
 
     this._shapeGroup.dragBoundFunc(function() {
-      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
-      };
+      return self._onShapeGroupDrag(this);
     });
 
     // Set up event handlers to show/hide the segment label text when the user
@@ -137,6 +124,23 @@ 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,17 +57,9 @@ define([
     this._previewList = [];
 
     this._group = new Konva.Group({
-      x: this._x,
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return {
-          x: this.absolutePosition().x,
-          y: this.absolutePosition().y
-        };
-      }
+      x: this._x
     });
 
-    this._group.on('dragstart', this._onSourceGroupDragStart.bind(this));
     this._group.on('mouseover', function() {
       self._view.setHoveredElement(self);
       if (self._view.getCurrentMode() === 'cut') {
@@ -82,7 +74,6 @@ define([
         self.toggleResizing(true);
       }
     });
-    this._group.on('dragend', this._onSourceGroupDragEnd.bind(this));
 
     this._group.add(new Konva.Group());
 
@@ -125,6 +116,36 @@ 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;
@@ -150,38 +171,35 @@ define([
     this._peaks.emit('sources.updated', [this._source]);
   };
 
-  SourceGroup.prototype._onSourceGroupDrag = function(draggedElement) {
-    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
-          )
-        );
+  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 - self._mouseDownX;
+    var diff = mousePos - this._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
-        );
+    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
+    );
 
-        self._view.setTimelineLength(
-          self._view.timeToPixels(self._source.endTime) + self._view.getWidth()
-        );
-      }
+    this._view.setTimelineLength(
+      this._view.timeToPixels(this._source.endTime) + this._view.getWidth()
     );
+  };
+
+  SourceGroup.prototype._onSourceGroupDrag = function(draggedElement) {
+    this._view.updateWithAutoScroll(this._updateSourceGroup.bind(this));
 
     return {
-      x: pos.x,
-      y: pos.y
+      x: draggedElement.absolutePosition().x,
+      y: draggedElement.absolutePosition().y
     };
   };
 
@@ -275,13 +293,6 @@ 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');
         });
@@ -305,13 +316,6 @@ 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');
         });
@@ -421,13 +425,6 @@ 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);
       }
@@ -440,17 +437,6 @@ 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();
@@ -459,10 +445,6 @@ define([
       fill: this._source.backgroundColor,
       sceneFunc: function(ctx, shape) {
         self.drawSourceShape(ctx, shape, true);
-      },
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return self._onSourceGroupDrag(this);
       }
     }));
 
@@ -501,13 +483,6 @@ 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);
       }
@@ -520,17 +495,6 @@ 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();
@@ -539,10 +503,6 @@ define([
       fill: this._source.backgroundColor,
       sceneFunc: function(ctx, shape) {
         self.drawSourceShape(ctx, shape, true);
-      },
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return self._onSourceGroupDrag(this);
       }
     }));
 
@@ -899,6 +859,7 @@ define([
         }
       }
     }
+    this.setDraggingParent();
   };
 
   SourceGroup.prototype.updatePreviews = function() {
@@ -1048,6 +1009,10 @@ 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,6 +241,10 @@ define([
       // prevent parent scrolling
       e.evt.preventDefault();
 
+      if (self._mouseDragHandler.isDragging()) {
+        return;
+      }
+
       if (self._peaks.keyboardHandler.isCtrlCmdPressed()) {
         if (e.evt.deltaY > 0) {
           self.setZoom(
@@ -288,38 +292,54 @@ 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.updateWithAutoScroll = function(obj, updateInInterval,
+  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) {
     var self = this;
     var posX = this.getPointerPosition().x;
     var threshold = Math.round(this._peaks.options.autoScrollThreshold * this.getWidth());
 
-    obj._limited = 0;
+    this._limited = 0;
 
     if (posX < threshold) {
-      obj._limited = Math.round(-30 * Math.min(1, (threshold - posX) / threshold));
+      this._limited = Math.round(-30 * Math.min(1, (threshold - posX) / threshold));
     }
     else if (posX > this.getWidth() - threshold) {
-      obj._limited = Math.round(
+      this._limited = Math.round(
         30 * Math.min(1, (posX - (this.getWidth() - threshold)) / threshold)
       );
     }
 
-    if (obj._limited && self.getFrameOffset() > 0 || obj._limited > 0) {
-      if (!obj._scrollingInterval) {
-        obj._scrollingInterval = setInterval(
+    if (this._limited && self.getFrameOffset() > 0 || this._limited > 0) {
+      if (!this._scrollingInterval) {
+        this._scrollingInterval = setInterval(
           function() {
-            var newOffset = self.getFrameOffset() + obj._limited;
+            var newOffset = self.getFrameOffset() + self._limited;
 
             if (newOffset < 0) {
               self.updateTimeline(0, null, false);
-              clearInterval(obj._scrollingInterval);
-              obj._scrollingInterval = null;
+              clearInterval(self._scrollingInterval);
+              self._scrollingInterval = null;
             }
             else {
-              self.updateTimeline(self.getFrameOffset() + obj._limited, null, false);
+              self.updateTimeline(self.getFrameOffset() + self._limited, null, false);
             }
 
             updateInInterval();
@@ -329,10 +349,7 @@ define([
       }
     }
     else {
-      if (obj._scrollingInterval) {
-        clearInterval(obj._scrollingInterval);
-        obj._scrollingInterval = null;
-      }
+      this.clearScrollingInterval();
 
       if (updateOutInterval) {
         updateOutInterval();
@@ -341,11 +358,13 @@ define([
         updateInInterval();
       }
     }
+  };
 
-    return {
-      x: obj.absolutePosition().x,
-      y: obj.absolutePosition().y
-    };
+  TimelineZoomView.prototype.clearScrollingInterval = function() {
+    if (this._scrollingInterval) {
+      clearInterval(this._scrollingInterval);
+      this._scrollingInterval = null;
+    }
   };
 
   TimelineZoomView.prototype.getCurrentMode = function() {