From 8eac5582b72115969a9f915f4303535c22018033 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Wed, 2 May 2012 17:00:12 -0700 Subject: Material editor --- js/controllers/elements/shapes-controller.js | 4 +- js/lib/rdge/materials/cloud-material.js | 13 ++-- js/lib/rdge/materials/linear-gradient-material.js | 4 ++ js/lib/rdge/materials/radial-gradient-material.js | 4 ++ .../materials-library-panel.js | 13 ++-- .../materials-popup.reel/materials-popup.js | 80 +++++++++++++--------- js/tools/TagTool.js | 2 + 7 files changed, 78 insertions(+), 42 deletions(-) diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 8d7b74f0..acf3b63d 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -166,10 +166,10 @@ exports.ShapesController = Montage.create(CanvasController, { } break; case "editStrokeMaterial": - NJevent("showMaterialPopup",{materialId : this.getProperty(el, "strokeMaterial")}); + NJevent("showMaterialPopup",{materialId : this.getProperty(el, "strokeMaterial"), useSelection: true, whichMaterial: 'stroke'}); break; case "editFillMaterial": - NJevent("showMaterialPopup",{materialId : this.getProperty(el, "fillMaterial")}); + NJevent("showMaterialPopup",{materialId : this.getProperty(el, "fillMaterial"), useSelection: true, whichMaterial: 'fill'}); break; case "animate": if(value) diff --git a/js/lib/rdge/materials/cloud-material.js b/js/lib/rdge/materials/cloud-material.js index 0cf428b0..b7670178 100644 --- a/js/lib/rdge/materials/cloud-material.js +++ b/js/lib/rdge/materials/cloud-material.js @@ -183,7 +183,8 @@ var CloudMaterial = function CloudMaterial() if (material) { var technique = material.shaderProgram['default']; - var renderer = RDGE.globals.engine.getContext().renderer; + var saveContext = RDGE.globals.engine.getContext(); + var renderer = RDGE.globals.engine.getContext().renderer; if (renderer && technique) { var texMapName = this._propValues[this._propNames[0]]; @@ -215,6 +216,10 @@ var CloudMaterial = function CloudMaterial() } } + this.updateColor = function() + { + } + this.update = function( time ) { if (this._srcWorld) @@ -264,6 +269,7 @@ var CloudMaterial = function CloudMaterial() this.getWorld().stop(); // build a world to do the rendering + if (!GLWorld) GLWorld = require("js/lib/drawing/world").World; this._srcWorld = new GLWorld( this._srcCanvas, true, true ); var srcWorld = this._srcWorld; if (!this._srcCanvas) throw new Error( "No source canvas in Cloud material" ); @@ -273,13 +279,13 @@ var CloudMaterial = function CloudMaterial() var prim = this.buildGeometry( srcWorld, srcCanvas.width, srcCanvas.height ); // set up the shader - var shader = new jshader(); + var shader = new RDGE.jshader(); shader.def = cloudMaterialDef; shader.init(); this._srcShader = shader; // set up the material node - var materialNode = createMaterialNode("cloudMaterial" + "_" + srcWorld.generateUniqueNodeID()); + var materialNode = RDGE.createMaterialNode("cloudMaterial" + "_" + srcWorld.generateUniqueNodeID()); materialNode.setShader(shader); this._srcMaterialNode = materialNode; @@ -322,7 +328,6 @@ var CloudMaterial = function CloudMaterial() this.buildGeometry = function(world, canvasWidth, canvasHeight) { var RectangleGeometry = require("js/lib/geom/rectangle").RectangleGeometry; - RectangleGeometry.init(); // get the normalized device coordinates (NDC) for diff --git a/js/lib/rdge/materials/linear-gradient-material.js b/js/lib/rdge/materials/linear-gradient-material.js index 2d8e6ca7..586948bb 100755 --- a/js/lib/rdge/materials/linear-gradient-material.js +++ b/js/lib/rdge/materials/linear-gradient-material.js @@ -42,6 +42,7 @@ var LinearGradientMaterial = function LinearGradientMaterial() { this.setColor1 = function (c) { this._color1 = c.slice(); + this._propValues[this._propNames[0]] = this._color1.slice(0); if (this._shader && this._shader['default']) { this._shader['default'].u_color1.set(c); @@ -54,6 +55,7 @@ var LinearGradientMaterial = function LinearGradientMaterial() { this.setColor2 = function (c) { this._color2 = c.slice(); + this._propValues[this._propNames[1]] = this._color2.slice(0); if (this._shader && this._shader['default']) { this._shader['default'].u_color2.set(c); @@ -66,6 +68,7 @@ var LinearGradientMaterial = function LinearGradientMaterial() { this.setColor3 = function (c) { this._color3 = c.slice(); + this._propValues[this._propNames[2]] = this._color3.slice(0); if (this._shader && this._shader['default']) { this._shader['default'].u_color3.set(c); @@ -78,6 +81,7 @@ var LinearGradientMaterial = function LinearGradientMaterial() { this.setColor4 = function (c) { this._color4 = c.slice(); + this._propValues[this._propNames[3]] = this._color4.slice(0); if (this._shader && this._shader['default']) { this._shader['default'].u_color4.set(c); diff --git a/js/lib/rdge/materials/radial-gradient-material.js b/js/lib/rdge/materials/radial-gradient-material.js index dd40d31d..65679429 100755 --- a/js/lib/rdge/materials/radial-gradient-material.js +++ b/js/lib/rdge/materials/radial-gradient-material.js @@ -41,6 +41,7 @@ var RadialGradientMaterial = function RadialGradientMaterial() { this.setColor1 = function (c) { this._color1 = c.slice(); + this._propValues[this._propNames[0]] = this._color1.slice(0); if (this._shader && this._shader['default']) { this._shader['default'].u_color1.set(c); } @@ -52,6 +53,7 @@ var RadialGradientMaterial = function RadialGradientMaterial() { this.setColor2 = function (c) { this._color2 = c.slice(); + this._propValues[this._propNames[1]] = this._color2.slice(0); if (this._shader && this._shader['default']) { this._shader['default'].u_color2.set(c); } @@ -64,6 +66,7 @@ var RadialGradientMaterial = function RadialGradientMaterial() { this.setColor3 = function (c) { this._color3 = c.slice(); + this._propValues[this._propNames[2]] = this._color3.slice(0); if (this._shader && this._shader['default']) { this._shader['default'].u_color3.set(c); } @@ -75,6 +78,7 @@ var RadialGradientMaterial = function RadialGradientMaterial() { this.setColor4 = function (c) { this._color4 = c.slice(); + this._propValues[this._propNames[3]] = this._color4.slice(0); if (this._shader && this._shader['default']) { this._shader['default'].u_color4.set(c); } 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 2176c6d5..205ecd90 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 @@ -51,14 +51,15 @@ exports.MaterialsLibraryPanel = Montage.create(Component, { handleNodeActivation: { value:function(obj) { - this._showMaterialPopup(obj.id); + this._showMaterialPopup({ materialId: obj.id }); } }, handleShowMaterialPopup: { enumerable: false, value: function (event) { - this._showMaterialPopup(event.detail.materialId); + //this._showMaterialPopup(event.detail.materialId); + this._showMaterialPopup(event.detail); } }, @@ -73,9 +74,9 @@ exports.MaterialsLibraryPanel = Montage.create(Component, { _showMaterialPopup: { enumerable: false, - value: function (materialID) { + value: function (materialObj) { - if(!this._materialPopup) + if(!this._materialPopup) { this._materialPopup = Popup.create(); this._materialPopup.content = this._materialInfo; @@ -84,7 +85,9 @@ exports.MaterialsLibraryPanel = Montage.create(Component, { this._materialPopup.addEventListener("show", this, false); } this._materialPopup.show(); - this._materialInfo.loadMaterials(materialID); + + materialID = materialObj.materialId; + this._materialInfo.loadMaterials(materialID, materialObj.useSelection, materialObj.whichMaterial); } }, diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js index 9220659e..5a711455 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.js +++ b/js/panels/Materials/materials-popup.reel/materials-popup.js @@ -88,8 +88,9 @@ exports.MaterialsPopup = Montage.create(Component, { _handlePropertyChange: { - value: function(event) + value: function(theEvent) { + var event = theEvent._event; if(typeof event.propertyValue === "object") { console.log(event.propertyLabel + " changed to "); @@ -214,46 +215,63 @@ exports.MaterialsPopup = Montage.create(Component, { loadMaterials: { enumerable: true, - value: function(materialID) + value: function(materialID, useSelection, whichMaterial) { //TODO - Hack to force repetition to draw. Setting .length = 0 did not work. this.materialsData = []; + var material; this._materialName = materialID; - if( - (materialID === "BumpMetalMaterial") || - (materialID === "DeformMaterial") || - (materialID === "FlatMaterial") || - (materialID === "FlagMaterial") || - (materialID === "FlyMaterial") || - (materialID === "JuliaMaterial") || - (materialID === "KeleidoscopeMaterial") || - (materialID === "LinearGradientMaterial") || - (materialID === "MandelMaterial") || - (materialID === "PlasmaMaterial") || - (materialID === "PulseMaterial") || - (materialID === "RadialBlurMaterial") || - (materialID === "RadialGradientMaterial") || - (materialID === "ReliefTunnelMaterial") || - (materialID === "SquareTunnelMaterial") || - (materialID === "StarMaterial") || - (materialID === "TaperMaterial") || - (materialID === "TunnelMaterial") || - (materialID === "TwistMaterial") || - (materialID === "TwistVertMaterial") || - (materialID === "UberMaterial") || - (materialID === "WaterMaterial") || - (materialID === "ZInvertMaterial") - ) + if (useSelection) { - var material = MaterialsModel.getMaterial( materialID ); - if (material) + var selection = this.application.ninja.selectedElements; + if (selection && (selection.length > 0)) { - this._material = material; - this.materialsData = this.getMaterialData( material ); + var canvas = selection[0]; + var obj; + if (canvas.elementModel && canvas.elementModel.shapeModel) obj = canvas.elementModel.shapeModel.GLGeomObj; + if (obj) + material = (whichMaterial === 'stroke') ? obj.getStrokeMaterial() : obj.getFillMaterial(); } } else + { + if( + (materialID === "BumpMetalMaterial") || + (materialID === "DeformMaterial") || + (materialID === "FlatMaterial") || + (materialID === "FlagMaterial") || + (materialID === "FlyMaterial") || + (materialID === "JuliaMaterial") || + (materialID === "KeleidoscopeMaterial") || + (materialID === "LinearGradientMaterial") || + (materialID === "MandelMaterial") || + (materialID === "PlasmaMaterial") || + (materialID === "PulseMaterial") || + (materialID === "RadialBlurMaterial") || + (materialID === "RadialGradientMaterial") || + (materialID === "ReliefTunnelMaterial") || + (materialID === "SquareTunnelMaterial") || + (materialID === "StarMaterial") || + (materialID === "TaperMaterial") || + (materialID === "TunnelMaterial") || + (materialID === "TwistMaterial") || + (materialID === "TwistVertMaterial") || + (materialID === "UberMaterial") || + (materialID === "WaterMaterial") || + (materialID === "ZInvertMaterial") + ) + { + material = MaterialsModel.getMaterial( materialID ); + } + } + + if (material) + { + this._material = material; + this.materialsData = this.getMaterialData( material ); + } + else { this.materialsData = this[materialID]; } diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js index d946db72..807d5139 100755 --- a/js/tools/TagTool.js +++ b/js/tools/TagTool.js @@ -157,6 +157,8 @@ exports.TagTool = Montage.create(DrawingTool, { selectedTag = this.options.selectedElement; + if (!NJUtils) NJUtils = require("js/lib/NJUtils").NJUtils; + if(selectedTag === "divTool") { newTag = NJUtils.makeNJElement("div", "div", "block"); } else if(selectedTag === "imageTool") { -- cgit v1.2.3