aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rw-r--r--js/controllers/elements/element-controller.js13
-rw-r--r--js/controllers/elements/shapes-controller.js12
-rw-r--r--js/data/tools-data.js2
-rw-r--r--js/tools/EyedropperTool.js199
-rw-r--r--js/tools/FillTool.js3
-rw-r--r--js/tools/InkBottleTool.js35
-rw-r--r--js/tools/modifier-tool-base.js2
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
7var Montage = require("montage/core/core").Montage, 7var 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
12exports.EyedropperTool = Montage.create(toolBase, { 13exports.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 }