aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorPushkar Joshi2012-05-11 08:55:07 -0700
committerPushkar Joshi2012-05-11 08:55:07 -0700
commitde9f718b739ef2b31a161d9dac6e81d614fab853 (patch)
treeddbad9c15c7e6884b8285479a9d9fd847ff93ad0 /js
parente5ae6e0b6e54db0e6efd75d1f14cb791060ed67a (diff)
downloadninja-de9f718b739ef2b31a161d9dac6e81d614fab853.tar.gz
code cleanup and starting the subtool functionality
Diffstat (limited to 'js')
-rwxr-xr-xjs/lib/geom/sub-path.js5
-rwxr-xr-xjs/tools/PenTool.js162
2 files changed, 107 insertions, 60 deletions
<
diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js
index 56c94df3..24acb2b0 100755
--- a/js/lib/geom/sub-path.js
+++ b/js/lib/geom/sub-path.js
@@ -166,6 +166,8 @@ var GLSubpath = function GLSubpath() {
166 }; 166 };
167 167
168 this.setWidth = function (newW) { 168 this.setWidth = function (newW) {
169 var strokeWidth = this._strokeWidth;
170 var halfStrokeWidth = strokeWidth*0.5;
169 if (newW<1) { 171 if (newW<1) {
170 newW=1; //clamp minimum width to 1 172 newW=1; //clamp minimum width to 1
171 } 173 }
@@ -183,7 +185,7 @@ var GLSubpath = function GLSubpath() {
183 } 185 }
184 186
185 //scale the anchor point positions such that the width of the bbox is the newW 187 //scale the anchor point positions such that the width of the bbox is the newW
186 var origX = this._BBoxMin[0]; 188 var origX = this._BBoxMin[0]; //this should always be zero since we only deal with local coordinates
187 var numAnchors = this._Anchors.length; 189 var numAnchors = this._Anchors.length;
188 for (var i=0;i<numAnchors;i++){ 190 for (var i=0;i<numAnchors;i++){
189 //compute the distance from the bboxMin 191 //compute the distance from the bboxMin
@@ -196,6 +198,7 @@ var GLSubpath = function GLSubpath() {
196 this._Anchors[i].setNextPos(origX + nextW*scaleX,this._Anchors[i].getNextY(),this._Anchors[i].getNextZ()); 198 this._Anchors[i].setNextPos(origX + nextW*scaleX,this._Anchors[i].getNextY(),this._Anchors[i].getNextZ());
197 } 199 }
198 this.makeDirty(); 200 this.makeDirty();
201 this.computeBoundingBox(true, false);
199 }; 202 };
200 203
201 this.setHeight = function (newH) { 204 this.setHeight = function (newH) {
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index fd470af7..d5cf6439 100755
--- a/js/tools/PenTool.js
+++ b/js/tools/PenTool.js
@@ -33,10 +33,10 @@ exports.PenTool = Montage.create(ShapeTool, {
33 _parentNode: { enumerable: false, value: null, writable: true }, 33 _parentNode: { enumerable: false, value: null, writable: true },
34 _toolsPropertiesContainer: { enumerable: false, value: null, writable: true }, 34 _toolsPropertiesContainer: { enumerable: false, value: null, writable: true },
35 35
36 //set this to true if you want to keep making subpaths after closing current subpath (debugging only) 36 //set this to true if you want to keep making subpaths after closing current subpath (debugging only...should always be true)
37 _makeMultipleSubpaths: { value: true, writable: true }, 37 _makeMultipleSubpaths: { value: true, writable: true },
38 38
39 //set this to false if you don't want the mouse move handler being called when the mouse is not down (debugging only) 39 //set this to false if you don't want the mouse move handler being called when the mouse is not down (debugging only...should always be true)
40 _trackMouseMoveWhenUp: {value: true, writable: false}, 40 _trackMouseMoveWhenUp: {value: true, writable: false},
41 41
42 //whether the user has held down the Alt key 42 //whether the user has held down the Alt key
@@ -95,6 +95,12 @@ exports.PenTool = Montage.create(ShapeTool, {
95 ENTRY_SELECT_PATH: { value: 2, writable: false}, 95 ENTRY_SELECT_PATH: { value: 2, writable: false},
96 _entryEditMode: {value: this.ENTRY_SELECT_NONE, writable: true}, 96 _entryEditMode: {value: this.ENTRY_SELECT_NONE, writable: true},
97 97
98 //constants used for determining whether a subtool has been selected (mutually exclusive i.e. cannot be OR-ed)
99 SUBTOOL_NONE: {value: 0, writable: false},
100 SUBTOOL_PENPLUS: {value: 1, writable: false},
101 SUBTOOL_PENMINUS: {value: 2, writable: false},
102 _subtool: {value: this.SUBTOOL_NONE, writable: true},
103
98 //constants used for limiting size of the subpath canvas 104 //constants used for limiting size of the subpath canvas
99 _MAX_CANVAS_DIMENSION: {value: 3000, writable: false}, 105 _MAX_CANVAS_DIMENSION: {value: 3000, writable: false},
100 106
@@ -179,6 +185,57 @@ exports.PenTool = Montage.create(ShapeTool, {
179 } 185 }
180 }, 186 },
181 187
188 _removeSelectedSubpathAndCanvas:{
189 value: function(removeSelectedSubpath, removeSelectedSubpathCanvas){
190 if (removeSelectedSubpathCanvas) {
191 if (removeSelectedSubpath){
192 this._selectedSubpath.clearAllAnchors(); //perhaps unnecessary
193 this._selectedSubpath = null;
194 if (this._entryEditMode === this.ENTRY_SELECT_PATH){
195 this._entryEditMode = this.ENTRY_SELECT_NONE;
196 }
197 this._subtool = this.SUBTOOL_NONE;
198 }
199 //clear the canvas
200 this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas();
201
202 //undo/redo...go through ElementController and NJEvent
203 var els = [];
204 ElementController.removeElement(this._selectedSubpathCanvas);
205 els.push(this._selectedSubpathCanvas);
206 NJevent( "elementsRemoved", els );
207 this._selectedSubpathCanvas = null;
208 }
209 }
210 },
211
212 _removeSelectedAnchorPoint:{
213 value: function(){
214 this._hoveredAnchorIndex=-1;
215 this._selectedSubpath.removeAnchor(this._selectedSubpath.getSelectedAnchorIndex());
216 this._selectedSubpath.createSamples(false);
217 //clear the canvas
218 this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas();
219 this.PrepareSelectedSubpathForRendering();
220 this.DrawSubpathAnchors(this._selectedSubpath);
221 var removeSelectedSubpath=true;
222 var removeSelectedSubpathCanvas=false;
223 var newNumAnchors = this._selectedSubpath.getNumAnchors();
224 if (newNumAnchors>1) {
225 this.ShowSelectedSubpath();
226 }
227 else {
228 if (newNumAnchors===0){
229 removeSelectedSubpath = true;
230 } else{
231 removeSelectedSubpath = false; //don't remove the selected subpath if there is still one anchor
232 }
233 removeSelectedSubpathCanvas = true;
234 }
235 this._removeSelectedSubpathAndCanvas(removeSelectedSubpath, removeSelectedSubpathCanvas);
236 }
237 },
238
182 // ********************************************************************************************************** 239 // **********************************************************************************************************
183 // Mouse down handler 240 // Mouse down handler
184 // IF the selected subpath is null, it means we're going to start a new subpath 241 // IF the selected subpath is null, it means we're going to start a new subpath
@@ -220,6 +277,11 @@ exports.PenTool = Montage.create(ShapeTool, {
220 if (this._entryEditMode !== this.ENTRY_SELECT_PATH && this._selectedSubpath && this._selectedSubpath.getIsClosed() && this._makeMultipleSubpaths) { 277 if (this._entryEditMode !== this.ENTRY_SELECT_PATH && this._selectedSubpath && this._selectedSubpath.getIsClosed() && this._makeMultipleSubpaths) {
221 this._selectedSubpath = null; 278 this._selectedSubpath = null;
222 } 279 }
280
281 if (this._subtool !== this.SUBTOOL_NONE && this._selectedSubpath===null) {
282 //do nothing because the pen plus and pen minus subtools need a selected subpath
283 return;
284 }
223 if (this._selectedSubpath === null) { 285 if (this._selectedSubpath === null) {
224 this._selectedSubpath = new SubPath(); 286 this._selectedSubpath = new SubPath();
225 this._selectedSubpathCanvas = null; 287 this._selectedSubpathCanvas = null;
@@ -255,7 +317,7 @@ exports.PenTool = Montage.create(ShapeTool, {
255 colorArray = [1,1,1,0]; 317 colorArray = [1,1,1,0];
256 } 318 }
257 this._selectedSubpath.setFillColor(colorArray); 319 this._selectedSubpath.setFillColor(colorArray);
258 } 320 } //if the selectedSubpath was null and needed to be constructed
259 321
260 //build the hit record for the current mouse position (on the stage or the plane of the path canvas) 322 //build the hit record for the current mouse position (on the stage or the plane of the path canvas)
261 var hitRec = this.getHitRecord(event.pageX, event.pageY, false); 323 var hitRec = this.getHitRecord(event.pageX, event.pageY, false);
@@ -333,6 +395,11 @@ exports.PenTool = Montage.create(ShapeTool, {
333 if (whichPoint !== this._selectedSubpath.SEL_NONE){ 395 if (whichPoint !== this._selectedSubpath.SEL_NONE){
334 //if we hit the anchor point itself 396 //if we hit the anchor point itself
335 if (whichPoint & this._selectedSubpath.SEL_ANCHOR) { 397 if (whichPoint & this._selectedSubpath.SEL_ANCHOR) {
398 if (this._subtool===this.SUBTOOL_PENMINUS){
399 //remove the selected anchor, similar to HandleDelete
400 this._removeSelectedAnchorPoint();
401 return;
402 }
336 //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 403 //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
337 if (this._entryEditMode === this.ENTRY_SELECT_PATH && this._isPickedEndPointInSelectPathMode === false){ 404 if (this._entryEditMode === this.ENTRY_SELECT_PATH && this._isPickedEndPointInSelectPathMode === false){
338 var selAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex(); 405 var selAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex();
@@ -438,6 +505,7 @@ exports.PenTool = Montage.create(ShapeTool, {
438 "url('images/cursors/penCursors/Pen_newPath.png') 5 1, default"; 505 "url('images/cursors/penCursors/Pen_newPath.png') 5 1, default";
439 } 506 }
440 507
508
441 if (!this._selectedSubpath ){ 509 if (!this._selectedSubpath ){
442 return; //nothing to do in case no subpath is selected 510 return; //nothing to do in case no subpath is selected
443 } 511 }
@@ -528,21 +596,28 @@ exports.PenTool = Montage.create(ShapeTool, {
528 { //the anchor was hit 596 { //the anchor was hit
529 this._hoveredAnchorIndex = selAnchorAndParamAndCode[0]; 597 this._hoveredAnchorIndex = selAnchorAndParamAndCode[0];
530 var lastAnchorIndex = this._selectedSubpath.getNumAnchors()-1; 598 var lastAnchorIndex = this._selectedSubpath.getNumAnchors()-1;
531 var cursor = "url('images/cursors/penCursors/Pen_anchorSelect.png') 5 1, default"; 599 var cursor;
532 if (this._selectedSubpath.getIsClosed()===false){ 600 if (this._subtool===this.SUBTOOL_NONE){
533 if (this._entryEditMode === this.ENTRY_SELECT_PATH && !this._isPickedEndPointInSelectPathMode && (this._hoveredAnchorIndex===0 || this._hoveredAnchorIndex===lastAnchorIndex)){ 601 cursor = "url('images/cursors/penCursors/Pen_anchorSelect.png') 5 1, default";
534 //if we're in SELECT_PATH mode, have not yet clicked on the end anchors, AND we hovered over one of the end anchors 602 if (this._selectedSubpath.getIsClosed()===false){
535 cursor = "url('images/cursors/penCursors/Pen_append.png') 5 1, default"; 603 if (this._entryEditMode === this.ENTRY_SELECT_PATH && !this._isPickedEndPointInSelectPathMode && (this._hoveredAnchorIndex===0 || this._hoveredAnchorIndex===lastAnchorIndex)){
536 } else if ( this._selectedSubpath.getSelectedAnchorIndex()===lastAnchorIndex && this._hoveredAnchorIndex===0) { 604 //if we're in SELECT_PATH mode, have not yet clicked on the end anchors, AND we hovered over one of the end anchors
537 //if we've selected the last anchor and hover over the first anchor 605 cursor = "url('images/cursors/penCursors/Pen_append.png') 5 1, default";
538 cursor = "url('images/cursors/penCursors/Pen_closePath.png') 5 1, default"; 606 } else if ( this._selectedSubpath.getSelectedAnchorIndex()===lastAnchorIndex && this._hoveredAnchorIndex===0) {
539 } 607 //if we've selected the last anchor and hover over the first anchor
540 } //if path is not closed 608 cursor = "url('images/cursors/penCursors/Pen_closePath.png') 5 1, default";
609 }
610 } //if path is not closed
611 } else if (this._subtool === this.SUBTOOL_PENMINUS){
612 cursor = "url('images/cursors/penCursors/Pen_minus.png') 5 1, default";
613 }
541 this.application.ninja.stage.drawingCanvas.style.cursor = cursor; 614 this.application.ninja.stage.drawingCanvas.style.cursor = cursor;
542 } else if (selAnchorAndParamAndCode[2] & this._selectedSubpath.SEL_PATH) { 615 } else if (selAnchorAndParamAndCode[2] & this._selectedSubpath.SEL_PATH) {
543 //change the cursor 616 //change the cursor only if we're not in pen-minus subtool
544 var cursor = "url('images/cursors/penCursors/Pen_plus.png') 5 1, default"; 617 if (this._subtool!==this.SUBTOOL_PENMINUS){
545 this.application.ninja.stage.drawingCanvas.style.cursor = cursor; 618 var cursor = "url('images/cursors/penCursors/Pen_plus.png') 5 1, default";
619 this.application.ninja.stage.drawingCanvas.style.cursor = cursor;
620 }
546 } 621 }
547 } //something on the path was hit 622 } //something on the path was hit
548 } //mouse is not down 623 } //mouse is not down
@@ -688,6 +763,11 @@ exports.PenTool = Montage.create(ShapeTool, {
688 // ********************************************************************************************************** 763 // **********************************************************************************************************
689 HandleLeftButtonUp: { 764 HandleLeftButtonUp: {
690 value: function (event) {