You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by OmPrakash Muppirala <bi...@gmail.com> on 2014/09/09 20:22:35 UTC

[FlexJS] Path API bug (Was Re: [FlexJS] Drawing API)

On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <pe...@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" <pe...@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" <bi...@gmail.com> wrote:
> >
> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala
> >><bi...@gmail.com>
> >>wrote:
> >>
> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent <pe...@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/utils
> >>/
> >>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" <bi...@gmail.com>
> wrote:
> >>>>
> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent <pe...@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" <bi...@gmail.com>
> >>>> wrote:
> >>>> >>
> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent" <pe...@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" <bi...@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
> >>>> >> >>
> >>>> >>
> >>>> >>
> >>>>
> >>>>
> >>>
> >
>
>

Re: [FlexJS] Path API bug (Was Re: [FlexJS] Drawing API)

Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Sep 10, 2014 7:12 AM, "Peter Ent" <pe...@adobe.com> wrote:
>
> That last message was for the ActionScript side. When I build the sample
> in JavaScript - with my change to remove the fill on path2, I get this
> runtime error:
>
> TypeError: this.get_fill(...) is null
> var color = Number(this.get_fill().get_color()).toString(16);
>
>
>
> Here is the code from GraphicShape.js:
>
> org.apache.flex.core.graphics.GraphicShape.prototype.getStyleStr =
> function() {
>   var color = Number(this.get_fill().get_color()).toString(16);
>   if (color.length == 2) color = '00' + color;
>   if (color.length == 4) color = '00' + color;
>   var strokeColor = Number(this.get_stroke().get_color()).toString(16);
>   if (strokeColor.length == 2) strokeColor = '00' + strokeColor;
>   if (strokeColor.length == 4) strokeColor = '00' + strokeColor;
>
>   return 'fill:#' + String(color) + ';stroke:#' + String(strokeColor) +
> ';stroke-width:' +
>          String(this.get_stroke().get_weight()) + ';fill-opacity:' +
> String(this.get_fill().get_alpha());
> };
>

This looks like stale code.  I checked in a fix for this issue last night.
Can you get the latest and try out?


>
> Since the Path does not have a fill set, this.get_fill() is returning
null.
>
> I'm really looking forward to having the chart package's itemRenderers
> x-compiled and using this graphics package. I hope we can get these issues
> and licensing issues resolved.
>

Likewise!  I plan to work with you and fix any and all issues that crop up
:-)

Thanks,
Om

