diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 5 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 118 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.js | 23 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 5 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 27 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 7 |
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; | |||
5 | var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle; | 5 | var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle; |
6 | var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText; | 6 | var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText; |
7 | var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; | 7 | var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; |
8 | var nj = require("js/lib/NJUtils").NJUtils; | ||
8 | 9 | ||
9 | var Layer = exports.Layer = Montage.create(Component, { | 10 | var 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 | }, | ||
580 | handleLayerClick : { | ||
581 | value: function(event) { | ||