@checksub_team/peaks_timeline 1.6.0-beta.0 → 1.6.0-beta.1

package/package.json

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

package/peaks.js

@@ -17769,38 +17769,45 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 self.drawSourceShape(ctx, null, true);
             }
         });
-        var background = new Konva.Shape({
-            fill: this._source.backgroundColor,
-            sceneFunc: function (ctx, shape) {
-                self.drawSourceShape(ctx, shape, true);
-            },
-            draggable: this._source.draggable,
-            dragBoundFunc: function () {
-                return self._onSourceGroupDrag(this);
-            }
-        });
         if (this._source.draggable) {
-            background.on('mouseenter', function () {
+            unwrap.on('mouseenter', function () {
                 self._view.setCursor('pointer');
             });
-            background.on('mouseout', function () {
+            unwrap.on('mouseout', function () {
                 self._view.setCursor('default');
             });
-            background.on('dragstart', function () {
+            unwrap.on('dragstart', function () {
                 this._scrollInterval = null;
             });
-            background.on('dragend', function () {
+            unwrap.on('dragend', function () {
                 if (this._scrollingInterval) {
                     clearInterval(this._scrollingInterval);
                     this._scrollingInterval = null;
                 }
             });
         }
-        var title = this._createTitle(false);
+        var background = new Konva.Group();
+        background.add(new Konva.Shape({
+            fill: this._source.backgroundColor,
+            sceneFunc: function (ctx, shape) {
+                self.drawSourceShape(ctx, shape, true);
+            },
+            draggable: this._source.draggable,
+            dragBoundFunc: function () {
+                return self._onSourceGroupDrag(this);
+            }
+        }));
         unwrap.add(background);
-        unwrap.add(title);
+        unwrap.add(this._createTitle(false));
         return unwrap;
     };
+    SourceGroup.prototype._addToUnwrap = function (element, inForeground) {
+        if (inForeground) {
+            this._unwrap.add(element);
+        } else {
+            this._unwrap.getChildren()[0].add(element);
+        }
+    };
     SourceGroup.prototype._removeUnwrap = function () {
         if (this._unwrap) {
             this._unwrap.remove();
@@ -17828,38 +17835,45 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 self.drawSourceShape(ctx, null, true);
             }
         });
-        var background = new Konva.Shape({
-            fill: this._source.backgroundColor,
-            sceneFunc: function (ctx, shape) {
-                self.drawSourceShape(ctx, shape, true);
-            },
-            draggable: this._source.draggable,
-            dragBoundFunc: function () {
-                return self._onSourceGroupDrag(this);
-            }
-        });
         if (this._source.draggable) {
-            background.on('mouseenter', function () {
+            wrap.on('mouseenter', function () {
                 self._view.setCursor('pointer');
             });
-            background.on('mouseout', function () {
+            wrap.on('mouseout', function () {
                 self._view.setCursor('default');
             });
-            background.on('dragstart', function () {
+            wrap.on('dragstart', function () {
                 this._scrollInterval = null;
             });
-            background.on('dragend', function () {
+            wrap.on('dragend', function () {
                 if (this._scrollingInterval) {
                     clearInterval(this._scrollingInterval);
                     this._scrollingInterval = null;
                 }
             });
         }
-        var title = this._createTitle(true);
+        var background = new Konva.Group();
+        background.add(new Konva.Shape({
+            fill: this._source.backgroundColor,
+            sceneFunc: function (ctx, shape) {
+                self.drawSourceShape(ctx, shape, true);
+            },
+            draggable: this._source.draggable,
+            dragBoundFunc: function () {
+                return self._onSourceGroupDrag(this);
+            }
+        }));
         wrap.add(background);
-        wrap.add(title);
+        wrap.add(this._createTitle(true));
         return wrap;
     };
+    SourceGroup.prototype._addToWrap = function (element, inForeground) {
+        if (inForeground) {
+            this._wrap.add(element);
+        } else {
+            this._wrap.getChildren()[0].add(element);
+        }
+    };
     SourceGroup.prototype._removeWrap = function () {
         if (this._wrap) {
             this._wrap.remove();
@@ -18074,7 +18088,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 url: preview.url
             });
             preview.group.add(waveform);
-            this._unwrap.add(preview.group);
+            this._addToUnwrap(preview.group);
             if (redraw) {
                 this._layer.rescale(true);
             }
@@ -18200,7 +18214,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             preview.group.add(imagePreview);
             currentX += preview.imageData.width + preview.imageData.imageSpacing;
         }
-        this._unwrap.add(preview.group);
+        this._addToUnwrap(preview.group);
         if (redraw) {
             this._group.draw();
         }

package/src/source-group.js

@@ -414,30 +414,19 @@ define([
       }
     });
 
-    var background = new Konva.Shape({
-      fill: this._source.backgroundColor,
-      sceneFunc: function(ctx, shape) {
-        self.drawSourceShape(ctx, shape, true);
-      },
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return self._onSourceGroupDrag(this);
-      }
-    });
-
     if (this._source.draggable) {
-      background.on('mouseenter', function() {
+      unwrap.on('mouseenter', function() {
         self._view.setCursor('pointer');
       });
-      background.on('mouseout', function() {
+      unwrap.on('mouseout', function() {
         self._view.setCursor('default');
       });
 
-      background.on('dragstart', function() {
+      unwrap.on('dragstart', function() {
         this._scrollInterval = null;
       });
 
-      background.on('dragend', function() {
+      unwrap.on('dragend', function() {
         if (this._scrollingInterval) {
           clearInterval(this._scrollingInterval);
           this._scrollingInterval = null;
@@ -445,14 +434,34 @@ define([
       });
     }
 
-    var title = this._createTitle(false);
+    var background = new Konva.Group();
+
+    background.add(new Konva.Shape({
+      fill: this._source.backgroundColor,
+      sceneFunc: function(ctx, shape) {
+        self.drawSourceShape(ctx, shape, true);
+      },
+      draggable: this._source.draggable,
+      dragBoundFunc: function() {
+        return self._onSourceGroupDrag(this);
+      }
+    }));
 
     unwrap.add(background);
-    unwrap.add(title);
+    unwrap.add(this._createTitle(false));
 
     return unwrap;
   };
 
+  SourceGroup.prototype._addToUnwrap = function(element, inForeground) {
+    if (inForeground) {
+      this._unwrap.add(element);
+    }
+    else {
+      this._unwrap.getChildren()[0].add(element);
+    }
+  };
+
   SourceGroup.prototype._removeUnwrap = function() {
     if (this._unwrap) {
       this._unwrap.remove();
@@ -485,30 +494,19 @@ define([
       }
     });
 
-    var background = new Konva.Shape({
-      fill: this._source.backgroundColor,
-      sceneFunc: function(ctx, shape) {
-        self.drawSourceShape(ctx, shape, true);
-      },
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return self._onSourceGroupDrag(this);
-      }
-    });
-
     if (this._source.draggable) {
-      background.on('mouseenter', function() {
+      wrap.on('mouseenter', function() {
         self._view.setCursor('pointer');
       });
-      background.on('mouseout', function() {
+      wrap.on('mouseout', function() {
         self._view.setCursor('default');
       });
 
-      background.on('dragstart', function() {
+      wrap.on('dragstart', function() {
         this._scrollInterval = null;
       });
 
-      background.on('dragend', function() {
+      wrap.on('dragend', function() {
         if (this._scrollingInterval) {
           clearInterval(this._scrollingInterval);
           this._scrollingInterval = null;
@@ -516,14 +514,34 @@ define([
       });
     }
 
-    var title = this._createTitle(true);
+    var background = new Konva.Group();
+
+    background.add(new Konva.Shape({
+      fill: this._source.backgroundColor,
+      sceneFunc: function(ctx, shape) {
+        self.drawSourceShape(ctx, shape, true);
+      },
+      draggable: this._source.draggable,
+      dragBoundFunc: function() {
+        return self._onSourceGroupDrag(this);
+      }
+    }));
 
     wrap.add(background);
-    wrap.add(title);
+    wrap.add(this._createTitle(true));
 
     return wrap;
   };
 
+  SourceGroup.prototype._addToWrap = function(element, inForeground) {
+    if (inForeground) {
+      this._wrap.add(element);
+    }
+    else {
+      this._wrap.getChildren()[0].add(element);
+    }
+  };
+
   SourceGroup.prototype._removeWrap = function() {
     if (this._wrap) {
       this._wrap.remove();
@@ -804,7 +822,7 @@ define([
       });
 
       preview.group.add(waveform);
-      this._unwrap.add(preview.group);
+      this._addToUnwrap(preview.group);
 
       if (redraw) {
         this._layer.rescale(true);
@@ -972,7 +990,7 @@ define([
       currentX += preview.imageData.width + preview.imageData.imageSpacing;
     }
 
-    this._unwrap.add(preview.group);
+    this._addToUnwrap(preview.group);
 
     if (redraw) {
       this._group.draw();