From 42d78d11764dca5df6c7d01f3221f398bee17152 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 1 Mar 2012 15:00:48 -0800 Subject: Squashed commit of the workspace-bugs - Panels fixes. Signed-off-by: Valerio Virgillito --- .../color-select.reel/color-select.html | 53 +++ .../custom-rows/color-select.reel/color-select.js | 83 +++++ .../custom-rows/dual-row.reel/dual-row.html | 67 ++++ .../sections/custom-rows/dual-row.reel/dual-row.js | 53 +++ .../custom-rows/single-row.reel/single-row.html | 47 +++ .../custom-rows/single-row.reel/single-row.js | 50 +++ .../sections/custom.reel/custom.html | 61 ++++ .../properties.reel/sections/custom.reel/custom.js | 356 +++++++++++++++++++++ .../position-and-size.reel/position-and-size.css | 14 + .../position-and-size.reel/position-and-size.html | 142 ++++++++ .../position-and-size.reel/position-and-size.js | 264 +++++++++++++++ .../sections/three-d-view.reel/three-d-view.html | 348 ++++++++++++++++++++ .../sections/three-d-view.reel/three-d-view.js | 265 +++++++++++++++ 13 files changed, 1803 insertions(+) create mode 100755 js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.html create mode 100755 js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.js create mode 100755 js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html create mode 100755 js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js create mode 100755 js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.html create mode 100755 js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js create mode 100755 js/panels/properties.reel/sections/custom.reel/custom.html create mode 100755 js/panels/properties.reel/sections/custom.reel/custom.js create mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css create mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html create mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js create mode 100755 js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html create mode 100755 js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js (limited to 'js/panels/properties.reel/sections') diff --git a/js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.html b/js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.html new file mode 100755 index 00000000..58a50a0d --- /dev/null +++ b/js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.html @@ -0,0 +1,53 @@ + + + + + + + +

