PointUtils works when it has the correct data. For example, if you are over an itemRenderer, say the first one, and want to get its global location, you might do:
var pt0:Point = new Point(itemRenderer.x, itemRenderer.y) and use pt0 in PointUtils.localToGlobal function. The problem is, itemRenderer.x/y are not correct at all times. Because this itemRenderer is the first itemRenderer and in the upper-left corner of its List, you would expect it to be (0,0) but instead it is (0,30) for example where 30 is the height of the ButtonBar used for the header. Further, the itemRenderer's parent, a <div>, also has location (0,30) and its parent, again a <div> is (0,30). This happens because the layout used to place everything is just relying on display:block and none of the <div>s have position set to anything; the only <div> with position is the one representing the DataGrid itself. The .x and .y functions look at the "left" and "top" styles first. Finding these are not set, the functions then return offsetLeft and offsetTop, which are the offsets from the ancestor with position set. That's the <div> for the DataGrid. Hence they are at (0,30). I see two choices: use getClientBoundingRect or change the layouts to set position:relative on their contentView but this might break something else at some point. I was wondering if anyone had experience trying to figure out screen positions when using the offset properties. ‹peter On 8/30/17, 3:02 AM, "Yishay Weiss" <yishayj...@hotmail.com> wrote: >Peter, > >Is PointUtils.localToGlobal() not working for you? From what I understand >it takes approach (1). > >From: Peter Ent<mailto:p...@adobe.com.INVALID> >Sent: Tuesday, August 29, 2017 11:29 PM >To: dev@flex.apache.org<mailto:dev@flex.apache.org> >Subject: [FlexJS] Finding (x,y) position > >Hi, > >While working on drag-and-drop, I've made an "interesting" discovery >having to do with the HTML-side's x and y getter functions. > >Let's say you have a nesting of <div>s: > ><div style="position:relative" id="outer"> > <div id="header" style="height:30px">Š</div> > <div id="wrapper"> > <div id="inner"> > <div class="ItemRenderer" id="first">Š</div> > </div> > </div> ></div> > >(this structure is similar to what is generated for DataGrid). > >If you attempt to get the y location of "first" itemRenderer, you will >get 30 back as the answer. That happens because the y getter first looks >to see if the object has a "top" style value and, finding none, returns >its offsetTop. In this case, offsetTop is 30 and offsetParent is "outer". >If you get the y value of "inner" you will also get 30 as the answer for >the same reason. > >If each of the <div>s had position:relative (or absolute), then offsetTop >would be as you would expect with each offsetParent being the <div> above >it. > >Our layout functions (and x and y setters) do not normally set the >position style on element. I removed this a good while ago. Now I am >trying to place a drop target indicator and to do that I need accurate >(x,y) locations. > >I have a couple of solutions: > > > 1. For any element, look at its getBoundingClientRect and compare with >its elementParent.getBoundingClientRect. The difference between then >gives the child's position relative to the parent. This seems reliable. > 2. Attempt to divine a child's position using the offset information. >I can't make this work. > 3. Modify the layouts to check the contentView's value of position and >if not set already, set it to "relative". This makes the x and y getters >return the right thing but may have unintended consequences. > >Any advice from seasoned JavaScript developers is greatly appreciated! > >Thanks, >Peter >
