diff options
Diffstat (limited to 'js/panels')
4 files changed, 107 insertions, 29 deletions
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index e9d9472e..43c92b74 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js | |||
@@ -156,6 +156,7 @@ exports.Properties = Montage.create(Component, { | |||
156 | 156 | ||
157 | handleElementChange: { | 157 | handleElementChange: { |
158 | value: function(event) { | 158 | value: function(event) { |
159 | var l, t, h, w, lvu, tvu, hvu, wvu; | ||
159 | // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update | 160 | // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update |
160 | if(event.detail.source && event.detail.source !== "pi") { | 161 | if(event.detail.source && event.detail.source !== "pi") { |
161 | var el = this.application.ninja.currentDocument.model.documentRoot; | 162 | var el = this.application.ninja.currentDocument.model.documentRoot; |
@@ -164,10 +165,24 @@ exports.Properties = Montage.create(Component, { | |||
164 | } | 165 | } |
165 | 166 | ||
166 | // TODO - This should only update the properties that were changed. | 167 | // TODO - This should only update the properties that were changed. |
167 | this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); | 168 | l = ElementsMediator.getProperty(el, "left"); |
168 | this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); | 169 | t = ElementsMediator.getProperty(el, "top"); |
169 | this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); | 170 | lvu = document.application.njUtils.getValueAndUnits(l); |
170 | this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); | 171 | tvu = document.application.njUtils.getValueAndUnits(t); |
172 | this.positionSize.leftUnits = lvu[1]; | ||
173 | this.positionSize.leftPosition = lvu[0]; | ||
174 | this.positionSize.topUnits = tvu[1]; | ||
175 | this.positionSize.topPosition = tvu[0]; | ||
176 | |||
177 | h = ElementsMediator.getProperty(el, "height"); | ||
178 | w = ElementsMediator.getProperty(el, "width"); | ||
179 | hvu = document.application.njUtils.getValueAndUnits(h); | ||
180 | wvu = document.application.njUtils.getValueAndUnits(w); | ||
181 | |||
182 | this.positionSize.heightUnits = hvu[1] || "px"; // canvas (and shapes) don't have units. | ||
183 | this.positionSize.heightSize = hvu[0]; | ||
184 | this.positionSize.widthUnits = wvu[1] || "px"; | ||
185 | this.positionSize.widthSize = wvu[0]; | ||
171 | 186 | ||
172 | if(this.threeD.inGlobalMode) { | 187 | if(this.threeD.inGlobalMode) { |
173 | this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); | 188 | this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); |
@@ -222,7 +237,8 @@ exports.Properties = Montage.create(Component, { | |||
222 | 237 | ||
223 | displayElementProperties: { | 238 | displayElementProperties: { |
224 | value: function (el) { | 239 | value: function (el) { |
225 | var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument; | 240 | var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument, |
241 | l, t, h, w, lvu, tvu, hvu, wvu; | ||
226 | 242 | ||
227 | this.elementName.value = el.elementModel.selection; | 243 | this.elementName.value = el.elementModel.selection; |
228 | this.elementId.value = el.getAttribute("id") || ""; | 244 | this.elementId.value = el.getAttribute("id") || ""; |
@@ -232,11 +248,24 @@ exports.Properties = Montage.create(Component, { | |||
232 | this.threeD.disableTranslation = isRoot; | 248 | this.threeD.disableTranslation = isRoot; |
233 | this.threeD.flatten = ElementsMediator.getProperty(el, "-webkit-transform-style") !== "preserve-3d"; | 249 | this.threeD.flatten = ElementsMediator.getProperty(el, "-webkit-transform-style") !== "preserve-3d"; |
234 | 250 | ||
235 | this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); | 251 | l = ElementsMediator.getProperty(el, "left"); |
236 | this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); | 252 | t = ElementsMediator.getProperty(el, "top"); |
237 | this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); | 253 | lvu = document.application.njUtils.getValueAndUnits(l); |
238 | this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); | 254 | tvu = document.application.njUtils.getValueAndUnits(t); |
239 | // this.positionSize.widthSize = ElementsMediator.getProperty(el, "width"); | 255 | this.positionSize.leftUnits = lvu[1]; |
256 | this.positionSize.leftPosition = lvu[0]; | ||
257 | this.positionSize.topUnits = tvu[1]; | ||
258 | this.positionSize.topPosition = tvu[0]; | ||
259 | |||
260 | h = ElementsMediator.getProperty(el, "height"); | ||
261 | w = ElementsMediator.getProperty(el, "width"); | ||
262 | hvu = document.application.njUtils.getValueAndUnits(h); | ||
263 | wvu = document.application.njUtils.getValueAndUnits(w); | ||
264 | |||
265 | this.positionSize.heightUnits = hvu[1] || "px"; // canvas (and shapes) don't have units. | ||
266 | this.positionSize.heightSize = hvu[0]; | ||
267 | this.positionSize.widthUnits = wvu[1] || "px"; | ||
268 | this.positionSize.widthSize = wvu[0]; | ||
240 | 269 | ||
241 | if(this.threeD.inGlobalMode) | 270 | if(this.threeD.inGlobalMode) |
242 | { | 271 | { |
@@ -290,10 +319,23 @@ exports.Properties = Montage.create(Component, { | |||
290 | 319 | ||
291 | if(control.type !== "color") { | 320 | if(control.type !== "color") { |
292 | currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); | 321 | currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); |
293 | if(currentValue === null) { | 322 | if(control.type === "hottext") { |
294 | currentValue = control.defaultValue; | 323 | if(currentValue == null) { |
324 | currentValue = control.defaultValue; | ||
325 | } | ||
326 | if(typeof(currentValue) === "string") { | ||
327 | currentValue = document.application.njUtils.getValueAndUnits(currentValue); | ||
328 | this.customSections[i].content.controls[control.id + "Units"] = currentValue[1] || "px"; | ||
329 | this.customSections[i].content.controls[control.id] = currentValue[0]; | ||
330 | } else { | ||
331 | this.customSections[i].content.controls[control.id] = currentValue; | ||
332 | } | ||
333 | } else { | ||
334 | if(currentValue === null) { | ||
335 | currentValue = control.defaultValue; | ||
336 | } | ||
337 | this.customSections[i].content.controls[control.id] = currentValue; | ||
295 | } | 338 | } |
296 | this.customSections[i].content.controls[control.id] = currentValue; | ||
297 | } else { | 339 | } else { |
298 | if(control.prop === "border") { | 340 | if(control.prop === "border") { |
299 | // TODO - For now, always return the top border if multiple border sides | 341 | // TODO - For now, always return the top border if multiple border sides |
@@ -415,7 +457,11 @@ exports.Properties = Montage.create(Component, { | |||
415 | value: function(e) { | 457 | value: function(e) { |
416 | if(e.wasSetByCode) return; | 458 | if(e.wasSetByCode) return; |
417 | 459 | ||
418 | ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [e.value + "px"], "Changing", "pi"); | 460 | var newValue; |
461 | |||
462 | e.units ? newValue = e.value + e.units : newValue = e.value; | ||
463 | |||
464 | ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [newValue], "Changing", "pi"); | ||
419 | } | 465 | } |
420 | } | 466 | } |
421 | 467 | ||
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js index 9df16112..c599dcb0 100755 --- a/js/panels/properties.reel/sections/custom.reel/custom.js +++ b/js/panels/properties.reel/sections/custom.reel/custom.js | |||
@@ -233,6 +233,12 @@ exports.CustomSection = Montage.create(Component, { | |||
233 | boundObjectPropertyPath: "value" | 233 | boundObjectPropertyPath: "value" |
234 | }); | 234 | }); |
235 | 235 | ||
236 | //Bind object value to controls list so it can be manipulated | ||
237 | Object.defineBinding(this.controls, aField.id + "Units", { | ||
238 | boundObject: obj, | ||
239 | boundObjectPropertyPath: "units" | ||
240 | }); | ||
241 | |||
236 | return obj; | 242 | return obj; |
237 | } | 243 | } |
238 | }, | 244 | }, |
diff --git a/js/panels/properties.reel/sections/position-size.reel/position-size.html b/js/panels/properties.reel/sections/position-size.reel/position-size.html index ccc7a159..d322f826 100755 --- a/js/panels/properties.reel/sections/position-size.reel/position-size.html +++ b/js/panels/properties.reel/sections/position-size.reel/position-size.html | |||
@@ -29,9 +29,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
29 | "properties": { | 29 | "properties": { |
30 | "element": {"#": "PosX"}, | 30 | "element": {"#": "PosX"}, |
31 | "maxValue": 10000, | 31 | "maxValue": 10000, |
32 | "minValue": -10000 | 32 | "minValue": -10000, |
33 | "acceptableUnits" : ["px", "%"], | ||
34 | "units": "px" | ||
33 | }, | 35 | }, |
34 | "bindings": { | 36 | "bindings": { |
37 | "units": {"<->": "@owner.leftUnits"}, | ||
35 | "value": {"<->": "@owner.leftPosition"} | 38 | "value": {"<->": "@owner.leftPosition"} |
36 | } | 39 | } |
37 | }, | 40 | }, |
@@ -40,9 +43,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
40 | "properties": { | 43 | "properties": { |
41 | "element": {"#": "PosY"}, | 44 | "element": {"#": "PosY"}, |
42 | "maxValue": 10000, | 45 | "maxValue": 10000, |
43 | "minValue": -10000 | 46 | "minValue": -10000, |
47 | "acceptableUnits" : ["px", "%"], | ||
48 | "units": "px" | ||
44 | }, | 49 | }, |
45 | "bindings": { | 50 | "bindings": { |
51 | "units": {"<->": "@owner.topUnits"}, | ||
46 | "value": {"<->": "@owner.topPosition"} | 52 | "value": {"<->": "@owner.topPosition"} |
47 | } | 53 | } |
48 | }, | 54 | }, |
@@ -50,9 +56,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
50 | "PosH": { | 56 | "PosH": { |
51 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", | 57 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", |
52 | "properties": { | 58 | "properties": { |
53 | "element": {"#": "PosH"} | 59 | "element": {"#": "PosH"}, |
60 | "acceptableUnits" : ["px", "%"], | ||
61 | "units": "px" | ||
54 | }, | 62 | }, |
55 | "bindings": { | 63 | "bindings": { |
64 | "units": {"<->": "@owner.heightUnits"}, | ||
56 | "value": {"<->": "@owner.heightSize"} | 65 | "value": {"<->": "@owner.heightSize"} |
57 | } | 66 | } |
58 | }, | 67 | }, |
@@ -65,6 +74,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
65 | "units": "px" | 74 |