From e4159f8cea57077c755030a421c091b28c7a8ecc Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 19 Mar 2012 17:06:20 -0700 Subject: Use new tree control in Materials panel. Signed-off-by: Nivesh Rajbhandari --- js/panels/Materials/materials-data.json | 43 ++++++++++++++++++++++ .../materials-library-panel.html | 43 ++++++++++++++++++---- .../materials-library-panel.js | 34 ++++++++--------- .../materials-popup.reel/materials-popup.js | 6 ++- 4 files changed, 99 insertions(+), 27 deletions(-) create mode 100644 js/panels/Materials/materials-data.json diff --git a/js/panels/Materials/materials-data.json b/js/panels/Materials/materials-data.json new file mode 100644 index 00000000..f06ab6c8 --- /dev/null +++ b/js/panels/Materials/materials-data.json @@ -0,0 +1,43 @@ +{ + "label": "materials", + "children": [ + { + "label": "Ninja Materials", + "children": [ + { + "label": "Uber", + "id" : "UberMaterial" + }, + { + "label": "Bump Metal", + "id" : "BumpMetalMaterial" + }, + { + "label": "Linear Gradient", + "id" : "LinearGradientMaterial" + }, + { + "label": "Radial Gradient", + "id" : "RadialGradientMaterial" + }, + { + "label": "Flat", + "id" : "FlatMaterial" + } + ] + }, + { + "label": "Custom Materials", + "children": [ + { + "label": "Checker Board", + "id" : "CheckerBoard" + }, + { + "label": "Shiny Metal", + "id" : "ShinyMetal" + } + ] + } + ] +} \ No newline at end of file diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html index fe17d0f8..4e41512f 100755 --- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html +++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html @@ -46,10 +46,39 @@ } ] }, - "materialInfo": { - "module": "js/panels/Materials/materials-popup.reel", - "name": "MaterialsPopup" - }, + "materialInfo": { + "module": "js/panels/Materials/materials-popup.reel", + "name": "MaterialsPopup" + }, + "materialsController" : { + "module": "js/controllers/tree-controller", + "name": "TreeController", + "properties" : { + "branchKey" : "children", + "labelKey" : "label", + "delegate": {"@": "owner" } + }, + "bindings": { + "content": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "materialsData" + } + } + }, + "materialsContainer" : { + "module" : "js/components/treeview/treeview.reel", + "name" : "Treeview", + "properties" : { + "element" : {"#": "materials_library_tree"}, + "branchComponent" : {"@": "branch" }, + "contentController": {"@": "materialsController"}, + "showRoot": false + } + }, + "branch" : { + "module" : "js/components/treeview/ninja-branch.reel", + "name" : "Branch" + }, "owner": { "module": "js/panels/Materials/materials-library-panel.reel", "name": "MaterialsLibraryPanels", @@ -65,9 +94,9 @@
-
-
    -
    +
    +
    +
    diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js index bb550598..5fd86d00 100755 --- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js +++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js @@ -4,29 +4,26 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -var Tree = require("js/components/tree.reel").Tree, - MaterialsPopup = require("js/panels/Materials/materials-popup.reel").MaterialsPopup, - PopupMananger = require("js/components/popup-manager.reel").PopupMananger, +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component, + MaterialsData = require("js/panels/Materials/materials-data.json"), Popup = require("montage/ui/popup/popup.reel").Popup; -exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, { +exports.MaterialsLibraryPanel = Montage.create(Component, { + + materialsData: { + value: null + }, _hasFocus: { enumerable: false, value: false }, - - prepareForDraw: { - enumerable: false, - value: function() { - var treeHolderDiv = document.getElementById("materials_library_tree"); - var materialsTree = Tree.create(); - materialsTree.element = treeHolderDiv; - materialsTree.dataProvider = this._loadXMLDoc("js/panels/Materials/Materials.xml"); - materialsTree.needsDraw = true; - materialsTree.addEventListener("change", this, true); - } + didCreate: { + value: function() { + this.materialsData = MaterialsData; + } }, willDraw: { @@ -71,10 +68,9 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re } }, - captureChange: { - value:function(e) { - var tNode = e._event.treeNode; - this._showMaterialPopup(tNode.id); + handleNodeActivation: { + value:function(obj) { + this._showMaterialPopup(obj.id); } }, diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js index 193e72b7..b44761bc 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.js +++ b/js/panels/Materials/materials-popup.reel/materials-popup.js @@ -214,7 +214,11 @@ exports.MaterialsPopup = Montage.create(Component, { enumerable: true, value: function(materialID) { - this._materialName = materialID; + // Note that setting Array.length = 0 will empty arrays, + // which is fine if you use getMaterialData to get a new array, but not for the + // dummyData arrays. + this._materialsData.length = 0; + this._materialName = materialID; if( (materialID === "UberMaterial") || (materialID === "FlatMaterial") || -- cgit v1.2.3 From fff3c568e6884a867527390b9b77f45c63944aec Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 20 Mar 2012 06:04:41 -0700 Subject: Removing zoom from element's getMatrix. Zoom should only be checked on stage. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/element-controller.js | 16 ----------- js/controllers/elements/stage-controller.js | 41 +++++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 16 deletions(-) diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 70aba54e..b35251ad 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -228,22 +228,6 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, mat = this.transformStringToMat( xformStr ); if (!mat) mat = Matrix.I(4); - - var zoom = this.application.ninja.elementMediator.getProperty(el, "zoom"); - if (zoom) - { - zoom = Number(zoom); - if (zoom != 1) - { - var zoomMat = Matrix.create( [ - [ zoom, 0, 0, 0], - [ 0, zoom, 0, 0], - [ 0, 0, zoom, 0], - [ 0, 0, 0, 1] - ] ); - glmat4.multiply( zoomMat, mat, mat ); - } - } } el.elementModel.props3D.matrix3d = mat; diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js index 34bb1fb5..97ea3aa5 100755 --- a/js/controllers/elements/stage-controller.js +++ b/js/controllers/elements/stage-controller.js @@ -129,5 +129,46 @@ exports.StageController = Montage.create(ElementController, { value: function(el, rule, selector) { el.elementModel.transitionStopRule.selectorText = selector; } + }, + + getMatrix: { + value: function(el) { + if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.matrix3d) + { + return el.elementModel.props3D.matrix3d.slice(0); + } + else + { + var mat; + + if (el) + { + var xformStr = this.application.ninja.elementMediator.getProperty(el, "-webkit-transform"); + if (xformStr) + mat = this.transformStringToMat( xformStr ); + if (!mat) + mat = Matrix.I(4); + + var zoom = this.application.ninja.elementMediator.getProperty(el, "zoom"); + if (zoom) + { + zoom = Number(zoom); + if (zoom != 1) + { + var zoomMat = Matrix.create( [ + [ zoom, 0, 0, 0], + [ 0, zoom, 0, 0], + [ 0, 0, zoom, 0], + [ 0, 0, 0, 1] + ] ); + glmat4.multiply( zoomMat, mat, mat ); + } + } + } + + el.elementModel.props3D.matrix3d = mat; + return mat; + } + } } }); -- cgit v1.2.3 From e33b3ce6f7b6789cfe854d4a6a8bb5bd57b8ae37 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 20 Mar 2012 06:45:06 -0700 Subject: Fixing error in drawUtils when closing document - should set _eltArray and _planesArray's length to 0 instead of setting the arrays to null. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index 1c00f7ea..d6334e6c 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -139,8 +139,8 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { handleCloseDocument:{ value: function() { if(this.application.ninja.documentController._documents.length === 0){ - this._eltArray = null; - this._planesArray = null; + this._eltArray.length = 0; + this._planesArray.length = 0; } } }, -- cgit v1.2.3 From e1c4f30a4c13d747fa69d78598e0961286bbe571 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 20 Mar 2012 10:59:05 -0700 Subject: Support button control in Properties Panel and use them for edit fill and stroke material. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 13 +++++-- js/data/pi/pi-data.js | 14 +++++++ .../materials-library-panel.js | 32 +++++----------- .../sections/custom-rows/dual-row.reel/dual-row.js | 8 +++- .../properties.reel/sections/custom.reel/custom.js | 44 ++++++++++++++++++++++ 5 files changed, 84 insertions(+), 27 deletions(-) diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index d72d9c14..b3ac9ddb 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -6,10 +6,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, CanvasController = require("js/controllers/elements/canvas-controller").CanvasController, - njModule = require("js/lib/NJUtils"); - -var World = require("js/lib/drawing/world").World; -var MaterialsModel = require("js/models/materials-model").MaterialsModel; + njModule = require("js/lib/NJUtils"), + World = require("js/lib/drawing/world").World, + MaterialsModel = require("js/models/materials-model").MaterialsModel; exports.ShapesController = Montage.create(CanvasController, { @@ -100,6 +99,12 @@ exports.ShapesController = Montage.create(CanvasController, { el.elementModel.shapeModel.GLWorld.render(); } break; + case "editStrokeMaterial": + NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.strokeMaterial.getName()}); + break; + case "editFillMaterial": + NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.fillMaterial.getName()}); + break; default: CanvasController.setProperty(el, p, value); } diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js index ba03c347..28ffa536 100755 --- a/js/data/pi/pi-data.js +++ b/js/data/pi/pi-data.js @@ -402,6 +402,13 @@ exports.PiData = Montage.create( Montage, { items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" }, enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }, divider : true + }, + { + type: "button", + id: "editStrokeMaterial", + prop: "editStrokeMaterial", + label: "Edit", + enabled: { boundObject: "this.controls", boundProperty: "useWebGl" } } ], [ @@ -414,6 +421,13 @@ exports.PiData = Montage.create( Montage, { dataField: "_name", items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" }, enabled: { boundObject: "this.controls", boundProperty: "useWebGl" } + }, + { + type: "button", + id: "editFillMaterial", + prop: "editFillMaterial", + label: "Edit", + enabled: { boundObject: "this.controls", boundProperty: "useWebGl" } } ] ] diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js index 5fd86d00..2176c6d5 100755 --- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js +++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js @@ -26,28 +26,9 @@ exports.MaterialsLibraryPanel = Montage.create(Component, { } }, - willDraw: { - enumerable: false, - value: function() { - - } - }, - - draw: { - enumerable: false, - value: function() { - - } - }, - - _loadXMLDoc: { - value:function(dname) { - if (window.XMLHttpRequest) { - xhttp = new XMLHttpRequest(); - } - xhttp.open("GET", dname, false); - xhttp.send(); - return xhttp.responseXML; + prepareForDraw: { + value : function() { + this.eventManager.addEventListener("showMaterialPopup", this, false); } }, @@ -74,6 +55,13 @@ exports.MaterialsLibraryPanel = Montage.create(Component, { } }, + handleShowMaterialPopup: { + enumerable: false, + value: function (event) { + this._showMaterialPopup(event.detail.materialId); + } + }, + _materialPopup: { enumerable:true, value:null 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 index 72d216ca..4c5c80d7 100755 --- 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 @@ -43,7 +43,13 @@ exports.DualRow = Montage.create(Component, { this.element.getElementsByClassName("lbl")[0].innerHTML = this.label + ":"; } if(this.label2 !== null) { - this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":"; + if(this.content2.type === "button") { + this.content2.element = document.createElement("button"); + this.content2.element.classList.add("nj-skinned"); + this.element.getElementsByClassName("lbl")[1].style.display = "none"; + } else { + this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":"; + } } else { this.element.getElementsByClassName("lbl")[1].style.display = "none"; } diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js index 3c595980..d7334afe 100755 --- a/js/panels/properties.reel/sections/custom.reel/custom.js +++ b/js/panels/properties.reel/sections/custom.reel/custom.js @@ -20,6 +20,7 @@ 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; +var Button = require("montage/ui/button.reel").Button; exports.CustomSection = Montage.create(Component, { @@ -128,6 +129,15 @@ exports.CustomSection = Montage.create(Component, { } }, + handleAction: { + 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}); + } + }, + _dispatchPropEvent: { value: function(event) { // console.log(event); @@ -163,6 +173,7 @@ exports.CustomSection = Montage.create(Component, { case "file" : return this.createFileInput(fields); case "checkbox" : return this.createCheckbox(fields); case "chip" : return this.createColorChip(fields); + case "button" : return this.createButton(fields); } } }, @@ -349,6 +360,39 @@ exports.CustomSection = Montage.create(Component, { // TODO - Hack for now to reference the color select object to unregister color chips this.controls["stageBackground"] = obj; + return obj; + } + }, + + createButton: { + value: function(aField) { + var obj = Button.create(); + + // Set Values for Button + if (aField.id) obj.id = aField.id; + if (aField.label) obj.label = aField.label; + if (aField.prop) obj.prop = aField.prop; + + // Special casing button so slot uses "button" tag instead of "div" + obj.type = "button"; + + 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("action", this, false); + + this.controls[aField.id] = obj; + return obj; } } -- cgit v1.2.3 From 1eb663dc0ab2f9f2a6daea57ad2974b731dbc513 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 20 Mar 2012 11:07:49 -0700 Subject: Support edit material button in oval and line PI. Signed-off-by: Nivesh Rajbhandari --- js/data/pi/pi-data.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js index 28ffa536..53fec3be 100755 --- a/js/data/pi/pi-data.js +++ b/js/data/pi/pi-data.js @@ -495,6 +495,13 @@ exports.PiData = Montage.create( Montage, { items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" }, enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }, divider : true + }, + { + type: "button", + id: "editStrokeMaterial", + prop: "editStrokeMaterial", + label: "Edit", + enabled: { boundObject: "this.controls", boundProperty: "useWebGl" } } ] ] @@ -582,6 +589,13 @@ exports.PiData = Montage.create( Montage, { items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" }, enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }, divider : true + }, + { + type: "button", + id: "editStrokeMaterial", + prop: "editStrokeMaterial", + label: "Edit", + enabled: { boundObject: "this.controls", boundProperty: "useWebGl" } } ], [ @@ -594,6 +608,13 @@ exports.PiData = Montage.create( Montage, { dataField: "_name", items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" }, enabled: { boundObject: "this.controls", boundProperty: "useWebGl" } + }, + { + type: "button", + id: "editFillMaterial", + prop: "editFillMaterial", + label: "Edit", + enabled: { boundObject: "this.controls", boundProperty: "useWebGl" } } ] ] -- cgit v1.2.3 From 17cf4470b54cc6014f23f982d1a644a045cccb04 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 20 Mar 2012 11:17:46 -0700 Subject: Deleting unused Materials.xml file since we converted to JSON. Signed-off-by: Nivesh Rajbhandari --- js/panels/Materials/Materials.xml | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100755 js/panels/Materials/Materials.xml diff --git a/js/panels/Materials/Materials.xml b/js/panels/Materials/Materials.xml deleted file mode 100755 index a958575e..00000000 --- a/js/panels/Materials/Materials.xml +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - \ No newline at end of file -- cgit v1.2.3 From 634358d2697d9668bb9406ac7a029aafae542285 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 20 Mar 2012 11:18:07 -0700 Subject: Button's enabled property binding should be oneway only. Signed-off-by: Nivesh Rajbhandari --- js/panels/properties.reel/sections/custom.reel/custom.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js index d7334afe..703ef950 100755 --- a/js/panels/properties.reel/sections/custom.reel/custom.js +++ b/js/panels/properties.reel/sections/custom.reel/custom.js @@ -382,7 +382,7 @@ exports.CustomSection = Montage.create(Component, { Object.defineBinding(obj, "enabled", { boundObject: this.controls, boundObjectPropertyPath: aField.enabled.boundProperty, - oneway: false + oneway: true }); } else { obj.enabled = aField.enabled; -- cgit v1.2.3