diff options
-rwxr-xr-x | js/controllers/color-controller.js | 14 | ||||
-rwxr-xr-x | js/controllers/elements/image-controller.js | 2 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.js | 2 | ||||
-rwxr-xr-x | js/tools/EyedropperTool.js | 97 |
4 files changed, 67 insertions, 48 deletions
diff --git a/js/controllers/color-controller.js b/js/controllers/color-controller.js index e3b15f1c..a6e41dd3 100755 --- a/js/controllers/color-controller.js +++ b/js/controllers/color-controller.js | |||
@@ -322,7 +322,19 @@ exports.ColorController = Montage.create(Component, { | |||
322 | //Simple solid color | 322 | //Simple solid color |
323 | color = this.parseCssToColor(css); | 323 | color = this.parseCssToColor(css); |
324 | } | 324 | } |
325 | //Returning color object (or null if none) | 325 | // TODO - Hack for inconsistent color object -- some workflows set color.color and some color.value |
326 | if(color) | ||
327 | { | ||
328 | if(color.value && !color.color) | ||
329 | { | ||
330 | color.color = color.value; | ||
331 | } | ||
332 | else if(color.color && !color.value) | ||
333 | { | ||
334 | color.value = color.color; | ||
335 | } | ||
336 | } | ||
337 | //Returning color object (or null if none) | ||
326 | return color; | 338 | return color; |
327 | } | 339 | } |
328 | }, | 340 | }, |
diff --git a/js/controllers/elements/image-controller.js b/js/controllers/elements/image-controller.js index 5abce13e..25ca8da6 100755 --- a/js/controllers/elements/image-controller.js +++ b/js/controllers/elements/image-controller.js | |||
@@ -19,7 +19,7 @@ exports.ImageController = Montage.create(ElementController, { | |||
19 | return el.getAttribute(prop); | 19 | return el.getAttribute(prop); |
20 | break; | 20 | break; |
21 | default: | 21 | default: |
22 | return ElementController.getProperty(el, prop); | 22 | return ElementController.getProperty(el, prop, true); |
23 | } | 23 | } |
24 | } | 24 | } |
25 | }, | 25 | }, |
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 79a57f22..641ac247 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js | |||
@@ -519,7 +519,7 @@ exports.Stage = Montage.create(Component, { | |||
519 | elt = this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop); | 519 | elt = this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop); |
520 | 520 | ||
521 | // workaround Chrome 3d bug | 521 | // workaround Chrome 3d bug |
522 | if(elt === this._viewport) | 522 | if(this.application.ninja.currentDocument.inExclusion(elt) !== -1) |
523 | { | 523 | { |
524 | return this._getElementUsingSnapping(point); | 524 | return this._getElementUsingSnapping(point); |
525 | } else { | 525 | } else { |
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 43286122..d007da39 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js | |||
@@ -51,12 +51,7 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
51 | this._isMouseDown = false; | 51 | this._isMouseDown = false; |
52 | this._escape = false; | 52 | this._escape = false; |
53 | this._elementUnderMouse = null; | 53 | this._elementUnderMouse = null; |
54 | if(this._imageDataCanvas) | 54 | this._deleteImageDataCanvas(); |
55 | { | ||
56 | this.application.ninja.stage.element.removeChild(this._imageDataCanvas); | ||
57 | this._imageDataCanvas = null; | ||
58 | this._imageDataContext = null; | ||
59 | } | ||
60 | } | 55 | } |
61 | if(this._isMouseDown) | 56 | if(this._isMouseDown) |
62 | { | 57 | { |
@@ -80,12 +75,7 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
80 | this._color = null; | 75 | this._color = null; |
81 | 76 | ||
82 | this._elementUnderMouse = null; | 77 | this._elementUnderMouse = null; |
83 | if(this._imageDataCanvas) | 78 | this._deleteImageDataCanvas(); |
84 | { | ||
85 | this.application.ninja.stage.element.removeChild(this._imageDataCanvas); | ||
86 | this._imageDataCanvas = null; | ||
87 | this._imageDataContext = null; | ||
88 | } | ||
89 | } | 79 | } |
90 | } | 80 | } |
91 | }, | 81 | }, |
@@ -119,9 +109,15 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
119 | obj = this.application.ninja.stage.GetElement(event); | 109 | obj = this.application.ninja.stage.GetElement(event); |
120 | if (obj) | 110 | if (obj) |
121 | { | 111 | { |
112 | if(this.application.ninja.currentDocument.inExclusion(obj) !== -1) | ||
113 | { | ||
114 | this._elementUnderMouse = null; | ||
115 | this._deleteImageDataCanvas(); | ||
116 | return; | ||
117 | } | ||
122 | this._elementUnderMouse = obj; | 118 | this._elementUnderMouse = obj; |
123 | // Depending on the object type, we need to get different colors | 119 | // Depending on the object type, we need to get different colors |
124 | if(obj.elementModel.type === "IMG") | 120 | if(obj.elementModel.selection === "image") |
125 | { | 121 | { |
126 | c = this._getColorAtPoint(obj, event); | 122 | c = this._getColorAtPoint(obj, event); |
127 | if(c) | 123 | if(c) |
@@ -129,14 +125,9 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
129 | color = this.application.ninja.colorController.getColorObjFromCss(c); | 125 | color = this.application.ninja.colorController.getColorObjFromCss(c); |
130 | } | 126 | } |
131 | } | 127 | } |
132 | else if (obj.elementModel.type === "CANVAS") | 128 | else if (obj.elementModel.selection === "canvas") |
133 | { | 129 | { |
134 | if(this._imageDataCanvas) | 130 | this._deleteImageDataCanvas(); |
135 | { | ||
136 | this.application.ninja.stage.element.removeChild(this._imageDataCanvas); | ||
137 | this._imageDataCanvas = null; | ||
138 | this._imageDataContext = null; | ||
139 | } | ||
140 | 131 | ||
141 | var pt = webkitConvertPointFromPageToNode(obj, | 132 | var pt = webkitConvertPointFromPageToNode(obj, |
142 | new WebKitPoint(event.pageX, event.pageY)), | 133 | new WebKitPoint(event.pageX, event.pageY)), |
@@ -150,14 +141,8 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
150 | } | 141 | } |
151 | else | 142 | else |
152 | { | 143 | { |
153 | if(this._imageDataCanvas) | 144 | this._deleteImageDataCanvas(); |
154 | { | ||
155 | this.application.ninja.stage.element.removeChild(this._imageDataCanvas); | ||
156 | this._imageDataCanvas = null; | ||
157 | this._imageDataContext = null; | ||
158 | } | ||
159 | 145 | ||
160 | // TODO - figure out if user clicked on a border - for now, just get fill | ||
161 | c = ElementsMediator.getColor(obj, this._isOverBackground(obj, event)); | 146 | c = ElementsMediator.getColor(obj, this._isOverBackground(obj, event)); |
162 | if(c) | 147 | if(c) |
163 | { | 148 | { |
@@ -180,12 +165,7 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
180 | else | 165 | else |
181 | { | 166 | { |
182 | this._elementUnderMouse = null; | 167 | this._elementUnderMouse = null; |
183 | if(this._imageDataCanvas) | 168 | this._deleteImageDataCanvas(); |
184 | { | ||
185 | this.application.ninja.stage.element.removeChild(this._imageDataCanvas); | ||
186 | this._imageDataCanvas = null; | ||
187 | this._imageDataContext = null; | ||
188 | } | ||
189 | } | 169 | } |
190 | 170 | ||
191 | } | 171 | } |
@@ -273,38 +253,44 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
273 | _getColorAtPoint: { | 253 | _getColorAtPoint: { |
274 | value: function(elt, event) | 254 | value: function(elt, event) |
275 | { | 255 | { |
276 | var imageData; | ||
277 | if(!this._imageDataCanvas) | 256 | if(!this._imageDataCanvas) |
278 | { | 257 | { |
279 | this._imageDataCanvas = document.createElement("canvas"); | 258 | this._imageDataCanvas = document.createElement("canvas"); |
280 | this._imageDataCanvas.style.display = "block"; | ||
281 | this._imageDataCanvas.style.position = "absolute"; | ||
282 | 259 | ||
283 | var eltCoords = this.application.ninja.stage.toViewportCoordinates(elt.offsetLeft, elt.offsetTop); | 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); | ||
284 | this._imageDataCanvas.style.left = eltCoords[0] + "px"; | 269 | this._imageDataCanvas.style.left = eltCoords[0] + "px"; |
285 | this._imageDataCanvas.style.top = eltCoords[1] + "px"; | 270 | this._imageDataCanvas.style.top = eltCoords[1] + "px"; |
286 | this._imageDataCanvas.style.width = elt.offsetWidth + "px"; | 271 | this._imageDataCanvas.width = w; |
287 | this._imageDataCanvas.style.height = elt.offsetHeight + "px"; | 272 | this._imageDataCanvas.height = h; |
288 | this._imageDataCanvas.width = elt.offsetWidth; | ||
289 | this._imageDataCanvas.height = elt.offsetHeight; | ||
290 | 273 | ||
291 | this.application.ninja.stage.element.appendChild(this._imageDataCanvas); | 274 | // this.application.ninja.currentDocument.documentRoot.appendChild(this._imageDataCanvas); |
292 | 275 | ||
293 | this._imageDataContext = this._imageDataCanvas.getContext("2d"); | 276 | this._imageDataContext = this._imageDataCanvas.getContext("2d"); |
294 | this._imageDataContext.drawImage(elt, 0, 0); | 277 | this._imageDataContext.drawImage(elt, 0, 0); |
295 | } | 278 | } |
296 | 279 | ||
297 | var pt = webkitConvertPointFromPageToNode(this._imageDataCanvas, | 280 | var pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, |
298 | new WebKitPoint(event.pageX, event.pageY)); | 281 | new WebKitPoint(event.pageX, event.pageY)); |
299 | 282 | ||
300 | return this._getColorFromCanvas(this._imageDataContext, pt); | 283 | var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); |
284 | |||
285 | return this._getColorFromCanvas(this._imageDataContext, tmpPt); | ||
301 | } | 286 | } |
302 | }, | 287 | }, |
303 | 288 | ||
304 | _getColorFromCanvas: { | 289 | _getColorFromCanvas: { |
305 | value: function(ctx, pt) | 290 | value: function(ctx, pt) |
306 | { | 291 | { |
307 | var imageData = ctx.getImageData(pt.x, pt.y, 1, 1).data; | 292 | // var imageData = ctx.getImageData(pt.x, pt.y, 1, 1).data; |
293 | var imageData = ctx.getImageData(pt[0], pt[1], 1, 1).data; | ||
308 | if(imageData) | 294 | if(imageData) |
309 |