From 0ea5607c3760852b1fe63ad568b4db064129955b Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 2 Jul 2012 13:45:28 -0700 Subject: Fix performance bug when moving between nested levels Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 26ce526f..8953888b 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -797,6 +797,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.tweenID = 0; newTween.tweenData.spanPosition = 0; newTween.tweenData.easing = "none"; + newTween.tweenData.initSelect = true; newTween.tweenData.tweenedProperties = []; newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; @@ -813,6 +814,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.tweenID = this.nextKeyframe; newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; newTween.tweenData.easing = "none"; + newTween.tweenData.initSelect = true; newTween.tweenData.tweenedProperties = []; newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; @@ -920,6 +922,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTweenToInsert.tweenData.tweenID = this.tweens.length; newTweenToInsert.tweenData.spanPosition = position - newTweenToInsert.tweenData.spanWidth; newTweenToInsert.tweenData.tweenedProperties = []; + newTweenToInsert.tweenData.easing = "none"; + newTweenToInsert.tweenData.initSelect = true; newTweenToInsert.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; newTweenToInsert.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; newTweenToInsert.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px"; @@ -999,6 +1003,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.keyFrameMillisec = 0; newTween.tweenData.tweenID = 0; newTween.tweenData.spanPosition = 0; + newTween.tweenData.initSelect = false; this.tweens.push(newTween); this.createMatchingPositionSizeTween(newTween); } @@ -1016,6 +1021,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.keyFramePosition = clickPosition; newTween.tweenData.keyFrameMillisec = currentMilliSec; newTween.tweenData.tweenID = this.nextKeyframe; + newTween.tweenData.initSelect = false; newTween.tweenData.spanPosition =clickPosition - newTween.tweenData.spanWidth; newTween.tweenData.easing = this.currentKeyframeRule[i].style.webkitAnimationName; if (newTween.tweenData.easing == "") { -- cgit v1.2.3 From 0d7918cb127f06adab5515edde72dccc137473f5 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 3 Jul 2012 10:01:57 -0700 Subject: Fix re-open 3D tweens correctly Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 8953888b..b1e8af8a 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -981,14 +981,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { for(j=0; j --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 588 ++++++++------------- 1 file changed, 229 insertions(+), 359 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index b1e8af8a..9f2b2eb0 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -11,10 +11,10 @@ var defaultEventManager = require("montage/core/event/event-manager").defaultEve var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { + // ==== Begin Models _trackID:{ value:null }, - trackID:{ serializable:true, get:function () { @@ -31,7 +31,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _tween:{ value:[] }, - tween:{ serializable:true, get:function () { @@ -53,7 +52,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _isVisible:{ value: true }, - isVisible:{ get:function(){ return this._isVisible; @@ -72,6 +70,21 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.trackData.isVisible = value; } }, + + _bindingPoint : { + value : {} + }, + bindingPoint: { + get: function() { + return this._bindingPoint; + }, + set: function(newVal) { + if (newVal !== this._bindingPoint) { + this._bindingPoint = newVal; + this.setData(); + } + } + }, _stageElement: { value: null @@ -86,7 +99,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - // Are the various collapsers collapsed or not _isMainCollapsed:{ value: true }, @@ -99,18 +111,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.trackData.isMainCollapsed = newVal; } }, - _isTransformCollapsed:{ - value:true - }, - isTransformCollapsed:{ - get:function () { - return this._isTransformCollapsed; - }, - set:function (newVal) { - this._isTransformCollapsed = newVal; - this.trackData.isTransformCollapsed = newVal; - } - }, + _isPositionCollapsed:{ value:true }, @@ -123,6 +124,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.trackData.isPositionCollapsed = newVal; } }, + _isStyleCollapsed:{ value:true }, @@ -135,6 +137,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.trackData.isStyleCollapsed = newVal; } }, + _bypassAnimation : { value: false }, @@ -164,6 +167,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.trackData.arrStyleTracks = newVal; } }, + _styleTracksRepetition: { value: null }, @@ -176,8 +180,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._styleTracksRepetition = newVal; } }, - - /* Position Property Tracks */ + _arrPositionTracks : { value: [] }, @@ -192,6 +195,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + _positionTracksRepetition: { value: null }, @@ -204,26 +208,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - - /* Transform Property Tracks */ - _arrTransformTracks : { - value: [] - }, - arrTransformTracks: { - serializable:true, - get: function() { - return this._arrTransformTracks; - }, - set: function(newVal) { - this._arrTransformTracks = newVal; - this.trackData.arrTransformTracks = newVal; - } - }, - _tweens:{ value:[] }, - tweens:{ serializable: true, get:function () { @@ -238,7 +225,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _tweenRepetition:{ value:null }, - tweenRepetition:{ get:function () { return this._tweenRepetition; @@ -251,7 +237,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _trackDuration:{ value:0 }, - trackDuration:{ serializable:true, get:function () { @@ -269,7 +254,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _trackPosition:{ value:0 }, - trackPosition:{ serializable:true, get:function () { @@ -284,7 +268,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _currentKeyframeRule:{ value:null }, - currentKeyframeRule:{ serializable: true, get:function(){ @@ -307,7 +290,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _isTrackAnimated:{ value:null }, - isTrackAnimated:{ serializable: true, get:function(){ @@ -319,7 +301,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - // should be unneeded with one element per layer restriction _animatedElement:{ value:null }, @@ -337,7 +318,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _animationName:{ value:null }, - animationName:{ serializable:true, get:function () { @@ -352,7 +332,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _ruleList:{ value:[] }, - ruleList:{ get:function () { return this._ruleList; @@ -382,6 +361,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._positionCollapser = val; } }, + _mainCollapser:{ value:null }, @@ -394,18 +374,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._mainCollapser = val; } }, - _transformCollapser:{ - value:null - }, - transformCollapser:{ - serializable:true, - get:function () { - return this._transformCollapser; - }, - set:function (val) { - this._transformCollapser = val; - } - }, + _styleCollapser:{ value:null }, @@ -419,10 +388,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - // Drag and Drop properties _dragAndDropHelper : { value: false }, + _dragAndDropHelperCoords: { value: false }, @@ -434,6 +403,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._dragAndDropHelperCoords = newVal; } }, + _draggingIndex: { value: false }, @@ -445,12 +415,15 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._draggingIndex = newVal; } }, + _dragAndDropHelperOffset : { value: false }, + _appendHelper: { value: false }, + _deleteHelper: { value: false }, @@ -458,7 +431,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _trackData:{ value: false }, - trackData:{ serializable: true, get:function(){ @@ -502,52 +474,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.needsDraw = true; } }, + // ==== End Models - createTrackData: { - value: function() { - tempData = {}; - tempData.bypassAnimation = this.bypassAnimation; - tempData.trackID = this.layerID; - tempData.tweens = this.tweens; - tempData.animatedElement = this.animatedElement; - tempData.arrStyleTracks = this.arrStyleTracks; - tempData.arrPositionTracks = this.arrPositionTracks; - tempData.isTrackAnimated = this.isTrackAnimated; - tempData.trackDuration = this.trackDuration; - tempData.animationName = this.animationName; - tempData.currentKeyframeRule = this.currentKeyframeRule; - tempData.isMainCollapsed = this.isMainCollapsed; - tempData.isPositionCollapsed = this.isPositionCollapsed; - tempData.isTransformCollapsed = this.isTransformCollapsed; - tempData.isStyleCollapsed = this.isStyleCollapsed; - tempData.trackPosition = this.trackPosition; - tempData.isVisible = this.isVisible; - this.trackData = tempData; - } - }, - - // Data binding observation point and trigger method - _bindingPoint : { - value : {} - }, - bindingPoint: { - get: function() { - return this._bindingPoint; - }, - set: function(newVal) { - if (newVal !== this._bindingPoint) { - this._bindingPoint = newVal; - this.setData(); - } - } - }, - - triggerOutgoingBinding : { - value: function() { - this.trackData.triggerBinding = !this.trackData.triggerBinding; - } - }, - + // ==== Begin Draw cycle methods prepareForDraw:{ value:function () { this.init(); @@ -555,11 +484,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.element.addEventListener("click", this, false); this.eventManager.addEventListener("tlZoomSlider", this, false); - // Drag and Drop event handlers - //this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); + // Drag and Drop event handlers this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false); this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false); - //this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false); } }, @@ -574,12 +501,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } // Drag and Drop: - // Do we have a helper to append? if (this._appendHelper === true) { this.track_lanes.appendChild(this._dragAndDropHelper); this._appendHelper = false; } - // Do we need to move the helper? if (this._dragAndDropHelperCoords !== false) { if (this._dragAndDropHelper !== null) { if (typeof(this._dragAndDropHelper.style) !== "undefined") { @@ -588,18 +513,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } this._dragAndDropHelperCoords = false; } - // Do we have a helper to delete? if (this._deleteHelper === true) { if (this._dragAndDropHelper === null) { - // Problem....maybe a helper didn't get appended, or maybe it didn't get stored. - // Try and recover the helper so we can delete it. var myHelper = this.element.querySelector(".track-dnd-helper"); if (myHelper != null) { this._dragAndDropHelper = myHelper; } } if (this._dragAndDropHelper !== null) { - // We need to delete the helper. Can we delete it from track_lanes? if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.track_lanes) { this.track_lanes.removeChild(this._dragAndDropHelper); this._dragAndDropHelper = null; @@ -625,7 +546,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } if (this._isFirstDraw === true) { - if (this.isMainCollapsed === false) { this._mainCollapser.myContent.style.height = "auto"; this._mainCollapser.myContent.classList.remove(this._mainCollapser.collapsedClass); @@ -636,11 +556,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._positionCollapser.myContent.classList.remove(this._positionCollapser.collapsedClass); this._positionCollapser.clicker.classList.remove(this._positionCollapser.collapsedClass); } - if (this.isTransformCollapsed === false) { - this._transformCollapser.myContent.style.height = "auto"; - this._transformCollapser.myContent.classList.remove(this._transformCollapser.collapsedClass); - this._transformCollapser.clicker.classList.remove(this._transformCollapser.collapsedClass); - } if (this.isStyleCollapsed === false) { this._styleCollapser.myContent.style.height = "auto"; this._styleCollapser.myContent.classList.remove(this._styleCollapser.collapsedClass); @@ -651,7 +566,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + // ==== End Draw cycle methods + // ==== Begin Event handlers handleTlZoomSlider: { value: function(event) { @@ -663,7 +580,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if (i === 0) { // Exception: 0th item does not depend on anything - // TODO: If 0th tween is draggable, this will need to be fixed. + // If 0th tween is draggable, this will need to be fixed. this.tweens[i].tweenData.spanWidth=0; this.tweens[i].tweenData.spanPosition=0; this.tweens[i].tweenData.keyFramePosition=0; @@ -693,10 +610,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { handleClick:{ value:function (ev) { - // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span - // This needs to move to a keyboard shortcut that is TBD - var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - var targetElementOffset = this.findXOffset(ev.currentTarget), position = (event.pageX - targetElementOffset) - 18; @@ -704,7 +617,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * position; this.application.ninja.timeline.updateTimeText(currentMillisec); - if (ev.shiftKey) { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); this.application.ninja.timeline.selectLayer(selectedIndex, true); @@ -726,8 +638,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, handleKeyboardShortcut:{ - value:function(ev){ - if(ev.actionType == "insert"){ + value:function (ev) { + if (ev.actionType == "insert") { if (this.tweens.length < 1) { this.insertTween(0); this.addAnimationRuleToElement(ev); @@ -736,23 +648,79 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.handleNewTween(ev); this.updateKeyframeRule(); } - } else if(ev.actionType == "remove"){ + } else if (ev.actionType == "remove") { this.removeTween(); this.updateKeyframeRule(); } } }, + // Drag and drop event handlers + handleKeyframeDragstart:{ + value:function (event) { + var dragIcon = document.createElement("img"), + minPosition = 0, + maxPosition = 100000000000; + + event.dataTransfer.effectAllowed = 'move'; + event.dataTransfer.setData('Text', this.identifier); + dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII=" + dragIcon.width = 1; + event.dataTransfer.setDragImage(dragIcon, 0, 0); + + // Clone the element we're dragging + this._dragAndDropHelper = event.target.cloneNode(true); + this._dragAndDropHelper.style.opacity = 0.8; + this._dragAndDropHelper.style.position = "absolute"; + this._dragAndDropHelper.style.top = "5px"; + this._dragAndDropHelper.style.left = "0px"; + this._dragAndDropHelper.style.zIndex = 700; + this._dragAndDropHelper.classList.add("keyframeSelected"); + this._dragAndDropHelper.classList.add("track-dnd-helper"); + + if (this.draggingIndex < (this.tweens.length - 1)) { + maxPosition = this.tweenRepetition.childComponents[this.draggingIndex + 1].keyFramePosition; + } + if (this.draggingIndex > 1) { + minPosition = this.tweenRepetition.childComponents[this.draggingIndex - 1].keyFramePosition; + } + this._keyframeMinPosition = minPosition + 2; + this._keyframeMaxPosition = maxPosition - 9; + this._appendHelper = true; + this._deleteHelper = false; + + var i = 0, + arrLayersLength = this.parentComponent.parentComponent.arrLayers.length, + myId = null; + for (i = 0; i < arrLayersLength; i++) { + var currUuid = this.parentComponent.parentComponent.trackRepetition.childComponents[i].uuid; + if (currUuid === this.uuid) { + myId = i; + } + } + this.parentComponent.parentComponent.draggingTrackId = myId; + this.parentComponent.parentComponent.draggingType = "keyframe"; + } + }, + + handleKeyframeDragend:{ + value:function (event) { + if (this.parentComponent.parentComponent.draggingType !== "keyframe") { + return; + } + this._deleteHelper = true; + this.needsDraw = true; + + } + }, + handleNewTween:{ value:function (ev) { - if (ev.offsetX > this.tweens[this.tweens.length - 1].tweenData.keyFramePosition) { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); this.application.ninja.timeline.selectLayer(selectedIndex, false); this.insertTween(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. if (typeof(ev.currentTarget) === "undefined") { this.splitTweenAt(ev.offsetX); } else { @@ -764,20 +732,113 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - findXOffset:{ - value:function (obj) { - // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element - var curleft = 0; - if (typeof(obj) === "undefined") { - //debugger; + handleLayerEvent:{ + value:function (layerEvent) { + if (layerEvent.layerID !== this.trackID) { + return; } - if (obj.offsetParent) { - do { - curleft += (obj.offsetLeft - obj.scrollLeft); + if (layerEvent.layerEventType === "newStyle") { + var newStyleTrack = {}; + newStyleTrack.propTrackData = {}; + newStyleTrack.propTrackData.styleSelection = layerEvent.styleSelection; + newStyleTrack.propTrackData.propTweens = []; + newStyleTrack.propTrackData.trackType = "style"; + newStyleTrack.propTrackData.trackEditorProperty = ""; + newStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; + newStyleTrack.propTrackData.existingRule = ""; + this.arrStyleTracks.push(newStyleTrack); + } else if (layerEvent.layerEventType === "restoreStyle") { + var restoredStyleTrack = {}; + restoredStyleTrack.propTrackData = {}; + restoredStyleTrack.propTrackData.styleSelection = layerEvent.styleSelection; + restoredStyleTrack.propTrackData.propTweens = []; + restoredStyleTrack.propTrackData.trackType = "style"; + restoredStyleTrack.propTrackData.trackEditorProperty = layerEvent.trackEditorProperty; + restoredStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; + restoredStyleTrack.propTrackData.existingRule = layerEvent.existingRule; + this.arrStyleTracks.push(restoredStyleTrack); + } + else if (layerEvent.layerEventType === "deleteStyle") { + this.arrStyleTracks.splice(layerEvent._event.selectedStyleIndex, 1); + } + } + }, + // ==== End Event handlers - } while (obj = obj.offsetParent); + // ==== Begin Controllers + init:{ + value:function () { + this.createPositionTracks(); + this.element.addEventListener("layerEvent", this, false); + } + }, + + createPositionTracks:{ + value:function(){ + if (this.arrPositionTracks.length > 0) { + return; } - return curleft; + + var newLeftTrack = {}; + newLeftTrack.propTrackData = {}; + newLeftTrack.propTrackData.propTweens = []; + newLeftTrack.propTrackData.styleIndex = 1; + newLeftTrack.propTrackData.trackType = "position"; + newLeftTrack.propTrackData.trackEditorProperty = "left"; + this.arrPositionTracks.push(newLeftTrack); + + var newTopTrack = {}; + newTopTrack.propTrackData = {}; + newTopTrack.propTrackData.propTweens = []; + newTopTrack.propTrackData.styleIndex = 0; + newTopTrack.propTrackData.trackType = "position"; + newTopTrack.propTrackData.trackEditorProperty = "top"; + this.arrPositionTracks.push(newTopTrack); + + var newWidthTrack = {}; + newWidthTrack.propTrackData = {}; + newWidthTrack.propTrackData.propTweens = []; + newWidthTrack.propTrackData.styleIndex = 2; + newWidthTrack.propTrackData.trackType = "position"; + newWidthTrack.propTrackData.trackEditorProperty = "width"; + this.arrPositionTracks.push(newWidthTrack); + + var newHeightTrack = {}; + newHeightTrack.propTrackData = {}; + newHeightTrack.propTrackData.propTweens = []; + newHeightTrack.propTrackData.styleIndex = 3; + newHeightTrack.propTrackData.trackType = "position"; + newHeightTrack.propTrackData.trackEditorProperty = "height"; + this.arrPositionTracks.push(newHeightTrack); + } + }, + + createTrackData:{ + value:function () { + tempData = {}; + tempData.bypassAnimation = this.bypassAnimation; + tempData.trackID = this.layerID; + tempData.tweens = this.tweens; + tempData.animatedElement = this.animatedElement; + tempData.arrStyleTracks = this.arrStyleTracks; + tempData.arrPositionTracks = this.arrPositionTracks; + tempData.isTrackAnimated = this.isTrackAnimated; + tempData.trackDuration = this.trackDuration; + tempData.animationName = this.animationName; + tempData.currentKeyframeRule = this.currentKeyframeRule; + tempData.isMainCollapsed = this.isMainCollapsed; + tempData.isPositionCollapsed = this.isPositionCollapsed; + tempData.isTransformCollapsed = this.isTransformCollapsed; + tempData.isStyleCollapsed = this.isStyleCollapsed; + tempData.trackPosition = this.trackPosition; + tempData.isVisible = this.isVisible; + this.trackData = tempData; + } + }, + + triggerOutgoingBinding:{ + value:function () { + this.trackData.triggerBinding = !this.trackData.triggerBinding; } }, @@ -822,7 +883,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px"; this.tweens.push(newTween); - // update the animation duration var animationDuration = (this.trackDuration / 1000) + "s"; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); this.nextKeyframe += 1; @@ -845,23 +905,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.tweens.pop(); return; } - - // Update the next tween to have new span position and width. this.tweens[tweenIDToRemove + 1].tweenData.spanPosition = oldPosition; this.tweens[tweenIDToRemove + 1].spanPosition = oldPosition; this.tweens[tweenIDToRemove + 1].tweenData.spanWidth = this.tweens[tweenIDToRemove + 1].tweenData.spanWidth + oldSpanWidth; this.tweens[tweenIDToRemove + 1].spanWidth = this.tweens[tweenIDToRemove + 1].spanWidth + oldSpanWidth; - // redraw the tweens for(var i in this.tweenRepetition.childComponents){ this.tweenRepetition.childComponents[i].setData(); } - // remove the selected tween this.tweens.splice(tweenIDToRemove, 1); this.application.ninja.currentDocument.model.needsSave = true; - // update the tween ids for (var j = 0; j < this.tweens.length; j++) { this.tweens[j].tweenID = j; this.tweens[j].tweenData.tweenID = j; @@ -869,16 +924,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - createMatchingPositionSizeTween:{ - value:function (newTween) { - var i; - var posTracks = this.positionTracksRepetition.childComponents.length; - for (i = 0; i < posTracks; i++) { - this.positionTracksRepetition.childComponents[i].propTweens.push(newTween); - } - } - }, - // splitTweenAt: Split a tween at a particular position (x coordinate) splitTweenAt: { value:function (position) { @@ -929,16 +974,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTweenToInsert.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px"; newTweenToInsert.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px"; this.tweens.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.tweens[i].tweenID = i; this.tweens[i].tweenData.tweenID = i; @@ -955,8 +996,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created=true; this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement; if(this.animatedElement!==undefined){ + this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); - // build tweens for this tracks's keyframe rule + if(this.animationName){ // check for multiple animation names var animationNameList = this.animationName.split(","); @@ -979,16 +1021,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var j, styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = []; - for(j=0; j 0) { - return; + createMatchingPositionSizeTween:{ + value:function (newTween) { + var i; + var posTracks = this.positionTracksRepetition.childComponents.length; + for (i = 0; i < posTracks; i++) { + this.positionTracksRepetition.childComponents[i].propTweens.push(newTween); } - - // create 'left' track - var newLeftTrack = {}; - newLeftTrack.propTrackData = {}; - newLeftTrack.propTrackData.propTweens = []; - newLeftTrack.propTrackData.styleIndex = 1; - newLeftTrack.propTrackData.trackType = "position"; - newLeftTrack.propTrackData.trackEditorProperty = "left"; - this.arrPositionTracks.push(newLeftTrack); - - // create 'top' track - var newTopTrack = {}; - newTopTrack.propTrackData = {}; - newTopTrack.propTrackData.propTweens = []; - newTopTrack.propTrackData.styleIndex = 0; - newTopTrack.propTrackData.trackType = "position"; - newTopTrack.propTrackData.trackEditorProperty = "top"; - this.arrPositionTracks.push(newTopTrack); - - // create 'width' track - var newWidthTrack = {}; - newWidthTrack.propTrackData = {}; - newWidthTrack.propTrackData.propTweens = []; - newWidthTrack.propTrackData.styleIndex = 2; - newWidthTrack.propTrackData.trackType = "position"; - newWidthTrack.propTrackData.trackEditorProperty = "width"; - this.arrPositionTracks.push(newWidthTrack); - - // create 'height' track - var newHeightTrack = {}; - newHeightTrack.propTrackData = {}; - newHeightTrack.propTrackData.propTweens = []; - newHeightTrack.propTrackData.styleIndex = 3; - newHeightTrack.propTrackData.trackType = "position"; - newHeightTrack.propTrackData.trackEditorProperty = "height"; - this.arrPositionTracks.push(newHeightTrack); } }, - handleLayerEvent:{ - value:function (layerEvent) { - if (layerEvent.layerID !== this.trackID) { - return; - } - if (layerEvent.layerEventType === "newStyle") { - var newStyleTrack = {}; - newStyleTrack.propTrackData = {}; - newStyleTrack.propTrackData.styleSelection = layerEvent.styleSelection; - newStyleTrack.propTrackData.propTweens = []; - newStyleTrack.propTrackData.trackType = "style"; - newStyleTrack.propTrackData.trackEditorProperty = ""; - newStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; - newStyleTrack.propTrackData.existingRule = ""; - - this.arrStyleTracks.push(newStyleTrack); - - } else if (layerEvent.layerEventType === "restoreStyle") { - var restoredStyleTrack = {}; - restoredStyleTrack.propTrackData = {}; - restoredStyleTrack.propTrackData.styleSelection = layerEvent.styleSelection; - restoredStyleTrack.propTrackData.propTweens = []; - restoredStyleTrack.propTrackData.trackType = "style"; - restoredStyleTrack.propTrackData.trackEditorProperty = layerEvent.trackEditorProperty; - restoredStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; - restoredStyleTrack.propTrackData.existingRule = layerEvent.existingRule; + findXOffset:{ + value:function (obj) { + var curleft = 0; + if (typeof(obj) === "undefined") { - this.arrStyleTracks.push(restoredStyleTrack); } - else if (layerEvent.layerEventType === "deleteStyle") { - // We are deleting a style, so delete the associated track - this.arrStyleTracks.splice(layerEvent._event.selectedStyleIndex, 1); + if (obj.offsetParent) { + do { + curleft += (obj.offsetLeft - obj.scrollLeft); + + } while (obj = obj.offsetParent); } + return curleft; } }, + getTweenIndexById: { value: function(intID) { var i = 0, @@ -1222,98 +1184,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } return returnVal; } - }, - - // Drag and drop event handlers - handleKeyframeDragstart : { - value: function(event) { - var dragIcon = document.createElement("img"), - minPosition = 0, - maxPosition = 100000000000; - - event.dataTransfer.effectAllowed = 'move'; - event.dataTransfer.setData('Text', this.identifier); - dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII=" - dragIcon.width = 1; - event.dataTransfer.setDragImage(dragIcon, 0, 0); - - // Clone the element we're dragging - this._dragAndDropHelper = event.target.cloneNode(true); - this._dragAndDropHelper.style.opacity = 0.8; - this._dragAndDropHelper.style.position = "absolute"; - this._dragAndDropHelper.style.top = "5px"; - this._dragAndDropHelper.style.left = "0px"; - this._dragAndDropHelper.style.zIndex = 700; - this._dragAndDropHelper.classList.add("keyframeSelected"); - - //this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width"); - this._dragAndDropHelper.classList.add("track-dnd-helper"); - - if (this.draggingIndex < (this.tweens.length -1)) { - maxPosition = this.tweenRepetition.childComponents[this.draggingIndex+1].keyFramePosition; - } - if (this.draggingIndex > 1) { - minPosition = this.tweenRepetition.childComponents[this.draggingIndex-1].keyFramePosition; - } - this._keyframeMinPosition = minPosition+2; - this._keyframeMaxPosition = maxPosition-9; - this._appendHelper = true; - this._deleteHelper = false; - - // Get my index in the track array - var i = 0, - arrLayersLength = this.parentComponent.parentComponent.arrLayers.length, - myId = null; - for (i = 0; i < arrLayersLength; i++) { - var currUuid = this.parentComponent.parentComponent.trackRepetition.childComponents[i].uuid; - if ( currUuid === this.uuid) { - myId = i; - } - } - this.parentComponent.parentComponent.draggingTrackId = myId; - this.parentComponent.parentComponent.draggingType = "keyframe"; - } - }, - handleKeyframeDragend : { - value: function(event) { - if (this.parentComponent.parentComponent.draggingType !== "keyframe") { - return; - } - this._deleteHelper = true; - this.needsDraw = true; - - } - }, - - - /* 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 */ + // ==== End Controllers }); -- 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. --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 9f2b2eb0..7c497dd9 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -619,7 +619,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.application.ninja.timeline.updateTimeText(currentMillisec); if (ev.shiftKey) { 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.timeine.updateStageSelection(); if (this.tweens.length < 1) { this.insertTween(0); this.addAnimationRuleToElement(ev); @@ -718,7 +720,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:function (ev) { if (ev.offsetX > this.tweens[this.tweens.length - 1].tweenData.keyFramePosition) { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - this.application.ninja.timeline.selectLayer(selectedIndex, false); + // this.application.ninja.timeline.selectLayer(selectedIndex, false); // deprecated + this.application.ninja.timeline.selectLayers([selectedIndex]); this.insertTween(ev.offsetX); } else { if (typeof(ev.currentTarget) === "undefined") { -- cgit v1.2.3 From 7b32af1ebeec13f4186ba0a88a6d33362178d60f Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 10 Jul 2012 09:55:55 -0700 Subject: Adding Zoom Control to Property Tracks Signed-off-by: Kruti Shah --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index f443553c..c9516d1f 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -645,7 +645,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); // this.application.ninja.timeline.selectLayer(selectedIndex, true); // deprecated this.application.ninja.timeline.selectLayers([selectedIndex]); - this.application.ninja.timeine.updateStageSelection(); + this.application.ninja.timeline.updateStageSelection(); if (this.tweens.length < 1) { this.insertTween(0); this.addAnimationRuleToElement(ev); -- cgit v1.2.3 From 1a797e8e73ac17a9ab19b686d1239afcff0d599e Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 10 Jul 2012 11:12:53 -0700 Subject: Fix missing char and Temp fix missing image Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index f443553c..c9516d1f 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -645,7 +645,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); // this.application.ninja.timeline.selectLayer(selectedIndex, true); // deprecated this.application.ninja.timeline.selectLayers([selectedIndex]); - this.application.ninja.timeine.updateStageSelection(); + this.application.ninja.timeline.updateStageSelection(); if (this.tweens.length < 1) { this.insertTween(0); this.addAnimationRuleToElement(ev); -- cgit v1.2.3 From 15edcb5fe22793aab024c1ef7dde109b36977dd8 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 16 Jul 2012 09:20:10 -0700 Subject: Timeline: Disable drag-and-drop on subproperty keyframes. Better error handling. Fix some minor bugs. --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index c9516d1f..e6d9165a 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -699,7 +699,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._dragAndDropHelper.style.opacity = 0.8; this._dragAndDropHelper.style.position = "absolute"; this._dragAndDropHelper.style.top = "5px"; - this._dragAndDropHelper.style.left = "0px"; + this._dragAndDropHelper.style.left = event.target.style.left; this._dragAndDropHelper.style.zIndex = 700; this._dragAndDropHelper.classList.add("keyframeSelected"); this._dragAndDropHelper.classList.add("track-dnd-helper"); -- cgit v1.2.3 From cdcc677c827b65e3c689d4207c0117f94e4d6d57 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Mon, 16 Jul 2012 16:27:58 -0700 Subject: Styling of Zoom Slider + Grid Cut off limit taken care of + Hot text Bug (left,top,width,height) changing it now changes the element on stage Signed-off-by: Kruti Shah --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index c9516d1f..ea37fe6b 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -627,8 +627,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { myObj.spanPosition = clickPos - (clickPos - prevKeyFramePosition); this.tweens[i].tweenData = myObj; + + } } + this.application.ninja.timeline.zoomTrackContainerWidthChange(); + } }, -- cgit v1.2.3 From 49233086e159137bf6d6b0ee73947475b0d08092 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 17 Jul 2012 17:29:26 -0700 Subject: Multi Doc Zoom Slider Handling Signed-off-by: Kruti Shah --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 44 +--------------------- 1 file changed, 1 insertion(+), 43 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 2581df0f..5fff33d9 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -506,7 +506,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.init(); this.ninjaStylesContoller = this.application.ninja.stylesController; this.element.addEventListener("click", this, false); - this.eventManager.addEventListener("tlZoomSlider", this, false); + // Drag and Drop event handlers this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false); @@ -593,48 +593,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // ==== End Draw cycle methods // ==== Begin Event handlers - handleTlZoomSlider: { - value: function(event) { - - var currentMilliSecPerPixel , currentMilliSec , clickPos,thingToPush; - var i = 0, - tweensLength = this.tweens.length; - - for (i = 0; i < tweensLength; i++) { - - if (i === 0) { - // Exception: 0th item does not depend on anything - // If 0th tween is draggable, this will need to be fixed. - this.tweens[i].tweenData.spanWidth=0; - this.tweens[i].tweenData.spanPosition=0; - this.tweens[i].tweenData.keyFramePosition=0; - this.tweens[i].tweenData.keyFrameMillisec=0; - - } else { - var prevKeyFramePosition = this.tweens[i - 1].tweenData.keyFramePosition, - myObj = {}, - thing = {}; - - currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - currentMilliSec = this.tweens[i].tweenData.keyFrameMillisec; - clickPos = currentMilliSec / currentMilliSecPerPixel; - - for (thing in this.tweens[i].tweenData) { - myObj[thing] = this.tweens[i].tweenData[thing]; - } - myObj.spanWidth = clickPos - prevKeyFramePosition; - myObj.keyFramePosition = clickPos; - myObj.spanPosition = clickPos - (clickPos - prevKeyFramePosition); - - this.tweens[i].tweenData = myObj; - - - } - } - this.application.ninja.timeline.zoomTrackContainerWidthChange(); - - } - }, handleClick:{ value:function (ev) { -- cgit v1.2.3 From c5d8780c797315d4bb40982770cf792a274f8932 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 18 Jul 2012 11:35:44 -0700 Subject: fixing the copyrights on the timeline branch pull request. Signed-off-by: Valerio Virgillito --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 23 +++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 5fff33d9..f3ab0d84 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -1,24 +1,25 @@ /* -Copyright (c) 2012, Motorola Mobility, Inc +Copyright (c) 2012, Motorola Mobility LLC. All Rights Reserved. -BSD License. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: - - Redistributions of source code must retain the above copyright notice, - this list of conditions and the following disclaimer. - - Redistributions in binary form must reproduce the above copyright - notice, this list of conditions and the following disclaimer in the - documentation and/or other materials provided with the distribution. - - Neither the name of Motorola Mobility nor the names of its contributors - may be used to endorse or promote products derived from this software - without specific prior written permission. +* Redistributions of source code must retain the above copyright notice, + this list of conditions and the following disclaimer. + +* Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +* Neither the name of Motorola Mobility LLC nor the names of its + contributors may be used to endorse or promote products derived from this + software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE -ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE +ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS -- cgit v1.2.3 From 6431037185722a63064c2f2fb31fe0e325c9653a Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 19 Jul 2012 10:19:41 -0700 Subject: FIx 3D animation workflow Can now add 3D to any keyframe and all the tween will initialize their 3D identity matrices Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 26 ++++++++++++++++++++++ 1 file changed, 26 insertions(+) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index f3ab0d84..56e5d2f1 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -354,6 +354,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + _enabled3D:{ + value:false + }, + enabled3D:{ + serializable:true, + get:function () { + return this._enabled3D; + }, + set:function (val) { + this._enabled3D = val; + this.trackData.enabled3D = val; + } + }, + _ruleList:{ value:[] }, @@ -495,6 +509,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.trackPosition = this.trackData.trackPosition; this.isVisible = this.trackData.isVisible; this.stageElement = this.trackData.stageElement; + this.enabled3D = this.trackData.enabled3D; this.trackEditorProperty = "master"; this.needsDraw = true; } @@ -1087,6 +1102,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + initial3DforAllTweens:{ + value:function(){ + var j; + var tweensLength = this.tweens.length; + for (j = 0; j < tweensLength; j++) { + this.tweens[j].tweenData.tweenedProperties["-webkit-transform"] = "perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"; + } + this.enabled3D = true; + } + }, + addAnimationRuleToElement:{ value:function (tweenEvent) { this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; -- cgit v1.2.3