diff options
Diffstat (limited to 'js/panels/Timeline')
4 files changed, 2185 insertions, 131 deletions
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 9971933f..c75e105d 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | |||
@@ -302,46 +302,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
302 | } | 302 | } |
303 | }, | 303 | }, |
304 | 304 | ||
305 | splitPropTween:{ | ||
306 | value:function (ev) { | ||
307 | console.log("splitting sub prop tween with new keyframe"); | ||
308 | var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX; | ||
309 | var i; | ||
310 | var tweensLength = this.propTweens.length - 1; | ||
311 | var prevTween, nextTween, splitTweenIndex; | ||
312 | for (i = 0; i < tweensLength; i++) { | ||
313 | prevTween = this.propTweens[i].tweenData.keyFramePosition; | ||
314 | nextTween = this.propTweens[i + 1].tweenData.keyFramePosition; | ||
315 | if (clickPos > prevTween && clickPos < nextTween) { | ||
316 | //console.log(clickPos + " found on tween: "+ this.tweens[i+1].tweenData.tweenID); | ||
317 | splitTweenIndex = this.propTweens[i + 1].tweenData.tweenID; | ||
318 | this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - clickPos; | ||
319 | this.propTweens[i + 1].tweenData.spanPosition = ev.target.parentElement.offsetLeft + ev.offsetX; | ||
320 | if (ev.target.className != "tween-span") { | ||
321 | // don't set styles on timeline track if event is coming from the track | ||
322 | } else { | ||
323 | ev.target.style.width = this.propTweens[i + 1].tweenData.spanWidth + "px"; | ||
324 | ev.target.parentElement.style.left = clickPos + "px"; | ||
325 | ev.target.parentElement.children[1].style.left = (this.propTweens[i + 1].tweenData.spanWidth - 3) + "px"; | ||
326 | } | ||
327 | var newTweenToInsert = {}; | ||
328 | newTweenToInsert.tweenData = {}; | ||
329 | newTweenToInsert.tweenData.spanWidth = clickPos - prevTween; | ||
330 | newTweenToInsert.tweenData.keyFramePosition = clickPos; | ||
331 | newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * clickPos; | ||
332 | newTweenToInsert.tweenData.tweenID = splitTweenIndex - 1; | ||
333 | newTweenToInsert.tweenData.spanPosition = clickPos - newTweenToInsert.tweenData.spanWidth; | ||
334 | newTweenToInsert.tweenData.tweenedProperties = []; | ||
335 | newTweenToInsert.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); | ||
336 | this.propTweens.splice(splitTweenIndex, 0, newTweenToInsert); | ||
337 | break; | ||
338 | } | ||
339 | } | ||
340 | this.application.ninja.currentDocument.model.needsSave = true; | ||
341 | } | ||
342 | }, | ||
343 | |||
344 | // splitTweenAt: Split a tween at a particular position (x coordinate) | ||
345 | splitPropTweenAt:{ | 305 | splitPropTweenAt:{ |
346 | value:function (position) { | 306 | value:function (position) { |
347 | var i, j, nextComponentIndex, | 307 | var i, j, nextComponentIndex, |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index e06fb422..2cbd9e2b 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -459,10 +459,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
459 | this._draggingType = newVal; | 459 | this._draggingType = newVal; |
460 | } | 460 | } |
461 | }, | 461 | }, |
462 | 462 | ||
463 | layersDragged:{ | 463 | _elementsDragged: { |
464 | value:[], | 464 | value: [] |
465 | writable:true | 465 | }, |
466 | elementsDragged: { | ||
467 | get: function() { | ||
468 | return this._elementsDragged; | ||
469 | }, | ||
470 | set: function(newVal) { | ||
471 | this._elementsDragged = newVal; | ||
472 | } | ||
466 | }, | 473 | }, |
467 | 474 | ||
468 | dragLayerID : { | 475 | dragLayerID : { |
@@ -475,9 +482,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
475 | } | 482 | } |
476 | } | 483 | } |
477 | }, | 484 | }, |
478 | _dragLayerIndexes: { | 485 | |
479 | value: [] | ||
480 | }, | ||
481 | _dropLayerID : { | 486 | _dropLayerID : { |
482 | value: null | 487 | value: null |
483 | }, | 488 | }, |
@@ -489,39 +494,59 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
489 | if (newVal !== this._dropLayerID) { | 494 | if (newVal !== this._dropLayerID) { |
490 | this._dropLayerID = newVal; | 495 | this._dropLayerID = newVal; |
491 | 496 | ||
492 | var dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), | 497 | var dropLayerIndex = this.getLayerIndexByID(newVal), |
493 | arrDragLayers = [], | ||
494 | i = 0, | 498 | i = 0, |
495 | dragLayerIndexesLength = this._dragLayerIndexes.length; | 499 | dragLayerIndexesLength = this.currentLayersSelected.length, |
500 | dragAndDropDirection = 0, | ||
501 | targetIndex; | ||
496 | 502 | ||
503 | if (dragLayerIndexesLength === 0) { | ||
504 | // Nothing was dragged, so do nothing. | ||
505 | return; | ||
506 | } | ||
507 | |||
508 | // Is this a move up or down? | ||
509 | if (this.currentLayersSelected[0] > dropLayerIndex) { | ||
510 | dragAndDropDirection = -1; | ||
511 | } | ||
512 | targetIndex = dropLayerIndex + dragAndDropDirection; | ||
513 | |||
497 | // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order? | 514 | // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order? |
498 | 515 | ||
516 | // Get the target DOM element. | ||
517 | if (typeof(this.arrLayers[targetIndex]) !== "undefined") { | ||
518 | this._layerDroppedInPlace = this.arrLayers[targetIndex].layerData.stageElement; | ||
519 | } else { | ||
520 | this._layerDroppedInPlace = null; | ||
521 | } | ||
522 | |||
523 | // Splice | ||
499 | for (i = 0; i < dragLayerIndexesLength; i++) { | 524 | for (i = 0; i < dragLayerIndexesLength; i++) { |
500 | var myDraggingLayer = this.arrLayers[this._dragLayerIndexes[i]]; | 525 | var myDraggingLayer = this.arrLayers[this.currentLayersSelected[i]]; |
501 | arrDragLayers.push(myDraggingLayer); | ||
502 | // Splice arrLayers | 526 | // Splice arrLayers |
503 | this.arrLayers.splice(this._dragLayerIndexes[i], 1); | 527 | this.arrLayers.splice(this.currentLayersSelected[i], 1); |
504 | this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer); | 528 | this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer); |
505 | } | 529 | } |
506 | this.layersDragged = arrDragLayers; | 530 | this.elementsDragged = this.currentElementsSelected; |
507 | this._layerDroppedInPlace = this.arrLayers[dropLayerIndex]; | ||
508 | 531 | ||
509 | // Cache the new info | 532 | // Cache the new info |
510 | this.cacheTimeline(); | 533 | this.cacheTimeline(); |
511 | 534 | ||
512 | // Clear drag and drop variables for future re-use | 535 | // Clear drag and drop variables for future re-use |
513 | this._dropLayerID = null; | 536 | this._dropLayerID = null; |
514 | this.dragLayerIndexes = []; | ||
515 | this._dragLayerIndexes = []; | ||
516 | this.lastLayerClicked = 0; | 537 | this.lastLayerClicked = 0; |
517 | 538 | ||
518 | // Sometimes, just to be fun, the drop and dragend events don't fire. | 539 | // Sometimes, just to be fun, the drop and dragend events don't fire. |
519 | // So just in case, set the draw routine to delete the helper. | 540 | // So just in case, set the draw routine to delete the helper. |
520 | this._deleteHelper = true; | 541 | this._deleteHelper = true; |
542 | this._needsDOMManipulation = true; | ||
521 | this.needsDraw = true; | 543 | this.needsDraw = true; |
522 | } | 544 | } |
523 | } | 545 | } |
524 | }, | 546 | }, |
547 | _needsDOMManipulation: { | ||
548 | value: false | ||
549 | }, | ||
525 | _appendHelper: { | 550 | _appendHelper: { |
526 | value: false | 551 | value: false |
527 | }, | 552 | }, |
@@ -571,32 +596,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
571 | value:function () { | 596 | value:function () { |
572 | this.initTimeline(); | 597 | this.initTimeline(); |
573 | 598 | ||
574 | // Bind drag and drop event handlers | ||
575 | this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); | ||
576 | this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); | ||
577 | this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); | ||
578 | this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); | ||
579 | |||
580 | // Bind the handlers for the config menu | ||
581 | this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); | ||
582 | this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false); | ||
583 | this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false); | ||
584 | this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false); | ||
585 | document.addEventListener("click", this.handleDocumentClick.bind(this), false); | ||
586 | |||
587 | this.addPropertyChangeListener("currentDocument.model.domContainer", this); | ||
588 | |||
589 | // Bind some bindings | ||
590 | Object.defineBinding(this, "currentSelectedContainer", { | ||
591 | boundObject:this.application.ninja, | ||
592 | boundObjectPropertyPath:"currentSelectedContainer", | ||
593 | oneway:true | ||
594 | }); | ||
595 | |||
596 | // Create the easing menu for future use. |