reactjsautodesk-forgeautodesk-viewerreact-class-based-component

Autoforge Viewer canvas won't resize after open sibling container

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.

Solution

  • 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: