在长链接上正确使用 addProperty()

问题描述

如何在长链接上使用 addproperty() 来显示短链接文本？

具体来说，我想从：

链接到公司 https://en.wikipedia.org/wiki/Autodesk_Media_and_Entertainment

到：

链接到公司 Link

在属性面板中可以这样做吗？

解决方法

内置属性面板会尝试检测“看起来像 URL”的属性值并将它们转换为实际的 <a> 链接，但它并没有让您为这些链接指定不同的名称。

>

为了实现您想要的，您必须子类化 ViewerPropertyPanel 类并覆盖负责将属性记录转换为实际 HTML 元素的 displayProperty 方法：

displayProperty(property,parent,options) {
    const [nameEl,valueEl] = super.displayProperty(property,options);
    if (property.value.startsWith('https://')) {
        valueEl.innerHTML = `<a href="${property.value}">Link</a>`;
    }
}

这是一个完整的查看器扩展，它实现了自定义属性面板，包括。链接自定义：

class CustomPropertyPanelExtension extends Autodesk.Viewing.Extension {
    constructor(viewer,options) {
        super(viewer,options);
    }

    async load() {
        this.viewer.addEventListener(Autodesk.Viewing.EXTENSION_LOADED_EVENT,(ev) => {
            if (ev.extensionId === 'Autodesk.PropertiesManager') {
                const ext = this.viewer.getExtension('Autodesk.PropertiesManager');
                ext.setPanel(new CustomPropertyPanel(this.viewer));
            }
        });
        return true;
    }

    unload() {
        return true;
    }
}

class CustomPropertyPanel extends Autodesk.Viewing.Extensions.ViewerPropertyPanel {
    constructor(viewer) {
        super(viewer);
    }

    displayProperty(property,options) {
        const [nameEl,options);
        if (property.value.startsWith('https://')) {
            valueEl.innerHTML = `<a href="${property.value}">Link</a>`;
        }
    }

    setProperties(props,options) {
        super.setProperties(props,options);
        this.addProperty('Prop A','https://forge.autodesk.com','Category 1');
    }

    setAggregatedProperties(props) {
        super.setAggregatedProperties(props);
        this.addProperty('Prop A','Category 1');
    }
}

Autodesk.Viewing.theExtensionManager.registerExtension('CustomPropertyPanelExtension',CustomPropertyPanelExtension);