diff options
Diffstat (limited to 'js/tools')
-rw-r--r-- | js/tools/BrushTool.js | 41 | ||||
-rwxr-xr-x | js/tools/EyedropperTool.js | 133 | ||||
-rwxr-xr-x | js/tools/PenTool.js | 18 |
3 files changed, 162 insertions, 30 deletions
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 752aa2a3..4ce9976a 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js | |||
@@ -5,6 +5,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | var ShapeTool = require("js/tools/ShapeTool").ShapeTool; | 7 | var ShapeTool = require("js/tools/ShapeTool").ShapeTool; |
8 | var ShapesController = require("js/controllers/elements/shapes-controller").ShapesController; | ||
8 | var DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase; | 9 | var DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase; |
9 | var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; | 10 | var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; |
10 | var Montage = require("montage/core/core").Montage; | 11 | var Montage = require("montage/core/core").Montage; |
@@ -69,12 +70,46 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
69 | if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){ | 70 | if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){ |
70 | this._selectedBrushStroke.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor); | 71 | this._selectedBrushStroke.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor); |
71 | } | 72 | } |
73 | if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){ | ||
74 | this._selectedBrushStroke.setSecondStrokeColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor); | ||
75 | } | ||
72 | //add this point to the brush stroke in case the user does a mouse up before doing a mouse move | 76 | //add this point to the brush stroke in case the user does a mouse up before doing a mouse move |
73 | var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); | 77 | var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); |
74 | this._selectedBrushStroke.addPoint(currMousePos); | 78 | this._selectedBrushStroke.addPoint(currMousePos); |
75 | 79 | ||
76 | //TODO get these values from the options | 80 | var strokeSize = 1; |
77 | this._selectedBrushStroke.setStrokeWidth(20); | 81 | if (this.options.strokeSize) { |
82 | strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units); | ||
83 | } | ||
84 | this._selectedBrushStroke.setStrokeWidth(strokeSize); | ||
85 | |||
86 | var strokeHardness = 100; | ||
87 | if (this.options.strokeHardness){ | ||
88 | strokeHardness = ShapesController.GetValueInPixels(this.options.strokeHardness.value, this.options.strokeHardness.units); | ||
89 | } | ||
90 | this._selectedBrushStroke.setStrokeHardness(strokeHardness); | ||
91 | |||
92 | var doSmoothing = false; | ||
93 | if (this.options.doSmoothing){ | ||
94 | doSmoothing = this.options.doSmoothing; | ||
95 | } | ||
96 | this._selectedBrushStroke.setDoSmoothing(doSmoothing); | ||
97 | |||
98 | var useCalligraphic = false; | ||
99 | if (this.options.useCalligraphic){ | ||
100 | useCalligraphic = this.options.useCalligraphic; | ||
101 | } | ||
102 | if (useCalligraphic) { | ||
103 | this._selectedBrushStroke.setStrokeUseCalligraphic(true); | ||
104 | var strokeAngle = 0; | ||
105 | if (this.options.strokeAngle){ | ||
106 | strokeAngle= ShapesController.GetValueInPixels(this.options.strokeAngle.value, this.options.strokeAngle.units); | ||
107 | } | ||
108 | this._selectedBrushStroke.setStrokeAngle(Math.PI * -strokeAngle/180); | ||
109 | } else { | ||
110 | this._selectedBrushStroke.setStrokeUseCalligraphic(false); | ||
111 | } | ||
112 | |||
78 | } | 113 | } |
79 | NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); | 114 | NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); |
80 | } //value: function (event) { | 115 | } //value: function (event) { |
@@ -114,7 +149,7 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
114 | 149 | ||
115 | if (this._isDrawing) { | 150 | if (this._isDrawing) { |
116 | var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); | 151 | var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); |
117 | if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()<100){ | 152 | if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()<1000){ |
118 | this._selectedBrushStroke.addPoint(currMousePos); | 153 | this._selectedBrushStroke.addPoint(currMousePos); |
119 | } | 154 | } |
120 | this.ShowCurrentBrushStrokeOnStage(); | 155 | this.ShowCurrentBrushStrokeOnStage(); |
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 11c15158..927b86cf 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js | |||
@@ -6,9 +6,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage, | 7 | var Montage = require("montage/core/core").Montage, |
8 | ElementsMediator = require("js/mediators/element-mediator").ElementMediator, | 8 | ElementsMediator = require("js/mediators/element-mediator").ElementMediator, |
9 | drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils, | 9 | toolBase = require("js/tools/ToolBase").toolBase, |
10 | vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils, | 10 | ShapesController = require("js/controllers/elements/shapes-controller").ShapesController, |
11 | toolBase = require("js/tools/ToolBase").toolBase; | 11 | World = require("js/lib/drawing/world").World, |
12 | njModule = require("js/lib/NJUtils"); | ||
12 | 13 | ||
13 | exports.EyedropperTool = Montage.create(toolBase, { | 14 | exports.EyedropperTool = Montage.create(toolBase, { |
14 | 15 | ||
@@ -17,6 +18,8 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
17 | _color: { value: null}, | 18 | _color: { value: null}, |
18 | _elementUnderMouse: { value: null }, | 19 | _elementUnderMouse: { value: null }, |
19 | _imageDataCanvas: { value: null }, | 20 | _imageDataCanvas: { value: null }, |
21 | _webGlDataCanvas: { value: null }, | ||
22 | _webGlWorld: { value: null }, | ||
20 | _imageDataContext: { value: null }, | 23 | _imageDataContext: { value: null }, |
21 | _canSnap: { value: false }, | 24 | _canSnap: { value: false }, |
22 | 25 | ||
@@ -30,6 +33,11 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
30 | else | 33 | else |
31 | { | 34 | { |
32 | NJevent("disableStageMove"); | 35 | NJevent("disableStageMove"); |
36 | this._deleteImageDataCanvas(); | ||
37 | this._isMouseDown = false; | ||
38 | this._elementUnderMouse = null; | ||
39 | this._previousColor = null; | ||
40 | this._color = null; | ||
33 | } | 41 | } |
34 | } | 42 | } |
35 | }, | 43 | }, |
@@ -123,7 +131,7 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
123 | new WebKitPoint(event.pageX, event.pageY)), | 131 | new WebKitPoint(event.pageX, event.pageY)), |
124 | ctx = obj.getContext("2d"); | 132 | ctx = obj.getContext("2d"); |
125 | 133 | ||
126 | c = this._getColorFromCanvas(ctx, pt); | 134 | c = this._getColorFromCanvas(ctx, [pt.x, pt.y]); |
127 | if(c) | 135 | if(c) |
128 | { | 136 | { |
129 | color = this.application.ninja.colorController.getColorObjFromCss(c); | 137 | color = this.application.ninja.colorController.getColorObjFromCss(c); |
@@ -131,17 +139,27 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
131 | } | 139 | } |
132 | else | 140 | else |
133 | { | 141 | { |
134 | this._deleteImageDataCanvas(); | 142 | if(ShapesController.isElementAShape(obj)) |
143 | { | ||
144 | c = this._getColorFromShape(obj, event); | ||
145 | } | ||
146 | else | ||
147 | { | ||
148 | c = this._getColorFromElement(obj, event); | ||
149 | } | ||
135 | 150 | ||
136 | c = this._getColorFromElement(obj, event); | ||
137 | if(typeof(c) === "string") | 151 | if(typeof(c) === "string") |
138 | { | 152 | { |
139 | color = this.application.ninja.colorController.getColorObjFromCss(c); | 153 | color = this.application.ninja.colorController.getColorObjFromCss(c); |
140 | } | 154 | } |
141 | else | 155 | else if(c.mode !== "gradient") |
142 | { | 156 | { |
143 | color = this.application.ninja.colorController.getColorObjFromCss(c.color.css); | 157 | color = this.application.ninja.colorController.getColorObjFromCss(c.color.css); |
144 | } | 158 | } |
159 | else | ||
160 | { | ||
161 | color = c; | ||
162 | } | ||
145 | } | 163 | } |
146 | 164 | ||
147 | this._updateColor(color, false); | 165 | this._updateColor(color, false); |
@@ -161,7 +179,8 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
161 | if(updateColorToolBar) | 179 | if(updateColorToolBar) |
162 | { | 180 | { |
163 | eventType = "change"; | 181 | eventType = "change"; |
164 | if (color && color.value) | 182 | // TODO - Color chips in toolbar doesn't support gradients yet |
183 | if (color && color.value && (color.mode !== "gradient")) | ||
165 | { | 184 | { |
166 | var input = this.application.ninja.colorController.colorModel.input; | 185 | var input = this.application.ninja.colorController.colorModel.input; |
167 | 186 | ||
@@ -232,6 +251,8 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
232 | _getColorFromElement: { | 251 | _getColorFromElement: { |
233 | value: function(elt, event) | 252 | value: function(elt, event) |
234 | { | 253 | { |
254 | this._deleteImageDataCanvas(); | ||
255 | |||
235 | var border = ElementsMediator.getProperty(elt, "border"), | 256 | var border = ElementsMediator.getProperty(elt, "border"), |
236 | borderWidth, | 257 | borderWidth, |
237 | bounds3D, | 258 | bounds3D, |
@@ -279,19 +300,53 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
279 | x = tmpPt[0]; | 300 | x = tmpPt[0]; |
280 | y = tmpPt[1]; | 301 | y = tmpPt[1]; |
281 | 302 | ||
282 | if(x < innerBounds[0][0]) return ElementsMediator.getProperty(elt, "border-left-color"); | 303 | if(x < innerBounds[0][0]) return ElementsMediator.getColor(elt, false, "left"); |
283 | if(x > innerBounds[2][0]) return ElementsMediator.getProperty(elt, "border-right-color"); | 304 | if(x > innerBounds[2][0]) return ElementsMediator.getColor(elt, false, "right"); |
284 | if(y < innerBounds[0][1]) return ElementsMediator.getProperty(elt, "border-top-color"); | 305 | if(y < innerBounds[0][1]) return ElementsMediator.getColor(elt, false, "top"); |
285 | if(y > innerBounds[1][1]) return ElementsMediator.getProperty(elt, "border-bottom-color"); | 306 | if(y > innerBounds[1][1]) return ElementsMediator.getColor(elt, false, "bottom"); |
286 | } | 307 | } |
287 | 308 | ||
288 | return ElementsMediator.getColor(elt, true); | 309 | return ElementsMediator.getColor(elt, true); |
289 | } | 310 | } |
290 | }, | 311 | }, |
291 | 312 | ||
292 | _getColorAtPoint: { | 313 | // TODO - We don't want to calculate this repeatedly |
314 | _getColorFromShape: { | ||
293 | value: function(elt, event) | 315 | value: function(elt, event) |
294 | { | 316 | { |
317 | var c, | ||
318 | ctx, | ||
319 | tmpPt, | ||
320 | pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, | ||
321 | new WebKitPoint(event.pageX, event.pageY)); | ||
322 | |||
323 | tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); | ||
324 | |||
325 | if(elt.elementModel.shapeModel.useWebGl) | ||
326 | { | ||
327 |