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

package/package.json

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

package/peaks.js

@@ -15085,7 +15085,7 @@ module.exports = function (SourceGroup, Utils, Konva) {
     LineGroup.prototype.addSource = function (source, sourceGroup, sourcesAround) {
         if (sourceGroup) {
             this._sourcesGroup[source.id] = sourceGroup;
-            if (!sourceGroup.isActive()) {
+            if (!sourceGroup.isDragged()) {
                 if (!sourceGroup.getParent() || !sourceGroup.isDescendantOf(this._group)) {
                     sourceGroup.moveTo(this._group);
                 }
@@ -16027,24 +16027,24 @@ module.exports = function (Konva, SVGs, Invoker, Utils) {
         ]);
         this.refreshIndicators();
     };
-    LineIndicator.prototype._createIndicator = function (lineGroup, type, text, subText) {
+    LineIndicator.prototype._createIndicator = function (lineGroup, type, text, subText, defaultStyle = {}) {
         const indicator = new Konva.Group();
         let indicatorHeight = 0;
         var self = this;
         var textGroup, iconGroup, subTextGroup;
         var textNode, iconNode, subTextNode;
         if (text) {
-            [textGroup, textNode] = this._createIndicatorText(text);
+            [textGroup, textNode] = this._createIndicatorText(text, 'line-indicator-text', defaultStyle);
             indicator.add(textGroup);
             indicatorHeight += textGroup.getAttr('trueHeight') + this._topPadding;
         }
-        [iconGroup, iconNode] = this._createIndicatorIcon(type);
+        [iconGroup, iconNode] = this._createIndicatorIcon(type, 'line-indicator-icon', defaultStyle);
         iconGroup.y(indicatorHeight);
         indicator.add(iconGroup);
         indicatorHeight += iconGroup.getAttr('trueHeight');
         if (subText) {
             indicatorHeight += this._bottomPadding;
-            [subTextGroup, subTextNode] = this._createIndicatorText(subText);
+            [subTextGroup, subTextNode] = this._createIndicatorText(subText, 'line-indicator-subText', defaultStyle);
             subTextGroup.y(indicatorHeight);
             indicator.add(subTextGroup);
             indicatorHeight += subTextGroup.getAttr('trueHeight');
@@ -16125,16 +16125,18 @@ module.exports = function (Konva, SVGs, Invoker, Utils) {
         indicator.y(lineGroup.y() + (lineGroup.lineHeight() - indicatorHeight) / 2);
         return indicator;
     };
-    LineIndicator.prototype._createIndicatorText = function (text) {
+    LineIndicator.prototype._createIndicatorText = function (text, role, defaultStyle = {}) {
+        defaultStyle = defaultStyle[role] || {};
         const textGroup = new Konva.Group();
         const textNode = new Konva.Text({
             text: text,
             fontSize: this._sizes.font,
             fontFamily: this._peaks.options.lineIndicatorFont,
-            fill: this._peaks.options.lineIndicatorTextColor,
+            fill: defaultStyle.fill || this._peaks.options.lineIndicatorTextColor,
             align: 'center',
             width: this._width,
-            listening: false
+            listening: false,
+            name: role
         });
         textNode.setAttr('defaultColor', this._peaks.options.lineIndicatorTextColor);
         textNode.setAttr('selectedColor', this._peaks.options.lineIndicatorSelectedTextColor);
@@ -16155,7 +16157,8 @@ module.exports = function (Konva, SVGs, Invoker, Utils) {
             textNode
         ];
     };
-    LineIndicator.prototype._createIndicatorIcon = function (type) {
+    LineIndicator.prototype._createIndicatorIcon = function (type, role, defaultStyle = {}) {
+        defaultStyle = defaultStyle[role] || {};
         type = this._types.includes(type) ? type : 'default';
         const iconGroup = new Konva.Group();
         var iconHeight = this._sizes.icon[type];
@@ -16165,21 +16168,23 @@ module.exports = function (Konva, SVGs, Invoker, Utils) {
                 x: this._width / 2,
                 y: this._sizes.icon.default / 2,
                 radius: this._sizes.icon.default / 2,
-                fill: this._peaks.options.lineIndicatorIconColor,
+                fill: defaultStyle.fill || this._peaks.options.lineIndicatorIconColor,
                 strokeWidth: 0,
-                listening: false
+                listening: false,
+                name: role
             });
         } else {
             iconNode = new Konva.Path({
                 x: (this._width - this._sizes.icon[type]) / 2,
                 y: 0,
                 data: SVGs[type].path,
-                fill: this._peaks.options.lineIndicatorIconColor,
+                fill: defaultStyle.fill || this._peaks.options.lineIndicatorIconColor,
                 scale: {
                     x: this._sizes.icon[type] / SVGs[type].width,
                     y: this._sizes.icon[type] / SVGs[type].height
                 },
-                listening: false
+                listening: false,
+                name: role
             });
         }
         iconNode.setAttr('defaultColor', this._peaks.options.lineIndicatorIconColor);
@@ -16221,11 +16226,11 @@ module.exports = function (Konva, SVGs, Invoker, Utils) {
             this._peaks.logger('peaks.line-indicator.update(): line indicator not found: ' + line.id);
             return;
         }
-        if (indicatorData.type === line.indicatorType && indicatorData.text === line.indicatorText) {
+        if (indicatorData.type === line.indicatorType && indicatorData.text === line.indicatorText && indicatorData.subText === line.indicatorSubText) {
             return;
         }
-        this.removeIndicator(line.id, true);
-        var indicator = this._createIndicator(indicatorData.lineGroup, line.indicatorType, line.indicatorText, line.indicatorSubText);
+        const styleData = this.removeIndicator(line.id, true);
+        var indicator = this._createIndicator(indicatorData.lineGroup, line.indicatorType, line.indicatorText, line.indicatorSubText, styleData);
         this._layer.add(indicator);
         indicatorData.indicator = indicator;
         indicatorData.type = line.indicatorType;
@@ -16233,17 +16238,40 @@ module.exports = function (Konva, SVGs, Invoker, Utils) {
         indicatorData.subText = line.indicatorSubText;
         this.batchDraw();
     };
+    LineIndicator.prototype._getStyleData = function (konvaItem) {
+        if (!konvaItem) {
+            return {};
+        }
+        var styleData = {};
+        const name = konvaItem.name();
+        if (name) {
+            styleData[name] = { fill: konvaItem.fill() };
+        }
+        if (typeof konvaItem.getChildren === 'function') {
+            const children = konvaItem.getChildren();
+            if (children && children.length > 0) {
+                children.forEach(function (child) {
+                    styleData = Object.assign(styleData, this._getStyleData(child));
+                }.bind(this));
+            }
+        }
+        return styleData;
+    };
     LineIndicator.prototype.removeIndicator = function (lineId, keepInList) {
+        var styleData = {};
         if (this._indicators[lineId]) {
-            if (this._indicators[lineId].indicator) {
-                this._indicators[lineId].indicator.destroy();
-            }
+            const indicator = this._indicators[lineId].indicator;
             if (!keepInList) {
                 delete this._indicators[lineId];
             } else {
                 this._indicators[lineId].indicator = null;
+                styleData = this._getStyleData(indicator);
+            }
+            if (indicator) {
+                indicator.destroy();
             }
         }
+        return styleData;
     };
     LineIndicator.prototype.refreshIndicator = function (lineId) {
         var anyChange = false;
@@ -16648,6 +16676,10 @@ module.exports = function (SourceGroup, Invoker, Source, Utils, Konva) {
     };
     ModeLayer.prototype._onMouseMoveInCutMode = function () {
         var mousePosition = this._stage.getPointerPosition();
+        if (!mousePosition) {
+            return;
+        }
+        this._syncHoveredElementFromPointer();
         mousePosition.x = this._view.timeToPixels(this._view.pixelsToTime(mousePosition.x));
         var cuttingPosition = mousePosition;
         var hoveredElement = this._view.getHoveredElement();
@@ -16707,13 +16739,17 @@ module.exports = function (SourceGroup, Invoker, Source, Utils, Konva) {
         while (node) {
             if (node.attrs && node.attrs.sourceId) {
                 var sourceGroup = this._view.getSourceGroupById(node.attrs.sourceId);
-                if (sourceGroup && !sourceGroup.isHovered()) {
-                    sourceGroup.startHover();
+                if (sourceGroup) {
+                    this._view.setHoveredElement(sourceGroup);
+                    if (!sourceGroup.isHovered()) {
+                        sourceGroup.startHover();
+                    }
                 }
                 return;
             }
             node = node.getParent ? node.getParent() : null;
         }
+        this._view.setHoveredElement(null);
     };
     ModeLayer.prototype.setMode = function (mode) {
         if (this._mode === mode) {
@@ -18115,7 +18151,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
         this._selected = this._source.selected;
         this._hovered = false;
         this._isDragged = false;
-        this._isHandleDragging = false;
+        this._isHandleDragged = false;
         this._destroyed = false;
         this._dragGhost = null;
         this._drawScheduled = false;
@@ -18246,7 +18282,10 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
         return this._hovered;
     };
     SourceGroup.prototype.isActive = function () {
-        return this._isDragged || this._isHandleDragging;
+        return this._isDragged || this._isHandleDragged;
+    };
+    SourceGroup.prototype.isDragged = function () {
+        return this._isDragged;
     };
     SourceGroup.prototype.addToContent = function (newChild) {
         if (this._source.wrapped) {
@@ -18255,7 +18294,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
             this._unwrap.add(newChild);
         }
     };
-    SourceGroup.prototype.prepareDragEnd = function () {
+    SourceGroup.prototype._updateHandles = function () {
         var handleWidth = Math.min(this._peaks.options.sourceHandleWidth, this._width / 2);
         this._leftHandle.width(handleWidth);
         this._rightHandle.width(handleWidth);
@@ -18291,7 +18330,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
             if (newTimeToPixelsScale !== this._currentTimeToPixelsScaleUsed) {
                 this._currentTimeToPixelsScaleUsed = newTimeToPixelsScale;
                 this._updateMarkers();
-                this._rightHandle.x(this._width - this._rightHandle.width());
             } else {
                 const newTitle = Utils.removeLineBreaks(this._source.getVisibleTitle());
                 if (this._wrappedTitle && this._wrappedTitle.text() !== newTitle) {
@@ -18301,6 +18339,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
                     this._unwrap.add(this._createTitle(false));
                 }
             }
+            this._updateHandles();
             this._updateVolumeSlider();
             this._updateButtons();
             this._updateLoadingOverlay();
@@ -18342,14 +18381,13 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
             start: this._source.startTime,
             end: this._source.endTime
         };
-        this._isHandleDragging = true;
+        this._isHandleDragged = true;
         this._hideButtons();
     };
     SourceGroup.prototype._onHandleDragEnd = function () {
-        this._isHandleDragging = false;
+        this._isHandleDragged = false;
         this._showButtons();
-        this.update();
-        this.prepareDragEnd();
+        this._layer.processSourceUpdates([this._source]);
     };
     SourceGroup.prototype._addHandles = function (forceCreate) {
         var self = this;
@@ -18443,9 +18481,8 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
     SourceGroup.prototype.drawSourceShape = function (ctx, shape, addBorderWidth, fill) {
         var offset = addBorderWidth ? this._borderWidth : 0;
         var radius = !Utils.isNullOrUndefined(this._source.borderRadius) ? this._source.borderRadius : Math.max(1, Math.min(this._width / 2, Math.min(CORNER_RADIUS, this._height / 2)));
-        var actualX = this._group.x() + this._view.getFrameOffset();
-        var x = Math.max(0, this._view.getFrameOffset() - actualX - 2 * radius);
-        var width = Math.min(this._width - x, this._view.getWidth() + 4 * radius - Math.max(0, actualX - this._view.getFrameOffset()));
+        var x = Math.max(0, -(this._group.x() + 2 * radius));
+        var width = Math.min(this._width - x, this._view.getWidth() + 4 * radius - Math.max(0, this._group.x()));
         var xWidth = x + width;
         if (width > 0) {
             ctx.beginPath();
@@ -18463,7 +18500,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
                 var backgroundColor;
                 if (this._selected) {
                     backgroundColor = this._source.selectedBackgroundColor;
-                } else if (this._hovered) {
+                } else if (this._hovered && this._view.getCurrentMode() !== 'cut') {
                     backgroundColor = this._source.hoverBackgroundColor;
                 } else {
                     backgroundColor = this._source.backgroundColor;
@@ -18809,12 +18846,14 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
                 });
             }
         }
+        var self = this;
         var waveform = new WaveformShape({
-            layer: this._layer,
             view: this._view,
-            source: this._source,
+            color: this._source.color,
             height: preview.group.height(),
-            url: url
+            waveformDataFunc: function () {
+                return self._createWaveformPointsIterator(url);
+            }
         });
         preview.group.add(waveform);
         this._addToUnwrap(preview.group);
@@ -18823,6 +18862,69 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
         }
         this._previewList.push(preview);
     };
+    SourceGroup.prototype._createWaveformPointsIterator = function (url) {
+        var loaded = this._layer.getLoadedData(url + '-scaled');
+        var waveformData = loaded && loaded.data;
+        if (!waveformData) {
+            return {
+                next: function () {
+                    return { done: true };
+                }
+            };
+        }
+        var view = this._view;
+        var source = this._source;
+        var groupX = this._group && typeof this._group.x === 'function' ? this._group.x() : 0;
+        var groupWidth = this._width;
+        var viewWidth = view.getWidth();
+        var startPixel = 0;
+        var startOffset = 0;
+        var endPixel = Math.min(viewWidth, waveformData.length);
+        var targetSpeed = 1;
+        if (source) {
+            targetSpeed = source.targetSpeed || 1;
+            var hiddenLeftPixels = Math.max(-groupX, 0);
+            var hiddenRightPixels = Math.max(groupX + groupWidth - viewWidth, 0);
+            startPixel = Math.floor((view.timeToPixels(source.mediaStartTime) + hiddenLeftPixels) * targetSpeed);
+            startOffset = view.timeToPixels(source.mediaStartTime);
+            endPixel = Math.min(Math.ceil((view.timeToPixels(source.mediaEndTime) - hiddenRightPixels) * targetSpeed), waveformData.length);
+        }
+        if (startPixel < 0) {
+            startPixel = 0;
+        }
+        if (endPixel < startPixel) {
+            endPixel = startPixel;
+        }
+        var channels = waveformData.channels;
+        var channelData = new Array(channels);
+        for (var c = 0; c < channels; c++) {
+            channelData[c] = waveformData.channel(c);
+        }
+        var x = startPixel;
+        return {
+            next: function () {
+                if (x >= endPixel) {
+                    return { done: true };
+                }
+                var min = new Array(channels);
+                var max = new Array(channels);
+                for (var i = 0; i < channels; i++) {
+                    min[i] = channelData[i].min_sample(x);
+                    max[i] = channelData[i].max_sample(x);
+                }
+                var value = {
+                    x: x / targetSpeed - startOffset + 0.5,
+                    min: min,
+                    max: max
+                };
+                x++;
+                return {
+                    done: false,
+                    value: value
+                };
+            }
+        };
+    };
     SourceGroup.prototype.getAudioPreview = function () {
         return this._previewList.filter(function (preview) {
             return preview.type === 'audio';
@@ -19479,18 +19581,21 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Invoker, Util
         });
         volumeSliderGroup.add(volumeSliderRect);
         volumeSliderGroup.add(volumeSliderLine);
-        volumeSliderGroup.on('dragstart', function () {
+        volumeSliderGroup.on('dragstart', function (evt) {
+            evt.cancelBubble = true;
             volumeText.visible(true);
             self._peaks.emit('source.startVolumeChange', self._source);
         });
-        volumeSliderGroup.on('dragmove', function () {
+        volumeSliderGroup.on('dragmove', function (evt) {
+            evt.cancelBubble = true;
             var volume = self._getVolumeFromY(volumeSliderGroup.y());
             volumeText.text((volume * 100).toFixed(0) + '%');
             self._source.volume = Math.max(self._source.volumeRange[0], Math.min(volume, self._source.volumeRange[1]));
             self._peaks.emit('source.volumeChanged', self._source);
             self._scheduleBatchDraw();
         });
-        volumeSliderGroup.on('dragend', function () {
+        volumeSliderGroup.on('dragend', function (evt) {
+            evt.cancelBubble = true;
             volumeText.visible(false);
             self._peaks.emit('source.endVolumeChange', self._source);
         });
@@ -19621,19 +19726,19 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         const frameEndTime = this._view.pixelsToTime(frameOffset + width);
         var redraw = false;
         var isSourceGroupHovered = false;
-        var isSourceGroupActive = false;
+        var isSourceGroupDragged = false;
         if (sourceGroup) {
             isSourceGroupHovered = sourceGroup.isHovered();
-            isSourceGroupActive = sourceGroup.isActive();
+            isSourceGroupDragged = sourceGroup.isDragged();
             this._destroySourceGroup(source);
             redraw = true;
         }
-        if (source.isVisible(frameStartTime, frameEndTime) || isSourceGroupActive) {
+        if (source.isVisible(frameStartTime, frameEndTime) || isSourceGroupDragged) {
             const newSourceGroup = this._addSourceGroup(source);
             if (isSourceGroupHovered) {
                 newSourceGroup.startHover();
             }
-            if (isSourceGroupActive) {
+            if (isSourceGroupDragged) {
                 newSourceGroup.startDrag();
             }
             redraw = true;
@@ -19795,7 +19900,6 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             const sourceGroup = self._sourcesGroup[source.id];
             if (sourceGroup) {
                 sourceGroup.setDragging(false);
-                sourceGroup.prepareDragEnd();
                 self._lineGroups.addSource(source, sourceGroup);
                 sourceGroup.y(0);
             }
@@ -19803,9 +19907,7 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         });
         this._draggedElementId = null;
         this.refresh();
-        this._view.batchDrawSourcesLayer();
-        this._view.updateTimelineLength();
-        this._peaks.emit('sources.updated', updatedSources);
+        this.processSourceUpdates(updatedSources);
     };
     SourcesLayer.prototype.onSourcesGroupDrag = function (draggedElement) {
         var pointerPos = this._view.getPointerPosition();
@@ -19875,6 +19977,11 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             this.batchDraw();
         }
     };
+    SourcesLayer.prototype.processSourceUpdates = function (updatedSources) {
+        this._view.batchDrawSourcesLayer();
+        this._view.updateTimelineLength();
+        this._peaks.emit('sources.updated', updatedSources);
+    };
     SourcesLayer.prototype.findSources = function (startTime, endTime) {
         var sources = this._peaks.sourceHandler.find(startTime, endTime);
         var lineIds = this._lineGroups.getVisibleLines();
@@ -19985,7 +20092,9 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         for (var sourceId in this._sourcesGroup) {
             if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
                 var sourceGroup = this._sourcesGroup[sourceId];
-                if (!sourceGroup.isActive()) {
+                if (sourceGroup.isActive()) {
+                    sourceGroup.update();
+                } else {
                     var source = this._sourcesGroup[sourceId].getSource();
                     if (!this._isSourceVisible(source, startTime, endTime)) {
                         this._destroySourceGroup(source);
@@ -20392,83 +20501,104 @@ module.exports = function (Utils, Konva) {
         return height - Utils.clamp(height - scaledAmplitude, 0, height);
     }
     function WaveformShape(options) {
-        const shape = new Konva.Shape({ fill: options.source.color });
+        const shape = new Konva.Shape({
+            fill: options.color,
+            listening: false
+        });
         Object.assign(this, shape);
-        this._layer = options.layer;
         this._view = options.view;
-        this._source = options.source;
         this._height = options.height;
-        this._url = options.url + '-scaled';
-        this.sceneFunc(this._sceneFunc);
-        this.hitFunc(this._waveformShapeHitFunc);
+        this._waveformDataFunc = options.waveformDataFunc;
+        this.sceneFunc(function (context) {
+            var waveformPoints = this._waveformDataFunc ? this._waveformDataFunc() : null;
+            this._sceneFunc(context, waveformPoints);
+        });
     }
     WaveformShape.prototype = Object.create(Konva.Shape.prototype);
-    WaveformShape.prototype._sceneFunc = function (context) {
-        var width = this._view.getWidth();
-        var waveformData = this._layer.getLoadedData(this._url).data;
-        var startPixel = 0, startOffset = 0, endPixel = width, targetSpeed = 1;
-        if (this._source) {
-            targetSpeed = this._source.targetSpeed || 1;
-            startPixel = Math.floor((this._view.timeToPixels(this._source.mediaStartTime) + Math.max(this._view.getFrameOffset() - this._view.timeToPixels(this._source.startTime), 0)) * targetSpeed);
-            startOffset = this._view.timeToPixels(this._source.mediaStartTime);
-            endPixel = Math.min(Math.ceil((this._view.timeToPixels(this._source.mediaEndTime) - Math.max(this._view.timeToPixels(this._source.endTime) - this._view.getFrameOffset() - this._view.getWidth(), 0)) * targetSpeed), waveformData.length);
+    WaveformShape.prototype._sceneFunc = function (context, waveformPoints) {
+        if (!waveformPoints) {
+            return;
+        }
+        var xPoints = [];
+        var minByChannel = [];
+        var maxByChannel = [];
+        var channels = 0;
+        this._forEachWaveformPoint(waveformPoints, function (point) {
+            if (!point || !point.min || !point.max) {
+                return;
+            }
+            if (channels === 0) {
+                channels = point.min.length;
+                for (var c = 0; c < channels; c++) {
+                    minByChannel[c] = [];
+                    maxByChannel[c] = [];
+                }
+            }
+            xPoints.push(point.x);
+            for (var i = 0; i < channels; i++) {
+                minByChannel[i].push(point.min[i]);
+                maxByChannel[i].push(point.max[i]);
+            }
+        });
+        if (channels === 0 || xPoints.length === 0) {
+            return;
         }
-        this._drawWaveform(context, waveformData, startPixel, startOffset, endPixel, targetSpeed, this._height);
+        this._drawWaveformFromPoints(context, xPoints, minByChannel, maxByChannel, channels, this._height);
     };
-    WaveformShape.prototype._drawWaveform = function (context, waveformData, startPixel, startOffset, endPixel, targetSpeed, height) {
-        var channels = waveformData.channels;
+    WaveformShape.prototype._forEachWaveformPoint = function (waveformPoints, callback) {
+        if (!waveformPoints) {
+            return;
+        }
+        if (typeof waveformPoints.next === 'function') {
+            while (true) {
+                var result = waveformPoints.next();
+                if (!result || result.done) {
+                    break;
+                }
+                callback(result.value);
+            }
+            return;
+        }
+        if (typeof Symbol !== 'undefined' && waveformPoints[Symbol.iterator]) {
+            var iterator = waveformPoints[Symbol.iterator]();
+            while (true) {
+                var iterResult = iterator.next();
+                if (iterResult.done) {
+                    break;
+                }
+                callback(iterResult.value);
+            }
+            return;
+        }
+        if (Array.isArray(waveformPoints)) {
+            for (var i = 0; i < waveformPoints.length; i++) {
+                callback(waveformPoints[i]);
+            }
+        }
+    };
+    WaveformShape.prototype._drawWaveformFromPoints = function (context, xPoints, minByChannel, maxByChannel, channels, height) {
         var waveformTop = 0;
         var waveformHeight = Math.floor(height / channels);
         for (var i = 0; i < channels; i++) {
             if (i === channels - 1) {
                 waveformHeight = height - (channels - 1) * waveformHeight;
             }
-            this._drawChannel(context, waveformData.channel(i), startPixel, startOffset, endPixel, waveformTop, waveformHeight, targetSpeed);
+            this._drawChannelFromPoints(context, xPoints, minByChannel[i], maxByChannel[i], waveformTop, waveformHeight);
             waveformTop += waveformHeight;
         }
     };
-    WaveformShape.prototype._drawChannel = function (context, channel, startPixel, startOffset, endPixel, top, height, targetSpeed) {
-        var x, val;
+    WaveformShape.prototype._drawChannelFromPoints = function (context, xPoints, minValues, maxValues, top, height) {
         var amplitudeScale = this._view.getAmplitudeScale();
         context.beginPath();
-        for (x = startPixel; x < endPixel; x++) {
-            val = channel.min_sample(x);
-            context.lineTo(x / targetSpeed - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+        for (var i = 0; i < xPoints.length; i++) {
+            context.lineTo(xPoints[i], top + scaleY(minValues[i], height, amplitudeScale) + 0.5);
         }
-        for (x = endPixel - 1; x >= startPixel; x--) {
-            val = channel.max_sample(x);
-            context.lineTo(x / targetSpeed - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+        for (var j = xPoints.length - 1; j >= 0; j--) {
+            context.lineTo(xPoints[j], top + scaleY(maxValues[j], height, amplitudeScale) + 0.5);
         }
         context.closePath();
         context.fillShape(this);
     };
-    WaveformShape.prototype._waveformShapeHitFunc = function (context) {
-        if (!this._source) {
-            return;
-        }
-        var frameOffset = this._view.getFrameOffset();
-        var viewWidth = this._view.getWidth();
-        var startPixels = this._view.timeToPixels(this._source.startTime);
-        var endPixels = this._view.timeToPixels(this._source.endTime);
-        var offsetY = 10;
-        var hitRectHeight = this._height;
-        if (hitRectHeight < 0) {
-            hitRectHeight = 0;
-        }
-        var hitRectLeft = startPixels - frameOffset;
-        var hitRectWidth = endPixels - startPixels;
-        if (hitRectLeft < 0) {
-            hitRectWidth -= -hitRectLeft;
-            hitRectLeft = 0;
-        }
-        if (hitRectLeft + hitRectWidth > viewWidth) {
-            hitRectWidth -= hitRectLeft + hitRectWidth - viewWidth;
-        }
-        context.beginPath();
-        context.rect(hitRectLeft, offsetY, hitRectWidth, hitRectHeight);
-        context.closePath();
-        context.fillStrokeShape(this);
-    };
     return WaveformShape;
 }(_dereq_('../utils'), _dereq_('konva'));
 },{"../utils":116,"konva":43}],107:[function(_dereq_,module,exports){

package/src/components/line-group.js

@@ -197,7 +197,7 @@ define([
       this._sourcesGroup[source.id] = sourceGroup;
       // Only move to this group if not currently being dragged
       // (during drag, source stays in drag layer for z-order)
-      if (!sourceGroup.isActive()) {
+      if (!sourceGroup.isDragged()) {
         if (!sourceGroup.getParent() || !sourceGroup.isDescendantOf(this._group)) {
           sourceGroup.moveTo(this._group);
         }