aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
authorJon Reid2012-05-18 15:05:50 -0700
committerJon Reid2012-05-18 15:05:50 -0700
commit6c4f58ab9dd2f60d509d3e1c1ba0c94a6995691d (patch)
treeb555c40a0276052e6109d98a5ec23358759985f2 /js/panels/Timeline
parentef499e92341c9bd6edbee70f86dc5a6fe8b461eb (diff)
downloadninja-6c4f58ab9dd2f60d509d3e1c1ba0c94a6995691d.tar.gz
Timeline: Fix element insertion to use new TimelinePanel properties and
multiselect. Fix Property Panel so changing an ID there will actually change an ID on the element (broken by switch from id to data-montage-id change).
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js22
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js82
2 files changed, 57 insertions, 47 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 48b2dfdf..4fb3e43c 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -500,11 +500,6 @@ var Layer = exports.Layer = Montage.create(Component, {
500 this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); 500 this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false);
501 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); 501 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
502 this.element.addEventListener("drop", this.handleDrop.bind(this), false); 502 this.element.addEventListener("drop", this.handleDrop.bind(this), false);
503
504 this.eventManager.addEventListener("updatedID", this, false);
505
506
507
508 } 503 }
509 }, 504 },
510 draw: { 505 draw: {
@@ -854,23 +849,6 @@ var Layer = exports.Layer = Montage.create(Component, {
854 } 849 }
855 } 850 }
856 }, 851 },
857
858 handleUpdatedID:{
859 value:function(event){
860 var i= this.application.ninja.timeline.arrLayers.length;
861 if(event.detail.id){
862 for(var k=0;k<i;k++){
863 if(this.application.ninja.timeline.arrLayers[k].layerData.layerID=== this.application.ninja.timeline.currentLayerSelected.layerData.layerID){
864 this.application.ninja.timeline.currentLayerSelected.layerData.layerName = event.detail.id;
865 this.application.ninja.timeline.triggerLayerBinding(k);
866 this.needsDraw=true;
867 }
868 }
869
870 }
871 }
872 }
873
874 /* End: Logging routines */ 852 /* End: Logging routines */
875 853
876}); 854});
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index d1f51d16..6155ce3b 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -62,11 +62,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
62 value: false 62 value: false
63 }, 63 },
64 64
65 // Set to false to skip array caching array sets in current document 65 // Set to false to skip array caching array sets in currentDocument
66 _boolCacheArrays:{ 66 _boolCacheArrays:{
67 value:true 67 value:true
68 }, 68 },
69 69
70 // Current layer number: iterated and used to assign layer IDs.
70 _currentLayerNumber:{ 71 _currentLayerNumber:{
71 value:0 72 value:0
72 }, 73 },
@@ -633,6 +634,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
633 this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false); 634 this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false);
634 document.addEventListener("keydown", this.timelineLeftPaneKeydown.bind(this), false); 635 document.addEventListener("keydown", this.timelineLeftPaneKeydown.bind(this), false);
635 document.addEventListener("keyup", this.timelineLeftPaneKeyup.bind(this), false); 636 document.addEventListener("keyup", this.timelineLeftPaneKeyup.bind(this), false);
637 this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false);
636 638
637 // Bind some bindings 639 // Bind some bindings
638 Object.defineBinding(this, "currentSelectedContainer", { 640 Object.defineBinding(this, "currentSelectedContainer", {
@@ -926,7 +928,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
926 // Loop through arrLayers and do the selection. 928 // Loop through arrLayers and do the selection.
927 for (i = 0; i < arrLayersLength; i++) { 929 for (i = 0; i < arrLayersLength; i++) {
928 if (arrSelectedIndexes.indexOf(i) > -1) { 930 if (arrSelectedIndexes.indexOf(i) > -1) {
929 //console.log('TimelinePanel.selectLayers, selecting layer at index ', i)
930 this.arrLayers[i].layerData.isSelected = true; 931 this.arrLayers[i].layerData.isSelected = true;
931 this.arrLayers[i].isSelected = true; 932 this.arrLayers[i].isSelected = true;
932 this.triggerLayerBinding(i); 933 this.triggerLayerBinding(i);
@@ -944,7 +945,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
944 945
945 // Finally, reset the master duration. 946 // Finally, reset the master duration.
946 this.resetMasterDuration(); 947 this.resetMasterDuration();
947
948 } 948 }
949 }, 949 },
950 950
@@ -1169,35 +1169,27 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1169 if (this.checkable_animated.classList.contains("checked")) { 1169 if (this.checkable_animated.classList.contains("checked")) {
1170 thingToPush.layerData.isVisible = false; 1170 thingToPush.layerData.isVisible = false;
1171 } 1171 }
1172 1172
1173 if (this.layerRepetition.selectedIndexes) { 1173 // Determine where the new array should be inserted in arrLayers.
1174 // There is a selected layer, so we need to splice the new layer on top of it. 1174 // Ordinarily we could use this.getInsertionIndex BUT the new element
1175 myIndex = this.layerRepetition.selectedIndexes[0]; 1175 // insertion and selection has already fired, so getInsertionIndex will return
1176 if (typeof(myIndex) === "undefined") { 1176 // incorrect info. So we need to look at the DOM.
1177 // Edge case: sometimes there's nothing selected, so this will be "undefined" 1177 var childrenLength = this.application.ninja.currentSelectedContainer.children.length,
1178 // In that case, set it to 0, the first layer. 1178 newIndex = childrenLength -1;
1179 myIndex = 0; 1179 for (i = 0; i < childrenLength; i++) {
1180 } 1180 var currTest = this.application.ninja.currentSelectedContainer.children[i];
1181 for (var i = 0; i < this.layerRepetition.selectedIndexes.length; i++) { 1181 if (object == currTest) {
1182 if (myIndex > this.layerRepetition.selectedIndexes[i]) { 1182 myIndex = newIndex - i;
1183 myIndex = this.layerRepetition.selectedIndexes[i]; 1183 }
1184 }
1185 }
1186 thingToPush.layerData.layerPosition = myIndex;
1187 thingToPush.layerData.trackPosition = myIndex;
1188 this.arrLayers.splice(myIndex, 0, thingToPush);
1189 } else {
1190 thingToPush.layerData.layerPosition = myIndex;
1191 this.arrLayers.splice(myIndex, 0, thingToPush);
1192
1193 } 1184 }
1185
1186 this.arrLayers.splice(myIndex, 0, thingToPush);
1194 this.selectLayers([myIndex]); 1187 this.selectLayers([myIndex]);
1195 } 1188 }
1196 }, 1189 },
1197 1190
1198 restoreLayer:{ 1191 restoreLayer:{
1199 value:function (ele) { 1192 value:function (ele) {
1200
1201 var stageElementName, 1193 var stageElementName,
1202 thingToPush = this.createLayerTemplate(); 1194 thingToPush = this.createLayerTemplate();
1203 1195
@@ -1406,6 +1398,28 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1406 } 1398 }
1407 }, 1399 },
1408 1400
1401 // Get the index where a layer should be inserted based on selection.
1402 // If nothing is selected, returns false.
1403 // Used by ElementController.addElement.
1404 getInsertionIndex: {
1405 value: function() {
1406 var i = 0,
1407 currentLayersSelectedLength = this.currentLayersSelected.length,
1408 arrLayersLength = this.arrLayers.length,
1409 returnVal = arrLayersLength -1;
1410 if (this.currentLayersSelected === false) {
1411 return false;
1412 }
1413
1414 for (i = 0; i < arrLayersLength; i++) {
1415 if (this.arrLayers[i].layerData.isSelected) {
1416 returnVal = i;
1417 }
1418 }
1419 return returnVal;
1420 }
1421 },
1422
1409 getLayerIndexByID:{ 1423 getLayerIndexByID:{
1410 value:function (layerID, tempArr) { 1424 value:function (layerID, tempArr) {
1411 var i = 0, 1425 var i = 0,
@@ -1516,6 +1530,24 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1516 } 1530 }
1517 } 1531 }
1518 }, 1532 },
1533
1534 // A layer's ID has been updated in the property panel. We need to update
1535 // our layer.
1536 handleLayerIdUpdate: {
1537 value: function(event) {
1538 var i = 0,
1539 arrLayersLength = this.arrLayers.length;
1540 for (i = 0; i < arrLayersLength; i++) {
1541 var myTest = this.arrLayers[i].layerData.stageElement;
1542 if (this.application.ninja.selectedElements[0] == myTest) {
1543 this.arrLayers[i].layerData.layerName = event.detail.id;
1544 this.arrLayers[i].layerName = event.detail.id;
1545 this.triggerLayerBinding(i);
1546 }
1547 }
1548 }
1549 },
1550
1519 // Trigger the layer/track data binding 1551 // Trigger the layer/track data binding
1520 triggerLayerBinding : { 1552 triggerLayerBinding : {
1521