From 8c1fda5e59b9d88b69e0b4a2bd57590ef451643c Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 1 May 2012 15:28:05 -0700 Subject: Timeline: Expand/collapse state of layers now mantained across document switching. --- js/panels/Timeline/Layer.reel/Layer.js | 31 ++++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index b23da749..34c300df 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -471,7 +471,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.dtextScaleX = this.layerData.dtextScaleX; this.dtextScaleY = this.layerData.dtextScaleY; this.dtextRotate = this.layerData.dtextRotate; - this._isFirstDraw = this.layerData._isFirstDraw; + //this._isFirstDraw = this.layerData._isFirstDraw; this.layerTag = this.layerData.layerTag; this.isVisible = this.layerData.isVisible; this.isAnimated = this.layerData.isAnimated; @@ -545,6 +545,9 @@ var Layer = exports.Layer = Montage.create(Component, { this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); this.element.addEventListener("drop", this.handleDrop.bind(this), false); + + + } }, draw: { @@ -570,7 +573,33 @@ var Layer = exports.Layer = Montage.create(Component, { } this._isFirstDraw = false; this.layerData._isFirstDraw = false; + + if (this.isMainCollapsed === false) { + this.mainCollapser.myContent.style.height = "auto"; + this.mainCollapser.myContent.classList.remove(this.mainCollapser.collapsedClass); + this.mainCollapser.clicker.classList.remove(this.mainCollapser.collapsedClass); + + } + if (this.isPositionCollapsed === false) { + this.positionCollapser.myContent.style.height = "auto"; + 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); + this.styleCollapser.clicker.classList.remove(this.styleCollapser.collapsedClass); + } + } + + + } }, /* End: Draw cycle */ -- cgit v1.2.3 From eaef072648eb539e648aabf7bc1aea8d02c21085 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 4 May 2012 21:46:29 -0700 Subject: property track additions to serialization data object Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index b23da749..ef51886e 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -606,6 +606,7 @@ var Layer = exports.Layer = Montage.create(Component, { newEvent.layerEventLocale = "styles"; newEvent.layerEventType = "newStyle"; newEvent.layerID = this.layerID; + newEvent.styleIndex = this._styleCounter; newEvent.styleID = this.layerID + "@" + this._styleCounter; newStyle.styleID = newEvent.styleID; @@ -629,7 +630,7 @@ var Layer = exports.Layer = Montage.create(Component, { } // Set up the event info and dispatch the event - + this._styleCounter += 1; newEvent.styleSelection = mySelection; defaultEventManager.dispatchEvent(newEvent); -- cgit v1.2.3 From a831e11ef6ae97bbd90c896b5cb6f4306e9001dd Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 4 May 2012 23:30:49 -0700 Subject: more sub prop additions Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.js | 34 +++++++++++++++------------------- 1 file changed, 15 insertions(+), 19 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 9edd2b35..233e811f 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -51,6 +51,7 @@ var Layer = exports.Layer = Montage.create(Component, { value: false }, styleRepetition : { + serializable: true, get: function() { return this._styleRepetition; }, @@ -61,8 +62,17 @@ var Layer = exports.Layer = Montage.create(Component, { _styleCounter : { value: 0 }, + styleCounter:{ + serializable:true, + get:function () { + return this._styleCounter; + }, + set:function (newVal) { + this._styleCounter = newVal; + } + }, - /* Layer models: the name, ID, and selected and animation booleans for the layer */ + /* Layer models: the name, ID, and selected and animation booleans for the layer */ _layerName:{ value: "Default Layer Name" }, @@ -635,8 +645,8 @@ var Layer = exports.Layer = Montage.create(Component, { newEvent.layerEventLocale = "styles"; newEvent.layerEventType = "newStyle"; newEvent.layerID = this.layerID; - newEvent.styleIndex = this._styleCounter; - newEvent.styleID = this.layerID + "@" + this._styleCounter; + newEvent.styleIndex = this.styleCounter; + newEvent.styleID = this.layerID + "@" + this.styleCounter; newStyle.styleID = newEvent.styleID; newStyle.whichView = "hintable"; @@ -644,26 +654,12 @@ var Layer = exports.Layer = Montage.create(Component, { newStyle.editorValue = ""; newStyle.ruleTweener = false; newStyle.isSelected = false; + this.arrLayerStyles.push(newStyle); - if (!!this.styleRepetition.selectedIndexes) { - mySelection = this.styleRepetition.selectedIndexes[0]; - this.arrLayerStyles.splice(mySelection, 0, newStyle); - //this.styleRepetition.selectedIndexes = [mySelection]; - this.selectStyle(mySelection); - } else { - newLength = this.arrLayerStyles.length; - this.arrLayerStyles.push(newStyle); - mySelection = this.arrLayerStyles.length; - // this.styleRepetition.selectedIndexes = [mySelection-1]; - this.selectStyle(mySelection-1); - } - // Set up the event info and dispatch the event - this._styleCounter += 1; + this.styleCounter += 1; newEvent.styleSelection = mySelection; defaultEventManager.dispatchEvent(newEvent); - - } }, deleteStyle : { -- cgit v1.2.3 From 307d339e45b209dab80ff88196a9f85f8d58f425 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 8 May 2012 11:48:29 -0700 Subject: Timeline: Update drag and drop handlers to be unique for drag and drop type. --- js/panels/Timeline/Layer.reel/Layer.js | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 34c300df..c213cb70 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -868,6 +868,9 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleDragleave: { value: function(event) { + if (this.parentComponent.parentComponent.draggingType !== "layer") { + return; + } this.element.classList.remove("dragOver"); } }, @@ -875,10 +878,14 @@ var Layer = exports.Layer = Montage.create(Component, { value: function(event) { this.parentComponent.parentComponent.dragLayerID = this.layerID; event.dataTransfer.setData('Text', 'Layer'); + this.parentComponent.parentComponent.draggingType = "layer"; } }, handleDragover: { value: function(event) { + if (this.parentComponent.parentComponent.draggingType !== "layer") { + return; + } event.preventDefault(); this.element.classList.add("dragOver"); event.dataTransfer.dropEffect = "move"; @@ -888,6 +895,9 @@ var Layer = exports.Layer = Montage.create(Component, { handleDrop : { value: function(event) { + if (this.parentComponent.parentComponent.draggingType !== "layer") { + return; + } event.stopPropagation(); this.element.classList.remove("dragOver"); if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) { -- cgit v1.2.3 From 4f1693b953befabf4495df668f542c7f52270864 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 8 May 2012 13:42:04 -0700 Subject: Change sub property track arrays Remove transform section and move width and height into Position section. rename position section Position and Size. additional support for generic prop tweens Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.html | 114 +++---------------------------- js/panels/Timeline/Layer.reel/Layer.js | 90 +----------------------- 2 files changed, 10 insertions(+), 194 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 10334b31..ba7c18c3 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -20,7 +20,6 @@ "slotStyle" : {"@":"slot1"}, "mainCollapser" : {"@" : "mainCollapser"}, "positionCollapser" : {"@" : "positionCollapser"}, - "transformCollapser" : {"@" : "transformCollapser"}, "styleCollapser" : {"@" : "styleCollapser"}, "clickerMain" : {"#" : "clicker-main"}, "myLabel" : {"#" : "myLabel"}, @@ -182,60 +181,6 @@ } } }, - "dtext_skew_x" : { - "prototype": "js/components/hottextunit.reel[HotTextUnit]", - "properties": { - "element": {"#": "skew-x"}, - "maxValue" : 100, - "minValue" : 0, - "acceptableUnits" : "%", - "units" : "%", - "value" : 0 - }, - "bindings": { - "value": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "dtextSkewX", - "oneway": false - } - } - }, - "dtext_skew_y" : { - "prototype": "js/components/hottextunit.reel[HotTextUnit]", - "properties": { - "element": {"#": "skew-y"}, - "maxValue" : 100, - "minValue" : 0, - "acceptableUnits" : "%", - "units" : "%", - "value" : 0 - }, - "bindings": { - "value": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "dtextSkewY", - "oneway": false - } - } - }, - "dtext_rotate" : { - "prototype": "js/components/hottextunit.reel[HotTextUnit]", - "properties": { - "element": {"#": "rotation"}, - "maxValue" : 360, - "minValue" : -360, - "acceptableUnits" : "degrees", - "units" : "degrees", - "value" : 0 - }, - "bindings": { - "value": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "dtextRotate", - "oneway": false - } - } - }, "mainCollapser" : { "prototype" : "js/panels/timeline/Collapser", @@ -277,26 +222,6 @@ } }, - "transformCollapser" : { - "prototype" : "js/panels/timeline/Collapser", - "properties" : { - "element" : {"#" : "content-transform"}, - "myContent" : {"#":"content-transform"}, - "contentHeight" : 60, - "isLabelClickable" : true, - "clicker" : {"#" : "clicker-transform"}, - "isCollapsed" : true, - "isAnimated" : true - }, - "bindings" : { - "isToggling" : { - "boundObject" : {"@" : "owner" }, - "boundObjectPropertyPath" : "isTransformCollapsed", - "oneway" : false - } - } - }, - "styleCollapser" : { "prototype" : "js/panels/timeline/Collapser", "properties" : { @@ -333,7 +258,7 @@
- Position + Position and Size
@@ -346,37 +271,16 @@
Top
+
+
Width
+
+
+
+
Height
+
+
-
- Transform - -
-
-
-
-
Width
-
-
-
-
Height
-
-
-
-
Skew X
-
-
-
-
Skew Y
-
-
-
-
Rotation
-
-
-
- -
Style diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 233e811f..c9dd5328 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -147,7 +147,7 @@ var Layer = exports.Layer = Montage.create(Component, { } }, - /* Position and Transform hottext values */ + /* Position and Size hottext values */ _dtextPositionX : { value:null }, @@ -220,60 +220,6 @@ var Layer = exports.Layer = Montage.create(Component, { } }, - _dtextSkewX : { - value:null - }, - - dtextSkewX:{ - serializable: true, - get:function(){ - return this._dtextSkewX; - }, - set:function(value){ - if (this._dtextSkewX !== value) { - this._dtextSkewX = value; - this.layerData.dtextSkewX = value; - } - - } - }, - - _dtextSkewY : { - value:null - }, - - dtextSkewY:{ - serializable: true, - get:function(){ - return this._dtextSkewY; - }, - set:function(value){ - if (this._dtextSkewY !== value) { - this._dtextSkewY = value; - this.layerData.dtextSkewY = value; - } - - } - }, - - _dtextRotate : { - value:null - }, - - dtextRotate:{ - serializable: true, - get:function(){ - return this._dtextRotate; - }, - set:function(value){ - if (this._dtextRotate !== value) { - this._dtextRotate = value; - this.layerData.dtextRotate = value; - } - - } - }, - /* isSelected: whether or not the layer is currently selected. */ _isSelected:{ value: false @@ -372,20 +318,6 @@ var Layer = exports.Layer = Montage.create(Component, { } }, - _isTransformCollapsed : { - value: true - }, - isTransformCollapsed : { - serializable: true, - get: function() { - return this._isTransformCollapsed; - }, - set: function(newVal) { - this._isTransformCollapsed = newVal; - this.layerData.isTransformCollapsed = newVal; - } - }, - _isPositionCollapsed : { value: true }, @@ -469,7 +401,6 @@ var Layer = exports.Layer = Montage.create(Component, { this.arrLayerStyles = this.layerData.arrLayerStyles; this.isMainCollapsed = this.layerData.isMainCollapsed; this.isPositionCollapsed = this.layerData.isPositionCollapsed; - this.isTransformCollapsed = this.layerData.isTransformCollapsed; this.isSelected = this.layerData.isSelected; this.isActive = this.layerData.isActive; this.isStyleCollapsed = this.layerData.isStyleCollapsed; @@ -537,7 +468,6 @@ var Layer = exports.Layer = Montage.create(Component, { // Collapser event handlers. this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); - this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false); this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false); // Add event listeners to add and delete style buttons @@ -595,11 +525,6 @@ var Layer = exports.Layer = 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); @@ -823,19 +748,6 @@ var Layer = exports.Layer = Montage.create(Component, { this.triggerOutgoingBinding(); } }, - handleTransformCollapserClick : { - value: function(event) { - this.transformCollapser.bypassAnimation = false; - this.bypassAnimation = false; - this.layerData.bypassAnimation = false; - if (this.isTransformCollapsed) { - this.isTransformCollapsed = false; - } else { - this.isTransformCollapsed = true; - } - this.triggerOutgoingBinding(); - } - }, handleStyleCollapserClick : { value: function(event) { this.styleCollapser.bypassAnimation = false; -- cgit v1.2.3 From 40670fd9a723fe6f95fe6c1ceefa0d2435b83aa4 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 9 May 2012 09:47:31 -0700 Subject: sub property additions Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index c9dd5328..9fb33956 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -60,7 +60,7 @@ var Layer = exports.Layer = Montage.create(Component, { } }, _styleCounter : { - value: 0 + value: 4 }, styleCounter:{ serializable:true, @@ -557,7 +557,7 @@ var Layer = exports.Layer = Montage.create(Component, { // Or at the end, if no rule is selected. var newLength = 0, - mySelection = 0, + // mySelection = 0, // newStyle = LayerStyle.create(), newStyle = {}, newEvent = document.createEvent("CustomEvent"); @@ -571,7 +571,7 @@ var Layer = exports.Layer = Montage.create(Component, { newEvent.layerEventType = "newStyle"; newEvent.layerID = this.layerID; newEvent.styleIndex = this.styleCounter; - newEvent.styleID = this.layerID + "@" + this.styleCounter; + newEvent.styleID = this.layerID + "@" + this.styleCounter; // is this property needed? newStyle.styleID = newEvent.styleID; newStyle.whichView = "hintable"; @@ -583,7 +583,7 @@ var Layer = exports.Layer = Montage.create(Component, { // Set up the event info and dispatch the event this.styleCounter += 1; - newEvent.styleSelection = mySelection; + // newEvent.styleSelection = mySelection; defaultEventManager.dispatchEvent(newEvent); } }, -- cgit v1.2.3 From b42e5dc5922fb427b9edc7af60e9fa4a5dfcbe0e Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 10 May 2012 10:43:49 -0700 Subject: Some sub prop updates Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 9fb33956..245aabd4 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -60,7 +60,7 @@ var Layer = exports.Layer = Montage.create(Component, { } }, _styleCounter : { - value: 4 + value: 0 }, styleCounter:{ serializable:true, -- cgit v1.2.3 From 48a0d3a091602d4d04b0b529b780261f0d2ebc1d Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 10 May 2012 10:44:18 -0700 Subject: Timeline: Bug fix: tweens now hide when their container collapses. Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/css/Layer.css | 33 +++++++++++++++------------ js/panels/Timeline/Layer.reel/scss/Layer.scss | 3 +++ 2 files changed, 22 insertions(+), 14 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css index 179571af..3648fda5 100644 --- a/js/panels/Timeline/Layer.reel/css/Layer.css +++ b/js/panels/Timeline/Layer.reel/css/Layer.css @@ -224,22 +224,27 @@ } /* line 199, ../scss/Layer.scss */ +.timeline-track .collapsible-content { + position: relative; +} + +/* line 202, ../scss/Layer.scss */ .collapsible-content .layout-table { width: 99.9%; } -/* line 202, ../scss/Layer.scss */ +/* line 205, ../scss/Layer.scss */ .content-layer .collapsible-content { padding-left: 30px; } -/* line 205, ../scss/Layer.scss */ +/* line 208, ../scss/Layer.scss */ .collapsible-content .collapsible-content .layout-table .layout-row { height: 20px; overflow: hidden; } -/* line 209, ../scss/Layer.scss */ +/* line 212, ../scss/Layer.scss */ .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { width: 40%; height: 20px; @@ -249,13 +254,13 @@ overflow: hidden; } -/* line 218, ../scss/Layer.scss */ +/* line 221, ../scss/Layer.scss */ .collapsible-content .collapsible-content .container-row { border-bottom: 1px solid #505050; height: 20px; } -/* line 224, ../scss/Layer.scss */ +/* line 227, ../scss/Layer.scss */ .collapsible-content .collapsible-content .cell-property, .collapsible-content .collapsible-content .cell-value { width: 45%; @@ -267,24 +272,24 @@ line-height: 18px; } -/* line 236, ../scss/Layer.scss */ +/* line 239, ../scss/Layer.scss */ .collapsible-content .layout-table:first-child { border-top: 1px solid #505050; } -/* line 240, ../scss/Layer.scss */ +/* line 243, ../scss/Layer.scss */ .collapsible-content .hottextunit { width: auto; } -/* line 243, ../scss/Layer.scss */ +/* line 246, ../scss/Layer.scss */ .collapsible-transition { -webkit-transition-property: height; -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease-in; } -/* line 251, ../scss/Layer.scss */ +/* line 254, ../scss/Layer.scss */ .editable2 { height: 20px; background-color: #242424 !important; @@ -296,29 +301,29 @@ text-overflow: clip; } -/* line 261, ../scss/Layer.scss */ +/* line 264, ../scss/Layer.scss */ .editable2 br { display: inline; } -/* line 265, ../scss/Layer.scss */ +/* line 268, ../scss/Layer.scss */ .label-style .disabled { cursor: default; } /* styles elements */ -/* line 270, ../scss/Layer.scss */ +/* line 273, ../scss/Layer.scss */ .content-style .item-template { display: none; } -/* line 273, ../scss/Layer.scss */ +/* line 276, ../scss/Layer.scss */ .content-style .layout-row.selected .layout-cell { background-color: #b2b2b2; color: #242424; } -/* line 277, ../scss/Layer.scss */ +/* line 280, ../scss/Layer.scss */ .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 8e5e50db..a407c9dc 100644 --- a/js/panels/Timeline/Layer.reel/scss/Layer.scss +++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss @@ -196,6 +196,9 @@ top: 3px; right: 31px; } +.timeline-track .collapsible-content { + position: relative; +} .collapsible-content .layout-table { width: 99.9%; } -- cgit v1.2.3 From 8c464561e0c55dc5bf67e1e815678e0d07dc4727 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 14 May 2012 10:53:20 -0700 Subject: Squashed commit of the following: commit b23502b8ed6856981d09577d4cf24283e5db8afa Author: Kruti Shah Date: Mon May 14 10:48:16 2012 -0700 Removed Debugger Signed-off-by: Kruti Shah commit c0b531a074e9cf9a964da0cda496bba8d7453ec1 Author: Kruti Shah Date: Fri May 11 13:55:18 2012 -0700 Changing Doc Layer Name Signed-off-by: Kruti Shah Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.js | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 130dd044..b0f6d220 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -83,13 +83,13 @@ var Layer = exports.Layer = Montage.create(Component, { return this._layerName; }, set:function(newVal){ - this._layerEditable.value = newVal; this._layerName = newVal; this.layerData.layerName = newVal; if (typeof(this.dynamicLayerName) !== "undefined") { this.dynamicLayerName.value = newVal; } + } }, _layerID:{ @@ -485,6 +485,8 @@ var Layer = exports.Layer = Montage.create(Component, { this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); this.element.addEventListener("drop", this.handleDrop.bind(this), false); + + this.eventManager.addEventListener("updatedID", this, false); @@ -668,11 +670,11 @@ var Layer = exports.Layer = Montage.create(Component, { /* Begin: Event handlers */ handleLayerNameChange: { - value: function(event) { + value: function(event) { this.dynamicLayerName.value = this._layerEditable.value; - this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.dynamicLayerName.value; this.needsDraw = true; this.application.ninja.documentController.activeDocument.needsSave = true; + this.layerData.elementsList[0].setAttribute("id",this.dynamicLayerName.value); } }, handleAddStyleClick: { @@ -699,7 +701,6 @@ var Layer = exports.Layer = Montage.create(Component, { } this.dynamicLayerName.value = newVal; this.layerName = newVal; - this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = newVal; this.application.ninja.documentController.activeDocument.needsSave = true; this.needsDraw = true; } @@ -845,7 +846,24 @@ var Layer = exports.Layer = Montage.create(Component, { return e.stack.split("at")[3].split(":")[2]; } } + }, + + handleUpdatedID:{ + value:function(event){ + var i= this.application.ninja.timeline.arrLayers.length; + if(event.detail.id){ + for(var k=0;k --- js/panels/Timeline/Layer.reel/Layer.html | 23 +++-- js/panels/Timeline/Layer.reel/Layer.js | 142 +++++++++++++++++++++++++++---- 2 files changed, 139 insertions(+), 26 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index c7e7b575..c4aa6e29 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -21,7 +21,12 @@ "positionCollapser" : {"@" : "positionCollapser"}, "styleCollapser" : {"@" : "styleCollapser"}, "clickerMain" : {"#" : "clicker-main"}, - "myLabel" : {"#" : "myLabel"} + "myLabel" : {"#" : "myLabel"}, + "leftControl": {"@" : "dtext_position_x"}, + "topControl": {"@" : "dtext_position_y"}, + "widthControl": {"@" : "dtext_scale_x"}, + "heightControl": {"@" : "dtext_scale_y"}, + "styleType":{"@" : "style"} } }, "dtext1" : { @@ -147,10 +152,10 @@ "prototype": "js/components/hottextunit.reel[HotTextUnit]", "properties": { "element": {"#": "scale-x"}, - "maxValue" : 100, - "minValue" : 0, - "acceptableUnits" : "%", - "units" : "%", + "maxValue" : 100000, + "minValue" : -100000, + "acceptableUnits" : "px", + "units" : "px", "value" : 0 }, "bindings": { @@ -165,10 +170,10 @@ "prototype": "js/components/hottextunit.reel[HotTextUnit]", "properties": { "element": {"#": "scale-y"}, - "maxValue" : 100, - "minValue" : 0, - "acceptableUnits" : "%", - "units" : "%", + "maxValue" : 100000, + "minValue" : -100000, + "acceptableUnits" : "px", + "units" : "px", "value" : 0 }, "bindings": { diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index b0f6d220..2df11f18 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -12,6 +12,7 @@ var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle; var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText; var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; var nj = require("js/lib/NJUtils").NJUtils; +var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; var Layer = exports.Layer = Montage.create(Component, { @@ -162,7 +163,6 @@ var Layer = exports.Layer = Montage.create(Component, { this._dtextPositionX = value; this.layerData.dtextPositionX = value; } - } }, @@ -487,11 +487,36 @@ var Layer = exports.Layer = Montage.create(Component, { this.element.addEventListener("drop", this.handleDrop.bind(this), false); this.eventManager.addEventListener("updatedID", this, false); - + this.eventManager.addEventListener("elementChange",this,false); + + this.leftControl.identifier = "left"; + this.leftControl.addEventListener("changing",this,false); + this.leftControl.addEventListener("change",this,false); + + this.topControl.identifier = "top"; + this.topControl.addEventListener("changing",this,false); + this.topControl.addEventListener("change",this,false); + + this.widthControl.identifier = "width"; + this.widthControl.addEventListener("changing",this,false); + this.widthControl.addEventListener("change",this,false); + this.heightControl.identifier = "height"; + this.heightControl.addEventListener("changing",this,false); + this.heightControl.addEventListener("change",this,false); + + el=this.layerData.elementsList[0]; + + this.dtextPositionX = parseFloat(ElementsMediator.getProperty(el, "left")); + this.dtextPositionY = parseFloat(ElementsMediator.getProperty(el, "top")); + this.dtextScaleY = parseFloat(ElementsMediator.getProperty(el, "height")); + this.dtextScaleX= parseFloat(ElementsMediator.getProperty(el, "width")); + +// this.eventManager.addEventListener("changing",this,false); } }, + draw: { value: function() { if (this.isSelected) { @@ -582,6 +607,7 @@ var Layer = exports.Layer = Montage.create(Component, { newStyle.ruleTweener = false; newStyle.isSelected = false; this.arrLayerStyles.push(newStyle); + console.log(newStyle.editorValue) // Set up the event info and dispatch the event this.styleCounter += 1; @@ -589,6 +615,7 @@ var Layer = exports.Layer = Montage.create(Component, { defaultEventManager.dispatchEvent(newEvent); } }, + deleteStyle : { value: function() { var newEvent = document.createEvent("CustomEvent"), @@ -816,6 +843,100 @@ var Layer = exports.Layer = Montage.create(Component, { return false; } }, + + handleLeftChange:{ + value:function(){ + this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "left", [this.dtextPositionX + "px"] , "Change", "timeline"); + } + }, + + handleTopChange:{ + value:function(){ + this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "top", [this.dtextPositionY + "px"] , "Change", "timeline"); + } + }, + + handleWidthChange:{ + value:function(){ + this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "width", [this.dtextScaleX + "px"] , "Change", "timeline"); + } + }, + + handleHeightChange:{ + value:function(){ + this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "height", [this.dtextScaleY + "px"] , "Change", "timeline"); + } + }, + + handleLeftChanging:{ + value:function(){ + this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "left", [this.dtextPositionX + "px"] , "Changing", "timeline"); + } + }, + + handleTopChanging:{ + value:function(){ + this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "top", [this.dtextPositionY + "px"] , "Changing", "timeline"); + } + }, + + handleWidthChanging:{ + value:function(){ + this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "width", [this.dtextScaleX + "px"] , "Changing", "timeline"); + } + }, + + handleHeightChanging:{ + value:function(){ + this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "height", [this.dtextScaleY + "px"] , "Changing", "timeline"); + } + }, + + + handleElementChange:{ + value:function(event){ + var el = this.layerData.elementsList[0]; + var length = this.arrLayerStyles.length , i; + + if(event.detail.source && event.detail.source!== "timeline"){ + this.dtextPositionX = parseFloat(ElementsMediator.getProperty(el, "left")); + this.dtextPositionY = parseFloat(ElementsMediator.getProperty(el, "top")); + this.dtextScaleY = parseFloat(ElementsMediator.getProperty(el, "height")); + this.dtextScaleX= parseFloat(ElementsMediator.getProperty(el, "width")); + + for(i=0; i --- js/panels/Timeline/Layer.reel/Layer.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 4fb3e43c..8df0e9ae 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -556,7 +556,7 @@ var Layer = exports.Layer = Montage.create(Component, { } }, addStyle : { - value: function() { + value: function(styleProperty) { // Add a new style rule. It should be added above the currently selected rule, // Or at the end, if no rule is selected. @@ -579,7 +579,12 @@ var Layer = exports.Layer = Montage.create(Component, { newStyle.styleID = newEvent.styleID; newStyle.whichView = "hintable"; - newStyle.editorProperty = ""; + newStyle.editorProperty = ""; + if(styleProperty){ + newStyle.editorProperty = styleProperty; + newEvent.layerEventType = "restoreStyle"; + newEvent.trackEditorProperty = styleProperty; + } newStyle.editorValue = ""; newStyle.ruleTweener = false; newStyle.isSelected = false; -- cgit v1.2.3 From 811ce7a7cdec18f304c6660a70012960e61d967a Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 24 May 2012 17:46:47 -0700 Subject: Timeline: bug fix "Layer name gets doubled" (Spreadsheet) --- js/panels/Timeline/Layer.reel/Layer.html | 3 ++- js/panels/Timeline/Layer.reel/Layer.js | 44 ++++++++++++++++++++++---------- 2 files changed, 33 insertions(+), 14 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index c7e7b575..44022211 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -17,6 +17,7 @@ "styleRepetition" : {"@":"repetition1"}, "dynamicLayerName" : {"@":"dtext1"}, "dynamicLayerTag" : {"@": "dtext2"}, + "layer_label_text" : {"#": "layer-label-text"}, "mainCollapser" : {"@" : "mainCollapser"}, "positionCollapser" : {"@" : "positionCollapser"}, "styleCollapser" : {"@" : "styleCollapser"}, @@ -33,7 +34,7 @@ "value" : { "boundObject" : {"@": "owner"}, "boundObjectPropertyPath" : "layerName", - "oneway" : false + "oneway" : true } } }, diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 8df0e9ae..db99e869 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -74,7 +74,7 @@ var Layer = exports.Layer = Montage.create(Component, { /* Layer models: the name, ID, and selected and animation booleans for the layer */ _layerName:{ - value: "Default Layer Name" + value: "" }, layerName:{ @@ -83,13 +83,22 @@ var Layer = exports.Layer = Montage.create(Component, { return this._layerName; }, set:function(newVal){ - this._layerEditable.value = newVal; - this._layerName = newVal; - this.layerData.layerName = newVal; + if (this._layerEditable.value !== newVal) { + this._layerEditable.value = newVal; + } + if (this._layerName !== newVal) { + this._layerName = newVal; + } + if (this.layerData.layerName !== newVal) { + this.layerData.layerName = newVal; + } + if (typeof(this.dynamicLayerName) !== "undefined") { - this.dynamicLayerName.value = newVal; + if (this.dynamicLayerName.value !== newVal) { + this.dynamicLayerName.value = newVal; + } } - + this.needsDraw = true; } }, _layerID:{ @@ -513,6 +522,11 @@ var Layer = exports.Layer = Montage.create(Component, { //console.log('Layer.draw, removing selection for layer ', this.layerName) this.element.classList.remove("layerSelected"); } + + // Update layer name? + if (this.layerName !== this.layer_label_text.innerText) { + this.layer_label_text.innerText = this.layerName; + } } }, didDraw: { @@ -678,10 +692,12 @@ var Layer = exports.Layer = Montage.create(Component, { /* Begin: Event handlers */ handleLayerNameChange: { value: function(event) { - this.dynamicLayerName.value = this._layerEditable.value; - this.needsDraw = true; - this.application.ninja.documentController.activeDocument.needsSave = true; - this.layerData.stageElement.setAttribute("id",this.dynamicLayerName.value); + + if (this._layerEditable.value !== this.layerName) { + this.layerName = this._layerEditable.value; + this.application.ninja.documentController.activeDocument.needsSave = true; + this.layerData.stageElement.setAttribute("id",this._layerEditable.value); + } } }, handleAddStyleClick: { @@ -706,10 +722,12 @@ var Layer = exports.Layer = Montage.create(Component, { if (this._layerEditable.enteredValue.length === 0) { newVal = this._layerEditable._preEditValue; } - this.dynamicLayerName.value = newVal; this.layerName = newVal; - this.application.ninja.documentController.activeDocument.needsSave = true; - this.needsDraw = true; + if (newVal !== this.layerName) { + this.layerName = newVal; + this.application.ninja.documentController.activeDocument.needsSave = true; + this.layerData.stageElement.setAttribute("id", newVal); + } } }, handleMousedown: { -- cgit v1.2.3 From b0a736deb4f3bb515e0ca4009fe4f98e22cec2c0 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 25 May 2012 10:15:48 -0700 Subject: Timeline: Better fix for keeping styles/tracks in synch when adding styles on document open. --- js/panels/Timeline/Layer.reel/Layer.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index db99e869..45d6f0a3 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -579,10 +579,11 @@ var Layer = exports.Layer = Montage.create(Component, { // newStyle = LayerStyle.create(), newStyle = {}, newEvent = document.createEvent("CustomEvent"); - + /* this.isStyleCollapsed = false; this.layerData.isStyleCollapsed = false; this.triggerOutgoingBinding(); + */ newEvent.initCustomEvent("layerEvent", false, true); newEvent.layerEventLocale = "styles"; @@ -702,6 +703,11 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleAddStyleClick: { value: function(event) { + + this.isStyleCollapsed = false; + this.layerData.isStyleCollapsed = false; + this.triggerOutgoingBinding(); + this.addStyle(); } }, -- cgit v1.2.3 From 4a8a293ba3fdf934a431152a9351f45092fb3695 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 25 May 2012 14:01:45 -0700 Subject: Timeline: bug fix: better selection/deselection of styles within layers. --- js/panels/Timeline/Layer.reel/Layer.js | 51 ++++++++++++++++++++++++++++++---- 1 file changed, 46 insertions(+), 5 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 45d6f0a3..f571c1d4 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -71,6 +71,24 @@ var Layer = exports.Layer = Montage.create(Component, { this._styleCounter = newVal; } }, + _selectedStyleIndex: { + value: false + }, + selectedStyleIndex: { + get: function() { + return this._selectedStyleIndex; + }, + set: function(newVal) { + if (typeof(newVal) === "undefined") { + return; + } + if (newVal !== this._selectedStyleIndex) { + this._selectedStyleIndex = newVal; + this.layerData.selectedStyleIndex = newVal; + this.needsDraw = true; + } + } + }, /* Layer models: the name, ID, and selected and animation booleans for the layer */ _layerName:{ @@ -441,6 +459,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.isVisible = this.layerData.isVisible; this.isAnimated = this.layerData.isAnimated; this.docUUID = this.layerData.docUUID; + this.sel