サイズ変更可能なワークスペース

優れたウェブアプリケーションでは、固定サイズではなく、画面上の使用可能なスペースを埋めるために Blockly のサイズを変更します。これを行うには、iframe、CSS、JavaScript の配置方法など、いくつかの方法があります。このページでは、堅牢で柔軟なオーバーレイのアプローチについて説明します。

このプロセスは 3 段階で行います。まず、領域を定義します。2 つ目のステップでは、Blockly を挿入します。3 つ目のステップでは、この領域に Blockly を配置します。

1. 領域を定義する

HTML テーブルまたは CSS を含む div を使用して、ページのサイズ変更に応じてリフローされる空の領域を作成します。領域に ID があることを確認します（このページでは blocklyArea とします）。

画面下部に表示される表のセルのライブデモをご覧ください。

2. ワークスペースを挿入する

Blockly の注入は、固定サイズの Blockly の注入で説明されているプロセスと同じです。コード、blocklyDiv 要素、ツールボックス、インジェクション呼び出しを追加します。

これで、Blockly はページ上で実行され、正しい場所（おそらく画面外）に配置されていないはずです。

3. ワークスペースの位置を決める

最後のステップでは、blocklyArea 要素の上に blocklyDiv 要素を配置します。そのためには、blocklyDiv から height および width スタイルを削除し、絶対位置を追加します。

<div id="blocklyDiv" style="position: absolute"></div>

次に、インジェクションスクリプトを、「blocklyArea」の上に「blocklyDiv」を配置するスクリプトに置き換えます。

const blocklyArea = document.getElementById('blocklyArea');
const blocklyDiv = document.getElementById('blocklyDiv');
const workspace = Blockly.inject(blocklyDiv,
    {toolbox: document.getElementById('toolbox')});
const onresize = function(e) {
  // Compute the absolute coordinates and dimensions of blocklyArea.
  const element = blocklyArea;
  let x = 0;
  let 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 のライブデモが表示されています。