Yeniden boyutlandırılabilir çalışma alanı

İyi bir web uygulaması, sabit bir boyuta sahip olmak yerine Blockly'yi ekranın kullanılabilir alanını dolduracak şekilde yeniden boyutlandırır. Bunu yapmak için iFrame, CSS ve JavaScript konumlandırması kullanmak gibi çeşitli yöntemler vardır. Bu sayfada, sağlam ve esnek bir yer paylaşımı yaklaşımı gösterilmektedir.

Bu üç adımlık bir işlemdir. İlk adım, alanı tanımlamaktır. İkinci adım, Blockly'yi yerleştirmektir. Üçüncü adımda Blockly'yi bu alanın üzerine yerleştirin.

1. Alanı tanımlama

CSS ile birlikte bir HTML tablosu veya div kullanarak, sayfa yeniden boyutlandırıldığında yeniden akış sağlayan boş bir alan oluşturun. Alan kimliğinin (bu sayfada blocklyArea olarak adlandırılacak) olduğundan emin olun.

Ekranın alt kısmını dolduran bir tablo hücresinin canlı demosunu burada bulabilirsiniz.

2. Çalışma alanını yerleştirme

Blockly'yi yerleştirme, sabit boyutlu Blockly'yi yerleştirme bölümünde açıklanan işlemle aynıdır. Kodu, blocklyDiv öğesini, araç kutusunu ve ekleme çağrısını ekleyin.

Blockly artık sayfada çalışıyor olmalıdır ancak olması gereken yerde değildir (muhtemelen ekran dışındadır).

3. Çalışma alanını konumlandırma

Son adım, blocklyDiv öğesini blocklyArea öğesinin üzerine yerleştirmektir. Bunu yapmak için blocklyDiv öğesinden tüm height ve width stillerini kaldırın ve mutlak konumlandırma ekleyin:

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

Ardından, yerleştirme komut dosyasını blocklyDiv öğesini blocklyArea üzerine de yerleştiren bir komut dosyasıyla değiştirin:

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

Ekranın alt kısmını dolduran Blockly'nin canlı demosunu burada bulabilirsiniz.