+ + \ No newline at end of file diff --git a/js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.js b/js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.js new file mode 100755 index 00000000..3e81ff67 --- /dev/null +++ b/js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.js @@ -0,0 +1,83 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +exports.ColorSelect = Montage.create(Component, { + + Stroke: { + value: null + }, + + Fill: { + value: null + }, + + strokeChip: { + value: null + }, + + fillChip: { + value: null + }, + + handleChange: { + value: function(e) { + + } + }, + + colorVisible: { + value: true + }, + + color2Visible: { + value: true + }, + + divider: { + value: false + }, + + prepareForDraw: { + value: function() { + if (this.divider) { + this.element.appendChild(document.createElement("hr")); + } + if (!this.colorVisible) { + this.Stroke.style.display = "none"; + } + + if (!this.color2Visible) { + this.Fill.style.display = "none"; + } + +// for (var i = 0; i < this.options.length; i ++ ) { +// var tmpOption = new Option(); +// tmpOption.text = this.options[i].name; +// tmpOption.value = this.options[i].value; +// if (i === this.selectedIndex) tmpOption.selected = true +// this.options[i].name = this.element.getElementsByTagName("select")[0].add(tmpOption); +// } + + } + }, + + destroy: { + value: function() { + if(this.strokeChip) + { + this.strokeChip.destroy(); + } + if(this.fillChip) + { + this.fillChip.destroy(); + } + } + } + +}); \ No newline at end of file diff --git a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html new file mode 100755 index 00000000..be4ae431 --- /dev/null +++ b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html @@ -0,0 +1,67 @@ + + + + + + + +

+ +

+ + \ No newline at end of file diff --git a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js new file mode 100755 index 00000000..72d216ca --- /dev/null +++ b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js @@ -0,0 +1,53 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +exports.DualRow = Montage.create(Component, { + id: { + value: null + }, + + label: { + value: null + }, + + label2:{ + value: null + }, + + content: { + value: null + }, + + content2: { + value: null + }, + + eventDelegate: { + value: null + }, + + divider: { + value: false + }, + + prepareForDraw: { + value: function() { + if (this.divider) this.element.appendChild(document.createElement("hr")); + if(this.label !== null) { + this.element.getElementsByClassName("lbl")[0].innerHTML = this.label + ":"; + } + if(this.label2 !== null) { + this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":"; + } else { + this.element.getElementsByClassName("lbl")[1].style.display = "none"; + } + } + } + +}); \ No newline at end of file diff --git a/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.html b/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.html new file mode 100755 index 00000000..4de3f1ae --- /dev/null +++ b/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.html @@ -0,0 +1,47 @@ + + + + + + + +

+ +

+ + \ No newline at end of file diff --git a/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js b/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js new file mode 100755 index 00000000..b606d6b8 --- /dev/null +++ b/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js @@ -0,0 +1,50 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +exports.SingleRow = Montage.create(Component, { + id: { + value: null + }, + + label: { + value: null + }, + + content: { + value: null + }, + + eventDelegate: { + value: null + }, + + + handleChange: { + value: function(event) { + } + }, + + handleChanging: { + value: function(event) { + this.eventDelegate({"type": "changing", "id": this.id, "prop": this.prop, "text": this.label, "value": this.value}); + } + }, + + divider: { + value: false + }, + + prepareForDraw: { + value: function() { + if (this.divider) this.element.appendChild(document.createElement("hr")); + if(this.label !== null) this.element.getElementsByClassName("lbl")[0].innerHTML = this.label + ":"; + } + } + +}); \ No newline at end of file diff --git a/js/panels/properties.reel/sections/custom.reel/custom.html b/js/panels/properties.reel/sections/custom.reel/custom.html new file mode 100755 index 00000000..99a68264 --- /dev/null +++ b/js/panels/properties.reel/sections/custom.reel/custom.html @@ -0,0 +1,61 @@ + + + + + + + + +

+ + \ No newline at end of file diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js new file mode 100755 index 00000000..3c595980 --- /dev/null +++ b/js/panels/properties.reel/sections/custom.reel/custom.js @@ -0,0 +1,356 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; +var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; + +//Custom Rows +var SingleRow = require("js/panels/properties.reel/sections/custom-rows/single-row.reel").SingleRow; +var DualRow = require("js/panels/properties.reel/sections/custom-rows/dual-row.reel").DualRow; +var ColorSelect = require("js/panels/properties.reel/sections/custom-rows/color-select.reel").ColorSelect; + +// Components Needed to make this work +var Hottext = require("js/components/hottextunit.reel").HotTextUnit; +var Dropdown = require("js/components/combobox.reel").Combobox; +var TextField = require("js/components/textfield.reel").TextField; +var FileInput = require("js/components/ui/file-input.reel").FileInput; +var Checkbox = require("js/components/checkbox.reel").Checkbox; +var ColorChip = require("js/components/ui/color-chip.reel").ColorChip; + +exports.CustomSection = Montage.create(Component, { + + repeat: { + value: null + }, + + _fields: { + + }, + + fields: { + get: function() { + return this._fields; + }, + set: function(val) { + this.controls = {}; + this.rows = []; + this._fields = val; + for(var i=0; i < this._fields.length; i++) { + var tmpRow, fields; + if(this._fields[i].length === 1) { + fields = this._fields[i][0]; + tmpRow = SingleRow.create(); + tmpRow.content = this.generateObject(fields); + if (fields.label) tmpRow.label = fields.label; + if (fields.divider) tmpRow.divider = fields.divider; + this.rows.push(tmpRow); + } else if(this._fields[i].length === 2) { + + var obj1 = this._fields[i][0]; + var obj2 = this._fields[i][1]; + + + if (obj1.type == "color" && obj2.type == "color") { + tmpRow = Montage.create(ColorSelect); + if(obj1.visible === false) tmpRow.colorVisible = obj1.visible; + if(obj2.visible === false) tmpRow.color2Visible = obj2.visible; + + // TODO - Hack for now to reference the color select object to unregister color chips + this.controls["colorSelect"] = tmpRow; + } + else + { + tmpRow = DualRow.create(); + if (obj1.label) tmpRow.label = obj1.label; + if (obj2.label) tmpRow.label2 = obj2.label; + tmpRow.content = this.generateObject(obj1); + tmpRow.content2 = this.generateObject(obj2); + } + + if (obj1.divider === true || obj2.divider === true) tmpRow.divider = true; + this.rows.push(tmpRow); + + } else if(this._fields[i].length === 3) { + + } + + } + } + + }, + + rows: { + value: [] + }, + + controls: { + value:{} + }, + + handleChanging: { + value:function(event) { + var obj = event.currentTarget; + this._dispatchPropEvent({"type": "changing", "id": obj.id, "prop": obj.prop, "value": obj.value, "control": obj}); + } + }, + + handleChange: { + value:function(event) { + if(event._event.wasSetByCode) return; + + var obj = event.currentTarget; + this._dispatchPropEvent({"type": "change", "id": obj.id, "prop": obj.prop, "value": obj.value, "control": obj}); + } + }, + + /** + * Color change handler. Hard coding the stage for now since only the stage PI uses this color chip + */ + handleColorChange: { + value: function(event) { + // Change the stage color for now + //console.log(this, event); + ElementsMediator.setProperty([this.application.ninja.currentDocument.documentRoot], this.id, [event._event.color.css], "Change", "pi", ''); + /* + var propEvent = document.createEvent("CustomEvent"); + propEvent.initEvent("propertyChange", true, true); + propEvent.type = "propertyChange"; + + propEvent.prop = "background";//event.prop; + propEvent.value = event._event.color.css; + + this.dispatchEvent(propEvent); + */ + } + }, + + _dispatchPropEvent: { + value: function(event) { +// console.log(event); + var propEvent = document.createEvent("CustomEvent"); + if(event.type === "changing") + { + propEvent.initEvent("propertyChanging", true, true); + propEvent.type = "propertyChanging"; + } + else + { + propEvent.initEvent("propertyChange", true, true); + propEvent.type = "propertyChange"; + } + + propEvent.id = event.id; + propEvent.prop = event.prop; + propEvent.text = event.text; + propEvent.value = event.value; + + event.control.units ? propEvent.units = event.control.units : propEvent.units = ""; + + this.dispatchEvent(propEvent); + } + }, + + generateObject: { + value: function(fields) { + switch(fields.type) { + case "hottext" : return this.createHottext(fields); + case "dropdown" : return this.createDropdown(fields); + case "textbox" : return this.createTextField(fields); + case "file" : return this.createFileInput(fields); + case "checkbox" : return this.createCheckbox(fields); + case "chip" : return this.createColorChip(fields); + } + } + }, + + //Breaking Up Switch Case Statement to functions to return a row + createHottext: { + value: function(aField) { + + // Generate Hottext + var obj = Hottext.create(); + + // Set Values for HottextRow + if (aField.id) obj.id = aField.id; + if (aField.value) obj.value = aField.value; + if (aField.acceptableUnits) obj.acceptableUnits = aField.acceptableUnits; + if (aField.unit) obj.units = aField.unit; + if (aField.min) obj._minValue = aField.min; + if (aField.max) obj._maxValue = aField.max; + if (aField.prop) obj.prop = aField.prop; + + //Initiate onChange Events + obj.addEventListener("change", this, false); + obj.addEventListener("changing", this, false); + + //Bind object value to controls list so it can be manipulated + Object.defineBinding(this.controls, aField.id, { + boundObject: obj, + boundObjectPropertyPath: "value" + }); + + return obj; + } + }, + + createDropdown: { + value: function(aField) { + + //Generate Dropdown + var obj = Dropdown.create(); + + // Set Values for Dropdown + if (aField.id) obj.id = aField.id; + if (aField.prop) obj.prop = aField.prop; + if (aField.value) obj.value = aField.value; + if (aField.labelField) obj.labelField = aField.labelField; + if (aField.labelFunction) obj.labelFunction = aField.labelFunction; + if (aField.dataField) obj.dataField = aField.dataField; + if (aField.dataFunction) obj.dataFunction = aField.dataFunction; + if (aField.items) { + if(aField.items.boundObject) { + obj.items = eval(aField.items.boundObject)[aField.items.boundProperty]; + } else { + obj.items = aField.items; + } + } + if (aField.enabled) { + if(aField.enabled.boundObject) { + // TODO - For now, always bind to this.controls[someProperty] + Object.defineBinding(obj, "enabled", { + boundObject: this.controls, + boundObjectPropertyPath: aField.enabled.boundProperty, + oneway: false + }); + } else { + obj.enabled = aField.enabled; + } + } + + obj.addEventListener("change", this, false); +// +// Object.defineBinding(obj, "value", { +// boundObject: this.controls, +// boundObjectPropertyPath: aField.id, +// oneway: false, +// boundValueMutator: function(value) { +// console.log("In the binding ", value); +// return value; +// } +// }); + + Object.defineBinding(this.controls, aField.id, { + boundObject: obj, + boundObjectPropertyPath: "value", + oneway: false + }); + + + obj.needsDraw = true; + + return obj; + } + }, + + createTextField: { + value: function(aField) { + + // Generate Textfield + var obj = TextField.create(); + + // Set Values for TextField + if (aField.id) obj.id = aField.id; + if (aField.value) obj.value = aField.value; + if (aField.prop) obj.prop = aField.prop; + + //Initiate onChange Events + obj.addEventListener("change", this, false); + + //Bind object value to controls list so it can be manipulated + Object.defineBinding(this.controls, aField.id, { + boundObject: obj, + boundObjectPropertyPath: "value" + }); + + return obj; + } + }, + + createFileInput: { + value: function(aField) { + + // Generate Textfield + var obj = TextField.create(); + + // Set Values for TextField + if (aField.id) obj.id = aField.id; + if (aField.value) obj.value = aField.value; + if (aField.prop) obj.prop = aField.prop; + + + //Initiate onChange Events + obj.addEventListener("change", this, false); + + //Bind object value to controls list so it can be manipulated + Object.defineBinding(this.controls, aField.id, { + boundObject: obj, + boundObjectPropertyPath: "value" + }); + + return obj; + } + }, + + createCheckbox: { + value: function(aField) { + + // Generate Textfield + var obj = Checkbox.create(); + + // Set Values for TextField + if (aField.id) obj.id = aField.id; + if (aField.checked) obj.checked = aField.checked; + if (aField.value) obj.label = aField.value; + if (aField.prop) obj.prop = aField.prop; + + //Initiate onChange Events + obj.addEventListener("change", this, false); + + //Bind object value to controls list so it can be manipulated + Object.defineBinding(this.controls, aField.id, { + boundObject: obj, + boundObjectPropertyPath: "checked" + }); + + return obj; + } + }, + + createColorChip: { + value: function(aField) { + var obj = ColorChip.create(); + + obj.chip = true; + obj.iconType = "fillIcon"; + obj.mode = "chip"; + obj.offset = 0; + + if (aField.id) obj.id = aField.id; + if (aField.prop) obj.prop = aField.prop; + + obj.changeDelegate = this.handleColorChange; + + this.controls[aField.id] = obj; + + // TODO - Hack for now to reference the color select object to unregister color chips + this.controls["stageBackground"] = obj; + + return obj; + } + } + +}); \ No newline at end of file diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css new file mode 100755 index 00000000..227a232b --- /dev/null +++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css @@ -0,0 +1,14 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +.fieldCol .hide { + display: none; +} + +.fieldCol .disabled +{ + color:#999999; +} \ No newline at end of file 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 new file mode 100755 index 00000000..6e355f31 --- /dev/null +++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html @@ -0,0 +1,142 @@ + + + + + + + + +

+ Left: +

+ Top: +

+ + Width: +

+ Height: +

+ + \ No newline at end of file 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 new file mode 100755 index 00000000..49117090 --- /dev/null +++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js @@ -0,0 +1,264 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +exports.PosSize = Montage.create(Component, { + leftPosition: { + value: 0 + }, + + topPosition: { + value: 0 + }, + + heightSize: { + value: 0 + }, + + widthSize: { + value: 0 + }, + + savedPosition: { + value: null + }, + + aspectRatioWidth: { + value: null + }, + + aspectRatioHeight: { + value: null + }, + + _disablePosition: { + value: true + }, + + disablePosition: { + get: function () { + return this._disablePosition; + }, + set: function (value) { + if(value !== this._disablePosition) { + this._disablePosition = value; + this.needsDraw = true; + } + } + }, + + prepareForDraw: { + value: function() { + this.leftControl.identifier = "left"; + this.leftControl.addEventListener("change", this, false); + this.leftControl.addEventListener("changing", this, false); + + this.topControl.identifier = "top"; + this.topControl.addEventListener("change", this, false); + this.topControl.addEventListener("changing", this, false); + + this.heightControl.identifier = "height"; + this.heightControl.addEventListener("change", this, false); + this.heightControl.addEventListener("changing", this, false); + + this.widthControl.identifier = "width"; + this.widthControl.addEventListener("change", this, false); + this.widthControl.addEventListener("changing", this, false); + + this.bindButton.identifier = "ratio"; + this.bindButton.addEventListener("action", this, false); + + } + }, + + draw: { + value: function() { + if(this._disablePosition) { + this.leftPosition = 0; + this.leftControl.enabled = false; + this.topPosition = 0; + this.topControl.enabled = false; + this.leftLabel.classList.add("disabled"); + this.topLabel.classList.add("disabled"); + } else { + this.leftControl.enabled = true; + this.topControl.enabled = true; + this.leftLabel.classList.remove("disabled"); + this.topLabel.classList.remove("disabled"); + } + } + }, + + /** + * Calculate the current aspect ration when the bind button is pressed. + * If one of the values is 0, then use 1:1 as the ratio; + */ + handleRatioAction: { + value: function() { + if(this.bindButton.value) { + this.aspectRatioWidth = this.heightControl.value / this.widthControl.value; + if(isNaN(this.aspectRatioWidth) || !isFinite(this.aspectRatioWidth) || this.aspectRatioWidth === 0) this.aspectRatioWidth = 1; + + this.aspectRatioHeight = this.widthControl.value / this.heightControl.value; + if(isNaN(this.aspectRatioHeight) || !isFinite(this.aspectRatioHeight) || this.aspectRatioHeight === 0) this.aspectRatioHeight = 1; + } else { + this.aspectRatioWidth = 1; + this.aspectRatioHeight = 1; + } + } + }, + + handleLeftChange: { + value: function(event) { + var prevPosition; + + 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.savedPosition = null; + } + } + }, + + handleTopChange: { + value: function(event) { + var prevPosition; + + 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.savedPosition = null; + } + } + }, + + handleHeightChange: { + value: function(event) { + var prevPosition, items; + + if(!event.wasSetByCode) { + if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; + + this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; + + if(this.bindButton.value) { + + var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value); + + if(!isFinite(newWidth)) newWidth = this.heightControl.value; + + this.widthControl.value = newWidth; + 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.savedPosition = null; + } + } + }, + + handleWidthChange: { + value: function(event) { + var prevPosition, items; + + if(!event.wasSetByCode) { + if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; + + this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; + + if(this.bindButton.value) { + + var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value); + + if(!isFinite(newHeight)) newHeight = this.widthControl.value; + + this.heightControl.value = newHeight; + this.application.ninja.elementMediator.setProperty(items, "height", [newHeight + "px"] , "Change", "pi"); + + } + + this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Change", "pi", prevPosition); + this.savedPosition = null; + + } + + } + }, + + handleLeftChanging: { + 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"); + } + + } + }, + + handleTopChanging: { + 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"); + } + + } + }, + + handleHeightChanging: { + value: function(event) { + var items; + if(!event.wasSetByCode) { + + if(!this.savedPosition) this.savedPosition = this.heightSize; + + this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; + + if(this.bindButton.value) { + + var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value); + + if(!isFinite(newWidth)) newWidth = this.heightControl.value; + + this.widthControl.value = newWidth; + this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Changing", "pi"); + } + + this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Changing", "pi"); + + } + } + }, + + handleWidthChanging: { + value: function(event) { + var items; + if(!event.wasSetByCode) { + + if(!this.savedPosition) this.savedPosition = this.widthSize; + + this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; + + if(this.bindButton.value) { + var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value); + + if(!isFinite(newHeight)) newHeight = this.widthControl.value; + + this.heightControl.value = newHeight; + this.application.ninja.elementMediator.setProperty(items, "height", [newHeight + "px"] , "Changing", "pi"); + } + + this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Changing", "pi"); + } + } + } + + +}); \ No newline at end of file diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html new file mode 100755 index 00000000..18a7369e --- /dev/null +++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html @@ -0,0 +1,348 @@ + + + + + + + +

