This [1] discussion touches on it. A PAYG approach might be to add PointUtils.getPositionInParent(uibase:UIBase) which would do the same thing PointUtils.localToGlobal() for element and parent and output the difference.
[1] http://apache-flex-development.2333347.n4.nabble.com/FlexJS-Layouts-td61120.html#a61330 From: Alex Harui<mailto:aha...@adobe.com.INVALID> Sent: Wednesday, August 30, 2017 7:02 PM To: dev@flex.apache.org<mailto:dev@flex.apache.org> Subject: Re: [FlexJS] Finding (x,y) position Hopefully Peter will find a solution based on your input. But I think a problem still exists. The basic problem is how to find the x,y position of a child within its parent. I believe Peter is saying that the x and y getters in UIBase are not reporting correct values in many cases in the browser. Apparently, you can ask for the child.x and child.y of a child that is visibly not at 0,0 in its parent and you will get 0. I think we haven't noticed that because nobody currently cares, but it kinds of bugs me that something that "basic" doesn't do the right thing all of the time. Thoughts? -Alex On 8/30/17, 7:53 AM, "Peter Ent" <p...@adobe.com.INVALID> wrote: >I'm trying to draw a drop indicator above the row in the DataGrid where >new data would be inserted if the user releases the mouse button at that >point. > >The drop indicator is being drawn in a layer (added by a new bead) that is >floating above the <div> containing the DataGrid's column lists. > >As the mouse is detected over an itemRenderer, I need to know the >itemRenderer's position within its list so I can translate that into >global space and then into the space of the layer. > >However, what you just wrote gave me another idea that might just work. > >Thanks! >—peter > >On 8/30/17, 10:30 AM, "Yishay Weiss" <yishayj...@hotmail.com> wrote: > >>Strike that. I don’t see what you’re saying. Why not just use 0,0? Why do >>you need x,y? Or you could add w/2, h/2 if you want to center the drop >>target. >> >>Looking at PointUtils.localToGlobal() it just calls >>element.getBoundingClientRect() (as you suggested) and adds the given x,y >>to the result. >> >>From: Yishay Weiss<mailto:yishayj...@hotmail.com> >>Sent: Wednesday, August 30, 2017 5:11 PM >>To: dev@flex.apache.org<mailto:dev@flex.apache.org> >>Subject: RE: [FlexJS] Finding (x,y) position >> >>I see what you’re saying. I think we worked around that issue in our app >>by relying on MouseEvent.clientX, MouseEvent.clientY. But let’s hear >>other ideas for a more complete solution. >> >>From: Peter Ent<mailto:p...@adobe.com.INVALID> >>Sent: Wednesday, August 30, 2017 4:48 PM >>To: dev@flex.apache.org<mailto:dev@flex.apache.org> >>Subject: Re: [FlexJS] Finding (x,y) position >> >>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 >>> >> >
