On 9/15/14 4:18 PM, "OmPrakash Muppirala" <bigosma...@gmail.com> wrote:
>On Mon, Sep 15, 2014 at 1:09 PM, Peter Ent <p...@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. I think this is good solution for now - we'll let charts have individual <svg>s and skins can make use of the more compact drawing. --peter > >Thanks, >Om > > >> >> Peter Ent >> Adobe Systems >> >> On 9/15/14 2:39 PM, "Peter Ent" <p...@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" <bigosma...@gmail.com> wrote: >> > >> >>On Fri, Sep 12, 2014 at 12:40 PM, Peter Ent <p...@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" <bigosma...@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 >> >>> >> >>> >> > >> >>
