aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rwxr-xr-xjs/mediators/element-mediator.js43
-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
5 files changed, 2204 insertions, 155 deletions
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index bd0ae3cb..99d2f822 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -483,30 +483,25 @@ exports.ElementMediator = Montage.create(Component, {
483 }, 483 },
484 484
485 reArrangeDOM:{ 485 reArrangeDOM:{
486 value: function(layersDraggedArray, layerDroppedAfter) { 486 value: function(arrLayersDragged, dropTargetElement) {
487 var documentRoot,length; 487 var i = 0,
488 488 arrLayersDraggedLength = arrLayersDragged.length,
489 documentRoot = this.application.ninja.currentDocument.model.documentRoot; 489 targetParentNode,
490 length = layersDraggedArray.length; 490 targetElement;
491 491
492 for(var i=0; documentRoot.children[i]; i++) { 492 if (arrLayersDraggedLength === 0) {
493 if(documentRoot.children[i] === layerDroppedAfter.layerData.stageElement) { 493 // Nothing was dragged, so return.
494 if(length >0){ 494 return;
495 documentRoot.children[i].parentNode.insertBefore(layersDraggedArray[length-1].layerData.stageElement, documentRoot.children[i]); 495 }
496 } 496
497 497 // Get the target parent node (this will be the parentNode of any of the dragging items)
498 /* Will require for Multiple Drag n Drop */ 498 targetParentNode = arrLayersDragged[0].parentNode;
499 //length = length-1; 499
500 //index = i; 500
501 //if(length>0) { 501 // Loop through arrLayersDragged and insertBefore the drop target element
502 //while(layersDraggedArray[length]) { 502 for (i = 0; i < arrLayersDraggedLength; i++) {
503 //documentRoot.children[index].parentNode.insertBefore(layersDraggedArray[length-1].layerData.elementsList[0],documentRoot.children[k].nextSibling); 503 targetParentNode.insertBefore(arrLayersDragged[i], dropTargetElement);
504 //length--; 504 }
505 //index++;
506 //}
507 //}
508 }
509 }
510 } 505 }
511 } 506 }
512}); \ No newline at end of file 507}); \ No newline at end of file
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