aboutsummaryrefslogtreecommitdiff
path: root/js/tools/BrushTool.js
diff options
context:
space:
mode:
authorPushkar Joshi2012-04-24 15:40:12 -0700
committerPushkar Joshi2012-04-24 15:40:12 -0700
commit4290e20e2b2f4536f4365d02e1cd7a1418bc8ea9 (patch)
tree4f4c6657125aeabd853717daaff1d1fbfc54fe54 /js/tools/BrushTool.js
parente7bbd9b08b4cd87530596b370366d994ca766650 (diff)
downloadninja-4290e20e2b2f4536f4365d02e1cd7a1418bc8ea9.tar.gz
allow the realtime drawing of brush strokes drawn off the standard XY plane by passing in the transformation matrix
Diffstat (limited to 'js/tools/BrushTool.js')
-rw-r--r--js/tools/BrushTool.js744
1 files changed, 409 insertions, 335 deletions
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js
index 6cd6858c..01350d1c 100644
--- a/js/tools/BrushTool.js
+++ b/js/tools/BrushTool.js
@@ -13,7 +13,7 @@ var NJUtils = require("js/lib/NJUtils").NJUtils;
13var ElementMediator = require("js/mediators/element-mediator").ElementMediator; 13var ElementMediator = require("js/mediators/element-mediator").ElementMediator;
14var TagTool = require("js/tools/TagTool").TagTool; 14var TagTool = require("js/tools/TagTool").TagTool;
15var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager; 15var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager;
16 16var ViewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
17var BrushStroke = require("js/lib/geom/brush-stroke").BrushStroke; 17var BrushStroke = require("js/lib/geom/brush-stroke").BrushStroke;
18 18
19//whether or not we want the mouse move to be handled all the time (not just while drawing) inside the brush tool 19//whether or not we want the mouse move to be handled all the time (not just while drawing) inside the brush tool
@@ -21,396 +21,470 @@ var g_DoBrushToolMouseMove = true;
21 21
22exports.BrushTool = Montage.create(ShapeTool, { 22exports.BrushTool = Montage.create(ShapeTool, {
23 hasReel: { value: false }, 23 hasReel: { value: false },
24 _toolID: { value: "brushTool" }, 24 _toolID: { value: "brushTool" },
25 _imageID: { value: "brushToolImg" }, 25 _imageID: { value: "brushToolImg" },
26 _toolImageClass: { value: "brushToolUp" }, 26 _toolImageClass: { value: "brushToolUp" },
27 _selectedToolImageClass: { value: "brushToolDown" }, 27 _selectedToolImageClass: { value: "brushToolDown" },
28 _toolTipText: { value: "Brush Tool" }, 28 _toolTipText: { value: "Brush Tool" },
29 _brushView: { value: null, writable: true }, 29 _brushView: { value: null, writable: true },
30 30
31 _selectedToolClass: { value: "brushToolSpecificProperties" }, 31 _selectedToolClass: { value: "brushToolSpecificProperties" },
32 _penToolProperties: { enumerable: false, value: null, writable: true }, 32 _penToolProperties: { enumerable: false, value: null, writable: true },
33 _parentNode: { enumerable: false, value: null, writable: true }, 33 _parentNode: { enumerable: false, value: null, writable: true },
34 _toolsPropertiesContainer: { enumerable: false, value: null, writable: true }, 34 _toolsPropertiesContainer: { enumerable: false, value: null, writable: true },
35 35
36 //config options 36 //config options
37 _useWebGL: {value: false, writable: false}, 37 _useWebGL: {value: false, writable: false},
38 38
39 //view options 39 //view options
40 _brushStrokeCanvas: {value: null, writable: true}, 40 _brushStrokeCanvas: {value: null, writable: true},
41 _brushStrokePlaneMat: {value: null, writable: true}, 41 _brushStrokePlaneMat: {value: null, writable: true},
42 _draggingPlane: {value: null, writable: true}, 42 _draggingPlane: {value: null, writable: true},
43 43
44 //the current brush stroke 44 //the current brush stroke
45 _selectedBrushStroke: {value: null, writable: true}, 45 _selectedBrushStroke: {value: null, writable: true},
46 46
47 ShowToolProperties: { 47 ShowToolProperties: {
48 value: function () { 48 value: function () {
49 this._brushView = PenView.create(); 49 this._brushView = PenView.create();
50 this._brushView.element = document.getElementById('topPanelContainer').children[0]; 50 this._brushView.element = document.getElementById('topPanelContainer').children[0];
51 this._brushView.needsDraw = true; 51 this._brushView.needsDraw = true;
52 this._brushView.addEventListener(ToolEvents.TOOL_OPTION_CHANGE, this, false); 52 this._brushView.addEventListener(ToolEvents.TOOL_OPTION_CHANGE, this, false);
53 } 53 }
54 }, 54 },
55
56 HandleLeftButtonDown: {
57 value: function (event) {
58 //ignore any right or middle clicks
59 if (event.button !== 0) {
60 //NOTE: this will work on Webkit only...IE has different codes (left: 1, middle: 4, right: 2)
61 return;
62 }
63 if (this._canDraw) {
64 this._isDrawing = true;
65 }
66 55
67 this.startDraw(event);
68 this._brushStrokePlaneMat = this.mouseDownHitRec.getPlaneMatrix();
69 56
70 //start a new brush stroke 57 /*
71 if (this._selectedBrushStroke === null){ 58 _getUnsnappedPosition: {
72 this._selectedBrushStroke = new BrushStroke(); 59 value: function(x,y){
73 if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){ 60 var elemSnap = snapManager.elementSnapEnabled();
74 this._selectedBrushStroke.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor); 61 var gridSnap = snapManager.gridSnapEnabled();
75 } 62 var alignSnap = snapManager.snapAlignEnabled();
76 if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){
77 this._selectedBrushStroke.setSecondStrokeColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor);
78 }
79
80 //add this point to the brush stroke in case the user does a mouse up before doing a mouse move
81 var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY);
82 this._selectedBrushStroke.addPoint(currMousePos);
83
84 var strokeSize = 1;
85 if (this.options.strokeSize) {
86 strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units);
87 }
88 this._selectedBrushStroke.setStrokeWidth(strokeSize);
89 63
90 var strokeHardness = 100; 64 snapManager.enableElementSnap(false);
91 if (this.options.strokeHardness){ 65 snapManager.enableGridSnap(false);
92 strokeHardness = this.options.strokeHardness.value; 66 snapManager.enableSnapAlign(false);
93 }
94 this._selectedBrushStroke.setStrokeHardness(strokeHardness);
95 67
96 var doSmoothing = false; 68 var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y));
97 if (this.options.doSmoothing){ 69 var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false));
98 doSmoothing = this.options.doSmoothing; 70 this._draggingPlane = snapManager.getDragPlane();
99 }
100 this._selectedBrushStroke.setDoSmoothing(doSmoothing);
101 if (doSmoothing){
102 this._selectedBrushStroke.setSmoothingAmount(this.options.smoothingAmount.value);
103 }
104
105 var useCalligraphic = false;
106 if (this.options.useCalligraphic){
107 useCalligraphic = this.options.useCalligraphic;
108 }
109 if (useCalligraphic) {
110 this._selectedBrushStroke.setStrokeUseCalligraphic(true);
111 var strokeAngle = 0;
112 if (this.options.strokeAngle){
113 strokeAngle= this.options.strokeAngle.value;
114 }
115 this._selectedBrushStroke.setStrokeAngle(Math.PI * strokeAngle/180);
116 } else {
117 this._selectedBrushStroke.setStrokeUseCalligraphic(false);
118 }
119
120 }
121 if (!g_DoBrushToolMouseMove)
122 NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove();
123 } //value: function (event) {
124 }, //HandleLeftButtonDown
125 71
126 _getUnsnappedPosition: { 72 snapManager.enableElementSnap(elemSnap);
127 value: function(x,y){ 73 snapManager.enableGridSnap(gridSnap);
128 var elemSnap = snapManager.elementSnapEnabled(); 74 snapManager.enableSnapAlign(alignSnap);
129 var gridSnap = snapManager.gridSnapEnabled();
130 var alignSnap = snapManager.snapAlignEnabled();
131 75
76 return unsnappedpos;
77 }
78 },
79 */
80
81 //use the snap manager to build a hit record corresponding to the screen X, Y position
82 // will use the plane of the selected path as the working plane if available, else use stage
83 getHitRecord:{
84 value: function(x,y, doSnap){
85 var elemSnap = snapManager.elementSnapEnabled();
86 var gridSnap = snapManager.gridSnapEnabled();
87 var alignSnap = snapManager.snapAlignEnabled();
88
89 if (!doSnap){
132 snapManager.enableElementSnap(false); 90 snapManager.enableElementSnap(false);
133 snapManager.enableGridSnap(false); 91 snapManager.enableGridSnap(false);
134 snapManager.enableSnapAlign(false); 92 snapManager.enableSnapAlign(false);
93 }
135 94
136 var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); 95 if (this._selectedSubpathCanvas){
137 var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); 96 var drawingCanvas = this._selectedSubpathCanvas;
138 this._draggingPlane = snapManager.getDragPlane(); 97 var contentPlane = ViewUtils.getUnprojectedElementPlane(drawingCanvas);
98 snapManager.pushWorkingPlane(contentPlane);
139 99
100 }
101 var tmpPoint = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y));
102 var hitRec = snapManager.snap(tmpPoint.x, tmpPoint.y, false);
103 if (this._selectedSubpathCanvas){
104 snapManager.popWorkingPlane();
105 }
106
107 if (!doSnap){
140 snapManager.enableElementSnap(elemSnap); 108 snapManager.enableElementSnap(elemSnap);
141 snapManager.enableGridSnap(gridSnap); 109 snapManager.enableGridSnap(gridSnap);
142 snapManager.enableSnapAlign(alignSnap); 110 snapManager.enableSnapAlign(alignSnap);
143
144 return unsnappedpos;
145 } 111 }
146 }, 112 return hitRec;
147 //need to override this function because the ShapeTool's definition contains a clearDrawingCanvas call - Pushkar 113 }
148 // might not need to override once we draw using OpenGL instead of SVG 114 },
149 // Also took out all the snapping code for now...need to add that back 115
150 HandleMouseMove: 116 HandleLeftButtonDown: {
151 { 117 value: function (event) {
152 value: function (event) { 118 //ignore any right or middle clicks
153 //ignore any right or middle clicks 119 if (event.button !== 0) {
154 if (event.button !== 0) { 120 //NOTE: this will work on Webkit only...IE has different codes (left: 1, middle: 4, right: 2)
155 //NOTE: this will work on Webkit only...IE has different codes (left: 1, middle: 4, right: 2) 121 return;
156 return; 122 }
157 } 123 if (this._canDraw) {
124 this._isDrawing = true;
125 }
126
127 var hitRec = this.getHitRecord(event.pageX, event.pageY, false);
128 this._brushStrokePlaneMat = hitRec.getPlaneMatrix();
129
130 //start a new brush stroke
131 if (this._selectedBrushStroke === null){
132 this._selectedBrushStroke = new BrushStroke();
133 var colorArray=[0,0,0,0];
134 var color = this.application.ninja.colorController.colorToolbar.fill.color;
135 if (color){
136 colorArray = [color.r/255, color.g/255, color.b/255, color.a];
137 } else {