From 76f2021618c0a6a99a1b855233e353e84ca99467 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 13 Mar 2012 11:23:32 -0700 Subject: Add a smoothing amount parameter, and hide options based on checkboxes --- js/tools/BrushTool.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 4ce9976a..d45d108e 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -85,7 +85,7 @@ exports.BrushTool = Montage.create(ShapeTool, { var strokeHardness = 100; if (this.options.strokeHardness){ - strokeHardness = ShapesController.GetValueInPixels(this.options.strokeHardness.value, this.options.strokeHardness.units); + strokeHardness = this.options.strokeHardness.value; } this._selectedBrushStroke.setStrokeHardness(strokeHardness); @@ -94,7 +94,10 @@ exports.BrushTool = Montage.create(ShapeTool, { doSmoothing = this.options.doSmoothing; } this._selectedBrushStroke.setDoSmoothing(doSmoothing); - + if (doSmoothing){ + this._selectedBrushStroke.setSmoothingAmount(this.options.smoothingAmount.value); + } + var useCalligraphic = false; if (this.options.useCalligraphic){ useCalligraphic = this.options.useCalligraphic; @@ -103,7 +106,7 @@ exports.BrushTool = Montage.create(ShapeTool, { this._selectedBrushStroke.setStrokeUseCalligraphic(true); var strokeAngle = 0; if (this.options.strokeAngle){ - strokeAngle= ShapesController.GetValueInPixels(this.options.strokeAngle.value, this.options.strokeAngle.units); + strokeAngle= this.options.strokeAngle.value; } this._selectedBrushStroke.setStrokeAngle(Math.PI * -strokeAngle/180); } else { -- cgit v1.2.3 From 23baa44e0bc7bfb24e42702c1ef58bf62da083d8 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Wed, 14 Mar 2012 15:37:09 -0700 Subject: PI for pen and brush strokes --- js/tools/BrushTool.js | 31 ++++++++++++++++++++++++++++++- js/tools/PenTool.js | 26 ++++++++++++++++++++++++++ 2 files changed, 56 insertions(+), 1 deletion(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index d45d108e..c93672a9 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -254,7 +254,7 @@ exports.BrushTool = Montage.create(ShapeTool, { var top = Math.round(midPt[1] - 0.5 * h); if (!canvas) { - var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); + var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas); ElementMediator.addElement(newCanvas, elementModel.data, true); @@ -276,10 +276,37 @@ exports.BrushTool = Montage.create(ShapeTool, { world.render(); //TODO this will not work if there are multiple shapes in the same canvas newCanvas.elementModel.shapeModel.GLGeomObj = brushStroke; + + newCanvas.elementModel.shapeModel.shapeCount++; + if(newCanvas.elementModel.shapeModel.shapeCount === 1) + { + newCanvas.elementModel.selection = "BrushStroke"; + newCanvas.elementModel.pi = "BrushStrokePi"; + newCanvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units; + var strokeColor = this._selectedBrushStroke.getStrokeColor(); + newCanvas.elementModel.shapeModel.stroke = strokeColor; + if(strokeColor) { + newCanvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; + } + newCanvas.elementModel.shapeModel.strokeMaterial = this._selectedBrushStroke.getStrokeMaterial(); + + newCanvas.elementModel.shapeModel.GLGeomObj = brushStroke; + newCanvas.elementModel.shapeModel.useWebGl = this.options.use3D; + } + else + { + // TODO - update the shape's info only. shapeModel will likely need an array of shapes. + } + + if(newCanvas.elementModel.isShape) + { + this.application.ninja.selectionController.selectElement(canvas); + } } } //if (!canvas) { else { + /* var world = null; if (canvas.elementModel.shapeModel && canvas.elementModel.shapeModel.GLWorld) { world = canvas.elementModel.shapeModel.GLWorld; @@ -320,6 +347,8 @@ exports.BrushTool = Montage.create(ShapeTool, { //TODO this will not work if there are multiple shapes in the same canvas canvas.elementModel.shapeModel.GLGeomObj = brushStroke; } + */ + alert("BrushStroke cannot edit existing canvas"); } //else of if (!canvas) { } //value: function (w, h, planeMat, midPt, canvas) { }, //RenderShape: { diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 60ef4f92..e239b3f1 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -601,7 +601,33 @@ exports.PenTool = Montage.create(ShapeTool, { world.addObject(subpath); world.render(); + //TODO this will not work if there are multiple shapes in the same canvas newCanvas.elementModel.shapeModel.GLGeomObj = subpath; + newCanvas.elementModel.shapeModel.shapeCount++; + if(newCanvas.elementModel.shapeModel.shapeCount === 1) + { + newCanvas.elementModel.selection = "Subpath"; + newCanvas.elementModel.pi = "SubpathPi"; + newCanvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units; + var strokeColor = subpath.getStrokeColor(); + newCanvas.elementModel.shapeModel.stroke = strokeColor; + if(strokeColor) { + newCanvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; + } + newCanvas.elementModel.shapeModel.strokeMaterial = this._selectedBrushStroke.getStrokeMaterial(); + + newCanvas.elementModel.shapeModel.GLGeomObj = subpath; + newCanvas.elementModel.shapeModel.useWebGl = this.options.use3D; + } + else + { + // TODO - update the shape's info only. shapeModel will likely need an array of shapes. + } + + if(newCanvas.elementModel.isShape) + { + this.application.ninja.selectionController.selectElement(newCanvas); + } } //if (!canvas) { else { -- cgit v1.2.3 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/tools/BrushTool.js | 1 + js/tools/PenTool.js | 9 +++++---- 2 files changed, 6 insertions(+), 4 deletions(-) (limited to 'js/tools') 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 From c0bd8d8efcc501d4efa116a7cc0e802fd4e9f3e9 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Mon, 19 Mar 2012 11:05:05 -0700 Subject: draw the brush stroke in realtime --- js/tools/BrushTool.js | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 90010cdf..93020318 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -204,20 +204,10 @@ exports.BrushTool = Montage.create(ShapeTool, { var horizontalOffset = this.application.ninja.stage.userContentLeft; var verticalOffset = this.application.ninja.stage.userContentTop; + var origX = -horizontalOffset; + var origY = -verticalOffset; + this._selectedBrushStroke.drawToContext(ctx, origX, origY); - var numPoints = this._selectedBrushStroke.getNumPoints(); - ctx.lineWidth = 1; - ctx.strokeStyle = "black"; - ctx.beginPath(); - var pt = this._selectedBrushStroke.getPoint(0); - ctx.moveTo(pt[0]+ horizontalOffset,pt[1]+ verticalOffset); - for (var i = 1; i < numPoints; i++) { - pt = this._selectedBrushStroke.getPoint(i); - var x = pt[0]+ horizontalOffset; - var y = pt[1]+ verticalOffset; - ctx.lineTo(x,y); - } - ctx.stroke(); ctx.restore(); } -- cgit v1.2.3 From 92bc54df4acfec849568ab619150a5da49c087fa Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 20 Mar 2012 10:24:15 -0700 Subject: revert to using the angle without flipping its sign...fixing some minor bugs and code cleanup GOOD status before doing 3D unprojection step --- js/tools/BrushTool.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 93020318..a135c1e5 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -108,7 +108,7 @@ exports.BrushTool = Montage.create(ShapeTool, { if (this.options.strokeAngle){ strokeAngle= this.options.strokeAngle.value; } - this._selectedBrushStroke.setStrokeAngle(Math.PI * -strokeAngle/180); + this._selectedBrushStroke.setStrokeAngle(Math.PI * strokeAngle/180); } else { this._selectedBrushStroke.setStrokeUseCalligraphic(false); } -- cgit v1.2.3 From 3987b73569e58843f2a91c0c6c4e4132f51ac247 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 21 Mar 2012 17:13:56 -0700 Subject: Do not set webkit-transform styles on elements unless 3d is used on them. Signed-off-by: Nivesh Rajbhandari --- js/tools/SelectionTool.js | 47 ++++++++++++++++++++++++------------------- js/tools/TagTool.js | 15 +++++++------- js/tools/drawing-tool-base.js | 2 +- 3 files changed, 34 insertions(+), 30 deletions(-) (limited to 'js/tools') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index f9411f48..e252e36b 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -318,18 +318,28 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { this._targets.push({elt:elt, mat:curMat, matInv:curMatInv}); if(addToUndoStack) { + var prevX, + prevY, + prevW, + prevH, + _x, + _y, + _w, + _h, + previousMat, + previousStyleStr, + newStyleStr; if(!this._use3DMode) { - var previousMat = this._undoArray[i].mat.slice(0); - var prevX = this._undoArray[i]._x; - var prevY = this._undoArray[i]._y; - var prevW = this._undoArray[i]._w; - var prevH = this._undoArray[i]._h; - var _x = parseInt(ElementsMediator.getProperty(elt, "left")) + curMat[12] - previousMat[12]; - var _y = parseInt(ElementsMediator.getProperty(elt, "top")) + curMat[13] - previousMat[13]; - var _w = parseInt(ElementsMediator.getProperty(elt, "width")); - var _h = parseInt(ElementsMediator.getProperty(elt, "height")); + prevX = this._undoArray[i]._x; + prevY = this._undoArray[i]._y; + prevW = this._undoArray[i]._w; + prevH = this._undoArray[i]._h; + _x = parseInt(ElementsMediator.getProperty(elt, "left")); + _y = parseInt(ElementsMediator.getProperty(elt, "top")); + _w = parseInt(ElementsMediator.getProperty(elt, "width")); + _h = parseInt(ElementsMediator.getProperty(elt, "height")); previousLeft.push(prevX + "px"); previousTop.push(prevY + "px"); @@ -339,27 +349,22 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { newTop.push(_y + "px"); newWidth.push(_w + "px"); newHeight.push(_h + "px"); - - viewUtils.setMatrixForElement(elt, previousMat); - - this._targets[i].mat = previousMat; - this._targets[i].matInv = glmat4.inverse(previousMat, []); } else { - var previousMat = this._undoArray[i].mat.slice(0); - var prevW = this._undoArray[i]._w; - var prevH = this._undoArray[i]._h; - var _w = parseInt(ElementsMediator.getProperty(elt, "width")); - var _h = parseInt(ElementsMediator.getProperty(elt, "height")); + previousMat = this._undoArray[i].mat.slice(0); + prevW = this._undoArray[i]._w; + prevH = this._undoArray[i]._h; + _w = parseInt(ElementsMediator.getProperty(elt, "width")); + _h = parseInt(ElementsMediator.getProperty(elt, "height")); previousWidth.push(prevW + "px"); previousHeight.push(prevH + "px"); newWidth.push(_w + "px"); newHeight.push(_h + "px"); - var previousStyleStr = {dist:this._undoArray[i].dist, + previousStyleStr = {dist:this._undoArray[i].dist, mat:MathUtils.scientificToDecimal(previousMat, 5)}; - var newStyleStr = {dist:viewUtils.getPerspectiveDistFromElement(elt), + newStyleStr = {dist:viewUtils.getPerspectiveDistFromElement(elt), mat:MathUtils.scientificToDecimal(curMat, 5)}; previousStyles.push(previousStyleStr); newStyles.push(newStyleStr); diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js index e3f49bbe..6df49a7b 100755 --- a/js/tools/TagTool.js +++ b/js/tools/TagTool.js @@ -222,21 +222,20 @@ exports.TagTool = Montage.create(DrawingTool, { makeElement: { value: function(w, h, planeMat, midPt,tag) { - var styles; - var left = Math.round(midPt[0] - 0.5 * w); var top = Math.round(midPt[1] - 0.5 * h); - var matStr = DrawingToolBase.getElementMatrix(planeMat, midPt); - - styles = { + var styles = { 'position': 'absolute', 'top' : top + 'px', - 'left' : left + 'px', - '-webkit-transform-style' : 'preserve-3d', - '-webkit-transform' : matStr + 'left' : left + 'px' }; + if(!MathUtils.isIdentityMatrix(planeMat)) { + styles['-webkit-transform-style'] = 'preserve-3d'; + styles['-webkit-transform'] = DrawingToolBase.getElementMatrix(planeMat, midPt); + } + // TODO - for canvas, set both as style and attribute. // Otherwise, we need to create a separate controller for canvas elements if(tag.tagName === "CANVAS") { diff --git a/js/tools/drawing-tool-base.js b/js/tools/drawing-tool-base.js index 8d87605c..84602186 100755 --- a/js/tools/drawing-tool-base.js +++ b/js/tools/drawing-tool-base.js @@ -442,7 +442,7 @@ exports.DrawingToolBase = Montage.create(Montage, { flatMat = divMat; flatMatSafe = MathUtils.scientificToDecimal(flatMat, 10); - return "perspective(" + 1400 + ") matrix3d( " + flatMatSafe + ")"; + return "perspective(" + 1400 + ") matrix3d(" + flatMatSafe + ")"; } }, -- cgit v1.2.3 From 92854b266936f844370688da3b15d035a041e8c2 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 22 Mar 2012 11:10:29 -0700 Subject: Translation handles do not redraw at correct location when double-clicking to reset. Signed-off-by: Nivesh Rajbhandari --- js/tools/Translate3DToolBase.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/Translate3DToolBase.js b/js/tools/Translate3DToolBase.js index 07b6d04d..b7bce2be 100755 --- a/js/tools/Translate3DToolBase.js +++ b/js/tools/Translate3DToolBase.js @@ -126,8 +126,11 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, this.isDrawing = false; this.endDraw(event); -// this.UpdateSelection(true); - this.Configure(true); + + // Need to force stage to draw immediately so the new selection center is calculated + this.application.ninja.stage.draw(); + // And captureSelectionDrawn to draw the transform handles + this.captureSelectionDrawn(null); } }, -- cgit v1.2.3 From bead8ce9e292f030a4b2fba6ad7fd38fb4fe5199 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 22 Mar 2012 11:16:39 -0700 Subject: IKNINJA-758 - The rotation value of the stage is not updated in the properties panel. Signed-off-by: Nivesh Rajbhandari --- js/tools/RotateStage3DTool.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/RotateStage3DTool.js b/js/tools/RotateStage3DTool.js index 2b312e53..f5cc4040 100755 --- a/js/tools/RotateStage3DTool.js +++ b/js/tools/RotateStage3DTool.js @@ -76,7 +76,7 @@ exports.RotateStage3DTool = Montage.create(Rotate3DToolBase, { this._targets.push({elt:elt, mat:curMat, matInv:curMatInv, ctr:eltCtr}); - viewUtils.setMatrixForElement( elt, curMat, false ); + ElementsMediator.setMatrix(elt, curMat, false, "rotateStage3DTool"); } }, @@ -130,7 +130,8 @@ exports.RotateStage3DTool = Montage.create(Rotate3DToolBase, { // Reset stage to identity matrix var iMat = Matrix.I(4); - ElementsMediator.setMatrix(this.application.ninja.currentDocument.documentRoot, iMat, false); + ElementsMediator.setMatrix(this.application.ninja.currentDocument.documentRoot, + iMat, false, "rotateStage3DTool"); this.application.ninja.currentDocument.documentRoot.elementModel.props3D.m_transformCtr = null; // let the document and stage manager know about the zoom change -- cgit v1.2.3 From 6965b72f1f42f7280bc5e5e52d08b3d64d106831 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 22 Mar 2012 13:07:48 -0700 Subject: IKNinja-1368 - Moving multiple selection of 2d elements starts changing the objects' relative positions. Signed-off-by: Nivesh Rajbhandari --- js/tools/SelectionTool.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) (limited to 'js/tools') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index e252e36b..aec5b6a3 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -465,11 +465,14 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { } else { - curMat = item.mat.slice(0); - glmat4.multiply(curMat, qMat, curMat); - var previousMat = this._undoArray[i].mat.slice(0); - var _x = parseInt(ElementsMediator.getProperty(elt, "left")) + curMat[12] - previousMat[12]; - var _y = parseInt(ElementsMediator.getProperty(elt, "top")) + curMat[13] - previousMat[13]; +// curMat = item.mat.slice(0); +// glmat4.multiply(curMat, qMat, curMat); +// var previousMat = this._undoArray[i].mat.slice(0); +// var _x = parseInt(ElementsMediator.getProperty(elt, "left")) + curMat[12] - previousMat[12]; +// var _y = parseInt(ElementsMediator.getProperty(elt, "top")) + curMat[13] - previousMat[13]; + + var _x = parseInt(ElementsMediator.getProperty(elt, "left")) + transMat[12]; + var _y = parseInt(ElementsMediator.getProperty(elt, "top")) + transMat[13]; newLeft.push(_x + "px"); newTop.push(_y + "px"); @@ -582,6 +585,8 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { { // form the translation vector and post translate the matrix by it. delta = vecUtils.vecSubtract( 3, data.pt1, data.pt0 ); + delta[0] = ~~delta[0]; + delta[1] = ~~delta[1]; delta[2] = 0; var transMat = Matrix.Translation( delta ); this._moveElements(transMat); -- cgit v1.2.3 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/BrushTool.js | 2 +- js/tools/LineTool.js | 2 +- js/tools/PenTool.js | 2 +- js/tools/ShapeTool.js | 4 +--- js/tools/TagTool.js | 4 +++- 5 files changed, 7 insertions(+), 7 deletions(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 4ce9976a..ac29f2f2 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -252,7 +252,7 @@ exports.BrushTool = Montage.create(ShapeTool, { if (!canvas) { var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); - var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas); + var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas, this._useWebGL); ElementMediator.addElement(newCanvas, elementModel.data, true); // create all the GL stuff diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index a61f8f79..a1cf7eb0 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -89,7 +89,7 @@ exports.LineTool = Montage.create(ShapeTool, { } canvas = NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); - var elementModel = TagTool.makeElement(w, h, drawData.planeMat, drawData.midPt, canvas); + var elementModel = TagTool.makeElement(w, h, drawData.planeMat, drawData.midPt, canvas, this.options.use3D); ElementMediator.addElement(canvas, elementModel.data, true); canvas.elementModel.isShape = true; diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 60ef4f92..17756772 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -584,7 +584,7 @@ exports.PenTool = Montage.create(ShapeTool, { if (!canvas) { var newCanvas = null; newCanvas = NJUtils.makeNJElement("canvas", "Subpath", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); - var elementModel = TagTool.makeElement(parseInt(w), parseInt(h), planeMat, midPt, newCanvas); + var elementModel = TagTool.makeElement(parseInt(w), parseInt(h), planeMat, midPt, newCanvas, this._useWebGL); ElementMediator.addElement(newCanvas, elementModel.data, true); // create all the GL stuff 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; diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js index 6df49a7b..2b6742e6 100755 --- a/js/tools/TagTool.js +++ b/js/tools/TagTool.js @@ -221,7 +221,7 @@ exports.TagTool = Montage.create(DrawingTool, { }, makeElement: { - value: function(w, h, planeMat, midPt,tag) { + value: function(w, h, planeMat, midPt,tag, isWebGl) { var left = Math.round(midPt[0] - 0.5 * w); var top = Math.round(midPt[1] - 0.5 * h); @@ -234,6 +234,8 @@ exports.TagTool = Montage.create(DrawingTool, { if(!MathUtils.isIdentityMatrix(planeMat)) { styles['-webkit-transform-style'] = 'preserve-3d'; styles['-webkit-transform'] = DrawingToolBase.getElementMatrix(planeMat, midPt); + } else if(isWebGl) { + styles['-webkit-transform-style'] = 'preserve-3d'; } // TODO - for canvas, set both as style and attribute. -- cgit v1.2.3 From 9b7dac9215fbd7c0fe7a80d3e8f1ff378332fec3 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Fri, 23 Mar 2012 14:32:46 -0700 Subject: Almost working version of brush tool that uses only local coordinates to store the brush stroke points. Current version does not yet update the width and height of the brush stroke canvas upon changing the brush stroke through the PI. Also, current version does not obtain 3D position of points properly from the drawing tool base (see BrushTool _getUnsnappedPosition) --- js/tools/BrushTool.js | 116 +++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 90 insertions(+), 26 deletions(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index a135c1e5..f3c6773d 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -16,6 +16,9 @@ var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager; var BrushStroke = require("js/lib/geom/brush-stroke").BrushStroke; +//whether or not we want the mouse move to be handled all the time (not just while drawing) inside the brush tool +var g_DoBrushToolMouseMove = true; + exports.BrushTool = Montage.create(ShapeTool, { hasReel: { value: false }, _toolID: { value: "brushTool" }, @@ -36,6 +39,7 @@ exports.BrushTool = Montage.create(ShapeTool, { //view options _brushStrokeCanvas: {value: null, writable: true}, _brushStrokePlaneMat: {value: null, writable: true}, + _draggingPlane: {value: null, writable: true}, //the current brush stroke _selectedBrushStroke: {value: null, writable: true}, @@ -61,9 +65,8 @@ exports.BrushTool = Montage.create(ShapeTool, { } this.startDraw(event); - if (this._brushStrokePlaneMat === null) { - this._brushStrokePlaneMat = this.mouseDownHitRec.getPlaneMatrix(); - } + this._brushStrokePlaneMat = this.mouseDownHitRec.getPlaneMatrix(); + //start a new brush stroke if (this._selectedBrushStroke === null){ this._selectedBrushStroke = new BrushStroke(); @@ -73,6 +76,7 @@ exports.BrushTool = Montage.create(ShapeTool, { if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){ this._selectedBrushStroke.setSecondStrokeColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor); } + //add this point to the brush stroke in case the user does a mouse up before doing a mouse move var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); this._selectedBrushStroke.addPoint(currMousePos); @@ -114,7 +118,8 @@ exports.BrushTool = Montage.create(ShapeTool, { } } - NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); + if (!g_DoBrushToolMouseMove) + NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); } //value: function (event) { }, //HandleLeftButtonDown @@ -129,7 +134,9 @@ exports.BrushTool = Montage.create(ShapeTool, { snapManager.enableSnapAlign(false); var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); + //todo fix this function to allow us to get the correct location (in 3D) for the mouse position var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); + this._draggingPlane = snapManager.getDragPlane(); snapManager.enableElementSnap(elemSnap); snapManager.enableGridSnap(gridSnap); @@ -150,13 +157,15 @@ exports.BrushTool = Montage.create(ShapeTool, { return; } + var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); if (this._isDrawing) { - var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()<1000){ this._selectedBrushStroke.addPoint(currMousePos); } this.ShowCurrentBrushStrokeOnStage(); - } //if (this._isDrawing) { + } else { + this.ShowCurrentBrushIconOnStage(currMousePos); + } //this.drawLastSnap(); //TODO.. is this line necessary if we're not snapping? // Required cleanup for both Draw/Feedbacks @@ -167,27 +176,69 @@ exports.BrushTool = Montage.create(ShapeTool, { HandleLeftButtonUp: { value: function (event) { - /*var drawData = this.getDrawingData(); - if (drawData) { - if (this._brushStrokePlaneMat === null) { - this._brushStrokePlaneMat = drawData.planeMat; - } - } - if (this._isDrawing) { - this.doDraw(event); - }*/ this.endDraw(event); this._isDrawing = false; this._hasDraw = false; - + //finish giving enough info. to the brush stroke + this._selectedBrushStroke.setPlaneMatrix(this._brushStrokePlaneMat); + this._selectedBrushStroke.setPlaneMatrixInverse(glmat4.inverse(this._brushStrokePlaneMat,[])); + this._selectedBrushStroke.setDragPlane(this._draggingPlane); + //display the previously drawn stroke in a separate canvas this.RenderCurrentBrushStroke(); this._selectedBrushStroke = null; this._brushStrokeCanvas = null; - NJevent("disableStageMove"); + if (!g_DoBrushToolMouseMove) + NJevent("disableStageMove"); + } + }, + + ShowCurrentBrushIconOnStage:{ + value: function(currMousePos) { + //clear the canvas before we draw anything else + this.application.ninja.stage.clearDrawingCanvas(); + //display the brush icon of proper size (query the options bar) + var strokeSize = 1; + if (this.options.strokeSize) { + strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units); + } + var useCalligraphic = false; + if (this.options.useCalligraphic){ + useCalligraphic = this.options.useCalligraphic; + } + var ctx = this.application.ninja.stage.drawingContext;//stageManagerModule.stageManager.drawingContext; + if (ctx === null) + throw ("null drawing context in Brushtool::ShowCurrentBrushStrokeOnStage"); + ctx.save(); + + var horizontalOffset = this.application.ninja.stage.userContentLeft; + var verticalOffset = this.application.ninja.stage.userContentTop; + var halfStrokeWidth = 0.5*strokeSize; + ctx.beginPath(); + if (!useCalligraphic) { + //for round brushes, draw a circle at the current mouse position + ctx.arc(currMousePos[0] + horizontalOffset, currMousePos[1]+ verticalOffset, halfStrokeWidth, 0, 2 * Math.PI, false); + } else { + //draw an angled stroke to represent the brush tip + var strokeAngle = 0; + if (this.options.strokeAngle){ + strokeAngle= this.options.strokeAngle.value; + } + strokeAngle = Math.PI * strokeAngle/180; + var deltaDisplacement = [Math.cos(strokeAngle),Math.sin(strokeAngle)]; + deltaDisplacement = VecUtils.vecNormalize(2, deltaDisplacement, 1); + var startPos = VecUtils.vecSubtract(2, currMousePos, [-horizontalOffset+halfStrokeWidth*deltaDisplacement[0],-verticalOffset+halfStrokeWidth*deltaDisplacement[1]]); + ctx.moveTo(startPos[0], startPos[1]); + var endPos = VecUtils.vecAdd(2, startPos, [strokeSize*deltaDisplacement[0], strokeSize*deltaDisplacement[1]]); + ctx.lineTo(endPos[0], endPos[1]); + ctx.lineWidth = 2; + } + ctx.strokeStyle = "black"; + ctx.stroke(); + ctx.restore(); } }, @@ -196,20 +247,16 @@ exports.BrushTool = Montage.create(ShapeTool, { //clear the canvas before we draw anything else this.application.ninja.stage.clearDrawingCanvas(); if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()>0){ - //this._selectedBrushStroke.computeMetaGeometry(); var ctx = this.application.ninja.stage.drawingContext;//stageManagerModule.stageManager.drawingContext; if (ctx === null) throw ("null drawing context in Brushtool::ShowCurrentBrushStrokeOnStage"); ctx.save(); - var horizontalOffset = this.application.ninja.stage.userContentLeft; var verticalOffset = this.application.ninja.stage.userContentTop; var origX = -horizontalOffset; var origY = -verticalOffset; - this._selectedBrushStroke.drawToContext(ctx, origX, origY); - + this._selectedBrushStroke.drawToContext(ctx, origX, origY, true); ctx.restore(); - } } }, @@ -217,7 +264,20 @@ exports.BrushTool = Montage.create(ShapeTool, { RenderCurrentBrushStroke:{ value: function() { if (this._selectedBrushStroke){ - this._selectedBrushStroke.computeMetaGeometry(); + //DEBUGGING + /*var localData = this._selectedBrushStroke.buildLocalDataFromStageWorldCoord(); + var bboxWidth = localData[1]; + var bboxHeight = localData[2]; + var bboxMid = localData[0];*/ + this._selectedBrushStroke.init(); + var bboxWidth = this._selectedBrushStroke.getWidth(); + var bboxHeight = this._selectedBrushStroke.getHeight(); + var bboxMid = this._selectedBrushStroke.getStageWorldCenter(); + //end DEBUGGING + //call render shape with the bbox width and height + this.RenderShape(bboxWidth, bboxHeight, this._brushStrokePlaneMat, bboxMid, this._brushStrokeCanvas); + + /*this._selectedBrushStroke.computeMetaGeometry(); var bboxMin = this._selectedBrushStroke.getBBoxMin(); var bboxMax = this._selectedBrushStroke.getBBoxMax(); var bboxWidth = bboxMax[0] - bboxMin[0]; @@ -226,9 +286,9 @@ exports.BrushTool = Montage.create(ShapeTool, { this._selectedBrushStroke.setCanvasX(bboxMid[0]); this._selectedBrushStroke.setCanvasY(bboxMid[1]); - //call render shape with the bbox width and height this.RenderShape(bboxWidth, bboxHeight, this._brushStrokePlaneMat, bboxMid, this._brushStrokeCanvas); + */ } } }, @@ -347,10 +407,14 @@ exports.BrushTool = Montage.create(ShapeTool, { Configure: { value: function (wasSelected) { if (wasSelected) { - console.log("Entered BrushTool"); + if (g_DoBrushToolMouseMove){ + NJevent("enableStageMove"); + } } else { - console.log("Left BrushTool"); + if (g_DoBrushToolMouseMove){ + NJevent("disbleStageMove"); + } } } } -- cgit v1.2.3 From 591812255e0e85e52825b1269f29f86fbd0f6182 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Fri, 23 Mar 2012 17:37:19 -0700 Subject: correctly update the brush stroke canvas size and position when the stroke size is changed (does not yet work when smoothing is applied) AND select the newly created brush stroke by default --- js/tools/BrushTool.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index f3c6773d..f7f0e4bf 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -349,9 +349,10 @@ exports.BrushTool = Montage.create(ShapeTool, { // TODO - update the shape's info only. shapeModel will likely need an array of shapes. } - if(newCanvas.elementModel.isShape) + //if(newCanvas.elementModel.isShape) + if (true) { - this.application.ninja.selectionController.selectElement(canvas); + this.application.ninja.selectionController.selectElement(newCanvas); } } } //if (!canvas) { -- cgit v1.2.3 From 53d83f9515c1d6edd35bf16a94e022730ccafbe9 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 26 Mar 2012 11:43:06 -0700 Subject: Updating EyeDropper tool to support new JSON data format for WebGL. Signed-off-by: Nivesh Rajbhandari --- js/tools/EyedropperTool.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 927b86cf..6d6937e3 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -368,7 +368,7 @@ exports.EyedropperTool = Montage.create(toolBase, { this._imageDataContext = this._imageDataCanvas.getContext("2d"); if(isWebGl) { - var worldData = elt.elementModel.shapeModel.GLWorld.export(); + var worldData = elt.elementModel.shapeModel.GLWorld.exportJSON(); if(worldData) { this._webGlDataCanvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": njModule.NJUtils.generateRandom()}, true); @@ -379,7 +379,16 @@ exports.EyedropperTool = Montage.create(toolBase, { this._webGlDataCanvas.width = w; this._webGlDataCanvas.height = h; this._webGlWorld = new World(this._webGlDataCanvas, true, true); - this._webGlWorld.import(worldData); + + var index = worldData.indexOf( ';' ); + if ((worldData[0] === 'v') && (index < 24)) + { + // JSON format. separate the version info from the JSON info + var jStr = worldData.substr( index+1 ); + worldData = JSON.parse( jStr ); + } + + this._webGlWorld.importJSON(worldData); this._webGlWorld.render(); setTimeout(function() { this._webGlWorld.draw(); -- cgit v1.2.3 From 21ed09eedee336e69ce2e0f9fd254eb989227adf Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 26 Mar 2012 12:09:47 -0700 Subject: Handle no-color/null. Signed-off-by: Nivesh Rajbhandari --- js/tools/EyedropperTool.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'js/tools') diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 6d6937e3..7458a9e8 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -148,7 +148,11 @@ exports.EyedropperTool = Montage.create(toolBase, { c = this._getColorFromElement(obj, event); } - if(typeof(c) === "string") + if(!c) + { + color = null; + } + else if(typeof(c) === "string") { color = this.application.ninja.colorController.getColorObjFromCss(c); } -- cgit v1.2.3 From 5d055d9fd20a2f4e5078bd722513ce905e9a6146 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 27 Mar 2012 11:33:28 -0700 Subject: Check for webGLWorld before calling draw. Signed-off-by: Nivesh Rajbhandari --- js/tools/EyedropperTool.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'js/tools') diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 7458a9e8..d627f03b 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -395,9 +395,12 @@ exports.EyedropperTool = Montage.create(toolBase, { this._webGlWorld.importJSON(worldData); this._webGlWorld.render(); setTimeout(function() { - this._webGlWorld.draw(); - this._imageDataContext.drawImage(this._webGlDataCanvas, 0, 0); - return this._getColorFromCanvas(this._imageDataContext, tmpPt, true); + if(this._webGlWorld) + { + this._webGlWorld.draw(); + this._imageDataContext.drawImage(this._webGlDataCanvas, 0, 0); + return this._getColorFromCanvas(this._imageDataContext, tmpPt, true); + } }.bind(this), 250); } } -- cgit v1.2.3 From bfd796e47c856c6620dc4b32ac6c710d4a493d3a Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 27 Mar 2012 15:24:30 -0700 Subject: Text Tool - Remove inline style from user document --- js/tools/TextTool.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js index 4c464173..d27a32bb 100755 --- a/js/tools/TextTool.js +++ b/js/tools/TextTool.js @@ -6,7 +6,8 @@ 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; - RichTextEditor = require("node_modules/labs/rich-text-editor.reel").RichTextEditor; + RichTextEditor = require("node_modules/labs/rich-text-editor.reel").RichTextEditor, + ElementsMediator = require("js/mediators/element-mediator").ElementMediator; exports.TextTool = Montage.create(DrawingTool, { @@ -21,7 +22,7 @@ exports.TextTool = Montage.create(DrawingTool, { this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value; this.application.ninja.stage.textTool.value = ""; this.application.ninja.stage.textTool.element.style.display = "none"; - this.applyElementStyles(this.application.ninja.stage.textTool.element.firstChild, this.selectedElement, ["color"]); + ElementsMediator.setProperty(this.application.ninja.selectedElements, "color", [window.getComputedStyle(this.application.ninja.stage.textTool.element.firstChild)["color"]], "Change", "textTool"); } //Set Selected Element this._selectedElement = val; -- cgit v1.2.3 From 331ea08655245e3532e48bf160d5f68a04d8723f Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 27 Mar 2012 16:38:52 -0700 Subject: IKNINJA-764 - The Local/Global options are not in synced with both 3D object rotate tool and 3D object translate tool. Signed-off-by: Nivesh Rajbhandari --- js/tools/RotateObject3DTool.js | 1 + js/tools/TranslateObject3DTool.js | 11 +++++++++-- 2 files changed, 10 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/RotateObject3DTool.js b/js/tools/RotateObject3DTool.js index 72af6eff..27352231 100755 --- a/js/tools/RotateObject3DTool.js +++ b/js/tools/RotateObject3DTool.js @@ -51,6 +51,7 @@ exports.RotateObject3DTool = Montage.create(Rotate3DToolBase, { toolHandle._rotMat = Matrix.RotationZ( angle ); } } + this._inLocalMode = (this.options.selectedMode === "rotateLocally"); } }, diff --git a/js/tools/TranslateObject3DTool.js b/js/tools/TranslateObject3DTool.js index 60633e74..4fac8187 100755 --- a/js/tools/TranslateObject3DTool.js +++ b/js/tools/TranslateObject3DTool.js @@ -4,15 +4,22 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -var Translate3DToolBase = require("js/tools/Translate3DToolBase").Translate3DToolBase, +var Montage = require("montage/core/core").Montage, + Translate3DToolBase = require("js/tools/Translate3DToolBase").Translate3DToolBase, drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils, viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils, snapManager = require("js/helper-classes/3D/snap-manager").SnapManager; -exports.TranslateObject3DTool = Object.create(Translate3DToolBase, { +exports.TranslateObject3DTool = Montage.create(Translate3DToolBase, { _toolID: { value: "translateObject3DTool" }, _canOperateOnStage: { value: true }, + _initializeToolHandles: { + value: function() { + this._inLocalMode = (this.options.selectedMode === "rotateLocally"); + } + }, + initializeSnapping : { value : function(event) { -- cgit v1.2.3 From 6b61de58f0733b40f64ed996933ac89927e922a1 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 29 Mar 2012 12:01:21 -0700 Subject: We shouldn't set z to 0 for translate tool snapping because user may want to snap in 3d. Signed-off-by: Nivesh Rajbhandari --- js/tools/Translate3DToolBase.js | 4 ---- 1 file changed, 4 deletions(-) (limited to 'js/tools') diff --git a/js/tools/Translate3DToolBase.js b/js/tools/Translate3DToolBase.js index 07b6d04d..005b9749 100755 --- a/js/tools/Translate3DToolBase.js +++ b/js/tools/Translate3DToolBase.js @@ -66,10 +66,6 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, delta[0] = 0; delta[1] = 0; } - else - { - delta[2] = 0; - } this._delta = delta.slice(0); } -- cgit v1.2.3 From 5b4f6b1618cf571a6bce5a631f976a008e04a64e Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 29 Mar 2012 15:52:08 -0700 Subject: Updated shapes to always check for its stroke and fill colors and materials instead of relying on the shapeModel cache because it can get out of sync. Signed-off-by: Nivesh Rajbhandari --- js/tools/LineTool.js | 7 ------- js/tools/OvalTool.js | 13 ------------- js/tools/RectTool.js | 13 ------------- 3 files changed, 33 deletions(-) (limited to 'js/tools') diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index a61f8f79..dd5a7c72 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -234,13 +234,6 @@ exports.LineTool = Montage.create(ShapeTool, { canvas.elementModel.selection = "Line"; canvas.elementModel.pi = "LinePi"; canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units; - canvas.elementModel.shapeModel.stroke = strokeColor; - if(strokeColor) - { - canvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; - } - - canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial; canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex; canvas.elementModel.shapeModel.strokeStyle = strokeStyle; diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index a10e0bb5..0ad74aa4 100755 --- a/js/tools/OvalTool.js +++ b/js/tools/OvalTool.js @@ -78,22 +78,9 @@ exports.OvalTool = Montage.create(ShapeTool, { canvas.elementModel.selection = "Oval"; canvas.elementModel.pi = "OvalPi"; canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units; - canvas.elementModel.shapeModel.stroke = strokeColor; - canvas.elementModel.shapeModel.fill = fillColor; - if(strokeColor) - { - canvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; - } - if(fillColor) - { - canvas.elementModel.shapeModel.background = this.application.ninja.colorController.colorToolbar.fill; - } canvas.elementModel.shapeModel.innerRadius = this.options.innerRadius.value + " " + this.options.innerRadius.units; - canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial; - canvas.elementModel.shapeModel.fillMaterial = fillMaterial; - canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex; canvas.elementModel.shapeModel.strokeStyle = strokeStyle; diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js index 957afea9..c56e4424 100755 --- a/js/tools/RectTool.js +++ b/js/tools/RectTool.js @@ -98,25 +98,12 @@ exports.RectTool = Montage.create(ShapeTool, { canvas.elementModel.selection = "Rectangle"; canvas.elementModel.pi = "RectanglePi"; canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units; - canvas.elementModel.shapeModel.stroke = strokeColor; - canvas.elementModel.shapeModel.fill = fillColor; - if(strokeColor) - { - canvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; - } - if(fillColor) - { - canvas.elementModel.shapeModel.background = this.application.ninja.colorController.colorToolbar.fill; - } canvas.elementModel.shapeModel.tlRadius = this.options.TLRadiusControl.value + " " + this.options.TLRadiusControl.units; canvas.elementModel.shapeModel.trRadius = this.options.TRRadiusControl.value + " " + this.options.TRRadiusControl.units; canvas.elementModel.shapeModel.blRadius = this.options.BLRadiusControl.value + " " + this.options.BLRadiusControl.units; canvas.elementModel.shapeModel.brRadius = this.options.BRRadiusControl.value + " " + this.options.BRRadiusControl.units; - canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial; - canvas.elementModel.shapeModel.fillMaterial = fillMaterial; - canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex; canvas.elementModel.shapeModel.strokeStyle = strokeStyle; -- 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/LineTool.js | 1 + js/tools/OvalTool.js | 2 ++ js/tools/RectTool.js | 2 ++ js/tools/ShapeTool.js | 25 +++++++++++++++++++++++++ 4 files changed, 30 insertions(+) (limited to 'js/tools') diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index dd5a7c72..499a6b9d 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -216,6 +216,7 @@ exports.LineTool = Montage.create(ShapeTool, { { strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM)); } + strokeColor = this._getMaterialColor(strokeM) || strokeColor; } var world = this.getGLWorld(canvas, this.options.use3D); diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index 0ad74aa4..c09c9bc7 100755 --- a/js/tools/OvalTool.js +++ b/js/tools/OvalTool.js @@ -53,12 +53,14 @@ exports.OvalTool = Montage.create(ShapeTool, { { strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM)); } + strokeColor = this._getMaterialColor(strokeM) || strokeColor; var fillM = this.options.fillMaterial; if(fillM) { fillMaterial = Object.create(MaterialsModel.getMaterial(fillM)); } + fillColor = this._getMaterialColor(fillM) || fillColor; } var world = this.getGLWorld(canvas, this.options.use3D); diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js index c56e4424..d69aa933 100755 --- a/js/tools/RectTool.js +++ b/js/tools/RectTool.js @@ -72,12 +72,14 @@ exports.RectTool = Montage.create(ShapeTool, { { strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM)); } + strokeColor = this._getMaterialColor(strokeM) || strokeColor; var fillM = this.options.fillMaterial; if(fillM) { fillMaterial = Object.create(MaterialsModel.getMaterial(fillM)); } + fillColor = this._getMaterialColor(fillM) || fillColor; } var world = this.getGLWorld(canvas, this.options.use3D); 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/LineTool.js | 2 +- js/tools/OvalTool.js | 4 ++-- js/tools/RectTool.js | 4 ++-- js/tools/ShapeTool.js | 27 --------------------------- 4 files changed, 5 insertions(+), 32 deletions(-) (limited to 'js/tools') diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index 499a6b9d..9b22c629 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -216,7 +216,7 @@ exports.LineTool = Montage.create(ShapeTool, { { strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM)); } - strokeColor = this._getMaterialColor(strokeM) || strokeColor; + strokeColor = ShapesController.getMaterialColor(strokeM) || strokeColor; } var world = this.getGLWorld(canvas, this.options.use3D); diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index c09c9bc7..e8e88d1d 100755 --- a/js/tools/OvalTool.js +++ b/js/tools/OvalTool.js @@ -53,14 +53,14 @@ exports.OvalTool = Montage.create(ShapeTool, { { strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM)); } - strokeColor = this._getMaterialColor(strokeM) || strokeColor; + strokeColor = ShapesController.getMaterialColor(strokeM) || strokeColor; var fillM = this.options.fillMaterial; if(fillM) { fillMaterial = Object.create(MaterialsModel.getMaterial(fillM)); } - fillColor = this._getMaterialColor(fillM) || fillColor; + fillColor = ShapesController.getMaterialColor(fillM) || fillColor; } var world = this.getGLWorld(canvas, this.options.use3D); diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js index d69aa933..0c14a559 100755 --- a/js/tools/R