diff options
Diffstat (limited to 'js/lib')
-rwxr-xr-x | js/lib/NJUtils.js | 120 | ||||
-rwxr-xr-x | js/lib/geom/brush-stroke.js | 93 | ||||
-rwxr-xr-x | js/lib/geom/sub-path.js | 331 |
3 files changed, 263 insertions, 281 deletions
diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js index 7dd4c9e8..0dec6345 100755 --- a/js/lib/NJUtils.js +++ b/js/lib/NJUtils.js | |||
@@ -90,30 +90,6 @@ exports.NJUtils = Montage.create(Component, { | |||
90 | } | 90 | } |
91 | }, | 91 | }, |
92 | 92 | ||
93 | createModel: { | ||
94 | value: function(el) { | ||
95 | el.elementModel = Montage.create(ElementModel).initialize(el); | ||
96 | } | ||
97 | }, | ||
98 | |||
99 | createModelWithShape: { | ||
100 | value: function(el, selection) { | ||
101 | el.elementModel = Montage.create(ElementModel).initialize(el, true, selection); | ||
102 | } | ||
103 | }, | ||
104 | |||
105 | createModelWithSelection: { | ||
106 | value: function(el, selection) { | ||
107 | el.elementModel = Montage.create(ElementModel).initialize(el, false, selection); | ||
108 | } | ||
109 | }, | ||
110 | |||
111 | createModelForComponent: { | ||
112 | value: function(el, selection) { | ||
113 | el.elementModel = Montage.create(ElementModel).initialize(el, false, selection, true); | ||
114 | } | ||
115 | }, | ||
116 | |||
117 | // TODO: Find a better place for this method | 93 | // TODO: Find a better place for this method |
118 | stylesFromDraw: { | 94 | stylesFromDraw: { |
119 | value: function(element, width, height, drawData, pos) { | 95 | value: function(element, width, height, drawData, pos) { |
@@ -166,102 +142,6 @@ exports.NJUtils = Montage.create(Component, { | |||
166 | } | 142 | } |
167 | }, | 143 | }, |
168 | 144 | ||
169 | ///// Element Model creation for existing elements | ||
170 | ///// TODO: find a different place for this function | ||
171 | makeElementModel: { | ||
172 | value: function(el, selection, controller, isShape) { | ||
173 | var p3d = Montage.create(Properties3D); | ||
174 | |||
175 | var shapeProps = null; | ||
176 | var pi = controller + "Pi"; | ||
177 | |||
178 | if(isShape) { | ||
179 | shapeProps = Montage.create(ShapeModel); | ||
180 | } | ||
181 | |||
182 | if(el.controller) { | ||
183 | |||
184 | var componentInfo = Montage.getInfoForObject(el.controller); | ||
185 | var componentName = componentInfo.objectName.toLowerCase(); | ||
186 | |||
187 | controller = "component"; | ||
188 | isShape = false; | ||
189 | |||
190 | switch(componentName) { | ||
191 | case "feedreader": | ||
192 | selection = "Feed Reader"; | ||
193 | pi = "FeedReaderPi"; | ||
194 | break; | ||
195 | case "map": | ||
196 | selection = "Map"; | ||
197 | pi = "MapPi"; | ||
198 | break; | ||
199 | case "youtubechannel": | ||
200 | selection = "Youtube Channel"; | ||
201 | pi = "YoutubeChannelPi"; | ||
202 | break; | ||
203 | case "picasacarousel": | ||
204 | selection = "Picasa Carousel"; | ||
205 | pi = "PicasaCarouselPi"; | ||
206 | break; | ||
207 | } | ||
208 | } | ||
209 | |||
210 | el.elementModel = Montage.create(ElementModel, { | ||
211 | type: { value: el.nodeName}, | ||
212 | selection: { value: selection}, | ||
213 | controller: { value: ControllerFactory.getController(controller)}, | ||
214 | pi: { value: pi}, | ||
215 | props3D: { value: p3d}, | ||
216 | shapeModel: { value: shapeProps}, | ||
217 | isShape: { value: isShape} | ||
218 | }); | ||
219 | |||
220 | |||
221 | } | ||
222 | }, | ||
223 | |||
224 | ///// Element Model creation for existing elements based on element type. | ||
225 | ///// TODO: Selection and model should be based on the element type | ||
226 | makeModelFromElement: { | ||
227 | value: function(el) { | ||
228 | var selection = "div", | ||
229 | controller = "block", | ||
230 | isShape = false; | ||
231 | switch(el.nodeName.toLowerCase()) | ||
232 | { | ||
233 | case "div": | ||
234 | break; | ||
235 | case "img": | ||
236 | selection = "image"; | ||
237 | controller = "image"; | ||
238 | break; | ||
239 | case "video": | ||
240 | selection = "video"; | ||
241 | controller = "video"; | ||
242 | break; | ||
243 | case "canvas": | ||
244 | isShape = el.getAttribute("data-RDGE-id"); | ||
245 | if(isShape) { | ||
246 | // TODO - Need more info about the shape | ||
247 | selection = "canvas"; | ||
248 | controller = "shape"; | ||
249 | isShape = true; | ||
250 | } else { | ||
251 | selection = "canvas"; | ||
252 | controller = "canvas"; | ||
253 | } | ||
254 | break; | ||
255 | case "shape": | ||
256 | break; | ||
257 | } | ||
258 | this.makeElementModel(el, selection, controller, isShape); | ||
259 | if(el.elementModel && el.elementModel.props3D) { | ||
260 | el.elementModel.props3D.init(el, (selection === "Stage")); | ||
261 | } | ||
262 | } | ||
263 | }, | ||
264 | |||
265 | ///// Removes all child nodes and returns node | 145 | ///// Removes all child nodes and returns node |
266 | ///// Accepts a single node, or an array of dom nodes | 146 | ///// Accepts a single node, or an array of dom nodes |
267 | empty : { | 147 | empty : { |
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index 6facdd5d..09a7023c 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js | |||
@@ -264,13 +264,67 @@ var BrushStroke = function GLBrushStroke() { | |||
264 | this._strokeStyle = s; | 264 | this._strokeStyle = s; |
265 | }; | 265 | }; |
266 | 266 | ||
267 | this.setWidth = function () { | 267 | this.setWidth = function (newW) { |
268 | if (newW<1) { | ||
269 | newW=1; //clamp minimum width to 1 | ||
270 | } | ||
271 | |||
272 | //scale the contents of this subpath to lie within this width | ||
273 | //determine the scale factor by comparing with the old width | ||
274 | var oldWidth = this._BBoxMax[0]-this._BBoxMin[0]; | ||
275 | if (oldWidth<1) { | ||
276 | oldWidth=1; | ||
277 | } | ||
278 | |||
279 | var scaleX = newW/oldWidth; | ||
280 | if (scaleX===1) { | ||
281 | return; //no need to do anything | ||
282 | } | ||
283 | |||
284 | //scale the local point positions such that the width of the bbox is the newW | ||
285 | var origX = this._BBoxMin[0]; | ||
286 | var numPoints = this._LocalPoints.length; | ||
287 | for (var i=0;i<numPoints;i++){ | ||
288 | //compute the distance from the bboxMin | ||
289 | var oldW = this._LocalPoints[i][0] - origX; | ||
290 | this._LocalPoints[i] = [(origX + oldW*scaleX),this._LocalPoints[i][1],this._LocalPoints[i][2]]; | ||
291 | |||
292 | oldW = this._OrigLocalPoints[i][0] - origX; | ||
293 | this._OrigLocalPoints[i] = [(origX + oldW*scaleX),this._OrigLocalPoints[i][1],this._OrigLocalPoints[i][2]]; | ||
294 | } | ||
295 | this._isDirty = true; | ||
296 | }; | ||
297 | |||
298 | this.setHeight = function (newH) { | ||
299 | if (newH<1) { | ||
300 | newH=1; //clamp minimum width to 1 | ||
301 | } | ||
268 | 302 | ||
269 | };//NO-OP for now | 303 | //scale the contents of this subpath to lie within this height |
304 | //determine the scale factor by comparing with the old height | ||
305 | var oldHeight = this._BBoxMax[1]-this._BBoxMin[1]; | ||
306 | if (oldHeight<1) { | ||
307 | oldHeight=1; | ||
308 | } | ||
309 | |||
310 | var scaleY = newH/oldHeight; | ||
311 | if (scaleY===1) { | ||
312 | return; //no need to do anything | ||
313 | } | ||
270 | 314 | ||
271 | this.setHeight = function () { | 315 | //scale the local point positions such that the width of the bbox is the newW |
316 | var origY = this._BBoxMin[1]; | ||
317 | var numPoints = this._LocalPoints.length; | ||
318 | for (var i=0;i<numPoints;i++){ | ||
319 | //compute the distance from the bboxMin | ||
320 | var oldH = this._LocalPoints[i][1] - origY; | ||
321 | this._LocalPoints[i] = [this._LocalPoints[i][0],(origY + oldH*scaleY),this._LocalPoints[i][2]]; | ||
272 | 322 | ||
273 | };//NO-OP for now | 323 | oldH = this._OrigLocalPoints[i][1] - origY; |
324 | this._OrigLocalPoints[i] = [this._OrigLocalPoints[i][0],(origY + oldH*scaleY),this._OrigLocalPoints[i][2]]; | ||
325 | } | ||
326 | this._isDirty = true; | ||
327 | }; | ||
274 | 328 | ||
275 | this.getWidth = function() { | 329 | this.getWidth = function() { |
276 | if (this._isDirty){ | 330 | if (this._isDirty){ |
@@ -583,7 +637,7 @@ var BrushStroke = function GLBrushStroke() { | |||
583 | //build the stamp for the brush stroke | 637 | //build the stamp for the brush stroke |
584 | var t=0; | 638 | var t=0; |
585 | var numTraces = this._strokeWidth; | 639 | var numTraces = this._strokeWidth; |
586 | var halfNumTraces = numTraces/2; | 640 | var halfNumTraces = numTraces*0.5; |
587 | var opaqueRegionHalfWidth = 0.5*this._strokeHardness*numTraces*0.01; //the 0.01 is to convert the strokeHardness from [0,100] to [0,1] | 641 | var opaqueRegionHalfWidth = 0.5*this._strokeHardness*numTraces*0.01; //the 0.01 is to convert the strokeHardness from [0,100] to [0,1] |
588 | var maxTransparentRegionHalfWidth = halfNumTraces-opaqueRegionHalfWidth; | 642 | var maxTransparentRegionHalfWidth = halfNumTraces-opaqueRegionHalfWidth; |
589 | 643 | ||
@@ -603,20 +657,23 @@ var BrushStroke = function GLBrushStroke() { | |||
603 | ctx.lineCap="butt"; | 657 | ctx.lineCap="butt"; |
604 | ctx.globalCompositeOperation = 'source-over'; | 658 | ctx.globalCompositeOperation = 'source-over'; |
605 | ctx.globalAlpha = this._strokeColor[3]; | 659 | ctx.globalAlpha = this._strokeColor[3]; |
606 | //todo figure out the correct formula for the line width | 660 | |
607 | ctx.lineWidth=2; | ||
608 | if (t===numTraces-1){ | ||
609 | ctx.lineWidth = 1; | ||
610 | } | ||
611 | for (t=0;t<numTraces;t++){ | 661 | for (t=0;t<numTraces;t++){ |
612 | var disp = [brushStamp[t][0], brushStamp[t][1]]; | 662 | var disp = [brushStamp[t][0], brushStamp[t][1]]; |
613 | var alphaVal = 1.0; | 663 | var alphaVal = 1.0; |
614 | var distFromOpaqueRegion = Math.abs(t-halfNumTraces) - opaqueRegionHalfWidth; | 664 | var distFromOpaqueRegion = Math.abs(t-halfNumTraces) - opaqueRegionHalfWidth; |
615 | if (distFromOpaqueRegion>0) { |