+ Axis: +

+ X: +

+ Y: +

+ Z: +

+ X: +

+ Y: +

+ Z: +

+ +

+ Perspective Distance: +

+ +

+ Flatten +

+ + \ No newline at end of file diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js new file mode 100755 index 00000000..35591afa --- /dev/null +++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js @@ -0,0 +1,265 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +exports.ThreeD = Montage.create(Component, { + + inGlobalMode: { + value: false + }, + + // TODO - booleans not working with boundValueMutator when bound to selectedIndex, so using index + // 0 = local; 1 = global + _axisMode: { + value: 0 + }, + + axisMode: { + get: function() { + return this._axisMode; + }, + set: function(value) { + this._axisMode = value; + + if(value === 0) + { + this.inGlobalMode = false; + this.x3D = 0; + this.y3D = 0; + this.z3D = 0; + + this.xAngle = 0; + this.yAngle = 0; + this.zAngle = 0; + } + else + { + this.inGlobalMode = true; + var item = this.item; + if(item) + { + this.x3D = item.elementModel.props3D.x3D; + this.y3D = item.elementModel.props3D.y3D; + this.z3D = item.elementModel.props3D.z3D; + + this.xAngle = item.elementModel.props3D.xAngle; + this.yAngle = item.elementModel.props3D.yAngle; + this.zAngle = item.elementModel.props3D.zAngle; + } + } + } + }, + + x3D: { + value: 0 + }, + + y3D: { + value: 0 + }, + + z3D: { + value: 0 + }, + + xAngle: { + value: 0 + }, + + yAngle: { + value: 0 + }, + + zAngle: { + value: 0 + }, + + _disableTranslation: { + value: true + }, + + disableTranslation: { + get: function () { + return this._disableTranslation; + }, + set: function (value) { + if(value !== this._disableTranslation) { + this._disableTranslation = value; + this.needsDraw = true; + } + } + }, + + item: { + value: null + }, + + _curMat: { + value: null + }, + + _curProp: { + value: null + }, + + handleChange: { + value: function(event) { + if(event.wasSetByCode) { + return; + } + + this.apply3DProperties(event.currentTarget.identifier, + event.currentTarget, + this.item, + this.inGlobalMode, + false); + + this._curMat = null; + this._curProp = null; + } + }, + + handleChanging: { + value: function(event) { + if(event.wasSetByCode) { + return; + } + + this.apply3DProperties(event.currentTarget.identifier, + event.currentTarget, + this.item, + this.inGlobalMode, + true); + } + }, + + apply3DProperties : { + value : function(prop, value, item, inGlobalMode, isChanging){ + if(!this._curMat) + { + this._curMat = this.application.ninja.elementMediator.getMatrix(item); + } + var curMat = this._curMat; + var delta = value.value; + if(inGlobalMode) + { + if(!this._curProp) + { + this._curProp = this.application.ninja.elementMediator.get3DProperty(item, prop); + } + delta -= this._curProp; + } + + var xFormMat = Matrix.I(4); + switch (prop) + { + case "xAngle": + xFormMat = Matrix.RotationX(MathUtils.DEG_TO_RAD * delta); + break; + case "yAngle": + xFormMat = Matrix.RotationY(MathUtils.DEG_TO_RAD * delta); + break; + case "zAngle": + xFormMat = Matrix.RotationZ(MathUtils.DEG_TO_RAD * delta); + break; + case "x3D": + xFormMat[12] = delta; + break; + case "y3D": + xFormMat[13] = delta; + break; + case "z3D": + xFormMat[14] = delta; + break; + } + + var mat = []; + if(inGlobalMode) + { + glmat4.multiply(xFormMat, curMat, mat); + } + else + { + glmat4.multiply(curMat, xFormMat, mat); + } + + if(isChanging) + { + this.application.ninja.elementMediator.setMatrix(item, mat, true); + } + else + { + this.application.ninja.elementMediator.setMatrix(item, mat, false); + + if(!inGlobalMode) + { + value.value = 0; + } + } + } + }, + + templateDidLoad : { + value: function() { + Object.defineBinding(this, "axisMode", { + boundObject: this.axisModeGroupControl, + boundObjectPropertyPath: "selectedIndex", + oneway: false + }); + + this.eventManager.addEventListener("openDocument", this, false); + } + }, + + handleOpenDocument: { + value: function() { + + Object.defineBinding(this, "item", { + boundObject: this, + boundObjectPropertyPath: "application.ninja.selectedElements", + boundValueMutator: this._getSelectedItem, + oneway: true + }); + } + }, + + _getSelectedItem: { + value: function(els) { + if(els.length) { + return els[0]._element || els[0]; + } else { + return this.boundObject.application.ninja.currentDocument.documentRoot; + } + } + }, + + draw: { + value: function() { + if(this._disableTranslation) { + this.x3D = 0; + this.x3DControl.enabled = false; + this.y3D = 0; + this.y3DControl.enabled = false; + this.z3D = 0; + this.z3DControl.enabled = false; + + this.x3DLabel.classList.add("disabled"); + this.y3DLabel.classList.add("disabled"); + this.z3DLabel.classList.add("disabled"); + } else { + this.x3DControl.enabled = true; + this.y3DControl.enabled = true; + this.z3DControl.enabled = true; + this.x3DLabel.classList.remove("disabled"); + this.y3DLabel.classList.remove("disabled"); + this.z3DLabel.classList.remove("disabled"); + } + } + } + +}); \ No newline at end of file -- cgit v1.2.3