aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Layer.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Layer.reel')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html3
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js191
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js.orig1057
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css75
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss5
5 files changed, 1215 insertions, 116 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index c4aa6e29..717306a0 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -17,6 +17,7 @@
17 "styleRepetition" : {"@":"repetition1"}, 17 "styleRepetition" : {"@":"repetition1"},
18 "dynamicLayerName" : {"@":"dtext1"}, 18 "dynamicLayerName" : {"@":"dtext1"},
19 "dynamicLayerTag" : {"@": "dtext2"}, 19 "dynamicLayerTag" : {"@": "dtext2"},
20 "layer_label_text" : {"#": "layer-label-text"},
20 "mainCollapser" : {"@" : "mainCollapser"}, 21 "mainCollapser" : {"@" : "mainCollapser"},
21 "positionCollapser" : {"@" : "positionCollapser"}, 22 "positionCollapser" : {"@" : "positionCollapser"},
22 "styleCollapser" : {"@" : "styleCollapser"}, 23 "styleCollapser" : {"@" : "styleCollapser"},
@@ -38,7 +39,7 @@
38 "value" : { 39 "value" : {
39 "boundObject" : {"@": "owner"}, 40 "boundObject" : {"@": "owner"},
40 "boundObjectPropertyPath" : "layerName", 41 "boundObjectPropertyPath" : "layerName",
41 "oneway" : false 42 "oneway" : true
42 } 43 }
43 } 44 }
44 }, 45 },
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 2df11f18..77db9b64 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -72,10 +72,28 @@ var Layer = exports.Layer = Montage.create(Component, {
72 this._styleCounter = newVal; 72 this._styleCounter = newVal;
73 } 73 }
74 }, 74 },
75 _selectedStyleIndex: {
76 value: false
77 },
78 selectedStyleIndex: {
79 get: function() {
80 return this._selectedStyleIndex;
81 },
82 set: function(newVal) {
83 if (typeof(newVal) === "undefined") {
84 return;
85 }
86 if (newVal !== this._selectedStyleIndex) {
87 this._selectedStyleIndex = newVal;
88 this.layerData.selectedStyleIndex = newVal;
89 this.needsDraw = true;
90 }
91 }
92 },
75 93
76 /* Layer models: the name, ID, and selected and animation booleans for the layer */ 94 /* Layer models: the name, ID, and selected and animation booleans for the layer */
77 _layerName:{ 95 _layerName:{
78 value: "Default Layer Name" 96 value: ""
79 }, 97 },
80 98
81 layerName:{ 99 layerName:{
@@ -84,13 +102,22 @@ var Layer = exports.Layer = Montage.create(Component, {
84 return this._layerName; 102 return this._layerName;
85 }, 103 },
86 set:function(newVal){ 104 set:function(newVal){
87 this._layerEditable.value = newVal; 105 if (this._layerEditable.value !== newVal) {
88 this._layerName = newVal; 106 this._layerEditable.value = newVal;
89 this.layerData.layerName = newVal; 107 }
108 if (this._layerName !== newVal) {
109 this._layerName = newVal;
110 }
111 if (this.layerData.layerName !== newVal) {
112 this.layerData.layerName = newVal;
113 }
114
90 if (typeof(this.dynamicLayerName) !== "undefined") { 115 if (typeof(this.dynamicLayerName) !== "undefined") {
91 this.dynamicLayerName.value = newVal; 116 if (this.dynamicLayerName.value !== newVal) {
117 this.dynamicLayerName.value = newVal;
118 }
92 } 119 }
93 120 this.needsDraw = true;
94 } 121 }
95 }, 122 },
96 _layerID:{ 123 _layerID:{
@@ -134,6 +161,20 @@ var Layer = exports.Layer = Montage.create(Component, {
134 } 161 }
135 }, 162 },
136 163
164 _stageElement: {
165 value: null
166 },
167
168 stageElement: {
169 get: function() {
170 return this._stageElement;
171 },
172 set: function(newVal) {
173 this._stageElement = newVal;
174 this.layerData.stageElement = newVal;
175 }
176 },
177
137 178
138 _elementsList : { 179 _elementsList : {
139 value: [] 180 value: []
@@ -398,6 +439,7 @@ var Layer = exports.Layer = Montage.create(Component, {
398 439
399 this.layerName = this.layerData.layerName; 440 this.layerName = this.layerData.layerName;
400 this.layerID = this.layerData.layerID; 441 this.layerID = this.layerData.layerID;
442 this.stageElement = this.layerData.stageElement
401 this.arrLayerStyles = this.layerData.arrLayerStyles; 443 this.arrLayerStyles = this.layerData.arrLayerStyles;
402 this.isMainCollapsed = this.layerData.isMainCollapsed; 444 this.isMainCollapsed = this.layerData.isMainCollapsed;
403 this.isPositionCollapsed = this.layerData.isPositionCollapsed; 445 this.isPositionCollapsed = this.layerData.isPositionCollapsed;
@@ -417,6 +459,7 @@ var Layer = exports.Layer = Montage.create(Component, {
417 this.isVisible = this.layerData.isVisible; 459 this.isVisible = this.layerData.isVisible;
418 this.isAnimated = this.layerData.isAnimated; 460 this.isAnimated = this.layerData.isAnimated;
419 this.docUUID = this.layerData.docUUID; 461 this.docUUID = this.layerData.docUUID;
462 this.selectedStyleIndex = this.layerData.selectedStyleIndex;
420 this.needsDraw = boolNeedsDraw; 463 this.needsDraw = boolNeedsDraw;
421 } 464 }
422 }, 465 },
@@ -439,11 +482,7 @@ var Layer = exports.Layer = Montage.create(Component, {
439 482
440 triggerOutgoingBinding : { 483 triggerOutgoingBinding : {
441 value: function() { 484 value: function() {
442 if (this.layerData.triggerBinding === true) { 485 this.layerData.triggerBinding = !this.layerData.triggerBinding;
443 this.layerData.triggerBinding = false;
444 } else {
445 this.layerData.triggerBinding = true;
446 }
447 } 486 }
448 }, 487 },
449 /* END: Models */ 488 /* END: Models */
@@ -485,44 +524,34 @@ var Layer = exports.Layer = Montage.create(Component, {
485 this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); 524 this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false);
486 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); 525 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
487 this.element.addEventListener("drop", this.handleDrop.bind(this), false); 526 this.element.addEventListener("drop", this.handleDrop.bind(this), false);
488
489 this.eventManager.addEventListener("updatedID", this, false);
490 this.eventManager.addEventListener("elementChange",this,false);
491
492 this.leftControl.identifier = "left";
493 this.leftControl.addEventListener("changing",this,false);
494 this.leftControl.addEventListener("change",this,false);
495
496 this.topControl.identifier = "top";
497 this.topControl.addEventListener("changing",this,false);
498 this.topControl.addEventListener("change",this,false);
499
500 this.widthControl.identifier = "width";
501 this.widthControl.addEventListener("changing",this,false);
502 this.widthControl.addEventListener("change",this,false);
503
504 this.heightControl.identifier = "height";
505 this.heightControl.addEventListener("changing",this,false);
506 this.heightControl.addEventListener("change",this,false);
507
508 el=this.layerData.elementsList[0];
509
510 this.dtextPositionX = parseFloat(ElementsMediator.getProperty(el, "left"));
511 this.dtextPositionY = parseFloat(ElementsMediator.getProperty(el, "top"));
512 this.dtextScaleY = parseFloat(ElementsMediator.getProperty(el, "height"));
513 this.dtextScaleX= parseFloat(ElementsMediator.getProperty(el, "width"));
514
515// this.eventManager.addEventListener("changing",this,false);
516
517 } 527 }
518 }, 528 },
519 529
520 draw: { 530 draw: {
521 value: function() { 531 value: function() {
532 var boolHasClass = this.element.classList.contains("layerSelected");
533 if (this.isSelected && !boolHasClass) {
534 //console.log('Layer.draw, adding selection for layer ', this.layerName)
535 this.element.classList.add("layerSelected");
536
537 }
538 if (!this.isSelected && boolHasClass) {
539 //console.log('Layer.draw, removing selection for layer ', this.layerName)
540 this.element.classList.remove("layerSelected");
541 }
542 // Enable or disable the delete style button as appropriate
522 if (this.isSelected) { 543 if (this.isSelected) {
523 this.element.classList.add("selected"); 544 if (this.selectedStyleIndex !== "false") {
545 this.selectStyle(this.selectedStyleIndex);
546 this.buttonDeleteStyle.classList.remove("disabled");
547 }
524 } else { 548 } else {
525 this.element.classList.remove("selected"); 549 this.buttonDeleteStyle.classList.add("disabled");
550 }
551
552 // Update layer name?
553 if (this.layerName !== this.layer_label_text.innerText) {
554 this.layer_label_text.innerText = this.layerName;
526 } 555 }