From 776e7015b2462e024a9db8e9a208d57856d975d0 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 3 Jul 2012 11:09:45 -0700 Subject: Cleanup Tween.js Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 69 ++++++++++++---------------------- 1 file changed, 25 insertions(+), 44 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 0d189fba..6b940c91 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -11,6 +11,7 @@ var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; var Tween = exports.Tween = Montage.create(Component, { + // ==== Begin Models keyframe: { value: null, serializable: true @@ -184,6 +185,23 @@ var Tween = exports.Tween = Montage.create(Component, { } }, + setData:{ + value:function(){ + this.spanWidth = this.tweenData.spanWidth; + this.keyFramePosition = this.tweenData.keyFramePosition; + this.spanPosition = this.tweenData.spanPosition; + this.keyFrameMillisec = this.tweenData.keyFrameMillisec; + this.tweenID = this.tweenData.tweenID; + this.tweenedProperties = this.tweenData.tweenedProperties; + this.isTweenAnimated = this.tweenData.isTweenAnimated; + this.easing = this.tweenData.easing; + this.initSelect = this.tweenData.initSelect; + this.needsDraw = true; + } + }, + // ==== End Models + + // ==== Begin Draw cycle methods prepareForDraw:{ value:function(){ if(this.initSelect){ @@ -206,37 +224,19 @@ var Tween = exports.Tween = Montage.create(Component, { } } }, + // ==== End Draw cycle methods - setData:{ - value:function(){ - this.spanWidth = this.tweenData.spanWidth; - this.keyFramePosition = this.tweenData.keyFramePosition; - this.spanPosition = this.tweenData.spanPosition; - this.keyFrameMillisec = this.tweenData.keyFrameMillisec; - this.tweenID = this.tweenData.tweenID; - this.tweenedProperties = this.tweenData.tweenedProperties; - this.isTweenAnimated = this.tweenData.isTweenAnimated; - this.easing = this.tweenData.easing; - this.initSelect = this.tweenData.initSelect; - this.needsDraw = true; - } - }, - + // ==== Begin Event handlers handleElementChange:{ value:function (event) { - // temp - testing var - var useAbsolute = true; - if(event.detail.type === "cssChange"){ event.detail.source="cssPanelChange" } - if (event.detail.source && event.detail.source !== "tween") { if(this.parentComponent.parentComponent.isSubproperty){ this.setStyleTweenProperty(event.detail); } else { - // check for correct element selection if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { console.log("Wrong element selected for this keyframe track"); } else { @@ -246,10 +246,11 @@ var Tween = exports.Tween = Montage.create(Component, { } } }, + // ==== End Event handlers + // ==== Begin Controllers setTweenProperties:{ value:function (eventDetail) { - if (eventDetail.source === "SelectionTool" || eventDetail.source === "timeline" || eventDetail.source === "pi" || eventDetail.source === "cssPanelChange") { if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px"; @@ -263,7 +264,7 @@ var Tween = exports.Tween = Montage.create(Component, { if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px"; } - // tell track to update css rule + this.parentComponent.parentComponent.updateKeyframeRule(); this.isTweenAnimated = true; } @@ -281,26 +282,17 @@ var Tween = exports.Tween = Montage.create(Component, { setStyleTweenProperty:{ value:function (eventDetail) { - //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty); - //console.log(eventDetail); if(eventDetail.type == "setProperties"){ - // need to ignore top, left, width, and height - //console.log(eventDetail.data.value[0]); this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; this.parentComponent.parentComponent.updatePropKeyframeRule(); - } else if(eventDetail.type == "setColor"){ var prop = this.parentComponent.parentComponent.trackEditorProperty; this.tweenedProperties[prop] = eventDetail.data.value.color.css; this.parentComponent.parentComponent.updatePropKeyframeRule(); - } else if(eventDetail.type == "setProperty"){ - // need to ignore top, left, width, and height - //console.log(eventDetail.data.value[0]); this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; this.parentComponent.parentComponent.updatePropKeyframeRule(); - - }else { + } else { console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type); } } @@ -308,7 +300,6 @@ var Tween = exports.Tween = Montage.create(Component, { setKeyframeEase:{ value:function(easeType){ - // easeTypes - ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) this.tweenedProperties["-webkit-animation-timing-function"] = easeType; if(this.parentComponent.parentComponent.isSubproperty){ if(this.parentComponent.parentComponent.trackType == "position"){ @@ -323,18 +314,11 @@ var Tween = exports.Tween = Montage.create(Component, { selectTween:{ value: function(){ - // turn on event listener for element change this.eventManager.addEventListener("elementChange", this, false); - - // select the containing layer var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); this.application.ninja.timeline.selectLayer(selectIndex, true); - - // tell timeline to deselect all other tweens and push this one into the selectedTweens in timeline this.application.ninja.timeline.deselectTweens(); this.application.ninja.timeline.selectedTweens.push(this); - - // update playhead position and time text this.application.ninja.timeline.playhead.style.left = (this.keyFramePosition - 2) + "px"; this.application.ninja.timeline.playheadmarker.style.left = this.keyFramePosition + "px"; var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); @@ -342,13 +326,11 @@ var Tween = exports.Tween = Montage.create(Component, { this.application.ninja.timeline.updateTimeText(currentMillisec); if(this.parentComponent.parentComponent.isSubproperty){ - // set property specific style on element var currentValue = this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty]; var el = this.parentComponent.parentComponent.animatedElement; var prop = this.parentComponent.parentComponent.trackEditorProperty; this.application.ninja.elementMediator.setProperty([el], prop, [currentValue], "Change", "tween"); } else { - // move animated element to correct position on stage var currentTop = this.tweenedProperties["top"]; var currentLeft = this.tweenedProperties["left"]; var currentWidth = this.tweenedProperties["width"]; @@ -364,10 +346,9 @@ var Tween = exports.Tween = Montage.create(Component, { deselectTween:{ value:function(){ - // turn off event listener for element change this.eventManager.removeEventListener("elementChange", this, false); - // deselect the keyframe for this tween this.keyframe.deselectKeyframe(); } } + // ==== End Controllers }); -- cgit v1.2.3 From c115fdbfca41554cb3f474e759fa6577187e93f8 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 3 Jul 2012 11:16:42 -0700 Subject: Cleanup Keyframe.js Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 71 +++++++++++++++------------- 1 file changed, 38 insertions(+), 33 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index f7c936f7..45a2afd3 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -9,6 +9,7 @@ var Component = require("montage/ui/component").Component; var Keyframe = exports.Keyframe = Montage.create(Component, { + // ==== Begin models hasTemplate:{ value: true }, @@ -42,7 +43,9 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { this.needsDraw = true; } }, + // ==== End Models + // ==== Begin Draw cycle methods prepareForDraw:{ value:function(){ this.element.addEventListener("click", this, false); @@ -66,57 +69,31 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { this.element.style.left = (this.position - 5) + "px"; } }, + // ==== End Draw cycle methods - deselectKeyframe:{ - value:function(){ - this.isSelected=false; - this.element.style.left = (this.position - 5) + "px"; - } - }, - - selectKeyframe:{ - value:function(){ - if(this.isSelected){ - return; - } - - if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){ - var tweenID = this.parentComponent.tweenID; - var mainTrack = this.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent; - mainTrack.childComponents[0].childComponents[tweenID].childComponents[0].selectKeyframe(); - return; - } - - this.isSelected=true; - this.element.style.left = (this.position - 6) + "px"; - this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty; - this.parentComponent.selectTween(); - } - }, - + // ==== Begin Event handlers handleClick:{ value:function(ev){ this.selectKeyframe(); ev.stopPropagation(); } }, - + handleMouseover: { value: function(event) { this.element.draggable = true; } }, + handleMouseout: { value: function(event) { this.element.draggable = false; } }, + handleDragstart: { value: function(event) { - //this.parentComponent.parentComponent.dragLayerID = this.layerID; event.dataTransfer.setData('Text', 'Keyframe'); - - // Get my index in my track's tween array var i = 0, tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length, myIndex = null; @@ -129,10 +106,38 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { this.selectKeyframe(); } }, + handleDragend: { value: function(event) { this.parentComponent.isDragging = false; } - } - + }, + // ==== End Event handlers + + // === Begin Controllers + selectKeyframe:{ + value:function(){ + if(this.isSelected){ + return; + } + if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){ + var tweenID = this.parentComponent.tweenID; + var mainTrack = this.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent; + mainTrack.childComponents[0].childComponents[tweenID].childComponents[0].selectKeyframe(); + return; + } + this.isSelected=true; + this.element.style.left = (this.position - 6) + "px"; + this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty; + this.parentComponent.selectTween(); + } + }, + + deselectKeyframe:{ + value:function () { + this.isSelected = false; + this.element.style.left = (this.position - 5) + "px"; + } + } + // ==== End Controllers }); -- cgit v1.2.3 From 9cd3ae740b67e192f06ee000eba759ca68bdea52 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 3 Jul 2012 11:54:05 -0700 Subject: Cleanup PropertyTrack.js Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 120 ++++++++------------- 1 file changed, 42 insertions(+), 78 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 72d26e78..c4571e9d 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -9,33 +9,11 @@ var Component = require("montage/ui/component").Component; var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { + /* ===- Begin Models ==== */ hasTemplate:{ value: true }, - prepareForDraw:{ - value:function(){ - this.element.addEventListener("click", this, false); - this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID; - this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement; - this.ninjaStylesContoller = this.application.ninja.stylesController; - } - }, - - draw:{ - value:function(){ - - } - }, - - didDraw:{ - value:function () { - if(this.currentKeyframeRule){ - this.retrieveStoredStyleTweens(); - } - } - }, - trackEditorProperty:{ value:"" }, @@ -51,7 +29,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { _propTweenRepetition:{ value:null }, - propTweenRepetition:{ get:function () { return this._propTweenRepetition; @@ -64,7 +41,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { _propTweens:{ value:[] }, - propTweens:{ serializable:true, get:function () { @@ -78,7 +54,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { _propTrackData:{ value:false }, - propTrackData:{ serializable:true, get:function () { @@ -115,7 +90,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { _trackID:{ value:null }, - trackID:{ serializable:true, get:function () { @@ -131,7 +105,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { _trackType:{ value:null }, - trackType:{ serializable:true, get:function () { @@ -147,7 +120,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { _styleIndex:{ value:null }, - styleIndex:{ serializable:true, get:function () { @@ -174,36 +146,50 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.needsDraw = true; } }, + /* ===- End Models ==== */ + + /* ===- Begin Draw Cycle ==== */ + prepareForDraw:{ + value:function () { + this.element.addEventListener("click", this, false); + this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID; + this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement; + this.ninjaStylesContoller = this.application.ninja.stylesController; + } + }, + + didDraw:{ + value:function () { + if (this.currentKeyframeRule) { + this.retrieveStoredStyleTweens(); + } + } + }, + /* ===- End Draw Cycle ==== */ + /* ===- Begin Event Handlers ==== */ handleClick:{ value:function (ev) { if (ev.shiftKey) { - if (this.trackType == "position") { this.parentComponent.parentComponent.parentComponent.parentComponent.handleNewTween(ev); } - if (this.propTweens.length < 1) { - - // check if there is an editor property assigned yet - // get this property track's editor prop name from layer data arrays var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID), currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex); if (this.trackType == "style") { - //console.log("PropertyTrack.handleClick; selectIndex = ", selectIndex, "; styleIndex = ", currentSelectedStyleIndex) - if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) { + if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) { console.log("Please enter a style property for this track before adding keyframes."); return; } else { this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty; - //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } this.insertPropTween(0); this.addPropAnimationRuleToElement(ev); this.updatePropKeyframeRule(); } else if (this.trackType == "position") { - //console.log("Property track editorProperty set to: " + this.trackEditorProperty); + } } else { this.handleNewPropTween(ev); @@ -214,31 +200,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } } }, - - getCurrentSelectedStyleIndex: { - value: function(layerIndex) { - var returnVal = false, - i = 0, - arrLayerStylesLength = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles.length; - for (i = 0; i < arrLayerStylesLength; i++) { - var currItem = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles[i]; - if (currItem.isSelected === true) { - returnVal = i; - } - } - return returnVal; - } - }, handleNewPropTween:{ value:function (ev) { if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { this.insertPropTween(ev.offsetX); } else { - // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element. - // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling. - - // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element var findXOffset = function (obj) { var curleft = 0; if (obj.offsetParent) { @@ -256,6 +223,23 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } } }, + /* ===- End Event Handlers ==== */ + + /* ===- Begin Controllers ==== */ + getCurrentSelectedStyleIndex: { + value: function(layerIndex) { + var returnVal = false, + i = 0, + arrLayerStylesLength = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles.length; + for (i = 0; i < arrLayerStylesLength; i++) { + var currItem = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles[i]; + if (currItem.isSelected === true) { + returnVal = i; + } + } + return returnVal; + } + }, insertPropTween:{ value:function(clickPos){ @@ -310,24 +294,18 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { nextTween, splitTweenIndex; - // Search through the tweens and find the pair whose keyframes bracket position. for (i = 0; i < tweensLength; i++) { prevTween = this.propTweens[i].tweenData.keyFramePosition; nextTween = this.propTweens[i + 1].tweenData.keyFramePosition; if (position > prevTween && position < nextTween) { - // We will insert a new tween at this index splitTweenIndex = i + 1; - // Update the next tween to have new span position and width. this.propTweens[i + 1].tweenData.spanPosition = position; this.propTweens[i + 1].spanPosition = position; this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - position; this.propTweens[i + 1].spanWidth = this.propTweens[i + 1].keyFramePosition - position; - // You'd think that would be enough to make the component associated with that part of the array redraw, wouldn't you? - // Turns out we have to manually poke the desired childComponent in the repetition to register its new changes. - // So we have to get the index of the actual componentin the repetition, which may not match our iteration index. for (j = 0; j < tweensLength + 1; j++) { if (this.propTweenRepetition.childComponents[j].keyFramePosition === nextTween) { nextComponentIndex = j; @@ -335,7 +313,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } this.propTweenRepetition.childComponents[nextComponentIndex].setData(); - // Create the new tween and splice it into the model var newTweenToInsert = {}; newTweenToInsert.tweenData = {}; newTweenToInsert.tweenData.spanWidth = position - prevTween; @@ -347,15 +324,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTweenToInsert.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); this.propTweens.splice(splitTweenIndex, 0, newTweenToInsert); - // We are done, so end the loop. i = tweensLength; } } - - // We've made a change, so set the needsSave flag this.application.ninja.currentDocument.model.needsSave = true; - - // Our tween IDs are now all messed up. Fix them. for (i = 0; i <= tweensLength + 1; i++) { this.propTweens[i].tweenID = i; this.propTweens[i].tweenData.tweenID = i; @@ -382,7 +354,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { var j, styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = []; for (j = 0; j < styleLength; j++) { - // check for vendor prefixes and skip them for now var firstChar = this.currentKeyframeRule[i].style[j].charAt(0); if (firstChar === "-") { @@ -394,7 +365,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } } - // recreate tween properties array for timeline tween newTween.tweenData.tweenedProperties = []; for (var k in keyframeStyles) { newTween.tweenData.tweenedProperties[keyframeStyles[k][0]] = keyframeStyles[k][1]; @@ -434,12 +404,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { updatePropKeyframeRule:{ value:function(){ - // delete the current rule this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); - - // build the new keyframe string var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; - for (var i = 0; i < this.propTweens.length; i++) { var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec); // trackDur should be parseFloat rounded to significant digits @@ -453,7 +419,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { keyframeString += keyframePropertyString; } keyframeString += " }"; - // set the keyframe string as the new rule this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); this.application.ninja.currentDocument.model.needsSave = true; } @@ -465,9 +430,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { if (currentStyleValue == null) { currentStyleValue = "1px"; } - this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; - this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.parentComponent.animationNamesString; var newAnimationNames = ""; @@ -493,4 +456,5 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.insertPropTween(tweenEvent.offsetX); } } + /* ===- End Controllers ==== */ }); -- cgit v1.2.3