From d7d78d4a4e8cf82c56379d25efbe679b3b823abc Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Thu, 1 Mar 2012 11:22:46 -0800 Subject: show feedback on mouseover on a part of the path where a new anchor will be added if clicked --- js/tools/PenTool.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'js/tools') diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index ddc8bc04..02367328 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -275,6 +275,9 @@ exports.PenTool = Montage.create(ShapeTool, { this.application.ninja.stage.clearDrawingCanvas(); this._hoveredAnchorIndex = -1; + //set the cursor to be the default cursor + this.application.ninja.stage.drawingCanvas.style.cursor = "auto"; + if (this._isDrawing) { var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); //go through the drawing toolbase to get the position of the mouse @@ -345,6 +348,14 @@ exports.PenTool = Montage.create(ShapeTool, { var selAnchor = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS); if (selAnchor >=0) { this._hoveredAnchorIndex = selAnchor; + } else { + //detect if the current mouse position will hit the path + var pathHitTestData = this._selectedSubpath.pathHitTest(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS); + if (pathHitTestData[0]!==-1){ + //change the cursor + var cursor = "url('images/cursors/penAdd.png') 10 10,default"; + this.application.ninja.stage.drawingCanvas.style.cursor = cursor; + } } } } //else of if (this._isDrawing) { @@ -353,7 +364,6 @@ exports.PenTool = Montage.create(ShapeTool, { if (this._selectedSubpath){ this.DrawSubpathAnchors(this._selectedSubpath); } - }//value: function(event) },//HandleMouseMove -- cgit v1.2.3 From 0b7f2f54738d2c1ea480b9bac7d3a750b1ef4df6 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Thu, 1 Mar 2012 15:29:17 -0800 Subject: first attempt at rendering the brush stroke as a collection of polylines (number of polylines equals the stroke width) --- js/tools/BrushTool.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index fec89eb2..dc9e022e 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -72,7 +72,7 @@ exports.BrushTool = Montage.create(ShapeTool, { this._selectedBrushStroke.addPoint(currMousePos); //TODO get these values from the options - this._selectedBrushStroke.setStrokeWidth(20); + this._selectedBrushStroke.setStrokeWidth(10); } NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); } //value: function (event) { @@ -112,7 +112,7 @@ exports.BrushTool = Montage.create(ShapeTool, { if (this._isDrawing) { var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); - if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()<100){ + if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()<1000){ this._selectedBrushStroke.addPoint(currMousePos); } this.ShowCurrentBrushStrokeOnStage(); -- cgit v1.2.3 From 1b68bb87c458877cb850a96d8a093d6064bc41dc Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Fri, 2 Mar 2012 12:23:44 -0800 Subject: Catmull-Rom spline sampling for the brush stroke, and options for stroke size, stroke hardness and both stroke colors (left and right --- temporarily using the stroke and fill colors respectively) --- js/tools/BrushTool.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index dc9e022e..8b0f60bb 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -5,6 +5,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot */ var ShapeTool = require("js/tools/ShapeTool").ShapeTool; +var ShapesController = require("js/controllers/elements/shapes-controller").ShapesController; var DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase; var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; var Montage = require("montage/core/core").Montage; @@ -67,12 +68,24 @@ exports.BrushTool = Montage.create(ShapeTool, { if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){ this._selectedBrushStroke.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor); } + 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); - //TODO get these values from the options - this._selectedBrushStroke.setStrokeWidth(10); + var strokeSize = 1; + if (this.options.strokeSize) { + strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units); + } + this._selectedBrushStroke.setStrokeWidth(strokeSize); + + var strokeHardness = 100; + if (this.options.strokeHardness){ + strokeHardness = ShapesController.GetValueInPixels(this.options.strokeHardness.value, this.options.strokeHardness.units); + } + this._selectedBrushStroke.setStrokeHardness(strokeHardness); } NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); } //value: function (event) { -- cgit v1.2.3 From 14258d1cb3400680ba821d94251defe55714b728 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 2 Mar 2012 14:27:44 -0800 Subject: We should show snap marker on mouse move even if user hasn't moused down yet. Signed-off-by: Nivesh Rajbhandari --- js/tools/SelectionTool.js | 10 +++++----- js/tools/modifier-tool-base.js | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) (limited to 'js/tools') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 6d8ff175..a2d8510e 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -123,14 +123,14 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { this.doDraw(event); } else { this._showFeedbackOnMouseMove(event); - // if(this._canSnap) - // { - // this.doSnap(event); - // } + if(this._canSnap) + { + this.doSnap(event); + } } this.DrawHandles(this._delta); - if(this._canSnap && this._isDrawing) + if(this._canSnap) { this.application.ninja.stage.stageDeps.snapManager.drawLastHit(); } diff --git a/js/tools/modifier-tool-base.js b/js/tools/modifier-tool-base.js index 7892d015..7e950b03 100755 --- a/js/tools/modifier-tool-base.js +++ b/js/tools/modifier-tool-base.js @@ -828,14 +828,14 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { this.doDraw(event); } else { this._showFeedbackOnMouseMove(event); -// if(this._canSnap) -// { -// this.doSnap(event); -// } + if(this._canSnap) + { + this.doSnap(event); + } } this.DrawHandles(this._delta); - if(this._canSnap && this._isDrawing) + if(this._canSnap) { snapManager.drawLastHit(); } -- cgit v1.2.3 From ba62bfff53319ebf140663dc0bf8fbaf1692ff9a Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 5 Mar 2012 16:42:13 -0800 Subject: Do not use transform code if transform mode is off. Signed-off-by: Nivesh Rajbhandari --- js/tools/SelectionTool.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'js/tools') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index a2d8510e..7eee761d 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -704,6 +704,10 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { */ _showFeedbackOnMouseMove : { value: function (event) { + if(!this._showTransformHandles) + { + return; + } if(this._target && this._handles) { var len = this._handles.length; -- cgit v1.2.3 From 2346d8ab9db06573d8672c64988c46b6c672e015 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 6 Mar 2012 11:28:16 -0800 Subject: Create drag plane parallel to working plane and offset by where the user clicked in z. Signed-off-by: Nivesh Rajbhandari --- js/tools/SelectionTool.js | 9 ++++----- js/tools/Translate3DToolBase.js | 1 - js/tools/TranslateObject3DTool.js | 2 +- js/tools/modifier-tool-base.js | 2 +- 4 files changed, 6 insertions(+), 8 deletions(-) (limited to 'js/tools') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 7eee761d..13a04944 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -16,6 +16,7 @@ var Montage = require("montage/core/core").Montage, var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { drawingFeedback: { value: { mode: "Draw2D", type: "" } }, + _inLocalMode: { value: false}, // This tool should always use global mode for translations _canOperateOnStage: { value: true}, _isSelecting: {value: false, writable:true}, _shiftMove: { value: 10}, @@ -34,14 +35,12 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { value: function () { if(this._targets && this._targets.length) { - // TODO - drawUtils's elementPlanes check in drawSelectionBounds doesn't seem to work, - // so temporary workaround to simply check if all elements have identity matrix - // TODO - Eventually, this should instead check if all the selected items are on the view plane var len = this._targets.length; + var plane = this.application.ninja.stage.stageDeps.snapManager.getDragPlane(); for(var i = 0; i < len; i++) { - var mat = this._targets[i].mat; - if(!MathUtils.isIdentityMatrix(mat)) + var elt = this._targets[i].elt; + if(!this.application.ninja.stage.stageDeps.snapManager.elementIsOnPlane(elt, plane)) { return false; } diff --git a/js/tools/Translate3DToolBase.js b/js/tools/Translate3DToolBase.js index 3d9191da..24a68ad1 100755 --- a/js/tools/Translate3DToolBase.js +++ b/js/tools/Translate3DToolBase.js @@ -10,7 +10,6 @@ Subclass TranslateObject3DTool will translate the object that was clicked. var Montage = require("montage/core/core").Montage, ModifierToolBase = require("js/tools/modifier-tool-base").ModifierToolBase, toolHandleModule = require("js/stage/tool-handle"), - snapManager = require("js/helper-classes/3D/snap-manager").SnapManager, viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils, vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils, drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils, diff --git a/js/tools/TranslateObject3DTool.js b/js/tools/TranslateObject3DTool.js index 5157e39c..92b9b2f7 100755 --- a/js/tools/TranslateObject3DTool.js +++ b/js/tools/TranslateObject3DTool.js @@ -103,7 +103,7 @@ exports.TranslateObject3DTool = Object.create(Translate3DToolBase, { } else { - this._dragPlane = snapManager.setupDragPlanes( hitRec ); + this._dragPlane = snapManager.setupDragPlanes( hitRec, true ); } } diff --git a/js/tools/modifier-tool-base.js b/js/tools/modifier-tool-base.js index 7e950b03..80f7d758 100755 --- a/js/tools/modifier-tool-base.js +++ b/js/tools/modifier-tool-base.js @@ -171,7 +171,7 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { // } // else // { - this._dragPlane = snapManager.setupDragPlanes( hitRec ); + this._dragPlane = snapManager.setupDragPlanes( hitRec, true ); // } } -- cgit v1.2.3 From 703fb3d06e88257ac73c1d1a0ec6ca33a64f4371 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Wed, 7 Mar 2012 14:33:21 -0800 Subject: implement stroke hardness such that it is percentage of the stroke width that's fully the color of the brush AND add a smoothing flag for the brush options --- js/tools/BrushTool.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index dd201f33..1e1df0a4 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -88,6 +88,12 @@ exports.BrushTool = Montage.create(ShapeTool, { strokeHardness = ShapesController.GetValueInPixels(this.options.strokeHardness.value, this.options.strokeHardness.units); } this._selectedBrushStroke.setStrokeHardness(strokeHardness); + + var doSmoothing = false; + if (this.options.doSmoothing){ + doSmoothing = this.options.doSmoothing.value; + } + this._selectedBrushStroke.setDoSmoothing(doSmoothing); } NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); } //value: function (event) { -- cgit v1.2.3 From 84af1c10ca02dd3ac2b36cb141d180c55bcdebdd Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 7 Mar 2012 16:23:51 -0800 Subject: Eyedropper now supports strokes in rectangle shapes. Signed-off-by: Nivesh Rajbhandari --- js/tools/EyedropperTool.js | 59 ++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 55 insertions(+), 4 deletions(-) (limited to 'js/tools') diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 11c15158..d6a162cd 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -6,9 +6,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, ElementsMediator = require("js/mediators/element-mediator").ElementMediator, - drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils, - vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils, - toolBase = require("js/tools/ToolBase").toolBase; + toolBase = require("js/tools/ToolBase").toolBase, + ShapesController = require("js/controllers/elements/shapes-controller").ShapesController; exports.EyedropperTool = Montage.create(toolBase, { @@ -133,7 +132,15 @@ exports.EyedropperTool = Montage.create(toolBase, { { this._deleteImageDataCanvas(); - c = this._getColorFromElement(obj, event); + if(ShapesController.isElementAShape(obj)) + { + c = this._getColorFromShape(obj, event); + } + else + { + c = this._getColorFromElement(obj, event); + } + if(typeof(c) === "string") { color = this.application.ninja.colorController.getColorObjFromCss(c); @@ -289,6 +296,50 @@ exports.EyedropperTool = Montage.create(toolBase, { } }, + // TODO - We don't want to calculate this repeatedly + _getColorFromShape: { + value: function(elt, event) + { + var strokeWidth = ShapesController.getShapeProperty(elt, "strokeSize"), + bounds3D, + innerBounds, + pt, + tmpPt, + x, + y; + if(strokeWidth) + { + strokeWidth = parseFloat(strokeWidth); + bounds3D = this.application.ninja.stage.viewUtils.getElementViewBounds3D( elt ); + innerBounds = []; + pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, + new WebKitPoint(event.pageX, event.pageY)); + + innerBounds.push([bounds3D[0][0] + strokeWidth, bounds3D[0][1] + strokeWidth, 0]); + + innerBounds.push([bounds3D[1][0] + strokeWidth, bounds3D[1][1] - strokeWidth, 0]); + + innerBounds.push([bounds3D[2][0] - strokeWidth, bounds3D[2][1] - strokeWidth, 0]); + + innerBounds.push([bounds3D[3][0] - strokeWidth, bounds3D[3][1] + strokeWidth, 0]); + + tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); + x = tmpPt[0]; + y = tmpPt[1]; + + if( (x < innerBounds[0][0]) || + (x > innerBounds[2][0]) || + (y < innerBounds[0][1]) || + (y > innerBounds[1][1]) ) + { + return ShapesController.getColor(elt, false); + } + } + + return ShapesController.getColor(elt, true); + } + }, + _getColorAtPoint: { value: function(elt, event) { -- cgit v1.2.3 From fcab2a14f8de302948d38f55db41e2c1c92baa34 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Thu, 8 Mar 2012 16:03:17 -0800 Subject: brush stroke options for calligraphic brush style --- js/tools/BrushTool.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 1e1df0a4..9e300554 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -91,9 +91,25 @@ exports.BrushTool = Montage.create(ShapeTool, { var doSmoothing = false; if (this.options.doSmoothing){ - doSmoothing = this.options.doSmoothing.value; + doSmoothing = this.options.doSmoothing; } this._selectedBrushStroke.setDoSmoothing(doSmoothing); + + var useCalligraphic = false; + if (this.options.useCalligraphic){ + useCalligraphic = this.options.useCalligraphic; + } + if (useCalligraphic) { + this._selectedBrushStroke.setStrokeUseCalligraphic(true); + var strokeAngle = 0; + if (this.options.strokeAngle){ + strokeAngle= ShapesController.GetValueInPixels(this.options.strokeAngle.value, this.options.strokeAngle.units); + } + this._selectedBrushStroke.setStrokeAngle(strokeAngle); + } else { + this._selectedBrushStroke.setStrokeUseCalligraphic(false); + } + } NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); } //value: function (event) { -- cgit v1.2.3 From 86784888a98a05523dbedcbe32fd4dea336878e7 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 9 Mar 2012 08:21:13 -0800 Subject: Eyedropper support for getting color value from webgl shapes. Signed-off-by: Nivesh Rajbhandari --- js/tools/EyedropperTool.js | 121 ++++++++++++++++++++++++++++----------------- 1 file changed, 76 insertions(+), 45 deletions(-) (limited to 'js/tools') diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index d6a162cd..6e71c693 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -7,7 +7,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, ElementsMediator = require("js/mediators/element-mediator").ElementMediator, toolBase = require("js/tools/ToolBase").toolBase, - ShapesController = require("js/controllers/elements/shapes-controller").ShapesController; + ShapesController = require("js/controllers/elements/shapes-controller").ShapesController, + World = require("js/lib/drawing/world").World, + njModule = require("js/lib/NJUtils"); exports.EyedropperTool = Montage.create(toolBase, { @@ -16,6 +18,8 @@ exports.EyedropperTool = Montage.create(toolBase, { _color: { value: null}, _elementUnderMouse: { value: null }, _imageDataCanvas: { value: null }, + _webGlDataCanvas: { value: null }, + _webGlWorld: { value: null }, _imageDataContext: { value: null }, _canSnap: { value: false }, @@ -29,6 +33,11 @@ exports.EyedropperTool = Montage.create(toolBase, { else { NJevent("disableStageMove"); + this._deleteImageDataCanvas(); + this._isMouseDown = false; + this._elementUnderMouse = null; + this._previousColor = null; + this._color = null; } } }, @@ -122,7 +131,7 @@ exports.EyedropperTool = Montage.create(toolBase, { new WebKitPoint(event.pageX, event.pageY)), ctx = obj.getContext("2d"); - c = this._getColorFromCanvas(ctx, pt); + c = this._getColorFromCanvas(ctx, [pt.x, pt.y]); if(c) { color = this.application.ninja.colorController.getColorObjFromCss(c); @@ -130,8 +139,6 @@ exports.EyedropperTool = Montage.create(toolBase, { } else { - this._deleteImageDataCanvas(); - if(ShapesController.isElementAShape(obj)) { c = this._getColorFromShape(obj, event); @@ -239,6 +246,8 @@ exports.EyedropperTool = Montage.create(toolBase, { _getColorFromElement: { value: function(elt, event) { + this._deleteImageDataCanvas(); + var border = ElementsMediator.getProperty(elt, "border"), borderWidth, bounds3D, @@ -300,49 +309,39 @@ exports.EyedropperTool = Montage.create(toolBase, { _getColorFromShape: { value: function(elt, event) { - var strokeWidth = ShapesController.getShapeProperty(elt, "strokeSize"), - bounds3D, - innerBounds, - pt, + var c, + ctx, tmpPt, - x, - y; - if(strokeWidth) - { - strokeWidth = parseFloat(strokeWidth); - bounds3D = this.application.ninja.stage.viewUtils.getElementViewBounds3D( elt ); - innerBounds = []; pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, - new WebKitPoint(event.pageX, event.pageY)); - - innerBounds.push([bounds3D[0][0] + strokeWidth, bounds3D[0][1] + strokeWidth, 0]); - - innerBounds.push([bounds3D[1][0] + strokeWidth, bounds3D[1][1] - strokeWidth, 0]); - - innerBounds.push([bounds3D[2][0] - strokeWidth, bounds3D[2][1] - strokeWidth, 0]); - - innerBounds.push([bounds3D[3][0] - strokeWidth, bounds3D[3][1] + strokeWidth, 0]); + new WebKitPoint(event.pageX, event.pageY)); - tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); - x = tmpPt[0]; - y = tmpPt[1]; + tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); - if( (x < innerBounds[0][0]) || - (x > innerBounds[2][0]) || - (y < innerBounds[0][1]) || - (y > innerBounds[1][1]) ) + if(elt.elementModel.shapeModel.useWebGl) + { + c = this._getColorAtPoint(elt, event, true); + } + else + { + this._deleteImageDataCanvas(); + ctx = elt.getContext("2d"); + if(ctx) { - return ShapesController.getColor(elt, false); + c = this._getColorFromCanvas(ctx, tmpPt); } } - - return ShapesController.getColor(elt, true); + return c; } }, _getColorAtPoint: { - value: function(elt, event) + value: function(elt, event, isWebGl) { + var pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, + new WebKitPoint(event.pageX, event.pageY)); + + var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); + if(!this._imageDataCanvas) { this._imageDataCanvas = document.createElement("canvas"); @@ -362,25 +361,52 @@ exports.EyedropperTool = Montage.create(toolBase, { this._imageDataCanvas.height = h; this._imageDataContext = this._imageDataCanvas.getContext("2d"); - this._imageDataContext.drawImage(elt, 0, 0); + if(isWebGl) + { + var worldData = elt.elementModel.shapeModel.GLWorld.export(); + if(worldData) + { + this._webGlDataCanvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": njModule.NJUtils.generateRandom()}, true); + this._applyElementStyles(elt, this._webGlDataCanvas, ["display", "position", "width", "height", + "-webkit-transform", "-webkit-transform-style"]); + this._webGlDataCanvas.style.left = eltCoords[0] + "px"; + this._webGlDataCanvas.style.top = eltCoords[1] + "px"; + this._webGlDataCanvas.width = w; + this._webGlDataCanvas.height = h; + this._webGlWorld = new World(this._webGlDataCanvas, true, true); + this._webGlWorld.import(worldData); + this._webGlWorld.render(); + setTimeout(function() { + this._webGlWorld.draw(); + this._imageDataContext.drawImage(this._webGlDataCanvas, 0, 0); + return this._getColorFromCanvas(this._imageDataContext, tmpPt, true); + }.bind(this), 250); + } + } + else + { + this._imageDataContext.drawImage(elt, 0, 0); + } } - var pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, - new WebKitPoint(event.pageX, event.pageY)); - - var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); - - return this._getColorFromCanvas(this._imageDataContext, tmpPt); + return this._getColorFromCanvas(this._imageDataContext, tmpPt, isWebGl); } }, _getColorFromCanvas: { - value: function(ctx, pt) + value: function(ctx, pt, isWebGl) { - var imageData = ctx.getImageData(pt[0], pt[1], 1, 1).data; + var imageData = ctx.getImageData(~~pt[0], ~~pt[1], 1, 1).data; if(imageData) { - return ("rgba(" + imageData[0] + "," + imageData[1] + "," + imageData[2] + "," + imageData[3] + ")"); + if(isWebGl) + { + return ("rgba(" + imageData[0] + "," + imageData[1] + "," + imageData[2] + "," + imageData[3]/255 + ")"); + } + else + { + return ("rgba(" + imageData[0] + "," + imageData[1] + "," + imageData[2] + "," + imageData[3] + ")"); + } } else { @@ -394,6 +420,11 @@ exports.EyedropperTool = Montage.create(toolBase, { { if(this._imageDataCanvas) { + if(this._webGlDataCanvas) + { + this._webGlWorld = null; + this._webGlDataCanvas = null; + } this._imageDataCanvas = null; this._imageDataContext = null; } -- cgit v1.2.3 From e2562c3f24eb5dbfb9e3bd2868cdf1a2806644bf Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 9 Mar 2012 13:14:14 -0800 Subject: Fixing selection tool when moving multiple selection in 3d mode. Signed-off-by: Nivesh Rajbhandari --- js/tools/SelectionTool.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'js/tools') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 13a04944..5f48f74d 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -451,7 +451,10 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { if(this._use3DMode) { curMat = item.mat; - glmat4.multiply(curMat, qMat, curMat); + + curMat[12] += transMat[12]; + curMat[13] += transMat[13]; + curMat[14] += transMat[14]; viewUtils.setMatrixForElement( elt, curMat, true); this._targets[i].mat = curMat; } -- cgit v1.2.3 From 2c6339a9191033c937c2bac3e181c2bc380f4c48 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 12 Mar 2012 12:00:07 -0700 Subject: Fixed element mediator, PI, and eye-dropper to handle different borders sides and gradients. Signed-off-by: Nivesh Rajbhandari --- js/tools/EyedropperTool.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) (limited to 'js/tools') diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 6e71c693..927b86cf 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -152,10 +152,14 @@ exports.EyedropperTool = Montage.create(toolBase, { { color = this.application.ninja.colorController.getColorObjFromCss(c); } - else + else if(c.mode !== "gradient") { color = this.application.ninja.colorController.getColorObjFromCss(c.color.css); } + else + { + color = c; + } } this._updateColor(color, false); @@ -175,7 +179,8 @@ exports.EyedropperTool = Montage.create(toolBase, { if(updateColorToolBar) { eventType = "change"; - if (color && color.value) + // TODO - Color chips in toolbar doesn't support gradients yet + if (color && color.value && (color.mode !== "gradient")) { var input = this.application.ninja.colorController.colorModel.input; @@ -295,10 +300,10 @@ exports.EyedropperTool = Montage.create(toolBase, { x = tmpPt[0]; y = tmpPt[1]; - if(x < innerBounds[0][0]) return ElementsMediator.getProperty(elt, "border-left-color"); - if(x > innerBounds[2][0]) return ElementsMediator.getProperty(elt, "border-right-color"); - if(y < innerBounds[0][1]) return ElementsMediator.getProperty(elt, "border-top-color"); - if(y > innerBounds[1][1]) return ElementsMediator.getProperty(elt, "border-bottom-color"); + if(x < innerBounds[0][0]) return ElementsMediator.getColor(elt, false, "left"); + if(x > innerBounds[2][0]) return ElementsMediator.getColor(elt, false, "right"); + if(y < innerBounds[0][1]) return ElementsMediator.getColor(elt, false, "top"); + if(y > innerBounds[1][1]) return ElementsMediator.getColor(elt, false, "bottom"); } return ElementsMediator.getColor(elt, true); -- cgit v1.2.3 From 00b1e6a9bed04172ad84bdd810f1bd999e8fa0eb Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Mon, 12 Mar 2012 15:02:07 -0700 Subject: bug fixes for spline interpolation AND Laplacian smoothing for denoising AND code cleanup (removing blocks of commented code) --- 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 9e300554..4ce9976a 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -105,7 +105,7 @@ exports.BrushTool = Montage.create(ShapeTool, { if (this.options.strokeAngle){ strokeAngle= ShapesController.GetValueInPixels(this.options.strokeAngle.value, this.options.strokeAngle.units); } - this._selectedBrushStroke.setStrokeAngle(strokeAngle); + this._selectedBrushStroke.setStrokeAngle(Math.PI * -strokeAngle/180); } else { this._selectedBrushStroke.setStrokeUseCalligraphic(false); } -- cgit v1.2.3 From 730c42e005b1ebd96448e3bc2dd700ffd8909cb5 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 13 Mar 2012 08:22:06 -0700 Subject: turn off the fill color for pen tool paths by default --- js/tools/PenTool.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'js/tools') diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 6897c003..60ef4f92 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(); -- cgit v1.2.3 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 4bec28fbd8371deceffd1563190cb5e399d554d3 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 16 Mar 2012 16:36:04 -0700 Subject: Squashed commit of SnapManagerFixes Signed-off-by: Valerio Virgillito --- js/tools/SelectionTool.js | 5 +- js/tools/Translate3DToolBase.js | 111 ++++++++++++++++++++++++++++---------- js/tools/TranslateObject3DTool.js | 40 +++++++++++--- js/tools/drawing-tool.js | 2 + js/tools/modifier-tool-base.js | 25 ++++----- 5 files changed, 129 insertions(+), 54 deletions(-) (limited to 'js/tools') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 5f48f74d..f9411f48 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -205,12 +205,12 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { { this._handleMode = null; this._delta = null; - this.DrawHandles(); } this.endDraw(event); this._canSnap = true; this._use3DMode = false; + this.DrawHandles(); } }, @@ -577,6 +577,7 @@ 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[2] = 0; var transMat = Matrix.Translation( delta ); this._moveElements(transMat); } @@ -710,7 +711,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { { return; } - if(this._target && this._handles) + if(this._target && this._handles && (this._targets.length === 1)) { var len = this._handles.length; var i = 0, diff --git a/js/tools/Translate3DToolBase.js b/js/tools/Translate3DToolBase.js index 24a68ad1..07b6d04d 100755 --- a/js/tools/Translate3DToolBase.js +++ b/js/tools/Translate3DToolBase.js @@ -18,6 +18,7 @@ var Montage = require("montage/core/core").Montage, exports.Translate3DToolBase = Montage.create(ModifierToolBase, { _inLocalMode: { value: true, enumerable: true }, + _clickedOnStage: { value: false }, HandleDoubleClick : { value : function() @@ -47,17 +48,33 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, delta[1] = 0; break; } + if( (this.application.ninja.selectedElements.length > 1) && this._clickedOnStage ) + { + this._delta = ~~(delta[this._handleMode]); + } + else + { + this._delta += ~~(delta[this._handleMode]); + } - this._updateDelta(delta, this._handleMode); } - else if(this._mode === 1) + else { - delta[2] = delta[1]; - delta[0] = 0; - delta[1] = 0; + if(this._mode === 1) + { + delta[2] = delta[1]; + delta[0] = 0; + delta[1] = 0; + } + else + { + delta[2] = 0; + } + this._delta = delta.slice(0); } var transMat = Matrix.Translation( delta ); + if(this._inLocalMode && (this._targets.length === 1) ) { this._translateLocally(transMat); @@ -139,7 +156,7 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, var shouldUpdateStartMat = true; - if(this._clickedObject === this.application.ninja.currentDocument.documentRoot) + if(this._clickedOnStage) { shouldUpdateStartMat = false; } @@ -152,11 +169,15 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, { item = this._targets[i]; elt = item.elt; - curMat = item.mat; - - glmat4.multiply(curMat, qMat, curMat); + curMat = item.mat.slice(0); - viewUtils.setMatrixForElement( elt, curMat, true); +// glmat4.multiply(curMat, qMat, curMat); +// +// viewUtils.setMatrixForElement( elt, curMat, true); + curMat[12] += transMat[12]; + curMat[13] += transMat[13]; + curMat[14] += transMat[14]; + viewUtils.setMatrixForElement( elt, curMat, true); if(shouldUpdateStartMat) { @@ -198,6 +219,19 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, "translateTool", previousStyles ); + if(this._origin && this._delta) + { + if(this._handleMode !== null) + { + this._origin[this._handleMode] += this._delta; + } + else + { + this._origin[0] += this._delta[0]; + this._origin[1] += this._delta[1]; + } + } + this._delta = null; } // Save previous value for undo/redo this._undoArray = []; @@ -232,7 +266,7 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, } }, - _getHandlesOrigin: { + _updateHandlesOrigin: { value: function () { var ctr; @@ -243,30 +277,43 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, { var item = this._target; viewUtils.pushViewportObj( item ); - var ctr = viewUtils.getCenterOfProjection(); + ctr = viewUtils.getCenterOfProjection(); viewUtils.popViewportObj(); ctr[2] = 0; - var ctrOffset = item.elementModel.props3D.m_transformCtr; - if(ctrOffset) - { - ctr = vecUtils.vecAdd(3, ctr, ctrOffset); - } +// var ctrOffset = item.elementModel.props3D.m_transformCtr; +// if(ctrOffset) +// { +// ctr = vecUtils.vecAdd(3, ctr, ctrOffset); +// } - ctr = viewUtils.localToGlobal(ctr, item); + this._origin = viewUtils.localToGlobal(ctr, item); } else { - ctr = drawUtils._selectionCtr.slice(0); - ctr[0] += this.application.ninja.stage.userContentLeft; - ctr[1] += this.application.ninja.stage.userContentTop; - -// ctr[0] += this.m_deltaPoint[0]; -// ctr[1] += this.m_deltaPoint[1]; + if(this._origin) + { + if(this._delta) + { + if(this._handleMode !== null) + { +// this._origin[this._handleMode] = this._delta; + } + else + { + this._origin[0] += this._delta[0]; + this._origin[1] += this._delta[1]; + } + } + } + else + { + this._origin = drawUtils._selectionCtr.slice(0); + this._origin[0] += this.application.ninja.stage.userContentLeft; + this._origin[1] += this.application.ninja.stage.userContentTop; + } } } - - return ctr; } }, @@ -304,7 +351,9 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, // Draw tool handles - var base = this._getHandlesOrigin(); + this._updateHandlesOrigin(); + var base = this._origin.slice(0); + var len = this.application.ninja.selectedElements.length; var lMode = this._inLocalMode; if(len === 1) @@ -334,14 +383,18 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, this._handles[1]._strokeStyle = 'rgba(0, 255, 0, 0.2)'; break; } + if( delta && (len > 1) ) + { + base[this._handleMode] += ~~delta; + } } this._handles[0].draw(base, item, lMode); this._handles[1].draw(base, item, lMode); this._handles[2].draw(base, item, lMode); - if(delta) + if(delta && (this._handleMode !== null)) { - this._handles[this._handleMode].drawDelta(delta); + this._handles[this._handleMode].drawDelta(~~delta); } this._handles[0]._strokeStyle = 'rgba(255, 0, 0, 1)'; diff --git a/js/tools/TranslateObject3DTool.js b/js/tools/TranslateObject3DTool.js index 92b9b2f7..60633e74 100755 --- a/js/tools/TranslateObject3DTool.js +++ b/js/tools/TranslateObject3DTool.js @@ -32,6 +32,7 @@ exports.TranslateObject3DTool = Object.create(Translate3DToolBase, { this._snapToGrid = snapManager.gridSnapEnabledAppLevel(); this._dragPlane = null; + this._clickedOnStage = false; var do3DSnap = true; if(this._handleMode === null) @@ -43,9 +44,9 @@ exports.TranslateObject3DTool = Object.create(Translate3DToolBase, { } else { - this._delta = 0; + this._delta = null; // special case for z-translation - if( this._handleMode && (this._handleMode === 2) ) + if(this._handleMode === 2) { this._dragPlane = viewUtils.getNormalToUnprojectedElementPlane(this._target); snapManager.setupDragPlaneFromPlane(this._dragPlane); @@ -65,11 +66,25 @@ exports.TranslateObject3DTool = Object.create(Translate3DToolBase, { // a snap on the mouse down var hitRec = snapManager.snap(point.x, point.y, do3DSnap); - // TODO - Check that hitRec's element matches element that browser says we clicked on - var elt = this.application.ninja.stage.GetElement(event); - if(elt !== hitRec.getElement()) + if(this._handleMode === 2) { - hitRec = snapManager.findHitRecordForElement(elt); + // translate z doesn't snap to element so hitRec's element will always be different + // from what the browser says we clicked on. So, skip this check. + } + else + { + // Check that hitRec's element matches element that browser says we clicked on + // TODO - This is still not working when using a handle that is on top of an + // element that is not currently selected + var elt = this.application.ninja.stage.GetSelectableElement(event); + if(elt && (elt !== hitRec.getElement())) + { + hitRec = snapManager.findHitRecordForElement(elt); + } + if(elt === this.application.ninja.currentSelectedContainer) + { + this._clickedOnStage = true; + } } // we don't want to snap to selected objects during the drag @@ -91,8 +106,17 @@ exports.TranslateObject3DTool = Object.create(Translate3DToolBase, { snapManager.enableSnapAlign( snapManager.snapAlignEnabledAppLevel() ); } - // parameterize the snap point on the target - this._snapParam = this.parameterizeSnap( hitRec ); + if(this._handleMode === 2) + { + // TODO - not sure how to parameterize point in z-translate mode + this.clickedObject = this._target; + this._snapParam = [0, 0, 0]; + } + else + { + // parameterize the snap point on the target + this._snapParam = this.parameterizeSnap( hitRec ); + } if(!this._dragPlane) { diff --git a/js/tools/drawing-tool.js b/js/tools/drawing-tool.js index 603f63a3..dc5f7996 100755 --- a/js/tools/drawing-tool.js +++ b/js/tools/drawing-tool.js @@ -157,6 +157,8 @@ exports.DrawingTool = Montage.create(ToolBase, { this.mouseUpHitRec = null; this.downPoint.x = null; this.downPoint.y = null; + this.upPoint.x = null; + this.upPoint.y = null; this._isDrawing = false; if (this.drawingFeedback.mode === "Draw3D") { diff --git a/js/tools/modifier-tool-base.js b/js/tools/modifier-tool-base.js index 80f7d758..94b806fd 100755 --- a/js/tools/modifier-tool-base.js +++ b/js/tools/modifier-tool-base.js @@ -134,7 +134,7 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { var hitRec = snapManager.snap(point.x, point.y, do3DSnap); // TODO - Check that hitRec's element matches element that browser says we clicked on - var elt = this.application.ninja.stage.GetElement(event); + var elt = this.application.ninja.stage.GetSelectableElement(event); if(elt !== hitRec.getElement()) { hitRec = snapManager.findHitRecordForElement(elt); @@ -552,6 +552,9 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { // update the target this._mouseUpHitRec = hitRec; + var pt = hitRec.getScreenPoint(); + this.upPoint.x = pt[0]; + this.upPoint.y = pt[1]; } } } @@ -579,12 +582,15 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { this.downPoint.x = null; this.downPoint.y = null; + this.upPoint.x = null; + this.upPoint.y = null; // this.isDrawing = false; if(this._canSnap) { this.cleanupSnap(); } + this._mode = 0; } }, @@ -764,6 +770,8 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { captureSelectionDrawn: { value: function(event){ this._targets = []; + this._origin = null; + this._delta = null; var len = this.application.ninja.selectedElements.length; if(len) @@ -866,7 +874,6 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { this._updateTargets(true); } - this.endDraw(event); this._hasDraw = false; } if(this._handleMode !== null) @@ -874,6 +881,7 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { this._handleMode = null; this._delta = null; } + this.endDraw(event); this.DrawHandles(); } }, @@ -998,19 +1006,6 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { } }, - _updateDelta: { - value: function(delta, handleMode){ - if(this._clickedObject !== this.application.ninja.currentDocument.documentRoot) - { - this._delta += ~~(delta[handleMode]); - } - else - { - this._delta = ~~(delta[handleMode]); - } - } - }, - modifyElements: { value: function(data, event) { // override in subclasses. -- 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(