I prefer to make things a little more explicit: <svg:Rect> would be <rect> <svg:RectComponent> would be <svg><rect></svg> <svg:Circle> would be <circle> <svg:CircleComponent> would be <svg><circle></svg>
<canvas:Rect> would do drawRect() on the containing canvas <canvas:RectComponent> would be <canvas> and drawRect() <canvas:Circle> would be drawCircle() on the containing canvas <canvas:CircleComponent> would be <canvas> and drawCircle() I’m not sold on the names. Maybe something like WrappedRect instead? I’m not sure how to enforce that the correct components are added to the correct containers, though. The way Om did it makes that simple. All Graphic elements are simple DOM elements at their basic level, and can be added to anything. When you are dealing with primitives it’s more difficult. What I did in GraphicContainer (which is an svg) is that I’m overriding addElement and checking that the element being added is an svg-compatible component. Otherwise I’m throwing an error. This helps for runtime coercion, but not for compile-time and MXML. Ideally, there should be a compile-time way of checking which elements can be added to what. Harbs On Jul 27, 2016, at 9:24 AM, Alex Harui <aha...@adobe.com> wrote: > > > On 7/26/16, 5:02 PM, "omup...@gmail.com on behalf of OmPrakash Muppirala" > <omup...@gmail.com on behalf of bigosma...@gmail.com> wrote: > >> On Jul 26, 2016 11:47 AM, "Harbs" <harbs.li...@gmail.com> wrote: >>> >>> I agree there should be a Group object. >>> >>> The problem is that the way the classes are currently constructed is >>> that >> 100 pixel “Rect" positioned at 100,100 actually contains the following >> markup: <svg x=“100” y=“100"><rect x=“0” y=“0” width=“100” >> height=“100”/></svg> >>> >>> I think the reason it was done this way was to make it possible to add >> Rects (and similar) directly to HTML elements. >> >> Yes, that is correct. This was the intention. The idea comes from the >> paradigm in Flex where you can simply add a Line or Rect in any component >> and expect it to work correctly, especially with the layout restrictions >> of >> the parent component. You dont add a GraphicContainer or some such >> container to add a graphic element. This is how Spark skins are possible. >> >>> >>> I suppose we could change the way the classes are setup (and drawn) so >> that <rect> <circle> and the like could only be added to elements which >> legally can contain them (such as <svg> and <g>). >> >> I did toy around with this idea. How would this square when you want to >> draw a circle with Canvas? Might get complicated to the user. > > This is not my area of expertise, but AIUI, s:Rect could be added "as a > component" or "as a primitive" in MXML Graphics where it would be a child > of a <Graphics /> tag [1]. IIRC, under the covers there is a fair amount > of code to figure out where/how to draw Rect, so it wouldn't be my > favorite way of going about it, but I just want to remind folks that it is > a possibility. > > Another possibility is to have a Rect component and a separate Rect > "graphic primitive". In some ways, what we are trying to do with FlexJS > is identify common JS/HTML/CSS patterns and encapsulate them into > components. So a pattern of <svg><rect/></svg> can be a component, and a > pattern of <rect> as children of an <svg> tag is another pattern and > another component. Different package names and different manifest URIs > can let us call both "Rect" but we could also call one of them Rectangle > if we really wanted to. > > Just food for thought, > -Alex > > [1] > http://help.adobe.com/en_US/flex/using/WSda78ed3a750d6b8fee1b36612357de97a3 > -8000.html
