mirror of
https://github.com/ocogeclub/ocoge.git
synced 2024-11-21 23:29:48 +00:00
620 lines
24 KiB
JavaScript
620 lines
24 KiB
JavaScript
'use strict';
|
||
|
||
let elutil = elUtil_new();
|
||
|
||
const testfunc = () => {
|
||
elutil.openURL('http://ocoge.club');
|
||
}
|
||
|
||
//============ User Customize Start ===============
|
||
// カスタムブロックカラー定義
|
||
Blockly.HSV_SATURATION = 0.55;
|
||
Blockly.HSV_VALUE = 0.75;
|
||
var gpio_color = '0';
|
||
var multimedia_color = '240';
|
||
var network_color = '340';
|
||
var special_color = '20';
|
||
var snippets_color = '90';
|
||
// テーマ
|
||
var theme = Blockly.Theme.defineTheme('ocoge', {
|
||
'base': Blockly.Themes.Classic,
|
||
'startHats': true,
|
||
'componentStyles': {
|
||
'toolboxBackgroundColour': 'aliceblue',
|
||
'flyoutBackgroundColour': 'lavender',
|
||
'toolboxForegroundColour': 'white',
|
||
'flyoutForegroundColour': 'steelblue'
|
||
},
|
||
'blockStyles': {
|
||
'gpio_blocks': {
|
||
"colourPrimary": gpio_color
|
||
},
|
||
'multimedia_blocks': {
|
||
"colourPrimary": multimedia_color
|
||
},
|
||
'network_blocks': {
|
||
"colourPrimary": network_color
|
||
},
|
||
'special_blocks': {
|
||
"colourPrimary": special_color
|
||
},
|
||
'snippets_blocks': {
|
||
"colourPrimary": snippets_color
|
||
}
|
||
},
|
||
'categoryStyles': {
|
||
"gpio_category": {
|
||
"colour": gpio_color
|
||
},
|
||
"multimedia_category": {
|
||
"colour": multimedia_color
|
||
},
|
||
"network_category": {
|
||
"colour": network_color
|
||
},
|
||
"special_category": {
|
||
"colour": special_color
|
||
},
|
||
"snippets_category": {
|
||
"colour": snippets_color
|
||
}
|
||
},
|
||
});
|
||
|
||
// Customize messages
|
||
Blockly.Msg["CONTROLS_IF_MSG_THEN"] = "ならば";
|
||
Blockly.Msg["CONTROLS_REPEAT_INPUT_DO"] = "";
|
||
Blockly.Msg["MATH_CHANGE_TITLE"] = "変数 %1 を %2 増やす";
|
||
Blockly.Msg["VARIABLES_SET"] = "変数 %1 を %2 にする";
|
||
// Blockly.Msg["TEXT_PRINT_TITLE"] = "ダイアログに %1 を表示";
|
||
Blockly.Msg["LOGIC_BOOLEAN_FALSE"] = "偽";
|
||
Blockly.Msg["LOGIC_BOOLEAN_TOOLTIP"] = "真 または 偽 を返します。";
|
||
Blockly.Msg["LOGIC_BOOLEAN_TRUE"] = "真";
|
||
// ローカライズ対応の準備
|
||
Blockly.Msg["UGJ_CONTROL_FOR_TITLE"] = "%1 %2 を %3 から %4 まで %5 ずつ %6 %7 %8";
|
||
Blockly.Msg["UGJ_CONTROL_FOR_INDEX"] = "番号";
|
||
Blockly.Msg["UGJ_CONTROL_FOR_INCREASE"] = "増やして";
|
||
Blockly.Msg["UGJ_CONTROL_FOR_DECREASE"] = "減らして";
|
||
Blockly.Msg["UGJ_CONTROL_FOR_TOOLTIP"] = "インデックス番号を決められた数ずつ増やし（減らし）ながら、ステートメントを実行します。";
|
||
Blockly.Msg["UGJ_FOREACH_TITLE"] = "リスト %1 の各 %2 について %3 %4";
|
||
Blockly.Msg["UGJ_FOREACH_ITEM"] = "項目";
|
||
Blockly.Msg["UGJ_FOREACH_TOOLTIP"] = "リストの各項目について、その項目を変数「項目」としてステートメントを実行します。";
|
||
|
||
Blockly.Msg["GPIOCHIP_OPEN_TITLE"] = "GPIO を使えるようにする";
|
||
Blockly.Msg["GPIOCHIP_OPEN_TOOLTIP"] = "GPIOを初期化して接続します。";
|
||
Blockly.Msg["GPIOCHIP_CLOSE_TITLE"] = "GPIO の後片付けをする";
|
||
Blockly.Msg["GPIOCHIP_CLOSE_TOOLTIP"] = "GPIOとの接続を終了します。";
|
||
Blockly.Msg["GPIOCHIP_CLOSE_TITLE"] = "GPIO の後片付けをする";
|
||
Blockly.Msg["GPIO_CLAIM_INPUT_TITLE"] = "GPIO %1 を入力モードにして %2";
|
||
Blockly.Msg["GPIO_CLAIM_INPUT_TOOLTIP"] = "GPIO端子を入力モードにして、プルアップ・プルダウン・無しを設定します。";
|
||
Blockly.Msg["GPIO_CLAIM_OUTPUT_TITLE"] = "GPIO %1 を出力モードにする";
|
||
Blockly.Msg["GPIO_CLAIM_OUTPUT_TOOLTIP"] = "GPIO端子のモードを出力に設定します。";
|
||
Blockly.Msg["GPIO_READ_TITLE"] = "GPIO %1 の値";
|
||
Blockly.Msg["GPIO_READ_TOOLTIP"] = "GPIO端子の値をデジタル値（0または1）で読み取ります。";
|
||
Blockly.Msg["GPIO_WRITE_TITLE"] = "GPIO %1 の値を %2 にする";
|
||
Blockly.Msg["GPIO_WRITE_TOOLTIP"] = "GPIO端子の値をデジタル値（0または1）で出力します。";
|
||
Blockly.Msg["TX_SERVO_TITLE"] = "GPIO %1 のサーボモータの回転を %2 にする";
|
||
Blockly.Msg["TX_SERVO_TOOLTIP"] = "サーボモータの回転をパルス幅(1000～2000μsec)までの数値で指定します。";
|
||
Blockly.Msg["TX_PWM_TITLE"] = "PWM : GPIO %1 に、パルス周波数 %2 Hz, デューティー比 %3 %%で出力";
|
||
Blockly.Msg["TX_PWM_TOOLTIP"] = "パルス周波数をセットして、GPIO端子がPWM出力できるようにします。レンジは100固定です。";
|
||
Blockly.Msg["I2C_OPEN_TITLE"] = "アドレス %1 の I2C デバイスを開く";
|
||
Blockly.Msg["I2C_OPEN_TOOLTIP"] = "I2C接続されたデバイスとの通信を開始します。一度にオープンできるI2Cデバイスはひとつだけです。";
|
||
Blockly.Msg["SERIAL_OPEN_TITLE"] = "シリアルポート %1 を速度 %2 bpsで開く";
|
||
Blockly.Msg["SERIAL_OPEN_TOOLTIP"] = "シリアルデバイスとの接続を開きます。";
|
||
Blockly.Msg["SERIAL_CLOSE_TITLE"] = "シリアルポートを閉じる";
|
||
Blockly.Msg["SERIAL_CLOSE_TOOLTIP"] = "シリアルデバイスとの接続を閉じます。";
|
||
Blockly.Msg["SERIAL_WRITE_TITLE"] = "シリアルポートに %1 を送信する";
|
||
Blockly.Msg["SERIAL_WRITE_TOOLTIP"] = "シリアル接続されたデバイスにデータを送信します。シリアルポートは開かれていなくてはいけません。";
|
||
Blockly.Msg["SERIAL_READ_TITLE"] = "シリアルポートから %1 文字読み込む";
|
||
Blockly.Msg["SERIAL_READ_TOOLTIP"] = "オープン済みシリアルポートから、指定のバイト数だけデータを読み込みます。";
|
||
Blockly.Msg["I2C_CLOSE_TITLE"] = "I2C デバイスを閉じる";
|
||
Blockly.Msg["I2C_CLOSE_TOOLTIP"] = "I2C接続されたデバイスと通信を切断します。";
|
||
Blockly.Msg["I2C_WRITE_BYTE_TITLE"] = "デバイスに１バイトデータ %1 を送信";
|
||
Blockly.Msg["I2C_WRITE_BYTE_TOOLTIP"] = "i2cデバイスに１バイトデータを送信します。0-0xFFの範囲の数字で入力してください。";
|
||
Blockly.Msg["I2C_READ_BYTE_TITLE"] = "I2C デバイスから 1 バイト受け取る";
|
||
Blockly.Msg["I2C_READ_BYTE_TOOLTIP"] = "オープン済み I2C デバイスからデータを 1 バイト受け取ります。";
|
||
Blockly.Msg["I2C_WRITE_BYTE_DATA_TITLE"] = "レジスタ %1 に %2 を書き込む";
|
||
Blockly.Msg["I2C_WRITE_BYTE_DATA_TOOLTIP"] = "デバイスの指定されたレジスタに1バイトを書き込みます。";
|
||
Blockly.Msg["I2C_READ_BYTE_DATA_TITLE"] = "レジスタ %1 の値";
|
||
Blockly.Msg["I2C_READ_BYTE_DATA_TOOLTIP"] = "デバイスの指定されたレジスタから1バイトを読み込みます。";
|
||
Blockly.Msg["I2C_READ_DEVICE_TITLE"] = "i2cデバイスから %1 バイト受け取る";
|
||
Blockly.Msg["I2C_READ_DEVICE_TOOLTIP"] = "デバイスから指定したバイト数のデータを受け取ります。データが指定の長さより短いこともあります。";
|
||
Blockly.Msg["I2C_WRITE_DEVICE_TITLE"] = "i2c デバイスに %1 を送信";
|
||
Blockly.Msg["I2C_WRITE_DEVICE_TOOLTIP"] = "i2c デバイスにデータを送信します。";
|
||
|
||
Blockly.Msg["UGJ_BME280_TITLE"] = "BME280（アドレス %1 ）の計測値： %2 %3 %4";
|
||
Blockly.Msg["UGJ_BME280_TOOLTIP"] = "環境センサーBME280で、気温（摂氏）、湿度（％）、気圧（hPa）を計測し、それぞれを変数に代入します。";
|
||
Blockly.Msg["UGJ_BME280_READ_TEMP"] = "気温";
|
||
Blockly.Msg["UGJ_BME280_READ_HUM"] = "湿度";
|
||
Blockly.Msg["UGJ_BME280_READ_PRES"] = "気圧";
|
||
|
||
Blockly.Msg["UGJ_CODECHAR_TITLE"] = "コード %1 の文字";
|
||
Blockly.Msg["UGJ_CODECHAR_TOOLTIP"] = "文字コードを文字に変換します。";
|
||
Blockly.Msg["UGJ_CHARCODE_TITLE"] = "%1 の文字コード";
|
||
Blockly.Msg["UGJ_CHARCODE_TOOLTIP"] = "入力テキストの１文字目の文字コードを返します。";
|
||
Blockly.Msg["UGJ_HEXTODEC_TITLE"] = "0x %1";
|
||
Blockly.Msg["UGJ_HEXTODEC_TOOLTIP"] = "16進数を10進数に変換します。";
|
||
Blockly.Msg["UGJ_DECTOHEX_TITLE"] = "%1 を16進数に変換";
|
||
Blockly.Msg["UGJ_DECTOHEX_TOOLTIP"] = "10進数を16進数に変換します。";
|
||
|
||
Blockly.Msg["UGJ_CANVAS_INIT_TITLE"] = "キャンバスを表示";
|
||
Blockly.Msg["UGJ_CANVAS_INIT_TOOLTIP"] = "キャンバスを表示し、使用できるようにします。";
|
||
Blockly.Msg["UGJ_FACEAPI_TITLE"] = "TensorFlowによる顔検出： %1 ランドマークを検出 %2 %3";
|
||
Blockly.Msg["UGJ_FACEAPI_TOOLTIP"] = "TensorFlow とFaceAPI をロードし、顔検出をできるようにします。";
|
||
|
||
Blockly.Msg["UGJ_SLEEP_TITLE"] = "%1 秒待つ";
|
||
Blockly.Msg["UGJ_SLEEP_TOOLTIP"] = "指定した秒数だけ処理を中断します。";
|
||
|
||
// Customize Toolbox
|
||
class CustomCategory extends Blockly.ToolboxCategory {
|
||
/** Constructor for a custom category. @override */
|
||
constructor(categoryDef, toolbox, opt_parent) {
|
||
super(categoryDef, toolbox, opt_parent);
|
||
}
|
||
/** @override */
|
||
addColourBorder_(colour) {
|
||
this.rowDiv_.style.backgroundColor = colour;
|
||
}
|
||
/** @override */
|
||
setSelected(isSelected) {
|
||
// We do not store the label span on the category, so use getElementsByClassName.
|
||
var labelDom = this.rowDiv_.getElementsByClassName('blocklyTreeLabel')[0];
|
||
if (isSelected) {
|
||
// Change the background color of the div to white.
|
||
this.rowDiv_.style.backgroundColor = 'white';
|
||
// Set the colour of the text to the colour of the category.
|
||
labelDom.style.color = this.colour_;
|
||
this.iconDom_.style.color = this.colour_;
|
||
} else {
|
||
// Set the background back to the original colour.
|
||
this.rowDiv_.style.backgroundColor = this.colour_;
|
||
// Set the text back to white.
|
||
labelDom.style.color = 'white';
|
||
this.iconDom_.style.color = 'white';
|
||
}
|
||
// This is used for accessibility purposes.
|
||
Blockly.utils.aria.setState(/** @type {!Element} */(this.htmlDiv_),
|
||
Blockly.utils.aria.State.SELECTED, isSelected);
|
||
}
|
||
}
|
||
Blockly.registry.register(
|
||
Blockly.registry.Type.TOOLBOX_ITEM,
|
||
Blockly.ToolboxCategory.registrationName,
|
||
CustomCategory, true);
|
||
//============ User Customize End ===============
|
||
|
||
|
||
//背景canvasとマスコットの準備
|
||
const ugj_canvasBgImg = (imgSrc, x, y) => { //x,y == -1: center or middle
|
||
let el = document.getElementById('canvas_bg');
|
||
let ctx = el.getContext('2d');
|
||
ctx.fillStyle = 'rgb(255,255,255)';
|
||
ctx.fillRect(0, 0, 480, 360);
|
||
let img = new Image();
|
||
img.src = imgSrc;
|
||
img.onload = () => {
|
||
if (x < 0) { //センタリング
|
||
let w = img.width;
|
||
if (w >= 480) x = 0;
|
||
else x = Math.floor((480 - w) / 2);
|
||
}
|
||
if (y < 0) { //縦中寄せ
|
||
let h = img.height;
|
||
if (h >= 360) y = 0;
|
||
else y = Math.floor((360 - h) / 2);
|
||
}
|
||
ctx.drawImage(img, x, y);
|
||
}
|
||
};
|
||
|
||
// HTML部品のインスタンス - 画面上の必要な部品はすべてここで取得しておく
|
||
let ugjel_displayArea = document.getElementById('display_area'); // ディスプレイ部
|
||
let ugjel_blackboard = document.getElementById('blackboard'); // 黒板
|
||
let ugjel_inputForm = document.getElementById('inputForm'); // 入力フォーム
|
||
let ugjel_inputBox = document.getElementById('inputBox'); // 入力フィールド
|
||
|
||
// その他のプロパティ
|
||
let ugj_inputEvLstnrID = 0; // 入力フォームの動的イベントリスナの最新のID
|
||
let ugj_sounds = (names => { // サウンドファイルのいろいろの配列の初期化
|
||
let sounds = [];
|
||
names.forEach(value => {
|
||
let filepath = `./sounds/${value}.wav`;
|
||
sounds[value] = { 'file': filepath, 'audio': new Audio(filepath) };
|
||
});
|
||
return sounds;
|
||
})(['meow', 'bounce', 'type_chime', 'type_dink', 'type_tap', 'type_space', 'type_return']); // サウンドファイルのベース名のリスト
|
||
|
||
// メソッド
|
||
|
||
// マスコット選択
|
||
const ugj_selectMascot = async () => {
|
||
let fname = await elutil.selectMascotFile();
|
||
if (fname) {
|
||
ugj_canvasBgImg(fname, -1, -1);
|
||
elutil.setMascotFilePath(fname);
|
||
}
|
||
}
|
||
|
||
// サウンド再生 - 連続再生のため、再生開始後すぐにオーディオ要素を再生成する
|
||
const ugj_soundPlay = soundName => {
|
||
ugj_sounds[soundName]['audio'].play();
|
||
ugj_sounds[soundName]['audio'] = new Audio(ugj_sounds[soundName]['file']);
|
||
};
|
||
|
||
// OK,Cancel ２択のダイアログを表示
|
||
const ugj_confirm = (title, message, callback) => {
|
||
CustomDialog.show(title, message, {
|
||
showOkay: true,
|
||
onOkay: () => callback(true),
|
||
showCancel: true,
|
||
onCancel: () => callback(false)
|
||
});
|
||
};
|
||
|
||
const ugj_htmlEntities = str =>// HTMLエンティティのエスケープ
|
||
String(str).replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');//.replace(/&/g, '&').replace(/ /g, ' ');
|
||
|
||
// 新規ワークスペース
|
||
const ugj_newWorkspace = () => {
|
||
ugj_confirm('新規ワークスペース', '保存していない内容はすべて破棄されます。よろしいですか？', okey => {
|
||
if (okey) {
|
||
workspace.clear();
|
||
elutil.newFile();
|
||
}
|
||
});
|
||
}
|
||
|
||
// ワークスペースをファイルに保存・読込
|
||
const ugj_saveWorkspaceToFile = async () => {
|
||
let xml = Blockly.Xml.workspaceToDom(workspace);
|
||
let xml_text = Blockly.Xml.domToText(xml);
|
||
if (await elutil.saveWsFile(xml_text) === false) {
|
||
alert('保存できませんでした。');
|
||
}
|
||
}
|
||
const ugj_loadWorkspaceFromFile = async () => {
|
||
let xml_text = await elutil.loadWsFile();
|
||
if (xml_text.length > 0) {
|
||
let xml = Blockly.Xml.textToDom(xml_text);
|
||
Blockly.Xml.domToWorkspace(xml, workspace);
|
||
}
|
||
}
|
||
|
||
// ワークスペースを別名で保存
|
||
const ugj_saveWorkspaceAs = () => {
|
||
elutil.newFile();
|
||
ugj_saveWorkspaceToFile();
|
||
}
|
||
|
||
// ワークスペースをローカルストレージに保存・読込
|
||
const ugj_saveWorkspace = () => {
|
||
// Workspace
|
||
let xml = Blockly.Xml.workspaceToDom(workspace);
|
||
let xml_text = Blockly.Xml.domToText(xml);
|
||
localStorage.setItem("ocoge.xml", xml_text);
|
||
}
|
||
const ugj_loadWorkspace = () => {
|
||
// Workspace
|
||
let xml_text = localStorage.getItem("ocoge.xml");
|
||
if (xml_text !== null) {
|
||
if (xml_text.length != 0) {
|
||
let xml = Blockly.Xml.textToDom(xml_text);
|
||
Blockly.Xml.domToWorkspace(xml, workspace);
|
||
}
|
||
}
|
||
}
|
||
|
||
// // Python コードフォーマッタ YAPF をコール
|
||
// const ugj_pyBeautify = (code) => {
|
||
// let formatted;
|
||
// formatted = window.ocogeapi.child_process.spawnSync('python3', ['-m', 'yapf'], { input: code }).stdout.toString();
|
||
// return formatted;
|
||
// }
|
||
// Python コードフォーマッタ Black をコール
|
||
const ugj_pyBeautify = (code) => {
|
||
let formatted;
|
||
formatted = window.ocogeapi.child_process.spawnSync('python3', ['-m', 'black', '-'], { input: code }).stdout.toString();
|
||
return formatted;
|
||
}
|
||
|
||
// ワークスペースからコードを生成して必要であれば整形処理をする
|
||
const ugj_createCode = (args) => {
|
||
const addAsync = args.async || false;
|
||
const beautify = args.beautify || false;
|
||
const prettify = args.prettify || false;
|
||
const ext = args.ext || 'js';
|
||
|
||
let code;
|
||
if (ext == 'py') { // Python コード出力
|
||
try {
|
||
code = Blockly.Python.workspaceToCode(workspace);
|
||
} catch (e) { // Pythonコードを持たないブロックがある場合
|
||
window.alert('Python 非対応のブロックが使用されています。\n' + e.message);
|
||
}
|
||
code = Blockly.Python.workspaceToCode(workspace);
|
||
}
|
||
else { // Javascript コード出力
|
||
code = Blockly.JavaScript.workspaceToCode(workspace);
|
||
}
|
||
|
||
if (ext == 'py') { //Python
|
||
// コードを綺麗に
|
||
if (beautify) code = ugj_pyBeautify(code);
|
||
} else { // JavaScript
|
||
// await使用のため、必要に応じてコード全体をasync付き即時関数でラップ
|
||
if (addAsync) {
|
||
code = [
|
||
'(async () => {',
|
||
code,
|
||
'})();'
|
||
].join('\n');
|
||
}
|
||
// コードを綺麗に
|
||
if (beautify) code = js_beautify(code, { indent_size: 2 });
|
||
}
|
||
// シンタックスハイライト(HTML化): 先に HTML エンティティをエスケープ
|
||
if (prettify) code = PR.prettyPrintOne(ugj_htmlEntities(code), ext, true);
|
||
|
||
return code;
|
||
}
|
||
|
||
// ブロックスクリプト実行
|
||
const ugj_runCode = async () => {
|
||
document.activeElement.blur(); //実行ボタンからフォーカスを外す：エンターキー押下が悪さをするため
|
||
let code = ugj_createCode({ 'async': true });
|
||
await eval(code).catch(e => { alert(e); });
|
||
}
|
||
|
||
// コードをダイアログで表示・保存
|
||
// エレメントのオブジェクトとかコールバックとか Python対応とか
|
||
// 色々この中で完結させてみる
|
||
const ugj_showCode = () => {
|
||
var ext = 'js';
|
||
const dialog = document.getElementById('codeDlg');
|
||
const content = document.getElementById('dlgContent');
|
||
const btn_close = document.getElementById('dlgClose');
|
||
const btn_export = document.getElementById('dlgExport');
|
||
const chkbox_cli = document.getElementById('dlgCli');
|
||
|
||
const dialog_title = document.getElementById('dlgTitle');
|
||
|
||
const showCode = () =>
|
||
content.innerHTML = ugj_createCode({ 'beautify': true, 'ext': ext, 'prettify': true });
|
||
|
||
showCode();
|
||
|
||
dialog.showModal();
|
||
|
||
const close_cb = () => {
|
||
dialog.close();
|
||
btn_close.removeEventListener('click', close_cb);
|
||
btn_export.removeEventListener('click', export_cb);
|
||
}
|
||
const export_cb = () => {
|
||
code = ugj_createCode({ 'ext': ext, 'async': true, 'beautify': true });
|
||
// blackboardWrite()とwindow.alert()、fukidashi()をconsole.log()に書き換え、
|
||
// document... と ugj_... と elutil... をコメントアウト（ブラウザ関連部分の追放という意味では不完全なので注意）
|
||
// あと正規表現もいい加減
|
||
if (chkbox_cli.checked && ext == 'js')
|
||
code = code.replace(/const appendDiv[^#]*\/\/#/gm, 'const blackboardWrite = text => console.log(text);').replace('window.alert', 'console.log').replace(/ugj_fukidashi(.*), \d+(\);)/gm, 'console.log$1$2').replace(/(^(?=.*document.)[^;]*;)/gm, '/* $1 */').replace(/(^(?=.*ugj_)[^;]*;)/gm, '/* $1 */').replace(/(^(?=.*elutil.)[^;]*;)/gm, '/* $1 */');
|
||
if (elutil.saveFile(code, ext) === false) {
|
||
alert('保存できませんでした。');
|
||
}
|
||
close_cb();
|
||
}
|
||
btn_close.addEventListener('click', close_cb);
|
||
btn_export.addEventListener('click', export_cb);
|
||
document.addEventListener('keypress', (ev) => {
|
||
if (ev.key == 'p' && ext == 'js') {
|
||
ext = 'py';
|
||
showCode();
|
||
}
|
||
});
|
||
document.addEventListener('keyup', (ev) => {
|
||
if (ev.key == 'p') {
|
||
ext = 'js';
|
||
showCode();
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
// フキダシ
|
||
let ugj_fdTimeoutID = null;
|
||
let ugj_fdRecentBox = null;
|
||
const ugj_fukidashi = (text, sec) => {
|
||
// Canvas Context
|
||
const context = document.getElementById('canvas').getContext('2d');
|
||
// 吹き出しを消去する関数
|
||
const clearFd = (x, y, w, h) => context.clearRect(x, y, w, h);
|
||
// 前回の思い出を忘れる
|
||
if (ugj_fdRecentBox !== null) {
|
||
clearFd(ugj_fdRecentBox.x, ugj_fdRecentBox.y, ugj_fdRecentBox.w, ugj_fdRecentBox.h);
|
||
clearTimeout(ugj_fdTimeoutID);
|
||
ugj_fdRecentBox = null;
|
||
}
|
||
|
||
// 基本設定
|
||
let rtopX = 170; // フキダシ右上 X座標
|
||
let rtopY = 40; // フキダシ右上 Y座標
|
||
let boxWidth = 140;
|
||
let padding = 5;
|
||
let radius = 5;// 円弧の半径
|
||
|
||
// 吹き出しの背景色
|
||
context.fillStyle = "#b7e6ff";
|
||
|
||
// テキスト設定
|
||
let limitedWidth = boxWidth - (padding * 2);
|
||
let size = 14;
|
||
context.font = size + "px ''";
|
||
|
||
// テキスト調整 行に分解
|
||
let lineTextList = text.split("\n");
|
||
let newLineTextList = [];
|
||
lineTextList.forEach((lineText) => {
|
||
if (context.measureText(lineText).width > limitedWidth) {
|
||
characterList = lineText.split("");// 1文字ずつ分割
|
||
let preLineText = "";
|
||
lineText = "";
|
||
characterList.forEach((character) => {
|
||
lineText += character;
|
||
if (context.measureText(lineText).width > limitedWidth) {
|
||
newLineTextList.push(preLineText);
|
||
lineText = character;
|
||
}
|
||
preLineText = lineText;
|
||
});
|
||
}
|
||
newLineTextList.push(lineText);
|
||
});
|
||
let lineLength = newLineTextList.length;
|
||
|
||
// 角丸
|
||
let width = boxWidth;// 枠の幅
|
||
let height = (size * lineLength) + (padding * 3); // 枠の高さ
|
||
let toRadianCoefficient = Math.PI / 180; // 角度からラジアンへの変換係数
|
||
// 角丸原点（左上座標）
|
||
let boxOrigin = {
|
||
"x": rtopX - width,
|
||
"y": rtopY,
|
||
}
|
||
// 円弧から円弧までの直線は自動で引かれます、角度は回り方によって変わります。
|
||
// arc(中心x, 中心y, 半径, 開始角度, 終了角度, 反時計回り)
|
||
context.beginPath();
|
||
context.arc(boxOrigin.x + radius, boxOrigin.y + radius, radius, 180 * toRadianCoefficient, 270 * toRadianCoefficient, false);// 左上
|
||
context.arc(boxOrigin.x + width - radius, boxOrigin.y + radius, radius, 270 * toRadianCoefficient, 0, false);// 右上
|
||
context.arc(boxOrigin.x + width - radius, boxOrigin.y + height - radius, radius, 0, 90 * toRadianCoefficient, false);// 右下
|
||
context.arc(boxOrigin.x + radius, boxOrigin.y + height - radius, radius, 90 * toRadianCoefficient, 180 * toRadianCoefficient, false);// 左下
|
||
context.closePath();
|
||
context.fill();
|
||
|
||
// 矢印（ヒゲ）
|
||
let arrow = {
|
||
"x": rtopX - width / 2 + 40,
|
||
"y": rtopY + height + 10,
|
||
"width": 10,
|
||
"height": 10,
|
||
}
|
||
context.beginPath();
|
||
context.moveTo(arrow.x, arrow.y);
|
||
context.lineTo(arrow.x, arrow.y - arrow.height);
|
||
context.lineTo(arrow.x - arrow.width, arrow.y - arrow.height);
|
||
context.fill();
|
||
|
||
// テキスト描画
|
||
context.fillStyle = "#000000";
|
||
newLineTextList.forEach((lineText, index) => {
|
||
context.fillText(lineText, boxOrigin.x + padding, boxOrigin.y + padding + (size * (index + 1)));
|
||
});
|
||
|
||
// 描画した吹き出しの位置情報を保存
|
||
ugj_fdRecentBox = { x: boxOrigin.x, y: boxOrigin.y, w: width, h: height + arrow.height };
|
||
// 指定時間後に消去（0以下で自動消去なし）
|
||
if (sec > 0) {
|
||
ugj_fdTimeoutID = setTimeout(() => {
|
||
clearFd(boxOrigin.x, boxOrigin.y, width, height + arrow.height);
|
||
}, sec * 1000);
|
||
}
|
||
|
||
// return [boxOrigin.x, boxOrigin.y, width, height+arrow.height];
|
||
// https://qiita.com/horikeso/items/95595f379a8dfa63c34a
|
||
}
|
||
|
||
// コードジェネレータモード（Javascript/Python切り替え）
|
||
var isPyMode;
|
||
const ugj_pyMode = (checked) => isPyMode = checked;
|
||
|
||
|
||
//=====================================
|
||
//======= Blockly GUI codes ===========
|
||
// Use in a block or block definition:
|
||
|
||
// Resizable workspace injection script
|
||
var blocklyArea = document.getElementById('blocklyArea');
|
||
var blocklyDiv = document.getElementById('blocklyDiv');
|
||
// var workspace = Blockly.inject(blocklyDiv,
|
||
// {toolbox: document.getElementById('toolbox')});
|
||
var workspace = Blockly.inject(blocklyDiv,
|
||
{
|
||
toolbox: document.getElementById('toolbox'),
|
||
theme: theme,
|
||
renderer: 'thrasos',
|
||
|
||
scrollbars: true,
|
||
grid: {
|
||
spacing: 20,
|
||
length: 1,
|
||
colour: '#888',//888
|
||
snap: true
|
||
},
|
||
zoom: { startScale: 1.0, controls: true },
|
||
trashcan: true,
|
||
media: './google-blockly/media/'
|
||
});
|
||
var onresize = function (e) {
|
||
// Compute the absolute coordinates and dimensions of blocklyArea.
|
||
var element = blocklyArea;
|
||
var x = 0;
|
||
var y = 0;
|
||
do {
|
||
x += element.offsetLeft;
|
||
y += element.offsetTop;
|
||
element = element.offsetParent;
|
||
} while (element);
|
||
// Position blocklyDiv over blocklyArea.
|
||
blocklyDiv.style.left = x + 'px';
|
||
blocklyDiv.style.top = y + 'px';
|
||
blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
|
||
blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
|
||
Blockly.svgResize(workspace);
|
||
};
|
||
window.addEventListener('resize', onresize, false);
|
||
onresize();
|
||
Blockly.svgResize(workspace);
|
||
//=====================================
|
||
//=====================================
|
||
|
||
|
||
// ワークスペースの未保存の変更のフラグ
|
||
const ugj_wsUpdateCB = event => {
|
||
if (event.type != Blockly.Events.UI) {
|
||
elutil.setWsChanged(true);
|
||
}
|
||
}
|
||
|
||
// ウィンドウロード・アンロード時
|
||
window.onload = () => {
|
||
var menu = document.getElementById('conmenu'); //独自コンテキストメニュー
|
||
var area = document.getElementById('dlgContent'); //対象エリア
|
||
var body = document.body; //bodyエリア
|
||
body.oncontextmenu = () => false;
|
||
//右クリック時に独自コンテキストメニューを表示する
|
||
area.addEventListener('contextmenu', function (e) {
|
||
menu.style.left = e.pageX + 'px';
|
||
menu.style.top = e.pageY + 'px';
|
||
menu.classList.add('on');
|
||
});
|
||
//左クリック時に独自コンテキストメニューを非表示にする
|
||
body.addEventListener('click', function () {
|
||
if (menu.classList.contains('on')) {
|
||
menu.classList.remove('on');
|
||
}
|
||
});
|
||
|
||
// ワークスペースといくつかの環境のオートリストア
|
||
ugj_loadWorkspace();
|
||
elutil.loadPrefsFromLS();
|
||
setTimeout(() => { // 環境設定のロードが終わってからイベントリスナを作成
|
||
workspace.addChangeListener(ugj_wsUpdateCB);
|
||
}, 100);
|
||
// 背景canvas
|
||
ugj_canvasBgImg(elutil.getMascotFilePath(), -1, -1);
|
||
}
|
||
window.onbeforeunload = () => {
|
||
ugj_saveWorkspace();
|
||
elutil.savePrefsToLS();
|
||
elutil.killAllChildren();
|
||
}
|
||
|