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

Posted 2023-03-16

【中文标题】Forge Viewer - React 应用程序内的标记扩展

【英文标题】：Forge Viewer - Markups extension inside of a react app

【发布时间】：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，就会更新问题。

【参考方案1】：

这是一个时间问题。

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

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

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

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