@checksub_team/peaks_timeline 1.5.12 → 1.6.0-beta.0

package/package.json

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

package/peaks.js

@@ -15408,7 +15408,7 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
             sources: null,
             lineHeight: 80,
             segmentHeight: 32,
-            wrappedLineHeight: 20,
+            wrappedLineHeight: 30,
             emptyLineHeight: 10,
             interline: 10,
             padding: 30,
@@ -15427,6 +15427,9 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
             lineIndicatorIconColor: '#8A8F98',
             lineIndicatorSelectedTextColor: '#ccc',
             lineIndicatorSelectedIconColor: '#ccc',
+            sourceSelectedBorderWidth: 3,
+            sourceTextXOffset: 10,
+            sourceTextYOffset: 10,
             autoScrollThreshold: 0.05,
             enableLineIndicatorContextMenu: true,
             minSourceSize: 0.05,
@@ -17514,7 +17517,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     var SPACING_BETWEEN_PREVIEWS = 1.5;
     var HANDLE_WIDTH = 8;
     var CORNER_RADIUS = 8;
-    var SELECTED_BORDER_WIDTH = 6;
     function SourceGroup(source, peaks, layer, view) {
         this._source = source;
         this._peaks = peaks;
@@ -17525,6 +17527,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         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._borderWidth = this._source.borderWidth;
         this._previewList = [];
         this._group = new Konva.Group({
             x: this._x,
@@ -17534,9 +17537,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                     x: this.absolutePosition().x,
                     y: this.absolutePosition().y
                 };
-            },
-            clipFunc: function (ctx) {
-                self.drawSourceShape(ctx);
             }
         });
         this._group.on('dragstart', this._onSourceGroupDragStart.bind(this));
@@ -17555,9 +17555,15 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             }
         });
         this._group.on('dragend', this._onSourceGroupDragEnd.bind(this));
-        this._addWrap(true);
-        this._addUnwrap(true);
-        this._addTitle(true);
+        if (this._borderWidth) {
+            this._border = new Konva.Shape({
+                fill: this._source.borderColor,
+                sceneFunc: function (ctx, shape) {
+                    self.drawSourceShape(ctx, shape);
+                }
+            });
+            this._group.add(this._border);
+        }
         this._addHandles(true);
         this.setWrapping(source.wrapped);
     }
@@ -17612,18 +17618,20 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             this.updatePreviews();
         }
     };
