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/data/tools-data.js | 2 | ||||
-rw-r--r-- | js/tools/EyedropperTool.js | 199 | ||||
-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 |
7 files changed, 235 insertions, 31 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/data/tools-data.js b/js/data/tools-data.js index de965dbc..f63d14ae 100644 --- a/js/data/tools-data.js +++ b/js/data/tools-data.js | |||
@@ -174,7 +174,7 @@ exports.ToolsData = Montage.create(Montage, { | |||
174 | "spriteSheet": true, | 174 | "spriteSheet": true, |
175 | "action": "EyedropperTool", | 175 | "action": "EyedropperTool", |
176 | "toolTip": "Eyedropper Tool", | 176 | "toolTip": "Eyedropper Tool", |
177 | "cursor": "url('images/tools/eyedropper_down.png'), default", | 177 | "cursor": "url('images/tools/eyedropper_down.png') 6 20, default", |
178 | "lastInGroup": false, | 178 | "lastInGroup": false, |
179 | "container": false, | 179 | "container": false, |
180 | "selected": false | 180 | "selected": false |
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 795753d2..43286122 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, { |
@@ -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,13 @@ 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 | if(this._imageDataCanvas) | ||
55 | { | ||
56 | this.application.ninja.stage.element.removeChild(this._imageDataCanvas); | ||
57 | this._imageDataCanvas = null; | ||
58 | this._imageDataContext = null; | ||
59 | } | ||
49 | } | 60 | } |
50 | if(this._isMouseDown) | 61 | if(this._isMouseDown) |
51 | { | 62 | { |
@@ -67,6 +78,14 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
67 | this._updateColor(this._color); | 78 | this._updateColor(this._color); |
68 | 79 | ||
69 | this._color = null; | 80 | this._color = null; |
81 | |||
82 | this._elementUnderMouse = null; | ||
83 | if(this._imageDataCanvas) | ||
84 | { | ||
85 | this.application.ninja.stage.element.removeChild(this._imageDataCanvas); | ||
86 | this._imageDataCanvas = null; | ||
87 | this._imageDataContext = null; | ||
88 | } | ||
70 | } | 89 | } |
71 | } | 90 | } |
72 | }, | 91 | }, |
@@ -95,27 +114,80 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
95 | 114 | ||
96 | _updateColorFromPoint: { | 115 | _updateColorFromPoint: { |
97 | value : function (event) { | 116 | value : function (event) { |
98 | var obj = this.application.ninja.stage.GetElement(event); | 117 | var c, |
118 | color, | ||
119 | obj = this.application.ninja.stage.GetElement(event); | ||
99 | if (obj) | 120 | if (obj) |
100 | { | 121 | { |
101 | // TODO - figure out if user clicked on a border - for now, just get fill | 122 | this._elementUnderMouse = obj; |
102 | var c = ElementsMediator.getColor(obj, true); | 123 | // Depending on the object type, we need to get different colors |
103 | if(c) | 124 | if(obj.elementModel.type === "IMG") |
125 | { | ||
126 | c = this._getColorAtPoint(obj, event); | ||
127 | if(c) | ||
128 | { | ||
129 | color = this.application.ninja.colorController.getColorObjFromCss(c); | ||
130 | } | ||
131 | } | ||
132 | else if (obj.elementModel.type === "CANVAS") | ||
133 | { | ||
134 | if(this._imageDataCanvas) | ||
135 | { | ||
136 | this.application.ninja.stage.element.removeChild(this._imageDataCanvas); | ||
137 | this._imageDataCanvas = null; | ||
138 | this._imageDataContext = null; | ||
139 | } | ||
140 | |||
141 | var pt = webkitConvertPointFromPageToNode(obj, | ||
142 | new WebKitPoint(event.pageX, event.pageY)), | ||
143 | ctx = obj.getContext("2d"); | ||
144 | |||
145 | c = this._getColorFromCanvas(ctx, pt); | ||
146 | if(c) | ||
147 | { | ||
148 | color = this.application.ninja.colorController.getColorObjFromCss(c); | ||
149 | } | ||
150 | } | ||
151 | else | ||
104 | { | 152 | { |
105 | var color = this.application.ninja.colorController.getColorObjFromCss(c); | 153 | if(this._imageDataCanvas) |
106 | if (color && color.value) { | 154 | { |
107 | color.value.wasSetByCode = true; | 155 | this.application.ninja.stage.element.removeChild(this._imageDataCanvas); |
108 | color.value.type = 'changing'; | 156 | this._imageDataCanvas = null; |
109 | if (color.value.a) { | 157 | this._imageDataContext = null; |
110 | this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, | ||
111 | wasSetByCode: true, | ||
112 | type: 'changing'}; | ||
113 | } | ||
114 | this.application.ninja.colorController.colorModel[color.mode] = color.value; | ||
115 | this._color = color; | ||
116 | } | 158 | } |
159 | |||
160 | // TODO - figure out if user clicked on a border - for now, just get fill | ||
161 | c = ElementsMediator.getColor(obj, this._isOverBackground(obj, event)); | ||
162 | if(c) | ||
163 | { | ||
164 | color = this.application.ninja.colorController.getColorObjFromCss(c.color.css); | ||
165 | } | ||
166 | } | ||
167 | |||