I ran FlexJSTest_SVG without any issues from Flash Builder. I will look to see how each of these graphics elements are being used.
Thanks, Peter Ent Adobe Systems On 9/9/14 8:47 PM, "OmPrakash Muppirala" <bigosma...@gmail.com> wrote: >On Tue, Sep 9, 2014 at 2:26 PM, Peter Ent <p...@adobe.com> wrote: > >> I tried that and it did not work (because the fill and stroke were not >> set), so I changed my itemRenderer to create the Rect at the point of >>use: >> >> protected function drawBar():void >> { >> if (this.width > 0 && this.height > 0) >> { >> if (filledRect == null) filledRect = new Rect(); >> var solidColor:SolidColor = new SolidColor(); >> solidColor.color = fillColor; >> var solidStroke:SolidColorStroke = new SolidColorStroke(); >> solidStroke.color = fillColor; >> solidStroke.weight = 1; >> filledRect.fill = solidColor; >> filledRect.stroke = solidStroke; >> filledRect.drawRect(0,0,this.width,this.height); >> >> if (needsAdd) { >> addElement(filledRect); >> needsAdd = false; >> } >> } >> } >> >> >> >> >> That's the AS code, but the x-compiled JS code is identical (except for >> all of the Language.as things Falcon adds). I'm getting the same >>exception >> when the filledRect element is added. I stepped through using Firebug >>and >> all of the code is being executed, so the Rect's fill and stroke are now >> set and the width and height of the itemRenderer have non-zero values. >>So >> this should draw a filled rectangle. >> > >It's possible that I have not checked in something. Are you able to >compile and run the examples\FlexJSTest_SVG without any issues? > >Perhaps you can check in your code so I can see what's happening? > >Thanks, >Om > >Thanks, >Om > > >> >> Peter Ent >> Adobe Systems >> >> >> >> On 9/9/14 4:53 PM, "OmPrakash Muppirala" <bigosma...@gmail.com> wrote: >> >> >Ah, I see what's happening. My code expects the drawXXX() [drawRect, >> >drawPath, etc.] to be called before adding it as an element to the >>parent. >> > >> >Try switching >> > >> >this.filledRect = new org.apache.flex.core.graphics.Rect(); >> >this.addElement(this.filledRect); >> > >> >to >> > >> >this.filledRect = new org.apache.flex.core.graphics.Rect(); >> >this.filledRect.drawRect(x,y,width,height); >> >this.addElement(this.filledRect); >> > >> >I can change how this works, but I don't see an invalidation mechanism >> >that >> >I can use. How do you suggest we approach this? >> > >> >Thanks, >> >Om >> > >> >On Tue, Sep 9, 2014 at 1:40 PM, OmPrakash Muppirala >><bigosma...@gmail.com >> > >> >wrote: >> > >> >> On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <p...@adobe.com> wrote: >> >> >> >>> I created a temporary item renderer to see how the x-compile would >> >>>work. >> >>> Here is the code in my temporary item renderer that creates the >>Rect: >> >>> >> >>> >> >>>>>org.apache.flex.charts.supportClasses.TempBoxRenderer.prototype.set_da >>>>>ta >> >>> = >> >>> function(value) { >> >>> org.apache.flex.charts.supportClasses.TempBoxRenderer.base(this, >> >>> 'set_data', value); >> >>> if (this.filledRect == null) { >> >>> this.filledRect = new org.apache.flex.core.graphics.Rect(); >> >>> this.addElement(this.filledRect); >> >>> } >> >>> }; >> >>> >> >>> >> >>> this.addElement() is called which leads to the addedToParent >>function >> >>> where the crash happens. I see that GraphicShape.js doesn't extends >> >>> UIBase.js, which it probably should, given how the AS side works. >> >>> >> >>> Peter >> >>> >> >>> >> >>> >> >> Are you sure you have the latest code? I remember fixing this exact >> >>issue >> >> a few commits ago. >> >> If you can check in the example, it will be easier for me to chase >>the >> >> issue down. >> >> >> >> I contemplated if I should extend GraphicShape off of a relatively >>heavy >> >> UIBase or if I can just implement IUIBase. As a temporary >>workaround, >> >>I do >> >> have an addedToParent() method in GraphicShape, where the element >>should >> >> already be on the DOM, so that getBBox() should work. >> >> >> >> Have you tried it in any other browser, maybe it is a browser >>specific >> >> issue? Are there any other errors in the console? >> >> >> >> Thanks, >> >> Om >> >> >> >> >> >>> >> >>> On 9/9/14 2:22 PM, "OmPrakash Muppirala" <bigosma...@gmail.com> >>wrote: >> >>> >> >>> >On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <p...@adobe.com> wrote: >> >>> > >> >>> >> Have run into a problem on the JS side. Firebox is telling me >>that >> >>>in >> >>> >>this >> >>> >> code from GraphicShape.js: >> >>> >> >> >>> >> >>org.apache.flex.core.graphics.GraphicShape.prototype.addedToParent = >> >>> >> function() { >> >>> >> var bbox = this.element.getBBox(); >> >>> >> this.resize(this.x_, this.y_, bbox.width + this.x_ * 2, >> >>>bbox.height + >> >>> >> this.y_ * 2); >> >>> >> }; >> >>> >> >> >>> > >> >>> >Peter, >> >>> > >> >>> >Can you please attach the html code for the svg element that is >> >>>throwing >> >>> >an >> >>> >error? I will try to repro it on my side. >> >>> >Did you try Chrome or other browsers? >> >>> > >> >>> >Thanks, >> >>> >Om >> >>> > >> >>> > >> >>> >> >> >>> >> >> >>> >> this.element.getBBox() is returning undefined. I know that >> >>>this.element >> >>> >>is >> >>> >> set with an SVG element. >> >>> >> >> >>> >> I'm using Firefox 31.0 on Mac OS X. >> >>> >> >> >>> >> Peter Ent >> >>> >> Adobe Systems >> >>> >> >> >>> >> On 9/9/14 10:37 AM, "Peter Ent" <p...@adobe.com> wrote: >> >>> >> >> >>> >> >The update to handle 'A' and 'a' works great! Thanks. >> >>> >> > >> >>> >> >Peter Ent >> >>> >> >Adobe Systems >> >>> >> > >> >>> >> >On 9/9/14 3:42 AM, "OmPrakash Muppirala" <bigosma...@gmail.com> >> >>> wrote: >> >>> >> > >> >>> >> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala >> >>> >> >><bigosma...@gmail.com> >> >>> >> >>wrote: >> >>> >> >> >> >>> >> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent <p...@adobe.com> >> >>>wrote: >> >>> >> >>> >> >>> >> >>>> I haven't tried the JS side - this is all Flash. In SVG, the >> >>>fill >> >>> >> >>>>takes >> >>> >> >>>> care of closing the path; I'm not using any line or border. >> >>> >> >>>> >> >>> >> >>>> >> >>> >> >>> Yes, it looks like the A parameter is not supported. I will >> >>>work >> >>> on >> >>> >> >>> adding this support in Path. I took a big chunk of the Path >> >>> >> >>>implementation >> >>> >> >>> from spark.primitives.Path. It seems like we do need to >>tweak >> >>>it >> >>> >> >>>further. >> >>> >> >>> >> >>> >> >>> >> >>> >> >>Hi, >> >>> >> >> >> >>> >> >>The support for 'a' and 'A' (Elliptical Arc) has been added to >>the >> >>> >>Flash >> >>> >> >>implementation of the Path api. I tried with this: >> >>> >> >> >> >>> >> >>path.drawPath(250,500,"M 50 50 L 100 50 A 50 50 0 0 0 50 0 Z"); >> >>> >> >> >> >>> >> >>and got a nice little wedge drawn on the screen. >> >>> >> >> >> >>> >> >>More importantly, the Flash and SVG renderings look (almost) >>the >> >>> same. >> >>> >> >> >> >>> >> >>As part of this implementation, I borrowed the >>drawEllipicalArc() >> >>> >>method >> >>> >> >>from the svgweb library(flash implementation of SVG) [1] The >> >>>code is >> >>> >> >>Apache licensed. I have added the link to the original code >>as a >> >>> >>comment >> >>> >> >>in our code. Do I need to mention this in the NOTICE or >>LICENSE >> >>> >>files? >> >>> >> >> >> >>> >> >>Peter, if you can do some more testing and let me know your >> >>>feedback, >> >>> >> >>that >> >>> >> >>would be great. >> >>> >> >> >> >>> >> >>And looks like this can be added to the current SDK's FXG >> >>> >>implementation >> >>> >> >>as >> >>> >> >>well. I am surprised that we did not hit this issue in the >> >>>current >> >>> >>SDK. >> >>> >> >> >> >>> >> >>Thanks, >> >>> >> >>Om >> >>> >> >> >> >>> >> >>[1] >> >>> >> >> >> >>> >> >> >>> >> >> >>> >> >>> >> https://code.google.com/p/svgweb/source/browse/trunk/src/org/svgweb/util >> >>>s >> >>> >> >>/ >> >>> >> >>EllipticalArc.as?r=1251 >> >>> >> >> >> >>> >> >> >> >>> >> >> >> >>> >> >> >> >>> >> >>> I see that mx.charts.chartClasses.GraphicsUtilities has a >> >>>drawArc() >> >>> >> >>> method. I will probably end up using that implementation. >> >>> >> >>> >> >>> >> >>> >> >>> >> >>>> Which brings me to the next issue. When drawing a series of >> >>> >>connected >> >>> >> >>>> lines (for the LineChart), the first and last points are >> >>>getting >> >>> >> >>>> connected, which I do not want. My loop to build the path >>looks >> >>> >>like >> >>> >> >>>>this, >> >>> >> >>>> below. point[0] != point[last] so they should not be >> >>>connected. I >> >>> >> >>>>tried >> >>> >> >>>> "z" and "Z" thinking one meant leave the path closed and one >> >>> closed >> >>> >> >>>>the >> >>> >> >>>> path, but that didn't make any difference. >> >>> >> >>>> >> >>> >> >>>> var pathString:String = ""; >> >>> >> >>>> >> >>> >> >>>> for (var i:int=0; i < >> >>> >>points.length; >> >>> >> >>>>i++) >> >>> >> >>>> { >> >>> >> >>>> var point:Object = >> >>>points[i]; >> >>> >> >>>> if (i == 0) >>pathString >> >>>+= >> >>> >>"M >> >>> >> >>>> "+point.x+" "+point.y+" "; >> >>> >> >>>> else pathString += >>"L >> >>> >> >>>>"+point.x+" >> >>> >> >>>> "+point.y+" "; >> >>> >> >>>> } >> >>> >> >>>> >> >>> >> >>>> pathString += "Z"; >> >>> >> >>>> >> >>> >> >>>> path.drawPath(0, 0, >> >>>pathString); >> >>> >> >>>> >> >>> >> >>>> >> >>> >> >>> >> >>> >> >>> That is weird. I will play with it and see why that is >> >>>happening. >> >>> >> >>> >> >>> >> >> >> >>> >> >>> Is moveTo() and lineTo() a better approach? >> >>> >> >>> >> >>> >> >>> In psedocode, the lines would be drawn like this: >> >>> >> >>> >> >>> >> >>> graphics.moveTo(points[0].x, points[0].y); >> >>> >> >>> for (var i:int=0; i < points.length; i++) { >> >>> >> >>> if(i+1 < points.length) >> >>> >> >>> { >> >>> >> >>> graphics.lineTo(points[i+1].x, points[i+1].y); >> >>> >> >>> } >> >>> >> >>> } >> >>> >> >>> >> >>> >> >>> In any case, I have the Line class in my list of Graphic >> >>>elements >> >>> >>to >> >>> >> >>> implement. >> >>> >> >>> >> >>> >> >>> >> >>> >> >> >> >>> >> >> >> >>> >> >> >> >>> >> >>> Thanks, >> >>> >> >>> Om >> >>> >> >>> >> >>> >> >>> >> >>> >> >>>> >> >>> >> >>>> Thanks, >> >>> >> >>>> Peter Ent >> >>> >> >>>> Adobe Systems >> >>> >> >>>> >> >>> >> >>>> On 9/8/14 4:13 PM, "OmPrakash Muppirala" >><bigosma...@gmail.com >> > >> >>> >> wrote: >> >>> >> >>>> >> >>> >> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent <p...@adobe.com> >> >>> wrote: >> >>> >> >>>> > >> >>> >> >>>> >> I took care of the gjslint issues. >> >>> >> >>>> >> >> >>> >> >>>> > >> >>> >> >>>> >Thanks! Hope it was not too much trouble. >> >>> >> >>>> > >> >>> >> >>>> > >> >>> >> >>>> >> >> >>> >> >>>> >> Can you supply more information about Path and what is in >> >>>the >> >>> >>path >> >>> >> >>>> >>string? >> >>> >> >>>> >> I have a path working in SVG to do the wedges for the pie >> >>> chart, >> >>> >> >>>>but >> >>> >> >>>> >>that >> >>> >> >>>> >> same string isn't working with core.graphics.Path. >> >>> >> >>>> >> >> >>> >> >>>> >> var pathString:String = 'M' + x + ' ' + y + ' L' + x1 + >>' ' >> >>>+ >> >>> >>y1 + >> >>> >> >>>>' A' >> >>> >> >>>> >>+ >> >>> >> >>>> >> radius + ' ' + radius + >> >>> >> >>>> >> ' 0 0 1 ' + x2 + ' ' + >>y2 + >> >>>' >> >>> >>z'; >> >>> >> >>>> >> >> >>> >> >>>> >> >> >>> >> >>>> >> It doesn't look, to me, like "A" is being recognized. >> >>> >> >>>> >> >> >>> >> >>>> > >> >>> >> >>>> >The path looks like it is doing the following: >> >>> >> >>>> >M x y : move to x, y >> >>> >> >>>> >L x1 y1 : draw line from x,y to x1,y1 >> >>> >> >>>> >A radius radius : draw an arc with xradius=radius and >> >>>yradius = >> >>> >> >>>>radius >> >>> >> >>>> >(so, a circular arc) >> >>> >> >>>> >0 0 1 : x-axis rotation=0, large-arc = false, sweep = true >> >>> >> >>>> >x2 y2 : ending point of the arc >> >>> >> >>>> >z : finish drawing >> >>> >> >>>> > >> >>> >> >>>> >BTW, don't you need another line to complete the wedge? >> >>> >> >>>> > >> >>> >> >>>> >Is it working fine on the flash side? I will take a look >> >>>soon. >> >>> >> >>>> > >> >>> >> >>>> >Thanks, >> >>> >> >>>> >Om >> >>> >> >>>> > >> >>> >> >>>> > >> >>> >> >>>> >> >> >>> >> >>>> >> Thanks, >> >>> >> >>>> >> Peter Ent >> >>> >> >>>> >> Adobe Systems >> >>> >> >>>> >> >> >>> >> >>>> >> On 9/8/14 12:04 PM, "OmPrakash Muppirala" < >> >>> bigosma...@gmail.com> >> >>> >> >>>> wrote: >> >>> >> >>>> >> >> >>> >> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent" <p...@adobe.com> >> wrote: >> >>> >> >>>> >> >> >> >>> >> >>>> >> >> I forgot to add that when I build flex-asjs, gjslint >> >>>finds a >> >>> >> >>>>number >> >>> >> >>>> >>of >> >>> >> >>>> >> >> issues in the new JS graphics code (its usual, spaces >>at >> >>>the >> >>> >>end >> >>> >> >>>>of >> >>> >> >>>> >> >>lines, >> >>> >> >>>> >> >> sort of thing). I think I am using version 2.3.10 of >> >>>gjslint >> >>> >>but >> >>> >> >>>>I'm >> >>> >> >>>> >>not >> >>> >> >>>> >> >> 100% sure. >> >>> >> >>>> >> > >> >>> >> >>>> >> >Yeah, unfortunately there is no gjslint available for >> >>>Windows. >> >>> >> I >> >>> >> >>>> >>guess I >> >>> >> >>>> >> >will need you Mac folks to help me out with this :-) >> >>> >> >>>> >> > >> >>> >> >>>> >> >Thanks, >> >>> >> >>>> >> >Om >> >>> >> >>>> >> > >> >>> >> >>>> >> >> >> >>> >> >>>> >> >> Peter Ent >> >>> >> >>>> >> >> Adobe Systems >> >>> >> >>>> >> >> >> >>> >> >>>> >> >> On 9/8/14 3:48 AM, "OmPrakash Muppirala" >> >>> >><bigosma...@gmail.com> >> >>> >> >>>> >>wrote: >> >>> >> >>>> >> >> >> >>> >> >>>> >> >> >FlexJS now supports a basic drawing API (Rect, >>Ellipse, >> >>> >>Circle, >> >>> >> >>>> >>Path, >> >>> >> >>>> >> >> >SolidColor, SolidColorStroke) Here are the AS3 [1] >>and >> >>>JS >> >>> >>[2] >> >>> >> >>>> >>versions >> >>> >> >>>> >> >> > >> >>> >> >>>> >> >> >So far, the rendering fidelity between the Flash and >> >>> >>SVG/HTML5 >> >>> >> >>>> >>version >> >>> >> >>>> >> >>is >> >>> >> >>>> >> >> >very very close. For sure, there are some pretty >>major >> >>> >>things >> >>> >> >>>>to >> >>> >> >>>> be >> >>> >> >>>> >> >> >worked >> >>> >> >>>> >> >> >out, but generally so far, the results have been very >> >>> >> >>>>encouraging. >> >>> >> >>>> >> >> > >> >>> >> >>>> >> >> >You can see a quick and dirty example here: >> >>> >> >>>> >> >> >Flash version: >> >>> >> >>>> >> >> >> http://people.apache.org/~bigosmallm/flexjs/drawing/flash/ >> >>> >> >>>> >> >> >HTML5 version: >> >>> >> >>>> >> >> >> http://people.apache.org/~bigosmallm/flexjs/drawing/html5/ >> >>> >> >>>> >> >> > >> >>> >> >>>> >> >> >HTML5 version has been tested to work fine on Chrome, >> >>> >>Firefox, >> >>> >> >>>> IE11, >> >>> >> >>>> >> >> >Android browser and iPad Safari. >> >>> >> >>>> >> >> > >> >>> >> >>>> >> >> >Next up, i will be working on the following items: >> >>> >> >>>> >> >> >Polygons, Linear gradients, Radial gradients, filters >> >>>and >> >>> >>drop >> >>> >> >>>> >>shadows. >> >>> >> >>>> >> >> >These should bring us very close to our current FXG >> >>>based >> >>> >> >>>>drawing >> >>> >> >>>> >>APIs. >> >>> >> >>>> >> >> > >> >>> >> >>>> >> >> >After that, I plan on programmatically recreating a >>few >> >>>FXG >> >>> >> >>>>based >> >>> >> >>>> >>skins >> >>> >> >>>> >> >in >> >>> >> >>>> >> >> >FlexJS and see how we can apply it skins on UI >> >>>components. >> >>> >> >>>> >> >> > >> >>> >> >>>> >> >> >Feedback welcome! >> >>> >> >>>> >> >> > >> >>> >> >>>> >> >> >[1] >> >>> >> >>>> >> >> > >> >>> >> >>>> >> > >> >>> >> >>>> >> >> >>> >> >>>> >> >> >>> >> >>>> >> >>> >> >>>> >> >>> >> >> >>> >> https://github.com/apache/flex-asjs/tree/develop/frameworks/as/projects >> >>> >> >>>>/ >> >>> >> >>>>F >> >>> >> >>>> >>l >> >>> >> >>>> >> >> >exJSUI/src/org/apache/flex/core/graphics >> >>> >> >>>> >> >> >[2] >> >>> >> >>>> >> >> > >> >>> >> >>>> >> > >> >>> >> >>>> >> >> >>> >> >>>> >> >> >>> >> >>>> >> >>> >> >>>> >> >>> >> >> >>> >> https://github.com/apache/flex-asjs/tree/develop/frameworks/js/FlexJS/s >> >>> >> >>>>r >> >>> >> >>>>c >> >>> >> >>>> >>/ >> >>> >> >>>> >> >> >org/apache/flex/core/graphics >> >>> >> >>>> >> >> >> >>> >> >>>> >> >> >>> >> >>>> >> >> >>> >> >>>> >> >>> >> >>>> >> >>> >> >>> >> >>> >> > >> >>> >> >> >>> >> >> >>> >> >>> >> >> >> >>