aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rwxr-xr-xjs/lib/geom/brush-stroke.js50
-rwxr-xr-xjs/mediators/keyboard-mediator.js2
-rw-r--r--js/panels/presets/default-animation-presets.js21
-rw-r--r--js/tools/BrushTool.js745
4 files changed, 459 insertions, 359 deletions
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/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js
index 79967799..f8934669 100755
--- a/js/mediators/keyboard-mediator.js
+++ b/js/mediators/keyboard-mediator.js
@@ -180,7 +180,7 @@ exports.KeyboardMediator = Montage.create(Component, {
180 } 180 }
181 181
182 // Shortcut for Eyedropper Tool is I 182 // Shortcut for Eyedropper Tool is I
183 if(evt.keyCode === Keyboard.I ) { 183 if(evt.keyCode === Keyboard.I && !(evt.ctrlKey || evt.metaKey)) {
184 evt.preventDefault(); 184 evt.preventDefault();
185 this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[12]}); 185 this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[12]});
186 return; 186 return;
diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js
index 578c1622..753b3365 100644
--- a/js/panels/presets/default-animation-presets.js
+++ b/js/panels/presets/default-animation-presets.js
@@ -52,7 +52,6 @@ exports.animationPresets = {
52 "-webkit-animation-direction": "normal", 52 "-webkit-animation-direction": "normal",
53 "-webkit-animation-timing-function": "ease", 53 "-webkit-animation-timing-function": "ease",
54 "-webkit-transform-style": "preserve-3d", 54 "-webkit-transform-style": "preserve-3d",
55 "-webkit-transform": "perspective(1000)",
56 "-webkit-animation-delay": "0s" 55 "-webkit-animation-delay": "0s"
57 } 56 }
58 },{ 57 },{
@@ -100,7 +99,6 @@ exports.animationPresets = {
100 "-webkit-animation-timing-function": "ease-out", 99 "-webkit-animation-timing-function": "ease-out",
101 "-webkit-transform-origin": "100% 50%", 100 "-webkit-transform-origin": "100% 50%",
102 "-webkit-transform-style": "preserve-3d", 101 "-webkit-transform-style": "preserve-3d",
103 "-webkit-transform": "perspective(1000)",
104 "-webkit-animation-delay": "0s" 102 "-webkit-animation-delay": "0s"
105 } 103 }
106 },{ 104 },{
@@ -109,31 +107,31 @@ exports.animationPresets = {
109 "keyText": "0%", 107 "keyText": "0%",
110 "styles": { 108 "styles": {
111 "opacity": "1", 109 "opacity": "1",
112 "-webkit-transform": "perspective(1000) rotateY(0deg)" 110 "-webkit-transform": "rotateY(0deg)"
113 } 111 }
114 }, { 112 }, {
115 "keyText": "70%", 113 "keyText": "70%",
116 "styles": { 114 "styles": {
117 "opacity": "1", 115 "opacity": "1",
118 "-webkit-transform": "perspective(1000) rotateY(0deg)" 116 "-webkit-transform": "rotateY(0deg)"
119 } 117 }
120 }, { 118 }, {
121 "keyText": "85%", 119 "keyText": "85%",
122 "styles": { 120 "styles": {
123 "opacity": "0", 121 "opacity": "0",
124 "-webkit-transform": "perspective(1000) rotateY(95deg)" 122 "-webkit-transform": "rotateY(95deg)"
125 } 123 }
126 }, { 124 }, {
127 "keyText": "86%", 125 "keyText": "86%",
128 "styles": { 126 "styles": {
129 "opacity": "0", 127 "opacity": "0",
130 "-webkit-transform": "perspective(1000) rotateY(-90deg)" 128 "-webkit-transform": "rotateY(-90deg)"
131 } 129 }
132 }, { 130 }, {
133 "keyText": "100%", 131 "keyText": "100%",
134 "styles": { 132 "styles": {
135 "opacity": "1", 133 "opacity": "1",
136 "-webkit-transform": "perspective(1000) rotateY(0deg)" 134 "-webkit-transform": "rotateY(0deg)"
137 } 135 }
138 }] 136 }]
139 }] 137 }]
@@ -151,7 +149,6 @@ exports.animationPresets = {
151 "-webkit-animation-timing-function": "ease-out", 149 "-webkit-animation-timing-function": "ease-out",
152 "-webkit-transform-origin": "100% 50%", 150 "-webkit-transform-origin": "100% 50%",
153 "-webkit-transform-style": "preserve-3d", 151 "-webkit-transform-style": "preserve-3d",
154 "-webkit-transform": "perspective(1000)",
155 "-webkit-animation-delay": "0s" 152 "-webkit-animation-delay": "0s"
156 } 153 }
157 },{ 154 },{
@@ -160,25 +157,25 @@ exports.animationPresets = {
160 "keyText": "0%", 157 "keyText": "0%",
161 "styles": { 158 "styles": {