aboutsummaryrefslogtreecommitdiff
path: root/js/lib
diff options
context:
space:
mode:
authorEric Guzman2012-04-30 13:48:43 -0700
committerEric Guzman2012-04-30 13:48:43 -0700
commit23d8efd4ed9e8fd43f516595009679fb44c8096d (patch)
tree7d5be06e6417102702a49ece24fca82528aced7a /js/lib
parentae94b22c27b9b155e94bf140631e7faf8f55c6c0 (diff)
parentc8fac64d4ad8ac18744a17a5e0f0d17204355fd6 (diff)
downloadninja-23d8efd4ed9e8fd43f516595009679fb44c8096d.tar.gz
Merge branch 'refs/heads/master' into CSSPanelUpdates
Diffstat (limited to 'js/lib')
-rwxr-xr-xjs/lib/NJUtils.js14
-rwxr-xr-xjs/lib/geom/brush-stroke.js50
-rwxr-xr-xjs/lib/geom/circle.js4
-rwxr-xr-xjs/lib/geom/rectangle.js20
4 files changed, 61 insertions, 27 deletions
diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js
index f6284b6c..f2785081 100755
--- a/js/lib/NJUtils.js
+++ b/js/lib/NJUtils.js
@@ -96,10 +96,10 @@ exports.NJUtils = Object.create(Object.prototype, {
96 ///// TODO: find a different place for this function 96 ///// TODO: find a different place for this function
97 makeElementModel: { 97 makeElementModel: {
98 value: function(el, selection, controller, isShape) { 98 value: function(el, selection, controller, isShape) {
99 //el.elementModel = Montage.create(ElementModel).initialize(el.nodeName, selection, controller, isShape);
100
99 var p3d = Montage.create(Properties3D); 101 var p3d = Montage.create(Properties3D);
100 if(selection === "Stage") { 102
101 p3d.init(el, true);
102 }
103 var shapeProps = null; 103 var shapeProps = null;
104 var pi = controller + "Pi"; 104 var pi = controller + "Pi";
105 105
@@ -145,6 +145,7 @@ exports.NJUtils = Object.create(Object.prototype, {
145 isShape: { value: isShape} 145 isShape: { value: isShape}
146 }); 146 });
147 147
148
148 } 149 }
149 }, 150 },
150 151
@@ -169,15 +170,12 @@ exports.NJUtils = Object.create(Object.prototype, {
169 break; 170 break;
170 case "canvas": 171 case "canvas":
171 isShape = el.getAttribute("data-RDGE-id"); 172 isShape = el.getAttribute("data-RDGE-id");
172 if(isShape) 173 if(isShape) {
173 {
174 // TODO - Need more info about the shape 174 // TODO - Need more info about the shape
175 selection = "canvas"; 175 selection = "canvas";
176 controller = "shape"; 176 controller = "shape";
177 isShape = true; 177 isShape = true;
178 } 178 } else {
179 else
180 {
181 selection = "canvas"; 179 selection = "canvas";
182 controller = "canvas"; 180 controller = "canvas";
183 } 181 }
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index efd21c4a..1fae0c1d 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -117,7 +117,7 @@ var BrushStroke = function GLBrushStroke() {
117 }; 117 };
118 118
119 this.getPoint = function (index) { 119 this.getPoint = function (index) {
120 return this._Points[index]; 120 return this._Points[index].slice(0);
121 }; 121 };
122 122
123 this.addPoint = function (pt) { 123 this.addPoint = function (pt) {
@@ -399,7 +399,7 @@ var BrushStroke = function GLBrushStroke() {
399 399
400 // ***** unproject all the centered points and convert them to 2D (plane space)***** 400 // ***** unproject all the centered points and convert them to 2D (plane space)*****
401 // (undo the projection step performed by the browser) 401 // (undo the projection step performed by the browser)
402 localPoint = this._unprojectPt(localPoint, 1400); //todo get the perspective distance from the canvas 402 //localPoint = this._unprojectPt(localPoint, 1400); //todo get the perspective distance from the canvas
403 localPoint = MathUtils.transformPoint(localPoint, this._planeMatInv); 403 localPoint = MathUtils.transformPoint(localPoint, this._planeMatInv);
404 404
405 //add to the list of local points 405 //add to the list of local points
@@ -568,17 +568,17 @@ var BrushStroke = function GLBrushStroke() {
568 } 568 }
569 ctx.save(); 569 ctx.save();
570 ctx.clearRect(0, 0, bboxWidth, bboxHeight); 570 ctx.clearRect(0, 0, bboxWidth, bboxHeight);
571 this.drawToContext(ctx, 0, 0, false); 571 this.drawToContext(ctx, false);
572 ctx.restore(); 572 ctx.restore();
573 } //this.render() 573 } //this.render()
574 574
575 this.drawToContext = function(ctx, origX, origY, drawStageWorldPts){ 575 this.drawToContext = function(ctx, drawStageWorldPts, stageWorldDeltaX, stageWorldDeltaY, stageWorldToScreenMat){
576 var points = this._LocalPoints; 576 var points = this._LocalPoints;
577 if (drawStageWorldPts){ 577 if (drawStageWorldPts){ //this is usually true when we're drawing the brush stroke on the stage (no canvas yet)
578 points = this._Points; 578 points = this._Points;
579 } 579 }
580 var numPoints = points.length; 580 var numPoints = points.length;
581 581 var tempP, p;
582 if (this._strokeUseCalligraphic) { 582 if (this._strokeUseCalligraphic) {
583 //build the stamp for the brush stroke 583 //build the stamp for the brush stroke
584 var t=0; 584 var t=0;
@@ -623,9 +623,23 @@ var BrushStroke = function GLBrushStroke() {
623 //ctx.strokeStyle="rgba("+parseInt(255*currStrokeColor[0])+","+parseInt(255*currStrokeColor[1])+","+parseInt(255*currStrokeColor[2])+","+alphaVal+")"; 623 //ctx.strokeStyle="rgba("+parseInt(255*currStrokeColor[0])+","+parseInt(255*currStrokeColor[1])+","+parseInt(255*currStrokeColor[2])+","+alphaVal+")";
624 ctx.translate(disp[0],disp[1]); 624 ctx.translate(disp[0],disp[1]);
625 ctx.beginPath(); 625 ctx.beginPath();
626 ctx.moveTo(points[0][0]-origX, points[0][1]-origY); 626 if (drawStageWorldPts) {
627 tempP = points[0].slice(0);
628 tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY;
629 p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
630 } else {
631 p = points[0];
632 }
633 ctx.moveTo(p[0],p[1]);
627 for (var i=0;i<numPoints;i++){ 634 for (var i=0;i<numPoints;i++){
628 ctx.lineTo(points[i][0]-origX, points[i][1]-origY); 635 if (drawStageWorldPts) {
636 tempP = points[i].slice(0);
637 tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY;
638 p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
639 } else {
640 p = points[i];
641 }
642 ctx.lineTo(p[0],p[1]);
629 } 643 }
630 ctx.stroke(); 644 ctx.stroke();
631 ctx.restore(); 645 ctx.restore();
@@ -641,13 +655,27 @@ var BrushStroke = function GLBrushStroke() {
641 ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")"; 655 ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
642 for (var l=0;l<numlayers;l++){ 656 for (var l=0;l<numlayers;l++){
643 ctx.beginPath(); 657 ctx.beginPath();
644 ctx.moveTo(points[0][0]-origX, points[0][1]-origY); 658 if (drawStageWorldPts) {
659 tempP = points[0].slice(0);
660 tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY;
661 p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
662 } else {
663 p = points[0];
664 }
665 ctx.moveTo(p[0],p[1]);
645 if (numPoints===1){ 666 if (numPoints===1){
646 //display a tiny segment as a single point 667 //display a tiny segment as a single point
647 ctx.lineTo(points[0][0]-origX, points[0][1]-origY+0.01); 668 ctx.lineTo(p[0],p[1]+0.01);
648 } 669 }
649 for (var i=1;i<numPoints;i++){ 670 for (var i=1;i<numPoints;i++){
650 ctx.lineTo(points[i][0]-origX, points[i][1]-origY); 671 if (drawStageWorldPts) {
672 tempP = points[i].slice(0);
673 tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY;
674 p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
675 } else {
676 p = points[i];
677 }
678 ctx.lineTo(p[0],p[1]);
651 } 679 }
652 ctx.lineWidth=2*l+minStrokeWidth; 680 ctx.lineWidth=2*l+minStrokeWidth;
653 ctx.stroke(); 681 ctx.stroke();
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 1073c2db..218dcfa6 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -457,9 +457,9 @@ var Circle = function GLCircle() {
457 if(this._fillColor.gradientMode) { 457 if(this._fillColor.gradientMode) {
458 if(this._fillColor.gradientMode === "radial") { 458 if(this._fillColor.gradientMode === "radial") {
459 gradient = ctx.createRadialGradient(xCtr, yCtr, 0, 459 gradient = ctx.createRadialGradient(xCtr, yCtr, 0,
460 xCtr, yCtr, Math.max(yScale, xScale)); 460 xCtr, yCtr, Math.max(this._width, this._height)/2);
461 } else { 461 } else {
462 gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); 462 gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2);
463 } 463 }
464 colors = this._fillColor.color; 464 colors = this._fillColor.color;
465 465
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 91b1d426..fcd1c1bd 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -356,7 +356,9 @@ var Rectangle = function GLRectangle() {
356 // various declarations 356 // various declarations
357 var pt, rad, ctr, startPt, bPts; 357 var pt, rad, ctr, startPt, bPts;
358 var width = Math.round(this.getWidth()), 358 var width = Math.round(this.getWidth()),
359 height = Math.round(this.getHeight()); 359 height = Math.round(this.getHeight()),
360 hw = 0.5*width,
361 hh = 0.5*height;
360 362
361 pt = [inset, inset]; // top left corner 363 pt = [inset, inset]; // top left corner
362 364
@@ -364,6 +366,12 @@ var Rectangle = function GLRectangle() {
364 var trRad = this._trRadius; 366 var trRad = this._trRadius;
365 var blRad = this._blRadius; 367 var blRad = this._blRadius;
366 var brRad = this._brRadius; 368 var brRad = this._brRadius;
369 // limit the radii to half the rectangle dimension
370 var minDimen = hw < hh ? hw : hh;
371 if (tlRad > minDimen) tlRad = minDimen;
372 if (blRad > minDimen) blRad = minDimen;
373 if (brRad > minDimen) brRad = minDimen;
374 if (trRad > minDimen) trRad = minDimen;
367 375
368 if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) { 376 if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) {
369 ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset); 377 ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset);
@@ -452,13 +460,13 @@ var Rectangle = function GLRectangle() {
452 // render the fill 460 // render the fill
453 ctx.beginPath(); 461 ctx.beginPath();
454 if (this._fillColor) { 462 if (this._fillColor) {
455 inset = Math.ceil( lw ) + 0.5; 463 inset = Math.ceil( lw ) - 0.5;
456 464
457 if(this._fillColor.gradientMode) { 465 if(this._fillColor.gradientMode) {
458 if(this._fillColo