aboutsummaryrefslogtreecommitdiff
path: root/js/tools/PenTool.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/tools/PenTool.js')
-rw-r--r--js/tools/PenTool.js554
1 files changed, 160 insertions, 394 deletions
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index 78344d18..9a69b53d 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
5</copyright> */ 5</copyright> */
6 6
7var ShapeTool = require("js/tools/ShapeTool").ShapeTool; 7var ShapeTool = require("js/tools/ShapeTool").ShapeTool;
8var ShapesController = require("js/controllers/elements/shapes-controller").ShapesController;
8var DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase; 9var DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase;
9var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; 10var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager;
10var Montage = require("montage/core/core").Montage; 11var Montage = require("montage/core/core").Montage;
@@ -12,6 +13,10 @@ var NJUtils = require("js/lib/NJUtils").NJUtils;
12var ElementMediator = require("js/mediators/element-mediator").ElementMediator; 13var ElementMediator = require("js/mediators/element-mediator").ElementMediator;
13var TagTool = require("js/tools/TagTool").TagTool; 14var TagTool = require("js/tools/TagTool").TagTool;
14var ElementController = require("js/controllers/elements/element-controller").ElementController; 15var ElementController = require("js/controllers/elements/element-controller").ElementController;
16var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager;
17
18//todo remove this global var
19var g_DoPenToolMouseMove = true;
15 20
16exports.PenTool = Montage.create(ShapeTool, { 21exports.PenTool = Montage.create(ShapeTool, {
17 22
@@ -32,14 +37,10 @@ exports.PenTool = Montage.create(ShapeTool, {
32 _currentY: { value: 0, writable: true }, 37 _currentY: { value: 0, writable: true },
33 38
34 //the subpaths are what is displayed on the screen currently, with _selectedSubpath being the active one currently being edited 39 //the subpaths are what is displayed on the screen currently, with _selectedSubpath being the active one currently being edited
35 _subpaths: { value: [], writable: true },
36 _selectedSubpath: { value: null, writable: true }, 40 _selectedSubpath: { value: null, writable: true },
37 _makeMultipleSubpaths: { value: true, writable: true }, //set this to true if you want to keep making subpaths after closing current subpath 41 _makeMultipleSubpaths: { value: true, writable: true }, //set this to true if you want to keep making subpaths after closing current subpath
38 42
39 43
40 //whether or not to display the guides for debugging
41 _showGuides: { value: true, writable: true },
42
43 //whether the user has held down the Alt key 44 //whether the user has held down the Alt key
44 _isAltDown: { value: false, writable: true }, 45 _isAltDown: { value: false, writable: true },
45 46
@@ -64,6 +65,9 @@ exports.PenTool = Montage.create(ShapeTool, {
64 //the plane matrix for the first click...so the entire path is on the same plane 65 //the plane matrix for the first click...so the entire path is on the same plane
65 _penPlaneMat: { value: null, writable: true }, 66 _penPlaneMat: { value: null, writable: true },
66 67
68 //index of the anchor point that the user has hovered over
69 _hoveredAnchorIndex: {value: null, writable: true},
70
67 //constants used for picking points --- NOTE: these should be user-settable parameters 71 //constants used for picking points --- NOTE: these should be user-settable parameters
68 _PICK_POINT_RADIUS: { value: 10, writable: false }, 72 _PICK_POINT_RADIUS: { value: 10, writable: false },
69 _DISPLAY_ANCHOR_RADIUS: { value: 5, writable: false }, 73 _DISPLAY_ANCHOR_RADIUS: { value: 5, writable: false },
@@ -85,39 +89,29 @@ exports.PenTool = Montage.create(ShapeTool, {
85 ENTRY_SELECT_PATH: { value: 2, writable: false}, 89 ENTRY_SELECT_PATH: { value: 2, writable: false},
86 _entryEditMode: {value: this.ENTRY_SELECT_NONE, writable: true}, 90 _entryEditMode: {value: this.ENTRY_SELECT_NONE, writable: true},
87 91
88 // ******** Logic for selection *******
89 // (update if you change functionality!)
90 // NOTE: this is out of date...needs to be updated
91 //
92 // Start by setting edit mode to EDIT_NONE
93 //
94 // DOUBLE_CLICK (Left mouse button only):
95 //
96 //
97 // SINGLE_CLICK (Left mouse button only):
98 // If LeftClick selects an anchor point
99 // append EDIT_ANCHOR mode
100 // If LeftClick selects a previous point of selected anchor
101 // append EDIT_PREV mode
102 // If LeftClick selects a next point of selected anchor
103 // append EDIT_NEXT mode
104 //
105
106 // ********* Logic for editing *******
107 // (update if you change functionality!)
108 // NOTE: this is out of date...needs to be updated
109 //
110 // Start by computing mouse disp
111 //
112 // If EDIT_PREV_NEXT mode
113 // add disp to next and mirror it to prev
114 // ELSE
115 // If EDIT_ANCHOR (or _PREV, _NEXT)
116 // map displacement to anchor (similarly to prev and next)
117 //
118 //
119 92
120 93
94 _getUnsnappedPosition: {
95 value: function(x,y){
96 var elemSnap = snapManager.elementSnapEnabled();
97 var gridSnap = snapManager.gridSnapEnabled();
98 var alignSnap = snapManager.snapAlignEnabled();
99
100 snapManager.enableElementSnap(false);
101 snapManager.enableGridSnap(false);
102 snapManager.enableSnapAlign(false);
103
104 var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y));
105 var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false));
106
107 snapManager.enableElementSnap(elemSnap);
108 snapManager.enableGridSnap(gridSnap);
109 snapManager.enableSnapAlign(alignSnap);
110
111 return unsnappedpos;
112 }
113 },
114
121 ShowToolProperties: { 115 ShowToolProperties: {
122 value: function () { 116 value: function () {
123 this._penView = PenView.create(); 117 this._penView = PenView.create();
@@ -137,21 +131,18 @@ exports.PenTool = Montage.create(ShapeTool, {
137 //NOTE: this will work on Webkit only...IE has different codes (left: 1, middle: 4, right: 2) 131 //NOTE: this will work on Webkit only...IE has different codes (left: 1, middle: 4, right: 2)
138 return; 132 return;
139 } 133 }
140 //BEGIN ShapeTool code
141 if (this._canDraw) { 134 if (this._canDraw) {
142 this._isDrawing = true; 135 this._isDrawing = true;
143 } 136 }
144 137
145 //this._targetedCanvas = stageManagerModule.stageManager.GetObjectFromPoint(event.layerX, event.layerY, this._canOperateOnStage);
146 138
147 this.startDraw(event); 139 this.startDraw(event);
148 //END ShapeTool code
149 140
150 //assume we are not starting a new path as we will set this to true if we create a new GLSubpath() 141 //assume we are not starting a new path as we will set this to true if we create a new GLSubpath()
151 this._isNewPath = false; 142 this._isNewPath = false;
152 143
153 //add an anchor point by computing position of mouse down 144 //add an anchor point by computing position of mouse down
154 var mouseDownPos = this.getMouseDownPos(); 145 var mouseDownPos = this._getUnsnappedPosition(event.pageX, event.pageY); //this.getMouseDownPos();
155 if (mouseDownPos) { 146 if (mouseDownPos) {
156 //if we had closed the selected subpath previously, or if we have not yet started anything, create a subpath 147 //if we had closed the selected subpath previously, or if we have not yet started anything, create a subpath
157 if (this._selectedSubpath === null) { 148 if (this._selectedSubpath === null) {
@@ -160,19 +151,10 @@ exports.PenTool = Montage.create(ShapeTool, {
160 if (this._entryEditMode === this.ENTRY_SELECT_PATH){ 151 if (this._entryEditMode === this.ENTRY_SELECT_PATH){
161 //this should not happen, as ENTRY_SELECT_PATH implies there was a selected subpath 152 //this should not happen, as ENTRY_SELECT_PATH implies there was a selected subpath
162 this._entryEditMode = this.ENTRY_SELECT_NONE; 153 this._entryEditMode = this.ENTRY_SELECT_NONE;
163 } 154 console.log("Warning...PenTool handleMouseDown: changing from SELECT_PATH to SELECT_NONE");
164 } else if (this._selectedSubpath.getIsClosed() && this._entryEditMode !== this.ENTRY_SELECT_PATH) {
165 //since we're not in ENTRY_SELECT_PATH mode, we don't edit the closed path...we start a new path regardless of where we clicked
166 if (this._makeMultipleSubpaths) {
167 this._subpaths.push(this._selectedSubpath);
168 this._penCanvas = null;
169 this._penPlaneMat = null;
170 this._snapTarget = null;
171 this._selectedSubpath = new GLSubpath();
172 this._isNewPath = true;
173 } 155 }
174 } 156 }
175 157
176 var prevSelectedAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex(); 158 var prevSelectedAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex();
177 // ************* Add/Select Anchor Point ************* 159 // ************* Add/Select Anchor Point *************
178 //check if the clicked location is close to an anchor point...if so, make that anchor the selected point and do nothing else 160 //check if the clicked location is close to an anchor point...if so, make that anchor the selected point and do nothing else
@@ -187,6 +169,8 @@ exports.PenTool = Montage.create(ShapeTool, {
187 //we have picked the endpoint of this path...reverse the path if necessary 169 //we have picked the endpoint of this path...reverse the path if necessary
188 if (selAnchorIndex ===0){ 170 if (selAnchorIndex ===0){
189 //reverse this path 171 //reverse this path
172 this._selectedSubpath.reversePath();
173 selAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex();
190 } 174 }
191 this._isPickedEndPointInSelectPathMode = true; 175 this._isPickedEndPointInSelectPathMode = true;
192 } 176 }
@@ -219,8 +203,19 @@ exports.PenTool = Montage.create(ShapeTool, {
219 } 203 }
220 } 204 }
221 } 205 }
206
207 //the clicked location is not close to the path or any anchor point
222 if (whichPoint === this._selectedSubpath.SEL_NONE) { 208 if (whichPoint === this._selectedSubpath.SEL_NONE) {
223 if (this._entryEditMode !== this.ENTRY_SELECT_PATH) { 209 if (this._entryEditMode !== this.ENTRY_SELECT_PATH) {
210 //since we're not in ENTRY_SELECT_PATH mode, we don't edit the closed path...we start a new path if we clicked far away from selected path
211 if (this._selectedSubpath.getIsClosed() && this._makeMultipleSubpaths) {
212 this._penCanvas = null;
213 this._penPlaneMat = null;
214 this._snapTarget = null;
215 this._selectedSubpath = new GLSubpath();
216 this._isNewPath = true;
217 }
218
224 //add an anchor point to end of the subpath, and make it the selected anchor point 219 //add an anchor point to end of the subpath, and make it the selected anchor point
225 if (!this._selectedSubpath.getIsClosed() || this._makeMultipleSubpaths) { 220 if (!this._selectedSubpath.getIsClosed() || this._makeMultipleSubpaths) {
226 this._selectedSubpath.addAnchor(new GLAnchorPoint()); 221 this._selectedSubpath.addAnchor(new GLAnchorPoint());
@@ -234,20 +229,32 @@ exports.PenTool = Montage.create(ShapeTool, {
234 } 229 }
235 } else { 230 } else {
236 if (this._isPickedEndPointInSelectPathMode){ 231 if (this._isPickedEndPointInSelectPathMode){
237 232 //TODO clean up this code...very similar to the code block above
233 if (!this._selectedSubpath.getIsClosed()) {
234 this._selectedSubpath.addAnchor(new GLAnchorPoint());
235 var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex());
236 newAnchor.setPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]);
237 newAnchor.setPrevPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]);
238 newAnchor.setNextPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]);
239
240 //set the mode so that dragging will update the next and previous locations
241 this._editMode = this.EDIT_PREV_NEXT;
242 }
238 } 243 }
239 //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
240 //this._entryEditMode = this.ENTRY_SELECT_NONE; //TODO revisit this after implementing code for adding points to any end of selected path
241 } 244 }
242 } //if (whichPoint === this._selectedSubpath.SEL_NONE) (i.e