From 86a801c057fc3b0580d6130be5740c2ee503444f Mon Sep 17 00:00:00 2001 From: hwc487 Date: Fri, 27 Jan 2012 15:52:36 -0800 Subject: updated from old repo --- js/tools/PanTool.js | 29 +++++++++++------------------ 1 file changed, 11 insertions(+), 18 deletions(-) (limited to 'js/tools') diff --git a/js/tools/PanTool.js b/js/tools/PanTool.js index ba40b020..73095c57 100644 --- a/js/tools/PanTool.js +++ b/js/tools/PanTool.js @@ -19,6 +19,7 @@ exports.PanTool = Montage.create(toolBase, _globalPt :{value: [0,0] , writable:true}, _globalToUCWorld :{value: [] , writable:true}, _lastGPt :{value: [0,0], writable:true}, + _lastY :{value: 0, writable:true}, Configure: { value: function ( doActivate ) @@ -220,6 +221,7 @@ exports.PanTool = Montage.create(toolBase, var tmpLocal = MathUtils.transformAndDivideHomogeneousPoint( this._globalPt, globalToLocalMat ); this._lastGPt = this._globalPt.slice(); + this._lastY = this._lastGPt[1]; // set up the matrices we will be needing var eltToStageWorldMat = glmat4.multiply( ucMat, viewUtils.getObjToStageWorldMatrix(elt, true), []); @@ -275,14 +277,19 @@ exports.PanTool = Montage.create(toolBase, { if (this._isDrawing) { - //console.log( "PanTool.mouseMove (drag)" ); - // get the global screen point var gPt = [point.x, point.y, this._globalPt[2]]; + if (this._altKeyDown) + { + var dy = 5*(point.y - this._lastY); + this._globalPt[2] += dy; + gPt = [this._lastGPt[0], this._lastGPt[1], this._globalPt[2]]; + } // update the scrollbars var deltaGPt = VecUtils.vecSubtract(2, gPt, this._lastGPt); this._lastGPt = gPt.slice(); + this._lastY = point.y; var oldLeft = this.application.ninja.stage._iframeContainer.scrollLeft, oldTop = this.application.ninja.stage._iframeContainer.scrollTop; @@ -297,27 +304,13 @@ exports.PanTool = Montage.create(toolBase, this.updateGlobalToUCWorldMatrix(); var wPt = MathUtils.transformAndDivideHomogeneousPoint( gPt, this._globalToUCWorld ); - //console.log( "wPt: " + wPt ); var delta = vecUtils.vecSubtract( 3, wPt, this._worldPt ); - if (this._altKeyDown) - { - //console.log( "moveZ" ); - var dist = vecUtils.vecMag(2, delta); - delta[0] = 0; delta[1] = 0; delta[2] = dist; - var dy = point.y - this._globalPt[1]; - if (dy < 0) delta[2] = -delta[2]; - } - else - { - console.log( "NOT MOVING Z" ); + + if (!this._altKeyDown) delta[2] = 0; - } var transMat = Matrix.Translation( delta ); this._worldPt = wPt; - if (this._altKeyDown) - this._globalPt[1] = point.y; - // update everything this.applyDeltaMat( transMat ); } -- cgit v1.2.3 From 76abbaafb0d90bb1dc9c63a5a5a78ab95bb00420 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Mon, 30 Jan 2012 13:56:33 -0800 Subject: Merge pushkar branch on gerritt with github version --- js/tools/PenTool.js | 127 +++++++++++++++++++--------------------------------- 1 file changed, 46 insertions(+), 81 deletions(-) (limited to 'js/tools') diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 78344d18..3b03e0e7 100644 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.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; @@ -187,6 +188,8 @@ exports.PenTool = Montage.create(ShapeTool, { //we have picked the endpoint of this path...reverse the path if necessary if (selAnchorIndex ===0){ //reverse this path + this._selectedSubpath.reversePath(); + selAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex(); } this._isPickedEndPointInSelectPathMode = true; } @@ -219,6 +222,7 @@ exports.PenTool = Montage.create(ShapeTool, { } } } + //else if (whichPoint === this._selectedSubpath.SEL_NONE) { if (whichPoint === this._selectedSubpath.SEL_NONE) { if (this._entryEditMode !== this.ENTRY_SELECT_PATH) { //add an anchor point to end of the subpath, and make it the selected anchor point @@ -234,7 +238,18 @@ exports.PenTool = Montage.create(ShapeTool, { } } else { if (this._isPickedEndPointInSelectPathMode){ - + //if (0){ + //TODO clean up this code...very similar to the code block above + if (!this._selectedSubpath.getIsClosed()) { + this._selectedSubpath.addAnchor(new GLAnchorPoint()); + var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); + newAnchor.setPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]); + newAnchor.setPrevPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]); + newAnchor.setNextPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]); + + //set the mode so that dragging will update the next and previous locations + this._editMode = this.EDIT_PREV_NEXT; + } } //if the edit mode was ENTRY_SELECT_PATH and no anchor point was selected, so we should de-select this path and revert to ENTRY_SELECT_NONE //this._entryEditMode = this.ENTRY_SELECT_NONE; //TODO revisit this after implementing code for adding points to any end of selected path @@ -352,10 +367,10 @@ exports.PenTool = Montage.create(ShapeTool, { value: function() { if (this._penCanvas!==null) { //obtain the 2D translation of the canvas due to the Selection tool...assuming this is called in Configure - var penCanvasLeft = parseFloat(ElementMediator.getProperty(this._penCanvas, "left"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "left")); + var penCanvasLeft = parseInt(ElementMediator.getProperty(this._penCanvas, "left"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "left")); var penCanvasTop = parseFloat(ElementMediator.getProperty(this._penCanvas, "top"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "top")); - var penCanvasWidth = this._penCanvas.width; - var penCanvasHeight = this._penCanvas.height; + var penCanvasWidth = parseInt(ElementMediator.getProperty(this._penCanvas, "width"));//this._penCanvas.width; + var penCanvasHeight = parseInt(ElementMediator.getProperty(this._penCanvas, "height"));//this._penCanvas.height; var penCanvasOldX = penCanvasLeft + 0.5 * penCanvasWidth; var penCanvasOldY = penCanvasTop + 0.5 * penCanvasHeight; @@ -373,17 +388,20 @@ exports.PenTool = Montage.create(ShapeTool, { ShowSelectedSubpath:{ value: function() { - var bboxMin = this._selectedSubpath.getBBoxMin(); - var bboxMax = this._selectedSubpath.getBBoxMax(); - var bboxWidth = bboxMax[0] - bboxMin[0]; - var bboxHeight = bboxMax[1] - bboxMin[1]; - var bboxMid = Vector.create([0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]); - - this._selectedSubpath.setCanvasX(bboxMid[0]); - this._selectedSubpath.setCanvasY(bboxMid[1]); - - //call render shape with the bbox width and height - this.RenderShape(bboxWidth, bboxHeight, this._penPlaneMat, bboxMid, this._penCanvas); + if (this._selectedSubpath){ + this._selectedSubpath.createSamples(); //dirty bit is checked here + var bboxMin = this._selectedSubpath.getBBoxMin(); + var bboxMax = this._selectedSubpath.getBBoxMax(); + var bboxWidth = bboxMax[0] - bboxMin[0]; + var bboxHeight = bboxMax[1] - bboxMin[1]; + var bboxMid = Vector.create([0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]); + + this._selectedSubpath.setCanvasX(bboxMid[0]); + this._selectedSubpath.setCanvasY(bboxMid[1]); + + //call render shape with the bbox width and height + this.RenderShape(bboxWidth, bboxHeight, this._penPlaneMat, bboxMid, this._penCanvas); + } } }, @@ -429,11 +447,17 @@ exports.PenTool = Montage.create(ShapeTool, { } if (this._isNewPath) { - var strokeSize = 10.0; + var strokeSize = 1.0;//default stroke width if (this.options.strokeSize) { - strokeSize = this.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units); + strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units); } this._selectedSubpath.setStrokeWidth(strokeSize); + 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); + } } this._selectedSubpath.makeDirty(); @@ -541,55 +565,10 @@ exports.PenTool = Montage.create(ShapeTool, { var left = Math.round(midPt[0] - 0.5 * w); var top = Math.round(midPt[1] - 0.5 * h); - - var strokeStyle = this.options.strokeStyle; - var strokeSize = 4.0; - if (this.options.strokeSize) { - strokeSize = this.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units, h); - } - var strokeColor = [1.0, 0.3, 0.3, 1.0]; - var fillColor = [1, .2, .5, 1.0]; - //var s = ColorPanelModule.ColorPanel.strokeToolbar.webGlColor; - var s = strokeColor; - if(s) - { - strokeColor = [s.r/255, s.g/255, s.b/255, s.a]; - } - - - //var f = ColorPanelModule.ColorPanel.fillToolbar.webGlColor; - var f = fillColor; - if(f) - { - fillColor = [f.r/255, f.g/255, f.b/255, f.a]; - } - - // for default stroke and fill/no materials - var strokeMaterial = null; - var fillMaterial = null; - - var strokeIndex = parseInt(this.options.strokeMaterial); - if(strokeIndex > 0) - { - strokeMaterial = Object.create(MaterialsLibrary.getMaterialAt(strokeIndex-1)); - } - - var fillIndex = parseInt(this.options.fillMaterial); - if(fillIndex > 0) - { - fillMaterial = Object.create(MaterialsLibrary.getMaterialAt(fillIndex-1)); - } - if (!canvas) { var newCanvas = null; - //if (this._useExistingCanvas()) { - // newCanvas = this._targetedCanvas; //TODO...when is this condition true? I would like to reuse canvas when continuing path or when drawing on div tool canvas - //}else { - //newCanvas = this.createCanvas(left, top, w, h,"Subpath"); - //} - newCanvas = NJUtils.makeNJElement("canvas", "Subpath", "shape", null, true); - var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas); + var elementModel = TagTool.makeElement(parseInt(w), parseInt(h), planeMat, midPt, newCanvas); ElementMediator.addElement(newCanvas, elementModel.data, true); // create all the GL stuff @@ -599,12 +578,6 @@ exports.PenTool = Montage.create(ShapeTool, { var subpath = this._selectedSubpath; //new GLSubpath(); subpath.setWorld(world); - subpath.setStrokeMaterial(strokeMaterial); - subpath.setFillMaterial(fillMaterial); - subpath.setFillColor(fillColor); - subpath.setStrokeColor(strokeColor); - subpath.setStrokeStyle(strokeStyle); - subpath.setPlaneMatrix(planeMat); var planeMatInv = glmat4.inverse( planeMat, [] ); subpath.setPlaneMatrixInverse(planeMatInv); @@ -628,8 +601,8 @@ exports.PenTool = Montage.create(ShapeTool, { var canvasArray=[canvas]; ElementMediator.setProperty(canvasArray, "left", [parseInt(left)+"px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "left", parseInt(left) + "px"); ElementMediator.setProperty(canvasArray, "top", [parseInt(top) + "px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "top", parseInt(top) + "px"); - canvas.width = w; - canvas.height = h; + ElementMediator.setProperty(canvasArray, "width", [w+"px"], "Changing", "penTool");//canvas.width = w; + ElementMediator.setProperty(canvasArray, "height", [h+"px"], "Changing", "penTool");//canvas.height = h; //update the viewport and projection to reflect the new canvas width and height world.setViewportFromCanvas(canvas); if (this._useWebGL){ @@ -645,16 +618,9 @@ exports.PenTool = Montage.create(ShapeTool, { var planeMatInv = glmat4.inverse( planeMat, [] ); subpath.setPlaneMatrixInverse(planeMatInv); subpath.setPlaneCenter(midPt); - subpath.setWorld(world); - subpath.setStrokeMaterial(strokeMaterial); - subpath.setStrokeColor(strokeColor); - subpath.setStrokeStyle(strokeStyle); - subpath.setFillMaterial(fillMaterial); - subpath.setFillColor(fillColor); - + world.addIfNewObject(subpath); - //world.addObject(subpath); world.render(); //TODO this will not work if there are multiple shapes in the same canvas @@ -1094,8 +1060,6 @@ exports.PenTool = Montage.create(ShapeTool, { return; } - - if (this._subpaths === null) { return; } @@ -1161,6 +1125,7 @@ exports.PenTool = Montage.create(ShapeTool, { this._entryEditMode = this.ENTRY_SELECT_PATH; this._selectedSubpath = go; this.TranslateSelectedSubpathPerPenCanvas(); + this._selectedSubpath.deselectAnchorPoint(); this.DrawSubpathAnchors(this._selectedSubpath); } } -- cgit v1.2.3 From f0e3fa691b3c042c9fc49a7a0cde8ddf8100c195 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 31 Jan 2012 12:05:15 -0800 Subject: display the anchor point to be selected on mouse hover --- js/tools/PenTool.js | 219 ++++++++++++++-------------------------------------- 1 file changed, 60 insertions(+), 159 deletions(-) (limited to 'js/tools') diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 3b03e0e7..46465be0 100644 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -13,6 +13,10 @@ var NJUtils = require("js/lib/NJUtils").NJUtils; var ElementMediator = require("js/mediators/element-mediator").ElementMediator; var TagTool = require("js/tools/TagTool").TagTool; var ElementController = require("js/controllers/elements/element-controller").ElementController; +var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager; + +//todo remove this global var +var g_DoPenToolMouseMove = true; exports.PenTool = Montage.create(ShapeTool, { @@ -38,9 +42,6 @@ exports.PenTool = Montage.create(ShapeTool, { _makeMultipleSubpaths: { value: true, writable: true }, //set this to true if you want to keep making subpaths after closing current subpath - //whether or not to display the guides for debugging - _showGuides: { value: true, writable: true }, - //whether the user has held down the Alt key _isAltDown: { value: false, writable: true }, @@ -65,6 +66,9 @@ exports.PenTool = Montage.create(ShapeTool, { //the plane matrix for the first click...so the entire path is on the same plane _penPlaneMat: { value: null, writable: true }, + //index of the anchor point that the user has hovered over + _hoveredAnchorIndex: {value: null, writable: true}, + //constants used for picking points --- NOTE: these should be user-settable parameters _PICK_POINT_RADIUS: { value: 10, writable: false }, _DISPLAY_ANCHOR_RADIUS: { value: 5, writable: false }, @@ -262,7 +266,9 @@ exports.PenTool = Montage.create(ShapeTool, { } //if (mouseDownPos) { i.e. if mouse down yielded a valid position - NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); + if (!g_DoPenToolMouseMove){ + NJevent("enableStageMove"); + } } //value: function (event) { }, //HandleLeftButtonDown @@ -279,18 +285,15 @@ exports.PenTool = Montage.create(ShapeTool, { return; } - if (this._isDrawing) { - if (!this._isAltDown) - this.doDraw(event); //if Alt was down, doDraw prevents this.mouseUpHitRec from being written to - else{ - var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); - this.mouseUpHitRec = DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec); - } - + //clear the canvas before we draw anything else + this.application.ninja.stage.clearDrawingCanvas(); + this._hoveredAnchorIndex = -1; - // ******* begin new code ********* - //get the current mouse position from the drawing-tool knowing that the mouse up position is set to current mouse pos in this.doDraw above - var currMousePos = this.getMouseUpPos(); + if (this._isDrawing) { + this.application.ninja.stage.clearDrawingCanvas(); + 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 + var currMousePos = DrawingToolBase.getHitRecPos(DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec)); if (currMousePos && this._selectedSubpath && (this._selectedSubpath.getSelectedAnchorIndex() >= 0 && this._selectedSubpath.getSelectedAnchorIndex() < this._selectedSubpath.getNumAnchors())) { //var scoord = this._getScreenCoord(this._mouseUpHitRec); var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); @@ -345,20 +348,27 @@ exports.PenTool = Montage.create(ShapeTool, { //make the subpath dirty so it will get re-drawn this._selectedSubpath.makeDirty(); - //clear the canvas before we draw anything else - this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); - this.DrawSubpathAnchors(this._selectedSubpath); + this.DrawSubpathsSVG(); } - // ********* end new code *********** - } else { - this.doSnap(event); - this.DrawHandles(); + } else { //if mouse is not down: + //this.doSnap(event); + //this.DrawHandles(); + var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); + var currMousePos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); + if (currMousePos && this._selectedSubpath ){ + var selAnchor = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS); + if (selAnchor >=0) { + this._hoveredAnchorIndex = selAnchor; + } + } } //else of if (this._isDrawing) { - this.drawLastSnap(); // Required cleanup for both Draw/Feedbacks + //this.drawLastSnap(); // Required cleanup for both Draw/Feedbacks + if (this._selectedSubpath){ + this.DrawSubpathAnchors(this._selectedSubpath); + } - this.DrawSubpathsSVG(); }//value: function(event) }, @@ -482,7 +492,9 @@ exports.PenTool = Montage.create(ShapeTool, { this.DrawSubpathAnchors(this._selectedSubpath);//render the subpath anchors on canvas (not GL) } - NJevent("disableStageMove");//stageManagerModule.stageManager.disableMouseMove(); + if (!g_DoPenToolMouseMove){ + NJevent("disableStageMove"); + } } }, @@ -797,102 +809,10 @@ exports.PenTool = Montage.create(ShapeTool, { throw ("null drawing context in Pentool::DrawSubpathSVG"); ctx.save(); - var horizontalOffset = this.application.ninja.stage.userContentLeft;//stageManagerModule.stageManager.userContentLeft; - var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop; - - - if (this._showGuides) { - var leftOffsetSamples = subpath.getLeftOffsetPoints(); - var rightOffsetSamples = subpath.getRightOffsetPoints(); - /* - //display the subpath samples as a sequence of circles - ctx.lineWidth = 2; - ctx.fillStyle = "pink"; - ctx.strokeStyle = "black"; - for (var i = 0; i < samples.length; i += 3) { - ctx.beginPath(); - ctx.arc(samples[i], samples[i + 1], this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false); - ctx.fill(); - ctx.stroke(); - } - */ - - /* - //display circles near all offset sample points - ctx.fillStyle = "#44FF44"; - ctx.lineWidth = 2; - ctx.strokeStyle = "black"; - for (var i = 0; i < leftOffsetSamples.length; i++) { - var px = leftOffsetSamples[i].Pos[0]+ horizontalOffset; - var py = leftOffsetSamples[i].Pos[1]+ verticalOffset; - ctx.beginPath(); - ctx.arc(px, py, this._DISPLAY_ANCHOR_RADIUS * 0.75, 0, 2 * Math.PI, false); - ctx.fill(); - ctx.stroke(); - } - */ - - /* - //display mapping of subpath samples to offset samples - - ctx.strokeStyle = "black"; - ctx.lineWidth = 1; - ctx.beginPath(); - for (var i = 0; i < leftOffsetSamples.length; i++) { - var px = leftOffsetSamples[i].Pos[0]+ horizontalOffset; - var py = leftOffsetSamples[i].Pos[1]+ verticalOffset; - var ox = leftOffsetSamples[i].CurveMapPos[0] + horizontalOffset; - var oy = leftOffsetSamples[i].CurveMapPos[1] + verticalOffset; - - ctx.moveTo(px, py); - ctx.lineTo(ox,oy); - } - ctx.stroke(); - ctx.strokeStyle = "black"; - ctx.lineWidth = 1; - ctx.beginPath(); - for (var i = 0; i < rightOffsetSamples.length; i++) { - var px = rightOffsetSamples[i].Pos[0]+ horizontalOffset; - var py = rightOffsetSamples[i].Pos[1]+ verticalOffset; - var ox = rightOffsetSamples[i].CurveMapPos[0] + horizontalOffset; - var oy = rightOffsetSamples[i].CurveMapPos[1] + verticalOffset; - - ctx.moveTo(px, py); - ctx.lineTo(ox,oy); - } - ctx.stroke(); - */ - - /* - //display triangles generated - var leftOffsetTriangles = subpath.getLeftOffsetTriangles(); - ctx.strokeStyle = "black"; - ctx.lineWidth = 1; - ctx.beginPath(); - for (var i = 0; i < leftOffsetTriangles.length; i++) { - ctx.moveTo(leftOffsetTriangles[i].v0[0] + horizontalOffset, leftOffsetTriangles[i].v0[1] + verticalOffset); - ctx.lineTo(leftOffsetTriangles[i].v1[0] + horizontalOffset, leftOffsetTriangles[i].v1[1] + verticalOffset); - ctx.lineTo(leftOffsetTriangles[i].v2[0] + horizontalOffset, leftOffsetTriangles[i].v2[1] + verticalOffset); - } - ctx.stroke(); - - var rightOffsetTriangles = subpath.getRightOffsetTriangles(); - ctx.strokeStyle = "black"; - ctx.lineWidth = 1; - ctx.beginPath(); - for (var i = 0; i < rightOffsetTriangles.length; i++) { - ctx.moveTo(rightOffsetTriangles[i].v0[0] + horizontalOffset, rightOffsetTriangles[i].v0[1] + verticalOffset); - ctx.lineTo(rightOffsetTriangles[i].v1[0] + horizontalOffset, rightOffsetTriangles[i].v1[1] + verticalOffset); - ctx.lineTo(rightOffsetTriangles[i].v2[0] + horizontalOffset, rightOffsetTriangles[i].v2[1] + verticalOffset); - } - ctx.stroke(); - */ - } //if this._showGuides - - - + var horizontalOffset = this.application.ninja.stage.userContentLeft; + var verticalOffset = this.application.ninja.stage.userContentTop; //display the subpath as a sequence of cubic beziers - ctx.lineWidth = 1;//subpath.getStrokeWidth(); //TODO replace hardcoded stroke width with some programmatically set value (should not be same as stroke width) + ctx.lineWidth = 1;//TODO replace hardcoded stroke width with some programmatically set value (should not be same as stroke width) if (ctx.lineWidth == subpath.getStrokeWidth()) ctx.lineWidth = 3; ctx.strokeStyle = "black"; @@ -944,55 +864,29 @@ exports.PenTool = Montage.create(ShapeTool, { var horizontalOffset = this.application.ninja.stage.userContentLeft;//stageManagerModule.stageManager.userContentLeft; var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop; - /* - //display the sampled left offset of subpath as a sequence of line segments - var leftOffsetSamples = subpath.getLeftOffsetPoints(); - if (leftOffsetSamples.length) { - ctx.strokeStyle = "blue"; - ctx.lineWidth = 1; - ctx.beginPath(); - ctx.moveTo(leftOffsetSamples[0].Pos[0] + horizontalOffset, leftOffsetSamples[0].Pos[1] + verticalOffset); - for (var i = 0; i < leftOffsetSamples.length; i++) { - ctx.lineTo(leftOffsetSamples[i].Pos[0] + horizontalOffset, leftOffsetSamples[i].Pos[1] + verticalOffset); - } - ctx.stroke(); - } - - - //display the sampled right offset of subpath as a sequence of line segments - var rightOffsetSamples = subpath.getRightOffsetPoints(); - if (rightOffsetSamples.length) { - ctx.strokeStyle = "red"; - ctx.lineWidth = 1; - ctx.beginPath(); - ctx.moveTo(rightOffsetSamples[0].Pos[0] + horizontalOffset, rightOffsetSamples[0].Pos[1] + verticalOffset); - for (var i = 0; i < rightOffsetSamples.length; i++) { - ctx.lineTo(rightOffsetSamples[i].Pos[0] + horizontalOffset, rightOffsetSamples[i].Pos[1] + verticalOffset); - } - ctx.stroke(); - } - */ - //display circles and squares near all control points ctx.fillStyle = "#FF4444"; ctx.lineWidth = 2; ctx.strokeStyle = "black"; for (var i = 0; i < numAnchors; i++) { - //display the anchor point with its prev. and next var px = subpath.getAnchor(i).getPosX(); var py = subpath.getAnchor(i).getPosY(); - var prevx = subpath.getAnchor(i).getPrevX(); - var prevy = subpath.getAnchor(i).getPrevY(); - var nextx = subpath.getAnchor(i).getNextX(); - var nexty = subpath.getAnchor(i).getNextY(); - - //anchor point ctx.beginPath(); ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false); ctx.fill(); ctx.stroke(); } - + + //display the hovered over anchor point + ctx.lineWidth = 2; + ctx.strokeStyle = "black"; + if (this._hoveredAnchorIndex>=0) { + var px = subpath.getAnchor(this._hoveredAnchorIndex).getPosX(); + var py = subpath.getAnchor(this._hoveredAnchorIndex).getPosY(); + ctx.beginPath(); + ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS*1.5, 0, 2 * Math.PI, false); + ctx.stroke(); + } //display selected anchor and its prev. and next points if (this._selectedSubpath && subpath === this._selectedSubpath && this._selectedSubpath.getSelectedAnchorIndex()!== -1) { @@ -1136,8 +1030,15 @@ exports.PenTool = Montage.create(ShapeTool, { } } this._isPickedEndPointInSelectPathMode = false; //only applies to the ENTRY_SELECT_PATH mode - } + + if (g_DoPenToolMouseMove){ + NJevent("enableStageMove"); + } + } //if the pen tool was selected else { + if (g_DoPenToolMouseMove){ + NJevent("disableStageMove"); + } this._selectedSubpath = null; this._penCanvas = null; this._penPlaneMat = null; @@ -1147,7 +1048,7 @@ exports.PenTool = Montage.create(ShapeTool, { //ElementMediator.deleteDelegate = ""; this.application.ninja.elementMediator.deleteDelegate = null; //this._entryEditMode = this.ENTRY_SELECT_NONE; - } + } //if the pen tool was de-selected } }, -- cgit v1.2.3 From c00d5d3072e487be200559f692ce4399222d5fa5 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 31 Jan 2012 14:25:05 -0800 Subject: handle the case of proper redraw when the alt key is held down even after mouse up --- js/tools/PenTool.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 46465be0..6aa5f3ab 100644 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -417,7 +417,11 @@ exports.PenTool = Montage.create(ShapeTool, { HandleLeftButtonUp: { value: function (event) { - if (this._isDrawing) { + if (this._isAltDown) { + var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); + this.mouseUpHitRec = DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec); + } + else if (this._isDrawing) { this.doDraw(event); //needed to get the mouse up point in case there was no mouse move } @@ -468,7 +472,7 @@ exports.PenTool = Montage.create(ShapeTool, { 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 62d38a080b2918a0284c854e9bf882bfeeea1e0b Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Wed, 1 Feb 2012 13:21:11 -0800 Subject: avoid overriding GlGeomObj translate method --- js/tools/PenTool.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 6aa5f3ab..cb2ea85a 100644 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -378,7 +378,7 @@ exports.PenTool = Montage.create(ShapeTool, { if (this._penCanvas!==null) { //obtain the 2D translation of the canvas due to the Selection tool...assuming this is called in Configure var penCanvasLeft = parseInt(ElementMediator.getProperty(this._penCanvas, "left"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "left")); - var penCanvasTop = parseFloat(ElementMediator.getProperty(this._penCanvas, "top"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "top")); + var penCanvasTop = parseInt(ElementMediator.getProperty(this._penCanvas, "top"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "top")); var penCanvasWidth = parseInt(ElementMediator.getProperty(this._penCanvas, "width"));//this._penCanvas.width; var penCanvasHeight = parseInt(ElementMediator.getProperty(this._penCanvas, "height"));//this._penCanvas.height; var penCanvasOldX = penCanvasLeft + 0.5 * penCanvasWidth; @@ -390,7 +390,7 @@ exports.PenTool = Montage.create(ShapeTool, { //update the canvasX and canvasY parameters for this subpath and also translate the subpath points (since they're stored in stage world space) this._selectedSubpath.setCanvasX(translateCanvasX + this._selectedSubpath.getCanvasX()); this._selectedSubpath.setCanvasY(translateCanvasY + this._selectedSubpath.getCanvasY()); - this._selectedSubpath.translate(translateCanvasX, translateCanvasY, 0); + this._selectedSubpath.translateAnchors(translateCanvasX, translateCanvasY, 0); this._selectedSubpath.createSamples(); //updates the bounding box } } -- cgit v1.2.3 From 715f95cacead0025a57823e4cefa22e618f15df0 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Wed, 1 Feb 2012 14:00:06 -0800 Subject: mouse wheel for zoom tool --- js/tools/ZoomTool.js | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) (limited to 'js/tools') diff --git a/js/tools/ZoomTool.js b/js/tools/ZoomTool.js index cabf3a3d..913dc02a 100644 --- a/js/tools/ZoomTool.js +++ b/js/tools/ZoomTool.js @@ -74,10 +74,12 @@ exports.ZoomTool = Montage.create(DrawingTool, { if(wasSelected) { this.AddCustomFeedback(); this.eventManager.addEventListener( "toolDoubleClick", this, false); + this.application.ninja.stage.drawingCanvas.addEventListener("mousewheel", this, false); } else { this.RemoveCustomFeedback(); this.eventManager.removeEventListener( "toolDoubleClick", this, false); + this.application.ninja.stage.drawingCanvas.removeEventListener("mousewheel", this, false); } } }, @@ -270,19 +272,9 @@ exports.ZoomTool = Montage.create(DrawingTool, { } else if (this._mode === "mouseWheelZoom") { - if (userContent) - { - var w = userContent.offsetWidth, - h = userContent.offsetHeight; - if(userContent.width) - w = userContent.width; - if(userContent.height) - h = userContent.height; - var localPt = [ w/2, h/2, 0]; - globalPt = viewUtils.localToGlobal( localPt, userContent ); - } - else - globalPt = [0,0,0]; + var w = this.application.ninja.stage._canvas.width, + h = this.application.ninja.stage._canvas.height; + globalPt = [w/2, h/2, 0]; } else { -- cgit v1.2.3 From 5a288b9d3f8e6690149978d9d0e7bea98cc81312 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Wed, 1 Feb 2012 14:09:24 -0800 Subject: Fix for a marquee zoom bug. --- js/tools/ZoomTool.js | 13 ------------- 1 file changed, 13 deletions(-) (limited to 'js/tools') diff --git a/js/tools/ZoomTool.js b/js/tools/ZoomTool.js index 913dc02a..73297d16 100644 --- a/js/tools/ZoomTool.js +++ b/js/tools/ZoomTool.js @@ -240,19 +240,6 @@ exports.ZoomTool = Montage.create(DrawingTool, { var p1 = [this._layerX, this._layerY, 0]; globalPt = vecUtils.vecAdd(3, p0, p1); vecUtils.vecScale(3, globalPt, 0.5); - - var hitRec = snapManager.snap( globalPt[0], globalPt[1], true ); - if (hitRec) - { - var elt = hitRec.getElement(); - if (elt) - { -// console.log( "hit: " + hitRec.getElement().id ); - var localToGlobalMat = viewUtils.getLocalToGlobalMatrix( elt ); - var localPt = hitRec.calculateElementPreTransformScreenPoint(); - globalPt = MathUtils.transformAndDivideHomogeneousPoint( localPt, localToGlobalMat ); - } - } } else if (this._mode === "doubleClickReset") { -- cgit v1.2.3 From 11db5a63bda57c630eaf1d8baded9b79ca7ac1f2 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Wed, 1 Feb 2012 15:11:21 -0800 Subject: listen for the appMouseUp event in the Pan tool --- js/tools/PanTool.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'js/tools') diff --git a/js/tools/PanTool.js b/js/tools/PanTool.js index 73095c57..55a03674 100644 --- a/js/tools/PanTool.js +++ b/js/tools/PanTool.js @@ -44,6 +44,7 @@ exports.PanTool = Montage.create(toolBase, HandleLeftButtonDown: { value : function ( event ) { this._isDrawing = true; + this.isDrawing = true; this.mouseDown( event ); } @@ -69,6 +70,7 @@ exports.PanTool = Montage.create(toolBase, this.application.ninja.stage.clearDrawingCanvas(); this._hasDraw = false; this._isDrawing = false; + this.isDrawing = false; } } }, -- cgit v1.2.3 From 2082fa6912eec2ffabd2081b7706e8e1b88a9711 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 2 Feb 2012 19:03:59 -0800 Subject: Initial Text Tool Implementation Has rich-text-editor in place need to place with finalized version when complete --- js/tools/TextTool.js | 96 ++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 90 insertions(+), 6 deletions(-) (limited to 'js/tools') diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js index 538583ee..8b48ff4f 100644 --- a/js/tools/TextTool.js +++ b/js/tools/TextTool.js @@ -6,12 +6,30 @@ 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("montage/ui/rich-text-editor.reel").RichTextEditor; exports.TextTool = Montage.create(DrawingTool, { + + _selectedElement: { value : null }, + + selectedElement: { + get: function() { + return this._selectedElement; + }, + set: function(val) { + if(this._selectedElement !== null) { + + } + this._selectedElement = val; + } + }, + + drawingFeedback: { value: { mode: "Draw3D", type: "rectangle" } }, HandleLeftButtonDown: { value: function(event) { + this.deselectText(); this.startDraw(event); } }, @@ -50,24 +68,88 @@ exports.TextTool = Montage.create(DrawingTool, { if(drawData) { //this.insertElement(drawData); } - + this._hasDraw = false; this.endDraw(event); } else { - this.doSelection(event); + console.log("im here"); + if (this.application.ninja.selectedElements.length !== 0 ) { + this.selectedElement = this.application.ninja.selectedElements[0]._element; + this.drawTextTool(); + } this._isDrawing = false; } } }, + applyElementStyles : { + value: function(fromElement, toElement, styles) { + styles.forEach(function(style) { + var styleCamelCase = style.replace(/(\-[a-z])/g, function($1){return $1.toUpperCase().replace('-','');}); + console.log(styleCamelCase, style, window.getComputedStyle(fromElement)[style]); + toElement.style[styleCamelCase] = window.getComputedStyle(fromElement)[style]; + }, this); + } + }, + + drawTextTool: { + value: function() { + console.log(" now im here"); + this.application.ninja.stage.textTool.value = this.selectedElement.innerHTML; + if(this.application.ninja.stage.textTool.value === "") { this.application.ninja.stage.textTool.value = " "; } + this.selectedElement.innerHTML = ""; + + //Styling Options for text tool to look identical to the text you are manipulating. + this.application.ninja.stage.textTool.element.style.display = "block"; + this.application.ninja.stage.textTool.element.style.position = "absolute"; + + // Set Top & Left Positions + var textToolCoordinates = this.application.ninja.stage.toViewportCoordinates(this.selectedElement.offsetLeft, this.selectedElement.offsetTop); + this.application.ninja.stage.textTool.element.style.left = textToolCoordinates[0] + "px"; + this.application.ninja.stage.textTool.element.style.top = textToolCoordinates[1] + "px"; + + // Set Width, Height + this.application.ninja.stage.textTool.element.style.width = this.selectedElement.offsetWidth + "px"; + this.application.ninja.stage.textTool.element.style.height = this.selectedElement.offsetHeight + "px"; + + + // Set font styling (Size, Style, Weight) + + me = this; + this.application.ninja.stage.textTool.didDraw = function() { + me.applyElementStyles(me.selectedElement, me.application.ninja.stage.textTool.element, ["overflow"]); + me.applyElementStyles(me.selectedElement, me.application.ninja.stage.textTool.element.firstChild, ["font","padding-left","padding-top","padding-right","padding-bottom", "color"]); + var range = document.createRange(), + sel = window.getSelection(); + sel.removeAllRanges(); + range.selectNodeContents(this.application.ninja.stage.textTool.element.firstChild); + sel.addRange(range); + this.didDraw = function() {}; + console.log("im drew here"); + } + console.log("i end here"); + } + }, + + + deselectText: { + value: function() { + this.application.ninja.stage.textTool.element.style.display = "none"; + this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value; + this.application.ninja.stage.textTool.value = ""; + } + }, + HandleDoubleClick: { value: function(e) { - console.log(this.application.ninja.selectedElements[0]._element); - this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true); - this.application.ninja.stage._iframeContainer.style.zIndex = 200; - this.application.ninja.selectedElements[0]._element.focus(); + //this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true); + + //if (!this.application.ninja.textTool) { + + //} + } @@ -75,10 +157,12 @@ exports.TextTool = Montage.create(DrawingTool, { Configure: { value: function(wasSelected) { + if(wasSelected) { NJevent("enableStageMove"); this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane ); } else { + this.deselectText(); NJevent("disableStageMove"); } } -- cgit v1.2.3 From 9b6b228524f14bf65ba60aaf3d0993c8ec5bff2d Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 7 Feb 2012 15:22:11 -0800 Subject: some minor bug fixes and code cleanup --- js/tools/PenTool.js | 44 +++++++++++++++----------------------------- 1 file changed, 15 insertions(+), 29 deletions(-) (limited to 'js/tools') diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index cb2ea85a..5b48d3c9 100644 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -142,15 +142,12 @@ exports.PenTool = Montage.create(ShapeTool, { //NOTE: this will work on Webkit only...IE has different codes (left: 1, middle: 4, right: 2) return; } - //BEGIN ShapeTool code if (this._canDraw) { this._isDrawing = true; } - //this._targetedCanvas = stageManagerModule.stageManager.GetObjectFromPoint(event.layerX, event.layerY, this._canOperateOnStage); this.startDraw(event); - //END ShapeTool code //assume we are not starting a new path as we will set this to true if we create a new GLSubpath() this._isNewPath = false; @@ -269,6 +266,8 @@ exports.PenTool = Montage.create(ShapeTool, { if (!g_DoPenToolMouseMove){ NJevent("enableStageMove"); } + + this._hoveredAnchorIndex = -1; } //value: function (event) { }, //HandleLeftButtonDown @@ -370,7 +369,7 @@ exports.PenTool = Montage.create(ShapeTool, { } }//value: function(event) - }, + },//HandleMouseMove //TODO Optimize! This function is probably no longer needed TranslateSelectedSubpathPerPenCanvas:{ @@ -499,6 +498,7 @@ exports.PenTool = Montage.create(ShapeTool, { if (!g_DoPenToolMouseMove){ NJevent("disableStageMove"); } + this._hoveredAnchorIndex = -1; } }, @@ -664,15 +664,17 @@ exports.PenTool = Montage.create(ShapeTool, { }, //BuildSecondCtrlPoint:{ + /* deleteSelection: { value: function() { //clear the selected subpath...the only new additions to this function w.r.t. ToolBase if (this._selectedSubpath){ if (this._selectedSubpath.getSelectedAnchorIndex()>=0){ this._selectedSubpath.removeAnchor(this._selectedSubpath.getSelectedAnchorIndex()); + this._selectedSubpath.createSamples(); //clear the canvas - this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); - this.DrawSubpathAnchors(this._selectedSubpath); + this.application.ninja.stage.clearDrawingCanvas(); + this.DrawSubpathAnchors(this._selectedSubpath); this.ShowSelectedSubpath(); } else { @@ -681,28 +683,14 @@ exports.PenTool = Montage.create(ShapeTool, { this._selectedSubpath.createSamples(); this._selectedSubpath = null; //clear the canvas - this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); - - //TODO begin code block taken from ToolBase...figure out how to override it correctly - var item; - /* - if(!selectionManagerModule.selectionManager.isDocument) { - for(var i=0; item = selectionManagerModule.selectionManager.selectedItems[i]; i++) { - drawUtils.removeElement(item._element); // TODO This was called twice - After the event. - window.snapManager.removeElementFrom2DCache( item._element ); // TODO Check with Nivesh about it. - DocumentControllerModule.DocumentController.RemoveElement(item._element); - } - - NJevent( "deleteSelection" ); - } - */ - //end code block taken from ToolBase - + this.application.ninja.stage.clearDrawingCanvas(); this._penCanvas = null; } } } }, + */ + HandleDoubleClick: { value: function () { @@ -710,9 +698,6 @@ exports.PenTool = Montage.create(ShapeTool, { if (this._selectedSubpath && this._selectedSubpath.getSelectedAnchorIndex() !== -1) { var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); var pos = Vector.create([selAnchor.getPosX(), selAnchor.getPosY(), selAnchor.getPosZ()]); - //var prev = Vector.create([selAnchor.getPrevX(), selAnchor.getPrevY(), selAnchor.getPrevZ()]); - //var next = Vector.create([selAnchor.getNextX(), selAnchor.getNextY(), selAnchor.getNextZ()]); - var distToPrev = selAnchor.getPrevDistanceSq(pos[0], pos[1], pos[2]); var distToNext = selAnchor.getNextDistanceSq(pos[0], pos[1], pos[2]); var threshSq = 0; // 4 * this._PICK_POINT_RADIUS * this._PICK_POINT_RADIUS; @@ -820,8 +805,8 @@ exports.PenTool = Montage.create(ShapeTool, { if (ctx.lineWidth == subpath.getStrokeWidth()) ctx.lineWidth = 3; ctx.strokeStyle = "black"; - if (subpath.getStrokeColor()) - ctx.strokeStyle = MathUtils.colorToHex( subpath.getStrokeColor() ); + //if (subpath.getStrokeColor()) + // ctx.strokeStyle = MathUtils.colorToHex( subpath.getStrokeColor() ); ctx.beginPath(); var p0x = subpath.getAnchor(0).getPosX()+ horizontalOffset; var p0y = subpath.getAnchor(0).getPosY()+ verticalOffset; @@ -884,7 +869,7 @@ exports.PenTool = Montage.create(ShapeTool, { //display the hovered over anchor point ctx.lineWidth = 2; ctx.strokeStyle = "black"; - if (this._hoveredAnchorIndex>=0) { + if (this._hoveredAnchorIndex && this._hoveredAnchorIndex>=0) { var px = subpath.getAnchor(this._hoveredAnchorIndex).getPosX(); var py = subpath.getAnchor(this._hoveredAnchorIndex).getPosY(); ctx.beginPath(); @@ -1061,6 +1046,7 @@ exports.PenTool = Montage.create(ShapeTool, { //clear the selected subpath...the only new additions to this function w.r.t. ToolBase if (this._selectedSubpath){ if (this._selectedSubpath.getSelectedAnchorIndex()>=0){ + this._hoveredAnchorIndex=-1; this._selectedSubpath.removeAnchor(this._selectedSubpath.getSelectedAnchorIndex()); this._selectedSubpath.createSamples(); //clear the canvas -- cgit v1.2.3 From d7ead10b566e7de121b2cd2c99fecca8469d63b8 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 7 Feb 2012 16:30:47 -0800 Subject: Initial Text tool completion. --- js/tools/TextTool.js | 47 ++++++++++++++++++++++------------------------- 1 file changed, 22 insertions(+), 25 deletions(-) (limited to 'js/tools') diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js index 8b48ff4f..28e7ddf3 100644 --- a/js/tools/TextTool.js +++ b/js/tools/TextTool.js @@ -17,10 +17,20 @@ exports.TextTool = Montage.create(DrawingTool, { return this._selectedElement; }, set: function(val) { - if(this._selectedElement !== null) { - + if (this._selectedElement !== null) { + this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value; + this.application.ninja.stage.textTool.value = ""; + this.application.ninja.stage.textTool.element.style.display = "none"; } + //Set Selected Element this._selectedElement = val; + if(val !== null) { + this.drawTextTool(); + this.handleScroll(); + this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false); + } else { + this.application.ninja.stage._iframeContainer.removeEventListener("scroll", this); + } } }, @@ -29,11 +39,19 @@ exports.TextTool = Montage.create(DrawingTool, { HandleLeftButtonDown: { value: function(event) { - this.deselectText(); this.startDraw(event); } }, + handleScroll: { + value: function(e) { + // Set Top & Left Positions + var textToolCoordinates = this.application.ninja.stage.toViewportCoordinates(this.selectedElement.offsetLeft, this.selectedElement.offsetTop); + this.application.ninja.stage.textTool.element.style.left = textToolCoordinates[0] + "px"; + this.application.ninja.stage.textTool.element.style.top = textToolCoordinates[1] + "px"; + } + }, + HandleMouseMove: { value: function(event) { if(this._escape) { @@ -73,12 +91,9 @@ exports.TextTool = Montage.create(DrawingTool, { this.endDraw(event); } else { this.doSelection(event); - console.log("im here"); if (this.application.ninja.selectedElements.length !== 0 ) { this.selectedElement = this.application.ninja.selectedElements[0]._element; - this.drawTextTool(); } - this._isDrawing = false; } } @@ -88,7 +103,6 @@ exports.TextTool = Montage.create(DrawingTool, { value: function(fromElement, toElement, styles) { styles.forEach(function(style) { var styleCamelCase = style.replace(/(\-[a-z])/g, function($1){return $1.toUpperCase().replace('-','');}); - console.log(styleCamelCase, style, window.getComputedStyle(fromElement)[style]); toElement.style[styleCamelCase] = window.getComputedStyle(fromElement)[style]; }, this); } @@ -96,7 +110,6 @@ exports.TextTool = Montage.create(DrawingTool, { drawTextTool: { value: function() { - console.log(" now im here"); this.application.ninja.stage.textTool.value = this.selectedElement.innerHTML; if(this.application.ninja.stage.textTool.value === "") { this.application.ninja.stage.textTool.value = " "; } this.selectedElement.innerHTML = ""; @@ -105,11 +118,6 @@ exports.TextTool = Montage.create(DrawingTool, { this.application.ninja.stage.textTool.element.style.display = "block"; this.application.ninja.stage.textTool.element.style.position = "absolute"; - // Set Top & Left Positions - var textToolCoordinates = this.application.ninja.stage.toViewportCoordinates(this.selectedElement.offsetLeft, this.selectedElement.offsetTop); - this.application.ninja.stage.textTool.element.style.left = textToolCoordinates[0] + "px"; - this.application.ninja.stage.textTool.element.style.top = textToolCoordinates[1] + "px"; - // Set Width, Height this.application.ninja.stage.textTool.element.style.width = this.selectedElement.offsetWidth + "px"; this.application.ninja.stage.textTool.element.style.height = this.selectedElement.offsetHeight + "px"; @@ -127,18 +135,7 @@ exports.TextTool = Montage.create(DrawingTool, { range.selectNodeContents(this.application.ninja.stage.textTool.element.firstChild); sel.addRange(range); this.didDraw = function() {}; - console.log("im drew here"); } - console.log("i end here"); - } - }, - - - deselectText: { - value: function() { - this.application.ninja.stage.textTool.element.style.display = "none"; - this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value; - this.application.ninja.stage.textTool.value = ""; } }, @@ -162,7 +159,7 @@ exports.TextTool = Montage.create(DrawingTool, { NJevent("enableStageMove"); this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane ); } else { - this.deselectText(); + this.selectedElement = null; NJevent("disableStageMove"); } } -- cgit v1.2.3 From 7f8730c3add146f1ba107e6fc22d1f5a8348ed8b Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 7 Feb 2012 16:43:22 -0800 Subject: Refactored rich text editor location --- js/tools/TextTool.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/tools') diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js index 28e7ddf3..910a9eef 100644 --- a/js/tools/TextTool.js +++ b/js/tools/TextTool.js @@ -6,7 +6,7 @@ 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("montage/ui/rich-text-editor.reel").RichTextEditor; + RichTextEditor = require("node_modules/labs/rich-text-editor.reel").RichTextEditor; exports.TextTool = Montage.create(DrawingTool, { -- cgit v1.2.3 From 5d4002b7a920a53ea02b0e8caeaec80b804995e4 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 8 Feb 2012 15:12:16 -0800 Subject: Merging fix for marquee selection that accounts for 3d values. Signed-off-by: Nivesh Rajbhandari --- js/tools/SelectionTool.js | 40 +++++++++++++++++++++++++++++++++------- 1 file changed, 33 insertions(+), 7 deletions(-) (limited to 'js/tools') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 862b2e88..48548271 100644 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -135,18 +135,16 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { var box = []; selectedItems = []; - box[0] = this.downPoint.x - this.application.ninja.stage.documentOffsetLeft + this.application.ninja.stage.scrollLeft; - box[1] = this.downPoint.y - this.application.ninja.stage.documentOffsetTop + this.application.ninja.stage.scrollTop; - box[2] = box[0] + (point.x - this.downPoint.x); - box[3] = box[1] + (point.y - this.downPoint.y); - box = this.absoluteRectangle(box[0], box[1],box[2],box[3]); - + box[0] = this.downPoint.x; + box[1] = this.downPoint.y; + box[2] = point.x; + box[3] = point.y; //selectionManagerModule.selectionManager.marqueeSelection(box); var childNodes = this.application.ninja.currentDocument.documentRoot.childNodes; childNodes = Array.prototype.slice.call(childNodes, 0); childNodes.forEach(function(item) { - if(item.nodeType == 1 && SelectionTool._simpleCollisionDetection(item, box)) { + if(item.nodeType == 1 && SelectionTool._complicatedCollisionDetection(item, box)) { selectedItems.push(item); } }); @@ -802,6 +800,34 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { } }, + // TODO : Use the new element mediator to get element offsets + _complicatedCollisionDetection: + { + value: function(elt, box) + { + var left, top, width, height; + + left = box[0]; + width = box[2] - left; + if (width < 0) + { + left = box[2]; + width = -width; + } + top = box[1]; + height = box[3] - top; + if (height < 0) + { + top = box[3]; + height = -height; + } + + var rtnVal = MathUtils.rectsOverlap( [left,top], width, height, elt ); + + return rtnVal; + } + }, + // TODO : Use the new element mediator to get element offsets _simpleCollisionDetection: { value: function(ele, box){ -- cgit v1.2.3 From 802e92eb70b00849dadacf2c6590d27edbe65d99 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Wed, 8 Feb 2012 15:39:47 -0800 Subject: bug fixes for better anchor point rotation and removing snapping on hover and mouse down --- js/tools/PenTool.js | 182 +++++++++++++--------------------------------------- 1 file changed, 46 insertions(+), 136 deletions(-) (limited to 'js/tools') diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 5b48d3c9..9a69b53d 100644 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -37,7 +37,6 @@ exports.PenTool = Montage.create(ShapeTool, { _currentY: { value: 0, writable: true }, //the subpaths are what is displayed on the screen currently, with _selectedSubpath being the active one currently being edited - _subpaths: { value: [], writable: true }, _selectedSubpath: { value: null, writable: true }, _makeMultipleSubpaths: { value: true, writable: true }, //set this to true if you want to keep making subpaths after closing current subpath @@ -90,39 +89,29 @@ exports.PenTool = Montage.create(ShapeTool, { ENTRY_SELECT_PATH: { value: 2, writable: false}, _entryEditMode: {value: this.ENTRY_SELECT_NONE, writable: true}, - // ******** Logic for selection ******* - // (update if you change functionality!) - // NOTE: this is out of date...needs to be updated - // - // Start by setting edit mode to EDIT_NONE - // - // DOUBLE_CLICK (Left mouse button only): - // - // - // SINGLE_CLICK (Left mouse button only): - // If LeftClick selects an anchor point - // append EDIT_ANCHOR mode - // If LeftClick selects a previous point of selected anchor - // append EDIT_PREV mode - // If LeftClick selects a next point of selected anchor - // append EDIT_NEXT mode - // - - // ********* Logic for editing ******* - // (update if you chan