@checksub_team/peaks_timeline 2.0.0-alpha.5 → 2.0.0-alpha.7

package/package.json

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

package/peaks.js

@@ -14827,6 +14827,9 @@ module.exports = function (SourceGroup, Utils, Konva) {
     LineGroup.prototype.getId = function () {
         return this._line.id;
     };
+    LineGroup.prototype.isLocked = function () {
+        return this._line.locked;
+    };
     LineGroup.prototype.getLine = function () {
         return this._line;
     };
@@ -15525,13 +15528,18 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
         if (Utils.isNullOrUndefined(mouseX)) {
             return;
         }
-        const position = this._lineGroupsById[sources[0].lineId].getPosition();
+        const currentLineGroup = this._lineGroupsById[sources[0].lineId];
+        const position = currentLineGroup.getPosition();
         const linePos = this.getLinesUnderY(mouseY);
+        if (currentLineGroup.isLocked()) {
+            return;
+        }
         if (linePos[0] !== linePos[1]) {
             this.manageAutomaticLineCreation(linePos[0] + 1, position, sources);
         } else {
             this.stopAutomaticLineCreation();
-            if (!Utils.isNullOrUndefined(mouseX) && linePos[0] !== position && !this._lineGroupsByPosition[linePos[0]].isSegmentsLine()) {
+            const targetLineGroup = this._lineGroupsByPosition[linePos[0]];
+            if (!Utils.isNullOrUndefined(mouseX) && linePos[0] !== position && !targetLineGroup.isLocked() && !targetLineGroup.isSegmentsLine()) {
                 var mouseTime = this._view.pixelsToTime(mouseX + this._view.getFrameOffset());
                 var sourceDuration = Utils.roundTime(endTime - startTime);
                 this._moveSourcesToPositionIfPossible(sources, linePos[0], mouseTime, sourceDuration);
@@ -15687,7 +15695,6 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
     LineGroups.prototype.allowInteractions = function (forSources, forSegments) {
         this._areSourceInteractionsAllowed = !Utils.isNullOrUndefined(forSources) ? forSources : this._areSourceInteractionsAllowed;
         this._areSegmentInteractionsAllowed = !Utils.isNullOrUndefined(forSegments) ? forSegments : this._areSegmentInteractionsAllowed;
-        console.log('peaks.lines.allowInteractions(): ' + 'forSources: ' + this._areSourceInteractionsAllowed + ', forSegments: ' + this._areSegmentInteractionsAllowed);
         for (var id in this._lineGroupsById) {
             if (Utils.objectHasProperty(this._lineGroupsById, id)) {
                 this._setInteractions(id);
@@ -18108,7 +18115,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         return group.isAncestorOf(this._group);
     };
     SourceGroup.prototype.hideButKeepFocus = function () {
-        this._group.moveTo(this._view.getTempLayer());
+        this._group.moveTo(this._view.getTempGroup());
     };
     SourceGroup.prototype.getParent = function () {
         return this._group.getParent();
@@ -19682,7 +19689,7 @@ module.exports = function (Line, Utils) {
         if (!Utils.isObject(options)) {
             throw new TypeError('peaks.lines.add(): expected a Line object parameter');
         }
-        var line = new Line(this._peaks, Utils.isNullOrUndefined(options.id) ? Utils.createUuidv4() : options.id, options.position, options.indicatorType, options.indicatorText);
+        var line = new Line(this._peaks, Utils.isNullOrUndefined(options.id) ? Utils.createUuidv4() : options.id, options.position, options.indicatorType, options.indicatorText, options.locked);
         return line;
     };
     LineHandler.prototype.getLines = function () {
@@ -20031,12 +20038,18 @@ module.exports = function (Utils) {
         } else if (!Utils.isString(options.indicatorText)) {
             throw new TypeError('peaks.lines.' + context + ': indicatorText must be a string');
         }
+        if (Utils.isNullOrUndefined(options.locked)) {
+            options.locked = false;
+        } else if (!Utils.isBoolean(options.locked)) {
+            throw new TypeError('peaks.lines.' + context + ': locked must be a boolean');
+        }
     }
-    function Line(peaks, id, position, indicatorType, indicatorText) {
+    function Line(peaks, id, position, indicatorType, indicatorText, locked) {
         var opts = {
             position: position,
             indicatorType: indicatorType,
-            indicatorText: indicatorText
+            indicatorText: indicatorText,
+            locked: locked
         };
         validateLine(opts, 'add()');
         this._peaks = peaks;
@@ -20044,6 +20057,7 @@ module.exports = function (Utils) {
         this._position = opts.position;
         this._indicatorType = opts.indicatorType;
         this._indicatorText = opts.indicatorText;
+        this._locked = opts.locked;
     }
     Object.defineProperties(Line.prototype, {
         id: {
@@ -20072,19 +20086,27 @@ module.exports = function (Utils) {
             get: function () {
                 return this._indicatorText;
             }
+        },
+        locked: {
+            enumerable: true,
+            get: function () {
+                return this._locked;
+            }
         }
     });
     Line.prototype.update = function (options) {
         var opts = {
             position: this.position,
             indicatorType: this.indicatorType,
-            indicatorText: this.indicatorText
+            indicatorText: this.indicatorText,
+            locked: this.locked
         };
         Utils.extend(opts, options);
         validateLine(opts, 'update()');
         this._position = opts.position;
         this._indicatorType = opts.indicatorType;
         this._indicatorText = opts.indicatorText;
+        this._locked = opts.locked;
         this._peaks.emit('model.line.update', this);
     };
     Line.prototype.toSerializable = function () {
@@ -22089,8 +22111,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
             width: self._width - self._peaks.options.lineIndicatorWidth,
             height: self._height
         });
-        self._tempLayer = new Konva.Layer();
-        self._stage.add(self._tempLayer);
+        self._tempGroup = new Konva.Group({ listening: false });
         self._width -= self._peaks.options.lineIndicatorWidth;
         self._axis = new Axis(self._peaks, self, {
             axisGridlineColor: this._options.axisGridlineColor,
@@ -22099,6 +22120,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         self._axis.addBackToStage(self._stage);
         self._sourcesLayer = new SourcesLayer(peaks, self, true);
         self._sourcesLayer.addToStage(self._stage);
+        self._sourcesLayer.add(self._tempGroup);
         self._axis.addFrontToStage(self._stage);
         self._playheadLayer = new PlayheadLayer(peaks, self, self._sourcesLayer, self._options.showPlayheadTime);
         self._playheadLayer.addToStage(self._stage);
@@ -22207,8 +22229,8 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     View.prototype.setClickable = function (clickable) {
         this._isClickable = clickable;
     };
-    View.prototype.getTempLayer = function () {
-        return this._tempLayer;
+    View.prototype.getTempGroup = function () {
+        return this._tempGroup;
     };
     View.prototype.getSelectedElements = function () {
         return Object.values(this._modeLayer.getSelectedElements());

package/src/components/line-group.js

@@ -49,6 +49,10 @@ define([
     return this._line.id;
   };
 
+  LineGroup.prototype.isLocked = function() {
+    return this._line.locked;
+  };
+
   LineGroup.prototype.getLine = function() {
     return this._line;
   };

package/src/components/line-groups.js

@@ -333,19 +333,27 @@ define([
       return;
     }
 
-    const position = this._lineGroupsById[sources[0].lineId].getPosition();
+    const currentLineGroup = this._lineGroupsById[sources[0].lineId];
+    const position = currentLineGroup.getPosition();
     const linePos = this.getLinesUnderY(mouseY);
 
+    if (currentLineGroup.isLocked()) {
+      return;
+    }
+
     if (linePos[0] !== linePos[1]) {
       this.manageAutomaticLineCreation(linePos[0] + 1, position, sources);
     }
     else {
       this.stopAutomaticLineCreation();
 
+      const targetLineGroup = this._lineGroupsByPosition[linePos[0]];
+
       if (
         !Utils.isNullOrUndefined(mouseX)
         && linePos[0] !== position
-        && !this._lineGroupsByPosition[linePos[0]].isSegmentsLine()
+        && !targetLineGroup.isLocked()
+        && !targetLineGroup.isSegmentsLine()
       ) {
         var mouseTime = this._view.pixelsToTime(mouseX + this._view.getFrameOffset());
         var sourceDuration = Utils.roundTime(endTime - startTime);
@@ -567,9 +575,6 @@ define([
       forSources : this._areSourceInteractionsAllowed;
     this._areSegmentInteractionsAllowed = !Utils.isNullOrUndefined(forSegments) ?
       forSegments : this._areSegmentInteractionsAllowed;
-    console.log('peaks.lines.allowInteractions(): ' +
-      'forSources: ' + this._areSourceInteractionsAllowed + ', forSegments: ' + this._areSegmentInteractionsAllowed
-    );
     for (var id in this._lineGroupsById) {
       if (Utils.objectHasProperty(this._lineGroupsById, id)) {
         this._setInteractions(id);

package/src/components/source-group.js

@@ -691,7 +691,7 @@ define([
   };
 
   SourceGroup.prototype.hideButKeepFocus = function() {
-    this._group.moveTo(this._view.getTempLayer());
+    this._group.moveTo(this._view.getTempGroup());
   };
 
   SourceGroup.prototype.getParent = function() {

package/src/line-handler.js

@@ -68,7 +68,8 @@ define([
       Utils.isNullOrUndefined(options.id) ? Utils.createUuidv4() : options.id,
       options.position,
       options.indicatorType,
-      options.indicatorText
+      options.indicatorText,
+      options.locked
     );
 
     return line;

package/src/models/line.js

@@ -29,6 +29,13 @@ define([
     else if (!Utils.isString(options.indicatorText)) {
       throw new TypeError('peaks.lines.' + context + ': indicatorText must be a string');
     }
+
+    if (Utils.isNullOrUndefined(options.locked)) {
+      options.locked = false;
+    }
+    else if (!Utils.isBoolean(options.locked)) {
+      throw new TypeError('peaks.lines.' + context + ': locked must be a boolean');
+    }
   }
 
   /**
@@ -44,11 +51,12 @@ define([
    * @param {String} indicatorText Text to display above the line indicator.
    */
 
-  function Line(peaks, id, position, indicatorType, indicatorText) {
+  function Line(peaks, id, position, indicatorType, indicatorText, locked) {
     var opts = {
       position:       position,
       indicatorType:  indicatorType,
-      indicatorText:  indicatorText
+      indicatorText:  indicatorText,
+      locked:         locked
     };
 
     validateLine(opts, 'add()');
@@ -58,6 +66,7 @@ define([
     this._position        = opts.position;
     this._indicatorType   = opts.indicatorType;
     this._indicatorText   = opts.indicatorText;
+    this._locked          = opts.locked;
   }
 
   Object.defineProperties(Line.prototype, {
@@ -88,6 +97,12 @@ define([
       get: function() {
         return this._indicatorText;
       }
+    },
+    locked: {
+      enumerable: true,
+      get: function() {
+        return this._locked;
+      }
     }
   });
 
@@ -95,7 +110,8 @@ define([
     var opts = {
       position:       this.position,
       indicatorType:  this.indicatorType,
-      indicatorText:  this.indicatorText
+      indicatorText:  this.indicatorText,
+      locked:         this.locked
     };
 
     Utils.extend(opts, options);
@@ -105,6 +121,7 @@ define([
     this._position        = opts.position;
     this._indicatorType   = opts.indicatorType;
     this._indicatorText   = opts.indicatorText;
+    this._locked          = opts.locked;
 
     this._peaks.emit('model.line.update', this);
   };

package/src/view.js

@@ -119,9 +119,7 @@ define([
       height: self._height
     });
 
-    self._tempLayer = new Konva.Layer();
-    // self._tempLayer.listening(false);
-    self._stage.add(self._tempLayer);
+    self._tempGroup = new Konva.Group({ listening: false });
 
     self._width -= self._peaks.options.lineIndicatorWidth;
 
@@ -135,6 +133,8 @@ define([
     self._sourcesLayer = new SourcesLayer(peaks, self, true);
     self._sourcesLayer.addToStage(self._stage);
 
+    self._sourcesLayer.add(self._tempGroup);
+
     self._axis.addFrontToStage(self._stage);
 
     self._playheadLayer = new PlayheadLayer(
@@ -317,8 +317,8 @@ define([
     this._isClickable = clickable;
   };
 
-  View.prototype.getTempLayer = function() {
-    return this._tempLayer;
+  View.prototype.getTempGroup = function() {
+    return this._tempGroup;
   };
 
   View.prototype.getSelectedElements = function() {