Forge Viewer - Markups extension inside of a react app

Question

I am trying to use the forge viewer with markups extension inside of a react app and have ran into a problem.

The viewer is docked within a sheet that slides out from the right handside of the page. The first time I open the viewer it works fine, I click the markup icon and can draw an arrow eg:

When I reopen the same document, click the markup icon and draw another arrow, the arrow is huge, like the scale is all wrong:

This is the full react component so far

import React, { useRef, useEffect } from 'react';
import { ReadonlyFormHTMLContainer } from '../../Components/Form/FormComponents';
import { useGlobalContext } from '../../GlobalState';

type ForgeViewerProps = {
    id: string;
    fileUrl: string;
    filename: string;
};

let viewer: Autodesk.Viewing.Viewer3D | null | undefined;

// I can't find a type for Autodesk.Viewing.MarkupsCore - if you can find it, replace any with the correct type, if not you are on your own, no intellisense!
let markup: any;

export const ForgeViewer = (props: ForgeViewerProps) => {
    const containerRef = useRef<HTMLDivElement>(null);
    const context = useGlobalContext();

    useEffect(() => {
        window.Autodesk.Viewing.Initializer({ env: 'Local', useADP: false }, () => {
            viewer = new window.Autodesk.Viewing.GuiViewer3D(containerRef.current!);
            viewer.start();

            viewer.loadExtension('Autodesk.PDF').then(() => {
                viewer!.loadModel(props.fileUrl, viewer!);
                viewer!.loadExtension('Autodesk.Viewing.MarkupsCore').then(ext => {
                    markup = ext;
                });
                viewer!.loadExtension('Autodesk.Viewing.MarkupsGui');
            });
        });

        return () => {
            console.log('Running clean up');
            viewer?.tearDown();
            viewer?.finish();
            viewer = null;
        };
    }, []);

    return (
        <ReadonlyFormHTMLContainer
            title={'Document markup'}
            subtitle={props.filename}
            formErrorMessage=""
            formErrorTitle=""
            onClose={() => context.hideSheet()}
        >
            <div ref={containerRef}></div>{' '}
        </ReadonlyFormHTMLContainer>
    );
};

I have imported following modules from npm:

Forge version: https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js

Does anyone have any idea on how to resolve this? As you can see I've tried some clean up code when the component unmounts but I cannot get the viewer to work "normally" after the initial open.

Edit repro link: https://github.com/philwindsor/forge-repro/blob/master/index.html

Answer 1

This is a timing issue.

When you open the viewer for the first time, the markup extension takes some time to download and it is therefore initialized after the model has already been loaded. Because of that, the extension knows how to initialize the scale of its markups properly.

When you open the viewer for the second time, the markup extension is already available, and it is loaded and initialized before any model is available. And because of that, it cannot configure the "expected" scale.

To resolve the issue, simply load the Autodesk.Viewing.MarkupsCore and Autodesk.Viewing.MarkupsGui extensions after the model is loaded, for example:

viewer.loadModel(urn, options, function onSuccess() {
    viewer.loadExtension("Autodesk.Viewing.MarkupsCore");
    viewer.loadExtension("Autodesk.Viewing.MarkupsGui");
});