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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "1.9.1-beta.2",
+  "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

@@ -15740,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);
@@ -15836,11 +15837,6 @@ module.exports = function (Utils, Source, SourceGroup, Konva) {
     };
     ModeLayer.prototype._onMouseClickInDefaultMode = function () {
         const hoveredKonvaElement = this._view.getHoveredElement();
-        const currentLine = hoveredKonvaElement && hoveredKonvaElement.getLine();
-        if (currentLine !== this._currentLine) {
-            this.deselectAll(true);
-            this._currentLine = currentLine;
-        }
         if (hoveredKonvaElement) {
             if (hoveredKonvaElement instanceof SourceGroup) {
                 this.selectElements([hoveredKonvaElement.getSource()], true);
@@ -16269,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);
@@ -17643,14 +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 self._onSourceGroupDrag(this);
-            }
-        });
-        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') {
@@ -17665,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({
@@ -17683,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;
@@ -17702,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) {
@@ -17777,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');
                 });
@@ -17803,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');
                 });
@@ -17890,15 +17889,6 @@ 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({
@@ -17945,15 +17935,6 @@ 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({
@@ -18233,6 +18214,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 }
             }
         }
+        this.setDraggingParent();
     };
     SourceGroup.prototype.updatePreviews = function () {
         var self = this;
@@ -20124,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);
@@ -20150,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

@@ -72,6 +72,8 @@ define([
     const segments = [];
     const self = this;
 
+    this.deselectAll(true);
+
     elements.forEach(function(element) {
       self._selectedElements[element.id] = element;
       element.setSelected(true);
@@ -84,6 +86,7 @@ define([
         }
       }
     });
+
     if (notify) {
       if (sources.length) {
         this._peaks.emit('sources.selected', sources);
@@ -114,6 +117,7 @@ define([
         delete this._selectedElements[id];
       }
     }
+
     if (notify) {
       if (sources.length) {
         this._peaks.emit('sources.deselected', sources);
@@ -180,12 +184,6 @@ define([
 
   ModeLayer.prototype._onMouseClickInDefaultMode = function() {
     const hoveredKonvaElement = this._view.getHoveredElement();
-    const currentLine = hoveredKonvaElement && hoveredKonvaElement.getLine();
-
-    if (currentLine !== this._currentLine) {
-      this.deselectAll(true);
-      this._currentLine = currentLine;
-    }
 
     if (hoveredKonvaElement) {
       if (hoveredKonvaElement instanceof SourceGroup) {

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/source-group.js

@@ -57,14 +57,9 @@ define([
     this._previewList = [];
 
     this._group = new Konva.Group({
-      x: this._x,
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return self._onSourceGroupDrag(this);
-      }
+      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') {
@@ -79,7 +74,6 @@ define([
         self.toggleResizing(true);
       }
     });
-    this._group.on('dragend', this._onSourceGroupDragEnd.bind(this));
 
     this._group.add(new Konva.Group());
 
@@ -122,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;
@@ -147,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
     };
   };
 
@@ -272,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');
         });
@@ -302,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');
         });
@@ -430,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();
@@ -499,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();
@@ -874,6 +859,7 @@ define([
         }
       }
     }
+    this.setDraggingParent();
   };
 
   SourceGroup.prototype.updatePreviews = function() {

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() {