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

/**
 * canvasJs
 */
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const clearButton = document.getElementById("clear");
const saveButton = document.getElementById('saveSign');

let isDragging = false;
let lastPosition = {
    x: null,
    y: null
};

/**
 * 描画処理
 */
function draw(x, y) {
    if (!isDragging) {
        return;
    }

    // 線端の形状, 太さ, 色
    context.lineCap = "round";
    context.lineWidth = 3;
    context.strokeStyle = "black";

    if (lastPosition.x === null || lastPosition.y === null) {
        context.moveTo(x, y);
    } else {
        context.moveTo(lastPosition.x, lastPosition.y);
    }
    context.lineTo(x, y);
    context.stroke();

    // 座標保持
    lastPosition.x = x;
    lastPosition.y = y;
}

/**
 * 描画の開始
 */
function dragStart(event) {
    context.beginPath();
    isDragging = true;
}

/**
 * 描画の終了
 */
function dragEnd(event) {
    context.closePath();
    isDragging = false;

    // 座標リセット
    lastPosition.x = null;
    lastPosition.y = null;
}

/**
 * 描画の削除
 */
function clear() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "#FFFFFF"; //筆に白い絵の具をつけて
    context.fillRect(0, 0, 800, 200); //四角を描く
}

/**
 * イベント定義
 */
function init() {
    clear();
    // PC用
    canvas.addEventListener("mousedown", dragStart);
    canvas.addEventListener("mouseup", dragEnd);
    canvas.addEventListener("mouseout", dragEnd);
    canvas.addEventListener("mousemove", (e) => {
        //console.log(canvas.getBoundingClientRect().top);
        draw(
            e.layerX - canvas.getBoundingClientRect().left + 4,
            e.layerY - canvas.getBoundingClientRect().top + 130
        );
    });
    // SP用
    canvas.addEventListener("touchstart", dragStart);
    canvas.addEventListener("touchcancel", dragEnd);
    canvas.addEventListener("touchend", dragEnd);
    canvas.addEventListener("touchmove", (e) => {
        // 描きづらいのでスワイプさせない
        e.preventDefault();

        let x = e.touches[0].clientX - canvas.getBoundingClientRect().left;
        let y = e.touches[0].clientY - canvas.getBoundingClientRect().top;

        draw(x, y);
    });
    // リセット
    clearButton.addEventListener("click", clear);
    saveButton.addEventListener('click', saveSign);
}

function saveSign() {
    let base64 = canvas.toDataURL('image/png');
    /*
    console.log(base64);
    $p.apiCreate({
      "id": $p.id(),
      "data": {
        "ApiVersion": 1.1,
        "Title": "署名",
        "AttachmentHash": {
          "AttachmentA": {
            "ContentType": "image/png",
            "Name": "署名.txt",
            "Base64": base64
          }
        }
      },
      "done": function (data) {
        console.log(data);
      },
      "fail": function (data) {
        console.log(data);
      },
      "always": function (data) {
        console.log(data);
      }
    });
    */


    // Canvas から Blob オブジェクトを生成
    canvas.toBlob(async (blob) => {
        // 画像データをクリップボードに書き込む
        const item = new ClipboardItem({
            'image/png': blob
        });
        await navigator.clipboard.write([item]);
        //window.alert('クリップボードにコピーしました。');

        myClipboard2Column('DescriptionA', false);

        /*
            //ペースト
            let pasteArea = document.getElementById('Results_Body');
        
            navigator.clipboard.readText()
              .then(function(text) {
                pasteArea.style.display = 'block';
                pasteArea.focus();
                let KEvent = new KeyboardEvent("keydown", {
                  key: "A"
                });
                pasteArea.dispatchEvent(KEvent);
        
              });
        */
    });


}

$p.events.on_editor_load = function () {
    init();
}

/*
myClipboard2Column

引数
 columnName:対象カラム (ex:'分類A':ラベル、'ClassA':論理名)
 appendFlg:追記フラグ (true:追記、false:上書き)

使い方
 myClipboard2Column('説明です', true);
 myClipboard2Column('ClassA', false);

注意点
 ブラウザが前面のある時しか動作しません。
*/
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);
    }
}