From 7e997cac27b4fcb1a30ab53ab5d2114eacfb9222 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Tue, 3 Jul 2012 12:14:34 -0700
Subject: Timeline: Code refactor for Style.js
---
js/panels/Timeline/Style.reel/Style.js | 195 +++++++++++++++++----------------
1 file changed, 103 insertions(+), 92 deletions(-)
(limited to 'js/panels/Timeline')
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index c8d323a9..78bc2db3 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -17,38 +17,80 @@
var Montage = require("montage/core/core").Montage;
var Component = require("montage/ui/component").Component;
-var ElementsMediator = require("js/mediators/element-mediator").ElementMediator
+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator
var LayerStyle = exports.LayerStyle = Montage.create(Component, {
-
+ /* === BEGIN: Models === */
+ _parentLayerComponent: {
+ value: null
+ },
+
+ _styleContainer: {
+ value: null
+ },
styleContainer: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._styleContainer;
+ },
+ set: function(newVal) {
+ this._styleContainer = newVal;
+ }
},
+ _styleHintable: {
+ value: null
+ },
styleHintable: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._styleHintable;
+ },
+ set: function(newVal) {
+ this._styleHintable = newVal;
+ }
},
+ _styleProperty: {
+ value: null
+ },
styleProperty: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._styleProperty;
+ },
+ set: function(newVal) {
+ this._styleProperty = newVal;
+ }
},
+ _valueEditorHottext: {
+ value: null
+ },
valueEditorHottext: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._valueEditorHottext;
+ },
+ set: function(newVal) {
+ this._valueEditorHottext = newVal;
+ }
},
+ _dtextProperty: {
+ value: null
+ },
dtextProperty: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._dtextProperty;
+ },
+ set: function(newVal) {
+ this._dtextProperty = newVal;
+ }
},
- /* === BEGIN: Models === */
- // isSelected: whether or not the style is selected
_isSelected: {
value: false
},
@@ -66,9 +108,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
}
},
- /* isActive: Whether or not the user is actively clicking within the style; used to communicate state with
- * parent Layer.
- */
_isActive: {
value: false
},
@@ -139,6 +178,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
},
serializable: true
},
+
_myHintableValue : {
value: null
},
@@ -194,13 +234,13 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
}
},
- addedColorChips:
- { value: false },
+ addedColorChips: {
+ value: false
+ },
_colorelement: {
writable:true
},
-
colorelement: {
enumerable: true,
get: function () {
@@ -246,11 +286,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
},
draw: {
value: function() {
-
+ // Show the right view
if (this._swapViews === true) {
- // Show the right thing
this._showView();
}
+
+ // Is this style selected?
if (this.isSelected) {
this.element.classList.add("style-selected");
} else {
@@ -260,6 +301,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
}
},
+
didDraw: {
value: function() {
if (this._swapViews === true) {
@@ -288,6 +330,41 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
this.whichView = "propval";
}
},
+
+ handleFillColorChange: {
+ value: function (event) {
+ if(this.application.ninja.timeline.selectedStyle === "color" ||this.application.ninja.timeline.selectedStyle === this.editorProperty){
+ var fillColorObject={};
+ fillColorObject.color=event._event.color;
+ fillColorObject.mode=event._event.colorMode;
+ ElementsMediator.setColor([this._parentLayerComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide)
+ }
+ }
+ },
+
+ handleHottextChange:{
+ value:function(event){
+ if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
+ this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Change", "timeline");
+ }
+ }
+ },
+
+ handleHottextChanging:{
+ value:function(event){
+ if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
+ this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Changing", "timeline");
+ }
+ }
+ },
+
+ handleBlur:{
+ value:function(event){
+ if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
+ this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [event.target.value] , "Change", "timeline");
+ }
+ }
+ },
// Init: Initialize the component with some useful selectors and other defaults.
init : {
@@ -296,6 +373,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
var arrHints = [],
i = 0;
+ this._parentLayerComponent = this.parentComponent.parentComponent.parentComponent.parentComponent;
+
// Get the array of hints from _myTweenables:
for (i = 0; i < this._myTweenables.length; i++) {
arrHints.push(this._myTweenables[i].property)
@@ -372,7 +451,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
this.valueEditorHottext.minValue = tweenable.min;
this.valueEditorHottext.maxValue = tweenable.max;
this.valueEditorHottext.identifier="hottext";
- el = this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement;
+ el = this._parentLayerComponent.layerData.stageElement;
this.editorValue = parseFloat(ElementsMediator.getProperty(el, this.editorProperty));
this.valueEditorHottext.value = this.editorValue
this.valueEditorHottext.addEventListener("change",this,false);
@@ -397,7 +476,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
this.colorelement = this._fillColorCtrl;
- var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,this._isFill,this._borderSide)
+ var currentValue = ElementsMediator.getColor(this._parentLayerComponent.layerData.stageElement,this._isFill,this._borderSide)
this.application.ninja.timeline.selectedStyle = this.editorProperty;
this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
if(currentValue){
@@ -725,73 +804,5 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
}
]
- },
-
- handleFillColorChange: {
- value: function (event) {
- if(this.application.ninja.timeline.selectedStyle === "color" ||this.application.ninja.timeline.selectedStyle === this.editorProperty){
- var fillColorObject={};
- fillColorObject.color=event._event.color;
- fillColorObject.mode=event._event.colorMode;
- ElementsMediator.setColor([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide)
- }
- }
- },
-
- handleHottextChange:{
- value:function(event){
- if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
- this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Change", "timeline");
- }
- }
- },
-
- handleHottextChanging:{
- value:function(event){
- if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
- this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Changing", "timeline");
- }
- }
- },
-
- handleBlur:{
- value:function(event){
- if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
- this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement], this.editorProperty, [event.target.value] , "Change", "timeline");
- }
- }
- },
-
-
- /* Begin: Logging routines */
- _boolDebug: {
- enumerable: false,
- value: false // set to true to enable debugging to console; false for turning off all debugging.
- },
- boolDebug: {
- get: function() {
- return this._boolDebug;
- },
- set: function(boolDebugSwitch) {
- this._boolDebug = boolDebugSwitch;
- }
- },
- log: {
- value: function(strMessage) {
- if (this.boolDebug) {
- console.log(this.getLineNumber() + ": " + strMessage);
- }
- }
- },
- getLineNumber: {
- value: function() {
- try {
- throw new Error('bazinga')
- }catch(e){
- return e.stack.split("at")[3].split(":")[2];
- }
- }
}
- /* End: Logging routines */
-
});
\ No newline at end of file
--
cgit v1.2.3
From 539f430f95812e726ad14012965ece942a010bca Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Tue, 3 Jul 2012 14:42:03 -0700
Subject: Timeline: Refactor style and layer to use pointers to parent
components.
---
js/panels/Timeline/Layer.reel/Layer.js | 31 +++++++++++++++++++++----------
js/panels/Timeline/Style.reel/Style.js | 11 ++++++++---
2 files changed, 29 insertions(+), 13 deletions(-)
(limited to 'js/panels/Timeline')
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index f7b66a39..f53d54aa 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -13,7 +13,10 @@ var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
var Layer = exports.Layer = Montage.create(Component, {
/* Begin: Models */
-
+ _timelinePanel: {
+ value: null
+ },
+
_dynamicLayerTag: {
value: null
},
@@ -664,6 +667,14 @@ var Layer = exports.Layer = Montage.create(Component, {
this.dtextScaleX= parseFloat(ElementsMediator.getProperty(el, "width"));
}
},
+
+ willDraw: {
+ value: function() {
+ if (this._timelinePanel === null) {
+ this._timelinePanel = this.parentComponent.parentComponent;
+ }
+ }
+ },
draw: {
value: function() {
@@ -770,11 +781,11 @@ var Layer = exports.Layer = Montage.create(Component, {
// Dispatch the event to the TimelineTrack component associated with this Layer.
var myIndex = false,
i = 0,
- arrLayersLength = this.parentComponent.parentComponent.arrLayers.length,
+ arrLayersLength = this._timelinePanel.arrLayers.length,
arrTracks = document.querySelectorAll('[data-montage-id="track"]');
for (i = 0; i < arrLayersLength; i++) {
- if (this.stageElement == this.parentComponent.parentComponent.arrLayers[i].layerData.stageElement) {
+ if (this.stageElement == this._timelinePanel.arrLayers[i].layerData.stageElement) {
myIndex = i;
}
}
@@ -1005,7 +1016,7 @@ var Layer = exports.Layer = Montage.create(Component, {
},
handleDragleave: {
value: function(event) {
- if (this.parentComponent.parentComponent.draggingType !== "layer") {
+ if (this._timelinePanel.draggingType !== "layer") {
return;
}
this.element.classList.remove("dragOver");
@@ -1013,14 +1024,14 @@ var Layer = exports.Layer = Montage.create(Component, {
},
handleDragstart: {
value: function(event) {
- //this.parentComponent.parentComponent.dragLayerID = this.layerID;
+ //this._timelinePanel.dragLayerID = this.layerID;
event.dataTransfer.setData('Text', 'Layer');
- this.parentComponent.parentComponent.draggingType = "layer";
+ this._timelinePanel.draggingType = "layer";
}
},
handleDragover: {
value: function(event) {
- if (this.parentComponent.parentComponent.draggingType !== "layer") {
+ if (this._timelinePanel.draggingType !== "layer") {
return;
}
event.preventDefault();
@@ -1032,13 +1043,13 @@ var Layer = exports.Layer = Montage.create(Component, {
handleDrop : {
value: function(event) {
- if (this.parentComponent.parentComponent.draggingType !== "layer") {
+ if (this._timelinePanel.draggingType !== "layer") {
return;
}
event.stopPropagation();
this.element.classList.remove("dragOver");
- if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) {
- this.parentComponent.parentComponent.dropLayerID = this.layerID;
+ if (this._timelinePanel.dragLayerID !== this.layerID) {
+ this._timelinePanel.dropLayerID = this.layerID;
}
return false;
}
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index 78bc2db3..802c6311 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -284,6 +284,13 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
this.init();
}
},
+ willDraw: {
+ value: function() {
+ if (this._parentLayerComponent === null) {
+ this._parentLayerComponent = this.parentComponent.parentComponent.parentComponent.parentComponent;
+ }
+ }
+ },
draw: {
value: function() {
// Show the right view
@@ -372,9 +379,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
var arrHints = [],
i = 0;
-
- this._parentLayerComponent = this.parentComponent.parentComponent.parentComponent.parentComponent;
-
+
// Get the array of hints from _myTweenables:
for (i = 0; i < this._myTweenables.length; i++) {
arrHints.push(this._myTweenables[i].property)
--
cgit v1.2.3
From 8c087f7c13a2bd72e1640e99e339a74fc2250901 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Tue, 3 Jul 2012 15:47:50 -0700
Subject: Timeline: First pass at cleaning up TimelineTrack code. Changes
propagated to PropertyTrack, TimelineTrack, and Tween classes.
---
.../Timeline/PropertyTrack.reel/PropertyTrack.js | 4 +-
.../Timeline/TimelinePanel.reel/TimelinePanel.js | 1198 ++++++++++----------
.../Timeline/TimelineTrack.reel/TimelineTrack.js | 7 +-
js/panels/Timeline/Tween.reel/Tween.js | 4 +-
4 files changed, 603 insertions(+), 610 deletions(-)
(limited to 'js/panels/Timeline')
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index c4571e9d..5c674c27 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -244,7 +244,9 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
insertPropTween:{
value:function(clickPos){
var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
- this.application.ninja.timeline.selectLayer(selectedIndex, true);
+ // this.application.ninja.timeline.selectLayer(selectedIndex, true); // Deprecated.
+ this.application.ninja.timeline.selectLayers([selectedIndex]);
+ this.application.ninja.timeline.updateStageSelection();
var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
var currentMillisec = currentMillisecPerPixel * clickPos;
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 1df37636..17372935 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -11,103 +11,244 @@ var Montage = require("montage/core/core").Montage,
var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
+ /* === BEGIN: Models === */
+ _user_layers: {
+ value: null
+ },
user_layers: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._user_layers;
+ },
+ set: function(newVal) {
+ this._user_layers = newVal;
+ }
},
+ _track_container: {
+ value: null
+ },
track_container: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._track_container;
+ },
+ set: function(newVal) {
+ this._track_container = newVal;
+ }
},
+ _timeline_leftpane: {
+ value: null
+ },
timeline_leftpane: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._timeline_leftpane;
+ },
+ set: function(newVal) {
+ this._timeline_leftpane = newVal;
+ }
},
+ _layer_tracks: {
+ value: null
+ },
layer_tracks: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._layer_tracks;
+ },
+ set: function(newVal) {
+ this._layer_tracks = newVal;
+ }
},
+ _master_track: {
+ value: null
+ },
master_track: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._master_track;
+ },
+ set: function(newVal) {
+ this._master_track = newVal;
+ }
},
+ _time_markers: {
+ value: null
+ },
time_markers: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._time_markers;
+ },
+ set: function(newVal) {
+ this._time_markers = newVal;
+ }
},
+ _playhead: {
+ value: null
+ },
playhead: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._playhead;
+ },
+ set: function(newVal) {
+ this._playhead = newVal;
+ }
},
+ _playheadmarker: {
+ value: null
+ },
playheadmarker: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._playheadmarker;
+ },
+ set: function(newVal) {
+ this._playheadmarker = newVal;
+ }
},
+ _timetext: {
+ value: null
+ },
timetext: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._timetext;
+ },
+ set: function(newVal) {
+ this._timetext = newVal;
+ }
},
+ _timebar: {
+ value: null
+ },
timebar: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._timebar;
+ },
+ set: function(newVal) {
+ this._timebar = newVal;
+ }
},
+ _container_tracks: {
+ value: null
+ },
container_tracks: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._container_tracks;
+ },
+ set: function(newVal) {
+ this._container_tracks = newVal;
+ }
},
+ _end_hottext: {
+ value: null
+ },
end_hottext: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._end_hottext;
+ },
+ set: function(newVal) {
+ this._end_hottext = newVal;
+ }
},
+ _container_layers: {
+ value: null
+ },
container_layers: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._container_layers;
+ },
+ set: function(newVal) {
+ this._container_layers = newVal;
+ }
},
+ _timeline_disabler: {
+ value: null
+ },
timeline_disabler: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._timeline_disabler;
+ },
+ set: function(newVal) {
+ this._timeline_disabler = newVal;
+ }
},
+ _checkable_relative: {
+ value: null
+ },
checkable_relative: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._checkable_relative;
+ },
+ set: function(newVal) {
+ this._checkable_relative = newVal;
+ }
},
+ _checkable_absolute: {
+ value: null
+ },
checkable_absolute: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._checkable_absolute;
+ },
+ set: function(newVal) {
+ this._checkable_absolute = newVal;
+ }
},
+ _checkable_animated: {
+ value: null
+ },
checkable_animated: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._checkable_animated;
+ },
+ set: function(newVal) {
+ this._checkable_animated = newVal;
+ }
},
+ _tl_configbutton: {
+ value: null
+ },
tl_configbutton: {
- value: null,
- serializable: true
+ serializable: true,
+ get: function() {
+ return this._tl_configbutton;
+ },
+ set: function(newVal) {
+ this._tl_configbutton = newVal;
+ }
},
-
-
- /* === BEGIN: Models === */
_currentDocument: {
value : null
},
-
currentDocument : {
get : function() {
return this._currentDocument;
@@ -157,14 +298,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
- handleChange: {
- value: function() {
- if(this.currentDocument && this.currentDocument.model.getProperty("domContainer")) {
- this.currentSelectedContainer = this.currentDocument.model.getProperty("domContainer");
- }
- }
- },
-
_currentSelectedContainer: {
value: null
},
@@ -199,7 +332,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_arrLayers:{
value:[]
},
-
arrLayers:{
serializable:true,
get:function () {
@@ -215,7 +347,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_temparrLayers:{
value:[]
},
-
temparrLayers:{
get:function () {
return this._temparrLayers;
@@ -229,7 +360,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_layerRepetition:{
value:null
},
-
layerRepetition:{
get:function () {
return this._layerRepetition;
@@ -280,7 +410,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_currentLayerNumber:{
value:0
},
-
currentLayerNumber:{
get:function () {
return this._currentLayerNumber;
@@ -293,18 +422,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
- _currentLayerSelected:{
- value: false
- },
- currentLayerSelected:{
- get:function () {
- return this._currentLayerSelected;
- },
- set:function (newVal) {
- this._currentLayerSelected = newVal;
- this.cacheTimeline();
- }
- },
_currentElementsSelected: {
value: []
},
@@ -362,7 +479,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_millisecondsOffset:{
value:1000
},
-
millisecondsOffset:{
get:function () {
return this._millisecondsOffset;
@@ -379,7 +495,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_masterDuration:{
value:0
},
-
masterDuration:{
serializable:true,
get:function () {
@@ -396,7 +511,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_trackRepetition:{
value:null
},
-
trackRepetition:{
get:function () {
return this._trackRepetition;
@@ -409,7 +523,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_selectedKeyframes:{
value:[]
},
-
selectedKeyframes:{
serializable:true,
get:function () {
@@ -423,7 +536,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_selectedTweens:{
value:[]
},
-
selectedTweens:{
serializable:true,
get:function () {
@@ -437,7 +549,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_breadCrumbContainer:{
value:null
},
-
breadCrumbContainer:{
get:function () {
return this._breadCrumbContainer;
@@ -469,15 +580,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_dragAndDropHelper : {
value: false
},
+
_dragAndDropHelperCoords: {
value: false
},
+
_dragAndDropHelperOffset : {
value: false
},
- _dragLayerID : {
- value: null
- },
+
_draggingType: {
value: false
},
@@ -502,6 +613,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
+ _dragLayerID : {
+ value: null
+ },
dragLayerID : {
get: function() {
return this._dragLayerID;
@@ -540,8 +654,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
dragAndDropDirection = -1;
}
targetIndex = dropLayerIndex + dragAndDropDirection;
-
- // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order?
// Get the target DOM element.
if (typeof(this.arrLayers[targetIndex]) !== "undefined") {
@@ -553,7 +665,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
// Splice
for (i = 0; i < dragLayerIndexesLength; i++) {
var myDraggingLayer = this.arrLayers[this.currentLayersSelected[i]];
- // Splice arrLayers
this.arrLayers.splice(this.currentLayersSelected[i], 1);
this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer);
}
@@ -574,15 +685,19 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
}
},
+
_needsDOMManipulation: {
value: false
},
+
_appendHelper: {
value: false
},
+
_deleteHelper: {
value: false
},
+
_scrollTracks: {
value: false
},
@@ -600,16 +715,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
-
useAbsolutePosition:{
value:true
},
+
_currentDocumentUuid: {
value: false
},
+
_ignoreSelectionChanges: {
value: false
},
+
// is the control key currently being pressed (used for multiselect)
_isControlPressed: {
value: false
@@ -619,6 +736,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
_isShiftPressed: {
value: false
},
+
+ // Hack to ignore extra container change event during document switching.
+ _ignoreNextContainerChange: {
+ value: true
+ },
/* === END: Models === */
/* === BEGIN: Draw cycle === */
@@ -706,8 +828,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
// Do we need to scroll the layers?
if (this._areTracksCollapsing !== false) {
- //console.log("diddraw: user_layers, layout_tracks", this.user_layers.scrollTop, this.layout_tracks.scrollTop);
- //this.layout_tracks.scrollTop = this.user_layers.scrollTop;\
this.layout_tracks.scrollTop = this._areTracksCollapsing;
this._areTracksCollapsing = false;
}
@@ -715,6 +835,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
},
/* === END: Draw cycle === */
+
/* === BEGIN: Controllers === */
// Create an empty layer template object with minimal defaults and return it for use
createLayerTemplate:{
@@ -770,7 +891,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.application.ninja.currentDocument.tlArrLayers = this.arrLayers;
this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer;
this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber;
- this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected;
this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected;
for (i = 0; i < hashLength; i++ ) {
if (this.application.ninja.currentDocument.tlBreadcrumbHash[i].containerUuid === this.currentDocument.model.domContainer.uuid) {
@@ -789,6 +909,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
}
},
+
// Initialize Timeline cache in currentDocument.
initTimelineCache: {
value: function() {
@@ -805,62 +926,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
- // Create an array of style objects for an element, for use
- // in creating a new layer
- createLayerStyles : {
- value: function(ptrElement) {
- // TODO: Create logic to loop through
- // CSS properties on element and build
- // array of layer styles for return.
- // Right now this method just returns an array of one bogus style.
-
- var returnArray = [],
- newStyle = {},
- styleID = "1@0"; // format: layerID + "@" + style counter
-
- /* Example new style
- newStyle.styleID = styleID;
- newStyle.whichView = "propval"; // Which view do we want to show, usually property/value view (see Style)
- newStyle.editorProperty = "top"; // the style property
- newStyle.editorValue = 0; // The current value
- newStyle.ruleTweener = false;
- newStyle.isSelected = false;
-
- returnArray.push(newStyle);
- */
-
- return returnArray;
-
- }
- },
-
- // Create an array of style track objects for an element, for use
- // in creating a new layer
- createStyleTracks : {
- value: function(ptrElement) {
- // TODO: Create logic to loop through
- // CSS properties on element and build
- // array of layer styles for return.
- // Right now this method just returns an array of one bogus style.
-
- var returnArray = [];
-
- return returnArray;
-
- }
- },
-
// Bind all document-specific events (pass in true to unbind)
_bindDocumentEvents : {
value: function(boolUnbind) {
- /*
- var arrEvents = [ "stageElement",
- "deleteLayer",
- "elementAdded",
- "elementsRemoved",
- "elementReplaced",
- "selectionChange"],
- */
var arrEvents = ["elementAdded",
"elementsRemoved",
"selectionChange"],
@@ -887,12 +955,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.layout_tracks = this.element.querySelector(".layout-tracks");
this.layout_markers = this.element.querySelector(".layout_markers");
-
- // Bind the event handler for the document change events
- //this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false);
+ // Bind the event handler for the document close events
this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false);
- //this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false);
- //this.eventManager.addEventListener("breadCrumbBinding",this,false);
// Bind drag and drop event handlers
this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
@@ -908,12 +972,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
document.addEventListener("click", this.handleDocumentClick.bind(this), false);
// Add some event handlers
- this.timeline_leftpane.addEventListener("click", this.timelineLeftPanelMousedown.bind(this), false);
- //this.timeline_leftpane.addEventListener("click", this.timelineLeftPanelMousedown.bind(this), false);
- //this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false);
- this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
- this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
- this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false);
+ this.timeline_leftpane.addEventListener("click", this.handleTimelineLeftPanelClick.bind(this), false);
+ this.layout_tracks.addEventListener("scroll", this.handleLayerScroll.bind(this), false);
+ this.user_layers.addEventListener("scroll", this.handleLayerScroll.bind(this), false);
+ this.end_hottext.addEventListener("changing", this.handleTrackContainerWidthChange.bind(this), false);
this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false);
this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false);
this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false);
@@ -923,7 +985,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false);
this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false);
this.play_button.addEventListener("click", this.handlePlayButtonClick.bind(this), false);
-
this.addPropertyChangeListener("currentDocument.model.domContainer", this);
// Start the panel out in disabled mode by default
@@ -937,19 +998,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
// Initialize the timeline for a document.
// Called when a document is opened (new or existing), or when documents are switched.
- _ignoreNextContainerChange: {
- value: true
- },
initTimelineForDocument:{
value:function () {
var myIndex;
this.drawTimeMarkers();
+
// Document switching
// Check to see if we have saved timeline information in the currentDocument.
- // console.log("TimelinePanel.initTimelineForDocument");
-
if ((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined")) {
- // console.log('TimelinePanel.initTimelineForDocument: new Document');
// No, we have no information stored.
// This could mean we are creating a new file, OR are opening an existing file.
@@ -977,9 +1033,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this._currentDocumentUuid = this.application.ninja.currentDocument.uuid;
} else if (this.application.ninja.currentDocument.setLevel) {
- // console.log('TimelinePanel.initTimelineForDocument: breadCrumbClick');
// Information stored, but we're moving up or down in the breadcrumb.
-
var i = 0,
hash = this.application.ninja.currentDocument.tlBreadcrumbHash,
hashLength = hash.length,
@@ -996,7 +1050,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
}
- // Possibly nothing was in the hash, so check and if so fall back to old restoreLayer method.
+ // Possibly nothing was in the hash, fall back to old restoreLayer method.
if (boolHashed === false) {
for (myIndex = 0; parentNode.children[myIndex]; myIndex++) {
this._openDoc = true;
@@ -1011,12 +1065,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.resetMasterDuration();
} else {
- // console.log('TimelinePanel.initTimelineForDocument: else fallback');
// we do have information stored. Use it.
var i = 0,
tlArrLayersLength = this.application.ninja.currentDocument.tlArrLayers.length;
-
+ // Hack to ignore next container change event
this._ignoreNextContainerChange = true;
// We're reading from the cache, not writing to it.
@@ -1029,14 +1082,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
this.arrLayers = this.application.ninja.currentDocument.tlArrLayers;
this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber;
- this.currentLayerSelected = this.application.ninja.currentDocument.tlCurrentLayerSelected;
this.currentLayersSelected = this.application.ninja.currentDocument.tlCurrentLayersSelected;
-
-
- //debugger;
- if (typeof(this.application.ninja.currentDocument.tlCurrentSelectedContainer) !== "undefined") {
-// this.currentDocument.model.domContainer = this.application.ninja.currentDocument.tlCurrentSelectedContainer;
- }
this.currentElementsSelected = this.application.ninja.currentDocument.tlCurrentElementsSelected;
this._currentDocumentUuid = this.application.ninja.currentDocument.uuid;
@@ -1067,14 +1113,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.deselectTweens();
// Reset visual appearance
- // TODO: Maybe playhead position should be stored per document, so we can persist between document switch?
this.application.ninja.timeline.playhead.style.left = "-2px";
this.application.ninja.timeline.playheadmarker.style.left = "0px";
this.application.ninja.timeline.updateTimeText(0.00);
this.timebar.style.width = "0px";
this.checkable_animated.classList.remove("checked");
this.currentLayerNumber = 0;
- this.currentLayerSelected = false;
this.currentLayersSelected = false;
this.currentElementsSelected = [];
this.selectedKeyframes = [];
@@ -1082,7 +1126,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this._captureSelection = false;
this._openDoc = false;
this.end_hottext.value = 25;
- this.updateTrackContainerWidth();
+ this.handleTrackContainerWidthChange();
+
// Clear the repetitions
if (this.arrLayers.length > 0) {
this.arrLayers = [];
@@ -1091,130 +1136,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.resetMasterDuration();
}
},
-
- handleDocumentChange:{
- value:function () {
-
- }
- },
-
- handlePlayButtonClick:{
- value:function(ev){
- this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview;
-
- if (this.application.ninja.appModel.livePreview) {
- this.play_button.classList.remove("playbutton");
- this.play_button.classList.add("pausebutton");
-
- } else {
- this.play_button.classList.remove("pausebutton");
- this.play_button.classList.add("playbutton");
- }
- }
- },
-
- handleKeyframeShortcut:{
- value:function(action){
- var tempEv = {};
- tempEv.offsetX = this.playheadmarker.offsetLeft;
- tempEv.actionType = action;
-
- if (this.currentLayersSelected === false) {
- // oops, we do not have a layer selected. We should growl at the user. For now, this will fail silently.
- return;
- }
-
- // Okay. We need to get the correct layer(s). For each currentElementSelected,
- // loop through trackRepetition.childComponents and compare to stageElement.
- // If they match, that's one of the components that needs the event.
- var i = 0,
- j = 0,
- currentElementsSelectedLength = this.currentElementsSelected.length,
- trackRepLength = this.trackRepetition.childComponents.length,
- arrTargetIndexes = [],
- arrTargetIndexesLength = 0;
-
-
- for (i = 0; i < trackRepLength; i++) {
- var currentElement = this.trackRepetition.childComponents[i].stageElement;
- for (j = 0; j < currentElementsSelectedLength; j++) {
- if (currentElement === this.currentElementsSelected[j]) {
- arrTargetIndexes.push(i);
- }
- }
- }
- arrTargetIndexesLength = arrTargetIndexes.length;
-
- // Now we have an array of things that need to handle the event.
- for (i = 0; i < arrTargetIndexesLength; i++) {
- this.trackRepetition.childComponents[arrTargetIndexes[i]].handleKeyboardShortcut(tempEv);
- }
- }
- },
-
- updateTrackContainerWidth:{
- value:function () {
- this.container_tracks.style.width = (this.end_hottext.value * 80) + "px";
- this.master_track.style.width = (this.end_hottext.value * 80) + "px";
- this.time_markers.style.width = (this.end_hottext.value * 80) + "px";
- if (this.timeMarkerHolder) {
- this.time_markers.removeChild(this.timeMarkerHolder);
- }
- this.drawTimeMarkers();
- }
- },
synchScrollbars: {
value: function(intScrollBy) {
- //this.updateLayerScroll();
- //this.user_layers.scrollTop = 0;
- //this.layout_tracks.scrollTop = this.user_layers.scrollTop;
- //console.log("synch: user_layers, layout_tracks", this.user_layers.scrollTop, this.layout_tracks.scrollTop);
this._areTracksCollapsing = this.layout_tracks.scrollTop - intScrollBy;
this.needsDraw = true;
-
}
},
- updateLayerScroll:{
- value:function () {
- //console.log("TimelinePanel.updateLayerScroll")
- this._areTracksScrolling = true;
- this.needsDraw = true;
-
- }
- },
-
- startPlayheadTracking:{
- value:function () {
- this.time_markers.onmousemove = this.updatePlayhead.bind(this);
- }
- },
-
- stopPlayheadTracking:{
- value:function () {
- this.time_markers.onmousemove = null;
- }
- },
-
- updatePlayhead:{
- value:function (event) {
- var clickedPosition = event.target.offsetLeft + event.offsetX;
- this.playhead.style.left = (clickedPosition - 2) + "px";
- this.playheadmarker.style.left = clickedPosition + "px";
- var currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80);
- var currentMillisec = currentMillisecPerPixel * clickedPosition;
- this.updateTimeText(currentMillisec);
- }
- },
-
- // Event handler for changes in stage selection.
- handleSelectionChange: {
- value:function (event) {
- this.updateLayerSelection();
- }
- },
-
// Select the layers whose indexes are passed in as arrSelectedIndexes.
// Pass in an empty array to clear all selections.
selectLayers:{
@@ -1372,152 +1301,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
- timelineLeftPanelMousedown: {
- value:function (event) {
- var ptrParent = nj.queryParentSelector(event.target, ".container-layer"),
- i = 0,
- arrLayers = document.querySelectorAll(".container-layer"),
- arrLayersLength = arrLayers.length,
- targetIndex = 0,
- isAlreadySelected = false,
- indexAlreadySelected = -5,
- indexLastClicked = 0,
- ua = navigator.userAgent.toLowerCase(),
- boolCommandControlKeyIsPressed = false;
-
- // Check to see if either the Command key (macs) or Control key (windows) is being pressed
- if (ua.indexOf("mac") > -1) {
- if (event.metaKey === true) {
- boolCommandControlKeyIsPressed = true;
- }
- } else {
- if (this._isControlPressed === true) {
- boolCommandControlKeyIsPressed = true;
- }
- }
-
-
- // Did the mousedown event originate within a layer?
- if (ptrParent === false) {
- // No it did not. Do nothing.
- return;
- }
-
- // Get the targetIndex, the index in the arrLayers of the
- // layer that was just clicked on
- for (i = 0; i < arrLayersLength; i++) {
- if (arrLayers[i] == ptrParent) {
- targetIndex = i;
- }
- }
-
- // Did we just click on a layer that's already selected?
- if (this.currentLayersSelected !== false) {
- for (i = 0; i < this.currentLayersSelected.length; i++) {
- if (this.currentLayersSelected[i] === targetIndex) {
- indexAlreadySelected = i;
- }
- }
- }
- if (indexAlreadySelected > -1) {
- isAlreadySelected = true;
- }
-
- // Now, do the selection based on all of that information.
- if (this.currentLayersSelected.length === 0) {
- // Nothing selected yet, so just push the new index into the array.
- this.currentLayersSelected.push(targetIndex);
- } else {
- // Something is already selected. What do do depends on whether
- // or not other keys are pressed.
- if (boolCommandControlKeyIsPressed === true) {
- // Control or Command key is being pressed, so we need to
- // either add the current layer to selectedLayers
- // or remove it if it's already there.
- if (this.currentLayersSelected === false) {
- this.currentLayersSelected = [];
- }
- if (isAlreadySelected === false) {
- this.currentLayersSelected.push(targetIndex);
- } else {
- this.currentLayersSelected.splice(indexAlreadySelected, 1);
- }
- this.lastLayerClicked = targetIndex;
- } else if (this._isShiftPressed === true) {
- // The shift key is being pressed.
- // Start by selecting the lastLayerClicked
- if (this.currentLayersSelected === false) {
- this.currentLayersSelected = [];
- //this.currentLayerSelected = false;
- }
- this.currentLayersSelected = [this.lastLayerClicked];
- // Add all the layers between lastLayerClicked and targetIndex
- if (targetIndex > this.lastLayerClicked) {
- for (i = this.lastLayerClicked+1; i <= targetIndex; i++) {
- this.currentLayersSelected.push(i);
- }
- } else if (targetIndex < this.lastLayerClicked) {
- for (i = targetIndex; i < this.lastLayerClicked; i++) {
- this.currentLayersSelected.push(i);
- }
- }
- } else {
- // No key is pressed, so just select the element
- // and update lastLayerClicked
- this.currentLayersSelected = [targetIndex];
- this.lastLayerClicked = targetIndex;
- }
- }
- this.selectLayers(this.currentLayersSelected);
- this.updateStageSelection();
- }
- },
-
- timelineLeftPaneKeydown: {
- value: function(event) {
- var ua = navigator.userAgent.toLowerCase(),
- boolIsMac = false;
- if (ua.indexOf("mac") > -1) {
- boolIsMac = true;
- }
- if (event.keyCode === 16) {
- // Shift key has been pressed
- this._isShiftPressed = true;
- }
- if ((event.keyCode === 17) && !boolIsMac) {
- // Control key has been pressed
- this._isControlPressed = true;
- }
- /*
- if (event.metaKey === true) {
- this._isControlPressed = true;
- }
- */
- }
- },
-
- timelineLeftPaneKeyup: {
- value: function(event) {
- var ua = navigator.userAgent.toLowerCase(),
- boolIsMac = false;
- if (ua.indexOf("mac") > -1) {
- boolIsMac = true;
- }
- if (event.keyCode === 16) {
- // Shift key has been released
- this._isShiftPressed = false;
- }
- if ((event.keyCode === 17) && !boolIsMac) {
- // Control key has been released
- this._isControlPressed = false;
- }
- if (event.metaKey === false) {
- this._isControlPressed = false;
- }
- }
- },
-
-
createStageElementsAt: {
value:function (isPaste, arrElements) {
@@ -1561,14 +1344,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
if (this.checkable_animated.classList.contains("checked")) {
thingToPush.layerData.isVisible = false;
}
- //arrNewLayers.push(thingToPush);
this.arrLayers.splice(targetIndex, 0, thingToPush);
}
- //console.log(arrNewLayers);
- //console.log(thingToPush);
-
- //this.arrLayers.splice(targetIndex, 0, arrNewLayers);
-
}
},
@@ -1578,11 +1355,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
thingToPush = this.createLayerTemplate();
this.currentLayerNumber = this.currentLayerNumber + 1;
-// stageElementName = "Layer " + this.currentLayerNumber;
-// if(ele.dataset.storedLayerName){
-// stageElementName = ele.dataset.storedLayerName;
-// }
if(ele.id){
thingToPush.layerData.layerName = ele.id;
}
@@ -1590,16 +1363,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">";
thingToPush.parentElement = this.currentDocument.model.domContainer;
if (this._openDoc) {
- //thingToPush.layerData.elementsList.push(ele);
thingToPush.layerData.stageElement = ele;
}
if (this.checkable_animated.classList.contains("checked")) {
thingToPush.layerData.isVisible = false;
}
- // Are there styles to add?
- thingToPush.layerData.arrLayerStyles = this.createLayerStyles();
- thingToPush.layerData.arrStyleTracks = this.createStyleTracks();
+ // Initialize arrays for styles and their associated tracks;
+ // These will be filled (if necessary) in TimelineTrack.
+ thingToPush.layerData.arrLayerStyles = [];
+ thingToPush.layerData.arrStyleTracks = [];
// Add the layer to the repetition
this.temparrLayers.splice(0, 0, thingToPush);
@@ -1607,7 +1380,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
thingToPush.layerData.layerPosition = this.temparrLayers.length - 1;
this._openDoc = false;
-
}
},
@@ -1652,39 +1424,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
- handleElementAdded:{
- value:function(event) {
- var i = 0,
- targetIndex = 0;
- // One or more elements have been added to the stage.
- // We need to add them to the timeline.
- if (typeof(event.detail.length) === "undefined") {
- // This is a standard element creation event.
- this.createStageElementsAt(false, [event.detail]);
- } else {
- // This is a paste action, because event.detail has more than one item in it.
- this.createStageElementsAt(true, event.detail);
- }
- }
- },
-
- handleElementsRemoved:{
- value:function (event) {
- this.deleteLayers(event.detail);
- }
- },
-
- handleElementReplaced:{
- value:function(event){
- // TODO: this needs to be updated. Not sure when an elementReplaced event will be fired?
- /*
- this.currentLayerSelected.layerData.elementsList.pop();
- this.currentLayerSelected.layerData.elementsList.push(event.detail.data.newChild);
- this.currentLayerSelected.layerData.animatedElement = event.detail.data.newChild;
- */
- }
- },
-
drawTimeMarkers:{
value:function () {
this.timeMarkerHolder = document.createElement("div");
@@ -1746,16 +1485,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
- selectLayer:{
- value:function (layerIndex, userSelection) {
- //console.log("=----> Please update this component to use TimelinePanel.selectLayers. See this message for syntax. <----=");
- this.selectLayers([layerIndex]);
- if (userSelection === true) {
- this.updateStageSelection();
- }
- }
- },
-
// Get the index where a layer should be inserted based on selection.
// If nothing is selected, returns false.
// Used by ElementController.addElement.
@@ -1819,46 +1548,380 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
}
},
- handleConfigButtonClick: {
- value: function(event) {
- event.stopPropagation();
- this.handleCheckableClick(event);
-
- }
- },
- handleDocumentClick: {
- value: function(event) {
- if (this.tl_configbutton.classList.contains("checked")) {
- this.tl_configbutton.classList.remove("checked");
- }
- //
- if (this.currentOpenSpanMenu !== false) {
- this.currentOpenSpanMenu.hideEasingMenu();
- this.currentOpenSpanMenu = false;
+
+ buildDragHelper: {
+ value: function() {
+ var myContainer = document.createElement("div"),
+ i = 0,
+ currentLayersSelectedLength = this.currentLayersSelected.length;
+
+ for (i = 0; i < currentLayersSelectedLength; i++) {
+ var currentClone = this.layerRepetition.childComponents[this.currentLayersSelected[i]].element.cloneNode(true);
+ currentClone.classList.add("layerSelected");
+ myContainer.appendChild(currentClone);
}
+
+ this._dragAndDropHelper = myContainer;
+ this._dragAndDropHelper.style.opacity = 0.8;
+ this._dragAndDropHelper.style.position = "absolute";
+ this._dragAndDropHelper.style.top = "0px";
+ this._dragAndDropHelper.style.left = "0px";
+ this._dragAndDropHelper.style.zIndex = 700;
+
+ this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width");
+ this._dragAndDropHelper.classList.add("timeline-dnd-helper");
}
},
-
- handleAnimatedClick: {
- value: function(event) {
- if (typeof(this.application.ninja.currentDocument) === "undefined") {
- return;
- }
- if (this.application.ninja.currentDocument == null) {
- return;
- }
- this.handleCheckableClick(event);
- this.application.ninja.currentDocument.boolShowOnlyAnimated = event.currentTarget.classList.contains("checked");
- var boolHide = false,
- i = 0,
- arrLayersLength = this.arrLayers.length;
- if (event.currentTarget.classList.contains("checked")) {
- // Hide layers with isAnimated = false;
- boolHide = true;
- }
-
- for (i = 0; i < arrLayersLength; i++) {
- if (boolHide) {
+
+ // Trigger the layer/track data binding
+ triggerLayerBinding : {
+ value: function(intIndex) {
+ this.arrLayers[intIndex].layerData.triggerBinding = !this.arrLayers[intIndex].layerData.triggerBinding;
+ }
+ },
+
+ getActiveLayerIndex: {
+ value: function() {
+ var i = 0,
+ returnVal = false,
+ arrLayersLength = this.arrLayers.length;
+ for (i = 0; i < arrLayersLength; i++) {
+ if (this.arrLayers[i].layerData.isSelected === true) {
+ returnVal = i;
+ }
+ }
+ return returnVal;
+ }
+ },
+ /* === END: Controllers === */
+
+ /* === BEGIN: Event Handlers === */
+ handleChange: {
+ value: function() {
+ if(this.currentDocument && this.currentDocument.model.getProperty("domContainer")) {
+ this.currentSelectedContainer = this.currentDocument.model.getProperty("domContainer");
+ }
+ }
+ },
+
+ handleDocumentChange:{
+ value:function () {
+
+ }
+ },
+
+ handlePlayButtonClick:{
+ value:function(ev){
+ this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview;
+
+ if (this.application.ninja.appModel.livePreview) {
+ this.play_button.classList.remove("playbutton");
+ this.play_button.classList.add("pausebutton");
+
+ } else {
+ this.play_button.classList.remove("pausebutton");
+ this.play_button.classList.add("playbutton");
+ }
+ }
+ },
+
+ handleKeyframeShortcut:{
+ value:function(action){
+ var tempEv = {};
+ tempEv.offsetX = this.playheadmarker.offsetLeft;
+ tempEv.actionType = action;
+
+ if (this.currentLayersSelected === false) {
+ // we do not have a layer selected. We should growl at the user. For now, this will fail silently.
+ return;
+ }
+
+ // We need to get the correct layer(s). For each currentElementSelected,
+ // loop through trackRepetition.childComponents and compare to stageElement.
+ // If they match, that's one of the components that needs the event.
+ var i = 0,
+ j = 0,
+ currentElementsSelectedLength = this.currentElementsSelected.length,
+ trackRepLength = this.trackRepetition.childComponents.length,
+ arrTargetIndexes = [],
+ arrTargetIndexesLength = 0;
+
+
+ for (i = 0; i < trackRepLength; i++) {
+ var currentElement = this.trackRepetition.childComponents[i].stageElement;
+ for (j = 0; j < currentElementsSelectedLength; j++) {
+ if (currentElement === this.currentElementsSelected[j]) {
+ arrTargetIndexes.push(i);
+ }
+ }
+ }
+ arrTargetIndexesLength = arrTargetIndexes.length;
+
+ // Now we have an array of things that need to handle the event.
+ for (i = 0; i < arrTargetIndexesLength; i++) {
+ this.trackRepetition.childComponents[arrTargetIndexes[i]].handleKeyboardShortcut(tempEv);
+ }
+ }
+ },
+
+ handleTrackContainerWidthChange:{
+ value:function () {
+ this.container_tracks.style.width = (this.end_hottext.value * 80) + "px";
+ this.master_track.style.width = (this.end_hottext.value * 80) + "px";
+ this.time_markers.style.width = (this.end_hottext.value * 80) + "px";
+ if (this.timeMarkerHolder) {
+ this.time_markers.removeChild(this.timeMarkerHolder);
+ }
+ this.drawTimeMarkers();
+ }
+ },
+
+ handleLayerScroll: {
+ value:function () {
+ this._areTracksScrolling = true;
+ this.needsDraw = true;
+
+ }
+ },
+
+ startPlayheadTracking:{
+ value:function () {
+ this.time_markers.onmousemove = this.updatePlayhead.bind(this);
+ }
+ },
+
+ stopPlayheadTracking:{
+ value:function () {
+ this.time_markers.onmousemove = null;
+ }
+ },
+
+ updatePlayhead:{
+ value:function (event) {
+ var clickedPosition = event.target.offsetLeft + event.offsetX;
+ this.playhead.style.left = (clickedPosition - 2) + "px";
+ this.playheadmarker.style.left = clickedPosition + "px";
+ var currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80);
+ var currentMillisec = currentMillisecPerPixel * clickedPosition;
+ this.updateTimeText(currentMillisec);
+ }
+ },
+
+ // Event handler for changes in stage selection.
+ handleSelectionChange: {
+ value:function (event) {
+ this.updateLayerSelection();
+ }
+ },
+
+ handleTimelineLeftPanelClick: {
+ value:function (event) {
+ var ptrParent = nj.queryParentSelector(event.target, ".container-layer"),
+ i = 0,
+ arrLayers = document.querySelectorAll(".container-layer"),
+ arrLayersLength = arrLayers.length,
+ targetIndex = 0,
+ isAlreadySelected = false,
+ indexAlreadySelected = -5,
+ indexLastClicked = 0,
+ ua = navigator.userAgent.toLowerCase(),
+ boolCommandControlKeyIsPressed = false;
+
+ // Check to see if either the Command key (macs) or Control key (windows) is being pressed
+ if (ua.indexOf("mac") > -1) {
+ if (event.metaKey === true) {
+ boolCommandControlKeyIsPressed = true;
+ }
+ } else {
+ if (this._isControlPressed === true) {
+ boolCommandControlKeyIsPressed = true;
+ }
+ }
+
+
+ // Did the mousedown event originate within a layer?
+ if (ptrParent === false) {
+ // No it did not. Do nothing.
+ return;
+ }
+
+ // Get the targetIndex, the index in the arrLayers of the
+ // layer that was just clicked on
+ for (i = 0; i < arrLayersLength; i++) {
+ if (arrLayers[i] == ptrParent) {
+ targetIndex = i;
+ }
+ }
+
+ // Did we just click on a layer that's already selected?
+ if (this.currentLayersSelected !== false) {
+ for (i = 0; i < this.currentLayersSelected.length; i++) {
+ if (t