-    SourceGroup.prototype.setWrapping = function (wrap) {
+    SourceGroup.prototype.setWrapping = function (wrap, forceCreate, notify) {
         if (wrap) {
-            this.wrap();
+            this._removeUnwrap();
+            this._addWrap(forceCreate);
             this._height = this._wrappedHeight;
         } else {
-            this.unwrap();
+            this._removeWrap();
+            this._addUnwrap(forceCreate);
             this._height = this._unwrappedHeight;
         }
-        if (this._title) {
-            this._title.y(this._getTitleY());
-        }
         this.setHandlesWrapping(wrap);
+        if (notify) {
+            this._peaks.emit('source.wrappingChanged', this);
+        }
     };
     SourceGroup.prototype.setHandlesWrapping = function (wrap) {
         if (wrap) {
@@ -17691,13 +17699,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         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) {
@@ -17725,27 +17726,35 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             this._rightHandle.draggable(bool);
         }
     };
-    SourceGroup.prototype.drawSourceShape = function (ctx, shape) {
+    SourceGroup.prototype.drawSourceShape = function (ctx, shape, addBorderWidth) {
+        var offset = addBorderWidth && this._borderWidth ? this._borderWidth : 0;
         var radius = this._source.borderRadius !== undefined && this._source.borderRadius !== null ? this._source.borderRadius : 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.moveTo(x + radius, offset);
+        ctx.lineTo(xWidth - radius, offset);
+        ctx.quadraticCurveTo(xWidth - offset, offset, xWidth - offset, radius);
+        ctx.lineTo(xWidth - offset, this._height - radius);
+        ctx.quadraticCurveTo(xWidth - offset, this._height - offset, xWidth - radius, this._height - offset);
+        ctx.lineTo(x + radius, this._height - offset);
+        ctx.quadraticCurveTo(x + offset, this._height - offset, x + offset, this._height - radius);
+        ctx.lineTo(x + offset, radius);
+        ctx.quadraticCurveTo(x + offset, offset, x + radius, offset);
         ctx.closePath();
         if (shape) {
             ctx.fillStrokeShape(shape);
         }
     };
+    SourceGroup.prototype._addUnwrap = function (forceCreate) {
+        if (!this._unwrap || forceCreate) {
+            this._unwrap = this._createUnwrap();
+        }
+        this._group.add(this._unwrap);
+    };
     SourceGroup.prototype._createUnwrap = function () {
+        var self = this;
         var unwrap = new Konva.Group({
             width: this._width,
             height: this._unwrappedHeight,
@@ -17755,15 +17764,15 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                     x: this.absolutePosition().x,
                     y: this.absolutePosition().y
                 };
+            },
+            clipFunc: function (ctx) {
+                self.drawSourceShape(ctx, null, true);
             }
         });
-        var self = this;
         var background = new Konva.Shape({
             fill: this._source.backgroundColor,
-            stroke: this._source.borderColor,
-            strokeWidth: this._source.borderWidth,
             sceneFunc: function (ctx, shape) {
-                self.drawSourceShape(ctx, shape);
+                self.drawSourceShape(ctx, shape, true);
             },
             draggable: this._source.draggable,
             dragBoundFunc: function () {
@@ -17787,17 +17796,24 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 }
             });
         }
+        var title = this._createTitle(false);
         unwrap.add(background);
+        unwrap.add(title);
         return unwrap;
     };
+    SourceGroup.prototype._removeUnwrap = function () {
+        if (this._unwrap) {
+            this._unwrap.remove();
+        }
+    };
     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 self = this;
         var wrap = new Konva.Group({
             width: this._width,
             height: this._wrappedHeight,
@@ -17807,15 +17823,15 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                     x: this.absolutePosition().x,
                     y: this.absolutePosition().y
                 };
+            },
+            clipFunc: function (ctx) {
+                self.drawSourceShape(ctx, null, true);
             }
         });
-        var self = this;
         var background = new Konva.Shape({
             fill: this._source.backgroundColor,
-            stroke: this._source.borderColor,
-            strokeWidth: this._source.borderWidth,
             sceneFunc: function (ctx, shape) {
-                self.drawSourceShape(ctx, shape);
+                self.drawSourceShape(ctx, shape, true);
             },
             draggable: this._source.draggable,
             dragBoundFunc: function () {
@@ -17839,31 +17855,23 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 }
             });
         }
+        var title = this._createTitle(true);
         wrap.add(background);
+        wrap.add(title);
         return wrap;
     };
