@checksub_team/peaks_timeline 1.5.10 → 1.5.12

package/package.json

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

package/peaks.js

@@ -14376,7 +14376,7 @@ module.exports = function (Konva, Utils, SVGs) {
             var textNode = new Konva.Text({
                 text: text,
                 fontSize: this._sizes.font,
-                fontFamily: 'Arial',
+                fontFamily: this._peaks.options.lineIndicatorFont,
                 fill: this._peaks.options.lineIndicatorTextColor,
                 align: 'center',
                 width: this._width
@@ -14450,7 +14450,6 @@ module.exports = function (Konva, Utils, SVGs) {
     LineIndicator.prototype.removeIndicator = function (lineId, keepInList) {
         if (this._indicators[lineId]) {
             if (this._indicators[lineId].indicator) {
-                console.log('remove', lineId);
                 this._indicators[lineId].indicator.destroy();
             }
             if (!keepInList) {
@@ -15422,6 +15421,7 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
             lineIndicatorNoVolumeIconSize: 24,
             lineIndicatorVisibilityIconSize: 24,
             lineIndicatorNoVisibilityIconSize: 24,
+            lineIndicatorFont: 'Arial',
             lineIndicatorFontSize: 10,
             lineIndicatorTextColor: '#8A8F98',
             lineIndicatorIconColor: '#8A8F98',
@@ -15765,7 +15765,9 @@ module.exports = function (Utils, SourceGroup, Konva) {
             var selectedElement = this._selectedElement;
             this.deselectElement(true);
             if (selectedElement instanceof SourceGroup) {
-                this._peaks.destroySource(selectedElement.getSource().id);
+                if (selectedElement.isDeletable()) {
+                    this._peaks.destroySource(selectedElement.getSource().id);
+                }
             } else {
                 if (selectedElement.getSegment().allowDeletion) {
                     this._peaks.destroySegment(selectedElement.getSegment().id);
@@ -15779,7 +15781,7 @@ module.exports = function (Utils, SourceGroup, Konva) {
     };
     ModeLayer.prototype._updateCursorTime = function (mousePosition) {
         var hoveredElement = this._view.getHoveredElement();
-        if (hoveredElement && hoveredElement instanceof SourceGroup) {
+        if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
             this._timeLabel.text(Utils.formatTime(this._view.pixelsToTime(mousePosition.x + this._view.getFrameOffset()), false));
             this._timeBackground.width(this._timeLabel.width() + 8);
             this._cursorTime.x(mousePosition.x + TIME_X_OFFSET);
@@ -15795,7 +15797,7 @@ module.exports = function (Utils, SourceGroup, Konva) {
     };
     ModeLayer.prototype._updateCuttingLine = function (mousePosition) {
         var hoveredElement = this._view.getHoveredElement();
-        if (hoveredElement && hoveredElement instanceof SourceGroup) {
+        if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
             var minSize = this._view.timeToPixels(hoveredElement.getSource().minSize);
             if (hoveredElement.getWidth() >= 2 * minSize) {
                 var height = hoveredElement.getCurrentHeight();
@@ -15848,7 +15850,7 @@ module.exports = function (Utils, SourceGroup, Konva) {
         var mousePosition = this._stage.getPointerPosition();
         mousePosition.x = this._view.timeToPixels(this._view.pixelsToTime(mousePosition.x));
         var hoveredElement = this._view.getHoveredElement();
-        if (hoveredElement && hoveredElement instanceof SourceGroup) {
+        if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
             var minSize = this._view.timeToPixels(hoveredElement.getSource().minSize);
             if (hoveredElement.getWidth() >= 2 * minSize) {
                 var cuttingPixel;
@@ -15881,7 +15883,7 @@ module.exports = function (Utils, SourceGroup, Konva) {
             this._stage.off('mouseleave', this._onMouseLeaveInCutMode);
             this._stage.off('click', this._onMouseClickInCutMode);
             this._cutGroup.visible(false);
-            if (hoveredElement && hoveredElement instanceof SourceGroup) {
+            if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
                 hoveredElement.toggleDragging(hoveredElement.getSource().draggable);
                 hoveredElement.toggleResizing(hoveredElement.getSource().resizable);
             }
@@ -15908,7 +15910,7 @@ module.exports = function (Utils, SourceGroup, Konva) {
                     this._updateCuttingLine(mousePosition);
                 }
             }
-            if (hoveredElement && hoveredElement instanceof SourceGroup) {
+            if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
                 hoveredElement.toggleDragging(false);
                 hoveredElement.toggleResizing(false);
             }
@@ -17608,7 +17610,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             this._width = newWidth;
             this._rightHandle.x(newWidth - HANDLE_WIDTH);
             this.updatePreviews();
-            this._title.width(newWidth - 10);
         }
     };
     SourceGroup.prototype.setWrapping = function (wrap) {
@@ -17858,19 +17859,29 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         }
     };
     SourceGroup.prototype._createTitle = function () {
+        var self = this;
+        var defaultWidth;
         var title = new Konva.Text({
             x: 5,
             y: 5,
-            width: this._width - 10,
             text: Utils.removeLineBreaks(this._source.title),
             textAlign: 'left',
             verticalAlign: 'middle',
-            fontSize: 14,
-            fontFamily: 'Open Sans',
+            fontSize: this._source.textFontSize,
+            fontFamily: this._source.textFont,
             fill: this._source.textColor,
             wrap: 'none',
             ellipsis: true,
-            listening: false
+            listening: false,
+            sceneFunc: function (context, shape) {
+                defaultWidth = defaultWidth ? defaultWidth : shape.width();
+                shape.width(Math.min(self._width - 10, defaultWidth));
+                if (self._source.textBackgroundColor) {
+                    context.fillStyle = self._source.textBackgroundColor;
+                    context.fillRect(-5, -5, shape.width() + 10, shape.height() ? shape.height() + 10 : 0);
+                }
+                shape._sceneFunc(context);
+            }
         });
         return title;
     };
@@ -18221,6 +18232,12 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     SourceGroup.prototype.isDragged = function () {
         return this._dragged;
     };
+    SourceGroup.prototype.isCuttable = function () {
+        return this._source.cuttable;
+    };
+    SourceGroup.prototype.isDeletable = function () {
+        return this._source.deletable;
+    };
     SourceGroup.prototype.destroy = function () {
         this._group.destroy();
     };
@@ -18309,11 +18326,20 @@ module.exports = function (Utils) {
         } else if (!Utils.isValidColor(options.selectedColor)) {
             throw new TypeError('peaks.sources.' + context + ': selectedColor should be a valid CSS color');
         }
+        if (Utils.isNullOrUndefined(options.textFont)) {
+            options.textFont = 'Arial';
+        }
+        if (Utils.isNullOrUndefined(options.textFontSize)) {
+            options.textFontSize = 12;
+        }
         if (Utils.isNullOrUndefined(options.textColor)) {
             options.textColor = '#000000';
         } else if (!Utils.isValidColor(options.textColor)) {
             throw new TypeError('peaks.sources.' + context + ': textColor should be a valid CSS color');
         }
+        if (!Utils.isNullOrUndefined(options.textBackgroundColor) && !Utils.isValidColor(options.textBackgroundColor)) {
+            throw new TypeError('peaks.sources.' + context + ': textBackgroundColor should be a valid CSS color');
+        }
         if (Utils.isNullOrUndefined(options.textPosition)) {
             options.textPosition = 'bottom';
         } else if (!Utils.isString(options.textPosition)) {
@@ -18340,6 +18366,16 @@ module.exports = function (Utils) {
         } else if (!Utils.isBoolean(options.resizable)) {
             throw new TypeError('peaks.sources.' + context + ': resizable must be a boolean');
         }
+        if (Utils.isNullOrUndefined(options.cuttable)) {
+            options.cuttable = true;
+        } else if (!Utils.isBoolean(options.cuttable)) {
+            throw new TypeError('peaks.sources.' + context + ': cuttable must be a boolean');
+        }
+        if (Utils.isNullOrUndefined(options.deletable)) {
+            options.deletable = true;
+        } else if (!Utils.isBoolean(options.deletable)) {
+            throw new TypeError('peaks.sources.' + context + ': deletable must be a boolean');
+        }
         if (Utils.isNullOrUndefined(options.wrapping)) {
             options.wrapping = 'both';
         } else if (!Utils.isString(options.wrapping)) {
@@ -18371,7 +18407,7 @@ module.exports = function (Utils) {
             options.wrapped = false;
         }
     }
-    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, textColor, textPosition, borderWidth, borderRadius, wrapped, position, draggable, resizable, wrapping, previewHeight, binaryHeight) {
+    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, textFont, textFontSize, textColor, textBackgroundColor, textPosition, borderWidth, borderRadius, wrapped, position, draggable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight) {
         var opts = {
             title: title,
             url: url,
@@ -18388,7 +18424,10 @@ module.exports = function (Utils) {
             backgroundColor: backgroundColor,
             borderColor: borderColor,
             selectedColor: selectedColor,
+            textFont: textFont,
+            textFontSize: textFontSize,
             textColor: textColor,
+            textBackgroundColor: textBackgroundColor,
             textPosition: textPosition,
             borderWidth: borderWidth,
             borderRadius: borderRadius,
@@ -18396,6 +18435,8 @@ module.exports = function (Utils) {
             position: position,
             draggable: draggable,
             resizable: resizable,
+            cuttable: cuttable,
+            deletable: deletable,
             wrapping: wrapping,
             previewHeight: previewHeight,
             binaryHeight: binaryHeight
@@ -18420,7 +18461,10 @@ module.exports = function (Utils) {
         this._backgroundColor = opts.backgroundColor;
         this._borderColor = opts.borderColor;
         this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+        this._textFont = opts.textFont;
+        this._textFontSize = opts.textFontSize;
         this._textColor = opts.textColor;
+        this._textBackgroundColor = opts.textBackgroundColor;
         this._textPosition = opts.textPosition;
         this._borderWidth = opts.borderWidth;
         this._borderRadius = opts.borderRadius;
@@ -18428,6 +18472,8 @@ module.exports = function (Utils) {
         this._position = opts.position;
         this._draggable = opts.draggable;
         this._resizable = opts.resizable;
+        this._cuttable = opts.cuttable;
+        this._deletable = opts.deletable;
         this._wrapping = opts.wrapping;
         this._previewHeight = opts.previewHeight;
         this._binaryHeight = opts.binaryHeight;
@@ -18569,6 +18615,24 @@ module.exports = function (Utils) {
                 this._selectedColor = selectedColor;
             }
         },
+        textFont: {
+            enumerable: true,
+            get: function () {
+                return this._textFont;
+            },
+            set: function (textFont) {
+                this._textFont = textFont;
+            }
+        },
+        textFontSize: {
+            enumerable: true,
+            get: function () {
+                return this._textFontSize;
+            },
+            set: function (textFontSize) {
+                this._textFontSize = textFontSize;
+            }
+        },
         textColor: {
             enumerable: true,
             get: function () {
@@ -18578,6 +18642,15 @@ module.exports = function (Utils) {
                 this._textColor = textColor;
             }
         },
+        textBackgroundColor: {
+            enumerable: true,
+            get: function () {
+                return this._textBackgroundColor;
+            },
+            set: function (textBackgroundColor) {
+                this._textBackgroundColor = textBackgroundColor;
+            }
+        },
         textPosition: {
             enumerable: true,
             get: function () {
@@ -18641,6 +18714,18 @@ module.exports = function (Utils) {
                 return this._resizable;
             }
         },
+        cuttable: {
+            enumerable: true,
+            get: function () {
+                return this._cuttable;
+            }
+        },
+        deletable: {
+            enumerable: true,
+            get: function () {
+                return this._deletable;
+            }
+        },
         wrapping: {
             enumerable: true,
             get: function () {
@@ -18776,7 +18861,10 @@ module.exports = function (Utils) {
             backgroundColor: this.backgroundColor,
             borderColor: this.borderColor,
             selectedColor: this.selectedColor,
+            textFont: this.textFont,
+            textFontSize: this.textFontSize,
             textColor: this.textColor,
+            textBackgroundColor: this.textBackgroundColor,
             textPosition: this.textPosition,
             borderWidth: this.borderWidth,
             borderRadius: this.borderRadius,
@@ -18784,6 +18872,8 @@ module.exports = function (Utils) {
             position: this.position,
             draggable: this.draggable,
             resizable: this.resizable,
+            cuttable: this.cuttable,
+            deletable: this.deletable,
             wrapping: this.wrapping,
             previewHeight: this.previewHeight,
             binaryHeight: this.binaryHeight
@@ -18805,7 +18895,10 @@ module.exports = function (Utils) {
         this._backgroundColor = opts.backgroundColor;
         this._borderColor = opts.borderColor;
         this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+        this._textFont = opts.textFont;
+        this._textFontSize = opts.textFontSize;
         this._textColor = opts.textColor;
+        this._textBackgroundColor = opts.textBackgroundColor;
         this._textPosition = opts.textPosition;
         this._borderWidth = opts.borderWidth;
         this._borderRadius = opts.borderRadius;
@@ -18813,6 +18906,8 @@ module.exports = function (Utils) {
         this._position = opts.position;
         this._draggable = opts.draggable;
         this._resizable = opts.resizable;
+        this._cuttable = opts.cuttable;
+        this._deletable = opts.deletable;
         this._wrapping = opts.wrapping;
         this._previewHeight = opts.previewHeight;
         this._binaryHeight = opts.binaryHeight;
@@ -19325,8 +19420,9 @@ module.exports = function (Utils, Konva) {
                 break;
             }
             var label = Utils.formatTime(secs, false);
-            var labelHeight = context.measureText(label).actualBoundingBoxAscent - context.measureText(label).actualBoundingBoxDescent;
-            var labelWidth = context.measureText(label).width;
+            var measures = context.measureText(label);
+            var labelHeight = measures.actualBoundingBoxAscent - measures.actualBoundingBoxDescent;
+            var labelWidth = measures.width;
             var labelX = x + LEFT_PADDING;
             var labelY = labelHeight;
             if (!this._labelIsMasked(labelX + view.getFrameOffset(), labelX + view.getFrameOffset() + labelWidth)) {
@@ -19544,7 +19640,10 @@ module.exports = function (Source, Utils) {
                 backgroundColor: sourceToCut.backgroundColor,
                 borderColor: sourceToCut.borderColor,
                 selectedColor: sourceToCut.selectedColor,
+                textFont: sourceToCut.textFont,
+                textFontSize: sourceToCut.textFontSize,
                 textColor: sourceToCut.textColor,
+                textBackgroundColor: sourceToCut.textBackgroundColor,
                 textPosition: sourceToCut.textPosition,
                 borderWidth: sourceToCut.borderWidth,
                 borderRadius: sourceToCut.borderRadius,
@@ -19552,6 +19651,8 @@ module.exports = function (Source, Utils) {
                 position: sourceToCut.position,
                 draggable: sourceToCut.draggable,
                 resizable: sourceToCut.resizable,
+                cuttable: sourceToCut.cuttable,
+                deletable: sourceToCut.deletable,
                 wrapping: sourceToCut.wrapping,
                 previewHeight: sourceToCut.previewHeight,
                 binaryHeight: sourceToCut.binaryHeight
@@ -19569,7 +19670,7 @@ module.exports = function (Source, Utils) {
         if (!Utils.isObject(options)) {
             throw new TypeError('peaks.sources.add(): expected a Source object parameter');
         }
-        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.borderColor, options.selectedColor, options.textColor, options.textPosition, options.borderWidth, options.borderRadius, options.wrapped, options.position, options.draggable, options.resizable, options.wrapping, options.previewHeight, options.binaryHeight);
+        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.borderColor, options.selectedColor, options.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.borderWidth, options.borderRadius, options.wrapped, options.position, options.draggable, options.resizable, options.cuttable, options.deletable, options.wrapping, options.previewHeight, options.binaryHeight);
         return source;
     };
     TimelineSources.prototype.getSources = function () {

package/src/line-indicator.js

@@ -140,7 +140,7 @@ define([
       var textNode = new Konva.Text({
         text: text,
         fontSize: this._sizes.font,
-        fontFamily: 'Arial',
+        fontFamily: this._peaks.options.lineIndicatorFont,
         fill: this._peaks.options.lineIndicatorTextColor,
         align: 'center',
         width: this._width
@@ -235,7 +235,6 @@ define([
   LineIndicator.prototype.removeIndicator = function(lineId, keepInList) {
     if (this._indicators[lineId]) {
       if (this._indicators[lineId].indicator) {
-        console.log('remove', lineId);
         this._indicators[lineId].indicator.destroy();
       }
       if (!keepInList) {
@@ -251,7 +250,8 @@ define([
     if (this._indicators[lineId]) {
       var y = this._indicators[lineId].line.getY();
 
-      if (y + this._indicators[lineId].line.lineHeight() + this._yPadding > 0 && y - this._yPadding < this._height) {
+      if (y + this._indicators[lineId].line.lineHeight() + this._yPadding > 0
+        && y - this._yPadding < this._height) {
         // The indicator is visible
         if (!this._indicators[lineId].indicator) {
           this._indicators[lineId].indicator = this._createIndicator(

package/src/main.js

@@ -305,6 +305,11 @@ define([
        */
       lineIndicatorNoVisibilityIconSize:    24,
 
+      /**
+       * Font of the line indicators' text
+       */
+      lineIndicatorFont:    'Arial',
+
       /**
        * Font size of the line indicators' text, in pixels
        */

package/src/mode-layer.js

@@ -164,7 +164,9 @@ define([
       this.deselectElement(true);
 
       if (selectedElement instanceof SourceGroup) {
-        this._peaks.destroySource(selectedElement.getSource().id);
+        if (selectedElement.isDeletable()) {
+          this._peaks.destroySource(selectedElement.getSource().id);
+        }
       }
       else {
         if (selectedElement.getSegment().allowDeletion) {
@@ -183,7 +185,7 @@ define([
   ModeLayer.prototype._updateCursorTime = function(mousePosition) {
     var hoveredElement = this._view.getHoveredElement();
 
-    if (hoveredElement && hoveredElement instanceof SourceGroup) {
+    if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
       this._timeLabel.text(
         Utils.formatTime(
           this._view.pixelsToTime(mousePosition.x + this._view.getFrameOffset()),
@@ -213,7 +215,7 @@ define([
   ModeLayer.prototype._updateCuttingLine = function(mousePosition) {
     var hoveredElement = this._view.getHoveredElement();
 
-    if (hoveredElement && hoveredElement instanceof SourceGroup) {
+    if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
       var minSize = this._view.timeToPixels(hoveredElement.getSource().minSize);
 
       if (hoveredElement.getWidth() >= 2 * minSize) {
@@ -279,7 +281,7 @@ define([
 
     var hoveredElement = this._view.getHoveredElement();
 
-    if (hoveredElement && hoveredElement instanceof SourceGroup) {
+    if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
       var minSize = this._view.timeToPixels(hoveredElement.getSource().minSize);
 
       if (hoveredElement.getWidth() >= 2 * minSize) {
@@ -333,7 +335,9 @@ define([
         this._stage.off('click', this._onMouseClickInCutMode);
         this._cutGroup.visible(false);
 
-        if (hoveredElement && hoveredElement instanceof SourceGroup) {
+        if (hoveredElement
+          && hoveredElement instanceof SourceGroup
+          && hoveredElement.isCuttable()) {
           hoveredElement.toggleDragging(hoveredElement.getSource().draggable);
           hoveredElement.toggleResizing(hoveredElement.getSource().resizable);
         }
@@ -370,7 +374,9 @@ define([
           }
         }
 
-        if (hoveredElement && hoveredElement instanceof SourceGroup) {
+        if (hoveredElement
+          && hoveredElement instanceof SourceGroup
+          && hoveredElement.isCuttable()) {
           hoveredElement.toggleDragging(false);
           hoveredElement.toggleResizing(false);
         }

package/src/source-group.js

@@ -204,9 +204,6 @@ define([
 
       // update unwrap
       this.updatePreviews();
-
-      // update wrap
-      this._title.width(newWidth - 10);
     }
   };
 
@@ -526,19 +523,30 @@ define([
   };
 
   SourceGroup.prototype._createTitle = function() {
+    var self = this;
+    var defaultWidth;
+
     var title = new Konva.Text({
       x: 5,
       y: 5,
-      width: this._width - 10,
       text: Utils.removeLineBreaks(this._source.title),
       textAlign: 'left',
       verticalAlign: 'middle',
-      fontSize: 14,
-      fontFamily: 'Open Sans',
+      fontSize: this._source.textFontSize,
+      fontFamily: this._source.textFont,
       fill: this._source.textColor,
       wrap: 'none',
       ellipsis: true,
-      listening: false
+      listening: false,
+      sceneFunc: function(context, shape) {
+        defaultWidth = defaultWidth ? defaultWidth : shape.width();
+        shape.width(Math.min(self._width - 10, defaultWidth));
+        if (self._source.textBackgroundColor) {
+          context.fillStyle = self._source.textBackgroundColor;
+          context.fillRect(-5, -5, shape.width() + 10, shape.height() ? shape.height() + 10 : 0);
+        }
+        shape._sceneFunc(context);
+      }
     });
 
     return title;
@@ -1003,6 +1011,14 @@ define([
     return this._dragged;
   };
 
+  SourceGroup.prototype.isCuttable = function() {
+    return this._source.cuttable;
+  };
+
+  SourceGroup.prototype.isDeletable = function() {
+    return this._source.deletable;
+  };
+
   SourceGroup.prototype.destroy = function() {
     this._group.destroy();
   };

package/src/source.js

@@ -127,6 +127,14 @@ define([
       );
     }
 
+    if (Utils.isNullOrUndefined(options.textFont)) {
+      options.textFont = 'Arial';
+    }
+
+    if (Utils.isNullOrUndefined(options.textFontSize)) {
+      options.textFontSize = 12;
+    }
+
     if (Utils.isNullOrUndefined(options.textColor)) {
       options.textColor = '#000000';
     }
@@ -134,6 +142,13 @@ define([
       throw new TypeError('peaks.sources.' + context + ': textColor should be a valid CSS color');
     }
 
+    if (!Utils.isNullOrUndefined(options.textBackgroundColor)
+      && !Utils.isValidColor(options.textBackgroundColor)) {
+      throw new TypeError(
+        'peaks.sources.' + context + ': textBackgroundColor should be a valid CSS color'
+      );
+    }
+
     if (Utils.isNullOrUndefined(options.textPosition)) {
       options.textPosition = 'bottom';
     }
@@ -170,6 +185,20 @@ define([
       throw new TypeError('peaks.sources.' + context + ': resizable must be a boolean');
     }
 
+    if (Utils.isNullOrUndefined(options.cuttable)) {
+      options.cuttable = true;
+    }
+    else if (!Utils.isBoolean(options.cuttable)) {
+      throw new TypeError('peaks.sources.' + context + ': cuttable must be a boolean');
+    }
+
+    if (Utils.isNullOrUndefined(options.deletable)) {
+      options.deletable = true;
+    }
+    else if (!Utils.isBoolean(options.deletable)) {
+      throw new TypeError('peaks.sources.' + context + ': deletable must be a boolean');
+    }
+
     if (Utils.isNullOrUndefined(options.wrapping)) {
       options.wrapping = 'both';
     }
@@ -234,8 +263,9 @@ define([
 
   function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind,
     subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor,
-    borderColor, selectedColor, textColor, textPosition, borderWidth, borderRadius, wrapped,
-    position, draggable, resizable, wrapping, previewHeight, binaryHeight) {
+    borderColor, selectedColor, textFont, textFontSize, textColor, textBackgroundColor,
+    textPosition, borderWidth, borderRadius, wrapped, position, draggable, resizable, cuttable,
+    deletable, wrapping, previewHeight, binaryHeight) {
     var opts = {
       title: title,
       url: url,
@@ -252,7 +282,10 @@ define([
       backgroundColor: backgroundColor,
       borderColor: borderColor,
       selectedColor: selectedColor,
+      textFont: textFont,
+      textFontSize: textFontSize,
       textColor: textColor,
+      textBackgroundColor: textBackgroundColor,
       textPosition: textPosition,
       borderWidth: borderWidth,
       borderRadius: borderRadius,
@@ -260,6 +293,8 @@ define([
       position: position,
       draggable: draggable,
       resizable: resizable,
+      cuttable: cuttable,
+      deletable: deletable,
       wrapping: wrapping,
       previewHeight: previewHeight,
       binaryHeight: binaryHeight
@@ -286,7 +321,10 @@ define([
     this._backgroundColor = opts.backgroundColor;
     this._borderColor = opts.borderColor;
     this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+    this._textFont = opts.textFont;
+    this._textFontSize = opts.textFontSize;
     this._textColor = opts.textColor;
+    this._textBackgroundColor = opts.textBackgroundColor;
     this._textPosition = opts.textPosition;
     this._borderWidth = opts.borderWidth;
     this._borderRadius = opts.borderRadius;
@@ -294,6 +332,8 @@ define([
     this._position = opts.position;
     this._draggable = opts.draggable;
     this._resizable = opts.resizable;
+    this._cuttable = opts.cuttable;
+    this._deletable = opts.deletable;
     this._wrapping = opts.wrapping;
     this._previewHeight = opts.previewHeight;
     this._binaryHeight = opts.binaryHeight;
@@ -445,6 +485,26 @@ define([
         this._selectedColor = selectedColor;
       }
     },
+    textFont: {
+      enumerable: true,
+      get: function() {
+        return this._textFont;
+      },
+
+      set: function(textFont) {
+        this._textFont = textFont;
+      }
+    },
+    textFontSize: {
+      enumerable: true,
+      get: function() {
+        return this._textFontSize;
+      },
+
+      set: function(textFontSize) {
+        this._textFontSize = textFontSize;
+      }
+    },
     textColor: {
       enumerable: true,
       get: function() {
@@ -455,6 +515,16 @@ define([
         this._textColor = textColor;
       }
     },
+    textBackgroundColor: {
+      enumerable: true,
+      get: function() {
+        return this._textBackgroundColor;
+      },
+
+      set: function(textBackgroundColor) {
+        this._textBackgroundColor = textBackgroundColor;
+      }
+    },
     textPosition: {
       enumerable: true,
       get: function() {
@@ -523,6 +593,18 @@ define([
         return this._resizable;
       }
     },
+    cuttable: {
+      enumerable: true,
+      get: function() {
+        return this._cuttable;
+      }
+    },
+    deletable: {
+      enumerable: true,
+      get: function() {
+        return this._deletable;
+      }
+    },
     wrapping: {
       enumerable: true,
       get: function() {
@@ -693,7 +775,10 @@ define([
       backgroundColor: this.backgroundColor,
       borderColor: this.borderColor,
       selectedColor: this.selectedColor,
+      textFont: this.textFont,
+      textFontSize: this.textFontSize,
       textColor: this.textColor,
+      textBackgroundColor: this.textBackgroundColor,
       textPosition: this.textPosition,
       borderWidth: this.borderWidth,
       borderRadius: this.borderRadius,
@@ -701,6 +786,8 @@ define([
       position: this.position,
       draggable: this.draggable,
       resizable: this.resizable,
+      cuttable: this.cuttable,
+      deletable: this.deletable,
       wrapping: this.wrapping,
       previewHeight: this.previewHeight,
       binaryHeight: this.binaryHeight
@@ -725,7 +812,10 @@ define([
     this._backgroundColor = opts.backgroundColor;
     this._borderColor = opts.borderColor;
     this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+    this._textFont = opts.textFont;
+    this._textFontSize = opts.textFontSize;
     this._textColor = opts.textColor;
+    this._textBackgroundColor = opts.textBackgroundColor;
     this._textPosition = opts.textPosition;
     this._borderWidth = opts.borderWidth;
     this._borderRadius = opts.borderRadius;
@@ -733,6 +823,8 @@ define([
     this._position = opts.position;
     this._draggable = opts.draggable;
     this._resizable = opts.resizable;
+    this._cuttable = opts.cuttable;
+    this._deletable = opts.deletable;
     this._wrapping = opts.wrapping;
     this._previewHeight = opts.previewHeight;
     this._binaryHeight = opts.binaryHeight;

package/src/timeline-axis.js

@@ -213,9 +213,10 @@ define([
       }
 
       var label       = Utils.formatTime(secs, false);
-      var labelHeight = context.measureText(label).actualBoundingBoxAscent
-                        - context.measureText(label).actualBoundingBoxDescent;
-      var labelWidth  = context.measureText(label).width;
+      var measures    = context.measureText(label);
+      var labelHeight = measures.actualBoundingBoxAscent
+                        - measures.actualBoundingBoxDescent;
+      var labelWidth  = measures.width;
       var labelX      = x + LEFT_PADDING;
       var labelY      = labelHeight;
 

package/src/timeline-sources.js

@@ -81,7 +81,10 @@ define([
       backgroundColor: sourceToCut.backgroundColor,
       borderColor: sourceToCut.borderColor,
       selectedColor: sourceToCut.selectedColor,
+      textFont: sourceToCut.textFont,
+      textFontSize: sourceToCut.textFontSize,
       textColor: sourceToCut.textColor,
+      textBackgroundColor: sourceToCut.textBackgroundColor,
       textPosition: sourceToCut.textPosition,
       borderWidth: sourceToCut.borderWidth,
       borderRadius: sourceToCut.borderRadius,
@@ -89,6 +92,8 @@ define([
       position: sourceToCut.position,
       draggable: sourceToCut.draggable,
       resizable: sourceToCut.resizable,
+      cuttable: sourceToCut.cuttable,
+      deletable: sourceToCut.deletable,
       wrapping: sourceToCut.wrapping,
       previewHeight: sourceToCut.previewHeight,
       binaryHeight: sourceToCut.binaryHeight
@@ -157,7 +162,10 @@ define([
       options.backgroundColor,
       options.borderColor,
       options.selectedColor,
+      options.textFont,
+      options.textFontSize,
       options.textColor,
+      options.textBackgroundColor,
       options.textPosition,
       options.borderWidth,
       options.borderRadius,
@@ -165,6 +173,8 @@ define([
       options.position,
       options.draggable,
       options.resizable,
+      options.cuttable,
+      options.deletable,
       options.wrapping,
       options.previewHeight,
       options.binaryHeight