aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Color/colortoolbar.reel/colortoolbar.js68
-rw-r--r--js/panels/properties/content.reel/content.js142
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 {
208 currentValue = ElementsMediator.getColor2(el, control.prop, control.valueMutator);
209 if(control.prop === "border")