From 8f8eb57f4506987942745c3325492e939ed3caa8 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 14 May 2012 17:27:32 -0700 Subject: fixing the body pi Signed-off-by: Valerio Virgillito --- js/panels/properties.reel/properties.js | 155 +++++---------------- .../position-and-size.reel/position-and-size.html | 30 ++-- .../position-and-size.reel/position-and-size.js | 12 ++ 3 files changed, 52 insertions(+), 145 deletions(-) (limited to 'js/panels') diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 20f670d9..837e74bc 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -67,15 +67,11 @@ exports.Properties = Montage.create(Component, { } }, - // Document is opened - Display the current selection handleOpenDocument: { value: function() { - this.eventManager.addEventListener( "elementChange", this, false); - // For now always assume that the stage is selected by default when opening the old template - // TODO: Remove marker for old template: NINJA-STAGE-REWORK - + // Display the default document root PI this.displayElementProperties(this.application.ninja.currentDocument.documentRoot); } }, @@ -156,7 +152,7 @@ exports.Properties = Montage.create(Component, { 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"); if(this.threeD.inGlobalMode) { this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); @@ -173,8 +169,6 @@ exports.Properties = Montage.create(Component, { handleSelectionChange: { value: function(event) { if(event.detail.isDocument) { -// if(this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() === "body") return; -// this.displayStageProperties(); this.displayElementProperties(this.application.ninja.currentDocument.documentRoot); } else { if(this.application.ninja.selectedElements.length === 1) { @@ -187,98 +181,23 @@ exports.Properties = Montage.create(Component, { } }, - displayStageProperties: { - value: function() { - var stage = this.application.ninja.currentDocument.documentRoot; - //this is test code please remove - this.elementName.value = "Stage"; - this.elementId.value = stage.elementModel.id; - this.elementClass.value = ""; - - this.positionSize.disablePosition = true; - this.threeD.disableTranslation = true; - - this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(stage, "height")); - this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(stage, "width")); - - if(this.threeD.inGlobalMode) - { - this.threeD.xAngle = ElementsMediator.get3DProperty(stage, "xAngle"); - this.threeD.yAngle = ElementsMediator.get3DProperty(stage, "yAngle"); - this.threeD.zAngle = ElementsMediator.get3DProperty(stage, "zAngle"); - } - - this.threeD.flatten = ElementsMediator.getProperty(stage, "-webkit-transform-style") !== "preserve-3d"; - - if(this.customPi !== stage.elementModel.pi) { - // We need to unregister color chips from the previous selection from the Color Model - var len = this.customSections.length; - for(var n = 0, controls; n < len; n++) { - controls = this.customSections[n].content.controls; - if(controls["colorSelect"]) { - controls["colorSelect"].destroy(); - } else if(controls["stageBackground"]) { - controls["stageBackground"].destroy(); - } - } - - this.customPi = stage.elementModel.pi; - this.displayCustomProperties(stage, stage.elementModel.pi); - } - - // For now hardcode the background since it is the only custom property - // No need to loop through all the properties. - var backgroundChip = this.customSections[0].content.controls["background"]; - backgroundChip.color = ElementsMediator.getProperty(stage, "background"); - - /* - var customPI = PiData[this.customPi]; - // Get all the custom section for the custom PI - for(var i = 0, customSec; customSec = customPI[i]; i++) { - - // Now set the Fields for the custom PI - for(var j = 0, fields; fields = customSec.Section[j]; j++) { - for(var k = 0, control; control = fields[k]; k++) { - - var colorChipEl = this.customSections[i].content.controls[control.id]; - this.foo = colorChipEl; - colorChipEl.addEventListener("firstDraw", this, false); - - } - } - } - */ - } - }, - - handleFirstDraw: { - value: function() { - this.foo.chipBtn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 0, b: 0}, css: 'rgb(255,0,0)'}); - } - }, - displayElementProperties: { value: function (el) { - var customPI, - currentValue; + var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument; this.elementName.value = el.elementModel.selection; this.elementId.value = el.getAttribute("id") || ""; this.elementClass.value = el.getAttribute("class"); - this.positionSize.disablePosition = false; - this.threeD.disableTranslation = false; + this.positionSize.disablePosition = isRoot; + 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")); - - if(ElementsMediator.getProperty(el, "-webkit-transform-style") === "preserve-3d") { - this.threeD.flatten = false; - } else { - this.threeD.flatten = true; - } +// this.positionSize.widthSize = ElementsMediator.getProperty(el, "width"); if(this.threeD.inGlobalMode) { @@ -306,6 +225,12 @@ exports.Properties = Montage.create(Component, { this.customPi = el.elementModel.pi; this.displayCustomProperties(el, el.elementModel.pi); } + + if(isRoot) { + var backgroundChip = this.customSections[0].content.controls["background"]; + backgroundChip.color = ElementsMediator.getProperty(el, "background"); + } + var previousInput = this.application.ninja.colorController.colorModel.input; customPI = PiData[this.customPi]; // Get all the custom section for the custom PI @@ -317,64 +242,47 @@ exports.Properties = Montage.create(Component, { if(control.type !== "color") { currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); - if(currentValue === null) - { + if(currentValue === null) { currentValue = control.defaultValue; } this.customSections[i].content.controls[control.id] = currentValue; - } - else - { - if(control.prop === "border") - { + } else { + if(control.prop === "border") { // TODO - For now, always return the top border if multiple border sides currentValue = ElementsMediator.getColor(el, false, "top"); this.application.ninja.colorController.colorModel.input = "stroke"; - } - else if(control.prop === "background") - { + } else if(control.prop === "background") { currentValue = ElementsMediator.getColor(el, true); this.application.ninja.colorController.colorModel.input = "fill"; } - if(currentValue) - { - if(currentValue.color) - { + if(currentValue) { + if(currentValue.color) { currentValue.color.wasSetByCode = true; currentValue.color.type = "change"; } - if(currentValue.mode === "gradient") - { - this.application.ninja.colorController.colorModel["gradient"] = - {value: currentValue.color, wasSetByCode: true, type: 'change'}; - } - else - { - if (currentValue.color.a !== undefined) - { - this.application.ninja.colorController.colorModel.alpha = - {value: currentValue.color.a, wasSetByCode: true, type: 'change'}; + if(currentValue.mode === "gradient") { + this.application.ninja.colorController.colorModel["gradient"] = {value: currentValue.color, wasSetByCode: true, type: 'change'}; + } else { + if (currentValue.color.a !== undefined) { + this.application.ninja.colorController.colorModel.alpha = {value: currentValue.color.a, wasSetByCode: true, type: 'change'}; } - if(currentValue.color.mode) - { + + if(currentValue.color.mode) { this.application.ninja.colorController.colorModel[currentValue.color.mode] = currentValue.color; - } - else - { + } else { this.application.ninja.colorController.colorModel["rgb"] = currentValue.color; } } - } - else - { + } else { this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; this.application.ninja.colorController.colorModel.applyNoColor(); } } } } + this.application.ninja.colorController.colorModel.input = previousInput; var color = this.application.ninja.colorController.colorModel.colorHistory[previousInput][this.application.ninja.colorController.colorModel.colorHistory[previousInput].length-1]; color.c.wasSetByCode = true; @@ -409,6 +317,8 @@ exports.Properties = Montage.create(Component, { displayGroupProperties: { value: function (els) { this.elementName.value = "Multiple Elements"; + this.elementId.value = ""; + this.elementClass.value = ""; } }, @@ -457,10 +367,7 @@ exports.Properties = Montage.create(Component, { value: function(e) { if(e.wasSetByCode) return; -// ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-style", [this.customSections[0].content.controls.borderStyle], "Changing", "pi"); ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [e.value + "px"], "Changing", "pi"); - - } } diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html index a7aac84e..75cb2944 100755 --- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html +++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html @@ -23,6 +23,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "bindButton": {"@": "bindButton"} } }, + "PosX": { "prototype": "js/components/hottextunit.reel[HotTextUnit]", "properties": { @@ -31,11 +32,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "minValue": -10000 }, "bindings": { - "value": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "leftPosition", - "oneway": false - } + "value": {"<<->": "@owner.leftPosition"} } }, "PosY": { @@ -46,11 +43,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "minValue": -10000 }, "bindings": { - "value": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "topPosition", - "oneway": false - } + "value": {"<<->": "@owner.topPosition"} } }, "PosH": { @@ -59,25 +52,20 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "element": {"#": "PosH"} }, "bindings": { - "value": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "heightSize", - "oneway": false - } + "value": {"<<->": "@owner.heightSize"} } }, "PosW": { "prototype": "js/components/hottextunit.reel[HotTextUnit]", "properties": { - "element": {"#": "PosW"} + "element": {"#": "PosW"}, + "acceptableUnits" : ["px", "%"], + "units": "px" }, "bindings": { - "value": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "widthSize", - "oneway": false - } + "value": {"<<->": "@owner.widthSize"} } + }, "bindButton": { "prototype": "montage/ui/toggle-button.reel", diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js index 1e47916f..8842558b 100755 --- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js +++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js @@ -23,7 +23,19 @@ exports.PosSize = Montage.create(Component, { widthSize: { value: 0 }, +/* + widthSize: { + get: function() { return this._widthSize;}, + set: function(value) { + this._widthSize = parseInt(value); + this.widthUnit = value; + } + }, + widthUnit: { + value: "px" + }, +*/ savedPosition: { value: null }, -- cgit v1.2.3