'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 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, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');//.replace(/&/g, '&amp;').replace(/ /g, '&nbsp;');

// 新規ワークスペース
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();
  formatted = require('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); });
  let AsyncFunction = Object.getPrototypeOf(async function () { }).constructor
  let ocogeFunc = new AsyncFunction(ugj_createCode({}));
  await ocogeFunc();
  console.log('Code Execution done.');
}

// コードをダイアログで表示・保存
// エレメントのオブジェクトとかコールバックとか 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 = () => {
    let 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();
  elutil.cleanupLGPIO();
}