From 266b7a39438428077b368d60a1e3833d38fe5f13 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Mon, 2 Jul 2012 15:18:17 -0700
Subject: Timeline: Bug fix IKNINJA-1792, Cut pasting multiple selected objects
throws error on console.
---
.../Timeline/TimelinePanel.reel/TimelinePanel.js | 143 +++++++++++++--------
1 file changed, 88 insertions(+), 55 deletions(-)
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 7deaf0d1..ba745c82 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -239,6 +239,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
+ _lastInsertionIndex: {
+ value: false
+ },
+ lastInsertionIndex: {
+ get: function() {
+ return this._lastInsertionIndex;
+ },
+ set: function(newVal) {
+ this._lastInsertionIndex = newVal;
+ }
+ },
+
_areTracksScrolling: {
value: false
},
@@ -1504,65 +1516,59 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
}
},
- createstageElement:{
- value:function (object) {
- var stageElementName = "",
- thingToPush = this.createLayerTemplate(),
- myIndex = 0,
- i = 0,
- arrLayersLength = this.arrLayers.length;
- // Make up a layer name.
- this.currentLayerNumber = this.currentLayerNumber + 1;
-// stageElementName = "Layer " + this.currentLayerNumber;
- stageElementName=" ";
-
- // Possibly currentLayerNumber doesn't correctly reflect the
- // number of layers. Check that.
- // Commented out to fix WebGL rendering bug
- /*for(k = 0; k < arrLayersLength; k++){
- if(this.arrLayers[k].layerData.layerName === stageElementName){
- this.currentLayerNumber = this.currentLayerNumber + 1;
- stageElementName = "Layer " + this.currentLayerNumber;
- break;
- }
- }*/
+
+ createStageElementsAt: {
+ value:function (isPaste, arrElements) {
+
+ var i = 0,
+ j = 0,
+ arrElementsLength = arrElements.length,
+ arrNewLayers = [],
+ arrNewLayersLength = 0,
+ stageElementName = "",
+ targetIndex = 0;
+ if (this.lastInsertionIndex !== false) {
+ targetIndex = this.lastInsertionIndex;
+ this.lastInsertionIndex = false;
+ }
+
// We will no longer have multiple things selected, so wipe that info out
// if it isn't already gone.
this.currentLayersSelected = false;
-
- // thingToPush is the template we just got. Now fill it in.
- thingToPush.layerData.layerName = stageElementName;
- thingToPush.layerData.layerTag = "<" + object.nodeName.toLowerCase() + ">";
- thingToPush.layerData.layerID = this.currentLayerNumber;
- thingToPush.parentElement = this.currentDocument.model.domContainer;
- thingToPush.layerData.isSelected = true;
- thingToPush.layerData._isFirstDraw = true;
- thingToPush.layerData.created = true;
- thingToPush.layerData.stageElement = object;
- thingToPush.layerData.isLock = false;
- thingToPush.layerData.isHidden = false;
+ for (i = arrElementsLength-1; i >= 0; i--) {
+ var thingToPush = this.createLayerTemplate();
+
+ // Make up a layer name.
+ this.currentLayerNumber = this.currentLayerNumber + 1;
+ stageElementName="";
+
+ // thingToPush is the template we just got. Now fill it in.
+ thingToPush.layerData.layerName = stageElementName;
+ thingToPush.layerData.layerTag = "<" + arrElements[i].nodeName.toLowerCase() + ">";
+ thingToPush.layerData.layerID = this.currentLayerNumber;
+ thingToPush.parentElement = this.currentDocument.model.domContainer;
+ thingToPush.layerData.isSelected = true;
+ thingToPush.layerData._isFirstDraw = true;
+ thingToPush.layerData.created = true;
+ thingToPush.layerData.stageElement = arrElements[i];
+ thingToPush.layerData.isLock = false;
+ thingToPush.layerData.isHidden = false;
+ thingToPush.layerData.created = !isPaste;
+ thingToPush.created = !isPaste;
+
+ if (this.checkable_animated.classList.contains("checked")) {
+ thingToPush.layerData.isVisible = false;
+ }
+ //arrNewLayers.push(thingToPush);
+ this.arrLayers.splice(targetIndex, 0, thingToPush);
+ }
+ //console.log(arrNewLayers);
+ //console.log(thingToPush);
+
+ //this.arrLayers.splice(targetIndex, 0, arrNewLayers);
- if (this.checkable_animated.classList.contains("checked")) {
- thingToPush.layerData.isVisible = false;
- }
-
- // Determine where the new array should be inserted in arrLayers.
- // Ordinarily we could use this.getInsertionIndex BUT the new element
- // insertion and selection has already fired, so getInsertionIndex will return
- // incorrect info. So we need to look at the DOM.
- var childrenLength = this.application.ninja.currentDocument.model.domContainer.children.length,
- newIndex = childrenLength -1;
- for (i = 0; i < childrenLength; i++) {
- var currTest = this.application.ninja.currentDocument.model.domContainer.children[i];
- if (object == currTest) {
- myIndex = newIndex - i;
- }
- }
-
- this.arrLayers.splice(myIndex, 0, thingToPush);
- this.selectLayers([myIndex]);
}
},
@@ -1647,8 +1653,32 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
},
handleElementAdded:{
- value:function() {
- this.createstageElement(this.application.ninja.selectedElements[0]);
+ value:function(event) {
+ var i = 0,
+ targetIndex = 0;
+ // One or more elements have been added to the stage.
+ // We need to add them to the timeline.
+ // But where?
+ // If there are no layers, we can just leave targetIndex at 0.
+ if (this.arrLayers.length !== 0) {
+ // If nothing is selected, we can leave
+ var firstInsertedElement;
+ if (typeof(event.detail.length) === "undefined") {
+ firstInsertedElement = event.detail;
+ } else {
+ firstInsertedElement = event.detail[0];
+ }
+
+
+ }
+
+ if (typeof(event.detail.length) === "undefined") {
+ // This is a standard element creation event.
+ this.createStageElementsAt(false, [event.detail]);
+ } else {
+ // This is a paste action, because event.detail has more than one item in it.
+ this.createStageElementsAt(true, event.detail);
+ }
}
},
@@ -1750,9 +1780,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
arrLayersLength = this.arrLayers.length,
returnVal = arrLayersLength -1;
if (returnVal === -1) {
+ this.lastInsertionIndex = 0;
return false;
}
if (this.currentLayersSelected === false) {
+ this.lastInsertionIndex = 0;
return false;
}
@@ -1761,6 +1793,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
returnVal = i;
}
}
+ this.lastInsertionIndex = returnVal;
return returnVal;
}
},
--
cgit v1.2.3
From a7570091c3b02ae22d2a1c1410747022a1dffd46 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Mon, 2 Jul 2012 17:00:20 -0700
Subject: Timeline: Bug fix IKNINJA-1792, Cut pasting multiple selected objects
throws error on console.
---
.../Timeline/TimelinePanel.reel/TimelinePanel.js | 129 ++++++++++++---------
1 file changed, 74 insertions(+), 55 deletions(-)
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 7deaf0d1..1df37636 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -239,6 +239,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
+ _lastInsertionIndex: {
+ value: false
+ },
+ lastInsertionIndex: {
+ get: function() {
+ return this._lastInsertionIndex;
+ },
+ set: function(newVal) {
+ this._lastInsertionIndex = newVal;
+ }
+ },
+
_areTracksScrolling: {
value: false
},
@@ -1504,65 +1516,59 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
}
},
- createstageElement:{
- value:function (object) {
- var stageElementName = "",
- thingToPush = this.createLayerTemplate(),
- myIndex = 0,
- i = 0,
- arrLayersLength = this.arrLayers.length;
- // Make up a layer name.
- this.currentLayerNumber = this.currentLayerNumber + 1;
-// stageElementName = "Layer " + this.currentLayerNumber;
- stageElementName=" ";
-
- // Possibly currentLayerNumber doesn't correctly reflect the
- // number of layers. Check that.
- // Commented out to fix WebGL rendering bug
- /*for(k = 0; k < arrLayersLength; k++){
- if(this.arrLayers[k].layerData.layerName === stageElementName){
- this.currentLayerNumber = this.currentLayerNumber + 1;
- stageElementName = "Layer " + this.currentLayerNumber;
- break;
- }
- }*/
+
+ createStageElementsAt: {
+ value:function (isPaste, arrElements) {
+
+ var i = 0,
+ j = 0,
+ arrElementsLength = arrElements.length,
+ arrNewLayers = [],
+ arrNewLayersLength = 0,
+ stageElementName = "",
+ targetIndex = 0;
+ if (this.lastInsertionIndex !== false) {
+ targetIndex = this.lastInsertionIndex;
+ this.lastInsertionIndex = false;
+ }
+
// We will no longer have multiple things selected, so wipe that info out
// if it isn't already gone.
this.currentLayersSelected = false;
-
- // thingToPush is the template we just got. Now fill it in.
- thingToPush.layerData.layerName = stageElementName;
- thingToPush.layerData.layerTag = "<" + object.nodeName.toLowerCase() + ">";
- thingToPush.layerData.layerID = this.currentLayerNumber;
- thingToPush.parentElement = this.currentDocument.model.domContainer;
- thingToPush.layerData.isSelected = true;
- thingToPush.layerData._isFirstDraw = true;
- thingToPush.layerData.created = true;
- thingToPush.layerData.stageElement = object;
- thingToPush.layerData.isLock = false;
- thingToPush.layerData.isHidden = false;
+ for (i = arrElementsLength-1; i >= 0; i--) {
+ var thingToPush = this.createLayerTemplate();
+
+ // Make up a layer name.
+ this.currentLayerNumber = this.currentLayerNumber + 1;
+ stageElementName="";
+
+ // thingToPush is the template we just got. Now fill it in.
+ thingToPush.layerData.layerName = stageElementName;
+ thingToPush.layerData.layerTag = "<" + arrElements[i].nodeName.toLowerCase() + ">";
+ thingToPush.layerData.layerID = this.currentLayerNumber;
+ thingToPush.parentElement = this.currentDocument.model.domContainer;
+ thingToPush.layerData.isSelected = true;
+ thingToPush.layerData._isFirstDraw = true;
+ thingToPush.layerData.created = true;
+ thingToPush.layerData.stageElement = arrElements[i];
+ thingToPush.layerData.isLock = false;
+ thingToPush.layerData.isHidden = false;
+ thingToPush.layerData.created = !isPaste;
+ thingToPush.created = !isPaste;
+
+ if (this.checkable_animated.classList.contains("checked")) {
+ thingToPush.layerData.isVisible = false;
+ }
+ //arrNewLayers.push(thingToPush);
+ this.arrLayers.splice(targetIndex, 0, thingToPush);
+ }
+ //console.log(arrNewLayers);
+ //console.log(thingToPush);
+
+ //this.arrLayers.splice(targetIndex, 0, arrNewLayers);
- if (this.checkable_animated.classList.contains("checked")) {
- thingToPush.layerData.isVisible = false;
- }
-
- // Determine where the new array should be inserted in arrLayers.
- // Ordinarily we could use this.getInsertionIndex BUT the new element
- // insertion and selection has already fired, so getInsertionIndex will return
- // incorrect info. So we need to look at the DOM.
- var childrenLength = this.application.ninja.currentDocument.model.domContainer.children.length,
- newIndex = childrenLength -1;
- for (i = 0; i < childrenLength; i++) {
- var currTest = this.application.ninja.currentDocument.model.domContainer.children[i];
- if (object == currTest) {
- myIndex = newIndex - i;
- }
- }
-
- this.arrLayers.splice(myIndex, 0, thingToPush);
- this.selectLayers([myIndex]);
}
},
@@ -1647,8 +1653,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
},
handleElementAdded:{
- value:function() {
- this.createstageElement(this.application.ninja.selectedElements[0]);
+ value:function(event) {
+ var i = 0,
+ targetIndex = 0;
+ // One or more elements have been added to the stage.
+ // We need to add them to the timeline.
+ if (typeof(event.detail.length) === "undefined") {
+ // This is a standard element creation event.
+ this.createStageElementsAt(false, [event.detail]);
+ } else {
+ // This is a paste action, because event.detail has more than one item in it.
+ this.createStageElementsAt(true, event.detail);
+ }
}
},
@@ -1750,9 +1766,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
arrLayersLength = this.arrLayers.length,
returnVal = arrLayersLength -1;
if (returnVal === -1) {
+ this.lastInsertionIndex = 0;
return false;
}
if (this.currentLayersSelected === false) {
+ this.lastInsertionIndex = 0;
return false;
}
@@ -1761,6 +1779,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
returnVal = i;
}
}
+ this.lastInsertionIndex = returnVal;
return returnVal;
}
},
--
cgit v1.2.3
From 040a99e4c20e53a4ed3841357ef5f28d78f3f8a2 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Tue, 3 Jul 2012 11:04:32 -0700
Subject: Timeline: Code refactor for Layer.js
---
js/panels/Timeline/Layer.reel/Layer.js | 2709 ++++++++++++++++----------------
1 file changed, 1338 insertions(+), 1371 deletions(-)
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 4dd9e88a..f7b66a39 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -1,1372 +1,1339 @@
-/*
- This file contains proprietary software owned by Motorola Mobility, Inc.
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
- (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
- */
-
-var Montage = require("montage/core/core").Montage;
-var Component = require("montage/ui/component").Component;
-var Collapser = require("js/panels/Timeline/Collapser").Collapser;
-var Hintable = require("js/components/hintable.reel").Hintable;
-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, {
-
- dynamicLayerTag: {
- value: null,
- serializable: true
- },
-
- positionCollapser: {
- value: null,
- serializable: true
- },
-
- transformCollapser: {
- value: null,
- serializable: true
- },
-
- styleCollapser: {
- value: null,
- serializable: true
- },
-
- clickerMain: {
- value: null,
- serializable: true
- },
-
- myLabel: {
- value: null,
- serializable: true
- },
-
- /* Begin: Models */
-
- /* Main collapser model: the main collapser for the layer */
- _mainCollapser : {
- value: false
- },
- mainCollapser: {
- get: function() {
- return this._mainCollapser;
- },
- set: function(newVal) {
- this._mainCollapser = newVal;
- },
- serializable: true
- },
-
- /* Style models: the array of styles, and the repetition that uses them */
- _arrLayerStyles : {
- value: []
- },
- arrLayerStyles : {
- serializable: true,
- get: function() {
- return this._arrLayerStyles;
- },
- set: function(newVal) {
- this._arrLayerStyles = newVal;
- }
- },
- _styleRepetition : {
- value: false
- },
- styleRepetition : {
- serializable: true,
- get: function() {
- return this._styleRepetition;
- },
- set: function(newVal) {
- this._styleRepetition = newVal;
- }
- },
- _styleCounter : {
- value: 0
- },
- styleCounter:{
- serializable:true,
- get:function () {
- return this._styleCounter;
- },
- set:function (newVal) {
- 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;
- }
- }
- },
- _storedStyleIndex : {
- value: false
- },
-
- /* Layer models: the name, ID, and selected and animation booleans for the layer */
- _layerName:{
- value: ""
- },
-
- layerName:{
- serializable: true,
- get:function(){
- return this._layerName;
- },
- set:function(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") {
- if (this.dynamicLayerName.value !== newVal) {
- this.dynamicLayerName.value = newVal;
- }
- }
- this.needsDraw = true;
- }
- },
- _layerID:{
- value: "Default Layer ID"
- },
-
- layerID:{
- serializable: true,
- get:function(){
- return this._layerID;
- },
- set:function(value){
- this._layerID = value;
- this.layerData.layerID = value;
- }
- },
- _layerTag:{
- value: "tag"
- },
-
- layerTag:{
- serializable: true,
- get:function(){
- return this._layerTag;
- },
- set:function(newVal){
- this._layerTag = newVal;
- this.layerData.layerTag = newVal;
- }
- },
- _docUUID : {
- value: null
- },
- docUUID : {
- serializable: true,
- get: function() {
- return this._docUUID;
- },
- set: function(newVal) {
- this._docUUID = newVal;
- }
- },
-
- _stageElement: {
- value: null
- },
-
- stageElement: {
- get: function() {
- return this._stageElement;
- },
- set: function(newVal) {
- this._stageElement = newVal;
- this.layerData.stageElement = newVal;
- }
- },
-
-
- _elementsList : {
- value: []
- },
- elementsList : {
- serializable: true,
- get: function() {
- return this._elementsList;
- },
- set: function(newVal) {
- this._elementsList = newVal;
- }
- },
-
- /* Position and Size hottext values */
- _dtextPositionX : {
- value:null
- },
-
- dtextPositionX:{
- serializable: true,
- get:function(){
- return this._dtextPositionX;
- },
- set:function(value){
- if (this._dtextPositionX !== value) {
- this._dtextPositionX = value;
- this.layerData.dtextPositionX = value;
- }
- }
- },
-
- _dtextPositionY : {
- value:null
- },
-
- dtextPositionY:{
- serializable: true,
- get:function(){
- return this._dtextPositionY;
- },
- set:function(value){
- if (this._dtextPositionY !== value) {
- this._dtextPositionY = value;
- this.layerData.dtextPositionY = value;
- }
-
- }
- },
-
- _dtextScaleX : {
- value:null
- },
-
- dtextScaleX:{
- serializable: true,
- get:function(){
- return this._dtextScaleX;
- },
- set:function(value){
- if (this._dtextScaleX !== value) {
- this._dtextScaleX = value;
- this.layerData.dtextScaleX = value;
- }
-
- }
- },
-
- _dtextScaleY : {
- value:null
- },
-
- dtextScaleY:{
- serializable: true,
- get:function(){
- return this._dtextScaleY;
- },
- set:function(value){
- if (this._dtextScaleY !== value) {
- this._dtextScaleY = value;
- this.layerData.dtextScaleY = value;
- }
-
- }
- },
-
- /* isSelected: whether or not the layer is currently selected. */
- _isSelected:{
- value: false
- },
-
- isSelected:{
- get:function(){
- return this._isSelected;
- },
- set:function(value){
- if (value !== this._isSelected) {
- // Only concerned about different values
- if (value === false) {
- // If changing from true to false, we need to deselect any associated styles
- this.selectStyle(false);
- } else {
- if (this._storedStyleIndex !== false) {
- this.selectStyle(this._storedStyleIndex);
- }
- }
- this._isSelected = value;
- this.layerData.isSelected = value;
- this.needsDraw = true;
- }
-
- }
- },
-
- /* isActive: Whether or not the user is actively clicking within the layer; used to communicate state with
- * TimelinePanel.
- */
- _isActive: {
- value: false
- },
- isActive: {
- serializable:true,
- get: function() {
- return this._isActive;
- },
- set: function(newVal) {
- this._isActive = newVal;
- this.layerData.isActive = newVal;
- }
- },
-
-
- _isAnimated:{
- value: false
- },
-
- isAnimated:{
- get:function(){
- return this._isAnimated;
- },
- set:function(value){
- this._isAnimated = value;
- this.layerData.isAnimated = value;
- }
- },
- _isVisible:{
- value: true
- },
-
- isVisible:{
- get:function(){
- return this._isVisible;
- },
- set:function(value){
- if (this._isVisible !== value) {
- this._isVisible = value;
- if (value === true) {
- this.element.classList.remove("layer-hidden");
- } else {
- this.element.classList.add("layer-hidden");
- }
- }
- this.layerData.isVisible = value;
- }
- },
-
- _isLock:{
- value: false
- },
-
- isLock:{
- get:function(){
- return this._isLock;
- },
- set:function(value){
- if (this._isLock !== value) {
- this._isLock = value;
-
- }
- this.layerData.isLock = value;
- }
- },
-
- _isHidden:{
- value: false
- },
-
- isHidden:{
- get:function(){
- return this._isHidden;
- },
- set:function(value){
- if (this._isHidden !== value) {
- this._isHidden = value;
-
- }
- this.layerData._isHidden = value;
- }
- },
-
-
- _justAdded: {
- value: false
- },
- _layerEditable : {
- value: false
- },
-
- _dynamicLayerName:{
- value:true
- },
- dynamicLayerName:{
- serializable:true,
- get:function () {
- return this._dynamicLayerName;
- },
- set:function (newVal) {
- this._dynamicLayerName = newVal;
- }
- },
-
- // Are the various collapsers collapsed or not
- _isMainCollapsed : {
- value: true
- },
- isMainCollapsed : {
- serializable: true,
- get: function() {
- return this._isMainCollapsed;
- },
- set: function(newVal) {
- this._isMainCollapsed = newVal;
- this.layerData.isMainCollapsed = newVal;
-
- }
- },
-
- _isPositionCollapsed : {
- value: true
- },
- isPositionCollapsed : {
- serializable: true,
- get: function() {
- return this._isPositionCollapsed;
- },
- set: function(newVal) {
- this._isPositionCollapsed = newVal;
- this.layerData.isPositionCollapsed = newVal;
- }
- },
-
- _isStyleCollapsed : {
- value: true
- },
- isStyleCollapsed : {
- serializable: true,
- get: function() {
- return this._isStyleCollapsed;
- },
- set: function(newVal) {
- this._isStyleCollapsed = newVal;
- this.layerData.isStyleCollapsed = newVal;
- }
- },
- _bypassAnimation : {
- value: false
- },
- bypassAnimation : {
- serializable: true,
- get: function() {
- return this._bypassAnimation;
- },
- set: function(newVal) {
- if (typeof(this.layerData) !== "undefined") {
- this._bypassAnimation = newVal;
- this.layerData.bypassAnimation = newVal;
- }
- }
- },
-
- // Is this the first draw?
- _isFirstDraw : {
- value: true
- },
-
- _layerData:{
- value:{}
- },
-
- layerData:{
- serializable: true,
- get:function(){
- return this._layerData;
- },
- set:function(val){
- this._layerData = val;
- if(this._layerData){
- this.setData(true);
- }
- }
- },
-
- setData:{
- 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.stageElement = this.layerData.stageElement
- this.arrLayerStyles = this.layerData.arrLayerStyles;
- this.isMainCollapsed = this.layerData.isMainCollapsed;
- this.isPositionCollapsed = this.layerData.isPositionCollapsed;
- this.isSelected = this.layerData.isSelected;
- this.isActive = this.layerData.isActive;
- this.isStyleCollapsed = this.layerData.isStyleCollapsed;
- this.bypassAnimation = this.layerData.bypassAnimation;
- this.dtextPositionX = this.layerData.dtextPositionX;
- this.dtextPositionY = this.layerData.dtextPositionY;
- this.dtextSkewX = this.layerData.dtextSkewX;
- this.dtextSkewY = this.layerData.dtextSkewY;
- this.dtextScaleX = this.layerData.dtextScaleX;
- this.dtextScaleY = this.layerData.dtextScaleY;
- this.dtextRotate = this.layerData.dtextRotate;
- //this._isFirstDraw = this.layerData._isFirstDraw;
- this.layerTag = this.layerData.layerTag;
- this.isVisible = this.layerData.isVisible;
- this.isAnimated = this.layerData.isAnimated;
- this.docUUID = this.layerData.docUUID;
- this.selectedStyleIndex = this.layerData.selectedStyleIndex;
- this.needsDraw = boolNeedsDraw;
- this.isLock = this.layerData.isLock;
- this.isHidden = this.layerData.isHidden;
- }
- },
-
- /* Data binding point and outgoing binding trigger method */
- _bindingPoint : {
- value : {}
- },
- bindingPoint: {
- get: function() {
- return this._bindingPoint;
- },
- set: function(newVal) {
- if (newVal !== this._bindingPoint) {
- this._bindingPoint = newVal;
- this.setData(true);
- }
- }
- },
-
- triggerOutgoingBinding : {
- value: function() {
- this.layerData.triggerBinding = !this.layerData.triggerBinding;
- }
- },
- /* END: Models */
-
- /* Begin: Draw cycle */
- prepareForDraw: {
- value: function() {
-
- // Initialize myself
- this.init();
-
- // 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", this.handleSelectorEditableBlur.bind(this), false);
- this._layerEditable.addEventListener("change", this.handleLayerNameChange.bind(this), false);
- this._layerEditable.editingClass = "editable2";
- this._layerEditable.value = this.layerName;
-
- // Collapser event handlers.
- this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false);
- this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false);
- this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false);
- this.layerLock.addEventListener("click",this.handleLayerLock.bind(this),false);
- this.visibilityButton.addEventListener("click",this.handleLayerVisibility.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);
-
- // Add mousedown listener to set isActive
- this.element.addEventListener("mousedown", this, false);
- this.element.addEventListener("click", this, false);
-
- // Drag and drop event handlers
- 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);
- this.element.addEventListener("drop", this.handleDrop.bind(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.stageElement;
- 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"));
- }
- },
-
- draw: {
- value: function() {
- var boolHasClass = this.element.classList.contains("layerSelected");
- if (this.isSelected && !boolHasClass) {
- //console.log('Layer.draw, adding selection for layer ', this.layerName)
- this.element.classList.add("layerSelected");
-
- }
- if (!this.isSelected && boolHasClass) {
- //console.log('Layer.draw, removing selection for layer ', this.layerName)
- this.element.classList.remove("layerSelected");
- }
- // Enable or disable the delete style button as appropriate
- if (this.isSelected) {
- if (this.selectedStyleIndex !== false) {
- this.selectStyle(this.selectedStyleIndex);
- this.buttonDeleteStyle.classList.remove("disabled");
- }
- } else {
- this.buttonDeleteStyle.classList.add("disabled");
- }
-
- // Update layer name?
- if (this.layerName !== this.layer_label_text.innerText) {
- this.layer_label_text.innerText = this.layerName;
- }
- }
- },
- didDraw: {
- value: function() {
- // console.log("Layer.didDraw: Layer "+ this.layerID );
- if (this._isFirstDraw === true) {
- 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.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 */
-
- /* Begin: Controllers */
-
- // Initialize a just-created layer
- init: {
- value: function() {
- // Get some selectors.
- this.label = this.element.querySelector(".label-layer");
- this.titleSelector = this.label.querySelector(".collapsible-label");
- this.buttonAddStyle = this.element.querySelector(".button-add");
- this.buttonDeleteStyle = this.element.querySelector(".button-delete");
- }
- },
- addStyle : {
- value: function(styleProperty, existingRule) {
- // Add a new style rule. It should be added above the currently selected rule,
- // Or at the end, if no rule is selected.
-
- var newLength = 0,
- // mySelection = 0,
- // 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";
- newEvent.layerEventType = "newStyle";
- newEvent.layerID = this.layerID;
- newEvent.styleIndex = this.styleCounter;
- newEvent.styleID = this.layerID + "@" + this.styleCounter; // is this property needed?
-
- newStyle.styleID = newEvent.styleID;
- newStyle.whichView = "hintable";
- newStyle.editorProperty = "";
- if(styleProperty){
- newStyle.editorProperty = styleProperty;
- newEvent.layerEventType = "restoreStyle";
- newEvent.trackEditorProperty = styleProperty;
- if(existingRule){
- newEvent.existingRule = existingRule;
- }
- }
- newStyle.editorValue = "";
- newStyle.ruleTweener = false;
- newStyle.isSelected = false;
- newStyle.colorelement = "";
- this.arrLayerStyles.push(newStyle);
- this.selectStyle(this.arrLayerStyles.length -1);
-
- // Set up the event info and dispatch the event
- this.styleCounter += 1;
- // newEvent.styleSelection = mySelection;
- //defaultEventManager.dispatchEvent(newEvent);
-
- // Dispatch the event to the TimelineTrack component associated with this Layer.
- var myIndex = false,
- i = 0,
- arrLayersLength = this.parentComponent.parentComponent.arrLayers.length,
- arrTracks = document.querySelectorAll('[data-montage-id="track"]');
-
- for (i = 0; i < arrLayersLength; i++) {
- if (this.stageElement == this.parentComponent.parentComponent.arrLayers[i].layerData.stageElement) {
- myIndex = i;
- }
- }
-
- if (myIndex !== false) {
- arrTracks[myIndex].dispatchEvent(newEvent);
- }
- }
- },
-
- deleteStyle : {
- value: function() {
-
- // Only delete a style if we have one or more styles, and one of them is selected
- if ((this.arrLayerStyles.length > 0) && (this.selectedStyleIndex !== false)) {
- var newEvent = document.createEvent("CustomEvent");
-
- // Set up the event info and dispatch the event
- newEvent.initCustomEvent("layerEvent", false, true);
- newEvent.layerEventLocale = "styles";
- newEvent.layerEventType = "deleteStyle";
- newEvent.layerID = this.layerID;
- newEvent.styleID = this.selectedStyleIndex;
- newEvent.selectedStyleIndex = this.selectedStyleIndex;
-
- // Dispatch the event to the TimelineTrack component associated with this Layer.
- var myIndex = this.application.ninja.timeline.getActiveLayerIndex(),
- arrTracks = document.querySelectorAll('[data-montage-id="track"]');
-
- if (myIndex !== false) {
- arrTracks[myIndex].dispatchEvent(newEvent);
- }
-
- // Delete the style from the view
- this.arrLayerStyles.splice(this.selectedStyleIndex, 1);
-
- // Set selection to none
- this.selectedStyleIndex = false;
-
- // Disable the delete style button, because now nothing is selected
- this.buttonDeleteStyle.classList.add("disabled");
- }
- }
- },
- selectStyle : {
- value: function(styleIndex) {
- // Select a style based on its index.
- // use layerIndex = false to deselect all styles.
- var i = 0,
- arrLayerStylesLength = this.arrLayerStyles.length;
-
- if (styleIndex === false) {
- if (arrLayerStylesLength === 0) {
- // No styles selected, so do nothing.
- return;
- }
- for (i = 0; i < arrLayerStylesLength; i++) {
- if (this.arrLayerStyles[i].isSelected === true) {
- this.arrLayerStyles[i].isSelected = false;
- }
- }
- } else {
- for (i = 0; i < arrLayerStylesLength; i++) {
- if (i === styleIndex) {
- this.arrLayerStyles[i].isSelected = true;
- } else {
- if (this.arrLayerStyles[i].isSelected === true) {
- this.arrLayerStyles[i].isSelected = false;
- }
- }
- }
- this.selectedStyleIndex = styleIndex;
- this._storedStyleIndex = styleIndex;
- }
-
-
-
- /*
- // Next, update this.styleRepetition.selectedIndexes.
- if (styleIndex !== false) {
- //this.styleRepetition.selectedIndexes = [styleIndex];
- this.buttonDeleteStyle.classList.remove("disabled");
- } else {
- //this.styleRepetition.selectedIndexes = null;
- if (typeof(this.buttonDeleteStyle) !== "undefined") {
- this.buttonDeleteStyle.classList.add("disabled");
- }
- }
- */
-
- }
- },
- getActiveStyleIndex : {
- value: function() {
- // Searches through the styles and looks for one that has
- // set its isActive flag to true.
- var i = 0,
- returnVal = false,
- arrLayerStylesLength = this.arrLayerStyles.length;
-
- for (i = 0; i < arrLayerStylesLength; i++) {
- if (this.arrLayerStyles[i].isActive === true) {
- returnVal = i;
- this.arrLayerStyles[i].isActive = false;
- }
- }
- //console.log("Layer.getActiveStyleIndex, returnVal ", returnVal)
- return returnVal;
- }
- },
- /* End: Controllers */
-
- /* Begin: Event handlers */
- handleLayerNameChange: {
- value: function(event) {
-
- if (this._layerEditable.value !== this.layerName) {
- this.layerName = this._layerEditable.value;
- this.application.ninja.currentDocument.model.needsSave = true;
- this.layerData.stageElement.setAttribute("id",this._layerEditable.value);
- }
- }
- },
- handleAddStyleClick: {
- value: function(event) {
-
- this.isStyleCollapsed = false;
- this.layerData.isStyleCollapsed = false;
- this.triggerOutgoingBinding();
-
- this.addStyle();
-
- }
- },
- handleDeleteStyleClick: {
- value: function(event) {
- if (event.target.classList.contains("disabled")) {
- return;
- }
- this.deleteStyle();
- }
- },
- handleSelectorEditableBlur : {
- value: function(event) {
- this.titleSelector.scrollLeft = 0;
- this.handleSelectorEditableChange(event);
- }
- },
- handleSelectorEditableChange: {
- value: function(event) {
- var newVal = this._layerEditable.enteredValue;
- if (this._layerEditable.enteredValue.length === 0) {
- newVal = this._layerEditable._preEditValue;
- }
- this.layerName = newVal;
- if (newVal !== this.layerName) {
- this.layerName = newVal;
- this.application.ninja.currentDocument.model.needsSave = true;
- this.layerData.stageElement.setAttribute("id", newVal);
- }
- }
- },
- handleMousedown: {
- value: function(event) {
- if (event.target.classList.contains("button-delete")) {
- return;
- }
- this.layerData.isActive = true;
- var ptrParent = nj.queryParentSelector(event.target, ".content-style"),
- activeStyleIndex = this.getActiveStyleIndex();
- this.selectedStyleIndex = activeStyleIndex;
- if (ptrParent !== false) {
- this.selectStyle(this.selectedStyleIndex);
- }
- }
- },
- handleLayerClick : {
- value: function(event) {
- var ptrParent = nj.queryParentSelector(event.target, ".content-style");
- if (ptrParent !== false) {
- var myIndex = this.getActiveStyleIndex();
- this.selectStyle(myIndex);
- }
- }
- },
- handleMainCollapserClick : {
- 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.application.ninja.timeline.synchScrollbars(43);
- }
- this.triggerOutgoingBinding();
- }
- },
- handlePositionCollapserClick : {
- value: function(event) {
- var myHeight = this.positionCollapser.element.offsetHeight;
- this.positionCollapser.bypassAnimation = false;
- this.bypassAnimation = false;
- this.layerData.bypassAnimation = false;
- if (this.isPositionCollapsed) {
- this.isPositionCollapsed = false;
- } else {
- this.isPositionCollapsed = true;
- this.application.ninja.timeline.synchScrollbars(myHeight);
- }
- this.triggerOutgoingBinding();
- }
- },
- handleStyleCollapserClick : {
- value: function(event) {
- var myHeight = this.styleCollapser.element.offsetHeight;
- this.styleCollapser.bypassAnimation = false;
- this.bypassAnimation = false;
- this.layerData.bypassAnimation = false;
- if (this.isStyleCollapsed) {
- this.isStyleCollapsed = false;
- } else {
- this.isStyleCollapsed = true;
- this.application.ninja.timeline.synchScrollbars(myHeight);
- }
- this.triggerOutgoingBinding();
- }
- },
- handleMouseover: {
- value: function(event) {
- this.element.draggable = true;
- }
- },
- handleMouseout: {
- value: function(event) {
- this.element.draggable = false;
- }
- },
- handleDragenter: {
- value: function(event) {
- }
- },
- handleDragleave: {
- value: function(event) {
- if (this.parentComponent.parentComponent.draggingType !== "layer") {
- return;
- }
- this.element.classList.remove("dragOver");
- }
- },
- handleDragstart: {
- 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";
- return false;
- }
- },
-
- 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) {
- this.parentComponent.parentComponent.dropLayerID = this.layerID;
- }
- return false;
- }
- },
-
- handleLeftChange: {
- value: function(event) {
-
- var prevPosition;
- if(!event.wasSetByCode) {
- if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
- this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Change", "timeline", prevPosition);
- this.savedPosition = null;
- }
- }
- },
-
- handleTopChange: {
- value: function(event) {
- var prevPosition;
-
- if(!event.wasSetByCode) {
- if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
-
- this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Change", "timeline", prevPosition);
- this.savedPosition = null;
- }
- }
- },
-
- handleWidthChange:{
- value: function(event) {
- var prevPosition;
-
- if(!event.wasSetByCode) {
- if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
-
- this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "timeline", prevPosition);
- this.savedPosition = null;
- }
- }
- },
-
- handleHeightChange:{
- value: function(event) {
- var prevPosition;
-
- if(!event.wasSetByCode) {
- if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
-
- this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Change", "timeline", prevPosition);
- this.savedPosition = null;
- }
- }
- },
-
- handleLeftChanging: {
- value: function(event) {
-
- if(!event.wasSetByCode) {
- if(!this.savedPosition) this.savedPosition = this.leftPosition;
- this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Changing", "timeline");
- }
-
- }
- },
-
- handleTopChanging: {
- value: function(event) {
-
- if(!event.wasSetByCode) {
- if(!this.savedPosition) this.savedPosition = this.topPosition;
- this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Changing", "timeline");
- }
- }
- },
-
- handleWidthChanging:{
- value: function(event) {
-
- if(!event.wasSetByCode) {
- if(!this.savedPosition) this.savedPosition = this.dtextScaleX;
- this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Changing", "timeline");
- }
- }
- },
-
- handleHeightChanging:{
- value: function(event) {
-
- if(!event.wasSetByCode) {
- if(!this.savedPosition) this.savedPosition = this.dtextScaleY;
- this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Changing", "timeline");
- }
- }
- },
-
-
- handleElementChange:{
- value:function(event){
- if(this.layerData){
- var el =this.layerData.stageElement;
- var length = this.arrLayerStyles.length , i , k=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"));
-
-
- for(i=0; i
+ This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+
+var Montage = require("montage/core/core").Montage;
+var Component = require("montage/ui/component").Component;
+var Hintable = require("js/components/hintable.reel").Hintable;
+var nj = require("js/lib/NJUtils").NJUtils;
+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
+
+var Layer = exports.Layer = Montage.create(Component, {
+
+ /* Begin: Models */
+
+ _dynamicLayerTag: {
+ value: null
+ },
+ dynamicLayerTag: {
+ serializable: true,
+ get: function() {
+ return this._dynamicLayerTag;
+ },
+ set: function(newVal) {
+ this._dynamicLayerTag = newVal;
+ }
+ },
+
+ _positionCollapser: {
+ value: null
+ },
+ positionCollapser: {
+ serializable: true,
+ get: function() {
+ return this._positionCollapser;
+ },
+ set: function(newVal) {
+ this._positionCollapser = newVal;
+ }
+ },
+
+ _transformCollapser: {
+ value: null
+ },
+ transformCollapser: {
+ serializable: true,
+ get: function() {
+ return this._transformCollapser;
+