@checksub_team/peaks_timeline 1.4.17

package/src/source-group.js

@@ -0,0 +1,975 @@
+/**
+ * @file
+ *
+ * Defines the {@link SourceGroup} class.
+ *
+ * @module source-group
+ */
+
+define([
+  './waveform-builder',
+  './waveform-shape',
+  './utils',
+  'konva'
+  ], function(
+    WaveformBuilder,
+    WaveformShape,
+    Utils,
+    Konva) {
+  'use strict';
+
+  var SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO = 0.15;
+  var SPACING_BETWEEN_PREVIEWS = 1.5;
+  var HANDLE_WIDTH = 8;
+  var CORNER_RADIUS = 8;
+  var SELECTED_BORDER_WIDTH = 6;
+
+  /**
+   * Creates a source group for the given source.
+   *
+   * @class
+   * @alias SourceGroup
+   *
+   * @param {Source} source
+   * @param {Peaks} peaks
+   * @param {SourcesLayer} layer
+   * @param {WaveformOverview|WaveformZoomView} view
+   */
+
+  function SourceGroup(source, peaks, layer, view) {
+    this._source        = source;
+    this._peaks         = peaks;
+    this._layer         = layer;
+    this._view          = view;
+
+    var self = this;
+
+    this._x = this._view.timeToPixels(source.startTime);
+    this._width = this._view.timeToPixels(source.endTime - source.startTime);
+    this._unwrappedHeight = source.binaryHeight && source.previewHeight ?
+                            source.binaryHeight + source.previewHeight :
+                            this._peaks.options.lineHeight;
+    this._wrappedHeight = this._peaks.options.wrappedLineHeight;
+
+    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
+        };
+      },
+      clipFunc: function(ctx) {
+        self.drawSourceShape(ctx);
+      }
+    });
+
+    this._group.on('dragstart', this._onSourceGroupDragStart.bind(this));
+    this._group.on('mouseover', function() {
+      self._view.setHoveredElement(self);
+      if (self._view.getCurrentMode() === 'cut') {
+        self.toggleDragging(false);
+        self.toggleResizing(false);
+      }
+    });
+    this._group.on('mouseout', function() {
+      self._view.setHoveredElement(null);
+      if (self._view.getCurrentMode() === 'cut') {
+        self.toggleDragging(true);
+        self.toggleResizing(true);
+      }
+    });
+    this._group.on('dragend', this._onSourceGroupDragEnd.bind(this));
+
+    this._addWrap(true);
+    this._addUnwrap(true);
+    this._addHandles(true);
+
+    this.setWrapping(source.wrapped);
+  }
+
+  SourceGroup.prototype.rescale = function() {
+    this.update();
+
+    this._previewList.forEach(function(preview) {
+      if (preview.loaded) {
+        switch (preview.type) {
+          case 'audio':
+            preview.group.getChildren()[0].rescale();
+            break;
+          case 'video':
+          case 'image':
+          default:
+            // No resampling
+        }
+      }
+    });
+  };
+
+  SourceGroup.prototype._onSourceGroupDragStart = function() {
+    this._dragged = true;
+    this._mouseDownX = this._view.getPointerPosition().x;
+    this._initialStartTime = this._source.startTime;
+    this._initialStartPixel = this._view.timeToPixels(this._initialStartTime);
+    this._initialEndTime = this._source.endTime;
+    this._initialEndPixel = this._view.timeToPixels(this._initialEndTime);
+    this._initialFrameOffset = this._view.getFrameOffset();
+  };
+
+  SourceGroup.prototype._onSourceGroupDragEnd = function() {
+    this._dragged = false;
+    this._view.updateTimelineLength();
+    this._peaks.emit('sources.updated');
+  };
+
+  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()
+        );
+      }
+    );
+
+    return {
+      x: pos.x,
+      y: pos.y
+    };
+  };
+
+  SourceGroup.prototype._onSourceGroupHandleDrag = function(draggedElement, dragPos, leftHandle) {
+    var self = this;
+
+    var pos = this._view.updateWithAutoScroll(
+      draggedElement,
+      function() {
+        self._layer.updateSource(
+          self._source,
+          leftHandle ? dragPos.x + self._view.getFrameOffset() : null,
+          leftHandle ? null : dragPos.x + draggedElement.width() + self._view.getFrameOffset()
+        );
+      }
+    );
+
+    this._view.setTimelineLength(
+      this._view.timeToPixels(this._source.endTime) + this._view.getWidth()
+    );
+
+    return {
+      x: pos.x,
+      y: pos.y
+    };
+  };
+
+  SourceGroup.prototype.update = function() {
+    var startPixel = this._view.timeToPixels(this._source.startTime);
+    var endPixel   = this._view.timeToPixels(this._source.endTime);
+    var frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
+
+    this._group.x(startPixel - frameOffset);
+
+    this._x = startPixel;
+
+    var newWidth = endPixel - startPixel;
+
+    if (newWidth !== this._width) {
+      this._width = newWidth;
+
+      // update handles
+      this._rightHandle.x(newWidth - HANDLE_WIDTH);
+
+      // update unwrap
+      this.updatePreviews();
+
+      // update wrap
+      var title = this._wrap.getChildren(function(node) {
+        return node.getClassName() === 'Text';
+      });
+
+      if (title) {
+        title.width(newWidth - 10);
+      }
+    }
+  };
+
+  SourceGroup.prototype.setWrapping = function(wrap) {
+    if (wrap) {
+      this.wrap();
+      this._height = this._wrappedHeight;
+    }
+    else {
+      this.unwrap();
+      this._height = this._unwrappedHeight;
+    }
+
+    this.setHandlesWrapping(wrap);
+  };
+
+  SourceGroup.prototype.setHandlesWrapping = function(wrap) {
+    if (wrap) {
+      this._leftHandle.height(this._wrappedHeight);
+      this._rightHandle.height(this._wrappedHeight);
+    }
+    else {
+      this._leftHandle.height(this._unwrappedHeight);
+      this._rightHandle.height(this._unwrappedHeight);
+    }
+  };
+
+  SourceGroup.prototype._addHandles = function(forceCreate) {
+    var self = this;
+
+    if (!this._leftHandle || forceCreate) {
+      this._leftHandle = new Konva.Rect({
+        x: 0,
+        width: HANDLE_WIDTH,
+        height: this._unwrappedHeight,
+        visible: true,
+        draggable: this._source.resizable,
+        dragBoundFunc: function(pos) {
+          return self._onSourceGroupHandleDrag(this, pos, true);
+        }
+      });
+
+      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');
+        });
+
+        this._leftHandle.on('mouseout', function() {
+          self._view.setCursor('default');
+        });
+      }
+    }
+
+    if (!this._rightHandle || forceCreate) {
+      this._rightHandle = new Konva.Rect({
+        x: this._width - HANDLE_WIDTH,
+        width: HANDLE_WIDTH,
+        height: this._unwrappedHeight,
+        visible: true,
+        draggable: this._source.resizable,
+        dragBoundFunc: function(pos) {
+          return self._onSourceGroupHandleDrag(this, pos, false);
+        }
+      });
+
+      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');
+        });
+
+        this._rightHandle.on('mouseout', function() {
+          self._view.setCursor('default');
+        });
+      }
+    }
+
+    this._group.add(this._leftHandle);
+    this._group.add(this._rightHandle);
+  };
+
+  SourceGroup.prototype._addUnwrap = function(forceCreate) {
+    if (!this._unwrap || forceCreate) {
+      this._unwrap = this._createUnwrap();
+      this._unwrap.visible(false);
+    }
+
+    this._group.add(this._unwrap);
+  };
+
+  SourceGroup.prototype.toggleDragging = function(bool) {
+    var background;
+
+    if (this._wrap) {
+      background = this._wrap.getChildren(function(node) {
+        return node.getClassName() === 'Shape';
+      });
+
+      if (background) {
+        background.draggable(bool);
+      }
+    }
+    if (this._unwrap) {
+      background = this._unwrap.getChildren(function(node) {
+        return node.getClassName() === 'Shape';
+      });
+
+      if (background) {
+        background.draggable(bool);
+      }
+    }
+  };
+
+  SourceGroup.prototype.toggleResizing = function(bool) {
+    if (this._leftHandle) {
+      this._leftHandle.draggable(bool);
+    }
+    if (this._rightHandle) {
+      this._rightHandle.draggable(bool);
+    }
+  };
+
+  SourceGroup.prototype.drawSourceShape = function(ctx, shape) {
+    var radius = Math.max(
+      1,
+      Math.min(
+        this._width / 2,
+        Math.min(
+          CORNER_RADIUS,
+          this._height / 2
+        )
+      )
+    );
+    var x = Math.max(
+      0,
+      this._view.getFrameOffset() - this._x - radius
+    );
+    var width = Math.min(
+      this._width - x,
+      this._view.getOriginalWidth() + radius - Math.max(
+        0,
+        this._x - this._view.getFrameOffset()
+      )
+    );
+    var xWidth = x + width;
+
+    ctx.beginPath();
+    ctx.moveTo(x + radius, 0);
+    ctx.lineTo(xWidth - radius, 0);
+    ctx.quadraticCurveTo(xWidth, 0, xWidth, radius);
+    ctx.lineTo(xWidth, this._height - radius);
+    ctx.quadraticCurveTo(xWidth, this._height, xWidth - radius, this._height);
+    ctx.lineTo(x + radius, this._height);
+    ctx.quadraticCurveTo(x, this._height, x, this._height - radius);
+    ctx.lineTo(x, radius);
+    ctx.quadraticCurveTo(x, 0, x + radius, 0);
+    ctx.closePath();
+
+    if (shape) {
+      ctx.fillStrokeShape(shape);
+    }
+  };
+
+  SourceGroup.prototype._createUnwrap = function() {
+    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
+        };
+      }
+    });
+
+    var self = this;
+
+    var background = new Konva.Shape({
+      fill: this._source.color,
+      stroke: this._source.borderColor,
+      strokeWidth: this._source.borderWidth,
+      sceneFunc: function(ctx, shape) {
+        self.drawSourceShape(ctx, shape);
+      },
+      draggable: this._source.draggable,
+      dragBoundFunc: function() {
+        return self._onSourceGroupDrag(this);
+      }
+    });
+
+    if (this._source.draggable) {
+      background.on('mouseenter', function() {
+        self._view.setCursor('pointer');
+      });
+      background.on('mouseout', function() {
+        self._view.setCursor('default');
+      });
+
+      background.on('dragstart', function() {
+        this._scrollInterval = null;
+      });
+
+      background.on('dragend', function() {
+        if (this._scrollingInterval) {
+          clearInterval(this._scrollingInterval);
+          this._scrollingInterval = null;
+        }
+      });
+    }
+
+    unwrap.add(background);
+
+    return unwrap;
+  };
+
+  SourceGroup.prototype._addWrap = function(forceCreate) {
+    if (!this._wrap || forceCreate) {
+      this._wrap = this._createWrap();
+      this._wrap.visible(false);
+    }
+
+    this._group.add(this._wrap);
+  };
+
+  SourceGroup.prototype._createWrap = function() {
+    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
+        };
+      }
+    });
+
+    var self = this;
+
+    var background = new Konva.Shape({
+      fill: this._source.color,
+      stroke: this._source.borderColor,
+      strokeWidth: this._source.borderWidth,
+      sceneFunc: function(ctx, shape) {
+        self.drawSourceShape(ctx, shape);
+      },
+      draggable: this._source.draggable,
+      dragBoundFunc: function() {
+        return self._onSourceGroupDrag(this);
+      }
+    });
+
+    if (this._source.draggable) {
+      background.on('mouseenter', function() {
+        self._view.setCursor('pointer');
+      });
+      background.on('mouseout', function() {
+        self._view.setCursor('default');
+      });
+
+      background.on('dragstart', function() {
+        this._scrollInterval = null;
+      });
+
+      background.on('dragend', function() {
+        if (this._scrollingInterval) {
+          clearInterval(this._scrollingInterval);
+          this._scrollingInterval = null;
+        }
+      });
+    }
+
+    var title = new Konva.Text({
+      x: 5,
+      width: this._width - 10,
+      height: this._wrappedHeight,
+      text: Utils.removeLineBreaks(this._source.title),
+      textAlign: 'left',
+      verticalAlign: 'middle',
+      fontSize: 14,
+      fontFamily: 'Open Sans',
+      fill: this._source.textColor,
+      wrap: 'none',
+      ellipsis: true,
+      listening: false
+    });
+
+    wrap.add(background);
+    wrap.add(title);
+
+    return wrap;
+  };
+
+  SourceGroup.prototype.getWidth = function() {
+    return this._width;
+  };
+
+  SourceGroup.prototype.getX = function() {
+    return this._x;
+  };
+
+  SourceGroup.prototype.getY = function() {
+    return this._group.absolutePosition().y;
+  };
+
+  SourceGroup.prototype.x = function(value) {
+    if (value) {
+      return this._group.x(value);
+    }
+    else {
+      return this._group.x();
+    }
+  };
+
+  SourceGroup.prototype.y = function(value) {
+    if (value) {
+      return this._group.y(value);
+    }
+    else {
+      return this._group.y();
+    }
+  };
+
+  SourceGroup.prototype.getSource = function() {
+    return this._source;
+  };
+
+  SourceGroup.prototype.startDrag = function() {
+    return this._group.startDrag();
+  };
+
+  SourceGroup.prototype.stopDrag = function() {
+    return this._group.stopDrag();
+  };
+
+  SourceGroup.prototype.addToGroup = function(group) {
+    group.add(this._group);
+  };
+
+  SourceGroup.prototype.isDescendantOf = function(group) {
+    group.isAncestorOf(this._group);
+  };
+
+  SourceGroup.prototype.moveTo = function(group) {
+    this._group.moveTo(group);
+  };
+
+  SourceGroup.prototype.getParent = function() {
+    return this._group.getParent();
+  };
+
+  SourceGroup.prototype.remove = function() {
+    this._group.remove();
+  };
+
+  SourceGroup.prototype.add = function(element) {
+    this._group.add(element);
+  };
+
+  SourceGroup.prototype.addImagePreview = function(content, url, redraw) {
+    var preview = {
+      type: 'image',
+      group: new Konva.Group({
+        height: this._unwrappedHeight,
+        listening: false
+      })
+    };
+
+    var imageData = this._layer.getLoadedData(url);
+
+    if (!imageData) {
+      imageData = new Image();
+
+      var self = this;
+
+      imageData.onload = function() {
+        self._layer.setLoadedData(url, this);
+        preview.loaded = true;
+        self._createImagePreview(preview, imageData, redraw);
+      };
+
+      imageData.src = content;
+    }
+    else {
+      preview.loaded = true;
+      this._createImagePreview(preview, imageData, redraw);
+    }
+  };
+
+  SourceGroup.prototype.addVideoPreview = function(content, url, redraw) {
+    var preview = {
+      type: 'video',
+      group: new Konva.Group({
+        y: this._source.binaryUrl && this._source.previewUrl ? this._source.binaryHeight : 0,
+        height: this._source.binaryUrl && this._source.previewUrl ?
+                  this._source.previewHeight : this._unwrappedHeight,
+        listening: false
+      })
+    };
+
+    var imageData = this._layer.getLoadedData(url);
+
+    if (!imageData) {
+      var video = document.createElement('video');
+      var self = this;
+
+      video.onloadeddata = function() {
+        this.currentTime = this.duration / 2;
+
+        var canvas = document.createElement('canvas');
+
+        canvas.width = this.videoWidth;
+        canvas.height = this.videoHeight;
+        canvas.getContext('2d').drawImage(this, 0, 0, canvas.width, canvas.height);
+
+        imageData = new Image();
+
+        imageData.onload = function() {
+          self._layer.setLoadedData(url, this);
+          preview.loaded = true;
+          self._createImagePreview(preview, imageData, redraw);
+        };
+
+        imageData.src = canvas.toDataURL();
+      };
+
+      video.src = content;
+    }
+    else {
+      preview.loaded = true;
+      this._createImagePreview(preview, imageData, redraw);
+    }
+  };
+
+  SourceGroup.prototype.addAudioPreview = function(type, content, url, redraw) {
+    var preview = {
+      type: 'audio',
+      group: new Konva.Group({
+        height: this._source.binaryUrl && this._source.previewUrl ?
+                this._source.binaryHeight : this._unwrappedHeight,
+        listening: false
+      })
+    };
+
+    var self = this;
+
+    var audioData = this._layer.getLoadedData(url);
+
+    if (!audioData) {
+      var waveformBuilder = new WaveformBuilder(this._peaks);
+      var options = Object.assign({},this._peaks.options);
+
+      if (type === 'audio') {
+        options.objectUrl = content;
+      }
+      else {
+        options.dataUri = content;
+      }
+
+      waveformBuilder.init(options, function(err, originalWaveformData) {
+        if (err) {
+          throw err;
+        }
+
+        originalWaveformData.hasAudio = self._hasAudio(originalWaveformData);
+
+        if (originalWaveformData.hasAudio) {
+          var newScale = originalWaveformData.sample_rate / self._view.getTimeToPixelsMaxZoom();
+
+          if (newScale > originalWaveformData.scale) {
+            self._minScale = newScale;
+          }
+          else {
+            self._minScale = originalWaveformData.scale;
+          }
+
+          self._view.setTimeToPixelsMaxZoom(originalWaveformData.sample_rate / self._minScale);
+        }
+
+        self._layer.setLoadedData(url, originalWaveformData);
+        preview.loaded = true;
+        self._createAudioPreview(preview, originalWaveformData, redraw);
+      });
+    }
+    else {
+      preview.loaded = true;
+      this._createAudioPreview(preview, audioData, redraw);
+    }
+  };
+
+  SourceGroup.prototype._hasAudio = function(waveformData) {
+    var channels = waveformData.channels;
+    var channel, someIsNotZero = false;
+
+    for (var i = 0; i < channels; i++) {
+      channel = waveformData.channel(i);
+
+      someIsNotZero = channel.min_array().some(function(item) {
+        return item !== 0;
+      });
+
+      if (!someIsNotZero) {
+        someIsNotZero = channel.max_array().some(function(item) {
+          return item !== 0;
+        });
+      }
+
+      if (someIsNotZero) {
+        break;
+      }
+    }
+
+    return someIsNotZero;
+  };
+
+  SourceGroup.prototype._createAudioPreview = function(preview, waveformData, redraw) {
+    if (waveformData.hasAudio) {
+      var waveform = new WaveformShape({
+        view: this._view,
+        color: this._peaks.options.zoomWaveformColor,
+        waveformData: waveformData,
+        source: this._source,
+        height: preview.group.height()
+      });
+
+      preview.group.add(waveform);
+      this._unwrap.add(preview.group);
+
+      if (redraw) {
+        this._group.draw();
+      }
+
+      this._previewList.push(preview);
+    }
+  };
+
+  SourceGroup.prototype.setSelected = function(isSelected) {
+    // update unwrap
+    var background = this._unwrap.getChildren(function(node) {
+      return node.getClassName() === 'Shape';
+    });
+
+    if (background) {
+      if (isSelected) {
+        background.stroke(this._source.selectedColor);
+        background.strokeWidth(SELECTED_BORDER_WIDTH);
+      }
+      else {
+        background.stroke(this._source.borderColor);
+        background.strokeWidth(this._source.borderWidth);
+      }
+    }
+
+    // update wrap
+    background = this._wrap.getChildren(function(node) {
+      return node.getClassName() === 'Shape';
+    });
+
+    if (background) {
+      if (isSelected) {
+        background.stroke(this._source.selectedColor);
+        background.strokeWidth(SELECTED_BORDER_WIDTH);
+      }
+      else {
+        background.stroke(this._source.borderColor);
+        background.strokeWidth(this._source.borderWidth);
+      }
+    }
+
+    this._view.drawSourcesLayer();
+  };
+
+  SourceGroup.prototype.updatePreviews = function() {
+    var self = this;
+
+    this._previewList.forEach(function(preview) {
+      if (preview.loaded) {
+        switch (preview.type) {
+          case 'video':
+          case 'image':
+            // image or video preview
+            if (self._unwrappedHeight !== preview.imageData.referenceHeight) {
+              preview.imageData.referenceHeight = preview.group.height();
+              preview.imageData.borderSpacing   = SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO
+                                                  * preview.imageData.referenceHeight;
+              preview.imageData.height          = preview.imageData.referenceHeight
+                                                  - (2 * preview.imageData.borderSpacing);
+              preview.imageData.width           = preview.imageData.height
+                                                  * preview.imageData.dimRatio;
+              preview.imageData.imageSpacing    = preview.imageData.width
+                                                  * SPACING_BETWEEN_PREVIEWS;
+            }
+
+            var interImageSpacing = preview.imageData.width + preview.imageData.imageSpacing;
+            var imageNumber;
+
+            if (self._width > preview.imageData.borderSpacing) {
+              imageNumber = Math.trunc(
+                (self._width - preview.imageData.borderSpacing)
+                  / interImageSpacing
+              ) + 1;
+            }
+            else {
+              imageNumber = 0;
+            }
+
+            var imageList = preview.group.getChildren();
+
+            var i = 0;
+
+            for (i = 0; i < imageNumber; i++) {
+              if (imageList.length > i) {
+                imageList[i].visible(true);
+              }
+              else {
+                var imagePreview = new Konva.Image({
+                  x: preview.imageData.borderSpacing + i * interImageSpacing,
+                  y: preview.imageData.borderSpacing,
+                  image: preview.imageData.image,
+                  width: preview.imageData.width,
+                  height: preview.imageData.height,
+                  listening: false,
+                  visible: true
+                });
+
+                preview.group.add(imagePreview);
+              }
+            }
+
+            for (i = imageNumber; i < imageList.length; i++) {
+              imageList[i].visible(false);
+            }
+        }
+      }
+    });
+  };
+
+  SourceGroup.prototype._createImagePreview = function(preview, image, redraw) {
+    preview.imageData = {
+      image: image,
+      referenceHeight: null,
+      dimRatio: null,
+      borderSpacing: null,
+      height: null,
+      width: null,
+      imageSpacing: null
+    };
+
+    preview.imageData.referenceHeight = preview.group.height();
+    preview.imageData.dimRatio = image.width / image.height;
+    preview.imageData.borderSpacing = SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO
+                                      * preview.imageData.referenceHeight;
+    preview.imageData.height = preview.imageData.referenceHeight
+                                - (2 * preview.imageData.borderSpacing);
+    preview.imageData.width = preview.imageData.height * preview.imageData.dimRatio;
+    preview.imageData.imageSpacing = preview.imageData.width * SPACING_BETWEEN_PREVIEWS;
+
+    var currentX = preview.imageData.borderSpacing;
+
+    while (currentX < this._width) {
+      var imagePreview = new Konva.Image({
+        x: currentX,
+        y: preview.imageData.borderSpacing,
+        image: image,
+        width: preview.imageData.width,
+        height: preview.imageData.height,
+        listening: false
+      });
+
+      preview.group.add(imagePreview);
+
+      currentX += preview.imageData.width + preview.imageData.imageSpacing;
+    }
+
+    this._unwrap.add(preview.group);
+
+    if (redraw) {
+      this._group.draw();
+    }
+
+    this._previewList.push(preview);
+  };
+
+  SourceGroup.prototype.isWrapped = function() {
+    return this._source.wrapped;
+  };
+
+  SourceGroup.prototype.getCurrentHeight = function() {
+    return this._height;
+  };
+
+  SourceGroup.prototype.wrap = function(notify) {
+    if (!this._wrap.visible()) {
+      if (this._wrap) {
+        this._wrap.visible(true);
+        if (this._unwrap) {
+          this._unwrap.visible(false);
+        }
+
+        this._source.wrapped = true;
+
+        if (notify) {
+          this._peaks.emit('source.wrappingChanged', this);
+        }
+      }
+    }
+  };
+
+  SourceGroup.prototype.unwrap = function(notify) {
+    if (!this._unwrap.visible()) {
+      if (this._unwrap) {
+        this._unwrap.visible(true);
+        if (this._wrap) {
+          this._wrap.visible(false);
+        }
+
+        this._source.wrapped = false;
+
+        if (notify) {
+          this._peaks.emit('source.wrappingChanged', this);
+        }
+      }
+    }
+  };
+
+  SourceGroup.prototype.setVisible = function(boolean) {
+    this._group.visible(boolean);
+  };
+
+  SourceGroup.prototype.setListening = function(boolean) {
+    this._group.listening(boolean);
+  };
+
+  SourceGroup.prototype.isVisible = function() {
+    return this._group.visible();
+  };
+
+  SourceGroup.prototype.isDragged = function() {
+    return this._dragged;
+  };
+
+  SourceGroup.prototype.destroy = function() {
+    this._group.destroy();
+  };
+
+  return SourceGroup;
+});