diff options
Diffstat (limited to 'js/tools')
-rwxr-xr-x | js/tools/EyedropperTool.js | 206 | ||||
-rwxr-xr-x | js/tools/FillTool.js | 3 | ||||
-rwxr-xr-x | js/tools/InkBottleTool.js | 35 | ||||
-rwxr-xr-x | js/tools/modifier-tool-base.js | 2 |
4 files changed, 216 insertions, 30 deletions
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 795753d2..d007da39 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js | |||
@@ -6,7 +6,8 @@ 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 | 9 | drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils, | |
10 | vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils, | ||
10 | toolBase = require("js/tools/ToolBase").toolBase; | 11 | toolBase = require("js/tools/ToolBase").toolBase; |
11 | 12 | ||
12 | exports.EyedropperTool = Montage.create(toolBase, { | 13 | exports.EyedropperTool = Montage.create(toolBase, { |
@@ -14,6 +15,9 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
14 | _isMouseDown: { value: false }, | 15 | _isMouseDown: { value: false }, |
15 | _previousColor: { value: null}, | 16 | _previousColor: { value: null}, |
16 | _color: { value: null}, | 17 | _color: { value: null}, |
18 | _elementUnderMouse: { value: null }, | ||
19 | _imageDataCanvas: { value: null }, | ||
20 | _imageDataContext: { value: null }, | ||
17 | 21 | ||
18 | Configure: { | 22 | Configure: { |
19 | value: function ( doActivate ) | 23 | value: function ( doActivate ) |
@@ -46,6 +50,8 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
46 | { | 50 | { |
47 | this._isMouseDown = false; | 51 | this._isMouseDown = false; |
48 | this._escape = false; | 52 | this._escape = false; |
53 | this._elementUnderMouse = null; | ||
54 | this._deleteImageDataCanvas(); | ||
49 | } | 55 | } |
50 | if(this._isMouseDown) | 56 | if(this._isMouseDown) |
51 | { | 57 | { |
@@ -67,6 +73,9 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
67 | this._updateColor(this._color); | 73 | this._updateColor(this._color); |
68 | 74 | ||
69 | this._color = null; | 75 | this._color = null; |
76 | |||
77 | this._elementUnderMouse = null; | ||
78 | this._deleteImageDataCanvas(); | ||
70 | } | 79 | } |
71 | } | 80 | } |
72 | }, | 81 | }, |
@@ -95,27 +104,70 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
95 | 104 | ||
96 | _updateColorFromPoint: { | 105 | _updateColorFromPoint: { |
97 | value : function (event) { | 106 | value : function (event) { |
98 | var obj = this.application.ninja.stage.GetElement(event); | 107 | var c, |
108 | color, | ||
109 | obj = this.application.ninja.stage.GetElement(event); | ||
99 | if (obj) | 110 | if (obj) |
100 | { | 111 | { |
101 | // TODO - figure out if user clicked on a border - for now, just get fill | 112 | if(this.application.ninja.currentDocument.inExclusion(obj) !== -1) |
102 | var c = ElementsMediator.getColor(obj, true); | ||
103 | if(c) | ||
104 | { | 113 | { |
105 | var color = this.application.ninja.colorController.getColorObjFromCss(c); | 114 | this._elementUnderMouse = null; |
106 | if (color && color.value) { | 115 | this._deleteImageDataCanvas(); |
107 | color.value.wasSetByCode = true; | 116 | return; |
108 | color.value.type = 'changing'; | 117 | } |
109 | if (color.value.a) { | 118 | this._elementUnderMouse = obj; |
110 | this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, | 119 | // Depending on the object type, we need to get different colors |
111 | wasSetByCode: true, | 120 | if(obj.elementModel.selection === "image") |
112 | type: 'changing'}; | 121 | { |
113 | } | 122 | c = this._getColorAtPoint(obj, event); |
114 | this.application.ninja.colorController.colorModel[color.mode] = color.value; | 123 | if(c) |
115 | this._color = color; | 124 | { |
125 | color = this.application.ninja.colorController.getColorObjFromCss(c); | ||
126 | } | ||
127 | } | ||
128 | else if (obj.elementModel.selection === "canvas") | ||
129 | { | ||
130 | this._deleteImageDataCanvas(); | ||
131 | |||
132 | var pt = webkitConvertPointFromPageToNode(obj, | ||
133 | new WebKitPoint(event.pageX, event.pageY)), | ||
134 | ctx = obj.getContext("2d"); | ||
135 | |||
136 | c = this._getColorFromCanvas(ctx, pt); | ||
137 | if(c) | ||
138 | { | ||
139 | color = this.application.ninja.colorController.getColorObjFromCss(c); | ||
140 | } | ||
141 | } | ||
142 | else | ||
143 | { | ||
144 | this._deleteImageDataCanvas(); | ||
145 | |||
146 | c = ElementsMediator.getColor(obj, this._isOverBackground(obj, event)); | ||
147 | if(c) | ||
148 | { | ||
149 | color = this.application.ninja.colorController.getColorObjFromCss(c.color.css); | ||
150 | } | ||
151 | } | ||
152 | |||
153 | if (color && color.value) { | ||
154 | color.value.wasSetByCode = true; | ||
155 | color.value.type = 'changing'; | ||
156 | if (color.value.a) { | ||
157 | this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, | ||
158 | wasSetByCode: true, | ||
159 | type: 'changing'}; | ||
116 | } | 160 | } |
161 | this.application.ninja.colorController.colorModel[color.mode] = color.value; | ||
162 | this._color = color; | ||
117 | } | 163 | } |
118 | } | 164 | } |
165 | else | ||
166 | { | ||
167 | this._elementUnderMouse = null; | ||
168 | this._deleteImageDataCanvas(); | ||
169 | } | ||
170 | |||
119 | } | 171 | } |
120 | }, | 172 | }, |
121 | 173 | ||
@@ -147,6 +199,128 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
147 | this._previousColor = color.value.css; | 199 | this._previousColor = color.value.css; |
148 | } | 200 | } |
149 | } | 201 | } |
202 | }, | ||
203 | |||
204 | // TODO - We don't want to calculate this repeatedly | ||
205 | _isOverBackground: { | ||
206 | value: function(elt, event) | ||
207 | { | ||
208 | var border = ElementsMediator.getProperty(elt, "border", parseFloat); | ||
209 | |||
210 | if(border) | ||
211 | { | ||
212 | var bounds3D, | ||
213 | innerBounds = [], | ||
214 | pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)), | ||
215 | bt = ElementsMediator.getProperty(elt, "border-top", parseFloat), | ||
216 | br = ElementsMediator.getProperty(elt, "border-right", parseFloat), | ||
217 | bb = ElementsMediator.getProperty(elt, "border-bottom", parseFloat), | ||
218 | bl = ElementsMediator.getProperty(elt, "border-left", parseFloat); | ||
219 | |||
220 | // this.application.ninja.stage.viewUtils.setViewportObj( elt ); | ||
221 | bounds3D = this.application.ninja.stage.viewUtils.getElementViewBounds3D( elt ); | ||
222 | // console.log("bounds"); | ||
223 | // console.dir(bounds3D); | ||
224 | |||
225 | var xAdj = bl || border, | ||
226 | yAdj = bt || border; | ||
227 | innerBounds.push([bounds3D[0][0] + xAdj, bounds3D[0][1] + yAdj, 0]); | ||
228 | |||
229 | yAdj += bb || border; | ||
230 | innerBounds.push([bounds3D[1][0] + xAdj, bounds3D[1][1] - yAdj, 0]); | ||
231 | |||
232 | xAdj += br || border; | ||
233 | innerBounds.push([bounds3D[2][0] - xAdj, bounds3D[2][1] - yAdj, 0]); | ||
234 | |||
235 | yAdj = bt || border; | ||
236 | innerBounds.push([bounds3D[3][0] - xAdj, bounds3D[3][1] + yAdj, 0]); | ||
237 | // console.log("innerBounds"); | ||
238 | // console.dir(innerBounds); | ||
239 | |||
240 | var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); | ||
241 | var x = tmpPt[0], | ||
242 | y = tmpPt[1]; | ||
243 | |||
244 | if(x < innerBounds[0][0]) return false; | ||
245 | if(x > innerBounds[2][0]) return false; | ||
246 | if(y < innerBounds[0][1]) return false; | ||
247 | if(y > innerBounds[1][1]) return false; | ||
248 | } | ||
249 | return true; | ||
250 | } | ||
251 | }, | ||
252 | |||
253 | _getColorAtPoint: { | ||
254 | value: function(elt, event) | ||
255 | { | ||
256 | if(!this._imageDataCanvas) | ||
257 | { | ||
258 | this._imageDataCanvas = document.createElement("canvas"); | ||
259 | |||
260 | this._applyElementStyles(elt, this._imageDataCanvas, ["display", "position", "width", "height", | ||
261 | "-webkit-transform", "-webkit-transform-style"]); | ||
262 | |||
263 | var l = this.application.ninja.elementMediator.getProperty(elt, "left", parseInt), | ||
264 | t = this.application.ninja.elementMediator.getProperty(elt, "top", parseInt), | ||
265 | w = this.application.ninja.elementMediator.getProperty(elt, "width", parseInt), | ||
266 | h = this.application.ninja.elementMediator.getProperty(elt, "height", parseInt); | ||
267 | |||
268 | var eltCoords = this.application.ninja.stage.toViewportCoordinates(l, t); | ||
269 | this._imageDataCanvas.style.left = eltCoords[0] + "px"; | ||
270 | this._imageDataCanvas.style.top = eltCoords[1] + "px"; | ||
271 | this._imageDataCanvas.width = w; | ||
272 | this._imageDataCanvas.height = h; | ||
273 | |||
274 | // this.application.ninja.currentDocument.documentRoot.appendChild(this._imageDataCanvas); | ||
275 | |||
276 | this._imageDataContext = this._imageDataCanvas.getContext("2d"); | ||
277 | this._imageDataContext.drawImage(elt, 0, 0); | ||
278 | } | ||
279 | |||
280 | var pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, | ||
281 | new WebKitPoint(event.pageX, event.pageY)); | ||
282 | |||
283 | var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); | ||
284 | |||
285 | return this._getColorFromCanvas(this._imageDataContext, tmpPt); | ||
286 | } | ||
287 | }, | ||
288 | |||
289 | _getColorFromCanvas: { | ||
290 | value: function(ctx, pt) | ||
291 | { | ||