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

Question

如何在长 link 上使用 addProperty() 来显示短 link 文本？

具体我想从：

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

至：

Link 到公司 Link

这在属性面板中可行吗？

Answer 1

内置属性面板试图检测“看起来像 URL”的属性值并将它们转换为实际的 <a> link，但它没有不会给你一个方法来给那些 link 一个不同的名字。

为了实现您想要的效果，您必须 class ViewerPropertyPanel class 并重写 displayProperty 方法，该方法负责将属性记录到实际的HTML个元素中：

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

这是实现自定义属性面板的完整查看器扩展，包括。 link 自定义：

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, parent, options) {
        const [nameEl, valueEl] = super.displayProperty(property, parent, 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', 'https://forge.autodesk.com', 'Category 1');
    }
}

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

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

Use addProperty() on long links properly

autodesk-viewer

autodesk-forge