diff options
author | Valerio Virgillito | 2012-02-06 14:36:51 -0800 |
---|---|---|
committer | Valerio Virgillito | 2012-02-06 14:36:51 -0800 |
commit | 191898aaa63b357b5709b94cd38e15a258a9d95f (patch) | |
tree | 7fa44f2ec5042b942f37151bbfb67f875680f040 /js/panels | |
parent | 08eafdff4ec25d34e2e76b386145a9fd122431dc (diff) | |
parent | 07e5839e0ec6da2eb71056ff18b90226af213eef (diff) | |
download | ninja-191898aaa63b357b5709b94cd38e15a258a9d95f.tar.gz |
Merge branch 'master' into components
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/Color/colortoolbar.reel/colortoolbar.js | 68 | ||||
-rw-r--r-- | js/panels/properties/content.reel/content.js | 142 |
2 files changed, 73 insertions, 137 deletions
diff --git a/js/panels/Color/colortoolbar.reel/colortoolbar.js b/js/panels/Color/colortoolbar.reel/colortoolbar.js index 19fe7b85..6b8e476b 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: true, 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: true, type: 'change'}, webGlColor: [1, 1, 1, 1]} |
43 | }, | 43 | }, |
44 | //////////////////////////////////////////////////////////////////// | 44 | //////////////////////////////////////////////////////////////////// |
45 | // | 45 | // |
@@ -86,8 +86,8 @@ exports.ColorToolbar = Montage.create(Component, { | |||
86 | this.application.ninja.colorController.addButton('chip', this.fill_btn); | 86 | this.application.ninja.colorController.addButton('chip', this.fill_btn); |
87 | this.application.ninja.colorController.addButton('chip', this.stroke_btn); | 87 | this.application.ninja.colorController.addButton('chip', this.stroke_btn); |
88 | // | 88 | // |
89 | this.fill_btn.color('rgb', {wasSetByCode: false, type: 'change', color: {r: 255, g: 255, b: 255}, css: 'rgb(255,255,255)'}); | 89 | this.fill_btn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 255, b: 255}, css: 'rgb(255,255,255)'}); |
90 | this.stroke_btn.color('rgb', {wasSetByCode: false, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); | 90 | this.stroke_btn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); |
91 | } | 91 | } |
92 | }, | 92 | }, |
93 | //////////////////////////////////////////////////////////////////// | 93 | //////////////////////////////////////////////////////////////////// |
@@ -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 3cedee6d..0088447a 100644 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js | |||
@@ -97,10 +97,24 @@ exports.Content = Montage.create(Component, { | |||
97 | value: function(event) { | 97 | value: function(event) { |
98 | // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update | 98 | // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update |
99 | if(event.detail.source && event.detail.source !== "pi") { | 99 | if(event.detail.source && event.detail.source !== "pi") { |
100 | this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "left")); | 100 | // TODO - This should only update the properties that were changed. |
101 | this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "top")); | 101 | var el = this.application.ninja.selectedElements[0]._element || this.application.ninja.selectedElements[0]; |
102 | this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); | ||
103 | this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); | ||
104 | this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); | ||
105 | this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); | ||
106 | |||
107 | if(this.threeD.inGlobalMode) | ||
108 | { | ||
109 | this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); | ||
110 | this.threeD.y3D = ElementsMediator.get3DProperty(el, "y3D"); | ||
111 | this.threeD.z3D = ElementsMediator.get3DProperty(el, "z3D"); | ||
112 | this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle"); | ||
113 | this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle"); | ||
114 | this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle"); | ||
102 | } | 115 | } |
103 | } | 116 | } |
117 | } | ||
104 | }, | 118 | }, |
105 | 119 | ||
106 | handleSelectionChange: { | 120 | handleSelectionChange: { |
@@ -141,7 +155,8 @@ exports.Content = Montage.create(Component, { | |||
141 | 155 | ||
142 | displayElementProperties: { | 156 | displayElementProperties: { |
143 | value: function (el) { | 157 | value: function (el) { |
144 | var customPI; | 158 | var customPI, |
159 | currentValue; | ||
145 | 160 | ||
146 | this.elementName = el.elementModel.selection; | 161 | this.elementName = el.elementModel.selection; |
147 | this.elementId.value = el.getAttribute("id") || ""; | 162 | this.elementId.value = el.getAttribute("id") || ""; |
@@ -180,90 +195,52 @@ exports.Content = Montage.create(Component, { | |||
180 | for(var j = 0, fields; fields = customSec.Section[j]; j++) { | 195 | for(var j = 0, fields; fields = customSec.Section[j]; j++) { |
181 | for(var k = 0, control; control = fields[k]; k++) { | 196 | for(var k = 0, control; control = fields[k]; k++) { |
182 | 197 | ||
183 | if(control.prop !== "border-color" && control.prop !== "background-color") { | 198 | if(control.type !== "color") { |
184 | var currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); | 199 | currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); |
185 | if(currentValue === null) | 200 | if(currentValue === null) |
186 | { | 201 | { |
187 | currentValue = control.defaultValue; | 202 | currentValue = control.defaultValue; |
188 | } | 203 | } |
189 | this.customSections[i].content.controls[control.id] = currentValue; | 204 | this.customSections[i].content.controls[control.id] = currentValue; |
190 | } | 205 | } |
206 | else | ||
207 |