aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rwxr-xr-xjs/components/tools-properties/pen-properties.reel/pen-properties.js27
-rwxr-xr-xjs/data/tools-data.js4
-rwxr-xr-xjs/helper-classes/3D/math-utils.js11
-rwxr-xr-xjs/lib/geom/brush-stroke.js93
-rwxr-xr-xjs/lib/geom/sub-path.js308
-rwxr-xr-xjs/mediators/keyboard-mediator.js7
-rw-r--r--js/tools/BrushTool.js14
-rwxr-xr-xjs/tools/PenTool.js355
8 files changed, 559 insertions, 260 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..c37359e1 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
10var PenProperties = exports.PenProperties = Montage.create(ToolProperties, { 10var 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,22 @@ 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 NJevent("penSubToolChange");
77 }
78 },
79
53 draw: { 80 draw: {
54 enumerable: false, 81 enumerable: false,
55 value: function () { 82 value: function () {
diff --git a/js/data/tools-data.js b/js/data/tools-data.js
index 05455efe..138f9f4d 100755
--- a/js/data/tools-data.js
+++ b/js/data/tools-data.js
@@ -104,7 +104,7 @@ exports.ToolsData = Montage.create(Montage, {
104 "properties": "penProperties", 104 "properties": "penProperties",
105 "spriteSheet": true, 105 "spriteSheet": true,
106 "action": "PenTool", 106 "action": "PenTool",
107 "toolTip": "Pen Tool", 107 "toolTip": "Pen Tool (P)",
108 "cursor": "auto", 108 "cursor": "auto",
109 "lastInGroup": false, 109 "lastInGroup": false,
110 "container": false, 110 "container": false,
@@ -165,7 +165,7 @@ exports.ToolsData = Montage.create(Montage, {
165 "properties": "brushProperties", 165 "properties": "brushProperties",
166 "spriteSheet": true, 166 "spriteSheet": true,
167 "action": "BrushTool", 167 "action": "BrushTool",
168 "toolTip": "Brush Tool", 168 "toolTip": "Brush Tool (B)",
169 "cursor": "url('images/tools/brush_down.png') 9 17, default", 169 "cursor": "url('images/tools/brush_down.png') 9 17, default",
170 "lastInGroup": false, 170 "lastInGroup": false,
171 "container": false, 171 "container": false,
diff --git a/js/helper-classes/3D/math-utils.js b/js/helper-classes/3D/math-utils.js
index 2f0283a9..35ee8112 100755
--- a/js/helper-classes/3D/math-utils.js
+++ b/js/helper-classes/3D/math-utils.js
@@ -928,17 +928,18 @@ var MathUtilsClass = exports.MathUtilsClass = Object.create(Object.prototype, {
928 return 0; 928 return 0;
929 } 929 }
930 //TODO testing...remove this block 930 //TODO testing...remove this block
931 console.log("getAxisAngleBetween3DVectors Angle: "+angle);
932 if (isNaN(angle)){ 931 if (isNaN(angle)){
933 console.log("getAxisAngleBetween3DVectors Angle is NaN"); 932 console.log("Warning! getAxisAngleBetween3DVectors Angle is NaN");
934 } 933 }
935 //TODO end testing block 934 //TODO end testing block
936 //optionally, if axis is provided, create the axis of rotation as well 935 //optionally, if axis is provided, create the axis of rotation as well
937 var rotAxis = VecUtils.vecCross(3, v1n, v2n); 936 var rotAxis = VecUtils.vecCross(3, v1n, v2n);
938 rotAxis = VecUtils.vecNormalize(3, rotAxis, 1); 937 rotAxis = VecUtils.vecNormalize(3, rotAxis, 1);
939 axis[0] = rotAxis[0]; 938 if (axis){
940 axis[1] = rotAxis[1]; 939 axis[0] = rotAxis[0];
941 axis[2] = rotAxis[2]; 940 axis[1] = rotAxis[1];
941 axis[2] = rotAxis[2];
942 }
942 return angle; 943 return angle;
943 } 944 }
944 }, 945 },
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index 6facdd5d..09a7023c 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -264,13 +264,67 @@ var BrushStroke = function GLBrushStroke() {
264 this._strokeStyle = s; 264 this._strokeStyle = s;
265 }; 265 };
266 266
267 this.setWidth = function () { 267 this.setWidth = function (newW) {
268 if (newW<1) {
269 newW=1; //clamp minimum width to 1
270 }
271
272 //scale the contents of this subpath to lie within this width
273 //determine the scale factor by comparing with the old width
274 var oldWidth = this._BBoxMax[0]-this._BBoxMin[0];
275 if (oldWidth<1) {
276 oldWidth=1;
277 }
278
279 var scaleX = newW/oldWidth;
280 if (scaleX===1) {
281 return; //no need to do anything
282 }
283
284 //scale the local point positions such that the width of the bbox is the newW
285 var origX = this._BBoxMin[0];
286 var numPoints = this._LocalPoints.length;
287 for (var i=0;i<numPoints;i++){
288 //compute the distance from the bboxMin
289 var oldW = this._LocalPoints[i][0] - origX;
290 this._LocalPoints[i] = [(origX + oldW*scaleX),this._LocalPoints[i][1],this._LocalPoints[i][2]];
291
292 oldW = this._OrigLocalPoints[i][0] - origX;
293 this._OrigLocalPoints[i] = [(origX + oldW*scaleX),this._OrigLocalPoints[i][1],this._OrigLocalPoints[i][2]];
294 }
295 this._isDirty = true;
296 };
297
298 this.setHeight = function (newH) {
299 if (newH<1) {
300 newH=1; //clamp minimum width to 1
301 }
268 302
269 };//NO-OP for now 303 //scale the contents of this subpath to lie within this height
304 //determine the scale factor by comparing with the old height
305 var oldHeight = this._BBoxMax[1]-this._BBoxMin[1];
306 if (oldHeight<1) {
307 oldHeight=1;
308 }
309
310 var scaleY = newH/oldHeight;
311 if (scaleY===1) {
312 return; //no need to do anything
313 }
270 314
271 this.setHeight = function () { 315 //scale the local point positions such that the width of the bbox is the newW
316 var origY = this._BBoxMin[1];
317 var numPoints = this._LocalPoints.length;
318 for (var i=0;i<numPoints;i++){
319 //compute the distance from the bboxMin
320 var oldH = this._LocalPoints[i][1] - origY;
321 this._LocalPoints[i] = [this._LocalPoints[i][0],(origY + oldH*scaleY),this._LocalPoints[i][2]];
272 322
273 };//NO-OP for now 323 oldH = this._OrigLocalPoints[i][1] - origY;
324 this._OrigLocalPoints[i] = [this._OrigLocalPoints[i][0],(origY + oldH*scaleY),this._OrigLocalPoints[i][2]];
325 }
326 this._isDirty = true;
327 };
274 328
275 this.getWidth = function() { 329 this.getWidth = function() {
276 if (this._isDirty){ 330 if (this._isDirty){
@@ -583,7 +637,7 @@ var BrushStroke = function GLBrushStroke() {
583 //build the stamp for the brush stroke 637 //build the stamp for the brush stroke
584 var t=0; 638 var t=0;
585 var numTraces = this._strokeWidth; 639 var numTraces = this._strokeWidth;
586 var halfNumTraces = numTraces/2; 640 var halfNumTraces = numTraces*0.5;
587 var opaqueRegionHalfWidth = 0.5*this._strokeHardness*numTraces*0.01; //the 0.01 is to convert the strokeHardness from [0,100] to [0,1] 641 var opaqueRegionHalfWidth = 0.5*this._strokeHardness*numTraces*0.01; //the 0.01 is to convert the strokeHardness from [0,100] to [0,1]
588 var maxTransparentRegionHalfWidth = halfNumTraces-opaqueRegionHalfWidth; 642 var maxTransparentRegionHalfWidth = halfNumTraces-opaqueRegionHalfWidth;
589 643
@@ -603,20 +657,23 @@ var BrushStroke = function GLBrushStroke() {
603 ctx.lineCap="butt"; 657 ctx.lineCap="butt";
604 ctx.globalCompositeOperation = 'source-over'; 658 ctx.globalCompositeOperation = 'source-over';
605 ctx.globalAlpha = this._strokeColor[3]; 659 ctx.globalAlpha = this._strokeColor[3];
606 //todo figure out the correct formula for the line width 660
607 ctx.lineWidth=2;
608 if (t===numTraces-1){
609 ctx.lineWidth = 1;
610 }
611 for (t=0;t<numTraces;t++){ 661 for (t=0;t<numTraces;t++){
612 var disp = [brushStamp[t][0], brushStamp[t][1]]; 662 var disp = [brushStamp[t][0], brushStamp[t][1]];
613 var alphaVal = 1.0; 663 var alphaVal = 1.0;
614 var distFromOpaqueRegion = Math.abs(t-halfNumTraces) - opaqueRegionHalfWidth; 664 var distFromOpaqueRegion = Math.abs(t-halfNumTraces) - opaqueRegionHalfWidth;
615 if (distFromOpaqueRegion>0) { 665 if (distFromOpaqueRegion>0) {
616 alphaVal = 1.0 - distFromOpaqueRegion/maxTransparentRegionHalfWidth; 666 var transparencyFactor = distFromOpaqueRegion/maxTransparentRegionHalfWidth;
617 alphaVal *= 1.0/ctx.lineWidth; //factor that accounts for lineWidth !== 1 667 alphaVal = 1.0 - transparencyFactor;//(transparencyFactor*transparencyFactor);//the square term produces nonlinearly varying alpha values
668 alphaVal *= 0.5; //factor that accounts for lineWidth == 2
618