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

Question

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

具体来说，我想从：

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

至：

链接到公司链接

这在属性面板中可能吗？

Answer 1

内置属性面板尝试检测"；看起来像URL"；并将它们转换为实际的<a>链接，但这并不能为这些链接提供不同的名称。

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

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

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

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