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
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" <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
>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: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.
>
>
>‹peter
>
>On 8/30/17, 3:02 AM, "Yishay Weiss" <yishayjobs@hotmail.com> wrote:
>
>>Peter,
>>
>>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
>>
>>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
>>
>

Mime
View raw message