From e574f722864a246bad40d3f5a4e59f7ccb206ea9 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Thu, 15 Mar 2012 14:33:48 -0700 Subject: update values in the PI from values of the selected brush stroke or pen tool path --- js/controllers/elements/shapes-controller.js | 37 ++++++++++++++++++++++ js/data/pi/pi-data.js | 14 +++++---- js/lib/geom/brush-stroke.js | 46 +++++++++++++++++++++++++--- js/lib/geom/sub-path.js | 16 +++++++++- js/tools/BrushTool.js | 1 + js/tools/PenTool.js | 9 +++--- 6 files changed, 107 insertions(+), 16 deletions(-) diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index b273350a..b5e63514 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -144,6 +144,43 @@ exports.ShapesController = Montage.create(CanvasController, { case "background": case "useWebGl": return this.getShapeProperty(el, p); + case "strokeHardness": + if (el.elementModel && el.elementModel.shapeModel){ + return el.elementModel.shapeModel.GLGeomObj.getStrokeHardness();; + } else { + return null; + } + break; + case "doSmoothing": + if (el.elementModel && el.elementModel.shapeModel){ + return el.elementModel.shapeModel.GLGeomObj.getDoSmoothing();; + } else { + return null; + } + break; + case "strokeSmoothing": + if (el.elementModel && el.elementModel.shapeModel){ + return el.elementModel.shapeModel.GLGeomObj.getSmoothingAmount();; + } else { + return null; + } + break; + case "isCalligraphic": + if (el.elementModel && el.elementModel.shapeModel){ + return el.elementModel.shapeModel.GLGeomObj.getStrokeUseCalligraphic();; + } else { + return null; + } + break; + case "strokeAngle": + if (el.elementModel && el.elementModel.shapeModel){ + return el.elementModel.shapeModel.GLGeomObj.getStrokeAngle();; + } else { + return null; + } + break; + + case "strokeMaterial": case "fillMaterial": var m = this.getShapeProperty(el, p); diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js index ebd15832..9d90aa3d 100755 --- a/js/data/pi/pi-data.js +++ b/js/data/pi/pi-data.js @@ -680,14 +680,14 @@ exports.PiData = Montage.create( Montage, { id: "doSmoothing", prop: "doSmoothing", defaultValue: false, - value: "Smoothing", + value: "Y/N", checked: false }, { type : "hottext", id : "strokeSmoothing", prop : "strokeSmoothing", - label : "", + label : "Amount", valueMutator: parseFloat, min : 0, max : 100, @@ -705,18 +705,20 @@ exports.PiData = Montage.create( Montage, { id: "isCalligraphic", prop: "isCalligraphic", defaultValue: false, - value: "Calligraphic", - checked: false + value: "Y/N", + checked: false, + divider : true }, { type : "hottext", id : "strokeAngle", prop : "strokeAngle", - label : "", + label : "Angle", valueMutator: parseFloat, min : -90, max : 90, - value : 0 + value : 0, + unit : "deg." } ] ] diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index 0278e49c..02a39ccd 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js @@ -4,9 +4,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -// Todo: This entire class should be converted to a module var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; var GeomObj = require("js/lib/geom/geom-obj").GeomObj; +var CanvasController = require("js/controllers/elements/canvas-controller").CanvasController; + +// Todo: This entire class should be converted to a module /////////////////////////////////////////////////////////////////////// // Class GLBrushStroke @@ -28,7 +30,10 @@ var BrushStroke = function GLBrushStroke() { //whether or not to use the canvas drawing to stroke/fill this._useCanvasDrawing = true; - //the X and Y location of this subpath's canvas in stage world space of Ninja + //the HTML5 canvas that holds this brush stroke + this._canvas = null; + + //the X and Y location of this brush stroke canvas in stage world space of Ninja this._canvasX = 0; this._canvasY = 0; @@ -65,6 +70,10 @@ var BrushStroke = function GLBrushStroke() { ///////////////////////////////////////////////////////// // Property Accessors/Setters ///////////////////////////////////////////////////////// + this.setCanvas = function(c) { + this._canvas = c; + } + this.setWorld = function (world) { this._world = world; }; @@ -195,6 +204,9 @@ var BrushStroke = function GLBrushStroke() { this._dirty = true; } } + this.getStrokeHardness = function(){ + return this._strokeHardness; + } this.setDoSmoothing = function(s){ if (this._strokeDoSmoothing!==s) { @@ -203,12 +215,19 @@ var BrushStroke = function GLBrushStroke() { } } + this.getDoSmoothing = function(){ + return this._strokeDoSmoothing; + } + this.setSmoothingAmount = function(a){ if (this._strokeAmountSmoothing!==a) { this._strokeAmountSmoothing = a; this._dirty = true; } + } + this.getSmoothingAmount = function(){ + return this._strokeAmountSmoothing; } this.setStrokeUseCalligraphic = function(c){ @@ -225,6 +244,14 @@ var BrushStroke = function GLBrushStroke() { }; } + this.getStrokeUseCalligraphic = function(){ + return this._strokeUseCalligraphic; + } + + this.getStrokeAngle = function(){ + this._strokeAngle = a; + } + this.getStrokeStyle = function () { return this._strokeStyle; }; @@ -301,12 +328,13 @@ var BrushStroke = function GLBrushStroke() { console.log("Inserted "+numInsertedPoints+" additional CatmullRom points"); this._addedSamples = true; this._dirty=true; - } + } //if we need to add samples to this curve (done only once) + //build a copy of the original points...this should be done only once if (this._storedOrigPoints === false) { this._OrigPoints = this._Points.slice(0); this._storedOrigPoints = true; - } + } //if we need to store a copy of the original points (done only once) if (this._dirty) { this._Points = this._OrigPoints.slice(0); @@ -377,7 +405,7 @@ var BrushStroke = function GLBrushStroke() { // get the context var ctx = world.get2DContext(); - if (!ctx) throw ("null context in brushstroke render") + if (!ctx) throw ("null context in brushstroke render"); var numPoints = this.getNumPoints(); if (numPoints === 0) { @@ -391,6 +419,14 @@ var BrushStroke = function GLBrushStroke() { var bboxMax = this.getBBoxMax(); var bboxWidth = bboxMax[0] - bboxMin[0]; var bboxHeight = bboxMax[1] - bboxMin[1]; + + //assign the new width and height as the canvas dimensions through the canvas controller + if (this._canvas) { + CanvasController.setProperty(this._canvas, "width", bboxWidth+"px"); + CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); + this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas); + } + ctx.clearRect(0, 0, bboxWidth, bboxHeight); if (this._strokeUseCalligraphic) { diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js index 017cca92..e95be0e7 100755 --- a/js/lib/geom/sub-path.js +++ b/js/lib/geom/sub-path.js @@ -6,7 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; - +var CanvasController = require("js/controllers/elements/canvas-controller").CanvasController; var GeomObj = require("js/lib/geom/geom-obj").GeomObj; var AnchorPoint = require("js/lib/geom/anchor-point").AnchorPoint; var MaterialsModel = require("js/models/materials-model").MaterialsModel; @@ -61,6 +61,9 @@ var GLSubpath = function GLSubpath() { //whether or not to use the canvas drawing to stroke/fill this._useCanvasDrawing = true; + //the canvas that will draw this subpath + this._canvas = null; + //the X and Y location of this subpath's canvas in stage world space of Ninja this._canvasX = 0; this._canvasY = 0; @@ -131,6 +134,11 @@ var GLSubpath = function GLSubpath() { var bboxHeight = bboxMax[1] - bboxMin[1]; var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]; + if (this._canvas) { + CanvasController.setProperty(this._canvas, "width", bboxWidth+"px"); + CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); + this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas); + } ctx.clearRect(0, 0, bboxWidth, bboxHeight); ctx.lineWidth = this._strokeWidth; @@ -144,6 +152,7 @@ var GLSubpath = function GLSubpath() { //ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")"; ctx.fillStyle = fillColorStr; + console.log("Fill color:" + fillColorStr); } var lineCap = ['butt','round','square']; ctx.lineCap = lineCap[1]; @@ -256,6 +265,10 @@ GLSubpath.prototype = new GeomObj(); ///////////////////////////////////////////////////////// // Property Accessors/Setters ///////////////////////////////////////////////////////// +GLSubpath.prototype.setCanvas = function (c) { + this._canvas = c; +}; + GLSubpath.prototype.setWorld = function (world) { this._world = world; }; @@ -773,6 +786,7 @@ GLSubpath.prototype.getStrokeWidth = function () { GLSubpath.prototype.setStrokeWidth = function (w) { this._strokeWidth = w; + this._dirty=true; }; GLSubpath.prototype.getStrokeMaterial = function () { diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index c93672a9..90010cdf 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -266,6 +266,7 @@ exports.BrushTool = Montage.create(ShapeTool, { var brushStroke = this._selectedBrushStroke; if (brushStroke){ brushStroke.setWorld(world); + brushStroke.setCanvas(newCanvas); brushStroke.setPlaneMatrix(planeMat); var planeMatInv = glmat4.inverse( planeMat, [] ); diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index e239b3f1..779b7f16 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -467,9 +467,9 @@ exports.PenTool = Montage.create(ShapeTool, { if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){ this._selectedSubpath.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor); } - //if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){ - // this._selectedSubpath.setFillColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor); - //} + if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){ + this._selectedSubpath.setFillColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor); + } } //if this is a new path being rendered this._selectedSubpath.makeDirty(); @@ -594,6 +594,7 @@ exports.PenTool = Montage.create(ShapeTool, { var subpath = this._selectedSubpath; //new GLSubpath(); subpath.setWorld(world); + subpath.setCanvas(newCanvas); subpath.setPlaneMatrix(planeMat); var planeMatInv = glmat4.inverse( planeMat, [] ); subpath.setPlaneMatrixInverse(planeMatInv); @@ -614,7 +615,7 @@ exports.PenTool = Montage.create(ShapeTool, { if(strokeColor) { newCanvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; } - newCanvas.elementModel.shapeModel.strokeMaterial = this._selectedBrushStroke.getStrokeMaterial(); + newCanvas.elementModel.shapeModel.strokeMaterial = subpath.getStrokeMaterial(); newCanvas.elementModel.shapeModel.GLGeomObj = subpath; newCanvas.elementModel.shapeModel.useWebGl = this.options.use3D; -- cgit v1.2.3