如何处理标记核心事件以适当地离开编辑模式？

Question

我正在创建一个自定义扩展类，它将把 MarkupsCore 扩展加载到查看器。创建工具栏时，自定义扩展类还将在工具栏上创建一个按钮。

在 Load() 上，我将标记扩展加载到查看器，将其实例设置为自定义扩展类的属性，然后将事件侦听器添加到 EVENT_EDITMODE_CREATION_END，一旦用户在查看器上绘制完标记，就会触发该事件侦听器。一旦事件被触发，我想离开编辑模式。

单击按钮时，我使用 EnterEditMode() 启动编辑模式。

在进入编辑模式之前，代码可以正常工作。然而，一旦用户完成标记的绘制，该事件就不会被触发，因此，不会调用leaveEditMode()，并且查看器会停留在编辑模式。我应该如何正确处理此事件并在用户完成绘制标记后调用leaveEditMode？ （这仅用于测试目的，稍后我将实现数据生成和标记的保存）。

这是我的代码片段：

import { BaseExtension } from './BaseExtension.js';

class MarkupExtension extends BaseExtension {
    constructor(viewer, options) {
        super(viewer, options);
        this._button = null;
    }

    load() {
        super.load();

        // Load the MarkupsCore extension to the viewer
        this.viewer.loadExtension('Autodesk.Viewing.MarkupsCore')
            .then((markupExt) => {
                this._markupCoreExt = markupExt;

                // Adds Listeners to MarkupsCore Events
                this._markupCoreExt.addEventListener(Autodesk.Viewing.Extensions.Markups.Core.EVENT_EDITMODE_CREATION_END, (ev) => {
                    console.log(ev.markup);
                    this._markupCoreExt.leaveEditMode();
                    this._markupCoreExt.hide();
                });
            });

        console.log('MarkupExtension loaded.');
        return true;
    }

    unload() {
        super.unload();

        // Removes button and panel on unload
        if (this._button) {
            this.removeToolbarButton(this._button);
            this._button = null;
        }

        console.log('MarkupExtension unloaded.');
        return true;
    }

    onToolbarCreated() { // Called by viewer when the toolbar is ready, invoked by TOOLBAR_CREATED_EVENT
        console.log('Start of Toolbar Creation Event');
        // Sets the Button for Markup Creation
        let group = this.viewer.toolbar.getControl('dashboard-toolbar-group');
        this._button = new Autodesk.Viewing.UI.Button('markup-edit-mode-button');
        this._button.setToolTip('Markup Mode');
        this._button.onClick = () => {
            this._markupCoreExt.allowNavigation(true);
            this._markupCoreExt.enterEditMode();
            let cloudMode = new Autodesk.Viewing.Extensions.Markups.Core.EditModeCloud(this._markupCoreExt);
            this._markupCoreExt.changeEditMode(cloudMode);
        };
        group.addControl(this._button);
        console.log('Button Added');
    }
}

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

Answer 1

// Fired whenever the drawing tool changes. For example, when the Arrow drawing tool changes into the Rectangle drawing tool.
markupext.addEventListener('EVENT_EDITMODE_CHANGED', function (ev) {
    const editTool = ev.target;
    if (editTool) {
        //Fired when a markup has been created. For example, as soon as the user stops dragging and releases the mouse button to finish drawing an arrow on the screen
        editTool.addEventListener('EVENT_EDITMODE_CREATION_END', function (ev) {
            saveMarkups(). // or do something else
        });
        // Fired when a markup is no longer selected.
        editTool.addEventListener('EVENT_MARKUP_DESELECT', function (ev) {
            saveMarkups() // or do something else
        });
    }
});

// The selected markup is no longer being modified
markupext.editFrame.addEventListener('EVENT_EDITFRAME_EDITION_END', function (ev) {
    saveMarkups() // or do something else
});

参考：https://github.com/autodesk-platform-services/aps-simple-viewer-nodejs/tree/markups-persist