From 486d9a31a85dd833a1c798049a00403756703034 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 6 Feb 2012 11:35:49 -0800 Subject: Support use WebGL checkbox in the PI. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 1 + js/data/pi/pi-data.js | 30 ++++++++++++++++++++++++++++ js/models/shape-model.js | 1 + js/tools/LineTool.js | 1 + js/tools/OvalTool.js | 1 + js/tools/RectTool.js | 1 + 6 files changed, 35 insertions(+) (limited to 'js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 5efbccd0..48072309 100644 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -76,6 +76,7 @@ exports.ShapesController = Montage.create(CanvasController, { case "fillMaterial": case "border": case "background": + case "useWebGl": return this.getShapeProperty(el, p); default: return CanvasController.getProperty(el, p); diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js index dd75e255..8ccf17cc 100644 --- a/js/data/pi/pi-data.js +++ b/js/data/pi/pi-data.js @@ -367,6 +367,16 @@ exports.PiData = Montage.create( Montage, { label: "Materials", Section: [ + [ + { + type: "checkbox", + id: "useWebGl", + prop: "useWebGl", + defaultValue: false, + value: "Use WebGL", + checked: false + } + ], [ { type: "dropdown", @@ -432,6 +442,16 @@ exports.PiData = Montage.create( Montage, { label: "Materials", Section: [ + [ + { + type: "checkbox", + id: "useWebGl", + prop: "useWebGl", + defaultValue: false, + value: "Use WebGL", + checked: false + } + ], [ { type: "dropdown", @@ -505,6 +525,16 @@ exports.PiData = Montage.create( Montage, { label: "Materials", Section: [ + [ + { + type: "checkbox", + id: "useWebGl", + prop: "useWebGl", + defaultValue: false, + value: "Use WebGL", + checked: false + } + ], [ { type: "dropdown", diff --git a/js/models/shape-model.js b/js/models/shape-model.js index b643a7b5..1175538f 100644 --- a/js/models/shape-model.js +++ b/js/models/shape-model.js @@ -10,6 +10,7 @@ var Montage = require("montage/core/core").Montage, exports.ShapeModel = Montage.create(Component, { shapeCount: { value: 0 }, + useWebGl: { value: false }, GLWorld: { value: null }, GLGeomObj: { value: null }, diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index 17157f23..6a948fd8 100644 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -238,6 +238,7 @@ exports.LineTool = Montage.create(ShapeTool, { canvas.elementModel.shapeModel.strokeStyle = strokeStyle; canvas.elementModel.shapeModel.GLGeomObj = line; + canvas.elementModel.shapeModel.useWebGl = this.options.use3D; } else { diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index 2fa5411b..446c6754 100644 --- a/js/tools/OvalTool.js +++ b/js/tools/OvalTool.js @@ -95,6 +95,7 @@ exports.OvalTool = Montage.create(ShapeTool, { canvas.elementModel.shapeModel.strokeStyle = strokeStyle; canvas.elementModel.shapeModel.GLGeomObj = oval; + canvas.elementModel.shapeModel.useWebGl = this.options.use3D; } else { diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js index 94d80b53..6109ee4d 100644 --- a/js/tools/RectTool.js +++ b/js/tools/RectTool.js @@ -117,6 +117,7 @@ exports.RectTool = Montage.create(ShapeTool, { canvas.elementModel.shapeModel.strokeStyle = strokeStyle; canvas.elementModel.shapeModel.GLGeomObj = rect; + canvas.elementModel.shapeModel.useWebGl = this.options.use3D; } else { -- cgit v1.2.3 From 5737864d1d55d96e3cc3c1bc9b38ec58303b3981 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 6 Feb 2012 13:35:30 -0800 Subject: Allow users to switch between 2d and webGL mode. Note that this doesn't currently work. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 58 ++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) (limited to 'js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 48072309..22ba66b3 100644 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -56,6 +56,10 @@ exports.ShapesController = Montage.create(CanvasController, { el.elementModel.shapeModel.GLWorld.setViewportFromCanvas(el); el.elementModel.shapeModel.GLGeomObj.buildBuffers(); break; + case "useWebGl": + this.toggleWebGlMode(el, value); + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); + break; default: CanvasController.setProperty(el, p, value); } @@ -276,6 +280,60 @@ exports.ShapesController = Montage.create(CanvasController, { { return (el.elementModel && el.elementModel.isShape); } + }, + + toggleWebGlMode: { + value: function(el, useWebGl) + { + if(useWebGl) + { + this.convertToWebGlWorld(el); + } + else + { + this.convertTo2DWorld(el); + } + } + }, + + convertToWebGlWorld: { + value: function(el) + { + if(el.elementModel.shapeModel.useWebGl) + { + return; + } + var world, + worldData = el.elementModel.shapeModel.GLWorld.export(); + if(worldData) + { + world = new GLWorld(el, true); + el.elementModel.shapeModel.GLWorld = world; + el.elementModel.shapeModel.useWebGl = true; + world.import(worldData); + } + + } + }, + + convertTo2DWorld: { + value: function(el) + { + if(!el.elementModel.shapeModel.useWebGl) + { + return; + } + var world, + worldData = el.elementModel.shapeModel.GLWorld.export(); + if(worldData) + { + world = new GLWorld(el, false); + el.elementModel.shapeModel.GLWorld = world; + el.elementModel.shapeModel.useWebGl = false; + world.import(worldData); + } + + } } }); -- cgit v1.2.3 From f94b0c5ada403379b3ff8a900c2a2aabcecce49e Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 6 Feb 2012 14:03:40 -0800 Subject: Add enabled property for ComboBox to support enabling/disabling materials dropdowns in the PI. Signed-off-by: Nivesh Rajbhandari --- js/components/combobox.reel/combobox.js | 21 +++++++++++++++++++++ js/controllers/elements/shapes-controller.js | 5 +++-- js/data/pi/pi-data.js | 11 ++++++++--- js/panels/properties/sections/custom.reel/custom.js | 12 ++++++++++++ 4 files changed, 44 insertions(+), 5 deletions(-) (limited to 'js') diff --git a/js/components/combobox.reel/combobox.js b/js/components/combobox.reel/combobox.js index a68a7d6b..deef2a47 100644 --- a/js/components/combobox.reel/combobox.js +++ b/js/components/combobox.reel/combobox.js @@ -76,6 +76,26 @@ exports.Combobox = Montage.create(Component, { } }, + _enabled: { + enumerable: false, + value: true + }, + + enabled: { + enumerable: true, + serializable: true, + get: function() { + return this._enabled; + }, + set: function(value) { + if(value !== this._enabled) + { + this._enabled = value; + this.needsDraw = true; + } + } + }, + handleChange: { value:function(event) @@ -117,6 +137,7 @@ exports.Combobox = Montage.create(Component, { } this.element.appendChild(optionItem); } + this.element.disabled = !this._enabled; } } }, diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 22ba66b3..74c88084 100644 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -57,8 +57,9 @@ exports.ShapesController = Montage.create(CanvasController, { el.elementModel.shapeModel.GLGeomObj.buildBuffers(); break; case "useWebGl": - this.toggleWebGlMode(el, value); - el.elementModel.shapeModel.GLGeomObj.buildBuffers(); +// this.toggleWebGlMode(el, value); +// el.elementModel.shapeModel.GLGeomObj.buildBuffers(); + el.elementModel.shapeModel.useWebGl = value; break; default: CanvasController.setProperty(el, p, value); diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js index 8ccf17cc..901ca37f 100644 --- a/js/data/pi/pi-data.js +++ b/js/data/pi/pi-data.js @@ -385,6 +385,7 @@ exports.PiData = Montage.create( Montage, { label: "Stroke", labelField: "_name", items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" }, + enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }, divider : true } ], @@ -395,7 +396,8 @@ exports.PiData = Montage.create( Montage, { prop: "fillMaterial", label: "Fill", labelField: "_name", - items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" } + items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" }, + enabled: { boundObject: "this.controls", boundProperty: "useWebGl" } } ] ] @@ -458,7 +460,8 @@ exports.PiData = Montage.create( Montage, { id: "stroke", label: "Stroke", labelField: "_name", - items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" } + items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" }, + enabled: { boundObject: "this.controls", boundProperty: "useWebGl" } } ] ] @@ -543,6 +546,7 @@ exports.PiData = Montage.create( Montage, { label: "Stroke", labelFunction: function(item) { return item.getName(); }, items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" }, + enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }, divider : true } ], @@ -553,7 +557,8 @@ exports.PiData = Montage.create( Montage, { prop: "fillMaterial", label: "Fill", labelField: "_name", - items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" } + items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" }, + enabled: { boundObject: "this.controls", boundProperty: "useWebGl" } } ] ] diff --git a/js/panels/properties/sections/custom.reel/custom.js b/js/panels/properties/sections/custom.reel/custom.js index 2b5b522a..e92a39fd 100644 --- a/js/panels/properties/sections/custom.reel/custom.js +++ b/js/panels/properties/sections/custom.reel/custom.js @@ -193,6 +193,18 @@ exports.CustomSection = Montage.create(Component, { 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); // -- cgit v1.2.3 From 75486be2839494c9b54833aff8f5eef3f9542151 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 6 Feb 2012 15:41:48 -0800 Subject: Support toggling between 2d and 3d canvas context. This requires us to create a new canvas with all the same values as the canvas being replaced and copying over all the shape data. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 11 +++++++---- js/mediators/element-mediator.js | 7 +++++++ js/preloader/Preloader.js | 1 + 3 files changed, 15 insertions(+), 4 deletions(-) (limited to 'js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 74c88084..ed45710d 100644 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -5,7 +5,8 @@ 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; + CanvasController = require("js/controllers/elements/canvas-controller").CanvasController, + njModule = require("js/lib/NJUtils"); exports.ShapesController = Montage.create(CanvasController, { @@ -57,9 +58,11 @@ exports.ShapesController = Montage.create(CanvasController, { el.elementModel.shapeModel.GLGeomObj.buildBuffers(); break; case "useWebGl": -// this.toggleWebGlMode(el, value); -// el.elementModel.shapeModel.GLGeomObj.buildBuffers(); - el.elementModel.shapeModel.useWebGl = value; + var canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true); + this.application.ninja.elementMediator.replaceElement(el, canvas); + el = canvas; + this.toggleWebGlMode(el, value); + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); break; default: CanvasController.setProperty(el, p, value); diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index c44e1cb5..9aefbca6 100644 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -112,6 +112,13 @@ exports.ElementMediator = Montage.create(NJComponent, { } }, + replaceElement: { + value: function(el, el2) { + el2.elementModel = el.elementModel; + this.application.ninja.currentDocument.documentRoot.replaceChild(el2, el); + } + }, + getNJProperty: { value: function(el, p) { if(el.elementModel) { diff --git a/js/preloader/Preloader.js b/js/preloader/Preloader.js index 93d71e8f..42460093 100755 --- a/js/preloader/Preloader.js +++ b/js/preloader/Preloader.js @@ -60,6 +60,7 @@ exports.Preloader = Montage.create(Component, { {"type":"js", "url":"js/helper-classes/RDGE/src/core/script/util/dbgpanel.js"}, /* */ + {"type":"js", "url":"js/helper-classes/3D/ParseUtils.js"}, {"type":"js", "url":"js/helper-classes/RDGE/GLLine.js"}, {"type":"js", "url":"js/helper-classes/RDGE/GLMaterial.js"}, {"type":"js", "url":"js/helper-classes/RDGE/GLLight.js"}, -- cgit v1.2.3 From 92ae17bc800cf82cdbd1482ef1af1a5fd7bd632a Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 6 Feb 2012 16:35:12 -0800 Subject: Force layout canvas and SelectionController to update their info when a 2d canvas is replaced by a 3d canvas (and vice-versa). Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index ed45710d..3f1ccc3d 100644 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -59,7 +59,11 @@ exports.ShapesController = Montage.create(CanvasController, { break; case "useWebGl": var canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true); + canvas.width = el.width; + canvas.height = el.height; this.application.ninja.elementMediator.replaceElement(el, canvas); + NJevent("elementDeleted", el); + this.application.ninja.selectionController.selectElement(canvas); el = canvas; this.toggleWebGlMode(el, value); el.elementModel.shapeModel.GLGeomObj.buildBuffers(); -- cgit v1.2.3 From 486842239c71e7964f38a09aacda4970f2a82e1a Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 7 Feb 2012 10:58:14 -0800 Subject: Updated tools and PI to get/set materials by binding to appModel's materials property. This requires us to add FlatMaterial to the list of materials in the MaterialsLibrary. Signed-off-by: Nivesh Rajbhandari --- js/components/combobox.reel/combobox.js | 22 ++++++++- .../fill-properties.reel/fill-properties.html | 11 ++++- .../fill-properties.reel/fill-properties.js | 6 ++- .../ink-bottle-properties.html | 12 ++++- .../ink-bottle-properties.js | 6 ++- .../line-properties.reel/line-properties.js | 14 ++++-- .../oval-properties.reel/oval-properties.js | 14 ++++-- .../rect-properties.reel/rect-properties.js | 14 ++++-- .../shape-properties.reel/shape-properties.css | 6 +-- .../shape-properties.reel/shape-properties.html | 35 +++++++++----- .../shape-properties.reel/shape-properties.js | 53 +++++++++++++--------- js/data/pi/pi-data.js | 2 +- js/helper-classes/RDGE/MaterialsLibrary.js | 2 + js/models/shape-model.js | 2 - js/tools/LineTool.js | 7 ++- js/tools/OvalTool.js | 14 +++--- js/tools/RectTool.js | 14 +++--- 17 files changed, 155 insertions(+), 79 deletions(-) (limited to 'js') diff --git a/js/components/combobox.reel/combobox.js b/js/components/combobox.reel/combobox.js index deef2a47..8906a649 100644 --- a/js/components/combobox.reel/combobox.js +++ b/js/components/combobox.reel/combobox.js @@ -27,6 +27,14 @@ exports.Combobox = Montage.create(Component, { value: null }, + dataField: { + value: null + }, + + dataFunction: { + value: null + }, + _items: { value: [] }, @@ -122,7 +130,19 @@ exports.Combobox = Montage.create(Component, { { var current = items[i]; optionItem = document.createElement("option"); - optionItem.value = current; + if(this.dataFunction) + { + optionItem.value = this.dataFunction(current); + } + else if(this.dataField) + { + optionItem.value = current[this.dataField]; + } + else + { + optionItem.value = current; + } + if(this.labelFunction) { optionItem.innerText = this.labelFunction(current); diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html index d09b7f44..a35f9b15 100644 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.html +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html @@ -11,6 +11,15 @@