diff options
author | Valerio Virgillito | 2012-02-09 11:57:35 -0800 |
---|---|---|
committer | Valerio Virgillito | 2012-02-09 11:57:35 -0800 |
commit | ce81a3f4387d80f9ac406e73b843fb5dbe9cf432 (patch) | |
tree | 292934c613d7d6952cddac618a7db13a04c48bb3 /js/tools/PenTool.js | |
parent | e78f4312c194d9e8188075cf1fe87e4be22b24e4 (diff) | |
parent | fba39dbb3bd64eddf6162fbf57232089e446fb06 (diff) | |
download | ninja-ce81a3f4387d80f9ac406e73b843fb5dbe9cf432.tar.gz |
Merge pull request #26 from pushkarjoshi/pentool
Pentool
Diffstat (limited to 'js/tools/PenTool.js')
-rw-r--r-- | js/tools/PenTool.js | 554 |
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 | ||
7 | var ShapeTool = require("js/tools/ShapeTool").ShapeTool; | 7 | var ShapeTool = require("js/tools/ShapeTool").ShapeTool; |
8 | var ShapesController = require("js/controllers/elements/shapes-controller").ShapesController; | ||
8 | var DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase; | 9 | var DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase; |
9 | var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; | 10 | var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; |
10 | var Montage = require("montage/core/core").Montage; | 11 | var Montage = require("montage/core/core").Montage; |
@@ -12,6 +13,10 @@ var NJUtils = require("js/lib/NJUtils").NJUtils; | |||
12 | var ElementMediator = require("js/mediators/element-mediator").ElementMediator; | 13 | var ElementMediator = require("js/mediators/element-mediator").ElementMediator; |
13 | var TagTool = require("js/tools/TagTool").TagTool; | 14 | var TagTool = require("js/tools/TagTool").TagTool; |
14 | var ElementController = require("js/controllers/elements/element-controller").ElementController; | 15 | var ElementController = require("js/controllers/elements/element-controller").ElementController; |
16 | var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager; | ||
17 | |||
18 | //todo remove this global var | ||
19 | var g_DoPenToolMouseMove = true; | ||
15 | 20 | ||
16 | exports.PenTool = Montage.create(ShapeTool, { | 21 | exports.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 |