On Tue, Sep 9, 2014 at 2:26 PM, Peter Ent <p...@adobe.com> wrote:
> I tried that and it did not work (because the fill and stroke were not
> set), so I changed my itemRenderer to create the Rect at the point of use:
>
> protected function drawBar():void
> {
> if (this.width > 0 && this.height > 0)
> {
> if (filledRect == null) filledRect = new Rect();
> var solidColor:SolidColor = new SolidColor();
> solidColor.color = fillColor;
> var solidStroke:SolidColorStroke = new SolidColorStroke();
> solidStroke.color = fillColor;
> solidStroke.weight = 1;
> filledRect.fill = solidColor;
> filledRect.stroke = solidStroke;
> filledRect.drawRect(0,0,this.width,this.height);
>
> if (needsAdd) {
> addElement(filledRect);
> needsAdd = false;
> }
> }
> }
>
>
>
>
> That's the AS code, but the x-compiled JS code is identical (except for
> all of the Language.as things Falcon adds). I'm getting the same exception
> when the filledRect element is added. I stepped through using Firebug and
> all of the code is being executed, so the Rect's fill and stroke are now
> set and the width and height of the itemRenderer have non-zero values. So
> this should draw a filled rectangle.
>
It's possible that I have not checked in something. Are you able to
compile and run the examples\FlexJSTest_SVG without any issues?
Perhaps you can check in your code so I can see what's happening?
Thanks,
Om
Thanks,
Om
>
> Peter Ent
> Adobe Systems
>
>
>
> On 9/9/14 4:53 PM, "OmPrakash Muppirala" <bigosma...@gmail.com> wrote:
>
> >Ah, I see what's happening. My code expects the drawXXX() [drawRect,
> >drawPath, etc.] to be called before adding it as an element to the parent.
> >
> >Try switching
> >
> >this.filledRect = new org.apache.flex.core.graphics.Rect();
> >this.addElement(this.filledRect);
> >
> >to
> >
> >this.filledRect = new org.apache.flex.core.graphics.Rect();
> >this.filledRect.drawRect(x,y,width,height);
> >this.addElement(this.filledRect);
> >
> >I can change how this works, but I don't see an invalidation mechanism
> >that
> >I can use. How do you suggest we approach this?
> >
> >Thanks,
> >Om
> >
> >On Tue, Sep 9, 2014 at 1:40 PM, OmPrakash Muppirala <bigosma...@gmail.com
> >
> >wrote:
> >
> >> On Tue, Sep 9, 2014 at 1:15 PM, Peter Ent <p...@adobe.com> wrote:
> >>
> >>> I created a temporary item renderer to see how the x-compile would
> >>>work.
> >>> Here is the code in my temporary item renderer that creates the Rect:
> >>>
> >>>
> >>>org.apache.flex.charts.supportClasses.TempBoxRenderer.prototype.set_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/util
> >>>s
> >>> >> >>/
> >>> >> >>EllipticalArc.as?r=1251
> >>> >> >>
> >>> >> >>
> >>> >> >>
> >>> >> >>
> >>> >> >>> I see that mx.charts.chartClasses.GraphicsUtilities has a
> >>>drawArc()
> >>> >> >>> method. I will probably end up using that implementation.
> >>> >> >>>
> >>> >> >>>
> >>> >> >>>> Which brings me to the next issue. When drawing a series of
> >>> >>connected
> >>> >> >>>> lines (for the LineChart), the first and last points are
> >>>getting
> >>> >> >>>> connected, which I do not want. My loop to build the path looks
> >>> >>like
> >>> >> >>>>this,
> >>> >> >>>> below. point[0] != point[last] so they should not be
> >>>connected. I
> >>> >> >>>>tried
> >>> >> >>>> "z" and "Z" thinking one meant leave the path closed and one
> >>> closed
> >>> >> >>>>the
> >>> >> >>>> path, but that didn't make any difference.
> >>> >> >>>>
> >>> >> >>>> var pathString:String = "";
> >>> >> >>>>
> >>> >> >>>> for (var i:int=0; i <
> >>> >>points.length;
> >>> >> >>>>i++)
> >>> >> >>>> {
> >>> >> >>>> var point:Object =
> >>>points[i];
> >>> >> >>>> if (i == 0) pathString
> >>>+=
> >>> >>"M
> >>> >> >>>> "+point.x+" "+point.y+" ";
> >>> >> >>>> else pathString += "L
> >>> >> >>>>"+point.x+"
> >>> >> >>>> "+point.y+" ";
> >>> >> >>>> }
> >>> >> >>>>
> >>> >> >>>> pathString += "Z";
> >>> >> >>>>
> >>> >> >>>> path.drawPath(0, 0,
> >>>pathString);
> >>> >> >>>>
> >>> >> >>>>
> >>> >> >>>
> >>> >> >>> That is weird. I will play with it and see why that is
> >>>happening.
> >>> >> >>>
> >>> >> >>
> >>> >> >>> Is moveTo() and lineTo() a better approach?
> >>> >> >>>
> >>> >> >>> In psedocode, the lines would be drawn like this:
> >>> >> >>>
> >>> >> >>> graphics.moveTo(points[0].x, points[0].y);
> >>> >> >>> for (var i:int=0; i < points.length; i++) {
> >>> >> >>> if(i+1 < points.length)
> >>> >> >>> {
> >>> >> >>> graphics.lineTo(points[i+1].x, points[i+1].y);
> >>> >> >>> }
> >>> >> >>> }
> >>> >> >>>
> >>> >> >>> In any case, I have the Line class in my list of Graphic
> >>>elements
> >>> >>to
> >>> >> >>> implement.
> >>> >> >>>
> >>> >> >>>
> >>> >> >>
> >>> >> >>
> >>> >> >>
> >>> >> >>> Thanks,
> >>> >> >>> Om
> >>> >> >>>
> >>> >> >>>
> >>> >> >>>>
> >>> >> >>>> Thanks,
> >>> >> >>>> Peter Ent
> >>> >> >>>> Adobe Systems
> >>> >> >>>>
> >>> >> >>>> On 9/8/14 4:13 PM, "OmPrakash Muppirala" <bigosma...@gmail.com
> >
> >>> >> wrote:
> >>> >> >>>>
> >>> >> >>>> >On Mon, Sep 8, 2014 at 12:48 PM, Peter Ent <p...@adobe.com>
> >>> wrote:
> >>> >> >>>> >
> >>> >> >>>> >> I took care of the gjslint issues.
> >>> >> >>>> >>
> >>> >> >>>> >
> >>> >> >>>> >Thanks! Hope it was not too much trouble.
> >>> >> >>>> >
> >>> >> >>>> >
> >>> >> >>>> >>
> >>> >> >>>> >> Can you supply more information about Path and what is in
> >>>the
> >>> >>path
> >>> >> >>>> >>string?
> >>> >> >>>> >> I have a path working in SVG to do the wedges for the pie
> >>> chart,
> >>> >> >>>>but
> >>> >> >>>> >>that
> >>> >> >>>> >> same string isn't working with core.graphics.Path.
> >>> >> >>>> >>
> >>> >> >>>> >> var pathString:String = 'M' + x + ' ' + y + ' L' + x1 + ' '
> >>>+
> >>> >>y1 +
> >>> >> >>>>' A'
> >>> >> >>>> >>+
> >>> >> >>>> >> radius + ' ' + radius +
> >>> >> >>>> >> ' 0 0 1 ' + x2 + ' ' + y2 +
> >>>'
> >>> >>z';
> >>> >> >>>> >>
> >>> >> >>>> >>
> >>> >> >>>> >> It doesn't look, to me, like "A" is being recognized.
> >>> >> >>>> >>
> >>> >> >>>> >
> >>> >> >>>> >The path looks like it is doing the following:
> >>> >> >>>> >M x y : move to x, y
> >>> >> >>>> >L x1 y1 : draw line from x,y to x1,y1
> >>> >> >>>> >A radius radius : draw an arc with xradius=radius and
> >>>yradius =
> >>> >> >>>>radius
> >>> >> >>>> >(so, a circular arc)
> >>> >> >>>> >0 0 1 : x-axis rotation=0, large-arc = false, sweep = true
> >>> >> >>>> >x2 y2 : ending point of the arc
> >>> >> >>>> >z : finish drawing
> >>> >> >>>> >
> >>> >> >>>> >BTW, don't you need another line to complete the wedge?
> >>> >> >>>> >
> >>> >> >>>> >Is it working fine on the flash side? I will take a look
> >>>soon.
> >>> >> >>>> >
> >>> >> >>>> >Thanks,
> >>> >> >>>> >Om
> >>> >> >>>> >
> >>> >> >>>> >
> >>> >> >>>> >>
> >>> >> >>>> >> Thanks,
> >>> >> >>>> >> Peter Ent
> >>> >> >>>> >> Adobe Systems
> >>> >> >>>> >>
> >>> >> >>>> >> On 9/8/14 12:04 PM, "OmPrakash Muppirala" <
> >>> bigosma...@gmail.com>
> >>> >> >>>> wrote:
> >>> >> >>>> >>
> >>> >> >>>> >> >On Sep 8, 2014 8:24 AM, "Peter Ent" <p...@adobe.com>
> wrote:
> >>> >> >>>> >> >>
> >>> >> >>>> >> >> I forgot to add that when I build flex-asjs, gjslint
> >>>finds a
> >>> >> >>>>number
> >>> >> >>>> >>of
> >>> >> >>>> >> >> issues in the new JS graphics code (its usual, spaces at
> >>>the
> >>> >>end
> >>> >> >>>>of
> >>> >> >>>> >> >>lines,
> >>> >> >>>> >> >> sort of thing). I think I am using version 2.3.10 of
> >>>gjslint
> >>> >>but
> >>> >> >>>>I'm
> >>> >> >>>> >>not
> >>> >> >>>> >> >> 100% sure.
> >>> >> >>>> >> >
> >>> >> >>>> >> >Yeah, unfortunately there is no gjslint available for
> >>>Windows.
> >>> >> I
> >>> >> >>>> >>guess I
> >>> >> >>>> >> >will need you Mac folks to help me out with this :-)
> >>> >> >>>> >> >
> >>> >> >>>> >> >Thanks,
> >>> >> >>>> >> >Om
> >>> >> >>>> >> >
> >>> >> >>>> >> >>
> >>> >> >>>> >> >> Peter Ent
> >>> >> >>>> >> >> Adobe Systems
> >>> >> >>>> >> >>
> >>> >> >>>> >> >> On 9/8/14 3:48 AM, "OmPrakash Muppirala"
> >>> >><bigosma...@gmail.com>
> >>> >> >>>> >>wrote:
> >>> >> >>>> >> >>
> >>> >> >>>> >> >> >FlexJS now supports a basic drawing API (Rect, Ellipse,
> >>> >>Circle,
> >>> >> >>>> >>Path,
> >>> >> >>>> >> >> >SolidColor, SolidColorStroke) Here are the AS3 [1] and
> >>>JS
> >>> >>[2]
> >>> >> >>>> >>versions
> >>> >> >>>> >> >> >
> >>> >> >>>> >> >> >So far, the rendering fidelity between the Flash and
> >>> >>SVG/HTML5
> >>> >> >>>> >>version
> >>> >> >>>> >> >>is
> >>> >> >>>> >> >> >very very close. For sure, there are some pretty major
> >>> >>things
> >>> >> >>>>to
> >>> >> >>>> be
> >>> >> >>>> >> >> >worked
> >>> >> >>>> >> >> >out, but generally so far, the results have been very
> >>> >> >>>>encouraging.
> >>> >> >>>> >> >> >
> >>> >> >>>> >> >> >You can see a quick and dirty example here:
> >>> >> >>>> >> >> >Flash version:
> >>> >> >>>> >> >>
> http://people.apache.org/~bigosmallm/flexjs/drawing/flash/
> >>> >> >>>> >> >> >HTML5 version:
> >>> >> >>>> >> >>
> http://people.apache.org/~bigosmallm/flexjs/drawing/html5/
> >>> >> >>>> >> >> >
> >>> >> >>>> >> >> >HTML5 version has been tested to work fine on Chrome,
> >>> >>Firefox,
> >>> >> >>>> IE11,
> >>> >> >>>> >> >> >Android browser and iPad Safari.
> >>> >> >>>> >> >> >
> >>> >> >>>> >> >> >Next up, i will be working on the following items:
> >>> >> >>>> >> >> >Polygons, Linear gradients, Radial gradients, filters
> >>>and
> >>> >>drop
> >>> >> >>>> >>shadows.
> >>> >> >>>> >> >> >These should bring us very close to our current FXG
> >>>based
> >>> >> >>>>drawing
> >>> >> >>>> >>APIs.
> >>> >> >>>> >> >> >
> >>> >> >>>> >> >> >After that, I plan on programmatically recreating a few
> >>>FXG
> >>> >> >>>>based
> >>> >> >>>> >>skins
> >>> >> >>>> >> >in
> >>> >> >>>> >> >> >FlexJS and see how we can apply it skins on UI
> >>>components.
> >>> >> >>>> >> >> >
> >>> >> >>>> >> >> >Feedback welcome!
> >>> >> >>>> >> >> >
> >>> >> >>>> >> >> >[1]
> >>> >> >>>> >> >> >
> >>> >> >>>> >> >
> >>> >> >>>> >>
> >>> >> >>>> >>
> >>> >> >>>>
> >>> >> >>>>
> >>> >>
> >>>
> https://github.com/apache/flex-asjs/tree/develop/frameworks/as/projects
> >>> >> >>>>/
> >>> >> >>>>F
> >>> >> >>>> >>l
> >>> >> >>>> >> >> >exJSUI/src/org/apache/flex/core/graphics
> >>> >> >>>> >> >> >[2]
> >>> >> >>>> >> >> >
> >>> >> >>>> >> >
> >>> >> >>>> >>
> >>> >> >>>> >>
> >>> >> >>>>
> >>> >> >>>>
> >>> >>
> >>>
> https://github.com/apache/flex-asjs/tree/develop/frameworks/js/FlexJS/s
> >>> >> >>>>r
> >>> >> >>>>c
> >>> >> >>>> >>/
> >>> >> >>>> >> >> >org/apache/flex/core/graphics
> >>> >> >>>> >> >>
> >>> >> >>>> >>
> >>> >> >>>> >>
> >>> >> >>>>
> >>> >> >>>>
> >>> >> >>>
> >>> >> >
> >>> >>
> >>> >>
> >>>
> >>>
> >>
>
>
