Ah, I see what's happening. My code expects the drawXXX() [drawRect,
drawPath, etc.] to be called before adding it as an element to the parent.
Try switching
this.filledRect = new org.apache.flex.core.graphics.Rect();
this.addElement(this.filledRect);
to
this.filledRect = new org.apache.flex.core.graphics.Rect();
this.filledRect.drawRect(x,y,width,height);
this.addElement(this.filledRect);
I can change how this works, but I don't see an invalidation mechanism that
I can use. How do you suggest we approach this?
Thanks,
Om
On Tue, Sep 9, 2014 at 1:40 PM, OmPrakash Muppirala <bigosma...@gmail.com>
wrote:
> On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <p...@adobe.com> wrote:
>
>> I created a temporary item renderer to see how the x-compile would work.
>> Here is the code in my temporary item renderer that creates the Rect:
>>
>> org.apache.flex.charts.supportClasses.TempBoxRenderer.prototype.set_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
>> >> >>>> >> >>
>> >> >>>> >>
>> >> >>>> >>
>> >> >>>>
>> >> >>>>
>> >> >>>
>> >> >
>> >>
>> >>
>>
>>
>
