x and y coords in MouseDown event are wrong?

This is probably so obvious that I just can’t see it, but I’ve been fighting with this for quite some time now. I’m working on what is basically a color picker implemented as a webImageView. I set it’s url to a webPicture and when you click on it I use the X and Y coordinates to figure out what color you’ve clicked on. Except that the X and Y coordinates are wrong and I can’t figure out how to normalize them to the control.

The problem is probably due to the fact that this is a subclass of webImageView which is on a container control which is embedded in a web Dialog. So there are 3 levels of parent containers to deal with or so.

I have tried subtracting me.left and self.left, those seem to be the same value anyway and don’t bring it into reality. Subtracting them and parent.left results in negative values towards the left of the control.

There is an apparently undocumented “localizePoint” method of all those containers, but passing the x,y through it as a point don’t result in a real offset for the local control either.

Interestingly it also seems that X changes based on my resizing of the window, so there is no way it’s remotely pre-localized to the control as the docs suggest if it’s different as the dialog moves around.

Is there a reasonable way to get around this or do I need to just throw this away and do another webPlugin control that handles the drawing and mouse clicks?

What kind of dialog are you using?

It’s a modal webDialog. With an embedded container control with a subclassed webImageControl that I’m trying to localize a click on. I can easily switch to a non-modal dialog or something else if that would solve the problem. I can also rework the control as a webapi control if I have to, but testing all that javascript makes me stabby…

The x and y coordinate are relative to the top-left corner of the browser then because the gray overlay is part of the dialog.

I’m going to switch to putting the controls in a container control which I will make visible or invisible and manage the location of automatically. I think that will solve the problem for me. I’m not sure how I could localize from the top left of the browser otherwise?

calculating the mouse coordinates for controls on WebContainers and esp. WebDialogs is quite tricky and depend on the WebDialog.Type, but it is doable. Some guides can be found in <https://xojo.com/issue/20217> and <https://xojo.com/issue/21161>
Please note that in recent releases you cannot trust WebPage.Width and WebPage.Height w/o a manual user-initiated resize of the window. This adds a lot of complication but thankfully seems to be fixed recently: <https://xojo.com/issue/46463>

I will research those thank you for the info! When I do my own web api controls I have to do quite a bit of futzing around to get the proper localization so I’m not surprised this is difficult. Perhaps I should just mark it as a documentation error so that there is some indication that the x,y coordinates are not useful when on a webDialog or container… I’ve been rebuilding it as just an embedded container control, but had lots of other things to accomplish today so haven’t even gotten it to display yet to see if that solves my specific problem.

It is possible to get the dialog left and top in JavaScript. The grey overlay is the first div, the second one is the visible dialog.