Mouse offsets when I click on a model!

This is best explained in the image below:

Basically what happens is when I click on the model, the node that gets highlighted is a node down and to the right. In order to highlight that yellow node, I clicked roughly in the red dot area. The offset is pretty consistent and I’m not sure how its caused at all. For reference, I am using angular.

Is there a way to get the coordinates of where I am clicking?

Hi Diego,

A few things come to mind. My first thought is that perhaps the canvas is not being resized to the window. Are you modifying the dimensions of your browser window at all after starting the viewer? If your window size changes, and modifies the size of the div element the holds the viewer, you should explicitly call to resize the viewer as well. You can set an event listener to call the resize function. As a potential example:

        window.onresize = (event) => {
            if (typeof event.target.getAttribute !== "function") {
                hwv.resizeCanvas();  // hwv = HOOPS WebViewer
            }
         };

The underlying cause is most likely because the canvas dimensions are not matching the dimensions of the element capturing the location of the click event. Are you (or perhaps implicitly, Angular) changing the dimensions of the <div> the canvas is being held in? Is the selection offset behavior exhibited from the very start of the session, without resizing anything?

Thanks for the info.
Chris

Yes, the selection offset behavior happens from the very start of the session. Additionally, I ran a test using the window.onresize event (print to console on resize event) and the window is never resized unless I manually do it :confused:

I did resize the canvas in css, but I did the same thing with the same dimensions before (in the basic app demo) and didn’t have any problems.

viewer

I commented out the CSS snippet and the offset is gone!

So is there a better way to set the viewer dimensions?

I believe how you were setting the style is fine. That is how I personally usually do it.

Where are the dimensions for the viewer being set if you commented out the styling snippet above? If you inspect the HTML, what styling do you have on the viewer container? Using the out of the box quick_start, I have no issues using your styling.

Are you setting the style on the <div> id that you used to instantiate the WebViewer, or another <div>?

Perhaps some sort of cascading style is causing the viewer to be offset?

With my style commented out, I’m not sure where the dimensions are set.They appear to change as the window size changes. This is what it looks like with my styling commented out:

I also have no issues with the out of the box quick_start and my styling, only in my angular app :confused:

With my styling, the html looks almost exactly like what you sent in the previous message.

The style is set on the div that instantiates the WebViewer.

Lastly I did notice this difference between when I had my styling and when I didn’t. I’m not sure if it means anything or if its even anything I can change… The following is the client and offset measurements for my WebViewer div with my styling:
offsetwithstyle
Without my styling, ClientHeight:0, ClientWidth:1110, OffsetHeight:0, OffsetLeft:0, OffsetWidth:1110

After some more digging, for whatever reason, the “position: relative;” styling is what causes the issue for me.

When I comment only this out, the WebViewer div is pretty weird but the clicking is perfect. The black outline is where it should be but the display canvas goes over the right side.

I figured it out! Thank you for all the help! I feel like my issues are never with HOOPS but always with Angular or something else!

Thank you for your attention to detail!

I’m not exactly sure why but change the position of the div to ‘absolute’ fixes it!

1 Like

Hi Diego,

maybe one other possiblity, I encountered similar issue and it was due to the div not being empty, so everything was shifted consistently for redlining and selection. I resolved it by making sure the div that will hold the canvas is as simple as possible: