diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index c82a9086..bb2acee0 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -1,6 +1,5 @@ var Montage = require("montage/core/core").Montage; var Component = require("montage/ui/component").Component; -var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; var Keyframe = exports.Keyframe = Montage.create(Component, { @@ -19,136 +18,38 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { }, set:function(value){ this._position = value; + this.needsDraw = true; } }, - _id:{ - value:0 - }, - - id:{ - serializable:true, - get:function () { - return this._id; - }, - set:function (value) { - this._id = value; - } - }, - - _timelinePosition:{ - value:0 - }, - - timelinePosition:{ - serializable:true, - get:function () { - return this._timelinePosition; - }, - set:function (value) { - this._timelinePosition = value; - } - }, - - _containingTrack:{ - value:{} - }, - - containingTrack:{ - serializable:true, - get:function () { - return this._containingTrack; - }, - set:function (value) { - this._containingTrack = value; - } - }, - - _animatedProperties:{ - value:[] - }, - - animatedProperties:{ - serializable:true, - get:function () { - return this._animatedProperties; - }, - set:function (value) { - this._animatedProperties = value; - } - }, - - containingSpan:{ - value: null - }, - prepareForDraw:{ value:function(){ - this.tweenkeyframe.addEventListener("click", this, false); - this.animatedProperties = new Array(); - this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop; - this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft; + this.element.addEventListener("click", this, false); } }, draw:{ value:function(){ - this.tweenkeyframe.style.left = (this.position - 3) + "px"; - } - }, - - handleElementChange:{ - value:function (event) { - if(this.application.ninja.selectedElements[0]._element != this.containingTrack.animatedElement){ - alert("Wrong element selected for this keyframe track"); - return; - } - - if(event.detail.source && event.detail.source !== "keyframe") { - this.containingSpan.highlightSpan(); - if(this.containingTrack.animatedElement.offsetTop != this.animatedProperties["top"] && this.containingTrack.animatedElement.offsetLeft != this.animatedProperties["left"]){ - this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop; - this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft; - this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; - this.containingTrack.updateKeyframeRule(); - } - } + this.element.style.left = (this.position - 3) + "px"; } }, - deselect:{ + deselectKeyframe:{ value:function(){ - this.tweenkeyframe.classList.remove("keyframeSelected"); - this.eventManager.removeEventListener("elementChange", this, false); + this.element.classList.remove("keyframeSelected"); } }, - select:{ + selectKeyframe:{ value:function(){ - this.application.ninja.timeline.deselectKeyframes(); - this.tweenkeyframe.classList.add("keyframeSelected"); - this.application.ninja.timeline.playhead.style.left = (this.timelinePosition - 2) + "px"; - this.application.ninja.timeline.playheadmarker.style.left = this.timelinePosition + "px"; - this.application.ninja.timeline.selectedKeyframes.push(this); - - var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - var currentMillisec = currentMillisecPerPixel * this.timelinePosition; - this.application.ninja.timeline.updateTimeText(currentMillisec); - - var currentTop = this.animatedProperties["top"] + "px"; - var currentLeft = this.animatedProperties["left"] + "px"; - - ElementsMediator.setProperty([this.containingTrack.animatedElement], "top", [currentTop], "Change", "keyframe"); - ElementsMediator.setProperty([this.containingTrack.animatedElement], "left", [currentLeft], "Change", "keyframe"); - - // turn on element change event listener - this.eventManager.addEventListener("elementChange", this, false); + this.element.classList.add("keyframeSelected"); + this.parentComponent.selectTween(); } }, handleClick:{ value:function(ev){ - this.select(); + this.selectKeyframe(); } } }); diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index dd819b2b..e262afe2 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -153,7 +153,7 @@

Style -

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 71a1f01f..2e9a8f1a 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -80,7 +80,6 @@ var Layer = exports.Layer = Montage.create(Component, { this._layerName = newVal; this._layerEditable.needsDraw = true; this.needsDraw = true; - } } @@ -323,6 +322,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.styleCollapser.myContent = this.contentStyle; this.styleCollapser.element = this.element; this.styleCollapser.isCollapsed = this.isStyleCollapsed; + this.styleCollapser.contentHeight = 20; this.styleCollapser.isAnimated = true; this.styleCollapser.labelClickEvent = function(boolBypass) { var newEvent = document.createEvent("CustomEvent"); @@ -483,8 +483,11 @@ var Layer = exports.Layer = Montage.create(Component, { // Delete the style from the view this.arrLayerStyles.splice(selectedIndex, 1); - } else { - alert('TODO: what should happen when no rule is selected and the user clicks the delete button?') + // Was that the last style? + if (this.arrLayerStyles.length === 0) { + this.buttonDeleteStyle.classList.add("disabled"); + } + } } } @@ -509,8 +512,12 @@ var Layer = exports.Layer = Montage.create(Component, { // Next, update this.styleRepetition.selectedIndexes. if (styleIndex !== false) { this.styleRepetition.selectedIndexes = [styleIndex]; + this.buttonDeleteStyle.classList.remove("disabled"); } else { this.styleRepetition.selectedIndexes = null; + if (typeof(this.buttonDeleteStyle) !== "undefined") { + this.buttonDeleteStyle.classList.add("disabled"); + } } } @@ -537,14 +544,11 @@ var Layer = exports.Layer = Montage.create(Component, { /* Begin: Event handlers */ handleAddStyleClick: { value: function(event) { - // Stop the event propagation - //event.stopPropagation(); this.addStyle(); } }, handleDeleteStyleClick: { value: function(event) { - //event.stopPropagation(); this.deleteStyle(); } }, @@ -566,25 +570,16 @@ var Layer = exports.Layer = Montage.create(Component, { handleMousedown: { value: function(event) { this.isActive = true; - // Check ALL THE CLICKS - // Are they in a particular style? If so, we need to select that style and - // deselect the others. var ptrParent = nj.queryParentSelector(event.target, ".content-style"); if (ptrParent !== false) { - // Why yes, the click was within a layer. But which one? - var myIndex = this.getActiveStyleIndex(); - this.selectStyle(myIndex); + this.selectStyle(this.getActiveStyleIndex()); } } }, handleLayerClick : { value: function(event) { - // Check ALL THE CLICKS - // Are they in a particular style? If so, we need to select that style and - // deselect the others. var ptrParent = nj.queryParentSelector(event.target, ".content-style"); if (ptrParent !== false) { - // Why yes, the click was within a layer. But which one? var myIndex = this.getActiveStyleIndex(); this.selectStyle(myIndex); } diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css index 39869c92..3547a15e 100644 --- a/js/panels/Timeline/Layer.reel/css/Layer.css +++ b/js/panels/Timeline/Layer.reel/css/Layer.css @@ -2,63 +2,6 @@ /* Layer.scss * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css. */ -/* - This file contains proprietary software owned by Motorola Mobility, Inc.
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
- (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ -/* - * _colors.scss - * Defines the colors for the UI of the application. - * To create a new theme, copy this file and change the values as desired. - * Note: Some colors are defined as both rgb and rgba; some of the rgba versions have multiple a values. - */ -/* Colors for radio buttons and other form elements */ -/* Base colors for dividers - * - * Dividers consist of a div with a background color and either - * a top & bottom border (in the case of horizontal dividers) - * or a left & right border (in the case of vertical dividers), - * for a total of three different colors. - * - */ -/* top and left */ -/* Middle */ -/* Bottom and right */ -/* Main background color of entire app */ -/* Main app background color. */ -/* rgba version */ -/* Main app border color */ -/* color of drop shadows */ -/* Stage color */ -/* body border color */ -/* Body background color */ -/* Colors for main dropdown menus: background & text for both regular and highlighted states, dividers */ -/* Colors for tools: background, text, how they interact with the UI */ -/* Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. */ -/* used for editable items in their non-edit state, etc. */ -/* Border for panel and for block elements */ -/* Shadow for text and block elements */ -/* Colors for scroll bars */ -/* - This file contains proprietary software owned by Motorola Mobility, Inc.
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
- (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ -/* - * themes/themename/mixins.scss - * Mixins that are theme-dependent (e.g. sprite mixins, etc) - */ -/* - This file contains proprietary software owned by Motorola Mobility, Inc.
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
- (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ -/* - * mixins.scss - * Generic mixins. Theme-specific mixins (e.g. for sprites) - * should go in the theme/themename/mixins.scss file. - */ /* line 16, ../scss/Layer.scss */ .layerLabel { width: 100%; @@ -174,23 +117,24 @@ border-width: 0px; } -/* line 112, ../scss/Layer.scss */ +/* line 113, ../scss/Layer.scss */ .label-layer, .label-position, .label-transform, -.label-style { +.label-style, +.label-styles { position: relative; border-bottom: 1px solid #505050; cursor: pointer; } -/* line 119, ../scss/Layer.scss */ +/* line 120, ../scss/Layer.scss */ .content-layer .collapsible-label, .content-layer .collapsible-content { font-size: 11px; } -/* line 123, ../scss/Layer.scss */ +/* line 124, ../scss/Layer.scss */ .collapsible-clicker { position: absolute; width: 10px; @@ -203,23 +147,23 @@ background-repeat: no-repeat; } -/* line 134, ../scss/Layer.scss */ +/* line 135, ../scss/Layer.scss */ .collapsible-clicker.collapsible-collapsed { background-image: url(../images/icon-collapsed.png); } -/* line 137, ../scss/Layer.scss */ +/* line 138, ../scss/Layer.scss */ .collapsible-content .collapsible-clicker { left: 12px; } -/* line 140, ../scss/Layer.scss */ +/* line 141, ../scss/Layer.scss */ .content-layer.collapsible-collapsed { height: 0px; overflow: hidden; } -/* line 146, ../scss/Layer.scss */ +/* line 147, ../scss/Layer.scss */ .label-layer .cssbutton, .label-style .cssbutton { width: 14px; @@ -229,21 +173,21 @@ background-repeat: no-repeat; } -/* line 153, ../scss/Layer.scss */ +/* line 154, ../scss/Layer.scss */ .label-layer .button-lock { background-image: url(../images/icon-lock.png); top: 3px; right: 27px; } -/* line 158, ../scss/Layer.scss */ +/* line 159, ../scss/Layer.scss */ .label-layer .button-visible { background-image: url(../images/icon-eye.png); top: 3px; right: 7px; } -/* line 163, ../scss/Layer.scss */ +/* line 164, ../scss/Layer.scss */ .label-style .button-add { background-image: url(../images/icon-plus.png); width: 15px; @@ -252,7 +196,7 @@ right: 11px; } -/* line 170, ../scss/Layer.scss */ +/* line 171, ../scss/Layer.scss */ .label-style .button-delete { background-image: url(../images/icon-minus.png); width: 15px; @@ -261,17 +205,17 @@ right: 31px; } -/* line 177, ../scss/Layer.scss */ +/* line 178, ../scss/Layer.scss */ .collapsible-content .layout-table { width: 99.9%; } -/* line 180, ../scss/Layer.scss */ +/* line 181, ../scss/Layer.scss */ .content-layer .collapsible-content { padding-left: 30px; } -/* line 183, ../scss/Layer.scss */ +/* line 184, ../scss/Layer.scss */ .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { width: 40%; height: 20px; @@ -280,19 +224,19 @@ text-align: left; } -/* line 190, ../scss/Layer.scss */ +/* line 191, ../scss/Layer.scss */ .collapsible-content .layout-table:first-child { border-top: 1px solid #505050; } -/* line 193, ../scss/Layer.scss */ +/* line 194, ../scss/Layer.scss */ .collapsible-transition { -webkit-transition-property: height; -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease-in; } -/* line 199, ../scss/Layer.scss */ +/* line 200, ../scss/Layer.scss */ .editable2 { height: 20px; background-color: #242424 !important; @@ -304,19 +248,32 @@ text-overflow: clip; } +<<<<<<< .mine=======/* line 210, ../scss/Layer.scss */ +.label-style .disabled { + cursor: default; +} + +/* styles elements */ +>>>>>>> .theirs/* line 215, ../scss/Layer.scss */ +.label-style .disabled { + cursor: default; +} + /* styles elements */ -/* line 211, ../scss/Layer.scss */ +/* line 216, ../scss/Layer.scss */ .content-style .item-template { display: none; } -/* line 214, ../scss/Layer.scss */ -.content-style .layout-row.selected .layout-cell { +<<<<<<< .mine/* line 219, ../scss/Layer.scss */ +=======/* line 218, ../scss/Layer.scss */ +>>>>>>> .theirs.content-style .layout-row.selected .layout-cell { background-color: #b2b2b2; color: #242424; } -/* line 218, ../scss/Layer.scss */ -.style-row { +<<<<<<< .mine/* line 223, ../scss/Layer.scss */ +=======/* line 222, ../scss/Layer.scss */ +>>>>>>> .theirs.style-row { height: 20px; } diff --git a/js/panels/Timeline/Layer.reel/scss/Layer.scss b/js/panels/Timeline/Layer.reel/scss/Layer.scss index 7473a275..c66a6267 100644 --- a/js/panels/Timeline/Layer.reel/scss/Layer.scss +++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss @@ -5,13 +5,13 @@ */ // Import theme settings -@import "../../../../../_scss/imports/themes/default/colors"; -// @import "../../../../../_scss/imports/themes/default/fonts"; -@import "../../../../../_scss/imports/themes/default/mixins"; +@import "../../../../../scss/imports/themes/default/colors"; +// @import "../../../../../scss/imports/themes/default/fonts"; +@import "../../../../../scss/imports/themes/default/mixins"; // Import generic mixins and styles -@import "../../../../../_scss/imports/scss/mixins"; -// @import "../../../../../_scss/imports/scss/Base"; +@import "../../../../../scss/imports/scss/mixins"; +// @import "../../../../../scss/imports/scss/Base"; .layerLabel{ width: 100%; @@ -109,7 +109,8 @@ .label-layer, .label-position, .label-transform, -.label-style { +.label-style, +.label-styles { position: relative; border-bottom: 1px solid #505050; cursor: pointer; @@ -207,6 +208,10 @@ text-overflow: clip; } +.label-style .disabled { + cursor: default; +} + /* styles elements */ .content-style .item-template { display: none; diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html index e36a25d6..24b2bd10 100644 --- a/js/panels/Timeline/Span.reel/Span.html +++ b/js/panels/Timeline/Span.reel/Span.html @@ -9,8 +9,7 @@ "module": "js/panels/Timeline/Span.reel", "name": "Span", "properties": { - "element": {"#": "spanspace"}, - "tweenspan": {"#": "tweenspan"} + "element": {"#": "spanspace"} } } @@ -19,8 +18,7 @@ -

diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index f7bd4ff0..8114e74a 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -18,24 +18,19 @@ var Span = exports.Span = Montage.create(Component, { }, set:function (value) { this._spanWidth = value; - } - }, - - prepareForDraw:{ - value:function(){ - + this.needsDraw = true; } }, draw:{ value: function(){ - this.tweenspan.style.width = this.spanWidth + "px"; + this.element.style.width = this.spanWidth + "px"; } }, highlightSpan:{ value: function(){ - this.tweenspan.classList.add("spanHighlight"); + this.element.classList.add("spanHighlight"); } } }); diff --git a/js/panels/Timeline/Style.reel/scss/Style.scss b/js/panels/Timeline/Style.reel/scss/Style.scss index f15f553d..827a0c43 100644 --- a/js/panels/Timeline/Style.reel/scss/Style.scss +++ b/js/panels/Timeline/Style.reel/scss/Style.scss @@ -3,11 +3,11 @@ */ // Import theme settings -@import "../../../../../_scss/imports/themes/default/colors"; -@import "../../../../../_scss/imports/themes/default/mixins"; +@import "../../../../../scss/imports/themes/default/colors"; +@import "../../../../../scss/imports/themes/default/mixins"; // Import generic mixins and styles -@import "../../../../../_scss/imports/scss/mixins"; +@import "../../../../../scss/imports/scss/mixins"; .hidden { display: none; diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html old mode 100755 new mode 100644 index 29bf6eb3..2a84c21a --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -24,7 +24,8 @@ "trackRepetition" : {"@" : "repetition2"}, "playhead": {"#": "playhead"}, "playheadmarker": {"#": "playhead_marker"}, - "timetext" : {"#": "time_text"} + "timetext" : {"#": "time_text"}, + "timebar" : {"#": "time_bar"} } }, @@ -143,6 +144,36 @@ "boundObjectPropertyPath" : "objectAtCurrentIteration.tweens", "oneway" : false }, + "animatedElement" : { + "boundObject" : {"@" : "repetition2"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.animatedElement", + "oneway" : false + }, + "arrStyleTracks" : { + "boundObject" : {"@" : "repetition2"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.arrStyleTracks", + "oneway" : false + }, + "isTrackAnimated" : { + "boundObject" : {"@" : "repetition2"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isTrackAnimated", + "oneway" : false + }, + "trackDuration" : { + "boundObject" : {"@" : "repetition2"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.trackDuration", + "oneway" : false + }, + "animationName" : { + "boundObject" : {"@" : "repetition2"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.animationName", + "oneway" : false + }, + "currentKeyframeRule" : { + "boundObject" : {"@" : "repetition2"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.currentKeyframeRule", + "oneway" : false + }, "isMainCollapsed" : { "boundObject" : {"@" : "repetition2"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.isMainCollapsed", @@ -162,7 +193,12 @@ "boundObject" : {"@" : "repetition2"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", "oneway" : false - } + }, + "trackPosition" : { + "boundObject" : {"@" : "repetition2"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.trackPosition", + "oneway" : false + } } } } @@ -193,7 +229,9 @@

Master Layer

@@ -202,6 +240,7 @@

@@ -220,7 +259,9 @@

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js old mode 100755 new mode 100644 index 07fee19d..43e758f4 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -65,6 +65,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:1000 }, + _masterDuration:{ + serializable: true, + value:0 + }, + + masterDuration:{ + serializable:true, + get:function(){ + return this._masterDuration; + }, + set:function(val){ + this._masterDuration = val; + this.timebar.style.width = (this._masterDuration / 12) + "px"; + } + }, + _arrTracks:{ serializable:true, value:[] @@ -109,6 +125,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + _selectedTweens:{ + value:[] + }, + + selectedTweens:{ + serializable:true, + get:function () { + return this._selectedTweens; + }, + set:function (newVal) { + this._selectedTweens = newVal; + } + }, + _isLayer:{ value:false }, @@ -234,13 +264,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - deselectKeyframes:{ + deselectTweens:{ value:function () { - for (var i = 0; i < this.selectedKeyframes.length; i++) { - this.selectedKeyframes[i].deselect(); + for (var i = 0; i < this.selectedTweens.length; i++) { + this.selectedTweens[i].deselectTween(); } - this.selectedKeyframes = null; - this.selectedKeyframes = new Array(); + this.selectedTweens = null; + this.selectedTweens = new Array(); } }, @@ -253,6 +283,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleDeleteLayerClick:{ value:function (event) { + if (this.arrLayers.length === 1) { + // do not delete last layer + return; + } + if (this.layerRepetition.selectedIndexes === null) { + // nothing is selected, do not delete + return; + } this._deleteKeyDown = false; if (this.application.ninja.currentSelectedContainer.id === "UserContent") { this._hashKey = "123"; @@ -269,10 +307,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if (this._firstTimeLoaded) { this._firstTimeLoaded = false; } else { - while (this.arrLayers.pop()) { - } - while (this.arrTracks.pop()) { - } + this.arrLayers.length = 0; + this.arrTracks.length = 0; + if (event.detail.element.id === "UserContent") { this._hashKey = "123"; } else { @@ -308,8 +345,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { while (layerResult = this.returnedObject[hashIndex]) { trackResult = this.returnedTrack[hashIndex]; if (layerResult.deleted !== true) { - this.arrLayers.push(layerResult); this.arrTracks.push(trackResult); + this.arrLayers.push(layerResult); + } hashIndex++; } @@ -322,8 +360,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { while (dLayer[hashVariable]) { if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { dLayer[hashVariable].deleted = false; - this.arrLayers.splice(event.detail._layerPosition, 1, event.detail._el); - this.arrTracks.splice(event.detail._layerPosition, 1, event.detail._track); + this.arrTracks.splice(event.detail._layerPosition, 0, event.detail._track); + this.arrLayers.splice(event.detail._layerPosition, 0, event.detail._el); + break; } @@ -349,8 +388,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { while (dLayer[hashVariable]) { if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { dLayer[hashVariable].deleted = false; - this.arrLayers.splice(event.detail._layerPosition, 1, event.detail._el); - this.arrTracks.splice(event.detail._layerPosition, 1, event.detail._track); + this.arrTracks.splice(event.detail._layerPosition, 0, event.detail._track); + this.arrLayers.splice(event.detail._layerPosition, 0, event.detail._el); break; } @@ -387,12 +426,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.parentElement = this.application.ninja.currentSelectedContainer; } - newTrack.trackID = this.currentLayerNumber; newTrack.isMainCollapsed = true; newTrack.isPositionCollapsed = true; newTrack.isTransformCollapsed = true; - newTrack.isStyleCollapsed = false; + newTrack.isStyleCollapsed = true; + newTrack.isTrackAnimated = false; + newTrack.currentKeyframeRule = null; + newTrack.trackPosition = 0; + newTrack.arrStyleTracks = []; newTrack.tweens = []; if (_firstLayerDraw) { @@ -407,16 +449,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.layerPosition = myIndex; thingToPush.isSelected = true; newTrack.trackPosition = myIndex; - this.arrLayers.splice(myIndex, 0, thingToPush); this.arrTracks.splice(myIndex, 0, newTrack); + this.arrLayers.splice(myIndex, 0, thingToPush); this._LayerUndoPosition = myIndex; this.selectLayer(myIndex); this.hashLayerNumber.setItem(this._hashKey, thingToPush); this.hashInstance.setItem(this._hashKey, thingToPush, myIndex); this.hashTrackInstance.setItem(this._hashKey, newTrack, myIndex); } else { - this.arrLayers.splice(0, 0, thingToPush); this.arrTracks.splice(0, 0, newTrack); + this.arrLayers.splice(0, 0, thingToPush); thingToPush.layerPosition = this.arrLayers.length - 1; newTrack.trackPosition = this.arrTracks.length - 1; this._LayerUndoPosition = this.arrLayers.length - 1; @@ -429,13 +471,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._LayerUndoIndex = thingToPush.layerID; this._LayerUndoStatus = true; this._TrackUndoObject = newTrack; - - // Removing clearing the selection - Handled by the selection-controller - /* if(_firstLayerDraw){ - this.application.ninja.selectionController.executeSelectElement(); + this.application.ninja.selectionController.executeSelectElement(); } - */ } } @@ -461,7 +499,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { while (this.arrLayers.length) { if (dLayer[hashVariable]._layerID === this.arrLayers[k]._layerID) { dLayer[hashVariable].deleted = true; - ElementMediator.deleteElements(dLayer[myIndex].element); +// ElementMediator.deleteElements(dLayer[myIndex].element); this.arrLayers.splice(k, 1); this.arrTracks.splice(k, 1); break; @@ -477,7 +515,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { while (dLayer[hashVariable]) { if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { dLayer[hashVariable].deleted = true; - ElementMediator.deleteElements(dLayer[myIndex].element); +// ElementMediator.deleteElements(dLayer[myIndex].element); parentNode = dLayer[hashVariable].parentElement; break; } @@ -495,7 +533,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { while (this.arrLayers.length) { if (dLayer[hashVariable]._layerID === this.arrLayers[k]._layerID) { dLayer[hashVariable].deleted = true; - ElementMediator.deleteElements(dLayer[myIndex].element); +// ElementMediator.deleteElements(dLayer[myIndex].element); this.arrLayers.splice(k, 1); this.arrTracks.splice(k, 1); break; @@ -516,12 +554,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { dLayer = this.hashInstance.getItem(this._hashKey); dTrack = this.hashTrackInstance.getItem(this._hashKey); dLayer[myIndex].deleted = true; - ElementMediator.deleteElements(dLayer[myIndex].element); this.arrLayers.splice(myIndex, 1); this.arrTracks.splice(myIndex, 1); this._LayerUndoIndex = this._LayerUndoObject.layerID; this._LayerUndoPosition = myIndex; + ElementMediator.deleteElements(dLayer[myIndex].element); + } else { dLayer = this.hashInstance.getItem(this._hashKey); dTrack = this.hashTrackInstance.getItem(this._hashKey); @@ -744,6 +783,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { var i = 0, arrLayersLength = this.arrLayers.length; + if(this.selectedKeyframes){ + this.deselectTweens(); + } + for (i = 0; i < arrLayersLength; i++) { if (i === layerIndex) { this.arrLayers[i].isSelected = true; @@ -757,12 +800,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.trackRepetition.selectedIndexes = [layerIndex]; this.currentLayerSelected = this.arrLayers[layerIndex]; this.currentTrackSelected = this.arrTracks[layerIndex]; - // Selection is being handled by the selection controller - /* if(this._captureSelection){ - this.application.ninja.selectionController.selectElements(this.currentLayerSelected.element) + this.application.ninja.selectionController.selectElements(this.currentLayerSelected.element) } - */ this._captureSelection = true; } else { this.layerRepetition.selectedIndexes = null; diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index cbae49c8..b8784d4d 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -236,7 +236,7 @@ position: absolute; top: 6px; left: -3px; - z-index: 912; + z-index: 92; background-color: #b50003; opacity: 0.5; } @@ -244,8 +244,23 @@ height: 100%; width: 1px; background-color: #cccccc; - top: 0px; - left: 0px; + top: 0; + left: 0; position: absolute; - z-index: 913; + z-index: 91; +} +.timebar{ + height: 3px; + width:1px; + background-color: #ff0003; + opacity: 0.3; + top:10px; + position: absolute; + border-top: #c7a19f thin solid; + border-right: #ffffff thin solid; + +} +.endhottext{ + float: right; + padding-right: 8px; } \ No newline at end of file diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index b0d191c2..4808e4d8 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -11,7 +11,8 @@ "properties": { "element": {"#": "track"}, "tweenRepetition" : {"@" : "tweenRepetition"}, - "track_lane": {"#": "track_lanes"} + "styleTracksRepetition" : {"@" : "styleTracksRepetition"}, + "tween": {"@" : "tween"} } }, @@ -37,19 +38,24 @@ "boundObjectPropertyPath" : "objectAtCurrentIteration.spanPosition", "oneway" : false }, - "timelineTrack" : { + "keyFrameMillisec" : { "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.timelineTrack", + "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFrameMillisec", "oneway" : false }, - "keyFrameMillisec" : { + "tweenID" : { "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFrameMillisec", + "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenID", "oneway" : false }, - "keyframeID" : { + "tweenedProperties" : { "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.keyframeID", + "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenedProperties", + "oneway" : false + }, + "isTweenAnimated" : { + "boundObject" : {"@": "tweenRepetition"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isTweenAnimated", "oneway" : false } } @@ -69,7 +75,25 @@ "oneway": false } } + }, + + "styleTrackRepetition": { + "module": "montage/ui/repetition.reel", + "name": "Repetition", + "properties": { + "element": {"#": "content-styles"}, + "isSelectionEnabled" : false + }, + "bindings": { + "objects": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "arrStyleTracks", + "oneway": false + } + } } + + } @@ -102,8 +126,8 @@

- +

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 62688825..1c33a040 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -10,10 +10,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, _trackID:{ - value:null, - writable:true, serializable:true, - enumerable:true + value:null }, trackID:{ @@ -85,21 +83,50 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } } }, - - _tweens:{ + + _arrStyleTracks : { serializable:true, enumerable:true, + value: [] + }, + arrStyleTracks: { + serializable:true, + enumerable:true, + get: function() { + return this._arrStyleTracks; + }, + set: function(newVal) { + this._arrStyleTracks = newVal; + this.needsDraw = true; + } + }, + _styleTracksRepetition: { + serializable: true, + value: null + }, + styleTracksRepetition : { + serializable: true, + get: function() { + return this._styleTracksRepetition; + }, + set: function(newVal) { + this._styleTracksRepetition = newVal; + this.needsDraw = true; + } + }, + + _tweens:{ + enumerable: false, value:[] }, tweens:{ serializable:true, - enumerable:true, get:function () { - return this._spans; + return this._tweens; }, set:function (newVal) { - this._spans = newVal; + this._tweens = newVal; } }, @@ -118,14 +145,51 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + _trackDuration:{ + serializable: true, + value:0 + }, + trackDuration:{ + serializable:true, + get:function () { + return this._trackDuration; + }, + set:function (val) { + this._trackDuration = val; + } + }, + + _trackPosition:{ + serializable:true, value:0 }, - currentKeyframeRule:{ + trackPosition:{ + serializable:true, + get:function () { + return this._trackPosition; + }, + set:function (val) { + this._trackPosition = val; + } + }, + + _currentKeyframeRule:{ + serializable: true, value:null }, + currentKeyframeRule:{ + serializable: true, + get:function(){ + return this._currentKeyframeRule; + }, + set:function(val){ + this._currentKeyframeRule = val; + } + }, + nextKeyframe:{ value:1 }, @@ -134,14 +198,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:0 }, - isAnimated:{ - value:false + _isTrackAnimated:{ + serializable: true, + value:null + }, + + isTrackAnimated:{ + serializable: true, + get:function(){ + return this._isTrackAnimated; + }, + set:function(val){ + this._isTrackAnimated = val; + } }, _animatedElement:{ serializable:true, - enumerable:true, - writable:true, value:null }, @@ -155,12 +228,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - animationName:{ + _animationName:{ + serializable:true, value:null }, - keyFramePropertyData:{ - value:[] + animationName:{ + serializable:true, + get:function () { + return this._animationName; + }, + set:function (val) { + this._animationName = val; + } }, ninjaStylesContoller:{ @@ -184,8 +264,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:function () { this.init(); this.ninjaStylesContoller = this.application.ninja.stylesController; - this.track_lane.addEventListener("click", this, false); - this.keyFramePropertyData = new Array(); + this.element.addEventListener("click", this, false); } }, @@ -210,8 +289,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { 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); + //this.application.ninja.timeline.selectLayer(selectIndex); + if (ev.shiftKey) { - if (this.application.ninja.timeline.arrLayers[this.trackID - 1].element.length == 1) { + if (this.application.ninja.timeline.arrLayers[selectedIndex].element.length == 1) { if (this.tweens.length < 1) { this.insertTween(0); this.addAnimationRuleToElement(ev); @@ -238,36 +321,41 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { insertTween:{ value:function (clickPos) { - // calculate new tween's keyframe percent by clickPos + // calculate new tween's keyframe milliseconds by clickPos var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * clickPos; // need to check timeline master duration if greater than this track duration this.trackDuration = currentMillisec; + if(this.trackDuration > this.application.ninja.timeline.masterDuration){ + this.application.ninja.timeline.masterDuration = this.trackDuration; + } + var newTween = {}; + if (clickPos == 0) { + this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0]; newTween.spanWidth = 0; newTween.keyFramePosition = 0; newTween.keyFrameMillisec = 0; - newTween.keyframeID = 0; + newTween.tweenID = 0; newTween.spanPosition = 0; - newTween.timelineTrack = this; + newTween.tweenedProperties = []; + newTween.tweenedProperties["top"] = this.animatedElement.offsetTop; + newTween.tweenedProperties["left"] = this.animatedElement.offsetLeft; this.tweens.push(newTween); } else { newTween.spanWidth = clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; newTween.keyFramePosition = clickPos; newTween.keyFrameMillisec = currentMillisec; - newTween.keyframeID = this.nextKeyframe; + newTween.tweenID = this.nextKeyframe; newTween.spanPosition = clickPos - newTween.spanWidth; - newTween.timelineTrack = this; + newTween.tweenedProperties = []; + newTween.tweenedProperties["top"] = this.animatedElement.offsetTop; + newTween.tweenedProperties["left"] = this.animatedElement.offsetLeft; this.tweens.push(newTween); - var animatedProperties = new Array(); - animatedProperties["top"] = this.keyFramePropertyData[0]["top"]; - animatedProperties["left"] = this.keyFramePropertyData[0]["left"]; - this.keyFramePropertyData[this.nextKeyframe] = animatedProperties; - // update the animation duration var animationDuration = Math.round(this.trackDuration / 1000) + "s"; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); @@ -279,32 +367,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { splitTween:{ value:function (ev) { - alert("Splitting an existing span with a new keyframe is not yet supported.") + alert("Splitting an existing span with a new keyframe is not yet supported."); //console.log("splitting tween at span offsetX: " + ev.offsetX); } }, addAnimationRuleToElement:{ value:function (tweenEvent) { - this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0]; - var initAnimatedProperties = new Array(); - initAnimatedProperties["top"] = this.animatedElement.offsetTop; - initAnimatedProperties["left"] = this.animatedElement.offsetLeft; - this.keyFramePropertyData[0] = initAnimatedProperties; - + this.tweens[0].tweenedProperties["top"] = this.animatedElement.offsetTop; + this.tweens[0].tweenedProperties["left"] = this.animatedElement.offsetLeft; var animationDuration = Math.round(this.trackDuration / 1000) + "s"; - this.animationName = this.animatedElement.className + this.trackID; - + this.animationName = "animation_" + this.animatedElement.className; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", "infinite"); - var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} 100% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} }"; this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); - - this.isAnimated = true; - this.insertTween(tweenEvent.offsetX); + this.isTrackAnimated = true; } }, @@ -316,18 +396,15 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // build the new keyframe string var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; - for (var i = 0; i < this.keyFramePropertyData.length; i++) { - + for (var i = 0; i < this.tweens.length; i++) { var keyframePercent = Math.round((this.tweens[i].keyFrameMillisec / this.trackDuration) * 100) + "%"; - var keyframePropertyString = " " + keyframePercent + " {"; - keyframePropertyString += "top: " + this.keyFramePropertyData[i]["top"] + "px;"; - keyframePropertyString += " left: " + this.keyFramePropertyData[i]["left"] + "px;"; + keyframePropertyString += "top: " + this.tweens[i].tweenedProperties["top"] + "px;"; + keyframePropertyString += " left: " + this.tweens[i].tweenedProperties["left"] + "px;"; keyframePropertyString += "}"; keyframeString += keyframePropertyString; } keyframeString += " }"; - // set the keyframe string as the new rule this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); } @@ -337,7 +414,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { init:{ value:function () { var that = this; - this.label = this.element.querySelector(".label-main"); this.myContent = this.element.querySelector(".content-main"); this.labelPosition = this.element.querySelector(".label-position"); @@ -357,7 +433,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._mainCollapser.isAnimated = true; this._mainCollapser.labelClickEvent = function () { that.isMainCollapsed = that._mainCollapser.isCollapsed; - } + }; this._mainCollapser.needsDraw = true; this._positionCollapser = Collapser.create(); @@ -370,7 +446,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._positionCollapser.isAnimated = true; this._positionCollapser.labelClickEvent = function () { that.isPositionCollapsed = that._positionCollapser.isCollapsed; - } + }; this._positionCollapser.needsDraw = true; this._transformCollapser = Collapser.create(); @@ -383,20 +459,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._transformCollapser.isAnimated = true; this._transformCollapser.labelClickEvent = function () { that.isTransformCollapsed = that._transformCollapser.isCollapsed; - } + }; this._transformCollapser.needsDraw = true; this._styleCollapser = Collapser.create(); this._styleCollapser.clicker = this.labelStyles; this._styleCollapser.myContent = this.contentStyles; - this._styleCollapser.contentHeight = 60; + this._styleCollapser.contentHeight = 20; this._styleCollapser.isLabelClickable = false; this._styleCollapser.element = this.element; this._styleCollapser.isCollapsed = this.isStyleCollapsed; this._styleCollapser.isAnimated = true; this._styleCollapser.labelClickEvent = function () { that.isStyleCollapsed = that._styleCollapser.isCollapsed; - } + }; this._styleCollapser.needsDraw = true; // Register event handler for layer events. @@ -408,11 +484,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { handleLayerEvent:{ value:function (layerEvent) { - if (layerEvent.layerID !== this.trackID) { return; } - if (layerEvent.layerEventType === "labelClick") { if (layerEvent.layerEventLocale === "content-main") { this._mainCollapser.bypassAnimation = layerEvent.bypassAnimation; @@ -427,6 +501,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation; this._styleCollapser.handleCollapserLabelClick(); } + } else if (layerEvent.layerEventType === "newStyle") { + this.arrStyleTracks.push("1"); + if (this._styleCollapser.isCollapsed === true) { + this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation; + this._styleCollapser.handleCollapserLabelClick(); + } } } } diff --git a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css index ddaccd32..842015e9 100644 --- a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css +++ b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css @@ -2,63 +2,6 @@ /* TimelineTrack.scss * Main SCSS file for TimelineTrack component, compiled by SASS into the file css/TimelineTrack.css. */ -/* - This file contains proprietary software owned by Motorola Mobility, Inc.
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
- (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ -/* - * _colors.scss - * Defines the colors for the UI of the application. - * To create a new theme, copy this file and change the values as desired. - * Note: Some colors are defined as both rgb and rgba; some of the rgba versions have multiple a values. - */ -/* Colors for radio buttons and other form elements */ -/* Base colors for dividers - * - * Dividers consist of a div with a background color and either - * a top & bottom border (in the case of horizontal dividers) - * or a left & right border (in the case of vertical dividers), - * for a total of three different colors. - * - */ -/* top and left */ -/* Middle */ -/* Bottom and right */ -/* Main background color of entire app */ -/* Main app background color. */ -/* rgba version */ -/* Main app border color */ -/* color of drop shadows */ -/* Stage color */ -/* body border color */ -/* Body background color */ -/* Colors for main dropdown menus: background & text for both regular and highlighted states, dividers */ -/* Colors for tools: background, text, how they interact with the UI