-    SourceGroup.prototype._addTitle = function (forceCreate) {
-        if (!this._title || forceCreate) {
-            this._title = this._createTitle();
-        }
-        this._group.add(this._title);
-    };
-    SourceGroup.prototype._getTitleY = function () {
-        if (!this._title) {
-            return 0;
-        }
-        if (this._source.textPosition === 'bottom') {
-            return Math.max(this._height - this._title.getClientRect().height - 5, 5);
-        } else {
-            return 5;
+    SourceGroup.prototype._removeWrap = function () {
+        if (this._wrap) {
+            this._wrap.remove();
         }
     };
-    SourceGroup.prototype._createTitle = function () {
+    SourceGroup.prototype._createTitle = function (isWrap) {
         var self = this;
         var defaultWidth;
+        var y = this._source.textPosition === 'bottom' ? Math.max((isWrap ? this._wrappedHeight : this._unwrappedHeight) - this._source.textFontSize - this._peaks.options.sourceTextYOffset, this._peaks.options.sourceTextYOffset) : this._peaks.options.sourceTextYOffset;
         var title = new Konva.Text({
-            x: 5,
-            y: 5,
+            x: this._peaks.options.sourceTextXOffset,
+            y: y,
             text: Utils.removeLineBreaks(this._source.title),
             textAlign: 'left',
             verticalAlign: 'middle',
@@ -18079,28 +18087,40 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         });
     };
     SourceGroup.prototype.setSelected = function (isSelected) {
-        var background = this._unwrap.getChildren(function (node) {
-            return node.getClassName() === 'Shape';
-        });
-        if (background) {
+        if (this._border) {
             if (isSelected) {
-                background.stroke(this._source.selectedColor);
-                background.strokeWidth(SELECTED_BORDER_WIDTH);
+                this._border.fill(this._source.selectedColor);
+                this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
             } else {
-                background.stroke(this._source.borderColor);
-                background.strokeWidth(this._source.borderWidth);
+                this._border.fill(this._source.borderColor);
+                this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
             }
-        }
-        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);
+        } else {
+            if (this._unwrap) {
+                var unwrap_background = this._unwrap.getChildren(function (node) {
+                    return node.getClassName() === 'Shape';
+                });
+                if (unwrap_background) {
+                    if (isSelected) {
+                        unwrap_background.stroke(this._source.selectedColor);
+                        unwrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
+                    } else {
+                        unwrap_background.strokeWidth(0);
+                    }
+                }
+            }
+            if (this._wrap) {
+                var wrap_background = this._wrap.getChildren(function (node) {
+                    return node.getClassName() === 'Shape';
+                });
+                if (wrap_background) {
+                    if (isSelected) {
+                        wrap_background.stroke(this._source.selectedColor);
+                        wrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
+                    } else {
+                        wrap_background.strokeWidth(0);
+                    }
+                }
             }
         }
         this._view.drawSourcesLayer();
@@ -18192,34 +18212,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     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);
     };
@@ -19007,7 +18999,7 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
     SourcesLayer.prototype._onSourcesShow = function (sources) {
         var self = this;
         sources.forEach(function (source) {
-            self._sourcesGroup[source.id].unwrap(true);
+            self._sourcesGroup[source.id].setWrapping(false, true);
         });
         this._layer.draw();
     };
@@ -19034,14 +19026,14 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
     SourcesLayer.prototype._onSourcesShow = function (sources) {
         var self = this;
         sources.forEach(function (source) {
-            self._sourcesGroup[source.id].unwrap(true);
+            self._sourcesGroup[source.id].setWrapping(false, true);
         });
         this._layer.draw();
     };
     SourcesLayer.prototype._onSourcesHide = function (sources) {
         var self = this;
         sources.forEach(function (source) {
-            self._sourcesGroup[source.id].wrap(true);
+            self._sourcesGroup[source.id].setWrapping(true, true);
         });
         this._layer.draw();
     };
@@ -19255,7 +19247,6 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         this._peaks.off('sources.destroy', this._onSourcesDestroy);
         this._peaks.off('sources.show', this._onSourcesShow);
         this._peaks.off('sources.hide', this._onSourcesHide);
-        this._peaks.off('source.wrappingChanged', this._onSourceWrappingChanged);
         this._peaks.off('data.retrieved', this._onDataRetrieved);
         this._peaks.off('sources.refresh', this._onSourcesRefresh);
         this._peaks.off('segments.show', this._onSegmentsShow);

package/src/main.js

@@ -242,7 +242,7 @@ define([
        * This height will correspond to the height of the group
        * containing the line and title of the wrapped source.
        */
-      wrappedLineHeight:        20,
+      wrappedLineHeight:        30,
 
       /**
        * Height of an empty line, in pixels.
@@ -335,6 +335,21 @@ define([
        */
       lineIndicatorSelectedIconColor:    '#ccc',
 
+      /**
+       * Border width of a source when selected
+       */
+      sourceSelectedBorderWidth: 3,
+
+      /**
+       * X Offset of the text in the source, in pixels
+       */
+      sourceTextXOffset: 10,
+
+      /**
+       * Y Offset of the text in the source, in pixels
+       */
+      sourceTextYOffset: 10,
+
       /**
        * Threshold size on the left and right border of the view,
        * where auto scrolling is activated, between 0 and 1.
@@ -651,7 +666,7 @@ define([
    * @param {String} segmentId
    */
 
-   Peaks.prototype.destroySegment = function(segmentId) {
+  Peaks.prototype.destroySegment = function(segmentId) {
     this.segments.removeById(segmentId);
   };
 

package/src/source-group.js

@@ -22,7 +22,6 @@ define([
   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.
@@ -50,6 +49,7 @@ define([
                             source.binaryHeight + source.previewHeight :
                             this._peaks.options.lineHeight;
     this._wrappedHeight = this._peaks.options.wrappedLineHeight;
+    this._borderWidth = this._source.borderWidth;
 
     this._previewList = [];
 
@@ -61,9 +61,6 @@ define([
           x: this.absolutePosition().x,
           y: this.absolutePosition().y
         };
-      },
-      clipFunc: function(ctx) {
-        self.drawSourceShape(ctx);
       }
     });
 
@@ -84,9 +81,15 @@ define([
     });
     this._group.on('dragend', this._onSourceGroupDragEnd.bind(this));
 
-    this._addWrap(true);
-    this._addUnwrap(true);
-    this._addTitle(true);
+    if (this._borderWidth) {
+      this._border = new Konva.Shape({
+        fill: this._source.borderColor,
+        sceneFunc: function(ctx, shape) {
+          self.drawSourceShape(ctx, shape);
+        }
+      });
+      this._group.add(this._border);
+    }
     this._addHandles(true);
 
     this.setWrapping(source.wrapped);
@@ -207,21 +210,23 @@ define([
     }
   };
 
-  SourceGroup.prototype.setWrapping = function(wrap) {
+  SourceGroup.prototype.setWrapping = function(wrap, forceCreate, notify) {
     if (wrap) {
-      this.wrap();
+      this._removeUnwrap();
+      this._addWrap(forceCreate);
       this._height = this._wrappedHeight;
     }
     else {
-      this.unwrap();
+      this._removeWrap();
+      this._addUnwrap(forceCreate);
       this._height = this._unwrappedHeight;
     }
 
-    if (this._title) {
-      this._title.y(this._getTitleY());
-    }
-
     this.setHandlesWrapping(wrap);
+
+    if (notify) {
+      this._peaks.emit('source.wrappingChanged', this);
+    }
   };
 
   SourceGroup.prototype.setHandlesWrapping = function(wrap) {
@@ -302,15 +307,6 @@ define([
     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;
 
@@ -343,19 +339,20 @@ define([
     }
   };
 
-  SourceGroup.prototype.drawSourceShape = function(ctx, shape) {
+  SourceGroup.prototype.drawSourceShape = function(ctx, shape, addBorderWidth) {
+    var offset = addBorderWidth && this._borderWidth ? this._borderWidth : 0;
     var radius = this._source.borderRadius !== undefined && this._source.borderRadius !== null ?
-      this._source.borderRadius :
-      Math.max(
-        1,
+    this._source.borderRadius :
+    Math.max(
+      1,
+      Math.min(
+        this._width / 2,
         Math.min(
-          this._width / 2,
-          Math.min(
-            CORNER_RADIUS,
-            this._height / 2
-          )
+          CORNER_RADIUS,
+          this._height / 2
         )
-      );
+      )
+    );
     var x = Math.max(
       0,
       this._view.getFrameOffset() - this._x - radius
@@ -370,15 +367,20 @@ define([
     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.moveTo(x + radius, offset);
+    ctx.lineTo(xWidth - radius, offset);
+    ctx.quadraticCurveTo(xWidth - offset, offset, xWidth - offset, radius);
+    ctx.lineTo(xWidth - offset, this._height - radius);
+    ctx.quadraticCurveTo(
+      xWidth - offset,
+      this._height - offset,
+      xWidth - radius,
+      this._height - offset
+    );
+    ctx.lineTo(x + radius, this._height - offset);
+    ctx.quadraticCurveTo(x + offset, this._height - offset, x + offset, this._height - radius);
+    ctx.lineTo(x + offset, radius);
+    ctx.quadraticCurveTo(x + offset, offset, x + radius, offset);
     ctx.closePath();
 
     if (shape) {
@@ -386,7 +388,17 @@ define([
     }
   };
 
+  SourceGroup.prototype._addUnwrap = function(forceCreate) {
+    if (!this._unwrap || forceCreate) {
+      this._unwrap = this._createUnwrap();
+    }
+
+    this._group.add(this._unwrap);
+  };
+
   SourceGroup.prototype._createUnwrap = function() {
+    var self = this;
+
     var unwrap = new Konva.Group({
       width: this._width,
       height: this._unwrappedHeight,
@@ -396,17 +408,16 @@ define([
           x: this.absolutePosition().x,
           y: this.absolutePosition().y
         };
+      },
+      clipFunc: function(ctx) {
+        self.drawSourceShape(ctx, null, true);
       }
     });
 
-    var self = this;
-
     var background = new Konva.Shape({
       fill: this._source.backgroundColor,
-      stroke: this._source.borderColor,
-      strokeWidth: this._source.borderWidth,
       sceneFunc: function(ctx, shape) {
-        self.drawSourceShape(ctx, shape);
+        self.drawSourceShape(ctx, shape, true);
       },
       draggable: this._source.draggable,
       dragBoundFunc: function() {
@@ -434,21 +445,31 @@ define([
       });
     }
 
+    var title = this._createTitle(false);
+
     unwrap.add(background);
+    unwrap.add(title);
 
     return unwrap;
   };
 
+  SourceGroup.prototype._removeUnwrap = function() {
+    if (this._unwrap) {
+      this._unwrap.remove();
+    }
+  };
+
   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 self = this;
+
     var wrap = new Konva.Group({
       width: this._width,
       height: this._wrappedHeight,
@@ -458,17 +479,16 @@ define([
           x: this.absolutePosition().x,
           y: this.absolutePosition().y
         };
+      },
+      clipFunc: function(ctx) {
+        self.drawSourceShape(ctx, null, true);
       }
     });
 
-    var self = this;
-
     var background = new Konva.Shape({
       fill: this._source.backgroundColor,
-      stroke: this._source.borderColor,
-      strokeWidth: this._source.borderWidth,
       sceneFunc: function(ctx, shape) {
-        self.drawSourceShape(ctx, shape);
+        self.drawSourceShape(ctx, shape, true);
       },
       draggable: this._source.draggable,
       dragBoundFunc: function() {
@@ -496,39 +516,33 @@ define([
       });
     }
 
+    var title = this._createTitle(true);
+
     wrap.add(background);
+    wrap.add(title);
 
     return wrap;
   };
 
-  SourceGroup.prototype._addTitle = function(forceCreate) {
-    if (!this._title || forceCreate) {
-      this._title = this._createTitle();
-    }
-
-    this._group.add(this._title);
-  };
-
-  SourceGroup.prototype._getTitleY = function() {
-    if (!this._title) {
-      return 0;
-    }
-
-    if (this._source.textPosition === 'bottom') {
-      return Math.max(this._height - this._title.getClientRect().height - 5, 5);
-    }
-    else {
-      return 5;
+  SourceGroup.prototype._removeWrap = function() {
+    if (this._wrap) {
+      this._wrap.remove();
     }
   };
 
-  SourceGroup.prototype._createTitle = function() {
+  SourceGroup.prototype._createTitle = function(isWrap) {
     var self = this;
     var defaultWidth;
+    var y = (this._source.textPosition === 'bottom') ?
+      Math.max(
+        (isWrap ? this._wrappedHeight : this._unwrappedHeight)
+          - this._source.textFontSize - this._peaks.options.sourceTextYOffset,
+        this._peaks.options.sourceTextYOffset
+      ) : this._peaks.options.sourceTextYOffset;
 
     var title = new Konva.Text({
-      x: 5,
-      y: 5,
+      x: this._peaks.options.sourceTextXOffset,
+      y: y,
       text: Utils.removeLineBreaks(this._source.title),
       textAlign: 'left',
       verticalAlign: 'middle',
@@ -807,35 +821,49 @@ define([
   };
 
   SourceGroup.prototype.setSelected = function(isSelected) {
-    // update unwrap
-    var background = this._unwrap.getChildren(function(node) {
-      return node.getClassName() === 'Shape';
-    });
-
-    if (background) {
+    if (this._border) {
       if (isSelected) {
-        background.stroke(this._source.selectedColor);
-        background.strokeWidth(SELECTED_BORDER_WIDTH);
+        this._border.fill(this._source.selectedColor);
+        this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
       }
       else {
-        background.stroke(this._source.borderColor);
-        background.strokeWidth(this._source.borderWidth);
+        this._border.fill(this._source.borderColor);
+        this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
       }
     }
+    else {
+      if (this._unwrap) {
+        // update unwrap
+        var unwrap_background = this._unwrap.getChildren(function(node) {
+          return node.getClassName() === 'Shape';
+        });
 
-    // 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);
+        if (unwrap_background) {
+          if (isSelected) {
+            unwrap_background.stroke(this._source.selectedColor);
+            unwrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
+          }
+          else {
+            unwrap_background.strokeWidth(0);
+          }
+        }
       }
-      else {
-        background.stroke(this._source.borderColor);
-        background.strokeWidth(this._source.borderWidth);
+
+      if (this._wrap) {
+        // update wrap
+        var wrap_background = this._wrap.getChildren(function(node) {
+          return node.getClassName() === 'Shape';
+        });
+
+        if (wrap_background) {
+          if (isSelected) {
+            wrap_background.stroke(this._source.selectedColor);
+            wrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
+          }
+          else {
+            wrap_background.strokeWidth(0);
+          }
+        }
       }
     }
 
@@ -961,40 +989,6 @@ define([
     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);
   };

package/src/sources-layer.js

@@ -155,7 +155,7 @@ define([
     var self = this;
 
     sources.forEach(function(source) {
-      self._sourcesGroup[source.id].unwrap(true);
+      self._sourcesGroup[source.id].setWrapping(false, true);
     });
 
     this._layer.draw();
@@ -195,7 +195,7 @@ define([
     var self = this;
 
     sources.forEach(function(source) {
-      self._sourcesGroup[source.id].unwrap(true);
+      self._sourcesGroup[source.id].setWrapping(false, true);
     });
 
     this._layer.draw();
@@ -205,7 +205,7 @@ define([
     var self = this;
 
     sources.forEach(function(source) {
-      self._sourcesGroup[source.id].wrap(true);
+      self._sourcesGroup[source.id].setWrapping(true, true);
     });
 
     this._layer.draw();
@@ -565,7 +565,6 @@ define([
     this._peaks.off('sources.destroy', this._onSourcesDestroy);
     this._peaks.off('sources.show', this._onSourcesShow);
     this._peaks.off('sources.hide', this._onSourcesHide);
-    this._peaks.off('source.wrappingChanged', this._onSourceWrappingChanged);
     this._peaks.off('data.retrieved', this._onDataRetrieved);
     this._peaks.off('sources.refresh', this._onSourcesRefresh);
     this._peaks.off('segments.show', this._onSegmentsShow);