diff options
Diffstat (limited to 'js/panels/Timeline/Layer.reel')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 30 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 282 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js.orig | 1057 |
3 files changed, 1356 insertions, 13 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 44022211..3648cbbb 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html | |||
@@ -22,7 +22,12 @@ | |||
22 | "positionCollapser" : {"@" : "positionCollapser"}, | 22 | "positionCollapser" : {"@" : "positionCollapser"}, |
23 | "styleCollapser" : {"@" : "styleCollapser"}, | 23 | "styleCollapser" : {"@" : "styleCollapser"}, |
24 | "clickerMain" : {"#" : "clicker-main"}, | 24 | "clickerMain" : {"#" : "clicker-main"}, |
25 | "myLabel" : {"#" : "myLabel"} | 25 | "myLabel" : {"#" : "myLabel"}, |
26 | "leftControl": {"@" : "dtext_position_x"}, | ||
27 | "topControl": {"@" : "dtext_position_y"}, | ||
28 | "widthControl": {"@" : "dtext_scale_x"}, | ||
29 | "heightControl": {"@" : "dtext_scale_y"}, | ||
30 | "styleType":{"@" : "style"} | ||
26 | } | 31 | } |
27 | }, | 32 | }, |
28 | "dtext1" : { | 33 | "dtext1" : { |
@@ -105,7 +110,12 @@ | |||
105 | "boundObject" : {"@": "repetition1"}, | 110 | "boundObject" : {"@": "repetition1"}, |
106 | "boundObjectPropertyPath" : "objectAtCurrentIteration.ruleTweener", | 111 | "boundObjectPropertyPath" : "objectAtCurrentIteration.ruleTweener", |
107 | "oneway" : false | 112 | "oneway" : false |
108 | } | 113 | }, |
114 | "colorelement" : { | ||
115 | "boundObject" : {"@": "repetition1"}, | ||
116 | "boundObjectPropertyPath" : "objectAtCurrentIteration.colorelement", | ||
117 | "oneway" : false | ||
118 | } | ||
109 | } | 119 | } |
110 | }, | 120 | }, |
111 | "dtext_position_x" : { | 121 | "dtext_position_x" : { |
@@ -148,10 +158,10 @@ | |||
148 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", | 158 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", |
149 | "properties": { | 159 | "properties": { |
150 | "element": {"#": "scale-x"}, | 160 | "element": {"#": "scale-x"}, |
151 | "maxValue" : 100, | 161 | "maxValue" : 100000, |
152 | "minValue" : 0, | 162 | "minValue" : -100000, |
153 | "acceptableUnits" : "%", | 163 | "acceptableUnits" : "px", |
154 | "units" : "%", | 164 | "units" : "px", |
155 | "value" : 0 | 165 | "value" : 0 |
156 | }, | 166 | }, |
157 | "bindings": { | 167 | "bindings": { |
@@ -166,10 +176,10 @@ | |||
166 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", | 176 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", |
167 | "properties": { | 177 | "properties": { |
168 | "element": {"#": "scale-y"}, | 178 | "element": {"#": "scale-y"}, |
169 | "maxValue" : 100, | 179 | "maxValue" : 100000, |
170 | "minValue" : 0, | 180 | "minValue" : -100000, |
171 | "acceptableUnits" : "%", | 181 | "acceptableUnits" : "px", |
172 | "units" : "%", | 182 | "units" : "px", |
173 | "value" : 0 | 183 | "value" : 0 |
174 | }, | 184 | }, |
175 | "bindings": { | 185 | "bindings": { |
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 3fc5a3e1..4773489c 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -12,6 +12,7 @@ var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle; | |||
12 | var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText; | 12 | var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText; |
13 | var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; | 13 | var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; |
14 | var nj = require("js/lib/NJUtils").NJUtils; | 14 | var nj = require("js/lib/NJUtils").NJUtils; |
15 | var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; | ||
15 | 16 | ||
16 | var Layer = exports.Layer = Montage.create(Component, { | 17 | var Layer = exports.Layer = Montage.create(Component, { |
17 | 18 | ||
@@ -205,7 +206,6 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
205 | this._dtextPositionX = value; | 206 | this._dtextPositionX = value; |
206 | this.layerData.dtextPositionX = value; | 207 | this.layerData.dtextPositionX = value; |
207 | } | 208 | } |
208 | |||
209 | } | 209 | } |
210 | }, | 210 | }, |
211 | 211 | ||
@@ -348,6 +348,19 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
348 | _layerEditable : { | 348 | _layerEditable : { |
349 | value: false | 349 | value: false |
350 | }, | 350 | }, |
351 | |||
352 | _dynamicLayerName:{ | ||
353 | value:true | ||
354 | }, | ||
355 | dynamicLayerName:{ | ||
356 | serializable:true, | ||
357 | get:function () { | ||
358 | return this._dynamicLayerName; | ||
359 | }, | ||
360 | set:function (newVal) { | ||
361 | this._dynamicLayerName = newVal; | ||
362 | } | ||
363 | }, | ||
351 | 364 | ||
352 | // Are the various collapsers collapsed or not | 365 | // Are the various collapsers collapsed or not |
353 | _isMainCollapsed : { | 366 | _isMainCollapsed : { |
@@ -530,8 +543,33 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
530 | this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); | 543 | this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); |
531 | this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); | 544 | this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); |
532 | this.element.addEventListener("drop", this.handleDrop.bind(this), false); | 545 | this.element.addEventListener("drop", this.handleDrop.bind(this), false); |
546 | |||
547 | this.eventManager.addEventListener("elementChange",this,false); | ||
548 | |||
549 | this.leftControl.identifier = "left"; | ||
550 | this.leftControl.addEventListener("changing",this,false); | ||
551 | this.leftControl.addEventListener("change",this,false); | ||
552 | |||
553 | this.topControl.identifier = "top"; | ||
554 | this.topControl.addEventListener("changing",this,false); | ||
555 | this.topControl.addEventListener("change",this,false); | ||
556 | |||
557 | this.widthControl.identifier = "width"; | ||
558 | this.widthControl.addEventListener("changing",this,false); | ||
559 | this.widthControl.addEventListener("change",this,false); | ||
560 | |||
561 | this.heightControl.identifier = "height"; | ||
562 | this.heightControl.addEventListener("changing",this,false); | ||
563 | this.heightControl.addEventListener("change",this,false); | ||
564 | |||
565 | el=this.layerData.stageElement; | ||
566 | this.dtextPositionX = parseFloat(ElementsMediator.getProperty(el, "left")); | ||
567 | this.dtextPositionY = parseFloat(ElementsMediator.getProperty(el, "top")); | ||
568 | this.dtextScaleY = parseFloat(ElementsMediator.getProperty(el, "height")); | ||
569 | this.dtextScaleX= parseFloat(ElementsMediator.getProperty(el, "width")); | ||
533 | } | 570 | } |
534 | }, | 571 | }, |
572 | |||
535 | draw: { | 573 | draw: { |
536 | value: function() { | 574 | value: function() { |
537 | var boolHasClass = this.element.classList.contains("layerSelected"); | 575 | var boolHasClass = this.element.classList.contains("layerSelected"); |
@@ -601,7 +639,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
601 | } | 639 | } |
602 | }, | 640 | }, |
603 | addStyle : { | 641 | addStyle : { |
604 | value: function(styleProperty) { | 642 | value: function(styleProperty, existingRule) { |
605 | // Add a new style rule. It should be added above the currently selected rule, | 643 | // Add a new style rule. It should be added above the currently selected rule, |
606 | // Or at the end, if no rule is selected. | 644 | // Or at the end, if no rule is selected. |
607 | 645 | ||
@@ -630,10 +668,14 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
630 | newStyle.editorProperty = styleProperty; | 668 | newStyle.editorProperty = styleProperty; |
631 | newEvent.layerEventType = "restoreStyle"; | 669 | newEvent.layerEventType = "restoreStyle"; |
632 | newEvent.trackEditorProperty = styleProperty; | 670 | newEvent.trackEditorProperty = styleProperty; |
671 | if(existingRule){ | ||
672 | newEvent.existingRule = existingRule; | ||
673 | } | ||
633 | } | 674 | } |
634 | newStyle.editorValue = ""; | 675 | newStyle.editorValue = ""; |
635 | newStyle.ruleTweener = false; | 676 | newStyle.ruleTweener = false; |
636 | newStyle.isSelected = false; | 677 | newStyle.isSelected = false; |
678 | newStyle.colorelement = ""; | ||
637 | this.arrLayerStyles.push(newStyle); | 679 | this.arrLayerStyles.push(newStyle); |
638 | this.selectStyle(this.arrLayerStyles.length -1); | 680 | this.selectStyle(this.arrLayerStyles.length -1); |
639 | 681 | ||
@@ -643,6 +685,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
643 | defaultEventManager.dispatchEvent(newEvent); | 685 | defaultEventManager.dispatchEvent(newEvent); |
644 | } | 686 | } |
645 | }, | 687 | }, |
688 | |||
646 | deleteStyle : { | 689 | deleteStyle : { |
647 | value: function() { | 690 | value: function() { |
648 | 691 | ||
@@ -757,6 +800,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
757 | this.triggerOutgoingBinding(); | 800 | this.triggerOutgoingBinding(); |
758 | 801 | ||
759 | this.addStyle(); | 802 | this.addStyle(); |
803 | |||
760 | } | 804 | } |
761 | }, | 805 | }, |
762 | handleDeleteStyleClick: { | 806 | handleDeleteStyleClick: { |
@@ -903,6 +947,238 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
903 | return false; | 947 | return false; |
904 | } | 948 | } |
905 | }, | 949 | }, |
950 | |||
951 | handleLeftChange: { | ||
952 | value: function(event) { | ||
953 | var prevPosition; | ||
954 | if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){ | ||
955 | if(!event.wasSetByCode) { | ||
956 | if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; | ||
957 | this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Change", "timeline", prevPosition); | ||
958 | this.savedPosition = null; | ||
959 | } | ||
960 | |||
961 |