diff options
Diffstat (limited to 'js/helper-classes')
-rwxr-xr-x | js/helper-classes/3D/snap-manager.js | 6 | ||||
-rwxr-xr-x | js/helper-classes/3D/view-utils.js | 3 | ||||
-rwxr-xr-x | js/helper-classes/RDGE/GLBrushStroke.js | 113 | ||||
-rwxr-xr-x | js/helper-classes/RDGE/GLCircle.js | 140 | ||||
-rwxr-xr-x | js/helper-classes/RDGE/GLGeomObj.js | 4 | ||||
-rwxr-xr-x | js/helper-classes/RDGE/GLLine.js | 67 | ||||
-rwxr-xr-x | js/helper-classes/RDGE/GLRectangle.js | 81 | ||||
-rwxr-xr-x | js/helper-classes/RDGE/GLWorld.js | 2 |
8 files changed, 261 insertions, 155 deletions
diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js index 94202dc5..372be345 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js | |||
@@ -597,7 +597,8 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { | |||
597 | } | 597 | } |
598 | 598 | ||
599 | // TODO - Don't traverse components' children | 599 | // TODO - Don't traverse components' children |
600 | if(elt.elementModel && elt.elementModel.isComponent) | 600 | // if(elt.elementModel && elt.elementModel.isComponent) |
601 | if(elt.nodeName.toLowerCase() === "svg" || (elt.elementModel && (elt.elementModel.isComponent || (elt.elementModel.selection === "SVG")))) | ||
601 | { | 602 | { |
602 | return; | 603 | return; |
603 | } | 604 | } |
@@ -1007,7 +1008,8 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { | |||
1007 | } | 1008 | } |
1008 | 1009 | ||
1009 | // TODO - Don't traverse components' children | 1010 | // TODO - Don't traverse components' children |
1010 | if(elt.elementModel && elt.elementModel.isComponent) | 1011 | // if(elt.elementModel && elt.elementModel.isComponent) |
1012 | if(elt.nodeName.toLowerCase() === "svg" || (elt.elementModel && (elt.elementModel.isComponent || (elt.elementModel.selection === "SVG")))) | ||
1011 | { | 1013 | { |
1012 | return; | 1014 | return; |
1013 | } | 1015 | } |
diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index bedda8bf..c1f59397 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js | |||
@@ -580,7 +580,8 @@ exports.ViewUtils = Montage.create(Component, { | |||
580 | if (elt.style.height) h = MathUtils.styleToNumber(elt.style.height); | 580 | if (elt.style.height) h = MathUtils.styleToNumber(elt.style.height); |
581 | } | 581 | } |
582 | 582 | ||
583 | if (elt instanceof SVGSVGElement) { | 583 | // if (elt instanceof SVGSVGElement) { |
584 | if(elt.nodeName.toLowerCase() === "svg") { | ||
584 | if(w instanceof SVGAnimatedLength) | 585 | if(w instanceof SVGAnimatedLength) |
585 | w = w.animVal.value; | 586 | w = w.animVal.value; |
586 | if(h instanceof SVGAnimatedLength) | 587 | if(h instanceof SVGAnimatedLength) |
diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js index 5d773c2d..c1469977 100755 --- a/js/helper-classes/RDGE/GLBrushStroke.js +++ b/js/helper-classes/RDGE/GLBrushStroke.js | |||
@@ -31,6 +31,8 @@ function GLBrushStroke() { | |||
31 | //stroke information | 31 | //stroke information |
32 | this._strokeWidth = 0.0; | 32 | this._strokeWidth = 0.0; |
33 | this._strokeColor = [0.4, 0.4, 0.4, 1.0]; | 33 | this._strokeColor = [0.4, 0.4, 0.4, 1.0]; |
34 | this._secondStrokeColor = this._strokeColor; | ||
35 | this._strokeHardness = 100; | ||
34 | this._strokeMaterial; | 36 | this._strokeMaterial; |
35 | this._strokeStyle = "Solid"; | 37 | this._strokeStyle = "Solid"; |
36 | 38 | ||
@@ -39,7 +41,7 @@ function GLBrushStroke() { | |||
39 | this._WETNESS_FACTOR = 0.25; | 41 | this._WETNESS_FACTOR = 0.25; |
40 | 42 | ||
41 | //prevent extremely long paths that can take a long time to render | 43 | //prevent extremely long paths that can take a long time to render |
42 | this._MAX_ALLOWED_SAMPLES = 500; | 44 | this._MAX_ALLOWED_SAMPLES = 5000; |
43 | 45 | ||
44 | //drawing context | 46 | //drawing context |
45 | this._world = null; | 47 | this._world = null; |
@@ -106,6 +108,8 @@ function GLBrushStroke() { | |||
106 | this.setStrokeMaterial = function (m) { this._strokeMaterial = m; } | 108 | this.setStrokeMaterial = function (m) { this._strokeMaterial = m; } |
107 | this.getStrokeColor = function () { return this._strokeColor; } | 109 | this.getStrokeColor = function () { return this._strokeColor; } |
108 | this.setStrokeColor = function (c) { this._strokeColor = c; } | 110 | this.setStrokeColor = function (c) { this._strokeColor = c; } |
111 | this.setSecondStrokeColor = function(c){this._secondStrokeColor=c;} | ||
112 | this.setStrokeHardness = function(h){this._strokeHardness=h;} | ||
109 | this.getStrokeStyle = function () { return this._strokeStyle; } | 113 | this.getStrokeStyle = function () { return this._strokeStyle; } |
110 | this.setStrokeStyle = function (s) { this._strokeStyle = s; } | 114 | this.setStrokeStyle = function (s) { this._strokeStyle = s; } |
111 | 115 | ||
@@ -133,13 +137,14 @@ function GLBrushStroke() { | |||
133 | this._Points[i][2]+=tz; | 137 | this._Points[i][2]+=tz; |
134 | } | 138 | } |
135 | } | 139 | } |
136 | 140 | ||
137 | this.computeMetaGeometry = function(){ | 141 | this.computeMetaGeometry = function(){ |
138 | if (this._dirty){ | 142 | if (this._dirty){ |
139 | var numPoints = this._Points.length; | 143 | var numPoints = this._Points.length; |
140 | 144 | ||
141 | //**** add samples to the path if needed...linear interpolation for now | 145 | //**** add samples to the path if needed...linear interpolation for now |
142 | if (numPoints>1) { | 146 | //if (numPoints>1) { |
147 | if (0){ | ||
143 | var threshold = this._WETNESS_FACTOR*this._strokeWidth; | 148 | var threshold = this._WETNESS_FACTOR*this._strokeWidth; |
144 | var prevPt = this._Points[0]; | 149 | var prevPt = this._Points[0]; |
145 | var prevIndex = 0; | 150 | var prevIndex = 0; |
@@ -171,6 +176,44 @@ function GLBrushStroke() { | |||
171 | } | 176 | } |
172 | } | 177 | } |
173 | 178 | ||
179 | //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation | ||
180 | if (numPoints>1) { | ||
181 | var numInsertedPoints = 0; | ||
182 | var threshold = 5;//0.25*this._strokeWidth; //this determines whether a segment between two sample is too long | ||
183 | var prevPt = this._Points[0]; | ||
184 | for (var i=1;i<numPoints;i++){ | ||
185 | var pt = this._Points[i]; | ||
186 | var diff = [pt[0]-prevPt[0], pt[1]-prevPt[1]]; | ||
187 | var distance = Math.sqrt(diff[0]*diff[0]+diff[1]*diff[1]); | ||
188 | if (distance>threshold){ | ||
189 | //build the control polygon for the Catmull-Rom spline (prev. 2 points and next 2 points) | ||
190 | var prev = (i===1) ? i-1 : i-2; | ||
191 | var next = (i===numPoints-1) ? i : i+1; | ||
192 | var ctrlPts = [this._Points[prev], this._Points[i-1], this._Points[i], this._Points[next]]; | ||
193 | //insert points along the prev. to current point | ||
194 | var numNewPoints = Math.floor(distance/threshold); | ||
195 | for (var j=0;j<numNewPoints;j++){ | ||
196 | var param = (j+1)/(numNewPoints+1); | ||
197 | var newpt = this._CatmullRomSplineInterpolate(ctrlPts, param); | ||
198 | //insert new point before point i | ||
199 | this._Points.splice(i, 0, newpt); | ||
200 | i++; | ||
201 | numInsertedPoints++; | ||
202 | } | ||
203 | this._dirty=true; | ||
204 | } | ||
205 | prevPt=pt; | ||
206 | //update numPoints to match the new length | ||
207 | numPoints = this._Points.length; | ||
208 | |||
209 | //end this function if the numPoints has gone above the max. size specified | ||
210 | if (numPoints> this._MAX_ALLOWED_SAMPLES){ | ||
211 | console.log("leaving the resampling because numPoints is greater than limit:"+this._MAX_ALLOWED_SAMPLES); | ||
212 | break; | ||
213 | } | ||
214 | } | ||
215 | console.log("Inserted "+numInsertedPoints+" additional CatmullRom points"); | ||
216 | } | ||
174 | // *** compute the bounding box ********* | 217 | // *** compute the bounding box ********* |
175 | this._BBoxMin = [Infinity, Infinity, Infinity]; | 218 | this._BBoxMin = [Infinity, Infinity, Infinity]; |
176 | this._BBoxMax = [-Infinity, -Infinity, -Infinity]; | 219 | this._BBoxMax = [-Infinity, -Infinity, -Infinity]; |
@@ -331,7 +374,7 @@ function GLBrushStroke() { | |||
331 | } | 374 | } |
332 | */ | 375 | */ |
333 | 376 | ||
334 | 377 | /* | |
335 | var R2 = this._strokeWidth; | 378 | var R2 = this._strokeWidth; |
336 | var R = R2*0.5; | 379 | var R = R2*0.5; |
337 | var hardness = 0; //for a pencil, this is always 1 //TODO get hardness parameter from user interface | 380 | var hardness = 0; //for a pencil, this is always 1 //TODO get hardness parameter from user interface |
@@ -359,6 +402,50 @@ function GLBrushStroke() { | |||
359 | //ctx.globalCompositeOperation = 'source-in'; | 402 | //ctx.globalCompositeOperation = 'source-in'; |
360 | //ctx.rect(x-R, y-R, R2, R2); | 403 | //ctx.rect(x-R, y-R, R2, R2); |
361 | } | 404 | } |
405 | */ | ||
406 | |||
407 | var numTraces = this._strokeWidth; | ||
408 | var halfNumTraces = numTraces/2; | ||
409 | var deltaDisplacement = [1,0];//[this._strokeWidth/numTraces, 0]; //a horizontal line brush | ||
410 | var startPos = [-this._strokeWidth/2,0]; | ||
411 | for (var t=0;t<numTraces;t++){ | ||
412 | var disp = [startPos[0]+t*deltaDisplacement[0], startPos[1]+t*deltaDisplacement[1]]; | ||
413 | //ctx.globalCompositeOperation = 'source-over'; | ||
414 | var distFromMiddle = Math.abs(halfNumTraces-t); | ||
415 | var alphaVal = 1.0 - (100-this._strokeHardness)*(distFromMiddle/halfNumTraces)/100; | ||
416 | ctx.save(); | ||
417 | ctx.lineWidth=this._strokeWidth/10;//4; | ||
418 | if (ctx.lineWidth<2) | ||
419 | ctx.lineWidth=2; | ||
420 | if (t===numTraces-1){ | ||
421 | ctx.lineWidth = 1; | ||
422 | } | ||
423 | ctx.lineJoin="bevel"; | ||
424 | ctx.lineCap="butt"; | ||
425 | if (t<numTraces/2) | ||
426 | ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")"; | ||
427 | else | ||
428 | ctx.strokeStyle="rgba("+parseInt(255*this._secondStrokeColor[0])+","+parseInt(255*this._secondStrokeColor[1])+","+parseInt(255*this._secondStrokeColor[2])+","+alphaVal+")"; | ||
429 | ctx.translate(disp[0],disp[1]); | ||
430 | ctx.beginPath(); | ||
431 | ctx.moveTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]); | ||
432 | for (var i=0;i<numPoints;i++){ | ||
433 | ctx.lineTo(this._Points[i][0]-bboxMin[0], this._Points[i][1]-bboxMin[1]); | ||
434 | } | ||
435 | ctx.stroke(); | ||
436 | ctx.restore(); | ||
437 | } | ||
438 | |||
439 | /* | ||
440 | ctx.beginPath(); | ||
441 | ctx.moveTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]); | ||
442 | for (var i=1;i<numPoints;i++){ | ||
443 | ctx.lineTo(this._Points[i][0]-bboxMin[0], this._Points[i][1]-bboxMin[1]); | ||
444 | } | ||
445 | ctx.lineWidth=1.0; | ||
446 | ctx.strokeStyle = "black"; | ||
447 | ctx.stroke(); | ||
448 | */ | ||
362 | 449 | ||
363 | ctx.restore(); | 450 | ctx.restore(); |
364 | } //render() | 451 | } //render() |
@@ -394,4 +481,20 @@ function GLBrushStroke() { | |||
394 | return true; | 481 | return true; |
395 | } |