diff options
author | Pushkar Joshi | 2012-04-12 15:47:04 -0700 |
---|---|---|
committer | Pushkar Joshi | 2012-04-12 15:47:04 -0700 |
commit | 276926133022577344d0e4934d1ff44da2ac18aa (patch) | |
tree | 43e768ffc102219b644a6c4ae39f628da903bf05 /js/tools | |
parent | 9a518896ed98022f589f06276197c160431bdda0 (diff) | |
download | ninja-276926133022577344d0e4934d1ff44da2ac18aa.tar.gz |
Use local coordinates for rendering and hit testing only when the path canvas exists....AND...good state for code that works in 3D as long as the path was originally created in XY plane of the stage
Diffstat (limited to 'js/tools')
-rwxr-xr-x | js/tools/PenTool.js | 82 |
1 files changed, 66 insertions, 16 deletions
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 22172193..5145eb39 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js | |||
@@ -184,23 +184,60 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
184 | } | 184 | } |
185 | } | 185 | } |
186 | 186 | ||
187 | //build the mouse down position in local coordinates | 187 | |
188 | // ****** build the mouse down position in local coordinates ******* | ||
189 | |||
190 | var localMousePos = null; //local mouse position | ||
191 | var swFromLocalMousePos = null; // | ||
192 | var swMousePos = null; | ||
193 | |||
188 | var drawingCanvas = this._selectedSubpath.getCanvas(); | 194 | var drawingCanvas = this._selectedSubpath.getCanvas(); |
195 | var useLocal = true; | ||
189 | if (!drawingCanvas){ | 196 | if (!drawingCanvas){ |
197 | //if the subpath has no canvas, it means we should not use local coordinates, and use stage-world coordinates only | ||
198 | useLocal = false; | ||
190 | drawingCanvas = ViewUtils.getStageElement(); | 199 | drawingCanvas = ViewUtils.getStageElement(); |
200 | |||
201 | var contentPlane = ViewUtils.getUnprojectedElementPlane(drawingCanvas); //this should just be the | ||
202 | snapManager.pushWorkingPlane(contentPlane); | ||
203 | var tmpPoint = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); | ||
204 | var hitRec = snapManager.snap(tmpPoint.x, tmpPoint.y, false); | ||
205 | swMousePos = hitRec.calculateStageWorldPoint(); | ||
206 | //DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); | ||
207 | this._dragPlane = snapManager.getDragPlane(); | ||
208 | snapManager.popWorkingPlane(); | ||
209 | swMousePos[0]+= snapManager.getStageWidth()*0.5; swMousePos[1]+= snapManager.getStageHeight()*0.5; | ||
210 | |||
211 | this._penPlaneMat = hitRec.getPlaneMatrix(); | ||
212 | this._selectedSubpath.setPlaneMatrix(this._penPlaneMat); | ||
213 | var planeMatInv = glmat4.inverse( this._penPlaneMat, [] ); | ||
214 | this._selectedSubpath.setPlaneMatrixInverse(planeMatInv); | ||
215 | this._selectedSubpath.setDragPlane(this._dragPlane); | ||
216 | |||
217 | } else { | ||
218 | //build the local coordinates of the screen point | ||
219 | var globalMousePos = this._getUnsnappedScreenPosition(event.pageX, event.pageY); | ||
220 | localMousePos = ViewUtils.globalToLocal(globalMousePos, drawingCanvas); | ||
221 | |||
222 | //now build the stage world coordinates (without taking the canvas transformation into account) of the local coordinates | ||
223 | var localToStageWorldNoTransform = ViewUtils.getLocalToStageWorldMatrix(drawingCanvas, true, false); | ||
224 | var swFromLocalMousePos = MathUtils.transformAndDivideHomogeneousPoint(localMousePos,localToStageWorldNoTransform); | ||
225 | swFromLocalMousePos[0]+= snapManager.getStageWidth()*0.5; swFromLocalMousePos[1]+= snapManager.getStageHeight()*0.5; | ||
191 | } | 226 | } |
192 | var globalMousePos = this._getUnsnappedScreenPosition(event.pageX, event.pageY); | 227 | |
193 | var localMousePos = ViewUtils.globalToLocal(globalMousePos, drawingCanvas); | 228 | |
194 | var localToStageWorldNoTransform = ViewUtils.getLocalToStageWorldMatrix(drawingCanvas, true, false); | ||
195 | var swMousePos = MathUtils.transformAndDivideHomogeneousPoint(localMousePos,localToStageWorldNoTransform); | ||
196 | swMousePos[0]+= snapManager.getStageWidth()*0.5; swMousePos[1]+= snapManager.getStageHeight()*0.5; | ||
197 | var prevSelectedAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex(); | 229 | var prevSelectedAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex(); |
198 | // ************* Add/Select Anchor Point ************* | 230 | // ************* Add/Select Anchor Point ************* |
199 | //check if the clicked location is close to an anchor point...if so, make that anchor the selected point and do nothing else | 231 | //check if the clicked location is close to an anchor point...if so, make that anchor the selected point and do nothing else |
200 | // BUT if the anchor point selected is the first anchor point, check if the previous selected anchor was the last anchor point...in that case, close the path | 232 | // BUT if the anchor point selected is the first anchor point, check if the previous selected anchor was the last anchor point...in that case, close the path |
201 | 233 | ||
202 | //var selParam = this._selectedSubpath.pickPath(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2], this._PICK_POINT_RADIUS); | 234 | //var selParam = this._selectedSubpath.pickPath(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2], this._PICK_POINT_RADIUS); |
203 | var selParam = this._selectedSubpath.pickPath(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, true); | 235 | var selParam = null; |
236 | if (useLocal) { | ||
237 | selParam = this._selectedSubpath.pickPath(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, true); | ||
238 | } else { | ||
239 | selParam = this._selectedSubpath.pickPath(swMousePos[0], swMousePos[1], swMousePos[2], this._PICK_POINT_RADIUS, false); | ||
240 | } | ||
204 | var whichPoint = this._selectedSubpath.getSelectedMode(); | 241 | var whichPoint = this._selectedSubpath.getSelectedMode(); |
205 | if (whichPoint & this._selectedSubpath.SEL_ANCHOR) { | 242 | if (whichPoint & this._selectedSubpath.SEL_ANCHOR) { |
206 | //if we're in ENTRY_SELECT_PATH mode AND we have not yet clicked on the endpoint AND if we have now clicked on the endpoint | 243 | //if we're in ENTRY_SELECT_PATH mode AND we have not yet clicked on the endpoint AND if we have now clicked on the endpoint |
@@ -262,9 +299,15 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
262 | if (!this._selectedSubpath.getIsClosed() || this._makeMultipleSubpaths) { | 299 | if (!this._selectedSubpath.getIsClosed() || this._makeMultipleSubpaths) { |
263 | this._selectedSubpath.addAnchor(new AnchorPoint()); | 300 | this._selectedSubpath.addAnchor(new AnchorPoint()); |
264 | var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); | 301 | var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); |
265 | newAnchor.setPos(swMousePos[0], swMousePos[1], swMousePos[2]); | 302 | if (useLocal) { |
266 | newAnchor.setPrevPos(swMousePos[0], swMousePos[1], swMousePos[2]); | 303 | newAnchor.setPos(swFromLocalMousePos[0], swFromLocalMousePos[1], swFromLocalMousePos[2]); |
267 | newAnchor.setNextPos(swMousePos[0], swMousePos[1], swMousePos[2]); | 304 | newAnchor.setPrevPos(swFromLocalMousePos[0], swFromLocalMousePos[1], swFromLocalMousePos[2]); |
305 | newAnchor.setNextPos(swFromLocalMousePos[0], swFromLocalMousePos[1], swFromLocalMousePos[2]); | ||
306 | } else { | ||
307 | newAnchor.setPos(swMousePos[0], swMousePos[1], swMousePos[2]); | ||
308 | newAnchor.setPrevPos(swMousePos[0], swMousePos[1], swMousePos[2]); | ||
309 | newAnchor.setNextPos(swMousePos[0], swMousePos[1], swMousePos[2]); | ||
310 | } | ||
268 | 311 | ||
269 | //set the mode so that dragging will update the next and previous locations | 312 | //set the mode so that dragging will update the next and previous locations |
270 | this._editMode = this.EDIT_PREV_NEXT; | 313 | this._editMode = this.EDIT_PREV_NEXT; |
@@ -275,9 +318,15 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
275 | if (!this._selectedSubpath.getIsClosed()) { | 318 | if (!this._selectedSubpath.getIsClosed()) { |
276 | this._selectedSubpath.addAnchor(new AnchorPoint()); | 319 | this._selectedSubpath.addAnchor(new AnchorPoint()); |
277 | var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); | 320 | var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); |
278 | newAnchor.setPos(swMousePos[0], swMousePos[1], swMousePos[2]); | 321 | if (useLocal) { |
279 | newAnchor.setPrevPos(swMousePos[0], swMousePos[1], swMousePos[2]); | 322 | newAnchor.setPos(swFromLocalMousePos[0], swFromLocalMousePos[1], swFromLocalMousePos[2]); |
280 | newAnchor.setNextPos(swMousePos[0], swMousePos[1], swMousePos[2]); | 323 | newAnchor.setPrevPos(swFromLocalMousePos[0], swFromLocalMousePos[1], swFromLocalMousePos[2]); |
324 | newAnchor.setNextPos(swFromLocalMousePos[0], swFromLocalMousePos[1], swFromLocalMousePos[2]); | ||
325 | } else { | ||
326 | newAnchor.setPos(swMousePos[0], swMousePos[1], swMousePos[2]); | ||
327 | newAnchor.setPrevPos(swMousePos[0], swMousePos[1], swMousePos[2]); | ||
328 | newAnchor.setNextPos(swMousePos[0], swMousePos[1], swMousePos[2]); | ||
329 | } | ||
281 | 330 | ||
282 | //set the mode so that dragging will update the next and previous locations | 331 | //set the mode so that dragging will update the next and previous locations |
283 | this._editMode = this.EDIT_PREV_NEXT; | 332 | this._editMode = this.EDIT_PREV_NEXT; |
@@ -329,7 +378,6 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
329 | //go through the drawing toolbase to get the position of the mouse | 378 | //go through the drawing toolbase to get the position of the mouse |
330 | var currMousePos = DrawingToolBase.getHitRecPos(DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec)); | 379 | var currMousePos = DrawingToolBase.getHitRecPos(DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec)); |
331 | if (currMousePos && this._selectedSubpath && (this._selectedSubpath.getSelectedAnchorIndex() >= 0 && this._selectedSubpath.getSelectedAnchorIndex() < this._selectedSubpath.getNumAnchors())) { | 380 | if (currMousePos && this._selectedSubpath && (this._selectedSubpath.getSelectedAnchorIndex() >= 0 && this._selectedSubpath.getSelectedAnchorIndex() < this._selectedSubpath.getNumAnchors())) { |
332 | |||
333 | // BEGIN NEW LOCAL COORD BLOCK | 381 | // BEGIN NEW LOCAL COORD BLOCK |
334 | //build the mouse position in local coordinates | 382 | //build the mouse position in local coordinates |
335 | var drawingCanvas = this._selectedSubpath.getCanvas(); | 383 | var drawingCanvas = this._selectedSubpath.getCanvas(); |
@@ -473,6 +521,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
473 | var globalMousePos = this._getUnsnappedScreenPosition(event.pageX, event.pageY); | 521 | var globalMousePos = this._getUnsnappedScreenPosition(event.pageX, event.pageY); |
474 | var localMousePos = ViewUtils.globalToLocal(globalMousePos, drawingCanvas); | 522 | var localMousePos = ViewUtils.globalToLocal(globalMousePos, drawingCanvas); |
475 | 523 | ||
524 | |||
476 | //var selAnchorRetCode = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS, false); | 525 | //var selAnchorRetCode = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS, false); |
477 | var selAnchorRetCode = this._selectedSubpath.pickAnchor(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, true); | 526 | var selAnchorRetCode = this._selectedSubpath.pickAnchor(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, true); |
478 | if (selAnchorRetCode[0] >=0) { | 527 | if (selAnchorRetCode[0] >=0) { |
@@ -553,6 +602,8 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
553 | return; | 602 | return; |
554 | } | 603 | } |
555 | 604 | ||
605 | w= Math.round(w); | ||
606 | h = Math.round(h); | ||
556 | var left = Math.round(midPt[0] - 0.5 * w); | 607 | var left = Math.round(midPt[0] - 0.5 * w); |
557 | var top = Math.round(midPt[1] - 0.5 * h); | 608 | var top = Math.round(midPt[1] - 0.5 * h); |
558 | this._selectedSubpath.setPlaneCenter(midPt); | 609 | this._selectedSubpath.setPlaneCenter(midPt); |
@@ -617,8 +668,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
617 | if (this._entryEditMode !== this.ENTRY_SELECT_CANVAS){ | 668 | if (this._entryEditMode !== this.ENTRY_SELECT_CANVAS){ |
618 | //update the left and top of the canvas element | 669 | //update the left and top of the canvas element |
619 | var canvasArray=[canvas]; | 670 | var canvasArray=[canvas]; |
620 | w= Math.round(w); | 671 | |
621 | h = Math.round(h); | ||
622 | ElementMediator.setProperty(canvasArray, "width", [w+"px"], "Changing", "penTool");//canvas.width = w; | 672 | ElementMediator.setProperty(canvasArray, "width", [w+"px"], "Changing", "penTool");//canvas.width = w; |
623 | ElementMediator.setProperty(canvasArray, "height", [h+"px"], "Changing", "penTool");//canvas.height = h; | 673 | ElementMediator.setProperty(canvasArray, "height", [h+"px"], "Changing", "penTool");//canvas.height = h; |
624 | ElementMediator.setProperty(canvasArray, "left", [left+"px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "left", parseInt(left) + "px"); | 674 | ElementMediator.setProperty(canvasArray, "left", [left+"px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "left", parseInt(left) + "px"); |