Ruang kerja yang dapat diubah ukurannya

Aplikasi web yang baik akan mengubah ukuran Blockly untuk mengisi ruang yang tersedia di layar, bukan berukuran tetap. Ada beberapa cara untuk melakukannya, termasuk menggunakan iframe, CSS, dan penentuan posisi JavaScript. Halaman ini menunjukkan pendekatan overlay yang tangguh dan fleksibel.

Proses ini terdiri dari tiga langkah. Langkah pertama adalah menentukan area. Langkah kedua adalah menyuntikkan Blockly. Langkah ketiga adalah memosisikan Blockly di area ini.

1. Menentukan area

Dengan menggunakan tabel HTML atau div dengan CSS, buat area kosong yang mengalir ulang saat ukuran halaman diubah. Pastikan area tersebut memiliki ID (di halaman ini kita akan menyebutnya blocklyArea).

Berikut demo langsung sel tabel yang mengisi bagian bawah layar.

2. Menyuntikkan ruang kerja

Menyuntikkan Blockly sama dengan proses yang dijelaskan dalam menyuntikkan Blockly berukuran tetap. Tambahkan kode, elemen blocklyDiv, toolbox, dan panggilan injeksi.

Sekarang Blockly akan berjalan di halaman, tetapi tidak berada di tempat yang seharusnya (mungkin di luar layar).

3. Memosisikan ruang kerja

Langkah terakhir adalah memosisikan elemen blocklyDiv di atas elemen blocklyArea. Untuk melakukannya, hapus gaya height dan width dari blocklyDiv dan tambahkan posisi absolut:

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

Kemudian, ganti skrip injeksi dengan skrip yang juga memosisikan blocklyDiv di atas blocklyArea:

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();

Berikut adalah demo langsung Blockly yang mengisi bagian bawah layar.