diff options
-rw-r--r-- | js/controllers/elements/element-controller.js | 13 | ||||
-rw-r--r-- | js/controllers/elements/shapes-controller.js | 12 | ||||
-rw-r--r-- | js/tools/EyedropperTool.js | 164 | ||||
-rw-r--r-- | js/tools/FillTool.js | 3 | ||||
-rw-r--r-- | js/tools/InkBottleTool.js | 35 | ||||
-rw-r--r-- | js/tools/modifier-tool-base.js | 2 |
6 files changed, 212 insertions, 17 deletions
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 65d26bdd..5eb75613 100644 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js | |||
@@ -115,6 +115,7 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
115 | } | 115 | } |
116 | else | 116 | else |
117 | { | 117 | { |
118 | // TODO - Need to update border style and width also | ||
118 | el.elementModel.stroke = colorObj; | 119 | el.elementModel.stroke = colorObj; |
119 | } | 120 | } |
120 | 121 | ||
@@ -159,10 +160,22 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
159 | case 'gradient': | 160 | case 'gradient': |
160 | this.setProperty(el, "border-image", color.color.css); | 161 | this.setProperty(el, "border-image", color.color.css); |
161 | this.setProperty(el, "border-color", "none"); | 162 | this.setProperty(el, "border-color", "none"); |
163 | if(color.borderInfo) | ||
164 | { | ||
165 | this.setProperty(el, "border-width", color.borderInfo.borderWidth + | ||
166 | color.borderInfo.borderUnits); | ||
167 | this.setProperty(el, "border-style", color.borderInfo.borderStyle); | ||
168 | } | ||
162 | break; | 169 | break; |
163 | default: | 170 | default: |
164 | this.setProperty(el, "border-image", "none"); | 171 | this.setProperty(el, "border-image", "none"); |
165 | this.setProperty(el, "border-color", color.color.css); | 172 | this.setProperty(el, "border-color", color.color.css); |
173 | if(color.borderInfo) | ||
174 | { | ||
175 | this.setProperty(el, "border-width", color.borderInfo.borderWidth + | ||
176 | color.borderInfo.borderUnits); | ||
177 | this.setProperty(el, "border-style", color.borderInfo.borderStyle); | ||
178 | } | ||
166 | } | 179 | } |
167 | } | 180 | } |
168 | el.elementModel.stroke = color; | 181 | el.elementModel.stroke = color; |
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 640119c4..8953f155 100644 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js | |||
@@ -249,6 +249,10 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
249 | setColor: { | 249 | setColor: { |
250 | value: function(el, color, isFill) { | 250 | value: function(el, color, isFill) { |
251 | var webGl = color.webGlColor || color.color.webGlColor; | 251 | var webGl = color.webGlColor || color.color.webGlColor; |
252 | if(!webGl) | ||
253 | { | ||
254 | webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); | ||
255 | } | ||
252 | if(isFill) | 256 | if(isFill) |
253 | { | 257 | { |
254 | el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); | 258 | el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); |
@@ -260,6 +264,14 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
260 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); | 264 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); |
261 | this.setShapeProperty(el, "stroke", webGl); | 265 | this.setShapeProperty(el, "stroke", webGl); |
262 | this.setShapeProperty(el, "border", color); | 266 | this.setShapeProperty(el, "border", color); |
267 | if(color.strokeInfo) | ||
268 | { | ||
269 | var strokeWidth = this.GetValueInPixels(color.strokeInfo.strokeSize, | ||
270 | color.strokeInfo.strokeUnits); | ||
271 | el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(strokeWidth); | ||
272 | this.setShapeProperty(el, "strokeSize", color.strokeInfo.strokeSize + " " | ||
273 | + color.strokeInfo.strokeUnits); | ||
274 | } | ||
263 | } | 275 | } |
264 | el.elementModel.shapeModel.GLWorld.render(); | 276 | el.elementModel.shapeModel.GLWorld.render(); |
265 | } | 277 | } |
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 795753d2..62a3eadd 100644 --- 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, { |
@@ -99,10 +100,10 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
99 | if (obj) | 100 | if (obj) |
100 | { | 101 | { |
101 | // TODO - figure out if user clicked on a border - for now, just get fill | 102 | // TODO - figure out if user clicked on a border - for now, just get fill |
102 | var c = ElementsMediator.getColor(obj, true); | 103 | var c = ElementsMediator.getColor(obj, this._isOverBorder(obj, event)); |
103 | if(c) | 104 | if(c) |
104 | { | 105 | { |
105 | var color = this.application.ninja.colorController.getColorObjFromCss(c); | 106 | var color = this.application.ninja.colorController.getColorObjFromCss(c.color.css); |
106 | if (color && color.value) { | 107 | if (color && color.value) { |
107 | color.value.wasSetByCode = true; | 108 | color.value.wasSetByCode = true; |
108 | color.value.type = 'changing'; | 109 | color.value.type = 'changing'; |
@@ -147,6 +148,163 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
147 | this._previousColor = color.value.css; | 148 | this._previousColor = color.value.css; |
148 | } | 149 | } |
149 | } | 150 | } |
151 | }, | ||
152 | |||
153 | // TODO - We don't want to calculate this repeatedly | ||
154 | _isOverBorder: { | ||
155 | value: function(elt, event) | ||
156 | { | ||
157 | var border = ElementsMediator.getProperty(elt, "border", parseFloat); | ||
158 | |||
159 | if(border) | ||
160 | { | ||
161 | var bounds3D, | ||
162 | innerBounds = [], | ||
163 | pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)), | ||
164 | bt = ElementsMediator.getProperty(elt, "border-top", parseFloat), | ||
165 | br = ElementsMediator.getProperty(elt, "border-right", parseFloat), | ||
166 | bb = ElementsMediator.getProperty(elt, "border-bottom", parseFloat), | ||
167 | bl = ElementsMediator.getProperty(elt, "border-left", parseFloat); | ||
168 | |||
169 | // this.application.ninja.stage.viewUtils.setViewportObj( elt ); | ||
170 | bounds3D = this.application.ninja.stage.viewUtils.getElementViewBounds3D( elt ); | ||
171 | console.log("bounds"); | ||
172 | console.dir(bounds3D); | ||
173 | |||
174 | var xAdj = bl || border, | ||
175 | yAdj = bt || border; | ||
176 | innerBounds.push([bounds3D[0][0] + xAdj, bounds3D[0][1] + yAdj, 0]); | ||
177 | |||
178 | yAdj += bb || border; | ||
179 | innerBounds.push([bounds3D[1][0] + xAdj, bounds3D[1][1] - yAdj, 0]); | ||
180 | |||
181 | xAdj += br || border; | ||
182 | innerBounds.push([bounds3D[2][0] - xAdj, bounds3D[2][1] - yAdj, 0]); | ||
183 | |||
184 | yAdj = bt || border; | ||
185 | innerBounds.push([bounds3D[3][0] - xAdj, bounds3D[3][1] + yAdj, 0]); | ||
186 | console.log("innerBounds"); | ||
187 | console.dir(innerBounds); | ||
188 | |||
189 | var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); | ||
190 | var x = tmpPt[0], | ||
191 | y = tmpPt[1]; | ||
192 | |||
193 | if(x < innerBounds[0][0]) return false; | ||
194 | if(x > innerBounds[2][0]) return false; | ||
195 | if(y < innerBounds[0][1]) return false; | ||
196 | if(y > innerBounds[1][1]) return false; | ||
197 | |||
198 | return true; | ||
199 | |||
200 | |||
201 | // var contain = MathUtils.boundaryContainsPoint(innerBounds, tmpPt, false); | ||
202 | // console.log("contain is " + contain); | ||
203 | // var tmpMat = this.application.ninja.stage.viewUtils.getLocalToGlobalMatrix( elt ); | ||
204 | //// var zoomFactor = 1; | ||
205 | //// if (this.application.ninja.stage.viewport.style && this.application.ninja.stage.viewport.style.zoom) | ||
206 | //// { | ||
207 | //// zoomFactor = Number(this.application.ninja.stage.viewport.style.zoom); | ||
208 | //// } | ||
209 | // | ||
210 | // for (var j=0; j<4; j++) | ||
211 | // { | ||
212 | // var localPt = innerBounds[j]; | ||
213 | // var tmpPt = this.application.ninja.stage.viewUtils.localToGlobal2(localPt, tmpMat); | ||
214 | // | ||
215 | //// if(zoomFactor !== 1) | ||
216 | //// { | ||
217 | //// tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor); | ||
218 | //// tmpPt[0] += this.application.ninja.stage.scrollLeft*(zoomFactor - 1); | ||
219 | //// tmpPt[1] += this.application.ninja.stage.scrollTop*(zoomFactor - 1); | ||
220 | //// } | ||
221 | // innerBounds[j] = tmpPt; | ||
222 | // } | ||
223 | // | ||
224 | // var contain = MathUtils.boundaryContainsPoint(innerBounds, [pt.x, pt.y], false); | ||
225 | // console.log("contain is " + contain); | ||
226 | |||
227 | |||
228 | |||
229 | // var bounds, | ||
230 | // innerBounds = [], | ||
231 | // plane = ElementsMediator.get3DProperty(elt, "elementPlane"), | ||
232 | // pt = webkitConvertPointFromPageToNode(drawUtils.getDrawingSurfaceElement(), new WebKitPoint(event.pageX, event.pageY)), | ||
233 | // bt = ElementsMediator.getProperty(elt, "border-top", parseFloat), | ||
234 | // br = ElementsMediator.getProperty(elt, "border-right", parseFloat), | ||
235 | // bb = ElementsMediator.getProperty(elt, "border-bottom", parseFloat), | ||
236 | // bl = ElementsMediator.getProperty(elt, "border-left", parseFloat); | ||
237 | // | ||
238 | // if(plane) | ||
239 | // { | ||
240 | // bounds = plane.getBoundaryPoints().slice(0); | ||
241 | // var b = bl || border; | ||
242 | // var dirV = vecUtils.vecSubtract(2, bounds[3], bounds[0]); | ||
243 | // dirV = vecUtils.vecNormalize(2, dirV, b); | ||
244 | // innerBounds.push(vecUtils.vecAdd(2, bounds[0], dirV)); | ||
245 | // | ||
246 | // b = bb || border; | ||
247 | // dirV = vecUtils.vecSubtract(2, bounds[1], bounds[0]); | ||
248 | // dirV = vecUtils.vecNormalize(2, dirV, b); | ||
249 | // innerBounds.push(vecUtils.vecAdd(2, bounds[0], dirV)); | ||
250 | // | ||
251 | // b = br || border; | ||
252 | // dirV = vecUtils.vecSubtract(2, bounds[2], bounds[1]); | ||
253 | // dirV = vecUtils.vecNormalize(2, dirV, b); | ||
254 | // innerBounds.push(vecUtils.vecAdd(2, bounds[1], dirV)); | ||
255 | // | ||
256 | // b = bt || border; | ||
257 | // dirV = vecUtils.vecSubtract(2, bounds[2], bounds[3]); | ||
258 | // dirV = vecUtils.vecNormalize(2, dirV, b); | ||