flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Peter Ent <p...@adobe.com.INVALID>
Subject Re: [FlexJS] Finding (x,y) position
Date Wed, 30 Aug 2017 14:53:58 GMT
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

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.


On 8/30/17, 10:30 AM, "Yishay Weiss" <yishayjobs@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
>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:yishayjobs@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:pent@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.
>On 8/30/17, 3:02 AM, "Yishay Weiss" <yishayjobs@hotmail.com> wrote:
>>Is PointUtils.localToGlobal() not working for you? From what I understand
>>it takes approach (1).
>>From: Peter Ent<mailto:pent@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
>>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>
>>(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
>>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!

View raw message