diff options
-rwxr-xr-x | js/components/tools-properties/pen-properties.reel/pen-properties.js | 28 | ||||
-rwxr-xr-x | js/data/tools-data.js | 4 | ||||
-rwxr-xr-x | js/lib/geom/sub-path.js | 5 | ||||
-rwxr-xr-x | js/mediators/keyboard-mediator.js | 7 | ||||
-rwxr-xr-x | js/tools/PenTool.js | 205 |
5 files changed, 196 insertions, 53 deletions
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.js b/js/components/tools-properties/pen-properties.reel/pen-properties.js index cd205e07..aba6cb61 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.js +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.js | |||
@@ -9,6 +9,17 @@ var ToolProperties = require("js/components/tools-properties/tool-properties").T | |||
9 | 9 | ||
10 | var PenProperties = exports.PenProperties = Montage.create(ToolProperties, { | 10 | var PenProperties = exports.PenProperties = Montage.create(ToolProperties, { |
11 | addedColorChips: { value: false }, | 11 | addedColorChips: { value: false }, |
12 | _penToolRadio: { value: null, enumerable: false }, | ||
13 | _penPlusRadio: { value: null, enumerable: false }, | ||
14 | _penMinusRadio: { value: null, enumerable: false }, | ||
15 | |||
16 | _subPrepare: { | ||
17 | value: function() { | ||
18 | this._penToolRadio.addEventListener("click", this, false); | ||
19 | this._penPlusRadio.addEventListener("click", this, false); | ||
20 | this._penMinusRadio.addEventListener("click", this, false); | ||
21 | } | ||
22 | }, | ||
12 | 23 | ||
13 | _fill: { | 24 | _fill: { |
14 | enumerable: false, | 25 | enumerable: false, |
@@ -50,6 +61,23 @@ var PenProperties = exports.PenProperties = Montage.create(ToolProperties, { | |||
50 | } | 61 | } |
51 | }, | 62 | }, |
52 | 63 | ||
64 | _selectedSubtool: { | ||
65 | value: "pen", enumerable: false | ||
66 | }, | ||
67 | |||
68 | selectedSubtool: { | ||
69 | get: function() { return this._selectedSubtool;}, | ||
70 | set: function(value) { this._selectedSubtool = value; } | ||
71 | }, | ||
72 | |||
73 | handleClick: { | ||
74 | value: function(event) { | ||
75 | this._selectedSubtool = event._event.target.value; | ||
76 | console.log("handleClick changing pen tool subtool to "+this.selectedSubtool); | ||
77 | NJevent("penSubToolChange"); | ||
78 | } | ||
79 | }, | ||
80 | |||
53 | draw: { | 81 | draw: { |
54 | enumerable: false, | 82 | enumerable: false, |
55 | value: function () { | 83 | value: function () { |
diff --git a/js/data/tools-data.js b/js/data/tools-data.js index 32eaf24d..179e8e81 100755 --- a/js/data/tools-data.js +++ b/js/data/tools-data.js | |||
@@ -100,7 +100,7 @@ exports.ToolsData = Montage.create(Montage, { | |||
100 | "properties": "penProperties", | 100 | "properties": "penProperties", |
101 | "spriteSheet": true, | 101 | "spriteSheet": true, |
102 | "action": "PenTool", | 102 | "action": "PenTool", |
103 | "toolTip": "Pen Tool", | 103 | "toolTip": "Pen Tool (P)", |
104 | "cursor": "auto", | 104 | "cursor": "auto", |
105 | "lastInGroup": false, | 105 | "lastInGroup": false, |
106 | "container": false, | 106 | "container": false, |
@@ -159,7 +159,7 @@ exports.ToolsData = Montage.create(Montage, { | |||
159 | "properties": "brushProperties", | 159 | "properties": "brushProperties", |
160 | "spriteSheet": true, | 160 | "spriteSheet": true, |
161 | "action": "BrushTool", | 161 | "action": "BrushTool", |
162 | "toolTip": "Brush Tool", | 162 | "toolTip": "Brush Tool (B)", |
163 | "cursor": "url('images/tools/brush_down.png') 9 17, default", | 163 | "cursor": "url('images/tools/brush_down.png') 9 17, default", |
164 | "lastInGroup": false, | 164 | "lastInGroup": false, |
165 | "container": false, | 165 | "container": false, |
diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js index 4c5fe1eb..a9034def 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/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js index 029c0916..5d5537d5 100755 --- a/js/mediators/keyboard-mediator.js +++ b/js/mediators/keyboard-mediator.js | |||
@@ -142,6 +142,13 @@ exports.KeyboardMediator = Montage.create(Component, { | |||
142 | return; | 142 | return; |
143 | } | 143 | } |
144 | 144 | ||
145 | // shortcut for Brush tool is B | ||
146 | if (evt.keyCode === Keyboard.B){ | ||
147 | evt.preventDefault(); | ||
148 | this.application.ninja.handleSelectTool({ "detail": this.application.ninja.toolsData.defaultToolsData[this.application.ninja.toolsData.brushToolIndex] }); | ||
149 | return; | ||
150 | } | ||
151 | |||
145 | // Shortcut for Rectangle Tool is R | 152 | // Shortcut for Rectangle Tool is R |
146 | // unless the user is pressing the command key. | 153 | // unless the user is pressing the command key. |
147 | // If the user is pressing the command key, they want to refresh the browser. | 154 | // If the user is pressing the command key, they want to refresh the browser. |
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 4d439dd3..bbde7374 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,70 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
179 | } | 185 | } |
180 | }, | 186 | }, |
181 | 187 | ||
188 | _removeSelectedSubpathAndCanvas:{ | ||
189 | value: function(removeSelectedSubpath){ | ||
190 | if (removeSelectedSubpath){ | ||
191 | this._selectedSubpath.clearAllAnchors(); //perhaps unnecessary | ||
192 | this._selectedSubpath = null; | ||
193 | if (this._entryEditMode === this.ENTRY_SELECT_PATH){ | ||
194 | this._entryEditMode = this.ENTRY_SELECT_NONE; | ||
195 | } | ||
196 | this._subtool = this.SUBTOOL_NONE; | ||
197 | } else { | ||
198 | this._selectedSubpath.setCanvas(null); | ||
199 | } | ||
200 | //clear the canvas | ||
201 | this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); | ||
202 | |||
203 | //undo/redo...go through ElementController and NJEvent | ||
204 | var els = []; | ||
205 | ElementController.removeElement(this._selectedSubpathCanvas); | ||
206 | els.push(this._selectedSubpathCanvas); | ||
207 | NJevent( "elementsRemoved", els ); | ||
208 | this._selectedSubpathCanvas = null; | ||
209 | } | ||
210 | }, | ||
211 | |||
212 | _removeSelectedAnchorPoint:{ | ||
213 | value: function(){ | ||
214 | this._hoveredAnchorIndex=-1; | ||
215 | this._selectedSubpath.removeAnchor(this._selectedSubpath.getSelectedAnchorIndex()); | ||
216 | if (this._selectedSubpath.getNumAnchors()===1){ | ||
217 | //convert the remaining anchor point to stage world coords | ||
218 | var xDelta = snapManager.getStageWidth()*0.5; | ||
219 | var yDelta = snapManager.getStageHeight()*0.5; | ||
220 | var anchor = this._selectedSubpath.getAnchor(0); | ||
221 | var swPos = ViewUtils.localToStageWorld([anchor.getPosX(),anchor.getPosY(),anchor.getPosZ()], this._selectedSubpathCanvas); | ||
222 | anchor.setPos(swPos[0]+xDelta, swPos[1]+yDelta, swPos[2]); | ||
223 | swPos = ViewUtils.localToStageWorld([anchor.getPrevX(),anchor.getPrevY(),anchor.getPrevZ()], this._selectedSubpathCanvas); | ||
224 | anchor.setPrevPos(swPos[0]+xDelta, swPos[1]+yDelta, swPos[2]); | ||
225 | swPos = ViewUtils.localToStageWorld([anchor.getNextX(),anchor.getNextY(),anchor.getNextZ()], this._selectedSubpathCanvas); | ||
226 | anchor.setNextPos(swPos[0]+xDelta, swPos[1]+yDelta, swPos[2]); | ||
227 | } | ||
228 | //clear the canvas | ||
229 | this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); | ||
230 | var removeSelectedSubpath=true; | ||
231 | var newNumAnchors = this._selectedSubpath.getNumAnchors(); | ||
232 | if (newNumAnchors>1) { | ||
233 | this._selectedSubpath.createSamples(false); | ||
234 | this.PrepareSelectedSubpathForRendering(); | ||
235 | this.ShowSelectedSubpath(); | ||
236 | } | ||
237 | else { | ||
238 | //since we have 0 or 1 anchors, we will remove the selected canvas (as the path does not exist) | ||
239 | if (newNumAnchors===0){ | ||
240 | removeSelectedSubpath = true; | ||
241 | } else{ | ||
242 | removeSelectedSubpath = false; //don't remove the selected subpath if there is still one anchor | ||
243 | } | ||
244 | this._removeSelectedSubpathAndCanvas(removeSelectedSubpath); | ||
245 | } | ||
246 | if (!removeSelectedSubpath){ | ||
247 |