> Thanks,
> Peter Ent
> Adobe Systems
>
> On 9/10/14 10:06 AM, "Peter Ent" <pe...@adobe.com> wrote:
>
> >I made a small modification to FlexJSTest_SVG:
> >
> >
> >var path2:Path = new Path();
> >                               fill.color = 0x00FF00;
> >                               fill.alpha = 0.5;
> >//                             path2.fill = fill;
> >                               stroke.color = 0xFF00FF;
> >                               stroke.weight = 3;
> >                               path2.stroke = stroke;
> >                               path2.drawPath(250,500,"M150 0 L75 200
L225 200 Z");
> >                               this.addElement(path2);
> >
> >
> >
> >I removed the fill for the Path. This should have drawn 2 lines starting
> >at (150,0) with a line to (75,200) and another to (225,200). Which it
did.
> >But it also closed the figure by drawing a third line from (225,200) back
> >to (150,0).
> >
> >For the LineChart, the first and last points cannot be closed.
> >
> >Thanks,
> >Peter Ent
> >Adobe Systems
> >
> >On 9/10/14 9:26 AM, "Peter Ent" <pe...@adobe.com> wrote:
> >
> >>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" <bi...@gmail.com> wrote:
> >>
> >>>On Tue, Sep 9, 2014 at 2:26 PM, Peter Ent <pe...@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" <bi...@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
> >>>><bigosmallm@gmail.com
> >>>> >
> >>>> >wrote:
> >>>> >
> >>>> >> On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <pe...@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_
> >>>>>>>d
> >>>>>>>a
> >>>>>>>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" <bi...@gmail.com>
> >>>>wrote:
> >>>> >>>
> >>>> >>> >On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <pe...@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" <pe...@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"
> >>>><bi...@gmail.com>
> >>>> >>> wrote:
> >>>> >>> >> >
> >>>> >>> >> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala
> >>>> >>> >> >><bi...@gmail.com>
> >>>> >>> >> >>wrote:
> >>>> >>> >> >>
> >>>> >>> >> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent <pe...@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/uti
> >>>>l
> >>>> >>>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"
> >>>><bigosmallm@gmail.com
> >>>> >
> >>>> >>> >> wrote:
> >>>> >>> >> >>>>
> >>>> >>> >> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent
> >>>><pe...@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" <
> >>>> >>> bigosmallm@gmail.com>
> >>>> >>> >> >>>> wrote:
> >>>> >>> >> >>>> >>
> >>>> >>> >> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent" <pe...@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"
> >>>> >>> >><bi...@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
> >>>> >>> >> >>>> >> >>
> >>>> >>> >> >>>> >>
> >>>> >>> >> >>>> >>
> >>>> >>> >> >>>>
> >>>> >>> >> >>>>
> >>>> >>> >> >>>
> >>>> >>> >> >
> >>>> >>> >>
> >>>> >>> >>
> >>>> >>>
> >>>> >>>
> >>>> >>
> >>>>
> >>>>
> >>
> >
>

Re: [FlexJS] Path API bug (Was Re: [FlexJS] Drawing API)

Posted by Peter Ent <pe...@adobe.com>.
That last message was for the ActionScript side. When I build the sample
in JavaScript - with my change to remove the fill on path2, I get this
runtime error:

TypeError: this.get_fill(...) is null
var color = Number(this.get_fill().get_color()).toString(16);



Here is the code from GraphicShape.js:

org.apache.flex.core.graphics.GraphicShape.prototype.getStyleStr =
function() {
  var color = Number(this.get_fill().get_color()).toString(16);
  if (color.length == 2) color = '00' + color;
  if (color.length == 4) color = '00' + color;
  var strokeColor = Number(this.get_stroke().get_color()).toString(16);
  if (strokeColor.length == 2) strokeColor = '00' + strokeColor;
  if (strokeColor.length == 4) strokeColor = '00' + strokeColor;

  return 'fill:#' + String(color) + ';stroke:#' + String(strokeColor) +
';stroke-width:' +
         String(this.get_stroke().get_weight()) + ';fill-opacity:' +
String(this.get_fill().get_alpha());
};


Since the Path does not have a fill set, this.get_fill() is returning null.

I'm really looking forward to having the chart package's itemRenderers
x-compiled and using this graphics package. I hope we can get these issues
and licensing issues resolved.

Thanks,
Peter Ent
Adobe Systems

On 9/10/14 10:06 AM, "Peter Ent" <pe...@adobe.com> wrote:

>I made a small modification to FlexJSTest_SVG:
>	
>
>var path2:Path = new Path();
>				fill.color = 0x00FF00;
>				fill.alpha = 0.5;
>//				path2.fill = fill;
>				stroke.color = 0xFF00FF;
>				stroke.weight = 3;
>				path2.stroke = stroke;
>				path2.drawPath(250,500,"M150 0 L75 200 L225 200 Z");
>				this.addElement(path2);
>
>
>
>I removed the fill for the Path. This should have drawn 2 lines starting
>at (150,0) with a line to (75,200) and another to (225,200). Which it did.
>But it also closed the figure by drawing a third line from (225,200) back
>to (150,0).
>
>For the LineChart, the first and last points cannot be closed.
>
>Thanks,
>Peter Ent
>Adobe Systems
>
>On 9/10/14 9:26 AM, "Peter Ent" <pe...@adobe.com> wrote:
>
>>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" <bi...@gmail.com> wrote:
>>
>>>On Tue, Sep 9, 2014 at 2:26 PM, Peter Ent <pe...@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" <bi...@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
>>>><bigosmallm@gmail.com
>>>> >
>>>> >wrote:
>>>> >
>>>> >> On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <pe...@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_
>>>>>>>d
>>>>>>>a
>>>>>>>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" <bi...@gmail.com>
>>>>wrote:
>>>> >>>
>>>> >>> >On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <pe...@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" <pe...@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"
>>>><bi...@gmail.com>
>>>> >>> wrote:
>>>> >>> >> >
>>>> >>> >> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala
>>>> >>> >> >><bi...@gmail.com>
>>>> >>> >> >>wrote:
>>>> >>> >> >>
>>>> >>> >> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent <pe...@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/uti
>>>>l
>>>> >>>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"
>>>><bigosmallm@gmail.com
>>>> >
>>>> >>> >> wrote:
>>>> >>> >> >>>>
>>>> >>> >> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent
>>>><pe...@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" <
>>>> >>> bigosmallm@gmail.com>
>>>> >>> >> >>>> wrote:
>>>> >>> >> >>>> >>
>>>> >>> >> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent" <pe...@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"
>>>> >>> >><bi...@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
>>>> >>> >> >>>> >> >>
>>>> >>> >> >>>> >>
>>>> >>> >> >>>> >>
>>>> >>> >> >>>>
>>>> >>> >> >>>>
>>>> >>> >> >>>
>>>> >>> >> >
>>>> >>> >>
>>>> >>> >>
>>>> >>>
>>>> >>>
>>>> >>
>>>>
>>>>
>>
>

Re: [FlexJS] Path API bug (Was Re: [FlexJS] Drawing API)

Posted by Peter Ent <pe...@adobe.com>.
The one major change I had to make (aside from removing the Z from my
LineChart path) was when the core/graphics element was added to its parent.

I was creating the element (e.g., Rect), setting its properties, and then
adding it as an element to the ChartDataGroup. This was fine on AS, but on
the JS side I was getting an error in GraphicShape.js when it tried to get
the SVG bounding box.

I switched things around to add the graphic element to the ChartDataGroup
immediately after creating it. Then everything worked.

Peter Ent
Adobe Systems

On 9/10/14 4:27 PM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:

>On Wed, Sep 10, 2014 at 1:21 PM, Peter Ent <pe...@adobe.com> wrote:
>
>> More details emerged: On the JS side, I had created ChartDataGroup to
>>hold
>> the chart graphics. Since this was going to be SVG, I had ChartDataGroup
>> create an SVG element. All of the itemRenderers I created simply added
>>SVG
>> graphics to this <svg> element. Switching to Om's core/graphics library
>> caused a problem as it was trying to add an <svg> to an <svg>. Once I
>> changed ChartDataGroup to use <div>, I began seeing the chart elements
>> appearing.
>>
>>
>Ah, thanks for figuring that out.  I was breaking my head trying to repro
>and debug this issue on my side.  Good to know!
>
>
>> I have some other things to sort out, but it is looking good.
>>
>
>Awesome!  Looking forward to seeing some working apps.
>
>Thanks,
>Om
>
>
>>
>> Peter Ent
>> Adobe Systems
>>
>> On 9/10/14 12:51 PM, "Peter Ent" <pe...@adobe.com> wrote:
>>
>> >I have the latest code; I didn't install it into my Apache FlexJS
>> >deployment. That last step always gets me.
>> >
>> >I did more research on Path and discovered that the presence of the Z
>>is
>> >making the path closed (I thought a path string MUST end with a Z), so
>>I
>> >believe I can proceed with converting the chart package over to
>> >core/graphics.
>> >
>> >Thanks, Om, for your help and patience.
>> >
>> >--peter
>> >
>> >On 9/10/14 10:45 AM, "OmPrakash Muppirala" <bi...@gmail.com>
>>wrote:
>> >
>> >>On Sep 10, 2014 7:07 AM, "Peter Ent" <pe...@adobe.com> wrote:
>> >>>
>> >>> I made a small modification to FlexJSTest_SVG:
>> >>>
>> >>>
>> >>> var path2:Path = new Path();
>> >>>                                 fill.color = 0x00FF00;
>> >>>                                 fill.alpha = 0.5;
>> >>> //                              path2.fill = fill;
>> >>>                                 stroke.color = 0xFF00FF;
>> >>>                                 stroke.weight = 3;
>> >>>                                 path2.stroke = stroke;
>> >>>                                 path2.drawPath(250,500,"M150 0 L75
>>200
>> >>L225 200 Z");
>> >>>                                 this.addElement(path2);
>> >>>
>> >>>
>> >>>
>> >>> I removed the fill for the Path. This should have drawn 2 lines
>> >>>starting
>> >>> at (150,0) with a line to (75,200) and another to (225,200). Which
>>it
>> >>>did.
>> >>> But it also closed the figure by drawing a third line from (225,200)
>> >>>back
>> >>> to (150,0).
>> >>
>> >>That is so weird. It did not do that when I tested it.  Will try it
>>out
>> >>again in some time and see what's going on.
>> >>
>> >>>
>> >>> For the LineChart, the first and last points cannot be closed.
>> >>>
>> >>> Thanks,
>> >>> Peter Ent
>> >>> Adobe Systems
>> >>>
>> >>> On 9/10/14 9:26 AM, "Peter Ent" <pe...@adobe.com> wrote:
>> >>>
>> >>> >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" <bi...@gmail.com>
>> wrote:
>> >>> >
>> >>> >>On Tue, Sep 9, 2014 at 2:26 PM, Peter Ent <pe...@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" <bi...@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
>> >>> >>><bigosmallm@gmail.com
>> >>> >>> >
>> >>> >>> >wrote:
>> >>> >>> >
>> >>> >>> >> On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <pe...@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.s
>>>>>>>>>>et
>> >>>>>>>>_
>> >>>>>>>>d
>> >>> >>>>>>a
>> >>> >>>>>>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"
>><bigosmallm@gmail.com
>> >
>> >>> >>>wrote:
>> >>> >>> >>>
>> >>> >>> >>> >On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <pe...@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" <pe...@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"
>> >>><bigosmallm@gmail.com
>> >>>
>> >>> >>> >>> wrote:
>> >>> >>> >>> >> >
>> >>> >>> >>> >> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala
>> >>> >>> >>> >> >><bi...@gmail.com>
>> >>> >>> >>> >> >>wrote:
>> >>> >>> >>> >> >>
>> >>> >>> >>> >> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent
>> >>><pe...@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/uti
>>>>l
>> >>> >>> >>>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"
>> >>> >>><bigosmallm@gmail.com
>> >>> >>> >
>> >>> >>> >>> >> wrote:
>> >>> >>> >>> >> >>>>
>> >>> >>> >>> >> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent
>> >>> >>><pe...@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" <
>> >>> >>> >>> bigosmallm@gmail.com>
>> >>> >>> >>> >> >>>> wrote:
>> >>> >>> >>> >> >>>> >>
>> >>> >>> >>> >> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent"
>> >>><pe...@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"
>> >>> >>> >>> >><bi...@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
>> >>> >>> >>> >> >>>> >> >>
>> >>> >>> >>> >> >>>> >>
>> >>> >>> >>> >> >>>> >>
>> >>> >>> >>> >> >>>>
>> >>> >>> >>> >> >>>>
>> >>> >>> >>> >> >>>
>> >>> >>> >>> >> >
>> >>> >>> >>> >>
>> >>> >>> >>> >>
>> >>> >>> >>>
>> >>> >>> >>>
>> >>> >>> >>
>> >>> >>>
>> >>> >>>
>> >>> >
>> >>>
>> >
>>
>>

Re: [FlexJS] Path API bug (Was Re: [FlexJS] Drawing API)

Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Wed, Sep 10, 2014 at 1:21 PM, Peter Ent <pe...@adobe.com> wrote:

> More details emerged: On the JS side, I had created ChartDataGroup to hold
> the chart graphics. Since this was going to be SVG, I had ChartDataGroup
> create an SVG element. All of the itemRenderers I created simply added SVG
> graphics to this <svg> element. Switching to Om's core/graphics library
> caused a problem as it was trying to add an <svg> to an <svg>. Once I
> changed ChartDataGroup to use <div>, I began seeing the chart elements
> appearing.
>
>
Ah, thanks for figuring that out.  I was breaking my head trying to repro
and debug this issue on my side.  Good to know!


> I have some other things to sort out, but it is looking good.
>

Awesome!  Looking forward to seeing some working apps.

Thanks,
Om


>
> Peter Ent
> Adobe Systems
>
> On 9/10/14 12:51 PM, "Peter Ent" <pe...@adobe.com> wrote:
>
> >I have the latest code; I didn't install it into my Apache FlexJS
> >deployment. That last step always gets me.
> >
> >I did more research on Path and discovered that the presence of the Z is
> >making the path closed (I thought a path string MUST end with a Z), so I
> >believe I can proceed with converting the chart package over to
> >core/graphics.
> >
> >Thanks, Om, for your help and patience.
> >
> >--peter
> >
> >On 9/10/14 10:45 AM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
> >
> >>On Sep 10, 2014 7:07 AM, "Peter Ent" <pe...@adobe.com> wrote:
> >>>
> >>> I made a small modification to FlexJSTest_SVG:
> >>>
> >>>
> >>> var path2:Path = new Path();
> >>>                                 fill.color = 0x00FF00;
> >>>                                 fill.alpha = 0.5;
> >>> //                              path2.fill = fill;
> >>>                                 stroke.color = 0xFF00FF;
> >>>                                 stroke.weight = 3;
> >>>                                 path2.stroke = stroke;
> >>>                                 path2.drawPath(250,500,"M150 0 L75 200
> >>L225 200 Z");
> >>>                                 this.addElement(path2);
> >>>
> >>>
> >>>
> >>> I removed the fill for the Path. This should have drawn 2 lines
> >>>starting
> >>> at (150,0) with a line to (75,200) and another to (225,200). Which it
> >>>did.
> >>> But it also closed the figure by drawing a third line from (225,200)
> >>>back
> >>> to (150,0).
> >>
> >>That is so weird. It did not do that when I tested it.  Will try it out
> >>again in some time and see what's going on.
> >>
> >>>
> >>> For the LineChart, the first and last points cannot be closed.
> >>>
> >>> Thanks,
> >>> Peter Ent
> >>> Adobe Systems
> >>>
> >>> On 9/10/14 9:26 AM, "Peter Ent" <pe...@adobe.com> wrote:
> >>>
> >>> >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" <bi...@gmail.com>
> wrote:
> >>> >
> >>> >>On Tue, Sep 9, 2014 at 2:26 PM, Peter Ent <pe...@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" <bi...@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
> >>> >>><bigosmallm@gmail.com
> >>> >>> >
> >>> >>> >wrote:
> >>> >>> >
> >>> >>> >> On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <pe...@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
> >>>>>>>>_
> >>>>>>>>d
> >>> >>>>>>a
> >>> >>>>>>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" <bigosmallm@gmail.com
> >
> >>> >>>wrote:
> >>> >>> >>>
> >>> >>> >>> >On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <pe...@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" <pe...@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"
> >>><bigosmallm@gmail.com
> >>>
> >>> >>> >>> wrote:
> >>> >>> >>> >> >
> >>> >>> >>> >> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala
> >>> >>> >>> >> >><bi...@gmail.com>
> >>> >>> >>> >> >>wrote:
> >>> >>> >>> >> >>
> >>> >>> >>> >> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent
> >>><pe...@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"
> >>> >>><bigosmallm@gmail.com
> >>> >>> >
> >>> >>> >>> >> wrote:
> >>> >>> >>> >> >>>>
> >>> >>> >>> >> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent
> >>> >>><pe...@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" <
> >>> >>> >>> bigosmallm@gmail.com>
> >>> >>> >>> >> >>>> wrote:
> >>> >>> >>> >> >>>> >>
> >>> >>> >>> >> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent"
> >>><pe...@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"
> >>> >>> >>> >><bi...@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
> >>> >>> >>> >> >>>> >> >>
> >>> >>> >>> >> >>>> >>
> >>> >>> >>> >> >>>> >>
> >>> >>> >>> >> >>>>
> >>> >>> >>> >> >>>>
> >>> >>> >>> >> >>>
> >>> >>> >>> >> >
> >>> >>> >>> >>
> >>> >>> >>> >>
> >>> >>> >>>
> >>> >>> >>>
> >>> >>> >>
> >>> >>>
> >>> >>>
> >>> >
> >>>
> >
>
>

Re: [FlexJS] Path API bug (Was Re: [FlexJS] Drawing API)

Posted by Peter Ent <pe...@adobe.com>.
More details emerged: On the JS side, I had created ChartDataGroup to hold
the chart graphics. Since this was going to be SVG, I had ChartDataGroup
create an SVG element. All of the itemRenderers I created simply added SVG
graphics to this <svg> element. Switching to Om's core/graphics library
caused a problem as it was trying to add an <svg> to an <svg>. Once I
changed ChartDataGroup to use <div>, I began seeing the chart elements
appearing.

I have some other things to sort out, but it is looking good.

Peter Ent
Adobe Systems

On 9/10/14 12:51 PM, "Peter Ent" <pe...@adobe.com> wrote:

>I have the latest code; I didn't install it into my Apache FlexJS
>deployment. That last step always gets me.
>
>I did more research on Path and discovered that the presence of the Z is
>making the path closed (I thought a path string MUST end with a Z), so I
>believe I can proceed with converting the chart package over to
>core/graphics.
>
>Thanks, Om, for your help and patience.
>
>--peter
>
>On 9/10/14 10:45 AM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>
>>On Sep 10, 2014 7:07 AM, "Peter Ent" <pe...@adobe.com> wrote:
>>>
>>> I made a small modification to FlexJSTest_SVG:
>>>
>>>
>>> var path2:Path = new Path();
>>>                                 fill.color = 0x00FF00;
>>>                                 fill.alpha = 0.5;
>>> //                              path2.fill = fill;
>>>                                 stroke.color = 0xFF00FF;
>>>                                 stroke.weight = 3;
>>>                                 path2.stroke = stroke;
>>>                                 path2.drawPath(250,500,"M150 0 L75 200
>>L225 200 Z");
>>>                                 this.addElement(path2);
>>>
>>>
>>>
>>> I removed the fill for the Path. This should have drawn 2 lines
>>>starting
>>> at (150,0) with a line to (75,200) and another to (225,200). Which it
>>>did.
>>> But it also closed the figure by drawing a third line from (225,200)
>>>back
>>> to (150,0).
>>
>>That is so weird. It did not do that when I tested it.  Will try it out
>>again in some time and see what's going on.
>>
>>>
>>> For the LineChart, the first and last points cannot be closed.
>>>
>>> Thanks,
>>> Peter Ent
>>> Adobe Systems
>>>
>>> On 9/10/14 9:26 AM, "Peter Ent" <pe...@adobe.com> wrote:
>>>
>>> >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" <bi...@gmail.com> wrote:
>>> >
>>> >>On Tue, Sep 9, 2014 at 2:26 PM, Peter Ent <pe...@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" <bi...@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
>>> >>><bigosmallm@gmail.com
>>> >>> >
>>> >>> >wrote:
>>> >>> >
>>> >>> >> On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <pe...@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
>>>>>>>>_
>>>>>>>>d
>>> >>>>>>a
>>> >>>>>>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" <bi...@gmail.com>
>>> >>>wrote:
>>> >>> >>>
>>> >>> >>> >On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <pe...@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" <pe...@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"
>>><bigosmallm@gmail.com
>>>
>>> >>> >>> wrote:
>>> >>> >>> >> >
>>> >>> >>> >> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala
>>> >>> >>> >> >><bi...@gmail.com>
>>> >>> >>> >> >>wrote:
>>> >>> >>> >> >>
>>> >>> >>> >> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent
>>><pe...@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"
>>> >>><bigosmallm@gmail.com
>>> >>> >
>>> >>> >>> >> wrote:
>>> >>> >>> >> >>>>
>>> >>> >>> >> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent
>>> >>><pe...@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" <
>>> >>> >>> bigosmallm@gmail.com>
>>> >>> >>> >> >>>> wrote:
>>> >>> >>> >> >>>> >>
>>> >>> >>> >> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent"
>>><pe...@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"
>>> >>> >>> >><bi...@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
>>> >>> >>> >> >>>> >> >>
>>> >>> >>> >> >>>> >>
>>> >>> >>> >> >>>> >>
>>> >>> >>> >> >>>>
>>> >>> >>> >> >>>>
>>> >>> >>> >> >>>
>>> >>> >>> >> >
>>> >>> >>> >>
>>> >>> >>> >>
>>> >>> >>>
>>> >>> >>>
>>> >>> >>
>>> >>>
>>> >>>
>>> >
>>>
>

Re: [FlexJS] Path API bug (Was Re: [FlexJS] Drawing API)

Posted by Peter Ent <pe...@adobe.com>.
I have the latest code; I didn't install it into my Apache FlexJS
deployment. That last step always gets me.

I did more research on Path and discovered that the presence of the Z is
making the path closed (I thought a path string MUST end with a Z), so I
believe I can proceed with converting the chart package over to
core/graphics.

Thanks, Om, for your help and patience.

--peter

On 9/10/14 10:45 AM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:

>On Sep 10, 2014 7:07 AM, "Peter Ent" <pe...@adobe.com> wrote:
>>
>> I made a small modification to FlexJSTest_SVG:
>>
>>
>> var path2:Path = new Path();
>>                                 fill.color = 0x00FF00;
>>                                 fill.alpha = 0.5;
>> //                              path2.fill = fill;
>>                                 stroke.color = 0xFF00FF;
>>                                 stroke.weight = 3;
>>                                 path2.stroke = stroke;
>>                                 path2.drawPath(250,500,"M150 0 L75 200
>L225 200 Z");
>>                                 this.addElement(path2);
>>
>>
>>
>> I removed the fill for the Path. This should have drawn 2 lines starting
>> at (150,0) with a line to (75,200) and another to (225,200). Which it
>>did.
>> But it also closed the figure by drawing a third line from (225,200)
>>back
>> to (150,0).
>
>That is so weird. It did not do that when I tested it.  Will try it out
>again in some time and see what's going on.
>
>>
>> For the LineChart, the first and last points cannot be closed.
>>
>> Thanks,
>> Peter Ent
>> Adobe Systems
>>
>> On 9/10/14 9:26 AM, "Peter Ent" <pe...@adobe.com> wrote:
>>
>> >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" <bi...@gmail.com> wrote:
>> >
>> >>On Tue, Sep 9, 2014 at 2:26 PM, Peter Ent <pe...@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" <bi...@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
>> >>><bigosmallm@gmail.com
>> >>> >
>> >>> >wrote:
>> >>> >
>> >>> >> On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <pe...@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_
>>>>>>>d
>> >>>>>>a
>> >>>>>>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" <bi...@gmail.com>
>> >>>wrote:
>> >>> >>>
>> >>> >>> >On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <pe...@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" <pe...@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"
>><bigosmallm@gmail.com
>>
>> >>> >>> wrote:
>> >>> >>> >> >
>> >>> >>> >> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala
>> >>> >>> >> >><bi...@gmail.com>
>> >>> >>> >> >>wrote:
>> >>> >>> >> >>
>> >>> >>> >> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent
>><pe...@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"
>> >>><bigosmallm@gmail.com
>> >>> >
>> >>> >>> >> wrote:
>> >>> >>> >> >>>>
>> >>> >>> >> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent
>> >>><pe...@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" <
>> >>> >>> bigosmallm@gmail.com>
>> >>> >>> >> >>>> wrote:
>> >>> >>> >> >>>> >>
>> >>> >>> >> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent" <pe...@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"
>> >>> >>> >><bi...@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
>> >>> >>> >> >>>> >> >>
>> >>> >>> >> >>>> >>
>> >>> >>> >> >>>> >>
>> >>> >>> >> >>>>
>> >>> >>> >> >>>>
>> >>> >>> >> >>>
>> >>> >>> >> >
>> >>> >>> >>
>> >>> >>> >>
>> >>> >>>
>> >>> >>>
>> >>> >>
>> >>>
>> >>>
>> >
>>

Re: [FlexJS] Path API bug (Was Re: [FlexJS] Drawing API)

Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Wed, Sep 10, 2014 at 7:45 AM, OmPrakash Muppirala <bi...@gmail.com>
wrote:

>
> On Sep 10, 2014 7:07 AM, "Peter Ent" <pe...@adobe.com> wrote:
> >
> > I made a small modification to FlexJSTest_SVG:
> >
> >
> > var path2:Path = new Path();
> >                                 fill.color = 0x00FF00;
> >                                 fill.alpha = 0.5;
> > //                              path2.fill = fill;
> >                                 stroke.color = 0xFF00FF;
> >                                 stroke.weight = 3;
> >                                 path2.stroke = stroke;
> >                                 path2.drawPath(250,500,"M150 0 L75 200
> L225 200 Z");
> >                                 this.addElement(path2);
> >
> >
> >
> > I removed the fill for the Path. This should have drawn 2 lines starting
> > at (150,0) with a line to (75,200) and another to (225,200). Which it
> did.
> > But it also closed the figure by drawing a third line from (225,200) back
> > to (150,0).
>
> That is so weird. It did not do that when I tested it.  Will try it out
> again in some time and see what's going on.
>

You are right.  Adding a Z at the end does indeed close the line loop.
Without the Z should work as you expect. Sorry for the confusion.

Thanks,
Om



> >
> > For the LineChart, the first and last points cannot be closed.
> >
> > Thanks,
> > Peter Ent
> > Adobe Systems
> >
> > On 9/10/14 9:26 AM, "Peter Ent" <pe...@adobe.com> wrote:
> >
> > >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" <bi...@gmail.com> wrote:
> > >
> > >>On Tue, Sep 9, 2014 at 2:26 PM, Peter Ent <pe...@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" <bi...@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
> > >>><bigosmallm@gmail.com
> > >>> >
> > >>> >wrote:
> > >>> >
> > >>> >> On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <pe...@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_d
> > >>>>>>a
> > >>>>>>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" <bi...@gmail.com>
> > >>>wrote:
> > >>> >>>
> > >>> >>> >On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <pe...@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" <pe...@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" <
> bigosmallm@gmail.com>
> > >>> >>> wrote:
> > >>> >>> >> >
> > >>> >>> >> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala
> > >>> >>> >> >><bi...@gmail.com>
> > >>> >>> >> >>wrote:
> > >>> >>> >> >>
> > >>> >>> >> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent <pent@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"
> > >>><bigosmallm@gmail.com
> > >>> >
> > >>> >>> >> wrote:
> > >>> >>> >> >>>>
> > >>> >>> >> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent
> > >>><pe...@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" <
> > >>> >>> bigosmallm@gmail.com>
> > >>> >>> >> >>>> wrote:
> > >>> >>> >> >>>> >>
> > >>> >>> >> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent" <pe...@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"
> > >>> >>> >><bi...@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
> > >>> >>> >> >>>> >> >>
> > >>> >>> >> >>>> >>
> > >>> >>> >> >>>> >>
> > >>> >>> >> >>>>
> > >>> >>> >> >>>>
> > >>> >>> >> >>>
> > >>> >>> >> >
> > >>> >>> >>
> > >>> >>> >>
> > >>> >>>
> > >>> >>>
> > >>> >>
> > >>>
> > >>>
> > >
> >
>

Re: [FlexJS] Path API bug (Was Re: [FlexJS] Drawing API)

Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Sep 10, 2014 7:07 AM, "Peter Ent" <pe...@adobe.com> wrote:
>
> I made a small modification to FlexJSTest_SVG:
>
>
> var path2:Path = new Path();
>                                 fill.color = 0x00FF00;
>                                 fill.alpha = 0.5;
> //                              path2.fill = fill;
>                                 stroke.color = 0xFF00FF;
>                                 stroke.weight = 3;
>                                 path2.stroke = stroke;
>                                 path2.drawPath(250,500,"M150 0 L75 200
L225 200 Z");
>                                 this.addElement(path2);
>
>
>
> I removed the fill for the Path. This should have drawn 2 lines starting
> at (150,0) with a line to (75,200) and another to (225,200). Which it did.
> But it also closed the figure by drawing a third line from (225,200) back
> to (150,0).

That is so weird. It did not do that when I tested it.  Will try it out
again in some time and see what's going on.

>
> For the LineChart, the first and last points cannot be closed.
>
> Thanks,
> Peter Ent
> Adobe Systems
>
> On 9/10/14 9:26 AM, "Peter Ent" <pe...@adobe.com> wrote:
>
> >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" <bi...@gmail.com> wrote:
> >
> >>On Tue, Sep 9, 2014 at 2:26 PM, Peter Ent <pe...@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" <bi...@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
> >>><bigosmallm@gmail.com
> >>> >
> >>> >wrote:
> >>> >
> >>> >> On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <pe...@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_d
> >>>>>>a
> >>>>>>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" <bi...@gmail.com>
> >>>wrote:
> >>> >>>
> >>> >>> >On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <pe...@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" <pe...@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" <bigosmallm@gmail.com
>
> >>> >>> wrote:
> >>> >>> >> >
> >>> >>> >> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala
> >>> >>> >> >><bi...@gmail.com>
> >>> >>> >> >>wrote:
> >>> >>> >> >>
> >>> >>> >> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent <pe...@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"
> >>><bigosmallm@gmail.com
> >>> >
> >>> >>> >> wrote:
> >>> >>> >> >>>>
> >>> >>> >> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent
> >>><pe...@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" <
> >>> >>> bigosmallm@gmail.com>
> >>> >>> >> >>>> wrote:
> >>> >>> >> >>>> >>
> >>> >>> >> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent" <pe...@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"
> >>> >>> >><bi...@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
> >>> >>> >> >>>> >> >>
> >>> >>> >> >>>> >>
> >>> >>> >> >>>> >>
> >>> >>> >> >>>>
> >>> >>> >> >>>>
> >>> >>> >> >>>
> >>> >>> >> >
> >>> >>> >>
> >>> >>> >>
> >>> >>>
> >>> >>>
> >>> >>
> >>>
> >>>
> >
>

Re: [FlexJS] Path API bug (Was Re: [FlexJS] Drawing API)

Posted by Peter Ent <pe...@adobe.com>.
I made a small modification to FlexJSTest_SVG:
	

var path2:Path = new Path();
				fill.color = 0x00FF00;
				fill.alpha = 0.5;
//				path2.fill = fill;
				stroke.color = 0xFF00FF;
				stroke.weight = 3;
				path2.stroke = stroke;
				path2.drawPath(250,500,"M150 0 L75 200 L225 200 Z");
				this.addElement(path2);



I removed the fill for the Path. This should have drawn 2 lines starting
at (150,0) with a line to (75,200) and another to (225,200). Which it did.
But it also closed the figure by drawing a third line from (225,200) back
to (150,0).

For the LineChart, the first and last points cannot be closed.

Thanks,
Peter Ent
Adobe Systems

On 9/10/14 9:26 AM, "Peter Ent" <pe...@adobe.com> wrote:

>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" <bi...@gmail.com> wrote:
>
>>On Tue, Sep 9, 2014 at 2:26 PM, Peter Ent <pe...@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" <bi...@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
>>><bigosmallm@gmail.com
>>> >
>>> >wrote:
>>> >
>>> >> On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <pe...@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_d
>>>>>>a
>>>>>>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" <bi...@gmail.com>
>>>wrote:
>>> >>>
>>> >>> >On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <pe...@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" <pe...@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" <bi...@gmail.com>
>>> >>> wrote:
>>> >>> >> >
>>> >>> >> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala
>>> >>> >> >><bi...@gmail.com>
>>> >>> >> >>wrote:
>>> >>> >> >>
>>> >>> >> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent <pe...@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"
>>><bigosmallm@gmail.com
>>> >
>>> >>> >> wrote:
>>> >>> >> >>>>
>>> >>> >> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent
>>><pe...@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" <
>>> >>> bigosmallm@gmail.com>
>>> >>> >> >>>> wrote:
>>> >>> >> >>>> >>
>>> >>> >> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent" <pe...@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"
>>> >>> >><bi...@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
>>> >>> >> >>>> >> >>
>>> >>> >> >>>> >>
>>> >>> >> >>>> >>
>>> >>> >> >>>>
>>> >>> >> >>>>
>>> >>> >> >>>
>>> >>> >> >
>>> >>> >>
>>> >>> >>
>>> >>>
>>> >>>
>>> >>
>>>
>>>
>

Re: [FlexJS] Path API bug (Was Re: [FlexJS] Drawing API)

Posted by Peter Ent <pe...@adobe.com>.
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" <bi...@gmail.com> wrote:

>On Tue, Sep 9, 2014 at 2:26 PM, Peter Ent <pe...@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" <bi...@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
>><bigosmallm@gmail.com
>> >
>> >wrote:
>> >
>> >> On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <pe...@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" <bi...@gmail.com>
>>wrote:
>> >>>
>> >>> >On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <pe...@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" <pe...@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" <bi...@gmail.com>
>> >>> wrote:
>> >>> >> >
>> >>> >> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala
>> >>> >> >><bi...@gmail.com>
>> >>> >> >>wrote:
>> >>> >> >>
>> >>> >> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent <pe...@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"
>><bigosmallm@gmail.com
>> >
>> >>> >> wrote:
>> >>> >> >>>>
>> >>> >> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent <pe...@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" <
>> >>> bigosmallm@gmail.com>
>> >>> >> >>>> wrote:
>> >>> >> >>>> >>
>> >>> >> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent" <pe...@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"
>> >>> >><bi...@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
>> >>> >> >>>> >> >>
>> >>> >> >>>> >>
>> >>> >> >>>> >>
>> >>> >> >>>>
>> >>> >> >>>>
>> >>> >> >>>
>> >>> >> >
>> >>> >>
>> >>> >>
>> >>>
>> >>>
>> >>
>>
>>

Re: [FlexJS] Path API bug (Was Re: [FlexJS] Drawing API)

Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Tue, Sep 9, 2014 at 2:26 PM, Peter Ent <pe...@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" <bi...@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 <bigosmallm@gmail.com
> >
> >wrote:
> >
> >> On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <pe...@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_data
> >>> =
> >>> 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" <bi...@gmail.com> wrote:
> >>>
> >>> >On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <pe...@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" <pe...@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" <bi...@gmail.com>
> >>> wrote:
> >>> >> >
> >>> >> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala
> >>> >> >><bi...@gmail.com>
> >>> >> >>wrote:
> >>> >> >>
> >>> >> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent <pe...@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" <bigosmallm@gmail.com
> >
> >>> >> wrote:
> >>> >> >>>>
> >>> >> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent <pe...@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" <
> >>> bigosmallm@gmail.com>
> >>> >> >>>> wrote:
> >>> >> >>>> >>
> >>> >> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent" <pe...@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"
> >>> >><bi...@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
> >>> >> >>>> >> >>
> >>> >> >>>> >>
> >>> >> >>>> >>
> >>> >> >>>>
> >>> >> >>>>
> >>> >> >>>
> >>> >> >
> >>> >>
> >>> >>
> >>>
> >>>
> >>
>
>

Re: [FlexJS] Path API bug (Was Re: [FlexJS] Drawing API)

Posted by Peter Ent <pe...@adobe.com>.
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.

Peter Ent
Adobe Systems



On 9/9/14 4:53 PM, "OmPrakash Muppirala" <bi...@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 <bi...@gmail.com>
>wrote:
>
>> On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <pe...@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_data
>>> =
>>> 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" <bi...@gmail.com> wrote:
>>>
>>> >On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <pe...@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" <pe...@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" <bi...@gmail.com>
>>> wrote:
>>> >> >
>>> >> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala
>>> >> >><bi...@gmail.com>
>>> >> >>wrote:
>>> >> >>
>>> >> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent <pe...@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" <bi...@gmail.com>
>>> >> wrote:
>>> >> >>>>
>>> >> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent <pe...@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" <
>>> bigosmallm@gmail.com>
>>> >> >>>> wrote:
>>> >> >>>> >>
>>> >> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent" <pe...@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"
>>> >><bi...@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
>>> >> >>>> >> >>
>>> >> >>>> >>
>>> >> >>>> >>
>>> >> >>>>
>>> >> >>>>
>>> >> >>>
>>> >> >
>>> >>
>>> >>
>>>
>>>
>>

Re: [FlexJS] Path API bug (Was Re: [FlexJS] Drawing API)

Posted by OmPrakash Muppirala <bi...@gmail.com>.
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 <bi...@gmail.com>
wrote:

> On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <pe...@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_data =
>> 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" <bi...@gmail.com> wrote:
>>
>> >On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <pe...@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" <pe...@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" <bi...@gmail.com>
>> wrote:
>> >> >
>> >> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala
>> >> >><bi...@gmail.com>
>> >> >>wrote:
>> >> >>
>> >> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent <pe...@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/utils
>> >> >>/
>> >> >>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" <bi...@gmail.com>
>> >> wrote:
>> >> >>>>
>> >> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent <pe...@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" <
>> bigosmallm@gmail.com>
>> >> >>>> wrote:
>> >> >>>> >>
>> >> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent" <pe...@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"
>> >><bi...@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
>> >> >>>> >> >>
>> >> >>>> >>
>> >> >>>> >>
>> >> >>>>
>> >> >>>>
>> >> >>>
>> >> >
>> >>
>> >>
>>
>>
>

Re: [FlexJS] Path API bug (Was Re: [FlexJS] Drawing API)

Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <pe...@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_data =
> 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" <bi...@gmail.com> wrote:
>
> >On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <pe...@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" <pe...@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" <bi...@gmail.com> wrote:
> >> >
> >> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala
> >> >><bi...@gmail.com>
> >> >>wrote:
> >> >>
> >> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent <pe...@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/utils
> >> >>/
> >> >>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" <bi...@gmail.com>
> >> wrote:
> >> >>>>
> >> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent <pe...@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" <bigosmallm@gmail.com
> >
> >> >>>> wrote:
> >> >>>> >>
> >> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent" <pe...@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"
> >><bi...@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
> >> >>>> >> >>
> >> >>>> >>
> >> >>>> >>
> >> >>>>
> >> >>>>
> >> >>>
> >> >
> >>
> >>
>
>

Re: [FlexJS] Path API bug (Was Re: [FlexJS] Drawing API)

Posted by Peter Ent <pe...@adobe.com>.
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_data =
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



On 9/9/14 2:22 PM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:

>On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <pe...@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" <pe...@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" <bi...@gmail.com> wrote:
>> >
>> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala
>> >><bi...@gmail.com>
>> >>wrote:
>> >>
>> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent <pe...@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/utils
>> >>/
>> >>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" <bi...@gmail.com>
>> wrote:
>> >>>>
>> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent <pe...@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" <bi...@gmail.com>
>> >>>> wrote:
>> >>>> >>
>> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent" <pe...@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"
>><bi...@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
>> >>>> >> >>
>> >>>> >>
>> >>>> >>
>> >>>>
>> >>>>
>> >>>
>> >
>>
>>