diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/components/tools-properties/pen-properties.reel/pen-properties.html | 22 | ||||
-rw-r--r-- | js/components/tools-properties/pen-properties.reel/pen-properties.js | 18 | ||||
-rw-r--r-- | js/helper-classes/RDGE/GLBrushStroke.js | 1 | ||||
-rw-r--r-- | js/helper-classes/RDGE/GLSubpath.js | 57 | ||||
-rw-r--r-- | js/tools/PenTool.js | 346 |
5 files changed, 181 insertions, 263 deletions
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.html b/js/components/tools-properties/pen-properties.reel/pen-properties.html index 7af35a03..74a3a747 100644 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.html +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html | |||
@@ -12,12 +12,25 @@ | |||
12 | <script type="text/montage-serialization"> | 12 | <script type="text/montage-serialization"> |
13 | { | 13 | { |
14 | 14 | ||
15 | "strokeSizeHT": { | ||
16 | "module": "js/components/hottextunit.reel", | ||
17 | "name": "HotTextUnit", | ||
18 | "properties": { | ||
19 | "element": {"#": "strokeSize"}, | ||
20 | "minValue": 1, | ||
21 | "maxValue": 100, | ||
22 | "value": 1, | ||
23 | "decimalPlace": 10, | ||
24 | "acceptableUnits" : ["px", "pt"] | ||
25 | } | ||
26 | }, | ||
27 | |||
15 | "owner": { | 28 | "owner": { |
16 | "module": "js/components/tools-properties/pen-properties.reel", | 29 | "module": "js/components/tools-properties/pen-properties.reel", |
17 | "name": "PenProperties", | 30 | "name": "PenProperties", |
18 | "properties": { | 31 | "properties": { |
19 | "element": {"#": "penProperties"}, | 32 | "element": {"#": "penProperties"}, |
20 | "reset": {"#": "resetPenTool"} | 33 | "_strokeSize": {"@": "strokeSizeHT"} |
21 | } | 34 | } |
22 | } | 35 | } |
23 | } | 36 | } |
@@ -26,9 +39,12 @@ | |||
26 | </head> | 39 | </head> |
27 | 40 | ||
28 | <body> | 41 | <body> |
29 | <div id="penProperties" class="subToolHolderPanel"> | 42 | <div id="penProperties" class="subToolHolderPanel"> |
30 | <button id="resetPenTool" tabindex="0" class="montage-button" aria-role="button" aria-busy="false">Reset</button> | 43 | <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;"> |
44 | <label class="label"> Stroke:</label> | ||
45 | <div id="strokeSize" class="label"></div> | ||
31 | </div> | 46 | </div> |
47 | </div> | ||
32 | </body> | 48 | </body> |
33 | 49 | ||
34 | </html> \ No newline at end of file | 50 | </html> \ No newline at end of file |
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 ec8efa69..b57f9a6f 100644 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.js +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.js | |||
@@ -5,24 +5,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage; | 7 | var Montage = require("montage/core/core").Montage; |
8 | var Component = require("montage/ui/component").Component; | ||
9 | var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; | ||
10 | var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; | 8 | var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; |
11 | 9 | ||
12 | exports.PenProperties = Montage.create(ToolProperties, { | 10 | exports.PenProperties = Montage.create(ToolProperties, { |
13 | reset: { value: null }, | 11 | strokeSize: { |
14 | 12 | get: function() { return this._strokeSize; } | |
15 | _subPrepare: { | ||
16 | value: function() { | ||
17 | this.reset.addEventListener("click", this, false); | ||
18 | } | ||
19 | }, | ||
20 | |||
21 | handleClick: { | ||
22 | value: function(event) { | ||
23 | var newEvent = document.createEvent( "CustomEvent" ); | ||
24 | newEvent.initCustomEvent( "resetPenTool", false, true ); | ||
25 | defaultEventManager.dispatchEvent( newEvent ); | ||
26 | } | ||
27 | } | 13 | } |
28 | }); \ No newline at end of file | 14 | }); \ No newline at end of file |
diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js index 89292ad8..f9ed6619 100644 --- a/js/helper-classes/RDGE/GLBrushStroke.js +++ b/js/helper-classes/RDGE/GLBrushStroke.js | |||
@@ -6,7 +6,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
6 | 6 | ||
7 | var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; | 7 | var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; |
8 | 8 | ||
9 | |||
10 | /////////////////////////////////////////////////////////////////////// | 9 | /////////////////////////////////////////////////////////////////////// |
11 | // Class GLBrushStroke | 10 | // Class GLBrushStroke |
12 | // representation a sequence points (polyline) created by brush tool. | 11 | // representation a sequence points (polyline) created by brush tool. |
diff --git a/js/helper-classes/RDGE/GLSubpath.js b/js/helper-classes/RDGE/GLSubpath.js index 25b12093..2e4c1631 100644 --- a/js/helper-classes/RDGE/GLSubpath.js +++ b/js/helper-classes/RDGE/GLSubpath.js | |||
@@ -155,6 +155,32 @@ function GLSubpath() { | |||
155 | return retAnchor; | 155 | return retAnchor; |
156 | } | 156 | } |
157 | 157 | ||
158 | this.deselectAnchorPoint = function(){ | ||
159 | this._selectedAnchorIndex = -1; | ||
160 | } | ||
161 | |||
162 | this.reversePath = function() { | ||
163 | var revAnchors = []; | ||
164 | var numAnchors = this._Anchors.length; | ||
165 | var lastIndex = numAnchors-1; | ||
166 | if (lastIndex<0){ | ||
167 | return; //cannot reverse empty path | ||
168 | } | ||
169 | for (var i=lastIndex;i>=0;i--) { | ||
170 | var newAnchor = new GLAnchorPoint(); | ||
171 | var oldAnchor = this._Anchors[i]; | ||
172 | newAnchor.setPos(oldAnchor.getPosX(),oldAnchor.getPosY(),oldAnchor.getPosZ()); | ||
173 | newAnchor.setPrevPos(oldAnchor.getNextX(),oldAnchor.getNextY(),oldAnchor.getNextZ()); | ||
174 | newAnchor.setNextPos(oldAnchor.getPrevX(),oldAnchor.getPrevY(),oldAnchor.getPrevZ()); | ||
175 | revAnchors.push(newAnchor); | ||
176 | } | ||
177 | if (this._selectedAnchorIndex >= 0){ | ||
178 | this._selectedAnchorIndex = (numAnchors-1) - this._selectedAnchorIndex; | ||
179 | } | ||
180 | this._Anchors = revAnchors; | ||
181 | this._dirty=true; | ||
182 | } | ||
183 | |||
158 | //remove all the anchor points | 184 | //remove all the anchor points |
159 | this.clearAllAnchors = function () { | 185 | this.clearAllAnchors = function () { |
160 | this._Anchors = []; | 186 | this._Anchors = []; |
@@ -220,7 +246,10 @@ function GLSubpath() { | |||
220 | //check whether the point is within the radius distance from the curve represented as a polyline in _samples | 246 | //check whether the point is within the radius distance from the curve represented as a polyline in _samples |
221 | //return the parametric distance along the curve if there is an intersection, else return null | 247 | //return the parametric distance along the curve if there is an intersection, else return null |
222 | //will assume that the BBox test is performed outside this function | 248 | //will assume that the BBox test is performed outside this function |
223 | 249 | if (endIndex<startIndex){ | |
250 | //go from startIndex to the end of the samples | ||
251 | endIndex = this._samples.length/3; | ||
252 | } | ||
224 | for (var i=startIndex; i<endIndex; i++){ | 253 | for (var i=startIndex; i<endIndex; i++){ |
225 | var seg0 = Vector.create([this._samples[3*i], this._samples[3*i + 1], this._samples[3*i + 2]]); | 254 | var seg0 = Vector.create([this._samples[3*i], this._samples[3*i + 1], this._samples[3*i + 2]]); |
226 | var j=i+1; | 255 | var j=i+1; |
@@ -334,6 +363,23 @@ function GLSubpath() { | |||
334 | return true; | 363 | return true; |
335 | } | 364 | } |
336 | 365 | ||
366 | this.pickAnchor = function (pickX, pickY, pickZ, radius) { | ||
367 | var numAnchors = this._Anchors.length; | ||
368 | var selAnchorIndex = -1; | ||
369 | var retCode = this.SEL_NONE; | ||
370 | var radSq = radius * radius; | ||
371 | var minDistance = Infinity; | ||
372 | for (var i = 0; i < numAnchors; i++) { | ||
373 | var distSq = this._Anchors[i].getDistanceSq(pickX, pickY, pickZ); | ||
374 | //check the anchor point | ||
375 | if (distSq < minDistance && distSq < radSq) { | ||
376 | selAnchorIndex = i; | ||
377 | minDistance = distSq; | ||
378 | } | ||
379 | }//for every anchor i | ||
380 | return selAnchorIndex; | ||
381 | } | ||
382 | |||
337 | //pick the path point closest to the specified location, return null if some anchor point (or its handles) is within radius, else return the parameter distance | 383 | //pick the path point closest to the specified location, return null if some anchor point (or its handles) is within radius, else return the parameter distance |
338 | this.pickPath = function (pickX, pickY, pickZ, radius) { | 384 | this.pickPath = function (pickX, pickY, pickZ, radius) { |
339 | var numAnchors = this._Anchors.length; | 385 | var numAnchors = this._Anchors.length; |
@@ -386,6 +432,7 @@ function GLSubpath() { | |||
386 | if (this._isWithinBoundingBox(point, controlPoints, radius)) { | 432 | if (this._isWithinBoundingBox(point, controlPoints, radius)) { |
387 | //var intersectParam = this._checkIntersection(controlPoints, 0.0, 1.0, point, radius); | 433 | //var intersectParam = this._checkIntersection(controlPoints, 0.0, 1.0, point, radius); |
388 | var intersectParam = this._checkIntersectionWithSamples(this._anchorSampleIndex[i], this._anchorSampleIndex[nextIndex], point, radius); | 434 | var intersectParam = this._checkIntersectionWithSamples(this._anchorSampleIndex[i], this._anchorSampleIndex[nextIndex], point, radius); |
435 | console.log("intersectParam:"+intersectParam); | ||
389 | if (intersectParam){ | 436 | if (intersectParam){ |
390 | retCode = retCode | this.SEL_PATH; | 437 | retCode = retCode | this.SEL_PATH; |
391 | retParam = intersectParam-i; //make the retParam go from 0 to 1 | 438 | retParam = intersectParam-i; //make the retParam go from 0 to 1 |
@@ -1137,6 +1184,7 @@ function GLSubpath() { | |||
1137 | this.buildBuffers = function () { | 1184 | this.buildBuffers = function () { |
1138 | if (this._useCanvasDrawing) | 1185 | if (this._useCanvasDrawing) |
1139 | return; | 1186 | return; |
1187 | |||
1140 | // get the world | 1188 | // get the world |
1141 | var world = this.getWorld(); | 1189 | var world = this.getWorld(); |
1142 | if (!world) throw ("null world in GLSubpath buildBuffers"); | 1190 | if (!world) throw ("null world in GLSubpath buildBuffers"); |
@@ -1368,7 +1416,7 @@ function GLSubpath() { | |||
1368 | ctx.strokeStyle = "black"; | 1416 | ctx.strokeStyle = "black"; |
1369 | if (this._strokeColor) | 1417 | if (this._strokeColor) |
1370 | ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor ); | 1418 | ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor ); |
1371 | ctx.fillStyle = "blue"; | 1419 | ctx.fillStyle = "white"; |
1372 | if (this._fillColor) | 1420 | if (this._fillColor) |
1373 | ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); | 1421 | ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); |
1374 | var lineCap = ['butt','round','square' |