On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <p...@adobe.com> wrote:
> I created a temporary item renderer to see how the x-compile would work.
> Here is the code in my temporary item renderer that creates the Rect:
>
> org.apache.flex.charts.supportClasses.TempBoxRenderer.prototype.set_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" <bigosma...@gmail.com> wrote:
>
> >On Tue, Sep 9, 2014 at 8:19 AM, Peter Ent <p...@adobe.com> wrote:
> >
> >> Have run into a problem on the JS side. Firebox is telling me that in
> >>this
> >> code from GraphicShape.js:
> >>
> >> org.apache.flex.core.graphics.GraphicShape.prototype.addedToParent =
> >> function() {
> >> var bbox = this.element.getBBox();
> >> this.resize(this.x_, this.y_, bbox.width + this.x_ * 2, bbox.height +
> >> this.y_ * 2);
> >> };
> >>
> >
> >Peter,
> >
> >Can you please attach the html code for the svg element that is throwing
> >an
> >error? I will try to repro it on my side.
> >Did you try Chrome or other browsers?
> >
> >Thanks,
> >Om
> >
> >
> >>
> >>
> >> this.element.getBBox() is returning undefined. I know that this.element
> >>is
> >> set with an SVG element.
> >>
> >> I'm using Firefox 31.0 on Mac OS X.
> >>
> >> Peter Ent
> >> Adobe Systems
> >>
> >> On 9/9/14 10:37 AM, "Peter Ent" <p...@adobe.com> wrote:
> >>
> >> >The update to handle 'A' and 'a' works great! Thanks.
> >> >
> >> >Peter Ent
> >> >Adobe Systems
> >> >
> >> >On 9/9/14 3:42 AM, "OmPrakash Muppirala" <bigosma...@gmail.com> wrote:
> >> >
> >> >>On Mon, Sep 8, 2014 at 3:53 PM, OmPrakash Muppirala
> >> >><bigosma...@gmail.com>
> >> >>wrote:
> >> >>
> >> >>> On Mon, Sep 8, 2014 at 1:59 PM, Peter Ent <p...@adobe.com> wrote:
> >> >>>
> >> >>>> I haven't tried the JS side - this is all Flash. In SVG, the fill
> >> >>>>takes
> >> >>>> care of closing the path; I'm not using any line or border.
> >> >>>>
> >> >>>>
> >> >>> Yes, it looks like the A parameter is not supported. I will work on
> >> >>> adding this support in Path. I took a big chunk of the Path
> >> >>>implementation
> >> >>> from spark.primitives.Path. It seems like we do need to tweak it
> >> >>>further.
> >> >>>
> >> >>>
> >> >>Hi,
> >> >>
> >> >>The support for 'a' and 'A' (Elliptical Arc) has been added to the
> >>Flash
> >> >>implementation of the Path api. I tried with this:
> >> >>
> >> >>path.drawPath(250,500,"M 50 50 L 100 50 A 50 50 0 0 0 50 0 Z");
> >> >>
> >> >>and got a nice little wedge drawn on the screen.
> >> >>
> >> >>More importantly, the Flash and SVG renderings look (almost) the same.
> >> >>
> >> >>As part of this implementation, I borrowed the drawEllipicalArc()
> >>method
> >> >>from the svgweb library(flash implementation of SVG) [1] The code is
> >> >>Apache licensed. I have added the link to the original code as a
> >>comment
> >> >>in our code. Do I need to mention this in the NOTICE or LICENSE
> >>files?
> >> >>
> >> >>Peter, if you can do some more testing and let me know your feedback,
> >> >>that
> >> >>would be great.
> >> >>
> >> >>And looks like this can be added to the current SDK's FXG
> >>implementation
> >> >>as
> >> >>well. I am surprised that we did not hit this issue in the current
> >>SDK.
> >> >>
> >> >>Thanks,
> >> >>Om
> >> >>
> >> >>[1]
> >> >>
> >>
> >>
> https://code.google.com/p/svgweb/source/browse/trunk/src/org/svgweb/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" <bigosma...@gmail.com>
> >> wrote:
> >> >>>>
> >> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent <p...@adobe.com>
> wrote:
> >> >>>> >
> >> >>>> >> I took care of the gjslint issues.
> >> >>>> >>
> >> >>>> >
> >> >>>> >Thanks! Hope it was not too much trouble.
> >> >>>> >
> >> >>>> >
> >> >>>> >>
> >> >>>> >> Can you supply more information about Path and what is in the
> >>path
> >> >>>> >>string?
> >> >>>> >> I have a path working in SVG to do the wedges for the pie chart,
> >> >>>>but
> >> >>>> >>that
> >> >>>> >> same string isn't working with core.graphics.Path.
> >> >>>> >>
> >> >>>> >> var pathString:String = 'M' + x + ' ' + y + ' L' + x1 + ' ' +
> >>y1 +
> >> >>>>' A'
> >> >>>> >>+
> >> >>>> >> radius + ' ' + radius +
> >> >>>> >> ' 0 0 1 ' + x2 + ' ' + y2 + '
> >>z';
> >> >>>> >>
> >> >>>> >>
> >> >>>> >> It doesn't look, to me, like "A" is being recognized.
> >> >>>> >>
> >> >>>> >
> >> >>>> >The path looks like it is doing the following:
> >> >>>> >M x y : move to x, y
> >> >>>> >L x1 y1 : draw line from x,y to x1,y1
> >> >>>> >A radius radius : draw an arc with xradius=radius and yradius =
> >> >>>>radius
> >> >>>> >(so, a circular arc)
> >> >>>> >0 0 1 : x-axis rotation=0, large-arc = false, sweep = true
> >> >>>> >x2 y2 : ending point of the arc
> >> >>>> >z : finish drawing
> >> >>>> >
> >> >>>> >BTW, don't you need another line to complete the wedge?
> >> >>>> >
> >> >>>> >Is it working fine on the flash side? I will take a look soon.
> >> >>>> >
> >> >>>> >Thanks,
> >> >>>> >Om
> >> >>>> >
> >> >>>> >
> >> >>>> >>
> >> >>>> >> Thanks,
> >> >>>> >> Peter Ent
> >> >>>> >> Adobe Systems
> >> >>>> >>
> >> >>>> >> On 9/8/14 12:04 PM, "OmPrakash Muppirala" <bigosma...@gmail.com
> >
> >> >>>> wrote:
> >> >>>> >>
> >> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent" <p...@adobe.com> wrote:
> >> >>>> >> >>
> >> >>>> >> >> I forgot to add that when I build flex-asjs, gjslint finds a
> >> >>>>number
> >> >>>> >>of
> >> >>>> >> >> issues in the new JS graphics code (its usual, spaces at the
> >>end
> >> >>>>of
> >> >>>> >> >>lines,
> >> >>>> >> >> sort of thing). I think I am using version 2.3.10 of gjslint
> >>but
> >> >>>>I'm
> >> >>>> >>not
> >> >>>> >> >> 100% sure.
> >> >>>> >> >
> >> >>>> >> >Yeah, unfortunately there is no gjslint available for Windows.
> >> I
> >> >>>> >>guess I
> >> >>>> >> >will need you Mac folks to help me out with this :-)
> >> >>>> >> >
> >> >>>> >> >Thanks,
> >> >>>> >> >Om
> >> >>>> >> >
> >> >>>> >> >>
> >> >>>> >> >> Peter Ent
> >> >>>> >> >> Adobe Systems
> >> >>>> >> >>
> >> >>>> >> >> On 9/8/14 3:48 AM, "OmPrakash Muppirala"
> >><bigosma...@gmail.com>
> >> >>>> >>wrote:
> >> >>>> >> >>
> >> >>>> >> >> >FlexJS now supports a basic drawing API (Rect, Ellipse,
> >>Circle,
> >> >>>> >>Path,
> >> >>>> >> >> >SolidColor, SolidColorStroke) Here are the AS3 [1] and JS
> >>[2]
> >> >>>> >>versions
> >> >>>> >> >> >
> >> >>>> >> >> >So far, the rendering fidelity between the Flash and
> >>SVG/HTML5
> >> >>>> >>version
> >> >>>> >> >>is
> >> >>>> >> >> >very very close. For sure, there are some pretty major
> >>things
> >> >>>>to
> >> >>>> be
> >> >>>> >> >> >worked
> >> >>>> >> >> >out, but generally so far, the results have been very
> >> >>>>encouraging.
> >> >>>> >> >> >
> >> >>>> >> >> >You can see a quick and dirty example here:
> >> >>>> >> >> >Flash version:
> >> >>>> >> >>http://people.apache.org/~bigosmallm/flexjs/drawing/flash/
> >> >>>> >> >> >HTML5 version:
> >> >>>> >> >>http://people.apache.org/~bigosmallm/flexjs/drawing/html5/
> >> >>>> >> >> >
> >> >>>> >> >> >HTML5 version has been tested to work fine on Chrome,
> >>Firefox,
> >> >>>> IE11,
> >> >>>> >> >> >Android browser and iPad Safari.
> >> >>>> >> >> >
> >> >>>> >> >> >Next up, i will be working on the following items:
> >> >>>> >> >> >Polygons, Linear gradients, Radial gradients, filters and
> >>drop
> >> >>>> >>shadows.
> >> >>>> >> >> >These should bring us very close to our current FXG based
> >> >>>>drawing
> >> >>>> >>APIs.
> >> >>>> >> >> >
> >> >>>> >> >> >After that, I plan on programmatically recreating a few FXG
> >> >>>>based
> >> >>>> >>skins
> >> >>>> >> >in
> >> >>>> >> >> >FlexJS and see how we can apply it skins on UI components.
> >> >>>> >> >> >
> >> >>>> >> >> >Feedback welcome!
> >> >>>> >> >> >
> >> >>>> >> >> >[1]
> >> >>>> >> >> >
> >> >>>> >> >
> >> >>>> >>
> >> >>>> >>
> >> >>>>
> >> >>>>
> >> https://github.com/apache/flex-asjs/tree/develop/frameworks/as/projects
> >> >>>>/
> >> >>>>F
> >> >>>> >>l
> >> >>>> >> >> >exJSUI/src/org/apache/flex/core/graphics
> >> >>>> >> >> >[2]
> >> >>>> >> >> >
> >> >>>> >> >
> >> >>>> >>
> >> >>>> >>
> >> >>>>
> >> >>>>
> >> https://github.com/apache/flex-asjs/tree/develop/frameworks/js/FlexJS/s
> >> >>>>r
> >> >>>>c
> >> >>>> >>/
> >> >>>> >> >> >org/apache/flex/core/graphics
> >> >>>> >> >>
> >> >>>> >>
> >> >>>> >>
> >> >>>>
> >> >>>>
> >> >>>
> >> >
> >>
> >>
>
>
