diff options
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 69 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/css/Layer.css | 50 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/scss/Layer.scss | 9 |
3 files changed, 74 insertions, 54 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index f1882985..bba113c0 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -67,10 +67,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
67 | 67 | ||
68 | /* Layer models: the name, ID, and selected and animation booleans for the layer */ | 68 | /* Layer models: the name, ID, and selected and animation booleans for the layer */ |
69 | _layerName:{ | 69 | _layerName:{ |
70 | serializable: true, | 70 | value: "Default Layer Name" |
71 | value:null, | ||
72 | writable:true, | ||
73 | enumerable:true | ||
74 | }, | 71 | }, |
75 | 72 | ||
76 | layerName:{ | 73 | layerName:{ |
@@ -79,20 +76,22 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
79 | return this._layerName; | 76 | return this._layerName; |
80 | }, | 77 | }, |
81 | set:function(newVal){ | 78 | set:function(newVal){ |
82 | if (newVal !== this._layerName) { | 79 | console.log('Layer.layerName.set ', newVal); |
80 | |||
83 | this._layerEditable.value = newVal; | 81 | this._layerEditable.value = newVal; |
84 | this._layerName = newVal; | 82 | this._layerName = newVal; |
85 | this.layerData.layerName = newVal; | 83 | this.layerData.layerName = newVal; |
86 | this.log('layerName setter: ' + newVal) | 84 | if (typeof(this.dynamicLayerName) !== "undefined") { |
87 | } | 85 | this.dynamicLayerName.value = newVal; |
86 | } | ||
87 | |||
88 | console.log('layerName setter: ' + newVal) | ||
89 | |||
88 | 90 | ||
89 | } | 91 | } |
90 | }, | 92 | }, |
91 | _layerID:{ | 93 | _layerID:{ |
92 | value:null, | 94 | value: "Default Layer ID" |
93 | writable:true, | ||
94 | serializable: true, | ||
95 | enumerable:true | ||
96 | }, | 95 | }, |
97 | 96 | ||
98 | layerID:{ | 97 | layerID:{ |
@@ -410,16 +409,25 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
410 | set:function(val){ | 409 | set:function(val){ |
411 | this._layerData = val; | 410 | this._layerData = val; |
412 | if(this._layerData){ | 411 | if(this._layerData){ |
413 | this.setData(); | 412 | this.setData(true); |
414 | } | 413 | } |
415 | } | 414 | } |
416 | }, | 415 | }, |
417 | 416 | ||
418 | setData:{ | 417 | setData:{ |
419 | value:function(){ | 418 | value:function(boolNeedsDraw){ |
420 | if (typeof(this.layerData) === "undefined") { | 419 | if (typeof(this._layerData) === "undefined") { |
420 | return; | ||
421 | } | ||
422 | |||
423 | if (typeof(this._layerData.layerName) === "undefined") { | ||
421 | return; | 424 | return; |
422 | } | 425 | } |
426 | |||
427 | if (typeof(boolNeedsDraw) === "undefined") { | ||
428 | boolNeedsDraw = false; | ||
429 | } | ||
430 | |||
423 | this.layerName = this.layerData.layerName; | 431 | this.layerName = this.layerData.layerName; |
424 | this.layerID = this.layerData.layerID; | 432 | this.layerID = this.layerData.layerID; |
425 | this.arrLayerStyles = this.layerData.arrLayerStyles; | 433 | this.arrLayerStyles = this.layerData.arrLayerStyles; |
@@ -438,7 +446,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
438 | this.dtextScaleY = this.layerData.dtextScaleY; | 446 | this.dtextScaleY = this.layerData.dtextScaleY; |
439 | this.dtextRotate = this.layerData.dtextRotate; | 447 | this.dtextRotate = this.layerData.dtextRotate; |
440 | this._isFirstDraw = this.layerData._isFirstDraw; | 448 | this._isFirstDraw = this.layerData._isFirstDraw; |
441 | this.needsDraw = true; | 449 | this.needsDraw = boolNeedsDraw; |
442 | } | 450 | } |
443 | }, | 451 | }, |
444 | 452 | ||
@@ -455,7 +463,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
455 | set: function(newVal) { | 463 | set: function(newVal) { |
456 | if (newVal !== this._bindingPoint) { | 464 | if (newVal !== this._bindingPoint) { |
457 | this._bindingPoint = newVal; | 465 | this._bindingPoint = newVal; |
458 | this.setData(); | 466 | this.setData(true); |
459 | } | 467 | } |
460 | } | 468 | } |
461 | }, | 469 | }, |
@@ -478,23 +486,15 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
478 | // Initialize myself | 486 | // Initialize myself |
479 | this.init(); | 487 | this.init(); |
480 | 488 | ||
481 | var that = this; | ||
482 | |||
483 | // Make it editable! | 489 | // Make it editable! |
484 | this._layerEditable = Hintable.create(); | 490 | this._layerEditable = Hintable.create(); |
485 | this._layerEditable.element = this.titleSelector; | 491 | this._layerEditable.element = this.titleSelector; |
486 | this.titleSelector.identifier = "selectorEditable"; | 492 | this._layerEditable.addEventListener("blur", this.handleSelectorEditableBlur.bind(this), false); |
487 | this.titleSelector.addEventListener("click", this, false); | 493 | this._layerEditable.addEventListener("change", this.handleSelectorEditableChange.bind(this), false); |
488 | this._layerEditable.addEventListener("blur", function(event) { | 494 | |
489 | that.handleSelectorEditableBlur(event); | ||
490 | }, false); | ||
491 | this._layerEditable.addEventListener("change", function(event) { | ||
492 | that.dynamicLayerName.value = that._layerEditable.value; | ||
493 | that.needsDraw = true; | ||
494 | }, false); | ||
495 | this._layerEditable.editingClass = "editable2"; | 495 | this._layerEditable.editingClass = "editable2"; |
496 | this._layerEditable.value = this.layerName; | 496 | this._layerEditable.value = this.layerName; |
497 | this._layerEditable.needsDraw = true; | 497 | //this._layerEditable.needsDraw = true; |
498 | 498 | ||
499 | this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); | 499 | this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); |
500 | this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); | 500 | this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); |
@@ -510,7 +510,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
510 | this.element.addEventListener("mousedown", this, false); | 510 | this.element.addEventListener("mousedown", this, false); |
511 | this.element.addEventListener("click", this, false); | 511 | this.element.addEventListener("click", this, false); |
512 | 512 | ||
513 | // Drag and drop event hanlders | 513 | // Drag and drop event handlers |
514 | this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false); | 514 | this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false); |
515 | this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false); | 515 | this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false); |
516 | this.element.addEventListener("dragover", this.handleDragover.bind(this), false); | 516 | this.element.addEventListener("dragover", this.handleDragover.bind(this), false); |
@@ -712,10 +712,6 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
712 | this.deleteStyle(); | 712 | this.deleteStyle(); |
713 | } | 713 | } |
714 | }, | 714 | }, |
715 | handleSelectorEditableClick: { | ||
716 | value: function(event) { | ||
717 | } | ||
718 | }, | ||
719 | handleSelectorEditableBlur : { | 715 | handleSelectorEditableBlur : { |
720 | value: function(event) { | 716 | value: function(event) { |
721 | this.titleSelector.scrollLeft = 0; | 717 | this.titleSelector.scrollLeft = 0; |
@@ -723,7 +719,12 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
723 | }, | 719 | }, |
724 | handleSelectorEditableChange: { | 720 | handleSelectorEditableChange: { |
725 | value: function(event) { | 721 | value: function(event) { |
726 | this.layerName = this.dynamicLayerName.value; | 722 | var newVal = "ONTD"; |
723 | if (this._layerEditable.value !== "") { | ||
724 | newVal = this._layerEditable.value; | ||
725 | } | ||
726 | this.dynamicLayerName.value = newVal; | ||
727 | this.layerName = newVal; | ||
727 | this.needsDraw = true; | 728 | this.needsDraw = true; |
728 | } | 729 | } |
729 | }, | 730 | }, |
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css index 8e36c2db..1aae8d67 100644 --- a/js/panels/Timeline/Layer.reel/css/Layer.css +++ b/js/panels/Timeline/Layer.reel/css/Layer.css | |||
@@ -139,7 +139,12 @@ | |||
139 | font-size: 11px; | 139 | font-size: 11px; |
140 | } | 140 | } |
141 | 141 | ||
142 | /* line 130, ../scss/Layer.scss */ | 142 | /* line 132, ../scss/Layer.scss */ |
143 | .label-layer .collapsible-label br { | ||
144 | display: none; | ||
145 | } | ||
146 | |||
147 | /* line 136, ../scss/Layer.scss */ | ||
143 | .collapsible-clicker { | 148 | .collapsible-clicker { |
144 | position: absolute; | 149 | position: absolute; |
145 | width: 10px; | 150 | width: 10px; |
@@ -152,23 +157,23 @@ | |||
152 | background-repeat: no-repeat; | 157 | background-repeat: no-repeat; |
153 | } | 158 | } |
154 | 159 | ||
155 | /* line 141, ../scss/Layer.scss */ | 160 | /* line 147, ../scss/Layer.scss */ |
156 | .collapsible-clicker.collapsible-collapsed { | 161 | .collapsible-clicker.collapsible-collapsed { |
157 | background-image: url(../images/icon-collapsed.png); | 162 | background-image: url(../images/icon-collapsed.png); |
158 | } | 163 | } |
159 | 164 | ||
160 | /* line 144, ../scss/Layer.scss */ | 165 | /* line 150, ../scss/Layer.scss */ |
161 | .collapsible-content .collapsible-clicker { | 166 | .collapsible-content .collapsible-clicker { |
162 | left: 12px; | 167 | left: 12px; |
163 | } | 168 | } |
164 | 169 | ||
165 | /* line 147, ../scss/Layer.scss */ | 170 | /* line 153, ../scss/Layer.scss */ |
166 | .container-layer .collapsible-content.collapsible-collapsed { | 171 | .container-layer .collapsible-content.collapsible-collapsed { |
167 | height: 0px; | 172 | height: 0px; |
168 | overflow: hidden; | 173 | overflow: hidden; |