diff options
Diffstat (limited to 'js/tools/BrushTool.js')
-rw-r--r-- | js/tools/BrushTool.js | 744 |
1 files changed, 409 insertions, 335 deletions
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 6cd6858c..ab54d6bb 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js | |||
@@ -13,7 +13,7 @@ var NJUtils = require("js/lib/NJUtils").NJUtils; | |||
13 | var ElementMediator = require("js/mediators/element-mediator").ElementMediator; | 13 | var ElementMediator = require("js/mediators/element-mediator").ElementMediator; |
14 | var TagTool = require("js/tools/TagTool").TagTool; | 14 | var TagTool = require("js/tools/TagTool").TagTool; |
15 | var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager; | 15 | var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager; |
16 | 16 | var ViewUtils = require("js/helper-classes/3D/view-utils").ViewUtils; | |
17 | var BrushStroke = require("js/lib/geom/brush-stroke").BrushStroke; | 17 | var 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 | ||
22 | exports.BrushTool = Montage.create(ShapeTool, { | 22 | exports.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 { | ||
138 | colorArray = [1,1,1,0]; | ||
139 | } | ||
140 | this._selectedBrushStroke.setStrokeColor(colorArray); | ||
141 | |||