From e3eb68c3a0b911acd873ee6211931b8f4e620030 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 28 Jun 2012 17:54:15 -0700 Subject: Fixed not being able to draw linear and radial gradients. Also fixed IKNINJA-1721 - File dirty marker does not show when modifying elements and IKNinja-1581 and IKNinja-1758 - Paint bucket fill bugs with lines and brush objects. Squashed commit of the following: commit 7cad082c89911d34a99feeef8e91d22b89cae8f1 Author: Nivesh Rajbhandari Date: Thu Jun 28 17:52:07 2012 -0700 Fix for not being able to draw linear and radial gradient materials. I'm turning off pre-flight support of gradients for WebGL since it conflicts with the materials' color support. Signed-off-by: Nivesh Rajbhandari commit d0df8a2bff052d855bafb7885792b1dfff8eab7d Merge: 2c67d26 b4b54f6 Author: Nivesh Rajbhandari Date: Thu Jun 28 17:50:11 2012 -0700 Merge branch 'refs/heads/ninja-internal' into ToolFixes commit 2c67d264851f0897fdca8ca887c1c82d0e434217 Author: Nivesh Rajbhandari Date: Thu Jun 28 15:06:13 2012 -0700 IKNINJA-1721 - File dirty marker does not show when modifying elements. Signed-off-by: Nivesh Rajbhandari commit bb4b6a52eb75efb2f435cdb53f810ae3bc1f1fc3 Author: Nivesh Rajbhandari Date: Thu Jun 28 11:15:34 2012 -0700 IKNinja-1581 and IKNinja-1758 - Paint bucket fill bugs with lines and brush objects. Signed-off-by: Nivesh Rajbhandari Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 8 ++++++++ js/controllers/styles-controller.js | 2 +- js/tools/FillTool.js | 5 +++-- js/tools/LineTool.js | 21 +++++++++++++++------ js/tools/OvalTool.js | 18 ++++++++++++------ js/tools/RectTool.js | 20 ++++++++++++-------- js/tools/ShapeTool.js | 18 ++++-------------- 7 files changed, 55 insertions(+), 37 deletions(-) diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 74353454..5920d51a 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -138,6 +138,10 @@ exports.ShapesController = Montage.create(CanvasController, { this.application.ninja.elementMediator.replaceElement(canvas, el); break; case "strokeMaterial": + // skip shape types that don't support WebGL + if(!el.elementModel.shapeModel.GLGeomObj.useWebGl) { + return; + } m = Object.create(MaterialsModel.getMaterial(value)); if(m) { @@ -152,6 +156,10 @@ exports.ShapesController = Montage.create(CanvasController, { } break; case "fillMaterial": + // skip shape types that don't support WebGL or fill color + if(!el.elementModel.shapeModel.GLGeomObj.canFill || !el.elementModel.shapeModel.GLGeomObj.useWebGl) { + return; + } m = Object.create(MaterialsModel.getMaterial(value)); if(m) { diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 0f847653..e7f95335 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -1437,11 +1437,11 @@ var stylesController = exports.StylesController = Montage.create(Component, { ///// Dispatch modified event NJevent('styleSheetModified', eventData); + this.currentDocument.model.needsSave = true; ///// If the sheet doesn't already exist in the list of modified ///// sheets, dispatch dirty event and add the sheet to the list if(sheetSearch.length === 0) { - this.currentDocument.model.needsSave = true; this.dirtyStyleSheets.push({ document : sheet.ownerNode.ownerDocument, stylesheet : sheet diff --git a/js/tools/FillTool.js b/js/tools/FillTool.js index e08ec1da..72e03379 100755 --- a/js/tools/FillTool.js +++ b/js/tools/FillTool.js @@ -12,7 +12,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, ModifierToolBase = require("js/tools/modifier-tool-base").ModifierToolBase, - ElementsMediator = require("js/mediators/element-mediator").ElementMediator; + ElementsMediator = require("js/mediators/element-mediator").ElementMediator, + ShapesController = require("js/controllers/elements/shapes-controller").ShapesController; exports.FillTool = Montage.create(ModifierToolBase, { _canSnap: { value: false }, @@ -28,7 +29,7 @@ exports.FillTool = Montage.create(ModifierToolBase, { if (obj) { var name = obj.nodeName; - if ((name !== 'CANVAS') && (name !== 'DIV')) + if ( ((name !== 'CANVAS') && (name !== 'DIV')) || (ShapesController.isElementAShape(obj) && !obj.elementModel.shapeModel.GLGeomObj.canFill)) { cursor = "url('images/cursors/nofill.png') 14 14, default"; canColor = false; diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index fde09959..413c0302 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -44,10 +44,16 @@ exports.LineTool = Montage.create(ShapeTool, { } this._strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units, null); - if (this.options.stroke.color) - this._strokeColor = this.options.stroke.color.css; - else - this._strokeColor = [0,0,0,1]; + if (this.options.stroke.color) { + if( (this.options.stroke.colorMode === "gradient") || (this.options.stroke.colorMode === "nocolor") ) { + this._strokeColor = [0,0,0,1]; + } else { + this._strokeColor = this.options.stroke.color.css; + } + } else { + this._strokeColor = [0,0,0,1]; + } + this.startDraw(event); } }, @@ -229,10 +235,11 @@ exports.LineTool = Montage.create(ShapeTool, { var strokeColor = this.options.stroke.webGlColor; // for default stroke and fill/no materials var strokeMaterial = null; + var strokeM = null; if(this.options.use3D) { - var strokeM = this.options.strokeMaterial; + strokeM = this.options.strokeMaterial; if(strokeM) { strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM)); @@ -271,7 +278,9 @@ exports.LineTool = Montage.create(ShapeTool, { } // TODO - This needs to be moved into geom obj's init routine instead of here - this.setColor(this.options.stroke, null, canvas, "lineTool"); + if(!strokeM) { + this.setColor(canvas, this.options.stroke, false, "lineTool"); + } if(canvas.elementModel.isShape) { diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index 33bf763d..e798d1a7 100755 --- a/js/tools/OvalTool.js +++ b/js/tools/OvalTool.js @@ -39,23 +39,24 @@ exports.OvalTool = Montage.create(ShapeTool, { var innerRadius = this.options.innerRadius.value / 100; - var strokeColor = this.options.stroke.webGlColor; - var fillColor = this.options.fill.webGlColor; - + var strokeColor = this.options.stroke.webGlColor || [0,0,0,1]; + var fillColor = this.options.fill.webGlColor || [1,1,1,1]; // for default stroke and fill/no materials var strokeMaterial = null; var fillMaterial = null; + var fillM = null; + var strokeM = null; if(this.options.use3D) { - var strokeM = this.options.strokeMaterial; + strokeM = this.options.strokeMaterial; if(strokeM) { strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM)); } strokeColor = ShapesController.getMaterialColor(strokeM) || strokeColor; - var fillM = this.options.fillMaterial; + fillM = this.options.fillMaterial; if(fillM) { fillMaterial = Object.create(MaterialsModel.getMaterial(fillM)); @@ -95,7 +96,12 @@ exports.OvalTool = Montage.create(ShapeTool, { } // TODO - This needs to be moved into geom obj's init routine instead of here - this.setColor(this.options.stroke, this.options.fill, canvas, "ovalTool"); + if(!fillM) { + this.setColor(canvas, this.options.fill, true, "ovalTool"); + } + if(!strokeM) { + this.setColor(canvas, this.options.stroke, false, "ovalTool"); + } if(canvas.elementModel.isShape) { diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js index df049395..6f0e65c7 100755 --- a/js/tools/RectTool.js +++ b/js/tools/RectTool.js @@ -59,22 +59,24 @@ exports.RectTool = Montage.create(ShapeTool, { var blRadius = ShapesController.GetValueInPixels(this.options.BLRadiusControl.value, this.options.BLRadiusControl.units, h); var brRadius = ShapesController.GetValueInPixels(this.options.BRRadiusControl.value, this.options.BRRadiusControl.units, h); - var strokeColor = this.options.stroke.webGlColor; - var fillColor = this.options.fill.webGlColor; + var strokeColor = this.options.stroke.webGlColor || [0,0,0,1]; + var fillColor = this.options.fill.webGlColor || [1,1,1,1]; // for default stroke and fill/no materials var strokeMaterial = null; var fillMaterial = null; + var fillM = null; + var strokeM = null; if(this.options.use3D) { - var strokeM = this.options.strokeMaterial; + strokeM = this.options.strokeMaterial; if(strokeM) { strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM)); } strokeColor = ShapesController.getMaterialColor(strokeM) || strokeColor; - var fillM = this.options.fillMaterial; + fillM = this.options.fillMaterial; if(fillM) { fillMaterial = Object.create(MaterialsModel.getMaterial(fillM)); @@ -118,14 +120,16 @@ exports.RectTool = Montage.create(ShapeTool, { } // TODO - This needs to be moved into geom obj's init routine instead of here - this.setColor(this.options.stroke, this.options.fill, canvas, "rectTool"); - + if(!fillM) { + this.setColor(canvas, this.options.fill, true, "rectTool"); + } + if(!strokeM) { + this.setColor(canvas, this.options.stroke, false, "rectTool"); + } if(canvas.elementModel.isShape) { this.application.ninja.selectionController.selectElement(canvas); } - - } } }); \ No newline at end of file diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index 6ff61546..3cd75be2 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -211,26 +211,16 @@ exports.ShapeTool = Montage.create(DrawingTool, { } }, - // We can draw on an existing canvas unless it has only a single shape object setColor: { - value: function(stroke, fill, canvas, toolId) + value: function(canvas, color, isFill, toolId) { - if(stroke && stroke.color) + if(color && color.color) { - this.application.ninja.elementMediator.setColor([canvas], {mode:stroke.colorMode, color:stroke.color}, false, "Change", toolId); + this.application.ninja.elementMediator.setColor([canvas], {mode:color.colorMode, color:color.color}, isFill, "Change", toolId); } else { - this.application.ninja.elementMediator.setColor([canvas], {mode:"nocolor", color:null}, false, "Change", toolId); - } - - if(fill && fill.color) - { - this.application.ninja.elementMediator.setColor([canvas], {mode:fill.colorMode, color:fill.color}, true, "Change", toolId); - } - else - { - this.application.ninja.elementMediator.setColor([canvas], {mode:"nocolor", color:null}, true, "Change", toolId); + this.application.ninja.elementMediator.setColor([canvas], {mode:"nocolor", color:null}, isFill, "Change", toolId); } } } -- cgit v1.2.3 From 01783536d2245b474eb1f89df673bfabb006cbdd Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 29 Jun 2012 11:49:51 -0700 Subject: Need to special case linear gradient, radial gradient and uber materials when applying fill and stroke colors. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 75 +++++++++++++++++++++------- js/lib/rdge/materials/uber-material.js | 12 +++++ 2 files changed, 68 insertions(+), 19 deletions(-) diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 5920d51a..c3099459 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -139,7 +139,7 @@ exports.ShapesController = Montage.create(CanvasController, { break; case "strokeMaterial": // skip shape types that don't support WebGL - if(!el.elementModel.shapeModel.GLGeomObj.useWebGl) { + if(!el.elementModel.shapeModel.useWebGl) { return; } m = Object.create(MaterialsModel.getMaterial(value)); @@ -157,7 +157,7 @@ exports.ShapesController = Montage.create(CanvasController, { break; case "fillMaterial": // skip shape types that don't support WebGL or fill color - if(!el.elementModel.shapeModel.GLGeomObj.canFill || !el.elementModel.shapeModel.GLGeomObj.useWebGl) { + if(!el.elementModel.shapeModel.GLGeomObj.canFill || !el.elementModel.shapeModel.useWebGl) { return; } m = Object.create(MaterialsModel.getMaterial(value)); @@ -453,17 +453,17 @@ exports.ShapesController = Montage.create(CanvasController, { if(gradientM) { - if(isFill) - { + if(isFill) + { el.elementModel.shapeModel.GLGeomObj.setFillMaterial(gradientM); } else { el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(gradientM); } - el.elementModel.shapeModel.GLGeomObj.buildBuffers(); - } - } + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); + } + } }, _setFlatMaterial: { @@ -480,10 +480,13 @@ exports.ShapesController = Montage.create(CanvasController, { } if(!m || ((m.getName() === "Linear Gradient") || m.getName() === "Radial Gradient") ) - { + { + // Uber Material also supports solid colors, so don't change from Uber to Flat Material + if(m && (m.getName() === "Uber")) { return; } + flatM = Object.create(MaterialsModel.getMaterial("Flat")); if(flatM) - { + { if(isFill) { el.elementModel.shapeModel.GLGeomObj.setFillMaterial(flatM); @@ -492,10 +495,10 @@ exports.ShapesController = Montage.create(CanvasController, { { el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(flatM); } - el.elementModel.shapeModel.GLGeomObj.buildBuffers(); - } + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); } } + } }, setColor: { @@ -605,14 +608,31 @@ exports.ShapesController = Montage.create(CanvasController, { setStroke: { value: function(el, stroke, eventType, source) { - if(stroke.colorInfo) { - this.setColor(el, stroke.colorInfo, false); - } if(stroke.shapeInfo) { this.setProperty(el, "strokeSize", stroke.shapeInfo.strokeSize + " " + stroke.shapeInfo.strokeUnits, eventType, source); } + var m; if(stroke.webGLInfo) { - this.setProperty(el, "strokeMaterial", stroke.webGLInfo.material); + m = stroke.webGLInfo.material; + this.setProperty(el, "strokeMaterial", m); + if((m === "Linear Gradient") || (m === "Radial Gradient")) { + // Just use the default gradient material values + return; + } + } + if(stroke.colorInfo) { + if(el.elementModel.shapeModel.useWebGl) { + m = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial().getName(); + if( ((stroke.colorInfo.mode === "gradient") && (m !== "Linear Gradient") && (m !== "Radial Gradient")) || + ((stroke.colorInfo.mode !== "gradient") && ((m === "Linear Gradient") || (m === "Radial Gradient")))) + { + return; + } else { + this.setColor(el, stroke.colorInfo, false); + } + } else { + this.setColor(el, stroke.colorInfo, false); + } } } }, @@ -646,11 +666,28 @@ exports.ShapesController = Montage.create(CanvasController, { setFill: { value: function(el, fill) { - if(fill.colorInfo) { - this.setColor(el, fill.colorInfo, true); - } + var m; if(fill.webGLInfo) { - this.setProperty(el, "fillMaterial", fill.webGLInfo.material); + m = fill.webGLInfo.material; + this.setProperty(el, "fillMaterial", m); + if((m === "Linear Gradient") || (m === "Radial Gradient")) { + // Just use the default gradient material values + return; + } + } + if(fill.colorInfo) { + if(el.elementModel.shapeModel.useWebGl) { + m = el.elementModel.shapeModel.GLGeomObj.getFillMaterial().getName(); + if( ((fill.colorInfo.mode === "gradient") && (m !== "Linear Gradient") && (m !== "Radial Gradient")) || + ((fill.colorInfo.mode !== "gradient") && ((m === "Linear Gradient") || (m === "Radial Gradient")))) + { + return; + } else { + this.setColor(el, fill.colorInfo, true); + } + } else { + this.setColor(el, fill.colorInfo, true); + } } } }, diff --git a/js/lib/rdge/materials/uber-material.js b/js/lib/rdge/materials/uber-material.js index 347e45d3..e1c6781d 100755 --- a/js/lib/rdge/materials/uber-material.js +++ b/js/lib/rdge/materials/uber-material.js @@ -99,6 +99,18 @@ var UberMaterial = function UberMaterial() { } } }; + + this.hasProperty = function( prop ) + { + if(prop === "color") return true; + + var propNames = [], dummy = []; + this.getAllProperties( propNames, dummy, dummy, dummy ) + for (var i=0; i