From e065244ac75d1d0f25fd5c75cb58e714a13fe16b Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 14 Mar 2012 08:59:17 -0700 Subject: Squashed commit of the following: merge master into timeline Signed-off-by: Jonathan Duran --- js/tools/BrushTool.js | 41 +++++++++++- js/tools/EyedropperTool.js | 133 +++++++++++++++++++++++++++++++------- js/tools/PenTool.js | 18 ++++-- js/tools/SelectionTool.js | 28 ++++---- js/tools/Translate3DToolBase.js | 1 - js/tools/TranslateObject3DTool.js | 2 +- js/tools/modifier-tool-base.js | 12 ++-- 7 files changed, 186 insertions(+), 49 deletions(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 752aa2a3..4ce9976a 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; @@ -69,12 +70,46 @@ 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(20); + 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); + + var doSmoothing = false; + if (this.options.doSmoothing){ + 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(Math.PI * -strokeAngle/180); + } else { + this._selectedBrushStroke.setStrokeUseCalligraphic(false); + } + } NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); } //value: function (event) { @@ -114,7 +149,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(); diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 11c15158..927b86cf 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -6,9 +6,10 @@ 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, + World = require("js/lib/drawing/world").World, + njModule = require("js/lib/NJUtils"); exports.EyedropperTool = Montage.create(toolBase, { @@ -17,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 }, @@ -30,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; } } }, @@ -123,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); @@ -131,17 +139,27 @@ exports.EyedropperTool = Montage.create(toolBase, { } else { - this._deleteImageDataCanvas(); + if(ShapesController.isElementAShape(obj)) + { + c = this._getColorFromShape(obj, event); + } + else + { + c = this._getColorFromElement(obj, event); + } - c = this._getColorFromElement(obj, event); if(typeof(c) === "string") { 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); @@ -161,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; @@ -232,6 +251,8 @@ exports.EyedropperTool = Montage.create(toolBase, { _getColorFromElement: { value: function(elt, event) { + this._deleteImageDataCanvas(); + var border = ElementsMediator.getProperty(elt, "border"), borderWidth, bounds3D, @@ -279,19 +300,53 @@ 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); } }, - _getColorAtPoint: { + // TODO - We don't want to calculate this repeatedly + _getColorFromShape: { value: function(elt, event) { + var c, + ctx, + tmpPt, + pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, + new WebKitPoint(event.pageX, event.pageY)); + + tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); + + if(elt.elementModel.shapeModel.useWebGl) + { + c = this._getColorAtPoint(elt, event, true); + } + else + { + this._deleteImageDataCanvas(); + ctx = elt.getContext("2d"); + if(ctx) + { + c = this._getColorFromCanvas(ctx, tmpPt); + } + } + return c; + } + }, + + _getColorAtPoint: { + 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"); @@ -311,25 +366,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 { @@ -343,6 +425,11 @@ exports.EyedropperTool = Montage.create(toolBase, { { if(this._imageDataCanvas) { + if(this._webGlDataCanvas) + { + this._webGlWorld = null; + this._webGlDataCanvas = null; + } this._imageDataCanvas = null; this._imageDataContext = null; } diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 71a91870..60ef4f92 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -278,6 +278,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 @@ -348,6 +351,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) { @@ -356,7 +367,6 @@ exports.PenTool = Montage.create(ShapeTool, { if (this._selectedSubpath){ this.DrawSubpathAnchors(this._selectedSubpath); } - }//value: function(event) },//HandleMouseMove @@ -457,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(); diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 6d8ff175..5f48f74d 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; } @@ -123,14 +122,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(); } @@ -452,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; } @@ -704,6 +706,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; 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 7892d015..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 ); // } } @@ -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