From 509092ff335f74517a413cfb2deeb9d2de20f8e3 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 12 Jun 2012 15:13:09 -0700 Subject: Fixing properties panel to support px and % for body and other elements. Signed-off-by: Nivesh Rajbhandari --- js/components/hottext.reel/hottext.js | 13 +++- js/components/hottextunit.reel/hottextunit.js | 9 ++- js/controllers/elements/body-controller.js | 2 +- js/data/pi/pi-data.js | 60 +++++++++---------- js/panels/properties.reel/properties.js | 70 +++++++++++++++++----- .../properties.reel/sections/custom.reel/custom.js | 6 ++ .../sections/position-size.reel/position-size.html | 16 ++++- .../sections/position-size.reel/position-size.js | 40 +++++++++---- 8 files changed, 151 insertions(+), 65 deletions(-) diff --git a/js/components/hottext.reel/hottext.js b/js/components/hottext.reel/hottext.js index 0480597a..93e6e745 100755 --- a/js/components/hottext.reel/hottext.js +++ b/js/components/hottext.reel/hottext.js @@ -121,13 +121,19 @@ var HotText = exports.HotText = Montage.create(SliderBase, { value: 2000 }, + // Flag used to dispatch a single change event if either or both of value and units are changed + _unitsModified: { + enumerable: false, + value: false + }, + value: { serializable: true, enumerable: true, get: function() { return this._value; }, - set: function(value, fromInput) { + set: function(value) { if (isNaN(value)) { this._valueSyncedWithInputField = false; this.needsDraw = true; @@ -149,6 +155,9 @@ var HotText = exports.HotText = Montage.create(SliderBase, { this._valueSyncedWithInputField = false; this.needsDraw = true; this._dispatchActionEvent(); + } else if(this._unitsModified) { + // Need to dispatch change event if units changed + this._dispatchActionEvent(); } } }, @@ -164,7 +173,7 @@ var HotText = exports.HotText = Montage.create(SliderBase, { enumerable: false, value: function() { this._setEventFlags("change", false); - Object.getPropertyDescriptor(this, "value").set.call(this, this.inputFunction(this.element.value), true); + this.value = this.inputFunction(this.element.value); } }, diff --git a/js/components/hottextunit.reel/hottextunit.js b/js/components/hottextunit.reel/hottextunit.js index 448eb9d7..2a89db03 100755 --- a/js/components/hottextunit.reel/hottextunit.js +++ b/js/components/hottextunit.reel/hottextunit.js @@ -40,11 +40,14 @@ var HotTextUnit = exports.HotTextUnit = Montage.create(HotText, { if(this._acceptableUnits.indexOf(value) !== -1) { this._units = value; + this._unitsModified = true; this.needsDraw = true; - this._setEventFlags("change", false); + this._setEventFlags("change", true); this._dispatchActionEvent(); } + } else { + this._unitsModified = false; } } }, @@ -89,13 +92,13 @@ var HotTextUnit = exports.HotTextUnit = Montage.create(HotText, { var match = (unitsString.replace(noSpaces, "$2")).toLowerCase(); if(match) { - Object.getPropertyDescriptor(this, "units").set.call(this, match); + this.units = match; } } this._setEventFlags("change", false); // Moving this call to after setting the value since value changes are dispatching events before units are set - Object.getPropertyDescriptor(this, "value").set.call(this, this.inputFunction(inputString), false); + this.value = this.inputFunction(inputString); } }, diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js index 0dc11b82..27989c65 100755 --- a/js/controllers/elements/body-controller.js +++ b/js/controllers/elements/body-controller.js @@ -37,7 +37,7 @@ exports.BodyController = Montage.create(ElementController, { case "height": case "width": case "-webkit-transform-style": - return this.application.ninja.stylesController.getElementStyle(el, p, true, true); + return this.application.ninja.stylesController.getElementStyle(el, p); default: return ElementController.getProperty(el, p, true, true); //console.log("Undefined Stage property ", p); diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js index 92d70141..e3e1de15 100755 --- a/js/data/pi/pi-data.js +++ b/js/data/pi/pi-data.js @@ -52,8 +52,8 @@ exports.PiData = Montage.create( Montage, { type : "hottext", id : "borderWidth", prop : "border-width", - defaultValue: 0, - valueMutator: parseFloat, + defaultValue: "0 px", + inputFunction: parseFloat, label : "Border", min : 0, max : 100, @@ -131,8 +131,8 @@ exports.PiData = Montage.create( Montage, { type : "hottext", id : "borderWidth", prop : "border-width", - defaultValue: 0, - valueMutator: parseFloat, + defaultValue: "0 px", + inputFunction: parseFloat, label : "Border", min : 0, max : 100, @@ -254,8 +254,8 @@ exports.PiData = Montage.create( Montage, { type : "hottext", id : "borderWidth", prop : "border-width", - defaultValue: 0, - valueMutator: parseFloat, + defaultValue: "0 px", + inputFunction: parseFloat, label : "Border", min : 0, max : 100, @@ -313,7 +313,7 @@ exports.PiData = Montage.create( Montage, { id : "strokeSize", prop : "strokeSize", label : "Stroke", - valueMutator: parseFloat, + inputFunction: parseFloat, min : 0, max : 100, value : 1, @@ -333,23 +333,23 @@ exports.PiData = Montage.create( Montage, { id: "tlRadius", prop : "tlRadius", label: "TL", - valueMutator: parseFloat, + inputFunction: parseFloat, value : 0, min : 0, - max : 100, - unit : "px", - acceptableUnits: ["px", "pt", "%"] + max : 1000, + acceptableUnits: ["px", "pt", "%"], + unit : "px" }, { type : "hottext", id : "trRadius", prop : "trRadius", label : "TR", - valueMutator: parseFloat, + inputFunction: parseFloat, min : 0, - max : 100, - unit : "px", + max : 1000, acceptableUnits: ["px", "pt", "%"], + unit : "px", divider: true } ], @@ -359,22 +359,22 @@ exports.PiData = Montage.create( Montage, { id : "blRadius", prop : "blRadius", label : "BL", - valueMutator: parseFloat, + inputFunction: parseFloat, min : 0, - max : 100, - unit : "px", - acceptableUnits: ["px", "pt", "%"] + max : 1000, + acceptableUnits: ["px", "pt", "%"], + unit : "px" }, { type : "hottext", id : "brRadius", prop : "brRadius", label : "BR", - valueMutator: parseFloat, + inputFunction: parseFloat, min : 0, - max : 100, - unit : "px", - acceptableUnits: ["px", "pt", "%"] + max : 1000, + acceptableUnits: ["px", "pt", "%"], + unit : "px" } ] ] @@ -473,7 +473,7 @@ exports.PiData = Montage.create( Montage, { id : "strokeSize", prop : "strokeSize", label : "Stroke", - valueMutator: parseFloat, + inputFunction: parseFloat, min : 0, max : 100, value : 1, @@ -557,7 +557,7 @@ exports.PiData = Montage.create( Montage, { id : "strokeSize", prop : "strokeSize", label : "Stroke", - valueMutator: parseFloat, + inputFunction: parseFloat, min : 0, max : 100, value : 1, @@ -577,7 +577,7 @@ exports.PiData = Montage.create( Montage, { id: "innerRadius", prop: "innerRadius", label: "Inner R", - valueMutator: parseFloat, + inputFunction: parseFloat, value : 0, min : 0, max : 99, @@ -681,7 +681,7 @@ exports.PiData = Montage.create( Montage, { id : "strokeSize", prop : "strokeSize", label : "Stroke", - valueMutator: parseFloat, + inputFunction: parseFloat, min : 1, max : 100, value : 1, @@ -720,7 +720,7 @@ exports.PiData = Montage.create( Montage, { id : "strokeSize", prop : "strokeSize", label : "Stroke", - valueMutator: parseInt, + inputFunction: parseInt, min : 1, max : 100, value : 1, @@ -732,7 +732,7 @@ exports.PiData = Montage.create( Montage, { id : "strokeHardness", prop : "strokeHardness", label : "Hardness", - valueMutator: parseInt, + inputFunction: parseInt, min : 0, max : 100, value : 100, @@ -759,7 +759,7 @@ exports.PiData = Montage.create( Montage, { id : "strokeSmoothing", prop : "strokeSmoothing", label : "Amount", - valueMutator: parseFloat, + inputFunction: parseFloat, min : 0, max : 100, value : 0, @@ -787,7 +787,7 @@ exports.PiData = Montage.create( Montage, { id : "strokeAngle", prop : "strokeAngle", label : "Angle", - valueMutator: parseFloat, + inputFunction: parseFloat, min : -90, max : 90, value : 0, diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index cc99ca6c..33e66515 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -143,6 +143,7 @@ exports.Properties = Montage.create(Component, { handleElementChange: { value: function(event) { + var l, t, h, w, lvu, tvu, hvu, wvu; // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update if(event.detail.source && event.detail.source !== "pi") { var el = this.application.ninja.currentDocument.model.documentRoot; @@ -151,10 +152,24 @@ exports.Properties = Montage.create(Component, { } // TODO - This should only update the properties that were changed. - this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); - this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); - this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); - this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); + l = ElementsMediator.getProperty(el, "left"); + t = ElementsMediator.getProperty(el, "top"); + lvu = document.application.njUtils.getValueAndUnits(l); + tvu = document.application.njUtils.getValueAndUnits(t); + this.positionSize.leftUnits = lvu[1]; + this.positionSize.leftPosition = lvu[0]; + this.positionSize.topUnits = tvu[1]; + this.positionSize.topPosition = tvu[0]; + + h = ElementsMediator.getProperty(el, "height"); + w = ElementsMediator.getProperty(el, "width"); + hvu = document.application.njUtils.getValueAndUnits(h); + wvu = document.application.njUtils.getValueAndUnits(w); + + this.positionSize.heightUnits = hvu[1] || "px"; // canvas (and shapes) don't have units. + this.positionSize.heightSize = hvu[0]; + this.positionSize.widthUnits = wvu[1] || "px"; + this.positionSize.widthSize = wvu[0]; if(this.threeD.inGlobalMode) { this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); @@ -209,7 +224,8 @@ exports.Properties = Montage.create(Component, { displayElementProperties: { value: function (el) { - var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument; + var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument, + l, t, h, w, lvu, tvu, hvu, wvu; this.elementName.value = el.elementModel.selection; this.elementId.value = el.getAttribute("id") || ""; @@ -219,11 +235,24 @@ exports.Properties = Montage.create(Component, { this.threeD.disableTranslation = isRoot; this.threeD.flatten = ElementsMediator.getProperty(el, "-webkit-transform-style") !== "preserve-3d"; - this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); - this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); - this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); - this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); -// this.positionSize.widthSize = ElementsMediator.getProperty(el, "width"); + l = ElementsMediator.getProperty(el, "left"); + t = ElementsMediator.getProperty(el, "top"); + lvu = document.application.njUtils.getValueAndUnits(l); + tvu = document.application.njUtils.getValueAndUnits(t); + this.positionSize.leftUnits = lvu[1]; + this.positionSize.leftPosition = lvu[0]; + this.positionSize.topUnits = tvu[1]; + this.positionSize.topPosition = tvu[0]; + + h = ElementsMediator.getProperty(el, "height"); + w = ElementsMediator.getProperty(el, "width"); + hvu = document.application.njUtils.getValueAndUnits(h); + wvu = document.application.njUtils.getValueAndUnits(w); + + this.positionSize.heightUnits = hvu[1] || "px"; // canvas (and shapes) don't have units. + this.positionSize.heightSize = hvu[0]; + this.positionSize.widthUnits = wvu[1] || "px"; + this.positionSize.widthSize = wvu[0]; if(this.threeD.inGlobalMode) { @@ -277,10 +306,19 @@ exports.Properties = Montage.create(Component, { if(control.type !== "color") { currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); - if(currentValue === null) { - currentValue = control.defaultValue; + if(control.type === "hottext") { + if(currentValue == null) { + currentValue = control.defaultValue; + } + currentValue = document.application.njUtils.getValueAndUnits(currentValue); + this.customSections[i].content.controls[control.id + "Units"] = currentValue[1] || "px"; + this.customSections[i].content.controls[control.id] = currentValue[0]; + } else { + if(currentValue === null) { + currentValue = control.defaultValue; + } + this.customSections[i].content.controls[control.id] = currentValue; } - this.customSections[i].content.controls[control.id] = currentValue; } else { if(control.prop === "border") { // TODO - For now, always return the top border if multiple border sides @@ -402,7 +440,11 @@ exports.Properties = Montage.create(Component, { value: function(e) { if(e.wasSetByCode) return; - ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [e.value + "px"], "Changing", "pi"); + var newValue; + + e.units ? newValue = e.value + e.units : newValue = e.value; + + ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [newValue], "Changing", "pi"); } } 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, { boundObjectPropertyPath: "value" }); + //Bind object value to controls list so it can be manipulated + Object.defineBinding(this.controls, aField.id + "Units", { + boundObject: obj, + boundObjectPropertyPath: "units" + }); + return obj; } }, 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 5d1a805a..bc93da33 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 "properties": { "element": {"#": "PosX"}, "maxValue": 10000, - "minValue": -10000 + "minValue": -10000, + "acceptableUnits" : ["px", "%"], + "units": "px" }, "bindings": { + "units": {"<<->": "@owner.leftUnits"}, "value": {"<<->": "@owner.leftPosition"} } }, @@ -40,9 +43,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "properties": { "element": {"#": "PosY"}, "maxValue": 10000, - "minValue": -10000 + "minValue": -10000, + "acceptableUnits" : ["px", "%"], + "units": "px" }, "bindings": { + "units": {"<<->": "@owner.topUnits"}, "value": {"<<->": "@owner.topPosition"} } }, @@ -50,9 +56,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "PosH": { "prototype": "js/components/hottextunit.reel[HotTextUnit]", "properties": { - "element": {"#": "PosH"} + "element": {"#": "PosH"}, + "acceptableUnits" : ["px", "%"], + "units": "px" }, "bindings": { + "units": {"<<->": "@owner.heightUnits"}, "value": {"<<->": "@owner.heightSize"} } }, @@ -65,6 +74,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "units": "px" }, "bindings": { + "units": {"<<->": "@owner.widthUnits"}, "value": {"<<->": "@owner.widthSize"} } diff --git a/js/panels/properties.reel/sections/position-size.reel/position-size.js b/js/panels/properties.reel/sections/position-size.reel/position-size.js index 7c24e02a..d9fd629c 100755 --- a/js/panels/properties.reel/sections/position-size.reel/position-size.js +++ b/js/panels/properties.reel/sections/position-size.reel/position-size.js @@ -12,17 +12,33 @@ exports.PositionSize = Montage.create(Component, { value: 0 }, + leftUnits: { + value: "px" + }, + topPosition: { value: 0 }, + topUnits: { + value: "px" + }, + heightSize: { value: 0 }, + heightUnits: { + value: "px" + }, + widthSize: { value: 0 }, + + widthUnits: { + value: "px" + }, /* widthSize: { get: function() { return this._widthSize;}, @@ -132,7 +148,7 @@ exports.PositionSize = Montage.create(Component, { if(!event.wasSetByCode) { if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; - this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "left", [this.leftControl.value + "px"] , "Change", "pi", prevPosition); + this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "left", [this.leftControl.value + this.leftControl.units] , "Change", "pi", prevPosition); this.savedPosition = null; } } @@ -145,7 +161,7 @@ exports.PositionSize = Montage.create(Component, { if(!event.wasSetByCode) { if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; - this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "top", [this.topControl.value + "px"] , "Change", "pi", prevPosition); + this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "top", [this.topControl.value + this.topControl.units] , "Change", "pi", prevPosition); this.savedPosition = null; } } @@ -156,7 +172,7 @@ exports.PositionSize = Montage.create(Component, { var prevPosition, items; if(!event.wasSetByCode) { - if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; + if(this.savedPosition) prevPosition = [this.savedPosition]; this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.model.documentRoot]; @@ -170,7 +186,7 @@ exports.PositionSize = Montage.create(Component, { this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Change", "pi"); } - this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Change", "pi", prevPosition); + this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + this.heightControl.units] , "Change", "pi", prevPosition); this.savedPosition = null; } } @@ -181,7 +197,7 @@ exports.PositionSize = Montage.create(Component, { var prevPosition, items; if(!event.wasSetByCode) { - if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; + if(this.savedPosition) prevPosition = [this.savedPosition]; this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.model.documentRoot]; @@ -196,7 +212,7 @@ exports.PositionSize = Montage.create(Component, { } - this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Change", "pi", prevPosition); + this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + this.widthControl.units] , "Change", "pi", prevPosition); this.savedPosition = null; } @@ -208,7 +224,7 @@ exports.PositionSize = Montage.create(Component, { value: function(event) { if(!event.wasSetByCode) { if(!this.savedPosition) this.savedPosition = this.leftPosition; - this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "left", [this.leftControl.value + "px"] , "Changing", "pi"); + this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "left", [this.leftControl.value + this.leftControl.units] , "Changing", "pi"); } } @@ -218,7 +234,7 @@ exports.PositionSize = Montage.create(Component, { value: function(event) { if(!event.wasSetByCode) { if(!this.savedPosition) this.savedPosition = this.topPosition; - this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "top", [this.topControl.value + "px"] , "Changing", "pi"); + this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "top", [this.topControl.value + this.topControl.units] , "Changing", "pi"); } } @@ -229,7 +245,7 @@ exports.PositionSize = Montage.create(Component, { var items; if(!event.wasSetByCode) { - if(!this.savedPosition) this.savedPosition = this.heightSize; + if(!this.savedPosition) this.savedPosition = this.heightSize + " " + this.heightUnits; this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.model.documentRoot]; @@ -243,7 +259,7 @@ exports.PositionSize = Montage.create(Component, { this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Changing", "pi"); } - this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Changing", "pi"); + this.application.ninja.elementMediator.setProperty(items, "height", [this.heightSize + this.heightUnits] , "Changing", "pi"); } } @@ -254,7 +270,7 @@ exports.PositionSize = Montage.create(Component, { var items; if(!event.wasSetByCode) { - if(!this.savedPosition) this.savedPosition = this.widthSize; + if(!this.savedPosition) this.savedPosition = this.widthSize + " " + this.widthUnits; this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.model.documentRoot]; @@ -267,7 +283,7 @@ exports.PositionSize = Montage.create(Component, { this.application.ninja.elementMediator.setProperty(items, "height", [newHeight + "px"] , "Changing", "pi"); } - this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Changing", "pi"); + this.application.ninja.elementMediator.setProperty(items, "width", [this.widthSize + this.widthUnits] , "Changing", "pi"); } } } -- cgit v1.2.3