Forge Viewer - React 应用程序内的标记扩展答案

【问题标题】：Forge Viewer - Markups extension inside of a react appForge Viewer - React 应用程序内的标记扩展
【发布时间】：2020-11-26 21:11:34
【问题描述】：

我正在尝试在 React 应用程序中使用带有标记扩展的 forge 查看器，但遇到了问题。

查看器停靠在从页面右侧滑出的工作表中。第一次打开查看器时它工作正常，我单击标记图标并可以绘制箭头，例如：

当我重新打开同一个文档时，单击标记图标并绘制另一个箭头，箭头很大，好像比例都错了：

这是迄今为止完整的反应组件

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>
    );
};

我从 npm 导入了以下模块：

锻造版：https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js

有人知道如何解决这个问题吗？如您所见，我在组件卸载时尝试了一些清理代码，但在初始打开后我无法让查看器“正常”工作。

编辑复制链接：https://github.com/philwindsor/forge-repro/blob/master/index.html

【问题讨论】：

Forge Viewer 使用 Three.js r71，也许这导致了那里的冲突（我看到你有 r103）
@AugustoGoncalves 感谢您的关注，但这些只是类型定义？
这看起来可能与 SVG 元素的 viewBox 设置有关。标记扩展在各种事件期间更新视图框属性，以确保所有标记与绘图的位置/比例正确对齐。隐藏和显示滑动表时，检查viewBox 值是否发生显着变化。
如果有可以重现该问题的实时样本也会有所帮助。
@PetrBroz 我现在正在为您解决这个问题。一旦我有一个repro，就会更新问题。

标签： reactjs autodesk-viewer

【解决方案1】：

这是一个时间问题。

当您第一次打开查看器时，标记扩展需要一些时间来下载，因此它会在模型加载后进行初始化。因此，扩展知道如何正确初始化其标记的比例。

当您第二次打开查看器时，标记扩展已经可用，并且它在任何模型可用之前被加载和初始化。正因为如此，它无法配置“预期”的规模。

要解决此问题，只需在加载模型之后加载Autodesk.Viewing.MarkupsCore 和Autodesk.Viewing.MarkupsGui 扩展，例如：

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

【讨论】：