ken_nogi/pleasanter/develop/MDエディタ/sites/scripts/mermaid_Editor2.js

/*
@config : next999.json
@filename : ${psFileBasename}
@title : mermaid_Editor2
@name :
@siteIds : 326341
@siteTitles : Mermaid■チャート生成
@disabled: false
*/
let pageLoading = 0; //ページのロード状態を管理する変数
//----------------------------------------------------------------------
//初期処理
window.addEventListener('load', function () {
    if (pageLoading == 0) {
        console.log('Window load Event');
        $p.ex.onLoad();
    }
});

$p.events.on_editor_load = function () {
    if (pageLoading == 0) {
        console.log('on Editor Load');
        $p.ex.onLoad();
    }
}

//----------------------------------------------------------------------
$p.ex.onLoad = function () {
    //ロード開始
    pageLoading = 1;

    //初期処理
    $p.ex.init();
}

//初期処理
$p.ex.init = function () {
    initMermaid();
};

async function initMermaid() {
    //初期化
    //初期化
    const mermaidContent = $('#Results_Body').val(); //値を取得

    if ($('#mermaidWindow').length) {
        $('#mermaidWindow').remove(); //既存のMermaidウインドウを削除
    }

    //Mermaidウインドウ
    let mermaidWindow = document.createElement('div');
    mermaidWindow.id = 'mermaidWindow'; //任意のIDを指定
    mermaidWindow.className = 'mermaidWindow'; //任意のクラスを指定

    let h1 = document.createElement('h1');
    h1.innerHTML = 'Mermaid Viewer';
    mermaidWindow.appendChild(h1);

    let h2 = document.createElement('h2');
    h2.innerHTML = 'Mermaid記法で記述された図がプレビューされます。';
    mermaidWindow.appendChild(h2);

    //Preview用Preタグを作成
    const pre = document.createElement('pre');
    pre.id = 'mermaidPreview';
    pre.className = 'mermaid'; //Mermaid描画用のクラスを設定
    pre.textContent = mermaidContent; //Mermaid記法を設定

    //描画エリアに追加
    mermaidWindow.appendChild(pre);
    $('#Editor').after(mermaidWindow);

    //Mermaidを再レンダリング
    if (window.mermaid) {
        await mermaid.init(undefined, '#mermaidPreview');
    } else {
        console.error('Mermaidライブラリが読み込まれていません。');
    }

    //PNG出力ボタンを作成
    createExportButton();

    //クリップボード保存ボタンを作成
    //createSaveImageButton();

}

//Mermaid図をPNG形式で出力するボタンを作成
function createExportButton() {
    const exportButton = document.createElement('button');
    exportButton.id = 'exportMermaid';
    exportButton.textContent = 'PNGとして保存';
    exportButton.style.marginTop = '10px';

    //ボタンのクリックイベント
    exportButton.addEventListener('click', function () {
        const mermaidPreview = document.getElementById('mermaidPreview');
        if (mermaidPreview) {
            html2canvas(mermaidPreview).then(canvas => {
                const link = document.createElement('a');
                link.download = 'mermaid-diagram.png';
                link.href = canvas.toDataURL('image/png');
                link.click();
            }).catch(error => {
                console.error('PNG出力中にエラーが発生しました:', error);
            });
        } else {
            console.error('Mermaidプレビューエリアが見つかりません。');
        }
    });

    //Mermaidウインドウにボタンを追加
    const mermaidWindow = document.getElementById('mermaidWindow');
    if (mermaidWindow) {
        mermaidWindow.appendChild(exportButton);
        $(exportButton).button({
            icon: "ui-icon-image",
            showLabel: true
        });
    } else {
        console.error('Mermaidウインドウが見つかりません。');
    }
}

//#Results_Body の中身が変更されたら処理を実行
$p.on('change', 'Body', async function () {
    await initMermaid();

    await saveMermaidImage();
});

$p.events.after_set = function (args) {
    initMermaid();

}

$p.events.before_validate_Update = function (args) {

}

async function saveMermaidImage() {

    const mermaidPreview = document.getElementById('mermaidPreview');
    const canvas = await html2canvas(mermaidPreview);

    canvas.toBlob(async (blob) => {
        try {
            await navigator.clipboard.write([
                new ClipboardItem({ 'image/png': blob })
            ]);
            console.log('クリップボードにコピーしました。');
            // myClipboard2Columnを呼び出してクリップボードの内容をカラムに設定
            await myClipboard2Column('DescriptionA', false); // 'DescriptionA'は適切なカラム名に置き換えてください
        } catch (err) {
            console.error('クリップボードへのコピーに失敗しました:', err);
        }
    }, 'image/png');

}

//myClipboard2Column
async function myClipboard2Column(columnName, appendFlg) {
    try {
        const $control = $p.getControl(columnName);
        const clipboardContents = await navigator.clipboard.read();
        for (const item of clipboardContents) {
            if (item.types.includes("text/plain")) {
                const str0 = (appendFlg) ? $control.val() : "";
                const str1 = await (await item.getType("text/plain")).text();
                $p.set($control, str0 + str1);
                $p.setFormChanged($control);
            }
            else if (item.types.includes('image/png')) {
                if ($control.hasClass("upload-image")) {
                    if (!appendFlg) $p.set($control, "");
                    const blob = await item.getType("image/png");
                    $p.uploadImage($control.attr('id'), blob);
                    $p.setFormChanged($control);
                }
            }
        }
    }
    catch (error) {
        console.error(error.message);
    }
}

function createSaveImageButton() {
    const saveImageButton = document.createElement('button');
    saveImageButton.id = 'saveMermaidImage';
    saveImageButton.textContent = 'Mermaidをクリップボードにコピー';
    saveImageButton.style.marginTop = '10px';

    // ボタンのクリックイベント
    saveImageButton.addEventListener('click', function () {
        saveMermaidImage(); // saveMermaidImage() を実行
    });

    // Mermaidウインドウにボタンを追加
    const mermaidWindow = document.getElementById('mermaidWindow');
    if (mermaidWindow) {
        mermaidWindow.appendChild(saveImageButton);
        $(saveImageButton).button({
            icon: "ui-icon-clipboard",
            showLabel: true
        });
    } else {
        console.error('Mermaidウインドウが見つかりません。');
    }
}