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(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') 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; + }, + set: function(newVal) { + this._transformCollapser = newVal; + } + }, + + _styleCollapser: { + value: null + }, + styleCollapser: { + serializable: true, + get: function() { + return this._styleCollapser; + }, + set: function(newVal) { + this._styleCollapser = newVal; + } + }, + + _clickerMain: { + value: null + }, + clickerMain: { + serializable: true, + get: function() { + return this._clickerMain; + }, + set: function(newVal) { + this._clickerMain = newVal; + } + }, + + _myLabel: { + value: null + }, + myLabel: { + serializable: true, + get: function() { + return this._myLabel; + }, + set: function(newVal) { + this._myLabel = newVal; + } + }, + + _mainCollapser : { + value: false + }, + mainCollapser: { + get: function() { + return this._mainCollapser; + }, + set: function(newVal) { + this._mainCollapser = newVal; + }, + serializable: true + }, + + _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 + }, + + _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; + } + }, + + _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:{ + 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: { + 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.