From 21c941bd1fe55e511a72bfa5dc3019748158bd4a Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 15 Mar 2012 15:00:45 -0700 Subject: Timeline: Fix for layer selection problems on file open and switch. --- js/panels/Timeline/Layer.reel/Layer.js | 19 +++++++++++++++---- 1 file changed, 15 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 b41680be..069d3c4b 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -255,12 +255,11 @@ var Layer = exports.Layer = Montage.create(Component, { if (value !== this._isSelected) { // Only concerned about different values if (value === false) { - // If changing from false to true, we need to deselect any associated styles + // If changing from true to false, we need to deselect any associated styles this.selectStyle(false); } this._isSelected = value; this.layerData.isSelected = value; - //this.needsDraw = true; } } @@ -381,7 +380,6 @@ var Layer = exports.Layer = Montage.create(Component, { return this._bypassAnimation; }, set: function(newVal) { - //console.log("layer.js _bypassAnimation setter " + newVal) this._bypassAnimation = newVal; } }, @@ -406,7 +404,6 @@ var Layer = exports.Layer = Montage.create(Component, { setData:{ value:function(){ - this.log('layer: setData called') this.layerName = this.layerData.layerName; this.layerID = this.layerData.layerID; this.arrLayerStyles = this.layerData.arrLayerStyles; @@ -424,9 +421,13 @@ 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.needsDraw = true; } }, + _isFirstDraw : { + value: true + }, /* END: Models */ @@ -482,6 +483,16 @@ var Layer = exports.Layer = Montage.create(Component, { this.element.classList.remove("selected"); } } + }, + didDraw: { + value: function() { + if ((this.isSelected === true) && (this._isFirstDraw === true)) { + // Once we're done drawing the first time we need to tell the TimelinePanel if + // this layer is supposed to be selected. + this.parentComponent.parentComponent.selectedLayerID = this.layerID; + this._isFirstDraw = false; + } + } }, /* End: Draw cycle */ -- cgit v1.2.3 From 134abd9a23c3ef3ef687051b5da7b94339ae8cad Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 15 Mar 2012 15:59:01 -0700 Subject: Timeline: Remove selection timer on add new layer method. --- js/panels/Timeline/Layer.reel/Layer.js | 1 + 1 file changed, 1 insertion(+) (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 069d3c4b..5206ae16 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -260,6 +260,7 @@ var Layer = exports.Layer = Montage.create(Component, { } this._isSelected = value; this.layerData.isSelected = value; + this.needsDraw = true; } } -- cgit v1.2.3 From 3bebf2b279d8f4da0439a4e3de1254c4292d0cac Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 16 Mar 2012 13:39:11 -0700 Subject: Timeline: Hook up data binding for changes on subproperties. --- js/panels/Timeline/Layer.reel/Layer.js | 54 ++++++++++++++++++++++++++++++++-- 1 file changed, 52 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 5206ae16..b54d6ce0 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -314,9 +314,11 @@ var Layer = exports.Layer = Montage.create(Component, { return this._isMainCollapsed; }, set: function(newVal) { - this.log('layer.js: isMainCollapsed: ' + newVal); if (newVal !== this._isMainCollapsed) { + this.log('layer.js: isMainCollapsed: ' + newVal); this._isMainCollapsed = newVal; + this.layerData.isMainCollapsed = newVal; + // this.triggerOutgoingBinding(); } } }, @@ -333,6 +335,8 @@ var Layer = exports.Layer = Montage.create(Component, { set: function(newVal) { if (newVal !== this._isTransformCollapsed) { this._isTransformCollapsed = newVal; + this.layerData.isTransformCollapsed = newVal; + this.triggerOutgoingBinding(); //this.needsDraw = true; } } @@ -350,6 +354,8 @@ var Layer = exports.Layer = Montage.create(Component, { set: function(newVal) { if (newVal !== this._isPositionCollapsed) { this._isPositionCollapsed = newVal; + this.layerData.isPositionCollapsed = newVal; + this.triggerOutgoingBinding(); //this.needsDraw = true; } } @@ -367,6 +373,8 @@ var Layer = exports.Layer = Montage.create(Component, { set: function(newVal) { if (newVal !== this._isStyleCollapsed) { this._isStyleCollapsed = newVal; + this.layerData.isStyleCollapsed = newVal; + this.triggerOutgoingBinding(); //this.needsDraw = true; } } @@ -381,7 +389,11 @@ var Layer = exports.Layer = Montage.create(Component, { return this._bypassAnimation; }, set: function(newVal) { - this._bypassAnimation = newVal; + if (newVal !== this._bypassAnimation) { + this._bypassAnimation = newVal; + this.layerData.bypassAnimation = newVal; + //this.triggerOutgoingBinding(); + } } }, @@ -426,6 +438,36 @@ var Layer = exports.Layer = Montage.create(Component, { this.needsDraw = true; } }, + + /* Data binding point and outgoing binding trigger method */ + _bindingPoint : { + serializable: true, + value : {} + }, + bindingPoint: { + serializable: true, + get: function() { + return this._bindingPoint; + }, + set: function(newVal) { + if (newVal !== this._bindingPoint) { + this._bindingPoint = newVal; + this.setData(); + } + } + }, + + triggerOutgoingBinding : { + value: function() { + if (this.layerData.triggerBinding === true) { + this.layerData.triggerBinding = false; + } else { + this.layerData.triggerBinding = true; + } + } + }, + + // Is this the first draw? _isFirstDraw : { value: true }, @@ -700,44 +742,52 @@ var Layer = exports.Layer = Montage.create(Component, { value: function(event) { this.mainCollapser.bypassAnimation = false; this.bypassAnimation = false; + this.layerData.bypassAnimation = false; if (this.isMainCollapsed) { this.isMainCollapsed = false; } else { this.isMainCollapsed = true; } + this.triggerOutgoingBinding(); } }, handlePositionCollapserClick : { value: function(event) { this.positionCollapser.bypassAnimation = false; this.bypassAnimation = false; + this.layerData.bypassAnimation = false; if (this.isPositionCollapsed) { this.isPositionCollapsed = false; } else { this.isPositionCollapsed = true; } + 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; this.bypassAnimation = false; + this.layerData.bypassAnimation = false; if (this.isStyleCollapsed) { this.isStyleCollapsed = false; } else { this.isStyleCollapsed = true; } + this.triggerOutgoingBinding(); } }, /* End: Event handlers */ -- cgit v1.2.3 From aa2d8afb323e71ea562c74564609604e0480fde4 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 19 Mar 2012 16:53:29 -0700 Subject: Timeline: Re-enable adding/removing styles to layers. New methods in TimelinePanel for creating new styles on document load. --- js/panels/Timeline/Layer.reel/Layer.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 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 238ddae9..830d179e 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -499,11 +499,8 @@ var Layer = exports.Layer = Montage.create(Component, { // Add event listeners to add and delete style buttons - this.buttonAddStyle.identifier = "addStyle"; - this.buttonAddStyle.addEventListener("click", this, false); - - this.buttonDeleteStyle.identifier = "deleteStyle"; - this.buttonDeleteStyle.addEventListener("click", this, false); + this.buttonAddStyle.addEventListener("click", this.handleAddStyleClick.bind(this), false); + this.buttonDeleteStyle.addEventListener("click", this.handleDeleteStyleClick.bind(this), false); // Add mousedown listener to set isActive this.element.addEventListener("mousedown", this, false); @@ -604,7 +601,7 @@ var Layer = exports.Layer = Montage.create(Component, { // Set up the event info and dispatch the event newEvent.styleSelection = mySelection; - //defaultEventManager.dispatchEvent(newEvent); + defaultEventManager.dispatchEvent(newEvent); } }, @@ -624,7 +621,7 @@ var Layer = exports.Layer = Montage.create(Component, { newEvent.layerID = this.layerID; newEvent.styleID = this.arrLayerStyles[selectedIndex].styleID; newEvent.styleSelection = selectedIndex; - //defaultEventManager.dispatchEvent(newEvent); + defaultEventManager.dispatchEvent(newEvent); // Delete the style from the view this.arrLayerStyles.splice(selectedIndex, 1); @@ -717,6 +714,7 @@ var Layer = exports.Layer = Montage.create(Component, { value: function(event) { this.layerData.isActive = true; var ptrParent = nj.queryParentSelector(event.target, ".content-style"); + console.log('handleMousedown called') if (ptrParent !== false) { this.selectStyle(this.getActiveStyleIndex()); } -- cgit v1.2.3 From 0e24b9dc875cefb1010a9e2b507c19b77e4d9811 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 20 Mar 2012 17:37:11 -0700 Subject: Timeline: fix layer and style select problems. --- js/panels/Timeline/Layer.reel/Layer.html | 2 +- js/panels/Timeline/Layer.reel/Layer.js | 1 - 2 files changed, 1 insertion(+), 2 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 79b522ee..c8e31fad 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -301,7 +301,7 @@ "properties" : { "element" : {"#" : "content-style"}, "myContent" : {"#":"content-style"}, - "contentHeight" : 60, + "contentHeight" : 0, "isLabelClickable" : true, "clicker" : {"#" : "clicker-style"}, "isCollapsed" : true, diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 830d179e..9334a0b4 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -714,7 +714,6 @@ var Layer = exports.Layer = Montage.create(Component, { value: function(event) { this.layerData.isActive = true; var ptrParent = nj.queryParentSelector(event.target, ".content-style"); - console.log('handleMousedown called') if (ptrParent !== false) { this.selectStyle(this.getActiveStyleIndex()); } -- cgit v1.2.3 From 3669eea4bde3518ce080048e9f53d2dd111fd8be Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 21 Mar 2012 11:37:48 -0700 Subject: Timeline: Bug fix: style collapsers not staying in synch. Also, removed console.log calls in hintable component. --- js/panels/Timeline/Layer.reel/Layer.js | 3 +++ 1 file changed, 3 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 9334a0b4..fcdbcd22 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -571,6 +571,8 @@ var Layer = exports.Layer = Montage.create(Component, { newEvent = document.createEvent("CustomEvent"); this.isStyleCollapsed = false; + this.layerData.isStyleCollapsed = false; + this.triggerOutgoingBinding(); newEvent.initCustomEvent("layerEvent", false, true); newEvent.layerEventLocale = "styles"; @@ -603,6 +605,7 @@ var Layer = exports.Layer = Montage.create(Component, { newEvent.styleSelection = mySelection; defaultEventManager.dispatchEvent(newEvent); + } }, deleteStyle : { -- cgit v1.2.3 From 2d9cb9ca8f6beb661a3d904b5125afa8243661de Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 21 Mar 2012 15:40:33 -0700 Subject: Timeline: First integration of drag and drop of layers. --- js/panels/Timeline/Layer.reel/Layer.html | 34 +++++++++++++++++++++++++++++--- js/panels/Timeline/Layer.reel/Layer.js | 8 ++++++++ 2 files changed, 39 insertions(+), 3 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 c8e31fad..ef98bdd5 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -22,7 +22,8 @@ "positionCollapser" : {"@" : "positionCollapser"}, "transformCollapser" : {"@" : "transformCollapser"}, "styleCollapser" : {"@" : "styleCollapser"}, - "clickerMain" : {"#" : "clicker-main"} + "clickerMain" : {"#" : "clicker-main"}, + "myLabel" : {"#" : "myLabel"} } }, "dtext1" : { @@ -314,7 +315,34 @@ "oneway" : false } } - } + }, + + "DragDrop": { + "module": "js/panels/Timeline/DragDrop.js", + "name": "DragDropComposer", + "properties": { + "element": {"#": "myLabel"}, + "component": {"@": "owner"} + }, + "listeners": [ + { + "type": "dragStart", + "listener": {"@": "owner"} + }, + { + "type": "dropHover", + "listener": {"@": "owner"} + }, + { + "type": "dropped", + "listener": {"@": "owner"} + }, + { + "type": "dropEnd", + "listener": {"@": "owner"} + } + ] + } } @@ -323,7 +351,7 @@
-
+
Label
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index fcdbcd22..bddfcd3e 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -505,6 +505,9 @@ var Layer = exports.Layer = Montage.create(Component, { // Add mousedown listener to set isActive this.element.addEventListener("mousedown", this, false); this.element.addEventListener("click", this, false); + + // Drag and drop event hanlders + this.element.addEventListener("dropped", this, false); } }, @@ -783,6 +786,11 @@ var Layer = exports.Layer = Montage.create(Component, { this.triggerOutgoingBinding(); } }, + handleDropped : { + value: function(event) { + console.log('wheeee! WWEWWEWWWWEEEEEEEEE') + } + }, /* End: Event handlers */ /* Begin: Logging routines */ -- cgit v1.2.3 From 8ef667315ca6a81bb1369943eaf3643ae2db5037 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 26 Mar 2012 17:04:28 -0700 Subject: Timeline: Drag and Drop of layers. --- js/panels/Timeline/Layer.reel/Layer.html | 32 ++---------- js/panels/Timeline/Layer.reel/Layer.js | 83 +++++++++++++++++++++++++------- 2 files changed, 68 insertions(+), 47 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 ef98bdd5..454c2742 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -23,7 +23,8 @@ "transformCollapser" : {"@" : "transformCollapser"}, "styleCollapser" : {"@" : "styleCollapser"}, "clickerMain" : {"#" : "clicker-main"}, - "myLabel" : {"#" : "myLabel"} + "myLabel" : {"#" : "myLabel"}, + "dragDrop" : {"@" : "DragDrop"} } }, "dtext1" : { @@ -315,34 +316,7 @@ "oneway" : false } } - }, - - "DragDrop": { - "module": "js/panels/Timeline/DragDrop.js", - "name": "DragDropComposer", - "properties": { - "element": {"#": "myLabel"}, - "component": {"@": "owner"} - }, - "listeners": [ - { - "type": "dragStart", - "listener": {"@": "owner"} - }, - { - "type": "dropHover", - "listener": {"@": "owner"} - }, - { - "type": "dropped", - "listener": {"@": "owner"} - }, - { - "type": "dropEnd", - "listener": {"@": "owner"} - } - ] - } + } } diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index bddfcd3e..9cf321b1 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -102,6 +102,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, set:function(value){ this._layerID = value; + this.layerData.layerID = value; } }, @@ -119,7 +120,7 @@ var Layer = exports.Layer = Montage.create(Component, { set:function(value){ if (this._dtextPositionX !== value) { this._dtextPositionX = value; - //this.needsDraw = true; + this.layerData.dtextPositionX = value; } } @@ -138,7 +139,7 @@ var Layer = exports.Layer = Montage.create(Component, { set:function(value){ if (this._dtextPositionY !== value) { this._dtextPositionY = value; - //this.needsDraw = true; + this.layerData.dtextPositionY = value; } } @@ -157,7 +158,7 @@ var Layer = exports.Layer = Montage.create(Component, { set:function(value){ if (this._dtextScaleX !== value) { this._dtextScaleX = value; - //this.needsDraw = true; + this.layerData.dtextScaleX = value; } } @@ -176,7 +177,7 @@ var Layer = exports.Layer = Montage.create(Component, { set:function(value){ if (this._dtextScaleY !== value) { this._dtextScaleY = value; - //this.needsDraw = true; + this.layerData.dtextScaleY = value; } } @@ -195,7 +196,7 @@ var Layer = exports.Layer = Montage.create(Component, { set:function(value){ if (this._dtextSkewX !== value) { this._dtextSkewX = value; - //this.needsDraw = true; + this.layerData.dtextSkewX = value; } } @@ -214,7 +215,7 @@ var Layer = exports.Layer = Montage.create(Component, { set:function(value){ if (this._dtextSkewY !== value) { this._dtextSkewY = value; - //this.needsDraw = true; + this.layerData.dtextSkewY = value; } } @@ -233,7 +234,7 @@ var Layer = exports.Layer = Montage.create(Component, { set:function(value){ if (this._dtextRotate !== value) { this._dtextRotate = value; - //this.needsDraw = true; + this.layerData.dtextRotate = value; } } @@ -278,6 +279,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, set: function(newVal) { this._isActive = newVal; + this.layerData.isActive = newVal; } }, @@ -294,6 +296,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, set:function(value){ this._isAnimated = value; + this.layerData.isAnimated = newVal; } }, _justAdded: { @@ -384,11 +387,15 @@ var Layer = exports.Layer = Montage.create(Component, { set: function(newVal) { if (newVal !== this._bypassAnimation) { this._bypassAnimation = newVal; - this.layerData.bypassAnimation = newVal; - //this.triggerOutgoingBinding(); + this.layerData.bypassAnimation = newVal; } } }, + + // Is this the first draw? + _isFirstDraw : { + value: true + }, _layerData:{ serializable:true, @@ -459,12 +466,6 @@ var Layer = exports.Layer = Montage.create(Component, { } } }, - - // Is this the first draw? - _isFirstDraw : { - value: true - }, - /* END: Models */ /* Begin: Draw cycle */ @@ -507,7 +508,12 @@ var Layer = exports.Layer = Montage.create(Component, { this.element.addEventListener("click", this, false); // Drag and drop event hanlders - this.element.addEventListener("dropped", this, false); + this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false); + this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false); + this.element.addEventListener("dragover", this.handleDragover.bind(this), false); + 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); } }, @@ -545,6 +551,8 @@ var Layer = exports.Layer = Montage.create(Component, { this.titleSelector = this.label.querySelector(".collapsible-label"); this.buttonAddStyle = this.element.querySelector(".button-add"); this.buttonDeleteStyle = this.element.querySelector(".button-delete"); + + } }, @@ -786,9 +794,48 @@ var Layer = exports.Layer = Montage.create(Component, { this.triggerOutgoingBinding(); } }, - handleDropped : { + handleMouseover: { value: function(event) { - console.log('wheeee! WWEWWEWWWWEEEEEEEEE') + this.element.draggable = true; + } + }, + handleMouseout: { + value: function(event) { + this.element.draggable = false; + } + }, + handleDragenter: { + value: function(event) { + } + }, + handleDragleave: { + value: function(event) { + this.element.classList.remove("dragOver"); + } + }, + handleDragstart: { + value: function(event) { + this.parentComponent.parentComponent.dragLayerID = this.layerID; + event.dataTransfer.setData('Text', 'Layer'); + } + }, + handleDragover: { + value: function(event) { + event.preventDefault(); + this.element.classList.add("dragOver"); + event.dataTransfer.dropEffect = "move"; + return false; + } + }, + + handleDrop : { + value: function(event) { + event.stopPropagation(); + this.element.classList.remove("dragOver"); + if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) { + this.parentComponent.parentComponent.dropLayerID = this.layerID; + } + return false; } }, /* End: Event handlers */ -- cgit v1.2.3 From 7845d312396e3329ac9246d4c13e99cb623216d5 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 27 Mar 2012 18:22:10 -0700 Subject: Timeline: Stability fixes for drag-and-drop and page switching. --- js/panels/Timeline/Layer.reel/Layer.js | 3 +++ 1 file changed, 3 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 9cf321b1..c69f28b0 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -417,6 +417,9 @@ var Layer = exports.Layer = Montage.create(Component, { setData:{ value:function(){ + if (typeof(this.layerData) === "undefined") { + return; + } this.layerName = this.layerData.layerName; this.layerID = this.layerData.layerID; this.arrLayerStyles = this.layerData.arrLayerStyles; -- cgit v1.2.3 From 18143071c9e1308d6cb9289477563aea22856c5e Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 30 Mar 2012 12:16:40 -0700 Subject: Timeline: Bug fixes. --- 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 c69f28b0..f1882985 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -385,7 +385,7 @@ var Layer = exports.Layer = Montage.create(Component, { return this._bypassAnimation; }, set: function(newVal) { - if (newVal !== this._bypassAnimation) { + if ((newVal !== this._bypassAnimation) && (typeof(this.layerData) !== "undefined")) { this._bypassAnimation = newVal; this.layerData.bypassAnimation = newVal; } -- cgit v1.2.3 From 6e9c9fd4d715567394038705e7a6ef7935e451d3 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 2 Apr 2012 17:11:30 -0700 Subject: Timeline: Bug fix: IKNINJA-1431, "Adding a new element to the stage with one layer in focus whose name is empty, Ninja creates an empty name layer for the element." --- js/panels/Timeline/Layer.reel/Layer.js | 69 ++++++++++++++------------- js/panels/Timeline/Layer.reel/css/Layer.css | 50 +++++++++++-------- js/panels/Timeline/Layer.reel/scss/Layer.scss | 9 ++++ 3 files changed, 74 insertions(+), 54 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 f1882985..bba113c0 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -67,10 +67,7 @@ var Layer = exports.Layer = Montage.create(Component, { /* Layer models: the name, ID, and selected and animation booleans for the layer */ _layerName:{ - serializable: true, - value:null, - writable:true, - enumerable:true + value: "Default Layer Name" }, layerName:{ @@ -79,20 +76,22 @@ var Layer = exports.Layer = Montage.create(Component, { return this._layerName; }, set:function(newVal){ - if (newVal !== this._layerName) { + console.log('Layer.layerName.set ', newVal); + this._layerEditable.value = newVal; this._layerName = newVal; this.layerData.layerName = newVal; - this.log('layerName setter: ' + newVal) - } + if (typeof(this.dynamicLayerName) !== "undefined") { + this.dynamicLayerName.value = newVal; + } + + console.log('layerName setter: ' + newVal) + } }, _layerID:{ - value:null, - writable:true, - serializable: true, - enumerable:true + value: "Default Layer ID" }, layerID:{ @@ -410,16 +409,25 @@ var Layer = exports.Layer = Montage.create(Component, { set:function(val){ this._layerData = val; if(this._layerData){ - this.setData(); + this.setData(true); } } }, setData:{ - value:function(){ - if (typeof(this.layerData) === "undefined") { + value:function(boolNeedsDraw){ + if (typeof(this._layerData) === "undefined") { + return; + } + + if (typeof(this._layerData.layerName) === "undefined") { return; } + + if (typeof(boolNeedsDraw) === "undefined") { + boolNeedsDraw = false; + } + this.layerName = this.layerData.layerName; this.layerID = this.layerData.layerID; this.arrLayerStyles = this.layerData.arrLayerStyles; @@ -438,7 +446,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.dtextScaleY = this.layerData.dtextScaleY; this.dtextRotate = this.layerData.dtextRotate; this._isFirstDraw = this.layerData._isFirstDraw; - this.needsDraw = true; + this.needsDraw = boolNeedsDraw; } }, @@ -455,7 +463,7 @@ var Layer = exports.Layer = Montage.create(Component, { set: function(newVal) { if (newVal !== this._bindingPoint) { this._bindingPoint = newVal; - this.setData(); + this.setData(true); } } }, @@ -478,23 +486,15 @@ var Layer = exports.Layer = Montage.create(Component, { // Initialize myself this.init(); - var that = this; - // Make it editable! this._layerEditable = Hintable.create(); this._layerEditable.element = this.titleSelector; - this.titleSelector.identifier = "selectorEditable"; - this.titleSelector.addEventListener("click", this, false); - this._layerEditable.addEventListener("blur", function(event) { - that.handleSelectorEditableBlur(event); - }, false); - this._layerEditable.addEventListener("change", function(event) { - that.dynamicLayerName.value = that._layerEditable.value; - that.needsDraw = true; - }, false); + this._layerEditable.addEventListener("blur", this.handleSelectorEditableBlur.bind(this), false); + this._layerEditable.addEventListener("change", this.handleSelectorEditableChange.bind(this), false); + this._layerEditable.editingClass = "editable2"; this._layerEditable.value = this.layerName; - this._layerEditable.needsDraw = true; + //this._layerEditable.needsDraw = true; this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); @@ -510,7 +510,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.element.addEventListener("mousedown", this, false); this.element.addEventListener("click", this, false); - // Drag and drop event hanlders + // Drag and drop event handlers this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false); this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false); this.element.addEventListener("dragover", this.handleDragover.bind(this), false); @@ -712,10 +712,6 @@ var Layer = exports.Layer = Montage.create(Component, { this.deleteStyle(); } }, - handleSelectorEditableClick: { - value: function(event) { - } - }, handleSelectorEditableBlur : { value: function(event) { this.titleSelector.scrollLeft = 0; @@ -723,7 +719,12 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleSelectorEditableChange: { value: function(event) { - this.layerName = this.dynamicLayerName.value; + var newVal = "ONTD"; + if (this._layerEditable.value !== "") { + newVal = this._layerEditable.value; + } + this.dynamicLayerName.value = newVal; + this.layerName = newVal; this.needsDraw = true; } }, diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css index 8e36c2db..1aae8d67 100644 --- a/js/panels/Timeline/Layer.reel/css/Layer.css +++ b/js/panels/Timeline/Layer.reel/css/Layer.css @@ -139,7 +139,12 @@ font-size: 11px; } -/* line 130, ../scss/Layer.scss */ +/* line 132, ../scss/Layer.scss */ +.label-layer .collapsible-label br { + display: none; +} + +/* line 136, ../scss/Layer.scss */ .collapsible-clicker { position: absolute; width: 10px; @@ -152,23 +157,23 @@ background-repeat: no-repeat; } -/* line 141, ../scss/Layer.scss */ +/* line 147, ../scss/Layer.scss */ .collapsible-clicker.collapsible-collapsed { background-image: url(../images/icon-collapsed.png); } -/* line 144, ../scss/Layer.scss */ +/* line 150, ../scss/Layer.scss */ .collapsible-content .collapsible-clicker { left: 12px; } -/* line 147, ../scss/Layer.scss */ +/* line 153, ../scss/Layer.scss */ .container-layer .collapsible-content.collapsible-collapsed { height: 0px; overflow: hidden; } -/* line 153, ../scss/Layer.scss */ +/* line 159, ../scss/Layer.scss */ .label-layer .cssbutton, .label-style .cssbutton { width: 14px; @@ -178,21 +183,21 @@ background-repeat: no-repeat; } -/* line 160, ../scss/Layer.scss */ +/* line 166, ../scss/Layer.scss */ .label-layer .button-lock { background-image: url(../images/icon-lock.png); top: 3px; right: 27px; } -/* line 165, ../scss/Layer.scss */ +/* line 171, ../scss/Layer.scss */ .label-layer .button-visible { background-image: url(../images/icon-eye.png); top: 3px; right: 7px; } -/* line 170, ../scss/Layer.scss */ +/* line 176, ../scss/Layer.scss */ .label-style .button-add { background-image: url(../images/icon-plus.png); width: 15px; @@ -201,7 +206,7 @@ right: 11px; } -/* line 177, ../scss/Layer.scss */ +/* line 183, ../scss/Layer.scss */ .label-style .button-delete { background-image: url(../images/icon-minus.png); width: 15px; @@ -210,17 +215,17 @@ right: 31px; } -/* line 184, ../scss/Layer.scss */ +/* line 190, ../scss/Layer.scss */ .collapsible-content .layout-table { width: 99.9%; } -/* line 187, ../scss/Layer.scss */ +/* line 193, ../scss/Layer.scss */ .content-layer .collapsible-content { padding-left: 30px; } -/* line 190, ../scss/Layer.scss */ +/* line 196, ../scss/Layer.scss */ .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { width: 40%; height: 20px; @@ -229,24 +234,24 @@ text-align: left; } -/* line 197, ../scss/Layer.scss */ +/* line 203, ../scss/Layer.scss */ .collapsible-content .layout-table:first-child { border-top: 1px solid #505050; } -/* line 201, ../scss/Layer.scss */ +/* line 207, ../scss/Layer.scss */ .collapsible-content .hottextunit { width: auto; } -/* line 204, ../scss/Layer.scss */ +/* line 210, ../scss/Layer.scss */ .collapsible-transition { -webkit-transition-property: height; -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease-in; } -/* line 212, ../scss/Layer.scss */ +/* line 218, ../scss/Layer.scss */ .editable2 { height: 20px; background-color: #242424 !important; @@ -258,24 +263,29 @@ text-overflow: clip; } -/* line 223, ../scss/Layer.scss */ +/* line 228, ../scss/Layer.scss */ +.editable2 br { + display: inline; +} + +/* line 232, ../scss/Layer.scss */ .label-style .disabled { cursor: default; } /* styles elements */ -/* line 228, ../scss/Layer.scss */ +/* line 237, ../scss/Layer.scss */ .content-style .item-template { display: none; } -/* line 231, ../scss/Layer.scss */ +/* line 240, ../scss/Layer.scss */ .content-style .layout-row.selected .layout-cell { background-color: #b2b2b2; color: #242424; } -/* line 235, ../scss/Layer.scss */ +/* line 244, ../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 12b6e599..80b88d4f 100644 --- a/js/panels/Timeline/Layer.reel/scss/Layer.scss +++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss @@ -127,6 +127,12 @@ font-size: 11px; } + + +.label-layer .collapsible-label br { + display: none; +} + .collapsible-clicker { position: absolute; width: 10px; @@ -219,6 +225,9 @@ -webkit-user-select: text; text-overflow: clip; } +.editable2 br { + display: inline; +} .label-style .disabled { cursor: default; -- cgit v1.2.3 From 45ecc6b07562d195e452d0831daffdaf43973d0f Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 3 Apr 2012 08:15:36 -0700 Subject: Timeline: disable console logs in layer component. --- js/panels/Timeline/Layer.reel/Layer.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 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 bba113c0..4b7fe24c 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -76,18 +76,13 @@ var Layer = exports.Layer = Montage.create(Component, { return this._layerName; }, set:function(newVal){ - console.log('Layer.layerName.set ', newVal); - this._layerEditable.value = newVal; - this._layerName = newVal; - this.layerData.layerName = newVal; - if (typeof(this.dynamicLayerName) !== "undefined") { - this.dynamicLayerName.value = newVal; - } - - console.log('layerName setter: ' + newVal) - - + this._layerEditable.value = newVal; + this._layerName = newVal; + this.layerData.layerName = newVal; + if (typeof(this.dynamicLayerName) !== "undefined") { + this.dynamicLayerName.value = newVal; + } } }, _layerID:{ -- cgit v1.2.3 From 59de13ed9f88497b07b4fdcf4d2c9d5c2bf05365 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Wed, 4 Apr 2012 10:54:29 -0700 Subject: Timeline: Saving layername Signed-off-by: Kruti Shah --- js/panels/Timeline/Layer.reel/Layer.js | 1 + 1 file changed, 1 insertion(+) (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 c69f28b0..300462ee 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -490,6 +490,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, false); this._layerEditable.addEventListener("change", function(event) { that.dynamicLayerName.value = that._layerEditable.value; + this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = that.dynamicLayerName.value that.needsDraw = true; }, false); this._layerEditable.editingClass = "editable2"; -- cgit v1.2.3 From 7e6db5a574e63c5c21b15381c04736b6177cf0dc Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 4 Apr 2012 11:02:00 -0700 Subject: define "that" var correctly Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.js | 4 ++-- 1 file changed, 2 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 679b88f3..5a393039 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -480,7 +480,7 @@ var Layer = exports.Layer = Montage.create(Component, { // Initialize myself this.init(); - + var that = this; // Make it editable! this._layerEditable = Hintable.create(); this._layerEditable.element = this.titleSelector; @@ -491,7 +491,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, false); this._layerEditable.addEventListener("change", function(event) { that.dynamicLayerName.value = that._layerEditable.value; - this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = that.dynamicLayerName.value + this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = that.dynamicLayerName.value; that.needsDraw = true; }, false); this._layerEditable.editingClass = "editable2"; -- cgit v1.2.3 From 61404b1965ffe7011ec86953f853f0954ccc308d Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 4 Apr 2012 11:11:09 -0700 Subject: Changing layer name should put dirty flag on doc Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.js | 1 + 1 file changed, 1 insertion(+) (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 5a393039..2f0310a9 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -493,6 +493,7 @@ var Layer = exports.Layer = Montage.create(Component, { that.dynamicLayerName.value = that._layerEditable.value; this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = that.dynamicLayerName.value; that.needsDraw = true; + this.application.ninja.documentController.activeDocument.needsSave = true; }, false); this._layerEditable.editingClass = "editable2"; this._layerEditable.value = this.layerName; -- cgit v1.2.3 From 969137ba4520103348a496ac9b99063dc4ec8f96 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 5 Apr 2012 10:38:57 -0700 Subject: Timeline: Bug fix for IKNINJA-1086, "CSS Style Suggestion stops working" --- js/panels/Timeline/Layer.reel/css/Layer.css | 47 ++++++++++++++------------- js/panels/Timeline/Layer.reel/scss/Layer.scss | 3 +- 2 files changed, 26 insertions(+), 24 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 1aae8d67..2ea1e0f6 100644 --- a/js/panels/Timeline/Layer.reel/css/Layer.css +++ b/js/panels/Timeline/Layer.reel/css/Layer.css @@ -139,12 +139,13 @@ font-size: 11px; } -/* line 132, ../scss/Layer.scss */ -.label-layer .collapsible-label br { +/* line 133, ../scss/Layer.scss */ +.label-layer .collapsible-label br, +.content-style .editable br { display: none; } -/* line 136, ../scss/Layer.scss */ +/* line 137, ../scss/Layer.scss */ .collapsible-clicker { position: absolute; width: 10px; @@ -157,23 +158,23 @@ background-repeat: no-repeat; } -/* line 147, ../scss/Layer.scss */ +/* line 148, ../scss/Layer.scss */ .collapsible-clicker.collapsible-collapsed { background-image: url(../images/icon-collapsed.png); } -/* line 150, ../scss/Layer.scss */ +/* line 151, ../scss/Layer.scss */ .collapsible-content .collapsible-clicker { left: 12px; } -/* line 153, ../scss/Layer.scss */ +/* line 154, ../scss/Layer.scss */ .container-layer .collapsible-content.collapsible-collapsed { height: 0px; overflow: hidden; } -/* line 159, ../scss/Layer.scss */ +/* line 160, ../scss/Layer.scss */ .label-layer .cssbutton, .label-style .cssbutton { width: 14px; @@ -183,21 +184,21 @@ background-repeat: no-repeat; } -/* line 166, ../scss/Layer.scss */ +/* line 167, ../scss/Layer.scss */ .label-layer .button-lock { background-image: url(../images/icon-lock.png); top: 3px; right: 27px; } -/* line 171, ../scss/Layer.scss */ +/* line 172, ../scss/Layer.scss */ .label-layer .button-visible { background-image: url(../images/icon-eye.png); top: 3px; right: 7px; } -/* line 176, ../scss/Layer.scss */ +/* line 177, ../scss/Layer.scss */ .label-style .button-add { background-image: url(../images/icon-plus.png); width: 15px; @@ -206,7 +207,7 @@ right: 11px; } -/* line 183, ../scss/Layer.scss */ +/* line 184, ../scss/Layer.scss */ .label-style .button-delete { background-image: url(../images/icon-minus.png); width: 15px; @@ -215,17 +216,17 @@ right: 31px; } -/* line 190, ../scss/Layer.scss */ +/* line 191, ../scss/Layer.scss */ .collapsible-content .layout-table { width: 99.9%; } -/* line 193, ../scss/Layer.scss */ +/* line 194, ../scss/Layer.scss */ .content-layer .collapsible-content { padding-left: 30px; } -/* line 196, ../scss/Layer.scss */ +/* line 197, ../scss/Layer.scss */ .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { width: 40%; height: 20px; @@ -234,24 +235,24 @@ text-align: left; } -/* line 203, ../scss/Layer.scss */ +/* line 204, ../scss/Layer.scss */ .collapsible-content .layout-table:first-child { border-top: 1px solid #505050; } -/* line 207, ../scss/Layer.scss */ +/* line 208, ../scss/Layer.scss */ .collapsible-content .hottextunit { width: auto; } -/* line 210, ../scss/Layer.scss */ +/* line 211, ../scss/Layer.scss */ .collapsible-transition { -webkit-transition-property: height; -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease-in; } -/* line 218, ../scss/Layer.scss */ +/* line 219, ../scss/Layer.scss */ .editable2 { height: 20px; background-color: #242424 !important; @@ -263,29 +264,29 @@ text-overflow: clip; } -/* line 228, ../scss/Layer.scss */ +/* line 229, ../scss/Layer.scss */ .editable2 br { display: inline; } -/* line 232, ../scss/Layer.scss */ +/* line 233, ../scss/Layer.scss */ .label-style .disabled { cursor: default; } /* styles elements */ -/* line 237, ../scss/Layer.scss */ +/* line 238, ../scss/Layer.scss */ .content-style .item-template { display: none; } -/* line 240, ../scss/Layer.scss */ +/* line 241, ../scss/Layer.scss */ .content-style .layout-row.selected .layout-cell { background-color: #b2b2b2; color: #242424; } -/* line 244, ../scss/Layer.scss */ +/* line 245, ../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 80b88d4f..df3f93d5 100644 --- a/js/panels/Timeline/Layer.reel/scss/Layer.scss +++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss @@ -129,7 +129,8 @@ -.label-layer .collapsible-label br { +.label-layer .collapsible-label br, +.content-style .editable br { display: none; } -- cgit v1.2.3 From d07b97043b69335136a5946ef161d721c95d1ce9 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 5 Apr 2012 11:22:42 -0700 Subject: Timeline: Bug fix: IKNINJA-1435 --- js/panels/Timeline/Layer.reel/Layer.html | 46 +++++++++++++-------------- js/panels/Timeline/Layer.reel/Layer.js | 4 +-- js/panels/Timeline/Layer.reel/css/Layer.css | 43 +++++++++++++++++++------ js/panels/Timeline/Layer.reel/scss/Layer.scss | 24 ++++++++++++++ 4 files changed, 83 insertions(+), 34 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 454c2742..eb9ff3a9 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -337,14 +337,14 @@
-
-
-
X
-
+
+
+
X
+
-
-
Y
-
+
+
Y
+
@@ -353,26 +353,26 @@
-
-
-
Scale X
-
+
+
+
Scale X
+
-
-
Scale Y
-
+
+
Scale Y
+
-
-
Skew X
-
+
+
Skew X
+
-
-
Skew Y
-
+
+
Skew Y
+
-
-
Rotation
-
+
+
Rotation
+
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 2f0310a9..b713a197 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -514,8 +514,8 @@ var Layer = exports.Layer = Montage.create(Component, { this.element.addEventListener("click", this, false); // Drag and drop event handlers - this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false); - this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false); + this.myLabel.addEventListener("mouseover", this.handleMouseover.bind(this), false); + this.myLabel.addEventListener("mouseout", this.handleMouseout.bind(this), false); this.element.addEventListener("dragover", this.handleDragover.bind(this), false); this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css index 2ea1e0f6..50e664c4 100644 --- a/js/panels/Timeline/Layer.reel/css/Layer.css +++ b/js/panels/Timeline/Layer.reel/css/Layer.css @@ -227,32 +227,57 @@ } /* line 197, ../scss/Layer.scss */ +.collapsible-content .collapsible-content .layout-table .layout-row { + height: 20px; + overflow: hidden; +} + +/* line 201, ../scss/Layer.scss */ .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { width: 40%; height: 20px; border-bottom: 1px solid #505050; line-height: 20px; text-align: left; + overflow: hidden; +} + +/* line 210, ../scss/Layer.scss */ +.collapsible-content .collapsible-content .container-row { + border-bottom: 1px solid #505050; + height: 20px; +} + +/* line 216, ../scss/Layer.scss */ +.collapsible-content .collapsible-content .cell-property, +.collapsible-content .collapsible-content .cell-value { + width: 45%; + float: left; + height: 20px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 18px; } -/* line 204, ../scss/Layer.scss */ +/* line 228, ../scss/Layer.scss */ .collapsible-content .layout-table:first-child { border-top: 1px solid #505050; } -/* line 208, ../scss/Layer.scss */ +/* line 232, ../scss/Layer.scss */ .collapsible-content .hottextunit { width: auto; } -/* line 211, ../scss/Layer.scss */ +/* line 235, ../scss/Layer.scss */ .collapsible-transition { -webkit-transition-property: height; -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease-in; } -/* line 219, ../scss/Layer.scss */ +/* line 243, ../scss/Layer.scss */ .editable2 { height: 20px; background-color: #242424 !important; @@ -264,29 +289,29 @@ text-overflow: clip; } -/* line 229, ../scss/Layer.scss */ +/* line 253, ../scss/Layer.scss */ .editable2 br { display: inline; } -/* line 233, ../scss/Layer.scss */ +/* line 257, ../scss/Layer.scss */ .label-style .disabled { cursor: default; } /* styles elements */ -/* line 238, ../scss/Layer.scss */ +/* line 262, ../scss/Layer.scss */ .content-style .item-template { display: none; } -/* line 241, ../scss/Layer.scss */ +/* line 265, ../scss/Layer.scss */ .content-style .layout-row.selected .layout-cell { background-color: #b2b2b2; color: #242424; } -/* line 245, ../scss/Layer.scss */ +/* line 269, ../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 df3f93d5..391bae38 100644 --- a/js/panels/Timeline/Layer.reel/scss/Layer.scss +++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss @@ -194,13 +194,37 @@ .content-layer .collapsible-content { padding-left: 30px; } +.collapsible-content .collapsible-content .layout-table .layout-row { + height: 20px; + overflow: hidden; +} .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { width: 40%; height: 20px; border-bottom: 1px solid $color-menu-divider; line-height: 20px; text-align: left; + overflow: hidden; +} + +.collapsible-content .collapsible-content .container-row { + border-bottom: 1px solid $color-menu-divider; + height: 20px; } + +.collapsible-content .collapsible-content .cell-property, +.collapsible-content .collapsible-content .cell-value { + width: 45%; + float: left; + height: 20px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 18px; +} + + + .collapsible-content .layout-table:first-child { border-top: 1px solid $color-menu-divider; } -- cgit v1.2.3 From a36266b640207b3a95aaa145def263a469ecee15 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 5 Apr 2012 11:47:21 -0700 Subject: Timeline: Bit of code cleanup in Layer.js --- js/panels/Timeline/Layer.reel/Layer.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 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 b713a197..b8ab1539 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -480,31 +480,23 @@ var Layer = exports.Layer = Montage.create(Component, { // Initialize myself this.init(); - var that = this; + // Make it editable! this._layerEditable = Hintable.create(); this._layerEditable.element = this.titleSelector; this.titleSelector.identifier = "selectorEditable"; this.titleSelector.addEventListener("click", this, false); - this._layerEditable.addEventListener("blur", function(event) { - that.handleSelectorEditableBlur(event); - }, false); - this._layerEditable.addEventListener("change", function(event) { - that.dynamicLayerName.value = that._layerEditable.value; - this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = that.dynamicLayerName.value; - that.needsDraw = true; - this.application.ninja.documentController.activeDocument.needsSave = true; - }, false); + this._layerEditable.addEventListener("blur", this.handleSelectorEditableBlur.bind(this), false); + this._layerEditable.addEventListener("change", this.handleLayerNameChange.bind(this), false); this._layerEditable.editingClass = "editable2"; this._layerEditable.value = this.layerName; - //this._layerEditable.needsDraw = true; - + + // 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 this.buttonAddStyle.addEventListener("click", this.handleAddStyleClick.bind(this), false); this.buttonDeleteStyle.addEventListener("click", this.handleDeleteStyleClick.bind(this), false); @@ -705,6 +697,14 @@ var Layer = exports.Layer = Montage.create(Component, { /* End: Controllers */ /* Begin: Event handlers */ + handleLayerNameChange: { + 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; + } + }, handleAddStyleClick: { value: function(event) { this.addStyle(); -- cgit v1.2.3 From a8ea8f377919c7f1a6af69311f55fd57727d9058 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 5 Apr 2012 13:40:14 -0700 Subject: Timeline: Improved drag-and-drop performance. Also fix problems with expand/collapse getting out of synch during drag-and-drop. --- js/panels/Timeline/Layer.reel/Layer.js | 28 ++++++++++------------------ 1 file changed, 10 insertions(+), 18 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 b8ab1539..3bcc1401 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -311,11 +311,9 @@ var Layer = exports.Layer = Montage.create(Component, { return this._isMainCollapsed; }, set: function(newVal) { - if (newVal !== this._isMainCollapsed) { - this.log('layer.js: isMainCollapsed: ' + newVal); - this._isMainCollapsed = newVal; - this.layerData.isMainCollapsed = newVal; - } + this._isMainCollapsed = newVal; + this.layerData.isMainCollapsed = newVal; + } }, @@ -329,10 +327,8 @@ var Layer = exports.Layer = Montage.create(Component, { return this._isTransformCollapsed; }, set: function(newVal) { - if (newVal !== this._isTransformCollapsed) { - this._isTransformCollapsed = newVal; - this.layerData.isTransformCollapsed = newVal; - } + this._isTransformCollapsed = newVal; + this.layerData.isTransformCollapsed = newVal; } }, @@ -346,10 +342,8 @@ var Layer = exports.Layer = Montage.create(Component, { return this._isPositionCollapsed; }, set: function(newVal) { - if (newVal !== this._isPositionCollapsed) { - this._isPositionCollapsed = newVal; - this.layerData.isPositionCollapsed = newVal; - } + this._isPositionCollapsed = newVal; + this.layerData.isPositionCollapsed = newVal; } }, @@ -363,10 +357,8 @@ var Layer = exports.Layer = Montage.create(Component, { return this._isStyleCollapsed; }, set: function(newVal) { - if (newVal !== this._isStyleCollapsed) { - this._isStyleCollapsed = newVal; - this.layerData.isStyleCollapsed = newVal; - } + this._isStyleCollapsed = newVal; + this.layerData.isStyleCollapsed = newVal; } }, _bypassAnimation : { @@ -379,7 +371,7 @@ var Layer = exports.Layer = Montage.create(Component, { return this._bypassAnimation; }, set: function(newVal) { - if ((newVal !== this._bypassAnimation) && (typeof(this.layerData) !== "undefined")) { + if (typeof(this.layerData) !== "undefined") { this._bypassAnimation = newVal; this.layerData.bypassAnimation = newVal; } -- cgit v1.2.3 From d343c7b3f482c17176cca3ddb6e7f8753169ad48 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 9 Apr 2012 15:15:59 -0700 Subject: Timeline: Bug fix, IKNINJA 1467, "Timeline: Changing layer names should not require hitting "Return" key to commit the change" --- js/panels/Timeline/Layer.reel/Layer.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 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 3bcc1401..f9edfca6 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -710,13 +710,14 @@ var Layer = exports.Layer = Montage.create(Component, { handleSelectorEditableBlur : { value: function(event) { this.titleSelector.scrollLeft = 0; + this.handleSelectorEditableChange(event); } }, handleSelectorEditableChange: { value: function(event) { - var newVal = "ONTD"; - if (this._layerEditable.value !== "") { - newVal = this._layerEditable.value; + var newVal = this._layerEditable.enteredValue; + if (this._layerEditable.enteredValue.length === 0) { + newVal = this._layerEditable._preEditValue; } this.dynamicLayerName.value = newVal; this.layerName = newVal; -- cgit v1.2.3 From 4c492e2f9d01a699aba8ccdd1a2b04238749ea3c Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 10 Apr 2012 14:49:20 -0700 Subject: Timeline: New Features: Tag name now present in each layer. Configuration dropdown in Master Layer; Show Only Animated Layers toggle. --- js/panels/Timeline/Layer.reel/Layer.html | 16 ++++++ js/panels/Timeline/Layer.reel/Layer.js | 42 ++++++++++++++- js/panels/Timeline/Layer.reel/css/Layer.css | 73 +++++++++++++++------------ js/panels/Timeline/Layer.reel/scss/Layer.scss | 16 ++++-- 4 files changed, 109 insertions(+), 38 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 eb9ff3a9..9a9623b8 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -17,6 +17,7 @@ "element": {"#": "layer"}, "styleRepetition" : {"@":"repetition1"}, "dynamicLayerName" : {"@":"dtext1"}, + "dynamicLayerTag" : {"@": "dtext2"}, "slotStyle" : {"@":"slot1"}, "mainCollapser" : {"@" : "mainCollapser"}, "positionCollapser" : {"