aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html5
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js118
-rw-r--r--js/panels/Timeline/Style.reel/Style.js23
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html5
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js27
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js7
6 files changed, 166 insertions, 19 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index add28385..dd819b2b 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -71,6 +71,11 @@
71 "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected", 71 "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected",
72 "oneway" : false 72 "oneway" : false
73 }, 73 },
74 "isActive" : {
75 "boundObject" : {"@": "repetition1"},
76 "boundObjectPropertyPath" : "objectAtCurrentIteration.isActive",
77 "oneway" : false
78 },
74 "editorValue" : { 79 "editorValue" : {
75 "boundObject" : {"@": "repetition1"}, 80 "boundObject" : {"@": "repetition1"},
76 "boundObjectPropertyPath" : "objectAtCurrentIteration.editorValue", 81 "boundObjectPropertyPath" : "objectAtCurrentIteration.editorValue",
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index c5f5d7e4..71a1f01f 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -5,6 +5,7 @@ var Hintable = require("js/components/hintable.reel").Hintable;
5var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle; 5var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle;
6var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText; 6var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText;
7var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; 7var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager;
8var nj = require("js/lib/NJUtils").NJUtils;
8 9
9var Layer = exports.Layer = Montage.create(Component, { 10var Layer = exports.Layer = Montage.create(Component, {
10 11
@@ -100,6 +101,8 @@ var Layer = exports.Layer = Montage.create(Component, {
100 this._layerID = value; 101 this._layerID = value;
101 } 102 }
102 }, 103 },
104
105 /* isSelected: whether or not the layer is currently selected. */
103 _isSelected:{ 106 _isSelected:{
104 value: false, 107 value: false,
105 writable: true, 108 writable: true,
@@ -115,14 +118,8 @@ var Layer = exports.Layer = Montage.create(Component, {
115 if (value !== this._isSelected) { 118 if (value !== this._isSelected) {
116 // Only concerned about different values 119 // Only concerned about different values
117 if (value === false) { 120 if (value === false) {
118 // Deselect all of the styles 121 // If changing from false to true, we need to deselect any associated styles
119 var i = 0, arrLayerStylesLength = this.arrLayerStyles.length; 122 this.selectStyle(false);
120 if (arrLayerStylesLength > 0) {
121 for (i = 0; i < arrLayerStylesLength; i++) {
122 this.arrLayerStyles[i].isSelected = false;
123 }
124 this.styleRepetition.selectedIndexes = null;
125 }
126 } 123 }
127 this._isSelected = value; 124 this._isSelected = value;
128 this.needsDraw = true; 125 this.needsDraw = true;
@@ -130,6 +127,23 @@ var Layer = exports.Layer = Montage.create(Component, {
130 127
131 } 128 }
132 }, 129 },
130
131 /* isActive: Whether or not the user is actively clicking within the layer; used to communicate state with
132 * TimelinePanel.
133 */
134 _isActive: {
135 value: false
136 },
137 isActive: {
138 get: function() {
139 return this._isActive;
140 },
141 set: function(newVal) {
142 this._isActive = newVal;
143 }
144 },
145
146
133 _isAnimated:{ 147 _isAnimated:{
134 value: false, 148 value: false,
135 writable: true, 149 writable: true,
@@ -328,6 +342,10 @@ var Layer = exports.Layer = Montage.create(Component, {
328 342
329 this.buttonDeleteStyle.identifier = "deleteStyle"; 343 this.buttonDeleteStyle.identifier = "deleteStyle";
330 this.buttonDeleteStyle.addEventListener("click", this, false); 344 this.buttonDeleteStyle.addEventListener("click", this, false);
345
346 // Add mousedown listener to set isActive
347 this.element.addEventListener("mousedown", this, false);
348 //this.element.addEventListener("click", this, false);
331 349
332 } 350 }
333 }, 351 },
@@ -408,7 +426,9 @@ var Layer = exports.Layer = Montage.create(Component, {
408 // newStyle = LayerStyle.create(), 426 // newStyle = LayerStyle.create(),
409 newStyle = {}, 427 newStyle = {},
410 newEvent = document.createEvent("CustomEvent"); 428 newEvent = document.createEvent("CustomEvent");
411 429
430 this.isStyleCollapsed = false;
431
412 newEvent.initCustomEvent("layerEvent", false, true); 432 newEvent.initCustomEvent("layerEvent", false, true);
413 newEvent.layerEventLocale = "styles"; 433 newEvent.layerEventLocale = "styles";
414 newEvent.layerEventType = "newStyle"; 434 newEvent.layerEventType = "newStyle";
@@ -420,17 +440,19 @@ var Layer = exports.Layer = Montage.create(Component, {
420 newStyle.editorProperty = ""; 440 newStyle.editorProperty = "";
421 newStyle.editorValue = ""; 441 newStyle.editorValue = "";
422 newStyle.ruleTweener = false; 442 newStyle.ruleTweener = false;
423 newStyle.isSelected = true; 443 newStyle.isSelected = false;
424 444
425 if (!!this.styleRepetition.selectedIndexes) { 445 if (!!this.styleRepetition.selectedIndexes) {
426 mySelection = this.styleRepetition.selectedIndexes[0]; 446 mySelection = this.styleRepetition.selectedIndexes[0];
427 this.arrLayerStyles.splice(mySelection, 0, newStyle); 447 this.arrLayerStyles.splice(mySelection, 0, newStyle);
428 this.styleRepetition.selectedIndexes = [mySelection]; 448 //this.styleRepetition.selectedIndexes = [mySelection];
449 this.selectStyle(mySelection);
429 } else { 450 } else {
430 newLength = this.arrLayerStyles.length; 451 newLength = this.arrLayerStyles.length;
431 this.arrLayerStyles.push(newStyle); 452 this.arrLayerStyles.push(newStyle);
432 mySelection = this.arrLayerStyles.length; 453 mySelection = this.arrLayerStyles.length;
433 this.styleRepetition.selectedIndexes = [mySelection-1]; 454 // this.styleRepetition.selectedIndexes = [mySelection-1];
455 this.selectStyle(mySelection-1);
434 } 456 }
435 457
436 // Set up the event info and dispatch the event 458 // Set up the event info and dispatch the event
@@ -467,6 +489,49 @@ var Layer = exports.Layer = Montage.create(Component, {
467 } 489 }
468 } 490 }
469 }, 491 },
492 selectStyle : {
493 value: function(styleIndex) {
494
495 // Select a style based on its index.
496 // use layerIndex = false to deselect all styles.
497 var i = 0,
498 arrLayerStylesLength = this.arrLayerStyles.length;
499
500 // First, update this.arrStyles[].isSelected
501 for (i = 0; i < arrLayerStylesLength; i++) {
502 if (i === styleIndex) {
503 this.arrLayerStyles[i].isSelected = true;
504 } else {
505 this.arrLayerStyles[i].isSelected = false;
506 }
507 }
508
509 // Next, update this.styleRepetition.selectedIndexes.
510 if (styleIndex !== false) {
511 this.styleRepetition.selectedIndexes = [styleIndex];
512 } else {
513 this.styleRepetition.selectedIndexes = null;
514 }
515
516 }
517 },
518 getActiveStyleIndex : {
519 value: function() {
520 // Searches through the styles and looks for one that has
521 // set its isActive flag to true.
522 var i = 0,
523 returnVal = false,
524 arrLayerStylesLength = this.arrLayerStyles.length;
525
526 for (i = 0; i < arrLayerStylesLength; i++) {
527 if (this.arrLayerStyles[i].isActive === true) {
528 returnVal = i;
529 this.arrLayerStyles[i].isActive = false;
530 }
531 }
532 return returnVal;
533 }
534 },
470 /* End: Controllers */ 535 /* End: Controllers */
471 536
472 /* Begin: Event handlers */ 537 /* Begin: Event handlers */
@@ -498,6 +563,33 @@ var Layer = exports.Layer = Montage.create(Component, {
498 this.needsDraw = true; 563 this.needsDraw = true;
499 } 564 }
500 }, 565 },
566 handleMousedown: {
567 value: function(event) {
568 this.isActive = true;
569 // Check ALL THE CLICKS
570 // Are they in a particular style? If so, we need to select that style and
571 // deselect the others.
572 var ptrParent = nj.queryParentSelector(event.target, ".content-style");
573 if (ptrParent !== false) {
574 // Why yes, the click was within a layer. But which one?
575 var myIndex = this.getActiveStyleIndex();
576 this.selectStyle(myIndex);
577 }
578 }
579 },