Сообщество программистов Autodesk в СНГ :: Базовое расширения: панель инструментов и присоединяемая панель

Сообщество программистов Autodesk в СНГ
Forge: Viewer
Базовое расширения: панель инструментов и присоединяемая панель

01/03/2018

Базовое расширения: панель инструментов и присоединяемая панель

Создание расширения - это рекомендуемый подход для добавления пользовательского кода в Viewer. И в большинстве случаев нам нужен некоторый пользовательский интерфейс: кнопки и панели. Этот базовый код показывает, как создать расширение со всем этим.

Прикрепляемая панель

Сначала создадим прикрепляемую панель, используя Autodesk.Viewing.UI.DockingPanel UI . Обратите внимание, что основной контейнер содержит панель, а дочерний div - это место, где мы должны размещать контент. CSS класс, используемый здесь, позволяет темы для Viewer версии 4 и выше.

Код - JavaScript: [Выделить]

// *******************************************
// Моя замечательная (прикрепляемая) панель
// *******************************************
function MyAwesomePanel(viewer, container, id, title, options) {
    this.viewer = viewer;
    Autodesk.Viewing.UI.DockingPanel.call(this, container, id, title, options);
 
    // стиль прикрепляемой панели
    // используем этот встроенный стиль для поддержки Themes в Viewer 4 и выше
    this.container.classList.add('docking-panel-container-solid-color-a');
    this.container.style.top = "10px";
    this.container.style.left = "10px";
    this.container.style.width = "auto";
    this.container.style.height = "auto";
    this.container.style.resize = "auto";
 
    // здесь мы должны размещать содержимое нашей панели
    var div = document.createElement('div');
    div.style.margin = '20px';
    div.innerText = "Мой контент здесь";
    this.container.appendChild(div);
    // и также может добавлять дочерние элементы ...
 
}
MyAwesomePanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);
MyAwesomePanel.prototype.constructor = MyAwesomePanel;

Расширение

На самом деле у нас много примеров с расширениями, здесь основное различие заключается в объединении с ним кнопки панели инструментов. На эту тему есть 2 учебника: расширения и панель инструментов. Следующий код просто соединяет их вместе и использует присоединяемую панель, описанную выше. Кнопка CSS должна быть определена в вашем файле .css.

Код - JavaScript: [Выделить]

// *******************************************
// Мое Удивительное расширение
// *******************************************
function MyAwesomeExtension(viewer, options) {
    Autodesk.Viewing.Extension.call(this, viewer, options);
    this.panel = null;
}
 
MyAwesomeExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
MyAwesomeExtension.prototype.constructor = MyAwesomeExtension;
 
MyAwesomeExtension.prototype.load = function () {
    if (this.viewer.toolbar) {
        // Панель инструментов уже доступна, создайте пользовательский интерфейс
        this.createUI();
    } else {
        // Панель инструментов еще не создана, подождите, пока мы не получим уведомление о ее создании
        this.onToolbarCreatedBinded = this.onToolbarCreated.bind(this);
        this.viewer.addEventListener(av.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
    }
    return true;
};
 
MyAwesomeExtension.prototype.onToolbarCreated = function () {
    this.viewer.removeEventListener(av.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
    this.onToolbarCreatedBinded = null;
    this.createUI();
};
 
MyAwesomeExtension.prototype.createUI = function () {
    var viewer = this.viewer;
    var panel = this.panel;
 
    // для отображения прикрепляемой панели
    var toolbarButtonShowDockingPanel = new Autodesk.Viewing.UI.Button('showMyAwesomePanel');
    toolbarButtonShowDockingPanel.onClick = function (e) {
        // если null, создадим ее
        if (panel == null) {
            panel = new MyAwesomePanel(viewer, viewer.container,
                'awesomeExtensionPanel', 'Мое Удивительное расширение');
        }
        // показать / скрыть прикрепляемую панель
        panel.setVisible(!panel.isVisible());
    };
    // класс myAwesomeToolbarButton CSS должен быть определен в вашем файле .css
    // вы можете включать значки, ниже приведен пример класса:
    /*
    .myAwesomeToolbarButton {
        background-image: url(/img/myAwesomeIcon.png);
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: center;
    }*/
    toolbarButtonShowDockingPanel.addClass('myAwesomeToolbarButton');
    toolbarButtonShowDockingPanel.setToolTip ('Мое Удивительное расширение');
 
    // подпанель (SubToolbar)
    this.subToolbar = new Autodesk.Viewing.UI.ControlGroup('MyAwesomeAppToolbar');
    this.subToolbar.addControl(toolbarButtonShowDockingPanel);
 
    viewer.toolbar.addControl(this.subToolbar);
};
 
MyAwesomeExtension.prototype.unload = function () {
    this.viewer.toolbar.removeControl(this.subToolbar);
    return true;
};
 
Autodesk.Viewing.theExtensionManager.registerExtension('MyAwesomeExtension', MyAwesomeExtension);