aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js40
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js119
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js.orig2115
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js42
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