如何正确处理Markups Core事件以退出编辑模式？

你当前遇到的核心问题是：监听的EVENT_EDITMODE_CREATION_END事件并非在单个标记绘制完成时触发，而是在整个编辑模式从创建状态切换到非创建状态时才会触发，因此无法满足你完成标记后立即退出编辑模式的需求。

针对这个问题，提供两种可行的解决方案：

方案一：监听具体编辑模式的创建完成事件 #

针对EditModeCloud这类创建型编辑模式，其自身提供了EVENT_CREATION_FINISHED事件，会在用户完成单个标记绘制（如双击鼠标结束云标记绘制）时触发。修改后的代码如下：

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

class MarkupExtension extends BaseExtension {
    constructor(viewer, options) {
        super(viewer, options);
        this._button = null;
        this._currentEditMode = null; // 保存当前编辑模式实例，用于事件管理
    }

    load() {
        super.load();

        this.viewer.loadExtension('Autodesk.Viewing.MarkupsCore')
            .then((markupExt) => {
                this._markupCoreExt = markupExt;
            });

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

    unload() {
        super.unload();

        // 清理按钮
        if (this._button) {
            this.removeToolbarButton(this._button);
            this._button = null;
        }
        // 移除编辑模式的事件监听，避免内存泄漏
        if (this._currentEditMode) {
            this._currentEditMode.removeEventListener(Autodesk.Viewing.Extensions.Markups.Core.EditMode.EVENT_CREATION_FINISHED, this._onCreationFinished);
            this._currentEditMode = null;
        }

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

    // 独立的事件处理函数，方便移除监听
    _onCreationFinished = (ev) => {
        console.log(ev.markup);
        this._markupCoreExt.leaveEditMode();
        this._markupCoreExt.hide();
        // 清理当前编辑模式的监听
        this._currentEditMode.removeEventListener(Autodesk.Viewing.Extensions.Markups.Core.EditMode.EVENT_CREATION_FINISHED, this._onCreationFinished);
        this._currentEditMode = null;
    }

    onToolbarCreated() {
        console.log('Start of Toolbar Creation Event');
        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._currentEditMode = new Autodesk.Viewing.Extensions.Markups.Core.EditModeCloud(this._markupCoreExt);
            // 绑定创建完成事件
            this._currentEditMode.addEventListener(Autodesk.Viewing.Extensions.Markups.Core.EditMode.EVENT_CREATION_FINISHED, this._onCreationFinished);
            // 直接传入编辑模式进入编辑状态，简化流程
            this._markupCoreExt.enterEditMode(this._currentEditMode);
        };
        group.addControl(this._button);
        console.log('Button Added');
    }
}

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

关键改动说明： #

1. 新增_currentEditMode属性，用于保存当前编辑模式实例，方便绑定/移除事件监听
2. 将事件处理逻辑提取为独立函数_onCreationFinished，避免匿名函数无法移除监听的问题
3. 在创建EditModeCloud实例后，绑定其EVENT_CREATION_FINISHED事件，精准捕获单个标记绘制完成的时机
4. 调用enterEditMode时直接传入编辑模式实例，无需先调用空的enterEditMode再执行changeEditMode
5. 在事件触发后和扩展卸载时清理监听，避免内存泄漏

方案二：监听MarkupsCore全局标记添加事件 #

如果需要支持多种标记类型（如云标记、箭头、文字等），可以监听MarkupsCore的EVENT_MARKUP_ADDED事件，该事件会在任何标记被成功添加到系统时触发：

修改load方法中的监听逻辑即可：

this.viewer.loadExtension('Autodesk.Viewing.MarkupsCore')
    .then((markupExt) => {
        this._markupCoreExt = markupExt;
        // 监听全局标记添加完成事件
        this._markupCoreExt.addEventListener(Autodesk.Viewing.Extensions.Markups.Core.EVENT_MARKUP_ADDED, (ev) => {
            console.log(ev.markup);
            this._markupCoreExt.leaveEditMode();
            this._markupCoreExt.hide();
        });
    });

优势： #

• 无需关注具体的编辑模式类型，通用性更强
• 适用于需要统一处理所有标记创建完成逻辑的场景

内容的提问来源于stack exchange，提问作者Kevin Anggrek