aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--assets/canvas-runtime.js40
-rw-r--r--js/io/system/ninjalibrary.json2
-rwxr-xr-xjs/lib/geom/brush-stroke.js50
-rwxr-xr-xjs/lib/geom/circle.js4
-rwxr-xr-xjs/lib/geom/rectangle.js20
-rwxr-xr-xjs/mediators/drag-drop-mediator.js14
-rwxr-xr-xjs/mediators/keyboard-mediator.js2
-rwxr-xr-xjs/panels/Materials/materials-popup.reel/materials-popup.js21
-rw-r--r--js/panels/presets/default-animation-presets.js21
-rw-r--r--js/tools/BrushTool.js745
10 files changed, 517 insertions, 402 deletions
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index b2db2cbd..104c22cc 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -715,14 +715,22 @@ NinjaCvsRt.RuntimeRectangle = function ()
715 // various declarations 715 // various declarations
716 var pt, rad, ctr, startPt, bPts; 716 var pt, rad, ctr, startPt, bPts;
717 var width = Math.round(this._width), 717 var width = Math.round(this._width),
718 height = Math.round(this._height); 718 height = Math.round(this._height),
719 719 hw = 0.5*width,
720 pt = [inset, inset]; // top left corner 720 hh = 0.5*height;
721 721
722 var tlRad = this._tlRadius; //top-left radius 722 pt = [inset, inset]; // top left corner
723 var trRad = this._trRadius; 723
724 var blRad = this._blRadius; 724 var tlRad = this._tlRadius; //top-left radius
725 var brRad = this._brRadius; 725 var trRad = this._trRadius;
726 var blRad = this._blRadius;
727 var brRad = this._brRadius;
728 // limit the radii to half the rectangle dimension
729 var minDimen = hw < hh ? hw : hh;
730 if (tlRad > minDimen) tlRad = minDimen;
731 if (blRad > minDimen) blRad = minDimen;
732 if (brRad > minDimen) brRad = minDimen;
733 if (trRad > minDimen) trRad = minDimen;
726 734
727 var world = this.getWorld(); 735 var world = this.getWorld();
728 var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); 736 var vpw = world.getViewportWidth(), vph = world.getViewportHeight();
@@ -807,7 +815,7 @@ NinjaCvsRt.RuntimeRectangle = function ()
807 var lw = this._strokeWidth; 815 var lw = this._strokeWidth;
808 var w = world.getViewportWidth(), 816 var w = world.getViewportWidth(),
809 h = world.getViewportHeight(); 817 h = world.getViewportHeight();
810 818
811 var c, 819 var c,
812 inset, 820 inset,
813 gradient, 821 gradient,
@@ -819,13 +827,13 @@ NinjaCvsRt.RuntimeRectangle = function ()
819 // render the fill 827 // render the fill
820 ctx.beginPath(); 828 ctx.beginPath();
821 if (this._fillColor) { 829 if (this._fillColor) {
822 inset = Math.ceil( lw ) + 0.5; 830 inset = Math.ceil( lw ) - 0.5;
823 831
824 if(this._fillColor.gradientMode) { 832 if(this._fillColor.gradientMode) {
825 if(this._fillColor.gradientMode === "radial") { 833 if(this._fillColor.gradientMode === "radial") {
826 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset); 834 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2);
827 } else { 835 } else {
828 gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2); 836 gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
829 } 837 }
830 colors = this._fillColor.color; 838 colors = this._fillColor.color;
831 839
@@ -853,11 +861,11 @@ NinjaCvsRt.RuntimeRectangle = function ()
853 // render the stroke 861 // render the stroke
854 ctx.beginPath(); 862 ctx.beginPath();
855 if (this._strokeColor) { 863 if (this._strokeColor) {
856 inset = Math.ceil( 0.5*lw ) + 0.5; 864 inset = Math.ceil( 0.5*lw ) - 0.5;
857 865
858 if(this._strokeColor.gradientMode) { 866 if(this._strokeColor.gradientMode) {
859 if(this._strokeColor.gradientMode === "radial") { 867 if(this._strokeColor.gradientMode === "radial") {
860 gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h/2, w/2)-inset, w/2, h/2, Math.max(h/2, w/2)); 868 gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2);
861 } else { 869 } else {
862 gradient = ctx.createLinearGradient(0, h/2, w, h/2); 870 gradient = ctx.createLinearGradient(0, h/2, w, h/2);
863 } 871 }
@@ -1063,9 +1071,9 @@ NinjaCvsRt.RuntimeOval = function ()
1063 if(this._fillColor.gradientMode) { 1071 if(this._fillColor.gradientMode) {
1064 if(this._fillColor.gradientMode === "radial") { 1072 if(this._fillColor.gradientMode === "radial") {
1065 gradient = ctx.createRadialGradient(xCtr, yCtr, 0, 1073 gradient = ctx.createRadialGradient(xCtr, yCtr, 0,
1066 xCtr, yCtr, Math.max(yScale, xScale)); 1074 xCtr, yCtr, Math.max(this._width, this._height)/2);
1067 } else { 1075 } else {
1068 gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); 1076 gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2);
1069 } 1077 }
1070 colors = this._fillColor.color; 1078 colors = this._fillColor.color;
1071 1079
diff --git a/js/io/system/ninjalibrary.json b/js/io/system/ninjalibrary.json
index 285444b5..e236f2e0 100644
--- a/js/io/system/ninjalibrary.json
+++ b/js/io/system/ninjalibrary.json
@@ -1,6 +1,6 @@
1{ 1{
2 "libraries": [ 2 "libraries": [
3 {"name": "Montage", "path": "/node_modules/descriptor.json", "version": "0.7.0.0"}, 3 {"name": "Montage", "path": "/node_modules/descriptor.json", "version": "0.7.0.0"},
4 {"name": "RDGE", "path": "/assets/descriptor.json", "version": "0.5.4.0"} 4 {"name": "RDGE", "path": "/assets/descriptor.json", "version": "0.5.5.0"}
5 ] 5 ]
6} \ No newline at end of file 6} \ No newline at end of file
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]);