aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Materials
diff options
context:
space:
mode:
authorValerio Virgillito2012-02-23 00:34:37 -0800
committerValerio Virgillito2012-02-23 00:34:37 -0800
commit3675cac3993430490d9eef18157314d53ffa1a6a (patch)
treefb225a6d8fc3c983c96b1507483d628909dc8c1e /js/panels/Materials
parent2afef244a3f8124f8a049e504e9782c05904ce23 (diff)
parent3730bbc7cc5d5f07b3d788885475a8f9810b480e (diff)
downloadninja-3675cac3993430490d9eef18157314d53ffa1a6a.tar.gz
Merge pull request #60 from mqg734/WebGLMaterials
Integrating WebGL and canvas-2d drawing fixes. Fixed Materials Editor Popup to work with latest Montage framework. Also adding back WebGL materials.
Diffstat (limited to 'js/panels/Materials')
-rwxr-xr-xjs/panels/Materials/Materials.xml2
-rwxr-xr-xjs/panels/Materials/materials-library-panel.reel/materials-library-panel.html8
-rwxr-xr-xjs/panels/Materials/materials-library-panel.reel/materials-library-panel.js121
-rwxr-xr-xjs/panels/Materials/materials-popup.reel/materials-popup.css131
-rwxr-xr-xjs/panels/Materials/materials-popup.reel/materials-popup.html18
-rwxr-xr-xjs/panels/Materials/materials-popup.reel/materials-popup.js47
6 files changed, 81 insertions, 246 deletions
diff --git a/js/panels/Materials/Materials.xml b/js/panels/Materials/Materials.xml
index e955623a..a958575e 100755
--- a/js/panels/Materials/Materials.xml
+++ b/js/panels/Materials/Materials.xml
@@ -1,7 +1,7 @@
1<?xml version="1.0" encoding="ISO-8859-1"?> 1<?xml version="1.0" encoding="ISO-8859-1"?>
2<tree id="Materials"> 2<tree id="Materials">
3 <folder id="ninjaMaterials" label="Ninja Materials"> 3 <folder id="ninjaMaterials" label="Ninja Materials">
4 <leaf id="UberMaterial" label="Uber" /> 4 <leaf id="UberMaterial" label="Uber" />
5 <leaf id="BumpMetalMaterial" label="Bump Metal" /> 5 <leaf id="BumpMetalMaterial" label="Bump Metal" />
6 <leaf id="LinearGradientMaterial" label="Linear Gradient" /> 6 <leaf id="LinearGradientMaterial" label="Linear Gradient" />
7 <leaf id="RadialGradientMaterial" label="Radial Gradient" /> 7 <leaf id="RadialGradientMaterial" label="Radial Gradient" />
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 eede02bd..6ba4ac75 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
@@ -10,14 +10,18 @@
10 <link rel="stylesheet" type="text/css" href="materials-library-panel.css"> 10 <link rel="stylesheet" type="text/css" href="materials-library-panel.css">
11 <script type="text/montage-serialization"> 11 <script type="text/montage-serialization">
12 { 12 {
13 "materialInfo": {
14 "module": "js/panels/Materials/materials-popup.reel",
15 "name": "MaterialsPopup"
16 },
13 "owner": { 17 "owner": {
14 "module": "js/panels/Materials/materials-library-panel.reel", 18 "module": "js/panels/Materials/materials-library-panel.reel",
15 "name": "MaterialsLibraryPanels", 19 "name": "MaterialsLibraryPanels",
16 "properties": { 20 "properties": {
17 "element": {"#": "materials_library_panel"} 21 "element": {"#": "materials_library_panel"},
22 "_materialInfo": {"@": "materialInfo"}
18 } 23 }
19 } 24 }
20
21 } 25 }
22 </script> 26 </script>
23 27
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 f97e1a27..b16c4376 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
@@ -7,7 +7,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
7var Tree = require("js/components/tree.reel").Tree, 7var Tree = require("js/components/tree.reel").Tree,
8 Button = require("js/components/button.reel").Button, 8 Button = require("js/components/button.reel").Button,
9 MaterialsPopup = require("js/panels/Materials/materials-popup.reel").MaterialsPopup, 9 MaterialsPopup = require("js/panels/Materials/materials-popup.reel").MaterialsPopup,
10 PopupMananger = require("js/components/popup-manager.reel").PopupMananger; 10 PopupMananger = require("js/components/popup-manager.reel").PopupMananger,
11 Popup = require("montage/ui/popup/popup.reel").Popup;
11 12
12exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, { 13exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, {
13 14
@@ -92,20 +93,7 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re
92 captureChange: { 93 captureChange: {
93 value:function(e) { 94 value:function(e) {
94 var tNode = e._event.treeNode; 95 var tNode = e._event.treeNode;
95 var left, top; 96 this._showMaterialPopup(tNode.id);
96 //TODO: Figure out if this is the best way to detect where user clicked
97 var mouseEvent = e._event.mouseEvent;
98 if (mouseEvent.clientX && mouseEvent.clientY) {
99 if (mouseEvent.clientX > (parseInt(document.width)/2)) {
100 left = mouseEvent.clientX - mouseEvent.offsetX-2;
101 top = mouseEvent.currentTarget.clientHeight/2+mouseEvent.clientY - mouseEvent.offsetY;
102 } else {
103 left = mouseEvent.clientX - mouseEvent.offsetX+parseInt(mouseEvent.currentTarget.clientWidth);
104 top = mouseEvent.clientY - mouseEvent.offsetY;
105 }
106 }
107
108 this._showMaterialPopup(left + 'px', top + 'px', 'right', 'top', tNode.id);
109 } 97 }
110 }, 98 },
111 99
@@ -113,93 +101,34 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re
113 enumerable:true, 101 enumerable:true,
114 value:null 102 value:null
115 }, 103 },
104
105 _materialInfo: {
106 enumerable:true
107 },
116 108
117 _showMaterialPopup: { 109 _showMaterialPopup: {
118 enumerable: false, 110 enumerable: false,
119 value: function (x, y, side, align, materialID) { 111 value: function (materialID) {
120 if (this._materialPopup && this._materialPopup.opened) { 112
121 if (this._materialPopup.popup.position.x === x && this._materialPopup.popup.position.y === y) { 113 if(!this._materialPopup)
122 this._hideMaterialPopup(); 114 {
123 } else { 115 this._materialPopup = Popup.create();
124 this._materialPopup.popup.position = {x: x, y: y}; 116 this._materialPopup.content = this._materialInfo;
125 this._materialPopup.popup.tooltip = {side: side, align: align}; 117 this._materialPopup.modal = false;
126 this._materialPopup.popup.base.loadMaterials(materialID); 118 this.eventManager.addEventListener("hideMaterialPopup", this, false);
127 //TODO: Tooltip needs to be fixed to allow aligning to change on fly 119 this._materialPopup.addEventListener("show", this, false);
128 //this._materialPopup.popup.drawTooltip(); 120 }
129 } 121 this._materialPopup.show();
130 } else { 122 this._materialInfo.loadMaterials(materialID);
131 ////////////////////////////////////////////////////
132 //Creating popup from m-js component
133 var popup = document.createElement('div');
134 var content = document.createElement('div');
135 var popupBase = MaterialsPopup.create();
136
137
138 //TODO: Check to see if this HACK is needed
139 //(elements needs to be on DOM to be drawn)
140 document.body.appendChild(popup);
141 popupBase.element = popup;
142 popupBase.needsDraw = true;
143 document.body.removeChild(popup);
144 //Adding drawn element to container
145 content.appendChild(popupBase.element);
146
147 //Creating an instance of the popup and sending in created material popup content
148 this._materialPopup = {};
149 this._materialPopup.popup = PopupMananger.createPopup(content, {x: x, y: y}, {side: side, align: align});
150 this._materialPopup.popup.element.style.opacity = 0;
151 this._materialPopup.popup.base = popupBase;
152 popupBase._material = MaterialsLibrary.getMaterial( materialID );
153 popupBase._materialName = materialID;
154 //TODO: Fix this animation/draw HACK (Move to didDraw callback)
155 setTimeout(function () {
156 this._materialPopup.popup.element.style.opacity = 1;
157 this._materialPopup.popup.base.loadMaterials(materialID);
158 }.bind(this), 150);
159
160
161
162 //Popup was added, so it's opened
163 this._materialPopup.opened = true;
164 //TODO: Fix this HACK, it listens to this canvas to be clicked to close popup
165 document.getElementById('stageAndScenesContainer').addEventListener('click', this, false);
166 }
167 }
168 },
169 ////////////////////////////////////////////////////////////////////
170 //
171 handleClick: {
172 enumerable: true,
173 value: function (e) {
174 //TODO: Fix this HACK
175 if (e._event.target.id === 'stageCanvas' && this._materialPopup.opened) {
176 this._handleDocumentClick(e);
177 }
178 }
179 },
180 ////////////////////////////////////////////////////////////////////
181 //
182 _handleDocumentClick: {
183 enumerable: false,
184 value: function (e) {
185 this._hideMaterialPopup();
186 //TODO: Fix this HACK
187 document.getElementById('stageAndScenesContainer').removeEventListener ('click', this, false);
188 } 123 }
189 }, 124 },
190 //////////////////////////////////////////////////////////////////// 125
191 // 126 handleHideMaterialPopup: {
192 _hideMaterialPopup: {