Viewer zoom target issue

Help Developers
1

Thank you for seeking help! Our friendly community is here to assist you. :pray:

To assist you better, please consider providing:

Hi everyone!

  • Objective: I am trying to use the viewer package inside a page of a react application. The page is structure with some elements on the left, and I have positioned the viewer occupying a portion of the page to the right, aka its not positioned with position:absolute;

  • Issue: I cannot get the zoom to work properly. It’s zooming towards an arbitrary point (which is not the position of the mouse or the center of the model). Double clicking an element to recenter does not fix the issue.

I am using the viewer package "@speckle/viewer": "^2.20.1",

Could you think that this is an issue with the viewer package? Does it assume that the position of the div that contains the viewer must be absolute? In all the examples I have seen that the div has this style: "width:100%;height:100%;left:0px;top:0px;position:absolute
but I want to position the viewer on one side of the page.

Thanks for your help :slight_smile:

2

Here is a minimum sample of the issue. If I place the viewer inside a flexbox, the zoom center point is somewhere outside of the view:

thanks for your help :slight_smile:

3

@andrsbtrg

Answering from mobile, so speculative answer.

Could you try wrapping your viewer in an absolute container within your flexbox layout. Here’s a lightweight approach:

.parent-container {
  display: flex;
  height: 100vh; /* or any height you prefer */
}

.sidebar {
  width: 30%; /* Adjust as needed */
  background-color: #f0f0f0; /* Example styling */
}

.viewer-wrapper {
  position: relative;
  flex: 1; /* Fills the remaining space */
}

.viewer-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="parent-container">
  <div class="sidebar">
    <!-- Sidebar content here -->
  </div>
  <div class="viewer-wrapper">
    <div id="viewer" class="viewer-container"></div>
  </div>
</div>

I believe this setup should help the viewer’s zoom and centering work properly while keeping your layout intact. I have no idea what this looks like in React-land.

Let me know if it helps!

2 Likes
4

Hi Jonathon! That worked to fix the zoom issue! Thank you so much.

can’t wrap my head around how you just answered from a mobile and got it 100% right, mind blowing, just amazing. Need to level up my css skills!

2 Likes