From 636014cf5d824909993d7dc3510fbe6ce2fc72f1 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 22 Mar 2012 14:24:46 -0700 Subject: WebGL needs to have 3d styles to render. Signed-off-by: Nivesh Rajbhandari --- js/tools/ShapeTool.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'js/tools/ShapeTool.js') diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index d3a36163..2124376d 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -6,8 +6,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, DrawingTool = require("js/tools/drawing-tool").DrawingTool, - viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils, - drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils, NJUtils = require("js/lib/NJUtils").NJUtils, ElementMediator = require("js/mediators/element-mediator").ElementMediator, ShapesController = require("js/controllers/elements/shapes-controller").ShapesController, @@ -70,7 +68,7 @@ exports.ShapeTool = Montage.create(DrawingTool, { { canvas = NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); var elementModel = TagTool.makeElement(~~drawData.width, ~~drawData.height, - drawData.planeMat, drawData.midPt, canvas); + drawData.planeMat, drawData.midPt, canvas, this.options.use3D); ElementMediator.addElement(canvas, elementModel.data, true); canvas.elementModel.isShape = true; -- cgit v1.2.3 From eae317815e15a7ffc2dd1bd1e39b208eaa02fd2b Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 30 Mar 2012 13:53:47 -0700 Subject: Update PI and Color Panel to reflect default LinearGradient and RadialGradient materials' colors. Signed-off-by: Nivesh Rajbhandari --- js/tools/ShapeTool.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) (limited to 'js/tools/ShapeTool.js') diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index d3a36163..1a12401f 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -206,7 +206,32 @@ exports.ShapeTool = Montage.create(DrawingTool, { } }, + _getMaterialColor: { + value: function(m) + { + var css, + colorObj; + if(m === "LinearGradientMaterial") + { + css = "-webkit-gradient(linear, left top, right top, from(rgb(255, 0, 0)), color-stop(0.3, rgb(0, 255, 0)), color-stop(0.6, rgb(0, 0, 255)), to(rgb(0, 255, 255)))"; + } + else if(m === "RadialGradientMaterial") + { + css = "-webkit-radial-gradient(50% 50%, ellipse cover, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 30%, rgb(0, 0, 255) 60%, rgb(0, 255, 255) 100%)"; + } + + if(css) + { + colorObj = this.application.ninja.colorController.getColorObjFromCss(css); + if(colorObj) + { + return {gradientMode:colorObj.color.gradientMode, color:colorObj.color.stops}; + } + } + return null; + } + }, // We can draw on an existing canvas unless it has only a single shape object _useExistingCanvas: { -- cgit v1.2.3 From 5377e963c4413640cd3c04e0406384df04144568 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 2 Apr 2012 14:52:14 -0700 Subject: Switching to Linear/RadialGradient materials will set the corresponding color. Also, dispatching an addElement event when toggling shape from WebGL/canvas2d so timeline can draw correctly. Signed-off-by: Nivesh Rajbhandari --- js/tools/ShapeTool.js | 27 --------------------------- 1 file changed, 27 deletions(-) (limited to 'js/tools/ShapeTool.js') diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index 1a12401f..85009bc2 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -206,33 +206,6 @@ exports.ShapeTool = Montage.create(DrawingTool, { } }, - _getMaterialColor: { - value: function(m) - { - var css, - colorObj; - if(m === "LinearGradientMaterial") - { - css = "-webkit-gradient(linear, left top, right top, from(rgb(255, 0, 0)), color-stop(0.3, rgb(0, 255, 0)), color-stop(0.6, rgb(0, 0, 255)), to(rgb(0, 255, 255)))"; - } - else if(m === "RadialGradientMaterial") - { - css = "-webkit-radial-gradient(50% 50%, ellipse cover, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 30%, rgb(0, 0, 255) 60%, rgb(0, 255, 255) 100%)"; - } - - if(css) - { - colorObj = this.application.ninja.colorController.getColorObjFromCss(css); - if(colorObj) - { - return {gradientMode:colorObj.color.gradientMode, color:colorObj.color.stops}; - } - } - - return null; - } - }, - // We can draw on an existing canvas unless it has only a single shape object _useExistingCanvas: { value: function() -- cgit v1.2.3 From 4d132fcbde4540c2cac6c0df613940353e2690f6 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 3 Apr 2012 12:03:16 -0700 Subject: Give user feedback about which element the Fill/InkBottle tools will act on. Signed-off-by: Nivesh Rajbhandari --- js/tools/ShapeTool.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) (limited to 'js/tools/ShapeTool.js') diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index 85009bc2..92284d78 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -119,7 +119,7 @@ exports.ShapeTool = Montage.create(DrawingTool, { RemoveCustomFeedback: { value: function (event) { if (this._targetedElement) { - this._targetedElement.classList.remove("elem-red-outline"); + this._targetedElement.classList.remove("active-element-outline"); this._targetedElement = null; } @@ -136,23 +136,22 @@ exports.ShapeTool = Montage.create(DrawingTool, { _showFeedbackOnMouseMove: { value: function (event) { // TODO - This call is causing the canvas to redraw 3 times per mouse move - var targetedObject = this.application.ninja.stage.GetElement(event); + var targetedObject = this.application.ninja.stage.GetSelectableElement(event); if (targetedObject) { - // TODO - Clean this up if((targetedObject.nodeName === "CANVAS") && !ShapesController.isElementAShape(targetedObject)) { if (targetedObject !== this._targetedElement) { if(this._targetedElement) { - this._targetedElement.classList.remove("elem-red-outline"); + this._targetedElement.classList.remove("active-element-outline"); } this._targetedElement = targetedObject; - this._targetedElement.classList.add("elem-red-outline"); + this._targetedElement.classList.add("active-element-outline"); } } else if (this._targetedElement) { - this._targetedElement.classList.remove("elem-red-outline"); + this._targetedElement.classList.remove("active-element-outline"); this._targetedElement = null; } } -- cgit v1.2.3 From d42af4f0f5e893ab0e1f74f50055e0be3bd9e78e Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 5 Apr 2012 16:43:25 -0700 Subject: -webkit-transform-style needs to be set to preserve-3d for shapes regardless of whether they are 2d shapes or WebGL shapes. Signed-off-by: Nivesh Rajbhandari --- js/tools/ShapeTool.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/tools/ShapeTool.js') diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index 00d36528..a8da7921 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -66,7 +66,7 @@ exports.ShapeTool = Montage.create(DrawingTool, { if(!this._useExistingCanvas()) { canvas = NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); var elementModel = TagTool.makeElement(~~drawData.width, ~~drawData.height, - drawData.planeMat, drawData.midPt, canvas, this.options.use3D); + drawData.planeMat, drawData.midPt, canvas, true); canvas.elementModel.isShape = true; this.application.ninja.elementMediator.addElements(canvas, elementModel.data); -- cgit v1.2.3 From 952e0b2c28af081041fa8987c3e865b931d052fa Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 9 Apr 2012 16:04:24 -0700 Subject: Single perspective fix. Note that rotating multiple objects when the stage is rotated still doesn't work and flatten still doesn't work. Signed-off-by: Nivesh Rajbhandari --- js/tools/ShapeTool.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/tools/ShapeTool.js') diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index a8da7921..f3b5e92d 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -197,7 +197,7 @@ exports.ShapeTool = Montage.create(DrawingTool, { 'top' : top + 'px', 'left' : left + 'px', '-webkit-transform-style' : 'preserve-3d', - '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' + '-webkit-transform' : 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' }; tmpDiv.width = w; -- cgit v1.2.3