aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Color/colortoolbar.reel/colortoolbar.js64
-rw-r--r--js/panels/properties/content.reel/content.js129
2 files changed, 56 insertions, 137 deletions
diff --git a/js/panels/Color/colortoolbar.reel/colortoolbar.js b/js/panels/Color/colortoolbar.reel/colortoolbar.js
index 19fe7b85..10ae8b6e 100644
--- a/js/panels/Color/colortoolbar.reel/colortoolbar.js
+++ b/js/panels/Color/colortoolbar.reel/colortoolbar.js
@@ -20,7 +20,7 @@ exports.ColorToolbar = Montage.create(Component, {
20 //Storing stroke (stores color in mode use to select color) 20 //Storing stroke (stores color in mode use to select color)
21 _stroke: { 21 _stroke: {
22 enumerable: false, 22 enumerable: false,
23 value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)'}, webGlColor: [0, 0, 0, 1]} 23 value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode:'rgb', wasSetByCode: false, type: 'change'}, webGlColor: [0, 0, 0, 1]}
24 }, 24 },
25 //////////////////////////////////////////////////////////////////// 25 ////////////////////////////////////////////////////////////////////
26 // 26 //
@@ -39,7 +39,7 @@ exports.ColorToolbar = Montage.create(Component, {
39 //Storing fill (stores color in mode use to select color) 39 //Storing fill (stores color in mode use to select color)
40 _fill: { 40 _fill: {
41 enumerable: false, 41 enumerable: false,
42 value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)'}, webGlColor: [1, 1, 1, 1]} 42 value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode:'rgb', wasSetByCode: false, type: 'change'}, webGlColor: [1, 1, 1, 1]}
43 }, 43 },
44 //////////////////////////////////////////////////////////////////// 44 ////////////////////////////////////////////////////////////////////
45 // 45 //
@@ -95,76 +95,38 @@ exports.ColorToolbar = Montage.create(Component, {
95 didDraw: { 95 didDraw: {
96 enumerable: false, 96 enumerable: false,
97 value: function() { 97 value: function() {
98 // 98
99 this.fill_btn.addEventListener('change', function (e) { 99 this.fill_btn.addEventListener('change', function (e) {
100 // 100 this.fill = e._event;
101 var temp; 101 this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
102 //
103 this.fill = e._event;
104 //
105 if (e._event.color && e._event.color.l) {
106 temp = this.application.ninja.colorController.colorModel.hslToRgb(e._event.color.h/360, e._event.color.s/100, e._event.color.l/100);
107 temp.a = e._event.color.a;
108 } else if (e._event.color && e._event.color.r){
109 temp = e._event.color;
110 temp.a = e._event.color.a;
111 } else {
112 temp = null;
113 }
114 //WebGL uses array
115 if (temp) {
116 this.fill.webGlColor = [temp.r/255, temp.g/255, temp.b/255, temp.a];
117 } else {
118 this.fill.webGlColor = null;
119 }
120 //
121 this.application.ninja.colorController.colorModel.input = 'fill'; 102 this.application.ninja.colorController.colorModel.input = 'fill';
122 // 103
123 var color = e._event.color; 104 var color = e._event.color;
124 if (e._event.colorMode !== 'nocolor' && color) { 105 if (e._event.colorMode !== 'nocolor' && color) {
125 color.wasSetByCode = false; 106 color.wasSetByCode = false;
126 color.type = 'change'; 107 color.type = 'change';
108 color.mode = e._event.colorMode;
127 this.application.ninja.colorController.colorModel[e._event.colorMode] = color; 109 this.application.ninja.colorController.colorModel[e._event.colorMode] = color;
128 } else { 110 } else {
129 this.application.ninja.colorController.colorModel.applyNoColor(); 111 this.application.ninja.colorController.colorModel.applyNoColor();
130 } 112 }
131 //
132 this.application.ninja.colorController.colorModel.input = 'chip'; 113 this.application.ninja.colorController.colorModel.input = 'chip';
133 }.bind(this)); 114 }.bind(this));
134 // 115
135 this.stroke_btn.addEventListener('change', function (e) { 116 this.stroke_btn.addEventListener('change', function (e) {
136 //
137 var temp;
138 //
139 this.stroke = e._event; 117 this.stroke = e._event;
140 // 118 this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
141 if (e._event.color && e._event.color.l) {
142 temp = this.application.ninja.colorController.colorModel.hslToRgb(e._event.color.h/360, e._event.color.s/100, e._event.color.l/100);
143 temp.a = e._event.color.a;
144 } else if (e._event.color && e._event.color.r){
145 temp = e._event.color;
146 temp.a = e._event.color.a;
147 } else {
148 temp = null;
149 }
150 //WebGL uses array
151 if (temp) {
152 this.stroke.webGlColor = [temp.r/255, temp.g/255, temp.b/255, temp.a];
153 } else {
154 this.stroke.webGlColor = null;
155 }
156 //
157 this.application.ninja.colorController.colorModel.input = 'stroke'; 119 this.application.ninja.colorController.colorModel.input = 'stroke';
158 // 120
159 var color = e._event.color; 121 var color = e._event.color;
160 if (e._event.colorMode !== 'nocolor' && color) { 122 if (e._event.colorMode !== 'nocolor' && color) {
161 color.wasSetByCode = false; 123 color.wasSetByCode = false;
162 color.type = 'change'; 124 color.type = 'change';
125 color.mode = e._event.colorMode;
163 this.application.ninja.colorController.colorModel[e._event.colorMode] = color; 126 this.application.ninja.colorController.colorModel[e._event.colorMode] = color;
164 } else { 127 } else {
165 this.application.ninja.colorController.colorModel.applyNoColor(); 128 this.application.ninja.colorController.colorModel.applyNoColor();
166 } 129 }
167 //
168 this.application.ninja.colorController.colorModel.input = 'chip'; 130 this.application.ninja.colorController.colorModel.input = 'chip';
169 }.bind(this)); 131 }.bind(this));
170 } 132 }
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js
index e2ea1374..20dc308f 100644
--- a/js/panels/properties/content.reel/content.js
+++ b/js/panels/properties/content.reel/content.js
@@ -112,9 +112,9 @@ exports.Content = Montage.create(Component, {
112 this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle"); 112 this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle");
113 this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle"); 113 this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle");
114 this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle"); 114 this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle");
115 }
116 } 115 }
117 } 116 }
117 }
118 }, 118 },
119 119
120 handleSelectionChange: { 120 handleSelectionChange: {
@@ -155,7 +155,8 @@ exports.Content = Montage.create(Component, {
155 155
156 displayElementProperties: { 156 displayElementProperties: {
157 value: function (el) { 157 value: function (el) {
158 var customPI; 158 var customPI,
159 currentValue;
159 160
160 this.elementName = el.elementModel.selection; 161 this.elementName = el.elementModel.selection;
161 this.elementId.value = el.getAttribute("id") || ""; 162 this.elementId.value = el.getAttribute("id") || "";
@@ -194,90 +195,49 @@ exports.Content = Montage.create(Component, {
194 for(var j = 0, fields; fields = customSec.Section[j]; j++) { 195 for(var j = 0, fields; fields = customSec.Section[j]; j++) {
195 for(var k = 0, control; control = fields[k]; k++) { 196 for(var k = 0, control; control = fields[k]; k++) {
196 197
197 if(control.prop !== "border-color" && control.prop !== "background-color") { 198 if(control.type !== "color") {
198 var currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); 199 currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator);
199 if(currentValue === null) 200 currentValue ? currentValue = currentValue : currentValue = control.defaultValue;
201 this.customSections[0].content.controls[control.id] = currentValue;
202 }
203 else
204 {
205 currentValue = ElementsMediator.getColor2(el, control.prop, control.valueMutator);
206 if(control.prop === "border")
207 {
208 this.application.ninja.colorController.colorModel.input = "stroke";
209 }
210 else if(control.prop === "background")
211 {
212 this.application.ninja.colorController.colorModel.input = "fill";
213 }
214
215 if(currentValue)
200 { 216 {
201 currentValue = control.defaultValue; 217 if(currentValue.mode === "gradient")
218 {
219 this.application.ninja.colorController.colorModel["gradient"] =
220 {value: currentValue.color, wasSetByCode: true, type: 'change'};
221 }
222 else
223 {
224 if (currentValue.color.a !== undefined)
225 {
226 this.application.ninja.colorController.colorModel.alpha =
227 {value: currentValue.color.a, wasSetByCode: true, type: 'change'};
228 }
229 this.application.ninja.colorController.colorModel[currentValue.color.mode] = currentValue.color;
230 }
231 }
232 else
233 {
234 this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
235 this.application.ninja.colorController.colorModel.applyNoColor();
202 } 236 }
203 this.customSections[i].content.controls[control.id] = currentValue;
204 } 237 }
205 } 238 }
206 } 239 }