Autoforge Viewer canvas won't resize after open sibling container

Question

I have 2 element rendering in a same parent element one of them is a parameter container that can open and close and other is forge viewer. At 876px width this parent element gets flex-direction:column ; . When i open parameters container and go below 876px and close the parameter container forge viewer canvas size wont resize and white blank space appears.

enter image description here

enter image description here

enter image description here

forgeView.js

import React, { Component } from 'react';
import Script from 'react-load-script';
import {connect} from 'react-redux';
import { getActiveProject } from '../reducers/mainReducer';
import './forgeView.css';
import Message from './message';
import repo from '../Repository';
import { viewerCss, viewerJs } from './shared';
import ParametersContainer from './parametersContainer'
import './parametersContainer.css'

let Autodesk = null;

export class ForgeView extends Component {

    constructor(props){
      super(props);
        
      this.viewerDiv = React.createRef();
      this.viewer = null;
    }

    

    resizeViewer() {
        if (this.viewer && this.viewerDiv.current) {
            const container = this.viewerDiv.current;
            this.viewer.resize()
        }   
    }

    handleScriptLoad() {

        const options = repo.hasAccessToken() ?
                            { accessToken: repo.getAccessToken() } :
                            { env: 'Local' };

        Autodesk = window.Autodesk;

        const container = this.viewerDiv.current;
        this.viewer = new Autodesk.Viewing.GuiViewer3D(container);

        // uncomment this for Viewer debugging
        //this.viewer.debugEvents(true);

        Autodesk.Viewing.Initializer(options, this.handleViewerInit.bind(this));
        window.addEventListener("resize", this.resizeViewer.bind(this));
    }

    handleViewerInit() {
        const errorCode = this.viewer.start();
        if (errorCode)
            return;

        // orient camera in the same way as it's on the thumbnail
        // corresponding to ViewOrientationTypeEnum.kIsoTopRightViewOrientation
        const viewer = this.viewer;
        const forgeSpinner = document.getElementsByClassName("forge-spinner")[0]
        const image = forgeSpinner.children[1]
        image.src = "";
        this.viewer.addEventListener(Autodesk.Viewing.EXTENSION_LOADED_EVENT, (event) => {

            const viewCubeExtensionId = "Autodesk.ViewCubeUi";

            // this is not perfect, because the view transition is visible, so it's a place to improve someday
            if (event.extensionId === viewCubeExtensionId) {

                const viewCubeUI = event.target.getExtension(viewCubeExtensionId);
                viewCubeUI.setViewCube("front top right");

                viewer.removeEventListener(Autodesk.Viewing.EXTENSION_LOADED_EVENT);
            }

            const explodeExtension = viewer.getExtension('Autodesk.Explode');
            const sectionExtension = viewer.getExtension('Autodesk.Section');
            const modelExtension = viewer.getExtension('Autodesk.ModelStructure');
            const propertiesExtension = viewer.getExtension('Autodesk.PropertiesManager');

            explodeExtension.unload();
            sectionExtension.unload();
            modelExtension.unload();
            propertiesExtension.unload();

        });

        // skip loading of svf when there is no active project svf
        if (!this.props.activeProject.svf)
            return;

        Autodesk.Viewing.Document.load(
            this.getSvfUrl(), this.onDocumentLoadSuccess.bind(this), () => {}
        );
    }

    componentDidMount() {
        this.resizeViewer();
    }

    componentDidUpdate(prevProps) {
        if (Autodesk && (this.props.activeProject.svf !== prevProps.activeProject.svf)) {
            Autodesk.Viewing.Document.load(
                this.getSvfUrl(), this.onDocumentLoadSuccess.bind(this), () => {}
            );
        }

        this.resizeViewer();

       
    }

    componentWillUnmount() {
        if (this.viewer) {
            this.viewer.finish();
            this.viewer = null;
            Autodesk.Viewing.shutdown();
        }

        window.removeEventListener("resize", this.resizeViewer.bind(this));
    }

    getSvfUrl() {
        return this.props.activeProject.svf + `/bubble.json`;
    }

    onDocumentLoadSuccess(viewerDocument) {
        const defaultModel = viewerDocument.getRoot().getDefaultGeometry();
        this.viewer.loadDocumentNode(viewerDocument, defaultModel).then(() => {
            this.viewer.fitToView();
        })
    }

    render() {

      return (
            <div className="modelContainer fullheight">
                <Message/>
              <div className="viewer" id="ForgeViewer">
                  <div ref={this.viewerDiv}></div>
                    <link rel="stylesheet" type="text/css" href={ viewerCss } />
                    <Script url={ viewerJs } onLoad={this.handleScriptLoad.bind(this)} />
                </div>
            </div>
        );
    }
}  

I look up other similar questions but that didn't work for me.

Answer 1

I see that you're already calling viewer.resize which should update the rendering context accordingly. If that's not working, I'd suggest to try the following:

• when you end up in the "broken" state where the viewer is not rendering the entire object, try opening the browser console, and type NOP_VIEWER.resize(); if that resolves the issue, it's possible that your code isn't calling the viewer.resize method at the right time

• are you perhaps using any animations when opening/closing the parameters UI? If so, try and disable them, or make sure that the viewer.resize is called after the animation is complete

• check the browser console to see if there are any errors or warnings that could be related to the incomplete rendering