From d2f4d5e5f6742d53b6324d585a700566f73c992a Mon Sep 17 00:00:00 2001 From: mqg734 Date: Tue, 21 Feb 2012 16:49:11 -0800 Subject: Updated Materials Library and Materials Editor Popup to work with latest version of Montage. We had to change our css to not use id's. Also, updated the popup to use Montage's Popup component. It looks like bump material has a bug. So loading that material results in a runtime error. --- .../materials-library-panel.html | 8 +- .../materials-library-panel.js | 121 ++++--------------- .../materials-popup.reel/materials-popup.css | 131 ++++----------------- .../materials-popup.reel/materials-popup.html | 18 +-- .../materials-popup.reel/materials-popup.js | 47 +++----- 5 files changed, 80 insertions(+), 245 deletions(-) (limited to 'js/panels/Materials') 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 @@ 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 var Tree = require("js/components/tree.reel").Tree, Button = require("js/components/button.reel").Button, MaterialsPopup = require("js/panels/Materials/materials-popup.reel").MaterialsPopup, - PopupMananger = require("js/components/popup-manager.reel").PopupMananger; + PopupMananger = require("js/components/popup-manager.reel").PopupMananger, + Popup = require("montage/ui/popup/popup.reel").Popup; exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, { @@ -92,20 +93,7 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re captureChange: { value:function(e) { var tNode = e._event.treeNode; - var left, top; - //TODO: Figure out if this is the best way to detect where user clicked - var mouseEvent = e._event.mouseEvent; - if (mouseEvent.clientX && mouseEvent.clientY) { - if (mouseEvent.clientX > (parseInt(document.width)/2)) { - left = mouseEvent.clientX - mouseEvent.offsetX-2; - top = mouseEvent.currentTarget.clientHeight/2+mouseEvent.clientY - mouseEvent.offsetY; - } else { - left = mouseEvent.clientX - mouseEvent.offsetX+parseInt(mouseEvent.currentTarget.clientWidth); - top = mouseEvent.clientY - mouseEvent.offsetY; - } - } - - this._showMaterialPopup(left + 'px', top + 'px', 'right', 'top', tNode.id); + this._showMaterialPopup(tNode.id); } }, @@ -113,93 +101,34 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re enumerable:true, value:null }, + + _materialInfo: { + enumerable:true + }, _showMaterialPopup: { enumerable: false, - value: function (x, y, side, align, materialID) { - if (this._materialPopup && this._materialPopup.opened) { - if (this._materialPopup.popup.position.x === x && this._materialPopup.popup.position.y === y) { - this._hideMaterialPopup(); - } else { - this._materialPopup.popup.position = {x: x, y: y}; - this._materialPopup.popup.tooltip = {side: side, align: align}; - this._materialPopup.popup.base.loadMaterials(materialID); - //TODO: Tooltip needs to be fixed to allow aligning to change on fly - //this._materialPopup.popup.drawTooltip(); - } - } else { - //////////////////////////////////////////////////// - //Creating popup from m-js component - var popup = document.createElement('div'); - var content = document.createElement('div'); - var popupBase = MaterialsPopup.create(); - - - //TODO: Check to see if this HACK is needed - //(elements needs to be on DOM to be drawn) - document.body.appendChild(popup); - popupBase.element = popup; - popupBase.needsDraw = true; - document.body.removeChild(popup); - //Adding drawn element to container - content.appendChild(popupBase.element); - - //Creating an instance of the popup and sending in created material popup content - this._materialPopup = {}; - this._materialPopup.popup = PopupMananger.createPopup(content, {x: x, y: y}, {side: side, align: align}); - this._materialPopup.popup.element.style.opacity = 0; - this._materialPopup.popup.base = popupBase; - popupBase._material = MaterialsLibrary.getMaterial( materialID ); - popupBase._materialName = materialID; - //TODO: Fix this animation/draw HACK (Move to didDraw callback) - setTimeout(function () { - this._materialPopup.popup.element.style.opacity = 1; - this._materialPopup.popup.base.loadMaterials(materialID); - }.bind(this), 150); - - - - //Popup was added, so it's opened - this._materialPopup.opened = true; - //TODO: Fix this HACK, it listens to this canvas to be clicked to close popup - document.getElementById('stageAndScenesContainer').addEventListener('click', this, false); - } - } - }, - //////////////////////////////////////////////////////////////////// - // - handleClick: { - enumerable: true, - value: function (e) { - //TODO: Fix this HACK - if (e._event.target.id === 'stageCanvas' && this._materialPopup.opened) { - this._handleDocumentClick(e); - } - } - }, - //////////////////////////////////////////////////////////////////// - // - _handleDocumentClick: { - enumerable: false, - value: function (e) { - this._hideMaterialPopup(); - //TODO: Fix this HACK - document.getElementById('stageAndScenesContainer').removeEventListener ('click', this, false); + value: function (materialID) { + + if(!this._materialPopup) + { + this._materialPopup = Popup.create(); + this._materialPopup.content = this._materialInfo; + this._materialPopup.modal = false; + this.eventManager.addEventListener("hideMaterialPopup", this, false); + this._materialPopup.addEventListener("show", this, false); + } + this._materialPopup.show(); + this._materialInfo.loadMaterials(materialID); } }, - //////////////////////////////////////////////////////////////////// - // - _hideMaterialPopup: { + + handleHideMaterialPopup: { enumerable: false, - value: function () { - if (this._materialPopup.opened) { - // - PopupMananger.removePopup(this._materialPopup.popup.element); - this._materialPopup.opened = false; - //TODO: Fix HACK of removing popup - this._materialPopup.popup.base.destroy(); - this._materialPopup.popup = null; - } + value: function (event) { + if(this._materialPopup){ + this._materialPopup.hide(); + } } } }); \ No newline at end of file diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css index 299dc5f9..89233c64 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.css +++ b/js/panels/Materials/materials-popup.reel/materials-popup.css @@ -6,24 +6,22 @@ */ .materials_popup { - font-size: 12px; - text-shadow: 1px 1px 1px #000; + width:400px; + font-size: 12px; overflow: hidden; -} - -.materials_popup a:hover { - color: #CCC; + background: #494949; + color: white; } .materials_popup hr { - float: left; - clear: both; - width: 100%; - display: block; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #1d1d1d), color-stop(0.75, #424242)); - border: none; - height: 2px; - margin: 4px 0px 4px 0px; + float: left; + clear: both; + width: 100%; + display: block; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #1d1d1d), color-stop(0.75, #424242)); + border: none; + height: 2px; + margin: 4px 0px 4px 0px; } #mp_title { @@ -36,127 +34,46 @@ text-align: center; } -#mp_maps div div, -#mp_maps div div:focus, -#mp_maps div input, -#mp_maps div input:focus { - margin: 0px 0px 2px 0px; +.mp_property +{ + height:40px; } -#mp_properties_labels, -#mp_maps_labels { - display:block; +.mp_property > .prop-label +{ float: left; - width:86px; + /*width:86px;*/ margin: 0px 8px 2px 5px; - font-family: 'Droid Sans', sans-serif; - font-size: 12px; } -#mp_properties_labels div, -#mp_maps_labels div { +.mp_property > .prop-controller +{ float: right; clear: left; width: auto; margin: 0px 0px 3px 0px; } -#mp_maps_labels div { - margin: 2px 0px 3px 0px !important; -} - -#mp_properties_labels div { - margin: 6px 0px 6px 0px !important; -} - -#mp_properties_colors -{ - float:left; - width: 24px; - margin: 0px -8px 0px 10px; -} - -#mp_properties_colors button { - width: 22px; - height: 22px; - margin: 2px 0; -} - -#mp_properties_colors input.hottext { - background: none; - float: right; - margin: 4px 0px; - padding: 0px; - width: 23px; - color: #FFF; - text-shadow: 1px 1px 1px #000; - font-family: 'Droid Sans', sans-serif; - font-size: 11px; - text-align: center; -} - -#mp_properties_colors input.hottextInput { - background: #FFF; - color: #000; - text-shadow: none; - border: 1px solid #333; - margin: 3px -2px 5px 1px; - padding: 1px; - text-decoration: none; - outline: none; -} - -#mp_maps_inputs -{ - float: left; - width: auto; -} - -#mp_maps_inputs input { - float:left; - clear:both; - width: 100px; - background: #555; - border: 1px solid #333; - color: #FFF; - padding: 1px 0px 1px 0px; - margin: 0px 0px 0px 10px; - text-decoration: none !important; - text-shadow: 1px 1px 1px #000; - font-family: 'Droid Sans', sans-serif; - font-size: 11px; - letter-spacing: 1px; -} - -#mp_maps_inputs input:focus { - outline: none; - margin: -1px 0px -1px 10px; - background: #FFF; - color: #000; - text-shadow: none; -} - - -#mp_buttons { +.mp_buttons { clear:both; float: left; margin: 0px -4px 0px 4px; width: 97%; } -#mp_buttons button { +.mp_buttons button { height: 22px; overflow: hidden; display: block; cursor: pointer; } -#mp_cancel_btn { +.mp_buttons .mp_cancel_btn { float: left; width: 60px; } -#mp_ok_btn { +.mp_buttons .mp_ok_btn { float: right; width: 30px; } \ No newline at end of file diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html index bac69f25..de4f98c1 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.html +++ b/js/panels/Materials/materials-popup.reel/materials-popup.html @@ -30,7 +30,7 @@ } }, "eventDelegator": { - "module": "montage/event/action-event-listener", + "module": "montage/core/event/action-event-listener", "name": "ActionEventListener", "properties": { "handler": {"@": "owner"}, @@ -38,7 +38,7 @@ } }, "propControl1": { - "module": "js/components/ui/property-control", + "module": "js/components/ui/property-control.reel", "name": "PropertyControl", "properties": { "element": {"#": "mp_property"} @@ -64,7 +64,7 @@ ] }, "materialsProperties": { - "module": "montage/ui/repetition", + "module": "montage/ui/repetition.reel", "name": "Repetition", "properties": { "element": {"#": "mp_properties_list"} @@ -95,7 +95,7 @@ -
+
Material Name

@@ -104,15 +104,15 @@
-
-
+
+

-
- - +
+ +
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js index 62ca5395..508b8130 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.js +++ b/js/panels/Materials/materials-popup.reel/materials-popup.js @@ -11,36 +11,13 @@ var Button = require("js/components/button.reel").Button; //////////////////////////////////////////////////////////////////////// //Exporting as MaterialsPopup exports.MaterialsPopup = Montage.create(Component, { - //////////////////////////////////////////////////////////////////// - okButton: { - enumerable: false, - value: null - }, - - cancelButton: { - enumerable: false, - value: null - }, - //////////////////////////////////////////////////////////////////// // Material Properties - - materialsProperties: { - enumerable: true, - serializable: true, - value: null - }, - _materialName: { enumerable: true, - value: "Material" + value: "" }, - materialTitle: { - enumerable: true, - value: null - }, - captureAction: { value:function(event) { switch(event._currentTarget.label) @@ -69,6 +46,9 @@ exports.MaterialsPopup = Montage.create(Component, { } break; } + + // Notify Materials Library to close popup + NJevent("hideMaterialPopup"); } }, @@ -235,12 +215,12 @@ exports.MaterialsPopup = Montage.create(Component, { value: function(materialID) { this._materialName = materialID; - if( + if( (materialID === "UberMaterial") || (materialID === "FlatMaterial") || - (materialID === "BumpMetalMaterial") || - (materialID === "LinearGradientMaterial") || - (materialID === "RadialGradientMaterial") + (materialID === "BumpMetalMaterial") || + (materialID === "LinearGradientMaterial") || + (materialID === "RadialGradientMaterial") ) { var material = MaterialsLibrary.getMaterial( materialID ); @@ -323,6 +303,8 @@ exports.MaterialsPopup = Montage.create(Component, { { value: function( label, color ) { + var css = 'rgba(' + color[0]*255 + ',' + color[1]*255 + ',' + color[2]*255 + ',' + color[3] + ')'; + var colorObj = this.application.ninja.colorController.getColorObjFromCss(css) var obj = { "label": label, @@ -330,7 +312,7 @@ exports.MaterialsPopup = Montage.create(Component, { "controlType": "ColorChip", "defaults": { - "color": { r:color[0]*255, g:color[1]*255, b:color[2]*255, a:color[3] } + "color": colorObj } }; @@ -644,7 +626,7 @@ exports.MaterialsPopup = Montage.create(Component, { _materialsData: { enumerable: true, serializable: true, - value: this._dummyData1 + value: [] }, @@ -656,7 +638,10 @@ exports.MaterialsPopup = Montage.create(Component, { }, set: function(data) { this._materialsData = data; - this.materialsProperties.needsDraw = true; + if(this.materialsProperties) + { + this.materialsProperties.needsDraw = true; + } } } -- cgit v1.2.3 From 96a0a8c916533eb5625816192ed38488f639326d Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 22 Feb 2012 11:00:20 -0800 Subject: Integrating canvas-2d drawing and WebGL fixes, including adding back WebGL materials. Signed-off-by: Nivesh Rajbhandari --- js/panels/Materials/Materials.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Materials') 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 @@ - + -- cgit v1.2.3 From f775fb752cac57a0c1f6c42c8c60f5ff329eab32 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 22 Feb 2012 11:36:19 -0800 Subject: Revert "Integrating canvas-2d drawing and WebGL fixes, including adding back WebGL materials." This reverts commit 96a0a8c916533eb5625816192ed38488f639326d. --- js/panels/Materials/Materials.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Materials') diff --git a/js/panels/Materials/Materials.xml b/js/panels/Materials/Materials.xml index a958575e..e955623a 100755 --- a/js/panels/Materials/Materials.xml +++ b/js/panels/Materials/Materials.xml @@ -1,7 +1,7 @@ - + -- cgit v1.2.3 From d5b216d9d6d2b8cb93106e8f8ca351089d05b41d Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 22 Feb 2012 11:52:31 -0800 Subject: Integrating canvas-2d and WebGL drawing fixes. Also adding back WebGL materials. Signed-off-by: Nivesh Rajbhandari --- js/panels/Materials/Materials.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Materials') 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 @@ - + -- cgit v1.2.3