SpreadJSのコンテキストメニューをカスタマイズする – リボンコンテナ編 –（2）

・・・（中略）・・・
document.addEventListener("DOMContentLoaded", function () {
    const designer = new GC.Spread.Sheets.Designer.Designer("designerHost");
    const spread = designer.getWorkbook();
    SetRibbonContextMenuC(designer, spread); // <== SetRibbonContextMenuBから変更
    SwitchMenuEnabled(designer, spread); // <== 追加
});

// コンテキストメニューの追加：commandManagerに登録する方法（Undo可能）
function SetRibbonContextMenuC(designer, spread) {
    // commandManagerにUndo処理を許可した独自機能を登録
    spread.commandManager().register("setRowBackColorCommand", {
        canUndo: true,
        execute: function (spread, options, isUndo) {
            const Commands = GC.Spread.Sheets.Commands;
            if (isUndo) {
                Commands.undoTransaction(spread, options);
                return true;
            } else {
                Commands.startTransaction(spread, options);
                spread.suspendPaint();
                const sheet = spread.getActiveSheet();
                const selections = options.selections;
                const style = new GC.Spread.Sheets.Style();
                style.backColor = "red";
                if (selections[0].row == -1 && selections[0].col == -1) {
                    sheet.clearSelection();
                    sheet.getRange(-1, -1, -1, -1, GC.Spread.Sheets.SheetArea.viewport).setStyle(style);
                } else {
                    selections.forEach(function (s) {
                        sheet.getRange(s.row, -1, s.rowCount, -1, GC.Spread.Sheets.SheetArea.viewport).setStyle(style);
                    });
                }
                spread.resumePaint();
                Commands.endTransaction(spread, options);
                return true;
            }
        }
    });

    // 既定のConfigの取得
    const config = GC.Spread.Sheets.Designer.DefaultConfig;

    // コンテキストメニュー項目の追加
    config.contextMenu.unshift("separator");
    config.contextMenu.unshift("setRowBackColorMenu");

    // commandMapの設定：独自機能はcommandNameパラメータで指定
    config.commandMap = {
        "setRowBackColorMenu": {
            text: "背景色を変更",
            enableContext: "enableCustomMenu", // <== SetRibbonContextMenuBにはなかった設定
            commandName: "setRowBackColorCommand",
            visibleContext: "ClickRowHeader"
        }
    }

    // 変更したConfigの設定
    designer.setConfig(config);
}

// 第2回のSwitchMenuEnabledとは異なる手法です
function SwitchMenuEnabled(designer, spread) {
    // コンテキストメニューの動的な変更：CommandMapのenableContextパラメータを使用
    const designerOnOpenMenu = spread.contextMenu.onOpenMenu;
    spread.contextMenu.onOpenMenu = function (menuData, itemsDataForShown, hitInfo, spread) {
        if (spread.getActiveSheet().getValue(0, 1) == null) {
            designer.setData('enableCustomMenu', false);
        } else {
            designer.setData('enableCustomMenu', true)
        }
        return designerOnOpenMenu.apply(this, arguments);
    };

    // シートの設定
    const sheet = spread.getSheet(0);
    sheet.getCell(0, 1).watermark("ここに値を入力してください。");
    sheet.setColumnWidth(1, 250);
}