flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From OmPrakash Muppirala <bigosma...@gmail.com>
Subject Re: FlexJS chart package now uses FlexJS core/graphics for the charts' graphics
Date Mon, 15 Sep 2014 20:18:59 GMT
On Mon, Sep 15, 2014 at 1:09 PM, Peter Ent <pent@adobe.com> wrote:

> I need to retrace my steps. I should have looked to see how
> GraphicsContainer was implemented in JavaScript before proceeding.
>
> GraphicsContainer is a <svg> element, essentially, and to add <Rect>,
> <Line>, and so forth, you use functions on GraphicsContainer to do that,
> rather than creating a core.graphics.Rect and adding it as an element to
> GraphicsContainer.
>

There is another reason I did this.  Adding individual Rects with enclosing
SVG elements means that all the graphic shapes are draw in their own
co-ordinate spaces.  I am having difficulties with resizing the SVG element
based on its child element.  Hence drawing all objects in the same SVG
element sort of fixes this problem.

For example, on the JS side, a horizontal line with a stroke of 5 will give
me a bounding box of (0,0,0,1)  It seems that the borders are not accounted
for when calculating bounding boxes.



>
> This model really won't work that well for charts. Charts could be made to
> do this, but in the spirit of each bar or wedge being an itemRenderer, I
> think it best to continue as-is, even though it may introduce a bit of
> extra overhead on the JavaScript side. We can address this further down
> the road.
>

I do see the problem.  I will keep adding support for both types
(individual shape classes that can be added to a UIBase as well as the
GraphicsContainer)  You can chose the former for charts.  I believe for
skinning, having a single drawing surface would be useful.

Let me know if this works.

Thanks,
Om


>
> Peter Ent
> Adobe Systems
>
> On 9/15/14 2:39 PM, "Peter Ent" <pent@adobe.com> wrote:
>
> >I've converted ChartDataGroup on the ActionScript side so that it uses a
> >GraphicsContainer. ChartDataGroup extends UIBase and so the elements being
> >added to it are its children. The modification inserts a GraphicsContainer
> >into ChartDataGroup as its only child and then overrides addElement to
> >place the itemRenderer children into the GraphicsContainer.
> >
> >This works well in ActionScript because GraphicsContainer also extends
> >UIBase. But this is failing on the JavaScript side because neither
> >GraphicsContainer nor GraphicsShape implement IUIBase. This is something
> >to determine if the graphic elements should conform to IUIBase or be
> >something else.
> >
> >I could imagine that ChartDataGroup might have addElement for normal
> >IUIBase components (e.g., adding a Label to a chart) and a new function,
> >like addGraphicElement() that would added charting graphics.
> >
> >At the moment, the chart package works great, it just produces a lot of
> >extra <div> and <svg> tags on the JS side.
> >
> >Peter Ent
> >Adobe Systems
> >
> >On 9/12/14 6:40 PM, "OmPrakash Muppirala" <bigosmallm@gmail.com> wrote:
> >
> >>On Fri, Sep 12, 2014 at 12:40 PM, Peter Ent <pent@adobe.com> wrote:
> >>
> >>> I have modified the chart code so that the JS side does not have
> >>>borders
> >>> and scrollbars.
> >>>
> >>
> >>I just tried it.  Looks fantastic!  I can't even tell the difference
> >>between the Flash version and the HTML5 version.  The only difference I
> >>can
> >>see is in the text.
> >>
> >>This is only going to get better :-)
> >>
> >>
> >>>
> >>> While looking at the HTML generated this morning, not only did I see
> >>>the
> >>> extra <div>s and <svg>s, but I also saw that extra itemRenderers
were
> >>> being generated. I pushed code that addresses that as well.
> >>>
> >>> Now if we could get a GraphicContainer or something like it, we should
> >>>be
> >>> able to have the itemRenderers just add a graphic element (e.g., Rect)
> >>>as
> >>> they do now, except it would be parented by the ChartDataGroup (aka,
> >>> <svg>).
> >>>
> >>
> >>I just checked in the GraphicsContainer component for AS and JS.  The
> >>usage
> >>example can be seen in examples/FlexJSTest_SVG/GraphicsView.mxml
> >>
> >>Thanks,
> >>Om
> >>
> >>
> >>>
> >>> Peter Ent
> >>> Adobe Systems
> >>>
> >>> On 9/11/14 6:40 PM, "OmPrakash Muppirala" <bigosmallm@gmail.com>
> wrote:
> >>>
> >>> >Peter,
> >>> >
> >>> >I just tested out the  ChartExample app.  It looks awesome!  Thanks
> >>>for
> >>> >making this work end to end.  Nice to see validation that using SVG
> >>>lets
> >>> >us
> >>> >do great visualizations that work exactly same in Flash and HTML5!
> >>> >
> >>> >A couple of things I noticed:
> >>> >
> >>> >1.  I see unnecessary horizontal and vertical scrollbars.  It seems
> >>>that
> >>> >the the chart elements do not fit inside the div's width and height.
> >>> >2.  I am looking at the HTML for the chart, for example:Gist here:
> >>> >https://gist.github.com/bigosmallm/ae510538df51b8356d7d
> >>> >
> >>> >I see that we are creating a whole bunch of unnecessary divs and svg
> >>> >elements.  Would it be better if we created on SVG drawing canvas and
> >>>drew
> >>> >all the graphics inside it?  It would make for a cleaner
> >>>implementation
> >>> >and
> >>> >better runtime performance.
> >>> >
> >>> >I am thinking that we will create a GraphicsContainer class which
> >>>would
> >>> >extend off of UIBase.  Inside it would be one SVG element where you
> >>>can
> >>> >draw all the graphic elements in one co-ordinate space.
> >>> >
> >>> >Let me know what you think.
> >>> >
> >>> >Thanks,
> >>> >Om
> >>>
> >>>
> >
>
>

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message