Добавление пользовательских свойств на панель свойств
Добавление пользовательских свойств - регулярно повторяющаяся тема, впервые описанная в этой статье (не будет работать на новых версиях Forge Viewer из-за изменений в CSS в v4), затем вновь в этой статье мы добавили новую кнопку (эта версия - рабочая), но при этом мы не заменяли существующую панель свойств.
Так как же полностью заменить существующую панель свойств Forge Viewer-а собственным компонентом?
Фактически, в фреймворке Forge Viewer-а есть метод viewer.setPropertyPanel, принимающий аргументом объект ViewerPropertyPanel - встроенную панель свойств. Таким образом реализация собственной панели свойств, заменяющей стандартную, может просто задать наследуемый от ViewerPropertyPanel класс, в которой будет переопределяться реализация метода setProperties. Чтобы добавить немного больше информации, давайте так же переопределим метод setNodeProperties, чтобы получить dbId:
- function CustomPropertyPanel(viewer, options) {
- this.viewer = viewer;
- this.options = options;
- this.nodeId = -1; // dbId теущего объекта
- Autodesk.Viewing.Extensions.ViewerPropertyPanel.call(this, this.viewer);
- }
- CustomPropertyPanel.prototype = Object.create(Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype);
- CustomPropertyPanel.prototype.constructor = CustomPropertyPanel;
- CustomPropertyPanel.prototype.setProperties = function (properties, options) {
- Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype.setProperties.call(this, properties, options);
- // здесь добавляем пользовательские свойств
- // dbId и externalId
- var _this = this;
- // dbId берем из this.nodeId
- this.addProperty('dbId', this.nodeId, 'Custom Properties');
- // externalId есть в свойствах, получаем его по this.nodeId!
- this.viewer.getProperties(this.nodeId, function(props){
- _this.addProperty('externalId', props.externalId, 'Custom Properties');
- })
- }
- CustomPropertyPanel.prototype.setNodeProperties = function (nodeId) {
- Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype.setNodeProperties.call(this, nodeId);
- this.nodeId = nodeId; // сохраняем dbId!
- };
Чтобы было проще использовать созданный механизм, давайте создадим свой Extension. В этой статье описывается структура extension-ов с собственным toolbar-ом и панелью. Воспользуемся той частью кода, где определяется сам extension (без toolbar-а и панели). Код ниже использует созданную нами реализацию панели свойств и связывает её с объектом viewer-а используя метод setPropertyPanel:
- function CustomPropertyPanelExtension(viewer, options) {
- Autodesk.Viewing.Extension.call(this, viewer, options);
- this.viewer = viewer;
- this.options = options;
- this.panel = null;
- }
- CustomPropertyPanelExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
- CustomPropertyPanelExtension.prototype.constructor = CustomPropertyPanelExtension;
- CustomPropertyPanelExtension.prototype.load = function () {
- this.panel = new CustomPropertyPanel(this.viewer, this.options);
- this.viewer.setPropertyPanel(this.panel);
- return true;
- };
- CustomPropertyPanelExtension.prototype.unload = function () {
- this.viewer.setPropertyPanel(null);
- this.panel = null;
- return true;
- };
- Autodesk.Viewing.theExtensionManager.registerExtension('CustomPropertyPanelExtension', CustomPropertyPanelExtension);
Теперь почти всё готово! Осталось только загрузить созданный нами extension. Если Вы в своём приложении использовали этот пример создания приложения, то Ваше приложение будет содержать примерно следующую строку кода:
- viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D, { extensions: ['CustomPropertyPanelExtension'] });
Источник: https://forge.autodesk.com/blog/adding-custom-properties-property-panel
Обсуждение: http://adn-cis.org/forum/index.php?topic=
Опубликовано 28.03.2019