@checksub_team/peaks_timeline 1.7.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/peaks.js +36 -20
  3. package/src/mode-layer.js +44 -18
  4. package/src/timeline-zoomview.js +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@checksub_team/peaks_timeline",
3
- "version": "1.7.0",
3
+ "version": "1.8.0",
4
4
  "description": "JavaScript UI component for displaying audio waveforms",
5
5
  "main": "./peaks.js",
6
6
  "types": "./peaks.js.d.ts",
package/peaks.js CHANGED
@@ -15691,9 +15691,10 @@ module.exports = function (Utils, SourceGroup, Konva) {
15691
15691
  'use strict';
15692
15692
  var TIME_X_OFFSET = 20;
15693
15693
  var TIME_Y_OFFSET = 10;
15694
- function ModeLayer(peaks, view, stage, initialMode) {
15694
+ function ModeLayer(peaks, view, playheadLayer, stage, initialMode) {
15695
15695
  this._peaks = peaks;
15696
15696
  this._view = view;
15697
+ this._playheadLayer = playheadLayer;
15697
15698
  this._stage = stage;
15698
15699
  this._layer = new Konva.Layer({ listening: this._mode !== 'default' });
15699
15700
  this._prepareDefaultMode();
@@ -15811,37 +15812,37 @@ module.exports = function (Utils, SourceGroup, Konva) {
15811
15812
  this._cutGroup.visible(true);
15812
15813
  this._layer.draw();
15813
15814
  };
15814
- ModeLayer.prototype._updateCursorTime = function (mousePosition) {
15815
+ ModeLayer.prototype._updateCursorTime = function (position) {
15815
15816
  var hoveredElement = this._view.getHoveredElement();
15816
15817
  if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
15817
- this._timeLabel.text(Utils.formatTime(this._view.pixelsToTime(mousePosition.x + this._view.getFrameOffset()), false));
15818
+ this._timeLabel.text(Utils.formatTime(this._view.pixelsToTime(position.x + this._view.getFrameOffset()), false));
15818
15819
  this._timeBackground.width(this._timeLabel.width() + 8);
15819
- this._cursorTime.x(mousePosition.x + TIME_X_OFFSET);
15820
- if (mousePosition.y > this._view.getHeight() - this._timeBackground.height() - TIME_Y_OFFSET) {
15821
- this._cursorTime.y(mousePosition.y - TIME_Y_OFFSET);
15820
+ this._cursorTime.x(position.x + TIME_X_OFFSET);
15821
+ if (position.y > this._view.getHeight() - this._timeBackground.height() - TIME_Y_OFFSET) {
15822
+ this._cursorTime.y(position.y - TIME_Y_OFFSET);
15822
15823
  } else {
15823
- this._cursorTime.y(mousePosition.y + TIME_Y_OFFSET);
15824
+ this._cursorTime.y(position.y + TIME_Y_OFFSET);
15824
15825
  }
15825
15826
  this._cursorTime.visible(true);
15826
15827
  } else {
15827
15828
  this._cursorTime.visible(false);
15828
15829
  }
15829
15830
  };
15830
- ModeLayer.prototype._updateCuttingLine = function (mousePosition) {
15831
+ ModeLayer.prototype._updateCuttingLine = function (position) {
15831
15832
  var hoveredElement = this._view.getHoveredElement();
15832
15833
  if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
15833
15834
  var minSize = this._view.timeToPixels(hoveredElement.getSource().minSize);
15834
15835
  if (hoveredElement.getWidth() >= 2 * minSize) {
15835
15836
  var height = hoveredElement.getCurrentHeight();
15836
15837
  var y = hoveredElement.getY();
15837
- if (mousePosition.x < hoveredElement.x() + minSize) {
15838
+ if (position.x < hoveredElement.x() + minSize) {
15838
15839
  this._cuttingLine.points([
15839
15840
  hoveredElement.x() + minSize,
15840
15841
  y,
15841
15842
  hoveredElement.x() + minSize,
15842
15843
  y + height
15843
15844
  ]);
15844
- } else if (mousePosition.x > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
15845
+ } else if (position.x > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
15845
15846
  this._cuttingLine.points([
15846
15847
  hoveredElement.x() + hoveredElement.getWidth() - minSize,
15847
15848
  y,
@@ -15850,9 +15851,9 @@ module.exports = function (Utils, SourceGroup, Konva) {
15850
15851
  ]);
15851
15852
  } else {
15852
15853
  this._cuttingLine.points([
15853
- mousePosition.x,
15854
+ position.x,
15854
15855
  y,
15855
- mousePosition.x,
15856
+ position.x,
15856
15857
  y + height
15857
15858
  ]);
15858
15859
  }
@@ -15870,8 +15871,17 @@ module.exports = function (Utils, SourceGroup, Konva) {
15870
15871
  ModeLayer.prototype._onMouseMoveInCutMode = function () {
15871
15872
  var mousePosition = this._stage.getPointerPosition();
15872
15873
  mousePosition.x = this._view.timeToPixels(this._view.pixelsToTime(mousePosition.x));
15873
- this._updateCursorTime(mousePosition);
15874
- this._updateCuttingLine(mousePosition);
15874
+ var cuttingPosition = mousePosition;
15875
+ var hoveredElement = this._view.getHoveredElement();
15876
+ if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
15877
+ var playheadPositionX = this._view.timeToPixels(this._playheadLayer._time);
15878
+ var playheadIsOnHoveredElement = playheadPositionX >= hoveredElement.x() && playheadPositionX <= hoveredElement.x() + hoveredElement.getWidth();
15879
+ if (Math.abs(mousePosition.x - playheadPositionX) < 10 && playheadIsOnHoveredElement) {
15880
+ cuttingPosition.x = playheadPositionX;
15881
+ }
15882
+ }
15883
+ this._updateCursorTime(cuttingPosition);
15884
+ this._updateCuttingLine(cuttingPosition);
15875
15885
  this._layer.draw();
15876
15886
  };
15877
15887
  ModeLayer.prototype._onMouseLeaveInCutMode = function () {
@@ -15883,22 +15893,28 @@ module.exports = function (Utils, SourceGroup, Konva) {
15883
15893
  mousePosition.x = this._view.timeToPixels(this._view.pixelsToTime(mousePosition.x));
15884
15894
  var hoveredElement = this._view.getHoveredElement();
15885
15895
  if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
15896
+ var cuttingPosition = mousePosition;
15897
+ var playheadPositionX = this._view.timeToPixels(this._playheadLayer._time);
15898
+ var playheadIsOnHoveredElement = playheadPositionX >= hoveredElement.x() && playheadPositionX <= hoveredElement.x() + hoveredElement.getWidth();
15899
+ if (Math.abs(mousePosition.x - playheadPositionX) < 10 && playheadIsOnHoveredElement) {
15900
+ cuttingPosition.x = playheadPositionX;
15901
+ }
15886
15902
  var minSize = this._view.timeToPixels(hoveredElement.getSource().minSize);
15887
15903
  if (hoveredElement.getWidth() >= 2 * minSize) {
15888
15904
  var cuttingPixel;
15889
- if (mousePosition.x < hoveredElement.x() + minSize) {
15905
+ if (cuttingPosition.x < hoveredElement.x() + minSize) {
15890
15906
  cuttingPixel = hoveredElement.x() + minSize;
15891
- } else if (mousePosition.x > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
15907
+ } else if (cuttingPosition.x > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
15892
15908
  cuttingPixel = hoveredElement.x() + hoveredElement.getWidth() - minSize;
15893
15909
  } else {
15894
- cuttingPixel = mousePosition.x;
15910
+ cuttingPixel = cuttingPosition.x;
15895
15911
  }
15896
15912
  cuttingPixel -= hoveredElement.x();
15897
15913
  this._cuttingLine.visible(false);
15898
15914
  this._peaks.emit('source.cut', hoveredElement.getSource(), this._view.pixelsToTime(cuttingPixel));
15899
15915
  this._view.setHoveredElement(null);
15900
- this._updateCursorTime(mousePosition);
15901
- this._updateCuttingLine(mousePosition);
15916
+ this._updateCursorTime(cuttingPosition);
15917
+ this._updateCuttingLine(cuttingPosition);
15902
15918
  this._layer.draw();
15903
15919
  }
15904
15920
  }
@@ -19917,7 +19933,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
19917
19933
  var time = self._peaks.player.getCurrentTime();
19918
19934
  self._syncPlayhead(time);
19919
19935
  self._hoveredElement = null;
19920
- self._modeLayer = new ModeLayer(peaks, self, self._stage, 'default');
19936
+ self._modeLayer = new ModeLayer(peaks, self, self._playheadLayer, self._stage, 'default');
19921
19937
  self._modeLayer.addToStage(self._stage);
19922
19938
  self._mouseDragHandler = new MouseDragHandler(self._stage, {
19923
19939
  onMouseDown: function (mousePosX, mousePosY) {
package/src/mode-layer.js CHANGED
@@ -27,9 +27,10 @@ define([
27
27
  * @param {String} initialMode
28
28
  */
29
29
 
30
- function ModeLayer(peaks, view, stage, initialMode) {
30
+ function ModeLayer(peaks, view, playheadLayer, stage, initialMode) {
31
31
  this._peaks = peaks;
32
32
  this._view = view;
33
+ this._playheadLayer = playheadLayer;
33
34
  this._stage = stage;
34
35
 
35
36
  this._layer = new Konva.Layer({
@@ -182,27 +183,27 @@ define([
182
183
  this._layer.draw();
183
184
  };
184
185
 
185
- ModeLayer.prototype._updateCursorTime = function(mousePosition) {
186
+ ModeLayer.prototype._updateCursorTime = function(position) {
186
187
  var hoveredElement = this._view.getHoveredElement();
187
188
 
188
189
  if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
189
190
  this._timeLabel.text(
190
191
  Utils.formatTime(
191
- this._view.pixelsToTime(mousePosition.x + this._view.getFrameOffset()),
192
+ this._view.pixelsToTime(position.x + this._view.getFrameOffset()),
192
193
  false
193
194
  )
194
195
  );
195
196
 
196
197
  this._timeBackground.width(this._timeLabel.width() + 8);
197
198
 
198
- this._cursorTime.x(mousePosition.x + TIME_X_OFFSET);
199
+ this._cursorTime.x(position.x + TIME_X_OFFSET);
199
200
 
200
- if (mousePosition.y > this._view.getHeight()
201
+ if (position.y > this._view.getHeight()
201
202
  - this._timeBackground.height() - TIME_Y_OFFSET) {
202
- this._cursorTime.y(mousePosition.y - TIME_Y_OFFSET);
203
+ this._cursorTime.y(position.y - TIME_Y_OFFSET);
203
204
  }
204
205
  else {
205
- this._cursorTime.y(mousePosition.y + TIME_Y_OFFSET);
206
+ this._cursorTime.y(position.y + TIME_Y_OFFSET);
206
207
  }
207
208
 
208
209
  this._cursorTime.visible(true);
@@ -212,7 +213,7 @@ define([
212
213
  }
213
214
  };
214
215
 
215
- ModeLayer.prototype._updateCuttingLine = function(mousePosition) {
216
+ ModeLayer.prototype._updateCuttingLine = function(position) {
216
217
  var hoveredElement = this._view.getHoveredElement();
217
218
 
218
219
  if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
@@ -222,7 +223,7 @@ define([
222
223
  var height = hoveredElement.getCurrentHeight();
223
224
  var y = hoveredElement.getY();
224
225
 
225
- if (mousePosition.x < hoveredElement.x() + minSize) {
226
+ if (position.x < hoveredElement.x() + minSize) {
226
227
  this._cuttingLine.points([
227
228
  hoveredElement.x() + minSize,
228
229
  y,
@@ -230,7 +231,7 @@ define([
230
231
  y + height
231
232
  ]);
232
233
  }
233
- else if (mousePosition.x
234
+ else if (position.x
234
235
  > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
235
236
  this._cuttingLine.points([
236
237
  hoveredElement.x() + hoveredElement.getWidth() - minSize,
@@ -240,7 +241,7 @@ define([
240
241
  ]);
241
242
  }
242
243
  else {
243
- this._cuttingLine.points([mousePosition.x, y, mousePosition.x, y + height]);
244
+ this._cuttingLine.points([position.x, y, position.x, y + height]);
244
245
  }
245
246
  this._cuttingLine.visible(true);
246
247
  }
@@ -262,8 +263,22 @@ define([
262
263
 
263
264
  mousePosition.x = this._view.timeToPixels(this._view.pixelsToTime(mousePosition.x));
264
265
 
265
- this._updateCursorTime(mousePosition);
266
- this._updateCuttingLine(mousePosition);
266
+ var cuttingPosition = mousePosition;
267
+ var hoveredElement = this._view.getHoveredElement();
268
+
269
+ if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
270
+ var playheadPositionX = this._view.timeToPixels(this._playheadLayer._time);
271
+ var playheadIsOnHoveredElement =
272
+ playheadPositionX >= hoveredElement.x() &&
273
+ playheadPositionX <= (hoveredElement.x() + hoveredElement.getWidth());
274
+
275
+ if (Math.abs(mousePosition.x - playheadPositionX) < 10 && playheadIsOnHoveredElement) {
276
+ cuttingPosition.x = playheadPositionX;
277
+ }
278
+ }
279
+
280
+ this._updateCursorTime(cuttingPosition);
281
+ this._updateCuttingLine(cuttingPosition);
267
282
 
268
283
  this._layer.draw();
269
284
  };
@@ -282,21 +297,32 @@ define([
282
297
  var hoveredElement = this._view.getHoveredElement();
283
298
 
284
299
  if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
300
+ var cuttingPosition = mousePosition;
301
+ var playheadPositionX = this._view.timeToPixels(this._playheadLayer._time);
302
+
303
+ var playheadIsOnHoveredElement =
304
+ playheadPositionX >= hoveredElement.x() &&
305
+ playheadPositionX <= (hoveredElement.x() + hoveredElement.getWidth());
306
+
307
+ if (Math.abs(mousePosition.x - playheadPositionX) < 10 && playheadIsOnHoveredElement) {
308
+ cuttingPosition.x = playheadPositionX;
309
+ }
310
+
285
311
  var minSize = this._view.timeToPixels(hoveredElement.getSource().minSize);
286
312
 
287
313
  if (hoveredElement.getWidth() >= 2 * minSize) {
288
314
  var cuttingPixel;
289
315
 
290
- if (mousePosition.x < hoveredElement.x() + minSize) {
316
+ if (cuttingPosition.x < hoveredElement.x() + minSize) {
291
317
  cuttingPixel = hoveredElement.x() + minSize;
292
318
  }
293
- else if (mousePosition.x
319
+ else if (cuttingPosition.x
294
320
  > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
295
321
  cuttingPixel = hoveredElement.x()
296
322
  + hoveredElement.getWidth() - minSize;
297
323
  }
298
324
  else {
299
- cuttingPixel = mousePosition.x;
325
+ cuttingPixel = cuttingPosition.x;
300
326
  }
301
327
 
302
328
  // Relative cuttingPixel
@@ -312,8 +338,8 @@ define([
312
338
 
313
339
  this._view.setHoveredElement(null);
314
340
 
315
- this._updateCursorTime(mousePosition);
316
- this._updateCuttingLine(mousePosition);
341
+ this._updateCursorTime(cuttingPosition);
342
+ this._updateCuttingLine(cuttingPosition);
317
343
 
318
344
  this._layer.draw();
319
345
  }
package/src/timeline-zoomview.js CHANGED
@@ -146,7 +146,7 @@ define([
146
146
 
147
147
  self._hoveredElement = null;
148
148
 
149
- self._modeLayer = new ModeLayer(peaks, self, self._stage, 'default');
149
+ self._modeLayer = new ModeLayer(peaks, self, self._playheadLayer, self._stage, 'default');
150
150
  self._modeLayer.addToStage(self._stage);
151
151
 
152
152
  self._mouseDragHandler = new MouseDragHandler(self._stage, {